/*
Theme Name:        The Muslim Apologist - Child Theme
Theme URI:         https://themuslimapologist.online
Description:       A modernist-minimalist dark child theme for Twenty Twenty-Five. Gold & black palette derived from the official TMA logo. Playfair Display headings, Inter body text.
Author:            The Muslim Apologist (MENJ)
Author URI:        https://themuslimapologist.online
Template:          twentytwentyfive
Version:           1.1.0
Requires at least: 6.5
Tested up to:      6.7
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       tma-child
Tags:              blog, minimalist, dark, custom-colors, custom-typography
*/

/* ==========================================================================
   COLOR SYSTEM — matched to design preview
   ─────────────────────────────────────────
   Gold:        #F5C518  (primary brand, logo circle)
   Gold Light:  #F7D54A  (lighter shade, hover highlights)
   Gold Muted:  #D4A810  (links, subdued accents)
   Gold Deep:   #B8920E  (darkest gold, strong borders)
   TMA Black:   #0A0A0A  (primary background)
   Charcoal:    #1A1A1A  (header, card backgrounds)
   Dark Gray:   #2A2A2A  (raised surfaces, sidebar)
   Mid Gray:    #4A4A4A  (borders, dividers)
   Off-White:   #F0F0F0  (body text on dark bg)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   SELF-HOSTED ARABIC FONTS
   ─────────────────────────────────────────
   MSHQ   — Mushaf Uthmani script  (Quranic text)
   HQPB   — Hafs Quranic Bold      (alternate display)
   Noto Naskh Arabic — readable Arabic body text (OFL licence)
   Files live in /wp-content/themes/tma-child/assets/fonts/
   ========================================================================== */

@font-face {
        font-family: 'MSHQ';
        src: url('assets/fonts/MushafUthmani-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

@font-face {
        font-family: 'HQPB';
        src: url('assets/fonts/HafsQuranicBold.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}

@font-face {
        font-family: 'Noto Naskh Arabic';
        src: url('assets/fonts/NotoNaskhArabic-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
}

@font-face {
        font-family: 'Noto Naskh Arabic';
        src: url('assets/fonts/NotoNaskhArabic-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
}

:root {
        /* Gold family */
        --tma-gold:           #F5C518;
        --tma-gold-light:     #F7D54A;
        --tma-gold-muted:     #D4A810;
        --tma-gold-deep:      #B8920E;
        --tma-gold-pale:      rgba(245, 197, 24, 0.10);
        --tma-gold-glow:      rgba(245, 197, 24, 0.20);

        /* Dark family */
        --tma-black:          #0A0A0A;
        --tma-charcoal:       #1A1A1A;
        --tma-dark-gray:      #2A2A2A;
        --tma-mid-gray:       #4A4A4A;

        /* Light */
        --tma-off-white:      #F0F0F0;
        --tma-muted-text:     rgba(240, 240, 240, 0.60);
        --tma-subtle-text:    rgba(240, 240, 240, 0.40);

        /* Semantic */
        --tma-bg:             var(--tma-black);
        --tma-surface:        var(--tma-charcoal);
        --tma-surface-raised: var(--tma-dark-gray);
        --tma-border:         var(--tma-mid-gray);
        --tma-border-strong:  var(--tma-gold);
        --tma-text:           var(--tma-off-white);
        --tma-text-muted:     var(--tma-muted-text);
        --tma-accent:         var(--tma-gold);
        --tma-accent-hover:   var(--tma-gold-light);
        --tma-link:           var(--tma-gold-muted);
        --tma-link-hover:     var(--tma-gold);

        /* Typography */
        --tma-font-heading:   'Playfair Display', Georgia, serif;
        --tma-font-body:      'Inter', 'Helvetica Neue', Arial, sans-serif;
        --tma-font-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
        --tma-font-quran:     'MSHQ', 'HQPB', 'Noto Naskh Arabic', 'Scheherazade New', serif;
        --tma-font-arabic:    'Noto Naskh Arabic', 'Scheherazade New', Arial, serif;

        /* Type scale */
        --tma-text-xs:        0.75rem;
        --tma-text-sm:        0.875rem;
        --tma-text-base:      1rem;
        --tma-text-lg:        1.125rem;
        --tma-text-xl:        1.25rem;
        --tma-text-2xl:       1.5rem;
        --tma-text-3xl:       1.875rem;
        --tma-text-4xl:       2.25rem;
        --tma-text-5xl:       3rem;

        /* Spacing */
        --tma-sp-xs:  0.25rem;
        --tma-sp-sm:  0.5rem;
        --tma-sp-md:  1rem;
        --tma-sp-lg:  1.5rem;
        --tma-sp-xl:  2rem;
        --tma-sp-2xl: 3rem;
        --tma-sp-3xl: 4rem;
        --tma-sp-4xl: 6rem;

        /* Layout */
        --tma-content-max:  720px;
        --tma-wide-max:     1140px;
        --tma-radius-sm:    2px;
        --tma-radius-md:    4px;
        --tma-radius-lg:    8px;

        /* Motion */
        --tma-ease:         0.18s ease;
        --tma-ease-slow:    0.30s ease;
}


/* ==========================================================================
   GLOBAL RESET & BASE — dark mode default
   ========================================================================== */

*,
*::before,
*::after {
        box-sizing: border-box;
}

html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: var(--tma-black);
}

body,
.wp-site-blocks {
        font-family: var(--tma-font-body);
        font-size: var(--tma-text-base);
        line-height: 1.75;
        color: var(--tma-off-white);
        background-color: var(--tma-black);
        margin: 0;
        padding: 0;
}


/* ==========================================================================
   SITE HEADER
   ========================================================================== */

header.wp-block-template-part,
.wp-block-template-part[data-slug="header"] {
        background-color: var(--tma-charcoal) !important;
        border-bottom: 1px solid var(--tma-mid-gray) !important;
}

.wp-block-site-title a,
.wp-block-site-title {
        font-family: var(--tma-font-heading) !important;
        font-size: var(--tma-text-xl) !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        color: var(--tma-off-white) !important;
        text-decoration: none !important;
}

.wp-block-site-title a:hover {
        color: var(--tma-gold) !important;
}

.wp-block-site-tagline {
        font-size: var(--tma-text-xs) !important;
        font-weight: 400 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--tma-muted-text) !important;
}

/* ── Custom Logo ── */
.wp-block-site-logo,
.custom-logo-link {
        display: flex !important;
        align-items: center !important;
        line-height: 0 !important;
        text-decoration: none !important;
}

.custom-logo,
.wp-block-site-logo img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        /* Subtle gold glow ring */
        box-shadow:
                0 0 0 2px var(--tma-charcoal),
                0 0 0 4px rgba(245, 197, 24, 0.22) !important;
        transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.custom-logo:hover,
.wp-block-site-logo img:hover {
        box-shadow:
                0 0 0 2px var(--tma-charcoal),
                0 0 0 4px rgba(245, 197, 24, 0.55) !important;
        transform: scale(1.04) !important;
}

/* ── Site branding group (logo + title + tagline) ── */
.wp-block-group.tma-site-branding,
.wp-block-site-logo + .wp-block-group {
        display: flex !important;
        align-items: center !important;
        gap: 0.85rem !important;
}

/* ── Hero logo treatment ── */
.tma-hero-logo {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow:
                0 0 0 3px var(--tma-charcoal),
                0 0 0 5px rgba(245, 197, 24, 0.25),
                0 8px 32px rgba(0, 0, 0, 0.6);
        margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
        .tma-hero-logo {
                float: left;
                margin: 0 1.5rem 1rem 0;
        }
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.wp-block-navigation {
        background-color: transparent !important;
}

.wp-block-navigation a {
        color: var(--tma-off-white) !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 600 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        padding: var(--tma-sp-xs) var(--tma-sp-sm) !important;
        border-bottom: 2px solid transparent !important;
        transition: color var(--tma-ease), border-color var(--tma-ease) !important;
}

.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a {
        color: var(--tma-gold) !important;
        border-bottom-color: var(--tma-gold) !important;
}

/* Dropdown */
.wp-block-navigation .wp-block-navigation__submenu-container {
        background-color: var(--tma-charcoal) !important;
        border: 1px solid var(--tma-mid-gray) !important;
        border-top: 2px solid var(--tma-gold) !important;
        border-radius: 0 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
        min-width: 200px !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
        display: block !important;
        padding: var(--tma-sp-sm) var(--tma-sp-lg) !important;
        border-bottom: 1px solid rgba(74, 74, 74, 0.4) !important;
}

/* Mobile hamburger */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
        fill: var(--tma-gold) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--tma-charcoal) !important;
}


/* ==========================================================================
   TYPOGRAPHY — HEADINGS (Playfair Display)
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
        font-family: var(--tma-font-heading);
        color: var(--tma-off-white);
        line-height: 1.2;
        letter-spacing: -0.01em;
        margin-top: 0;
}

h1 { font-size: var(--tma-text-5xl); font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: var(--tma-text-4xl); font-weight: 700; }
h3 { font-size: var(--tma-text-3xl); font-weight: 700; }
h4 { font-size: var(--tma-text-2xl); font-weight: 600; }
h5 { font-size: var(--tma-text-xl);  font-weight: 600; }
h6 { font-size: var(--tma-text-sm);  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.wp-block-post-title,
.entry-title {
        font-family: var(--tma-font-heading) !important;
        font-size: clamp(var(--tma-text-2xl), 4vw, var(--tma-text-5xl)) !important;
        font-weight: 900 !important;
        letter-spacing: -0.03em !important;
        line-height: 1.1 !important;
        color: var(--tma-off-white) !important;
}


/* ==========================================================================
   BODY TEXT
   ========================================================================== */

p {
        font-family: var(--tma-font-body);
        color: var(--tma-off-white);
        line-height: 1.8;
        margin-bottom: var(--tma-sp-md);
}

.wp-block-post-excerpt__excerpt {
        color: var(--tma-muted-text);
        font-size: var(--tma-text-sm);
        line-height: 1.7;
}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {
        color: var(--tma-gold-muted);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        transition: color var(--tma-ease);
}

a:hover {
        color: var(--tma-gold);
}

.entry-content a {
        color: var(--tma-gold-muted);
        text-decoration: underline;
}

.entry-content a:hover {
        color: var(--tma-gold);
}


/* ==========================================================================
   CONTENT AREAS — dark background throughout
   ========================================================================== */

.wp-block-post-content,
.entry-content,
.wp-block-group,
.wp-block-column,
main {
        background-color: var(--tma-black);
}

.wp-block-post-content,
.entry-content {
        max-width: var(--tma-content-max);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--tma-sp-lg);
        padding-right: var(--tma-sp-lg);
}

.wp-block-group.is-layout-constrained,
.wp-block-group.is-layout-flow {
        background-color: var(--tma-black);
}

.alignwide {
        max-width: var(--tma-wide-max);
        margin-left: auto;
        margin-right: auto;
}


/* ==========================================================================
   POST META — category label + date
   ========================================================================== */

.wp-block-post-terms a {
        background-color: transparent !important;
        color: var(--tma-gold) !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        transition: color var(--tma-ease) !important;
}

.wp-block-post-terms a:hover {
        color: var(--tma-gold-light) !important;
}

.wp-block-post-date,
.wp-block-post-author {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 500 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--tma-gold) !important;
}

.wp-block-post-date a {
        color: var(--tma-gold) !important;
        text-decoration: none !important;
}

/* Category · Date separator pattern — matches design preview */
.wp-block-post-terms + .wp-block-post-date::before {
        content: ' · ';
        color: var(--tma-muted-text);
}


/* ==========================================================================
   POST ARCHIVE LIST
   ========================================================================== */

.wp-block-post {
        border-bottom: 1px solid var(--tma-mid-gray) !important;
        padding: var(--tma-sp-2xl) 0 !important;
}

.wp-block-post:first-child {
        border-top: 1px solid var(--tma-mid-gray);
}

.wp-block-post-template .wp-block-post-title a {
        font-family: var(--tma-font-heading) !important;
        color: var(--tma-off-white) !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: var(--tma-text-xl) !important;
        letter-spacing: -0.01em !important;
        transition: color var(--tma-ease) !important;
}

.wp-block-post-template .wp-block-post-title a:hover {
        color: var(--tma-gold) !important;
}


/* ==========================================================================
   AUTHOR BLOCK (matches design preview: gold circle avatar + name)
   ========================================================================== */

.wp-block-post-author {
        display: flex !important;
        align-items: center !important;
        gap: var(--tma-sp-md) !important;
}

.wp-block-post-author__avatar img {
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        object-fit: cover !important;
        background-color: var(--tma-gold) !important;
        border: 2px solid var(--tma-gold) !important;
}

.wp-block-post-author__name {
        font-family: var(--tma-font-body) !important;
        font-weight: 600 !important;
        color: var(--tma-off-white) !important;
        font-size: var(--tma-text-sm) !important;
}

.wp-block-post-author__bio {
        font-size: var(--tma-text-xs) !important;
        color: var(--tma-muted-text) !important;
}

/* Fallback gold initial avatar for users without a photo */
.wp-block-post-author__avatar-placeholder {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        background-color: var(--tma-gold) !important;
        color: var(--tma-black) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        font-size: var(--tma-text-sm) !important;
}


/* ==========================================================================
   COVER / HERO BLOCK
   ========================================================================== */

.wp-block-cover {
        background-color: var(--tma-black) !important;
        border-bottom: 1px solid var(--tma-mid-gray) !important;
}

.wp-block-cover__inner-container {
        padding: var(--tma-sp-4xl) var(--tma-sp-xl) !important;
}

.wp-block-cover .wp-block-heading,
.wp-block-cover h1,
.wp-block-cover h2 {
        color: var(--tma-off-white) !important;
        font-family: var(--tma-font-heading) !important;
}

.wp-block-cover p {
        color: var(--tma-muted-text) !important;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.wp-block-button__link,
.wp-block-button .wp-block-button__link {
        background-color: var(--tma-gold) !important;
        color: var(--tma-black) !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        padding: 0.75rem 1.75rem !important;
        border-radius: var(--tma-radius-sm) !important;
        border: 2px solid var(--tma-gold) !important;
        transition: background-color var(--tma-ease), color var(--tma-ease), border-color var(--tma-ease) !important;
        display: inline-block !important;
}

.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover {
        background-color: transparent !important;
        color: var(--tma-gold) !important;
        border-color: var(--tma-gold) !important;
}

/* Outline / secondary button — as shown in preview "LEARN MORE" */
.wp-block-button.is-style-outline .wp-block-button__link {
        background-color: transparent !important;
        color: var(--tma-gold) !important;
        border: 2px solid var(--tma-gold) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
        background-color: var(--tma-gold) !important;
        color: var(--tma-black) !important;
}


/* ==========================================================================
   BLOCKQUOTE — gold left bar on dark card
   ========================================================================== */

blockquote,
.wp-block-quote {
        background-color: var(--tma-dark-gray) !important;
        border: none !important;
        border-left: 4px solid var(--tma-gold) !important;
        padding: var(--tma-sp-lg) var(--tma-sp-xl) !important;
        margin: var(--tma-sp-xl) 0 !important;
        border-radius: 0 var(--tma-radius-md) var(--tma-radius-md) 0 !important;
}

blockquote p,
.wp-block-quote p {
        font-family: var(--tma-font-heading) !important;
        font-size: var(--tma-text-lg) !important;
        font-style: italic !important;
        color: var(--tma-off-white) !important;
        font-weight: 400 !important;
        margin-bottom: 0 !important;
}

blockquote cite,
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        color: var(--tma-gold-muted) !important;
        font-style: normal !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        margin-top: var(--tma-sp-sm) !important;
        display: block !important;
}

.wp-block-pullquote {
        border-top: 2px solid var(--tma-gold) !important;
        border-bottom: 2px solid var(--tma-gold) !important;
        border-left: none !important;
        padding: var(--tma-sp-2xl) !important;
        background-color: var(--tma-charcoal) !important;
}

.wp-block-pullquote p {
        font-family: var(--tma-font-heading) !important;
        color: var(--tma-off-white) !important;
        font-size: var(--tma-text-2xl) !important;
        font-weight: 400 !important;
        font-style: italic !important;
}

.wp-block-pullquote cite {
        font-family: var(--tma-font-body) !important;
        color: var(--tma-gold) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        font-size: var(--tma-text-xs) !important;
}


/* ==========================================================================
   CARD PATTERN — dark raised surface with gold left accent
   ========================================================================== */

.tma-card,
.wp-block-group.tma-card {
        background-color: var(--tma-dark-gray) !important;
        border-left: 4px solid var(--tma-gold) !important;
        border-radius: var(--tma-radius-md) !important;
        padding: var(--tma-sp-xl) !important;
}

.tma-card h2,
.tma-card h3,
.tma-card h4 {
        font-family: var(--tma-font-heading) !important;
        color: var(--tma-off-white) !important;
}

.tma-card p {
        color: var(--tma-muted-text) !important;
        font-size: var(--tma-text-sm) !important;
}


/* ==========================================================================
   CODE BLOCKS — gold syntax on dark
   ========================================================================== */

code,
kbd {
        font-family: var(--tma-font-mono);
        font-size: 0.875em;
        background-color: var(--tma-dark-gray) !important;
        color: var(--tma-gold) !important;
        padding: 0.1em 0.4em !important;
        border-radius: var(--tma-radius-sm) !important;
        border: 1px solid var(--tma-mid-gray) !important;
}

pre,
.wp-block-code {
        background-color: var(--tma-charcoal) !important;
        border: 1px solid var(--tma-mid-gray) !important;
        border-radius: var(--tma-radius-lg) !important;
        padding: var(--tma-sp-xl) !important;
        overflow-x: auto !important;
        font-family: var(--tma-font-mono) !important;
        font-size: var(--tma-text-sm) !important;
        line-height: 1.7 !important;
        color: var(--tma-gold-muted) !important;
}

pre code {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: var(--tma-gold-muted) !important;
}


/* ==========================================================================
   SEPARATORS
   ========================================================================== */

hr,
.wp-block-separator {
        border: none !important;
        border-top: 1px solid var(--tma-mid-gray) !important;
        margin: var(--tma-sp-2xl) auto !important;
        opacity: 1 !important;
}

.wp-block-separator.is-style-wide {
        width: 100% !important;
}


/* ==========================================================================
   SEARCH
   ========================================================================== */

.wp-block-search__input {
        background-color: var(--tma-dark-gray) !important;
        border: 1px solid var(--tma-mid-gray) !important;
        border-radius: var(--tma-radius-sm) !important;
        padding: var(--tma-sp-sm) var(--tma-sp-md) !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-sm) !important;
        color: var(--tma-off-white) !important;
        transition: border-color var(--tma-ease) !important;
}

.wp-block-search__input::placeholder {
        color: var(--tma-subtle-text) !important;
}

.wp-block-search__input:focus {
        outline: none !important;
        border-color: var(--tma-gold) !important;
        box-shadow: 0 0 0 3px var(--tma-gold-pale) !important;
}

.wp-block-search__button {
        background-color: var(--tma-gold) !important;
        color: var(--tma-black) !important;
        border: none !important;
        padding: var(--tma-sp-sm) var(--tma-sp-lg) !important;
        font-family: var(--tma-font-body) !important;
        font-weight: 700 !important;
        font-size: var(--tma-text-xs) !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        border-radius: var(--tma-radius-sm) !important;
        cursor: pointer !important;
        transition: background-color var(--tma-ease) !important;
}

.wp-block-search__button:hover {
        background-color: var(--tma-gold-light) !important;
}


/* ==========================================================================
   FORMS & COMMENTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
        background-color: var(--tma-dark-gray) !important;
        border: 1px solid var(--tma-mid-gray) !important;
        border-radius: var(--tma-radius-sm) !important;
        padding: var(--tma-sp-sm) var(--tma-sp-md) !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-base) !important;
        color: var(--tma-off-white) !important;
        width: 100% !important;
        transition: border-color var(--tma-ease), box-shadow var(--tma-ease) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
        outline: none !important;
        border-color: var(--tma-gold) !important;
        box-shadow: 0 0 0 3px var(--tma-gold-pale) !important;
}

input[type="submit"],
button[type="submit"] {
        background-color: var(--tma-gold) !important;
        color: var(--tma-black) !important;
        border: 2px solid var(--tma-gold) !important;
        border-radius: var(--tma-radius-sm) !important;
        padding: var(--tma-sp-sm) var(--tma-sp-xl) !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        transition: background-color var(--tma-ease), color var(--tma-ease), border-color var(--tma-ease) !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
        background-color: transparent !important;
        color: var(--tma-gold) !important;
        border-color: var(--tma-gold) !important;
}

#commentform label {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--tma-muted-text) !important;
        display: block !important;
        margin-bottom: var(--tma-sp-xs) !important;
}

.comments-title,
.comment-reply-title {
        font-family: var(--tma-font-heading) !important;
        font-size: var(--tma-text-xl) !important;
        font-weight: 700 !important;
        color: var(--tma-off-white) !important;
        border-bottom: 1px solid var(--tma-mid-gray) !important;
        padding-bottom: var(--tma-sp-sm) !important;
        margin-bottom: var(--tma-sp-xl) !important;
}


/* ==========================================================================
   TABLES
   ========================================================================== */

table,
.wp-block-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--tma-text-sm);
}

.wp-block-table thead th {
        background-color: var(--tma-dark-gray) !important;
        color: var(--tma-gold) !important;
        font-family: var(--tma-font-body) !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        font-size: var(--tma-text-xs) !important;
        padding: var(--tma-sp-md) var(--tma-sp-lg) !important;
        border: none !important;
}

.wp-block-table td,
.wp-block-table th {
        padding: var(--tma-sp-sm) var(--tma-sp-lg) !important;
        border-bottom: 1px solid var(--tma-mid-gray) !important;
        text-align: left !important;
        color: var(--tma-off-white) !important;
}

.wp-block-table tr:hover td {
        background-color: var(--tma-dark-gray) !important;
}

.wp-block-table.is-style-stripes tr:nth-child(even) td {
        background-color: var(--tma-charcoal) !important;
}


/* ==========================================================================
   LISTS
   ========================================================================== */

ul, ol {
        padding-left: var(--tma-sp-xl);
        margin-bottom: var(--tma-sp-md);
}

ul li, ol li {
        margin-bottom: var(--tma-sp-xs);
        color: var(--tma-off-white);
}

ul li::marker {
        color: var(--tma-gold);
}

ol li::marker {
        color: var(--tma-gold);
        font-weight: 700;
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.wp-block-query-pagination,
.navigation.pagination {
        display: flex !important;
        gap: var(--tma-sp-sm) !important;
        align-items: center !important;
        justify-content: center !important;
        margin: var(--tma-sp-3xl) 0 !important;
}

.wp-block-query-pagination-numbers a,
.page-numbers {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-sm) !important;
        font-weight: 600 !important;
        color: var(--tma-off-white) !important;
        border: 1px solid var(--tma-mid-gray) !important;
        border-radius: var(--tma-radius-sm) !important;
        text-decoration: none !important;
        transition: all var(--tma-ease) !important;
}

.wp-block-query-pagination-numbers a:hover,
.page-numbers:hover,
.page-numbers.current {
        background-color: var(--tma-gold) !important;
        color: var(--tma-black) !important;
        border-color: var(--tma-gold) !important;
}

.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
        color: var(--tma-gold-muted) !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        font-size: var(--tma-text-sm) !important;
        letter-spacing: 0.04em !important;
        transition: color var(--tma-ease) !important;
}

.wp-block-query-pagination-previous-arrow:hover,
.wp-block-query-pagination-next-arrow:hover {
        color: var(--tma-gold) !important;
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.wp-block-image img {
        border-radius: var(--tma-radius-md);
        max-width: 100%;
        height: auto;
}

.wp-block-image figcaption {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        color: var(--tma-muted-text) !important;
        text-align: center !important;
        letter-spacing: 0.04em !important;
        margin-top: var(--tma-sp-sm) !important;
}

.wp-block-post-featured-image img {
        border-radius: 0 !important;
        width: 100% !important;
        object-fit: cover !important;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.wp-block-template-part.sidebar,
aside.widget-area {
        background-color: var(--tma-charcoal) !important;
        padding: var(--tma-sp-2xl) !important;
}

.widget-title,
.wp-block-heading.widget-title {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: var(--tma-gold) !important;
        border-bottom: 1px solid var(--tma-mid-gray) !important;
        padding-bottom: var(--tma-sp-sm) !important;
        margin-bottom: var(--tma-sp-lg) !important;
}

aside a,
.widget a {
        color: var(--tma-off-white) !important;
        text-decoration: none !important;
        transition: color var(--tma-ease) !important;
}

aside a:hover,
.widget a:hover {
        color: var(--tma-gold) !important;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer.wp-block-template-part,
.wp-block-template-part[data-slug="footer"] {
        background-color: var(--tma-charcoal) !important;
        border-top: 1px solid var(--tma-mid-gray) !important;
}

.wp-block-template-part footer p,
footer .wp-block-paragraph {
        font-family: var(--tma-font-body) !important;
        color: var(--tma-muted-text) !important;
        font-size: var(--tma-text-xs) !important;
        letter-spacing: 0.04em !important;
}

footer a {
        color: var(--tma-off-white) !important;
        text-decoration: none !important;
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 600 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        transition: color var(--tma-ease) !important;
}

footer a:hover {
        color: var(--tma-gold) !important;
}

/* Social icons */
.wp-block-social-links .wp-block-social-link a {
        background-color: var(--tma-dark-gray) !important;
        transition: background-color var(--tma-ease) !important;
}

.wp-block-social-links .wp-block-social-link a:hover {
        background-color: var(--tma-gold) !important;
}

.wp-block-social-links .wp-block-social-link-anchor svg {
        fill: var(--tma-off-white) !important;
}

.wp-block-social-links .wp-block-social-link-anchor:hover svg {
        fill: var(--tma-black) !important;
}


/* ==========================================================================
   FAQ / ACCORDION
   ========================================================================== */

.wp-block-details,
details {
        border-bottom: 1px solid var(--tma-mid-gray) !important;
        padding: var(--tma-sp-lg) 0 !important;
}

.wp-block-details summary,
details summary {
        font-family: var(--tma-font-heading) !important;
        font-weight: 700 !important;
        font-size: var(--tma-text-lg) !important;
        color: var(--tma-off-white) !important;
        cursor: pointer !important;
        list-style: none !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        transition: color var(--tma-ease) !important;
}

.wp-block-details summary::after,
details summary::after {
        content: '+' !important;
        font-size: var(--tma-text-xl) !important;
        font-weight: 300 !important;
        color: var(--tma-gold) !important;
        flex-shrink: 0 !important;
}

.wp-block-details[open] summary::after,
details[open] summary::after {
        content: '−' !important;
}

.wp-block-details summary:hover,
details summary:hover {
        color: var(--tma-gold) !important;
}

.wp-block-details p,
details p {
        color: var(--tma-muted-text) !important;
        font-size: var(--tma-text-sm) !important;
        padding-top: var(--tma-sp-md) !important;
}


/* ==========================================================================
   MEDIA EMBED
   ========================================================================== */

.wp-block-embed__wrapper {
        border-radius: var(--tma-radius-md);
        overflow: hidden;
}

.wp-block-embed figcaption {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        color: var(--tma-muted-text) !important;
        text-align: center !important;
        letter-spacing: 0.04em !important;
        margin-top: var(--tma-sp-sm) !important;
}


/* ==========================================================================
   UTILITY CLASSES
   Apply via Additional CSS Class in the block editor Advanced panel
   ========================================================================== */

/* Inline gold highlight */
.tma-gold {
        color: var(--tma-gold) !important;
}

/* Uppercase label */
.tma-label {
        font-family: var(--tma-font-body) !important;
        font-size: var(--tma-text-xs) !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: var(--tma-gold) !important;
}

/* Gold bar above heading */
.tma-section-title {
        position: relative;
}
.tma-section-title::before {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        background-color: var(--tma-gold);
        margin-bottom: var(--tma-sp-sm);
}

/* Raised dark card surface */
.tma-surface {
        background-color: var(--tma-dark-gray) !important;
        border-radius: var(--tma-radius-md) !important;
        padding: var(--tma-sp-xl) !important;
}

/* Gold-bordered callout */
.tma-notice {
        background-color: var(--tma-dark-gray) !important;
        border-left: 4px solid var(--tma-gold) !important;
        padding: var(--tma-sp-md) var(--tma-sp-xl) !important;
        border-radius: 0 var(--tma-radius-md) var(--tma-radius-md) 0 !important;
}

/* Muted text */
.tma-muted {
        color: var(--tma-muted-text) !important;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
        :root {
                --tma-text-5xl: 2.25rem;
                --tma-text-4xl: 1.875rem;
                --tma-text-3xl: 1.5rem;
                --tma-sp-4xl: 3rem;
                --tma-sp-3xl: 2.5rem;
        }

        .wp-block-post-content,
        .entry-content {
                padding-left: var(--tma-sp-md);
                padding-right: var(--tma-sp-md);
        }

        .wp-block-cover__inner-container {
                padding: var(--tma-sp-2xl) var(--tma-sp-md) !important;
        }
}

@media (max-width: 480px) {
        :root {
                --tma-text-5xl: 1.875rem;
                --tma-text-4xl: 1.5rem;
                --tma-text-3xl: 1.25rem;
        }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
        header, footer, nav, aside, .wp-block-navigation {
                display: none !important;
        }

        body, .wp-site-blocks {
                color: #000 !important;
                background: #fff !important;
                font-size: 12pt !important;
        }

        h1, h2, h3, h4, h5, h6 {
                color: #000 !important;
                page-break-after: avoid !important;
        }

        a {
                color: #000 !important;
                text-decoration: underline !important;
        }

        pre, code {
                background: #f0f0f0 !important;
                color: #000 !important;
        }

        .entry-content {
                max-width: 100% !important;
        }

        .tma-video-banner,
        .tma-transcript-notice { display: none !important; }
}


/* ==========================================================================
   PER-POST VIDEO BANNER
   Displayed at the very top of single transcript posts.
   ========================================================================== */

.tma-video-banner {
        background: var(--tma-charcoal);
        border-bottom: 1px solid var(--tma-mid-gray);
        padding: 2.5rem var(--tma-page-padding, 2rem);
        margin: 0 0 2rem;
}

.tma-video-banner__label {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--tma-gold);
        margin-bottom: 1rem;
}

.tma-gold-rule {
        display: inline-block;
        width: 24px;
        height: 2px;
        background: var(--tma-gold);
        flex-shrink: 0;
}

/* 16:9 responsive iframe */
.tma-video-wrap {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--tma-mid-gray);
        box-shadow: 0 0 48px rgba(245, 197, 24, 0.07);
        max-width: 860px;
        margin: 0 auto;
}

.tma-video-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
}

.tma-video-meta {
        max-width: 860px;
        margin: 0.75rem auto 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.5rem;
}

.tma-video-note {
        font-size: 0.78rem;
        line-height: 1.6;
        color: var(--tma-muted);
        margin: 0;
        flex: 1;
}

.tma-video-note a {
        color: var(--tma-gold);
        text-decoration: none;
        font-weight: 600;
}

.tma-video-note a:hover { text-decoration: underline; }


/* ==========================================================================
   TRANSCRIPT NOTICE CALLOUT
   ========================================================================== */

.tma-transcript-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        background: var(--tma-dark-gray);
        border-left: 4px solid var(--tma-gold);
        border-radius: 0 4px 4px 0;
        padding: 1rem 1.25rem;
        margin-bottom: 2rem;
}

.tma-transcript-notice__icon {
        color: var(--tma-gold);
        font-size: 1.1rem;
        line-height: 1.5;
        flex-shrink: 0;
}

.tma-transcript-notice p {
        font-size: 0.84rem;
        line-height: 1.7;
        color: var(--tma-muted);
        margin: 0;
}

.tma-transcript-notice p strong {
        color: var(--tma-off-white);
}

.tma-transcript-notice p a {
        color: var(--tma-gold);
        font-weight: 600;
        text-decoration: none;
}

.tma-transcript-notice p a:hover { text-decoration: underline; }


/* ==========================================================================
   QURANIC VERSE BANNER
   Usage: wrap any page section with class="tma-verse-banner"
   Arabic text:  class="tma-verse-arabic"
   Translation:  class="tma-verse-translation"
   Reference:    class="tma-verse-ref"
   ========================================================================== */

.tma-verse-banner {
        background: var(--tma-charcoal, #1a1a1a);
        border-top: 1px solid var(--tma-mid-gray, #4a4a4a);
        border-bottom: 1px solid var(--tma-mid-gray, #4a4a4a);
        padding: 60px 48px;
        text-align: center;
        position: relative;
        overflow: hidden;
}

.tma-verse-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, rgba(245, 197, 24, 0.06) 0%, transparent 70%);
        pointer-events: none;
}

.tma-verse-rule {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-bottom: 36px;
}

.tma-verse-rule:last-child {
        margin-bottom: 0;
        margin-top: 36px;
}

.tma-verse-rule::before,
.tma-verse-rule::after {
        content: '';
        flex: 1;
        max-width: 160px;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--tma-gold-muted, #d4a810));
}

.tma-verse-rule::after {
        background: linear-gradient(to left, transparent, var(--tma-gold-muted, #d4a810));
}

.tma-verse-rule-star {
        font-size: 18px;
        color: var(--tma-gold, #f5c518);
        opacity: 0.7;
}

.tma-verse-arabic {
        font-family: var(--tma-font-quran, 'MSHQ', 'Noto Naskh Arabic', serif);
        font-size: 2.2rem;
        line-height: 2;
        direction: rtl;
        color: var(--tma-gold-light, #f7d54a);
        margin: 0 auto 24px;
        max-width: 900px;
        text-shadow: 0 0 32px rgba(245, 197, 24, 0.18);
        letter-spacing: 0.02em;
        position: relative;
        z-index: 1;
}

.tma-verse-translation {
        font-family: var(--tma-font-body, 'Inter', sans-serif);
        font-size: 1rem;
        font-style: italic;
        line-height: 1.85;
        color: var(--tma-off-white, #f0f0f0);
        max-width: 680px;
        margin: 0 auto 12px;
        position: relative;
        z-index: 1;
}

.tma-verse-ref {
        font-family: var(--tma-font-body, 'Inter', sans-serif);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tma-gold-muted, #d4a810);
        position: relative;
        z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
        .tma-verse-banner { padding: 44px 24px; }
        .tma-verse-arabic { font-size: 1.6rem; line-height: 1.9; }
        .tma-verse-translation { font-size: 0.9rem; }
}