/*
Theme Name: HAKIM Theme
Theme URI: https://hakim-med.org
Author: HAKIM e.V.
Author URI: https://hakim-med.org
Description: Custom theme for HAKIM e.V. — Rat muslimischer Aerzte und Heilberufe
Version: 5.4.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hakim
*/

/* === Self-hosted Google Fonts (GDPR compliant) === */

/* Cormorant Garamond — latin-ext */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond — latin */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter — latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('./assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Amiri — Only used for Arabic text (Quran/Hadith quotes) on blog posts.
   TODO: Future optimization — conditionally load only on single blog posts
   that contain Arabic content, rather than on all pages globally. */
/* Amiri — arabic */
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/amiri-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* Amiri — latin-ext */
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/amiri-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Amiri — latin */
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/amiri-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === CSS Custom Properties === */
:root {
    /* Colors — Scholar's Library palette */
    --hk-navy: #1B2A4A;
    --hk-navy-mid: #2D4A6F;
    --hk-heading: #1B2A4A;
    --hk-heading-mid: #2D4A6F;
    --hk-gold: #C8A96E;
    --hk-gold-light: #D4BC8A;
    --hk-gold-dark: #B8923E;
    --hk-teal: #5B8A9A;
    --hk-parchment: #F7F4EE;
    --hk-parchment-dark: #E8E2D6;
    --hk-body: #4A5568;
    --hk-white: #FFFFFF;
    --hk-footer-bg: #1B2A4A;

    /* Semantic */
    --hk-success: #0f5132;
    --hk-error: #842029;

    /* Accessible text variants */
    --hk-gold-text: #8B6914;

    /* Hero */
    --hk-navy-dark: #090f1c;
    --hk-hero-gradient: linear-gradient(150deg, #090f1c 0%, #111d33 45%, #1a2d4a 100%);

    /* Glass tokens */
    --hk-glass: rgba(255,255,255,0.7);
    --hk-glass-border: 1px solid rgb(27 42 74 / 8%);  /* Spec B1 — Family 3 (full border shorthand, not a colour) */
    --hk-glass-border-color: rgb(27 42 74 / 8%);  /* Spec B1 — Family 3 colour-only sister */
    --hk-glass-border-hover: rgba(200,169,110,0.5);
    --hk-glass-shadow: 0 2px 8px rgba(27, 42, 74, 0.04), 0 8px 32px rgba(27, 42, 74, 0.08);
    --hk-glass-shadow-elevated: 0 4px 12px rgba(27, 42, 74, 0.06), 0 16px 48px rgba(27, 42, 74, 0.12);
    --hk-gold-shadow: 0 4px 20px rgba(200,169,110,0.4);
    --hk-gold-gradient: linear-gradient(135deg, #C8A96E, #D4BC8A);

    /* Spacing */
    --hk-space-xs: 8px;
    --hk-space-sm: 16px;
    --hk-space-md: 24px;
    --hk-space-lg: 32px;
    --hk-space-xl: 48px;
    --hk-space-2xl: 64px;

    /* Layout */
    --hk-radius: 12px;
    --hk-container: 1280px;
    --hk-container-narrow: 800px;
    --hk-section-padding: 120px;
    --hk-gap: 2rem;

    /* Typography */
    --hk-font-heading: 'Cormorant Garamond', Georgia, serif;
    --hk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --hk-font-arabic: 'Amiri', serif;

    /* Animation */
    --hk-ease: var(--hk-ease-out-cubic);  /* backwards compat */
    --hk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === SPEC B1 — Motion system === */
    --hk-motion-entrance:  600ms;
    --hk-motion-scroll:    400ms;
    --hk-motion-hover:     180ms;
    --hk-motion-cinematic: 1200ms;
    --hk-motion-reveal:      800ms; /* Variant B body text */
    --hk-motion-reveal-clip: 1000ms; /* Variant D heading/img/blockquote clip-wipe */
    --hk-motion-reveal-card: 850ms; /* Card B */
    --hk-stagger:            120ms; /* between adjacent reveal-eligible elements in a batch */

    --hk-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --hk-ease-out-cubic:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hk-ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
    --hk-ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

    --hk-motion-distance-sm: 8px;
    --hk-motion-distance-md: 16px;
    --hk-motion-distance-lg: 32px;
    --hk-transition: 0.3s ease;
    --hk-dur-fast: 180ms;
    --hk-dur: 300ms;
    --hk-dur-slow: 600ms;
    --hk-dur-ambient: 2400ms;

    /* Z-index ladder — see docs/CSS-CONVENTIONS.md.
     * Use these tokens INSTEAD of magic numbers anywhere a stacking-context
     * conflict could happen. Tier order, low→high:
     *   raised   — hover-elevated cards, focus rings within a section
     *   dropdown — header dropdowns, popovers, in-page tooltips
     *   sticky   — sticky page header, scroll-pinned UI, fixed corner buttons
     *   overlay  — full-page overlays, lightbox dimmers, fixed top progress bars
     *   modal    — modal dialogs, full-screen takeover, skip-to-content link
     * If two siblings within the SAME tier need ordering, prefer adding a tier
     * over arithmetic; reserve `calc(var(--hk-z-X) + 1)` for tightly coupled
     * pairs (modal + close button, dropdown + flyout). Internal stacking (e.g.
     * z-index: 0/1/2 inside a `position: relative` wrapper) does NOT need a
     * token — those numbers are local sibling order, not the global ladder. */
    --hk-z-raised:   1;
    --hk-z-dropdown: 10;
    --hk-z-sticky:   100;
    --hk-z-overlay:  1000;
    --hk-z-modal:    10000;

    /* === SPEC B1 — Token v2 === */

    /* Family 1 — Modular type ladder (10 steps) */
    --hk-fs-7:  5.5rem;   /* 88px — Hero h1 (cinematic homepage) */
    --hk-fs-6:  4rem;     /* 64px — Utility h1 */
    --hk-fs-5:  3rem;     /* 48px — h2 */
    --hk-fs-4:  2rem;     /* 32px — h3 */
    --hk-fs-3:  1.5rem;   /* 24px — h4 / Lede */
    --hk-fs-2:  1.25rem;  /* 20px — h5 / Large body */
    --hk-fs-1:  1.125rem; /* 18px — Body L (long-form prose) */
    --hk-fs-0:  1rem;     /* 16px — Body */
    --hk-fs--1: 0.875rem; /* 14px — Meta */
    --hk-fs--2: 0.75rem;  /* 12px — Overline / pill / caption */

    /* Family 2 — Focus ring */
    --hk-focus-ring: 3px solid rgb(27 42 74 / 70%);
    --hk-focus-ring-offset: 3px;

    /* Family 4 — Prose */
    --hk-prose-max: 720px;
    --hk-prose-line-height: 1.75;
    --hk-prose-color: var(--hk-body);

    /* Family 5 — Narrative padding */
    --hk-section-padding-y: clamp(64px, 10vw, 120px);
}

/* === Motion vocabulary (shared across member-area components) === */
@keyframes hk-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.85); }
}
@keyframes hk-slow-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes hk-stagger-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hk-gold-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@keyframes hk-pulse-soft {
    0%,100% { box-shadow: 0 2px 16px rgba(27,42,74,.06), 0 0 0 0 rgba(200,169,110,.3); }
    50%     { box-shadow: 0 2px 16px rgba(27,42,74,.06), 0 0 0 8px rgba(200,169,110,0); }
}

/* === SPEC B1 — Motion primitives === */
/* hk-pulse already defined above */
@keyframes hk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hk-fade-in-up {
    from { opacity: 0; transform: translateY(var(--hk-motion-distance-md)); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hk-fade-in-down {
    from { opacity: 0; transform: translateY(calc(-1 * var(--hk-motion-distance-md))); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hk-scale-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hk-slide-in-left {
    from { opacity: 0; transform: translateX(calc(-1 * var(--hk-motion-distance-lg))); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hk-slide-in-right {
    from { opacity: 0; transform: translateX(var(--hk-motion-distance-lg)); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hk-shimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}
/* Note: hk-shimmer also exists in homepage.css (bespoke variant) — B2: collapse */

@media (prefers-reduced-motion: reduce) {
    :root {
        --hk-dur-fast: 0ms; --hk-dur: 0ms; --hk-dur-slow: 0ms; --hk-dur-ambient: 0ms;

        /* Spec B1 — global motion contract */
        --hk-motion-entrance:    0ms;
        --hk-motion-scroll:      0ms;
        --hk-motion-hover:       0ms;
        --hk-motion-cinematic:   0ms;
        --hk-motion-reveal:      0ms;
        --hk-motion-reveal-clip: 0ms;
        --hk-motion-reveal-card: 0ms;
        --hk-stagger:            0ms;
        --hk-motion-distance-sm: 0px;
        --hk-motion-distance-md: 0px;
        --hk-motion-distance-lg: 0px;
    }
}

/* === Dark Mode — Scholar's Library at Night === */
:root[data-theme="dark"] {
    /* Backgrounds — white stays white (used in text gradients too) */
    --hk-parchment: #090f1c;
    --hk-parchment-dark: #0e1726;

    /* Text — heading colors invert, navy stays navy for backgrounds */
    --hk-heading: #F7F4EE;
    --hk-heading-mid: #c8c3b8;
    --hk-body: #c8c3b8;
    --hk-gold-text: #D4BC8A;

    /* Accents — adjusted for contrast */
    --hk-teal: #6FA3B5;

    /* Hero */
    --hk-navy-dark: #040810;
    --hk-hero-gradient: linear-gradient(150deg, #040810 0%, #0a1020 45%, #111d33 100%);

    /* Semantic */
    --hk-success: #2dd4a0;
    --hk-error: #f87171;

    /* Glass */
    --hk-glass: rgba(14,23,38,0.7);
    --hk-glass-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 8px 32px rgba(0,0,0,0.3);
    --hk-glass-shadow-elevated: 0 4px 12px rgba(0,0,0,0.25), 0 16px 48px rgba(0,0,0,0.35);
    --hk-gold-shadow: 0 4px 20px rgba(200,169,110,0.3);
    --hk-glass-border-hover: rgba(200,169,110,0.45);

    /* Footer stays dark in both modes */
    --hk-footer-bg: #090f1c;

    /* === SPEC B1 — Token v2 dark overrides === */
    --hk-focus-ring: 3px solid rgb(247 244 238 / 85%);
    --hk-glass-border: 1px solid rgb(200 169 110 / 18%);
    --hk-glass-border-color: rgb(200 169 110 / 18%);
}

/* Hadith blockquote — dark glass in dark mode */
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--hadith {
    background: rgba(14, 23, 38, 0.5);
    border-color: rgba(91, 138, 154, 0.2);
}

/* Quran blockquote — darker shadow in dark mode */
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--quran {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Generic divider background fix */
:root[data-theme="dark"] .hk-divider--diamond {
    background-color: var(--hk-parchment);
}

/* Dark mode transition — only on elements that actually need theme transitions,
   not every element (prevents conflicts with component transitions and perf hit). */
:root.hk-theme-transitioning body,
:root.hk-theme-transitioning .hk-glass,
:root.hk-theme-transitioning .hk-card,
:root.hk-theme-transitioning .hk-header,
:root.hk-theme-transitioning .hk-footer,
:root.hk-theme-transitioning .hk-nav,
:root.hk-theme-transitioning .hk-nav__dropdown,
:root.hk-theme-transitioning .hk-nav__flyout,
:root.hk-theme-transitioning input,
:root.hk-theme-transitioning textarea,
:root.hk-theme-transitioning select,
:root.hk-theme-transitioning .hk-btn,
:root.hk-theme-transitioning [class*="hk-"][class*="__card"] {
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    :root.hk-theme-transitioning body,
    :root.hk-theme-transitioning .hk-glass,
    :root.hk-theme-transitioning .hk-card,
    :root.hk-theme-transitioning .hk-header,
    :root.hk-theme-transitioning .hk-footer {
        transition: none !important;
    }
}

/* No-JS fallback — follows OS preference when JavaScript is disabled */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hk-parchment: #090f1c;
        --hk-parchment-dark: #0e1726;
        --hk-heading: #F7F4EE;
        --hk-heading-mid: #c8c3b8;
        --hk-body: #c8c3b8;
        --hk-gold-text: #D4BC8A;
        --hk-teal: #6FA3B5;
        --hk-navy-dark: #040810;
        --hk-hero-gradient: linear-gradient(150deg, #040810 0%, #0a1020 45%, #111d33 100%);
        --hk-success: #2dd4a0;
        --hk-error: #f87171;
        --hk-glass: rgba(14,23,38,0.7);
        --hk-glass-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 8px 32px rgba(0,0,0,0.3);
        --hk-glass-shadow-elevated: 0 4px 12px rgba(0,0,0,0.25), 0 16px 48px rgba(0,0,0,0.35);
        --hk-gold-shadow: 0 4px 20px rgba(200,169,110,0.3);
        --hk-glass-border-hover: rgba(200,169,110,0.45);
        --hk-footer-bg: #090f1c;

        /* === SPEC B1 — Token v2 dark overrides === */
        --hk-focus-ring: 3px solid rgb(247 244 238 / 85%);
        --hk-glass-border: 1px solid rgb(200 169 110 / 18%);
        --hk-glass-border-color: rgb(200 169 110 / 18%);
    }
    :root:not([data-theme="light"]) .hk-blockquote-wrap.hk-blockquote--hadith {
        background: rgba(14, 23, 38, 0.5);
        border-color: rgba(91, 138, 154, 0.2);
    }
    :root:not([data-theme="light"]) .hk-blockquote-wrap.hk-blockquote--quran {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    :root:not([data-theme="light"]) .hk-divider--diamond {
        background-color: var(--hk-parchment);
    }
}

/* === Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    background-color: var(--hk-parchment);
}
/* Note: no scroll-behavior:smooth here — JS handles smooth scrolling with header offset */

body {
    font-family: var(--hk-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--hk-body);
    background-color: var(--hk-parchment);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--hk-teal);
    text-decoration: none;
    background-image: linear-gradient(var(--hk-gold), var(--hk-gold));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.3s var(--hk-ease), color 0.3s var(--hk-ease);
}

a:hover {
    color: var(--hk-navy-mid);
    background-size: 100% 1px;
}

/* Exclude elements with their own hover states from link underline animation */
.hk-btn,
.hk-nav__list a,
.hk-footer a,
.hk-project-card__link,
.hk-post-card__body h3 a,
.hk-mediathek__pub-link,
.hk-category-filter a,
.pagination .page-numbers {
    background-image: none;
}

/* Reset list style for nav/layout lists only — content lists restored in blog.css and pages.css */
nav ul, nav ol,
.hk-footer ul, .hk-footer ol {
    list-style: none;
}

/* === Typography === */
h1, h2, h3 {
    font-family: var(--hk-font-heading);
    color: var(--hk-heading);
}

h4, h5, h6 {
    font-family: var(--hk-font-body);
    color: var(--hk-heading);
}

h1 {
    font-size: var(--hk-fs-6);  /* Spec B1 — was 40px → ladder step 64px */
    font-weight: 600;
    line-height: 1.15;
}

h2 {
    font-size: var(--hk-fs-5);  /* Spec B1 — was 32px → 48px */
    font-weight: 600;
    line-height: 1.2;
}

h3 {
    font-size: var(--hk-fs-4);  /* Spec B1 — was 24px → 32px */
    font-weight: 500;
    line-height: 1.3;
}

h4 {
    font-size: var(--hk-fs-2);  /* Spec B1 — was 16px → 20px */
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

p {
    margin-bottom: 1em;
}

strong, b {
    font-weight: 600;
}

/* Display class — large decorative headings */
.hk-display {
    font-family: var(--hk-font-heading);
    font-size: 48px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--hk-heading);
}

/* Overline — small label text */
.hk-overline {
    font-family: var(--hk-font-body);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hk-gold-text);
}

/* Pill — small badge text (uppercase scope companion) */
.hk-pill {
    display: inline-block;
    font-family: var(--hk-font-body);
    font-size: var(--hk-fs--2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--hk-glass);
    color: var(--hk-gold-text);
    border: var(--hk-glass-border);
}

/* Caption — small descriptive text */
.hk-caption {
    font-family: var(--hk-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* === SPEC B1 — Typographic ornaments === */
.hk-ornament-letter,
.hk-ornament-numeral {
    font-family: var(--hk-font-heading);
    font-weight: 300;
    color: var(--hk-gold);
    opacity: 0.25;
    line-height: 1;
    font-size: var(--hk-fs-6);
    pointer-events: none;
    user-select: none;
}
.hk-ornament-numeral {
    font-size: clamp(8rem, 20vw, 18rem);
}

/* === Utility === */
.hk-container {
    max-width: var(--hk-container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hk-container--narrow {
    max-width: var(--hk-container-narrow);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: auto;
    height: auto;
    padding: 1rem 2rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--hk-gold);
    color: var(--hk-heading);
    font-weight: 600;
    z-index: var(--hk-z-modal);
}

/* === Buttons === */
.hk-btn {
    display: inline-block;
    font-family: var(--hk-font-body);
    font-size: 12px;
    font-weight: 500;
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease), transform 0.4s var(--hk-ease), color 0.4s var(--hk-ease), border-color 0.4s var(--hk-ease);
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    text-transform: none;        /* Spec B1 hotfix: cascade-proof against uppercase parents */
    letter-spacing: normal;
}

.hk-btn--gold {
    background: var(--hk-gold-gradient);
    color: var(--hk-white);
}

.hk-btn--gold:hover {
    box-shadow: var(--hk-gold-shadow);
    transform: translateY(-1px);
    color: var(--hk-white);
}

.hk-btn--disabled,
.hk-btn--disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.hk-btn--glass {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--hk-heading);
    border: 1px solid rgba(200,169,110,0.3);
}

.hk-btn--glass:hover {
    border-color: var(--hk-gold);
    background: rgba(200,169,110,0.08);
    color: var(--hk-heading);
}

.hk-btn--navy {
    background: var(--hk-navy);
    color: var(--hk-gold);
}

.hk-btn--navy:hover {
    background: var(--hk-navy-mid);
    box-shadow: var(--hk-glass-shadow);
    color: var(--hk-gold);
}

.hk-btn--text {
    background: transparent;
    color: var(--hk-teal);
    border: none;
    border-radius: 0;
    padding: 14px 0;
}

.hk-btn--text:hover {
    color: var(--hk-gold);
}

/* Button press feedback */
.hk-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Button ripple effect */
.hk-btn__ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: hk-ripple 600ms ease-out forwards;
    pointer-events: none;
}

@keyframes hk-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* === Glass Components === */
.hk-glass {
    background: var(--hk-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    border-radius: 12px;
    transition: transform 0.4s var(--hk-ease), box-shadow 0.4s var(--hk-ease), border-color 0.4s var(--hk-ease), background 0.4s var(--hk-ease);
}

.hk-glass:hover {
    border-color: var(--hk-glass-border-hover);
    box-shadow: var(--hk-glass-shadow-elevated);
    transform: translateY(-2px);
}

/* Glass form input */
.hk-input {
    font-family: var(--hk-font-body);
    font-size: 15px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--hk-glass-border);  /* Spec B1 — Family 3 full border shorthand */
    border-radius: 8px;
    color: var(--hk-heading);
    transition: border-color 0.3s var(--hk-ease), box-shadow 0.3s var(--hk-ease);
    outline: none;
    width: 100%;
}

.hk-input:focus {
    border-color: var(--hk-gold);
    box-shadow: 0 0 0 3px rgba(200,169,110,0.15);
}

.hk-input::placeholder {
    color: var(--hk-body);
    opacity: 0.6;
}

/* === Geometric Dividers === */

/* Diamond divider — thin gold lines with rotated square center */
.hk-divider--diamond {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: var(--hk-space-lg) 0;
    background-color: var(--hk-parchment);
}

.hk-divider--diamond::before,
.hk-divider--diamond::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hk-gold-light);
}

.hk-divider--diamond span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--hk-gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Fade divider — gold line fading from transparent to gold to transparent */
.hk-divider--fade {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    margin: var(--hk-space-lg) 0;
    border: none;
}

/* Dots divider — 5 gold dots with opacity gradient */
.hk-divider--dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--hk-space-lg) 0;
}

.hk-divider--dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hk-gold);
}

.hk-divider--dots span:nth-child(1),
.hk-divider--dots span:nth-child(5) {
    opacity: 0.3;
}

.hk-divider--dots span:nth-child(2),
.hk-divider--dots span:nth-child(4) {
    opacity: 0.6;
}

.hk-divider--dots span:nth-child(3) {
    opacity: 1;
}

/* === Scroll Animation === */
/* Spec B1 PR-8: migrated to motion tokens. .hk-fx-reveal is the canonical
   token-driven class; .hk-animate kept for backwards compat with hakim.js. */
.hk-animate {
    opacity: 0;
    transform: translateY(var(--hk-motion-distance-md));
    transition: opacity var(--hk-motion-scroll) var(--hk-ease-out-cubic),
                transform var(--hk-motion-scroll) var(--hk-ease-out-cubic);
}

.hk-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === SPEC B1 — Class-driven motion === */
.hk-fx-reveal {
    opacity: 0;
    transform: translateY(var(--hk-motion-distance-md));
    transition: opacity var(--hk-motion-scroll) var(--hk-ease-out-cubic),
                transform var(--hk-motion-scroll) var(--hk-ease-out-cubic);
}
.hk-fx-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hk-fx-cinematic {
    transition: transform var(--hk-motion-cinematic) var(--hk-ease-out-expo),
                opacity   var(--hk-motion-cinematic) var(--hk-ease-out-expo),
                filter    var(--hk-motion-cinematic) var(--hk-ease-out-expo);
}

/* === Arabic text === */
.hk-arabic {
    font-family: var(--hk-font-arabic);
    font-size: 19px;
    direction: rtl;
    text-align: end;
}

/* === Meta text === */
.hk-meta {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--hk-body);
}

/* Gold gradient headings */
.hk-heading-gradient {
    background: linear-gradient(135deg, var(--hk-gold), var(--hk-gold-light), var(--hk-gold));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hk-gold); /* fallback */
}

/* === Accessibility — Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
    .hk-animate {
        opacity: 1;
        transform: none;
    }
    /* Spec B1: new class-driven elements also snap to final state */
    .hk-fx-reveal {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === iOS Safari: disable background-attachment:fixed (causes visual glitches) === */
@supports (-webkit-touch-callout: none) {
    * {
        background-attachment: scroll !important;
    }
}

/* === Backdrop-filter Fallback === */

@supports not (backdrop-filter: blur(1px)) {
    .hk-glass {
        background: rgba(255,255,255,0.9);
    }
}

/* === Responsive === */

/* Subtle noise texture overlay for parchment sections */
.hk-projects,
.hk-events,
.hk-partners {
    position: relative;
}

.hk-projects::before,
.hk-events::before,
.hk-partners::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above the noise overlay */
.hk-projects > .hk-container,
.hk-events > .hk-container,
.hk-partners > .hk-container {
    position: relative;
    z-index: 1;
}

/* Directional scroll reveal */
.hk-animate[style*="--hk-reveal-x"] {
    transform: translateX(var(--hk-reveal-x, 0)) translateY(30px);
}
.hk-animate[style*="--hk-reveal-x"].is-visible {
    transform: translateX(0) translateY(0);
}

/* Large desktop */
@media (max-width: 1440px) {
    /* Spec B1 — old --hk-section-padding cascade removed; B2 will normalize */
}

/* Desktop */
@media (max-width: 1024px) {
    /* Spec B1 — old --hk-section-padding cascade removed; B2 will normalize */
    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    .hk-display { font-size: 42px; }

    /* Neutralise directional X-drift at tablet/small-desktop — translateX shifts
       elements beyond the right edge of the viewport at this width. Keep the
       vertical fade-up (translateY) so the animation still reads as intentional. */
    .hk-animate[style*="--hk-reveal-x"] {
        transform: translateY(30px);
    }
    .hk-animate[style*="--hk-reveal-x"].is-visible {
        transform: translateY(0);
    }
}

/* Tablet */
@media (max-width: 768px) {
    /* Spec B1 — old --hk-section-padding cascade removed; B2 will normalize */
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    .hk-display { font-size: 36px; }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --hk-section-padding: 60px;          /* legacy — keep until B2 sweep */
        --hk-section-padding-y: 48px;        /* Spec B1 — Family 5 mobile-only step */
    }
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    body { font-size: 15px; }
    .hk-display { font-size: 30px; }
}

/* ============================================================
   MOBILE REWORK — Animation overrides (≤768px)
   Replace directional slide with scale+fade bloom.
   Desktop animations (fade+rise from translateY) unchanged.
   ============================================================ */

@media (max-width: 768px) {

    /* Scale+fade: replaces translateY(30px) base animation */
    .hk-animate {
        opacity: 0;
        transform: scale(0.94);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hk-animate.is-visible {
        opacity: 1;
        transform: scale(1);
    }

    /* Neutralise directional reveal — no horizontal drift */
    .hk-animate[style*="--hk-reveal-x"] {
        transform: scale(0.94);
    }

    .hk-animate[style*="--hk-reveal-x"].is-visible {
        transform: scale(1);
    }

}

/* ==========================================================================
   Blockquote Wrap — Sitewide base spacing
   ========================================================================== */

.hk-blockquote-wrap {
    margin: 2.5em 0;
    position: relative;
}

/* ==========================================================================
   Premium Quran Blockquote — Navy card with gold accents (sitewide)
   ========================================================================== */

.hk-blockquote-wrap.hk-blockquote--quran {
    background: linear-gradient(170deg, var(--hk-navy) 0%, #1a2744 60%, #162038 100%);
    border: none;
    border-radius: 16px;
    padding: 2.5rem 2.5rem 2rem;
    text-align: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(27, 42, 74, 0.15);
}

.hk-blockquote-wrap.hk-blockquote--quran::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hk-gold), transparent);
    opacity: 0.6;
    border-radius: 0;
    inset: auto;
}

.hk-blockquote-wrap.hk-blockquote--quran::after {
    content: '\06DD';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18rem;
    color: rgba(200, 169, 110, 0.03);
    pointer-events: none;
    line-height: 1;
}

.hk-blockquote-wrap.hk-blockquote--quran blockquote {
    font-style: normal;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.hk-blockquote-wrap.hk-blockquote--quran blockquote p {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: var(--hk-white);
    margin: 0 auto;
    max-width: 600px;
}

.hk-blockquote-wrap.hk-blockquote--quran blockquote cite {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 500;
    color: var(--hk-gold);
    margin-top: 1.25rem;
}

.hk-blockquote-wrap.hk-blockquote--quran .arabic,
.hk-blockquote-wrap.hk-blockquote--quran .hk-arabic {
    font-family: var(--hk-font-arabic);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-style: normal;
    line-height: 2;
    color: var(--hk-gold);
    direction: rtl;
    text-align: center;
    display: block;
    margin-bottom: 1.5rem;
}

/* Ornamental Quran brackets ﴿ ﴾ around Arabic text */
.hk-blockquote-wrap.hk-blockquote--quran .arabic::before,
.hk-blockquote-wrap.hk-blockquote--quran .hk-arabic::before {
    content: '\FD3F';
    margin-inline-start: 0.3em;
}

.hk-blockquote-wrap.hk-blockquote--quran .arabic::after,
.hk-blockquote-wrap.hk-blockquote--quran .hk-arabic::after {
    content: '\FD3E';
    margin-inline-end: 0.3em;
}

@media (max-width: 768px) {
    .hk-blockquote-wrap.hk-blockquote--quran {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 12px;
    }
}

/* ==========================================================================
   Premium Hadith Blockquote — Teal card with larger text (sitewide)
   ========================================================================== */

.hk-blockquote-wrap.hk-blockquote--hadith {
    background: rgba(91, 138, 154, 0.06);
    border: 1px solid rgba(91, 138, 154, 0.15);
    border-top: 3px solid var(--hk-teal);
    border-radius: 12px;
    padding: 2rem 2.25rem 1.75rem;
    text-align: center;
}

.hk-blockquote-wrap.hk-blockquote--hadith blockquote {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.hk-blockquote-wrap.hk-blockquote--hadith blockquote p {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.75;
    color: var(--hk-heading);
    margin: 0 auto;
    max-width: 620px;
}

.hk-blockquote-wrap.hk-blockquote--hadith blockquote .hk-arabic {
    font-family: var(--hk-font-arabic);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-style: normal;
    line-height: 2;
    color: var(--hk-teal);
    direction: rtl;
    text-align: center;
    display: block;
    margin-bottom: 1rem;
}

.hk-blockquote-wrap.hk-blockquote--hadith blockquote cite {
    display: block;
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 500;
    color: var(--hk-teal);
    margin-top: 1.25rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .hk-blockquote-wrap.hk-blockquote--hadith {
        padding: 1.5rem 1.25rem 1.25rem;
    }
}

/* ==========================================================================
   Premium Scholar Blockquote — Parchment card with navy + gold (sitewide)
   For classical voices: imāms, jurists, physicians, ʿulamāʾ
   ========================================================================== */

.hk-blockquote-wrap.hk-blockquote--scholar {
    background: #FFFDF7;
    border: 1px solid rgba(27, 42, 74, 0.1);
    border-top: 3px solid var(--hk-gold);
    border-radius: 14px;
    padding: 3.25rem 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 1px 0 rgba(27, 42, 74, 0.04),
        0 20px 40px -24px rgba(27, 42, 74, 0.22),
        inset 0 0 0 1px rgba(200, 169, 110, 0.06);
}

/* Subtle ornamental watermark on right side */
.hk-blockquote-wrap.hk-blockquote--scholar::before {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(200, 169, 110, 0.08), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
    inset: auto;
}


.hk-blockquote-wrap.hk-blockquote--scholar blockquote {
    font-style: normal;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.hk-blockquote-wrap.hk-blockquote--scholar blockquote p {
    font-family: var(--hk-font-heading);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.75;
    color: var(--hk-navy);
    margin: 0 auto;
    max-width: 620px;
}

.hk-blockquote-wrap.hk-blockquote--scholar blockquote .hk-arabic {
    font-family: var(--hk-font-arabic);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-style: normal;
    line-height: 2;
    color: var(--hk-navy);
    direction: rtl;
    text-align: center;
    display: block;
    margin-bottom: 1.25rem;
}

.hk-blockquote-wrap.hk-blockquote--scholar blockquote cite {
    display: inline-block;
    font-family: var(--hk-font-body);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 500;
    color: var(--hk-navy);
    margin-top: 1.5rem;
    padding-top: 1rem;
    position: relative;
}

/* Small gold diamond separator between quote and attribution */
.hk-blockquote-wrap.hk-blockquote--scholar blockquote cite::before {
    content: '\2666';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: var(--hk-gold);
    opacity: 0.8;
}

/* Dark mode override */
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--scholar {
    background: linear-gradient(172deg, rgba(27, 42, 74, 0.5) 0%, rgba(14, 23, 38, 0.6) 100%);
    border-color: rgba(200, 169, 110, 0.25);
    border-top-color: var(--hk-gold);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--scholar blockquote p,
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--scholar blockquote .hk-arabic,
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--scholar blockquote cite {
    color: var(--hk-heading);
}
:root[data-theme="dark"] .hk-blockquote-wrap.hk-blockquote--scholar::after {
    color: rgba(200, 169, 110, 0.08);
}

@media (max-width: 768px) {
    .hk-blockquote-wrap.hk-blockquote--scholar {
        padding: 2.5rem 1.5rem 1.5rem;
        border-radius: 12px;
    }
    .hk-blockquote-wrap.hk-blockquote--scholar::after {
        font-size: 5.5rem;
    }
}

/* ==========================================================================
   Keyboard focus
   ==========================================================================
   Global :focus-visible rule. Individual stylesheets that set `outline: none`
   for aesthetic reasons (e.g. layout.css:393, admin-artikel-machine.css:197)
   pair their rules with `:focus:not(:focus-visible)` — meaning mouse clicks
   suppress the outline but keyboard users still see it via the rule below.
   Anything that sets a blanket `outline: none` should be considered a bug.
   ========================================================================== */
:focus-visible {
    outline: var(--hk-focus-ring);
    outline-offset: var(--hk-focus-ring-offset);
    border-radius: 2px;
}
/* Dark-mode override is now handled by --hk-focus-ring redefinition under
   :root[data-theme="dark"] (Spec B1 Family 2). Selector kept for parity. */

/* ==========================================================================
   Light/dark thumbnail cross-fade
   ==========================================================================
   Convention: a sibling file with `-dark` suffix next to the featured image
   (e.g. featured-v2.webp + featured-v2-dark.webp). The PHP helper
   hakim_post_thumbnail_with_dark() emits two stacked layers; this CSS swaps
   their opacity on [data-theme="dark"] with a 550ms eased cross-fade.
   ========================================================================== */
.hk-thumb-stack {
    position: absolute;
    inset: 0;
    display: block;
}

.hk-thumb-stack__layer {
    position: absolute;
    inset: 0;
    display: block;
    transition: opacity 0.55s var(--hk-ease);
    will-change: opacity;
}

.hk-thumb-stack__layer picture,
.hk-thumb-stack__layer img {
    width: 100%;
    height: 100%;
    display: block;
}

.hk-thumb-stack__layer--dark { opacity: 0; }

:root[data-theme="dark"] .hk-thumb-stack__layer--light { opacity: 0; }
:root[data-theme="dark"] .hk-thumb-stack__layer--dark  { opacity: 1; }

/* Cover modifier — used by single-post + Perspektive heroes that previously
   relied on CSS background-image. Image layers fill the parent and obey the
   per-post focal point via --focal custom property on the wrapper. */
.hk-thumb-stack--cover .hk-thumb-stack__layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal, center center);
}

@media (prefers-reduced-motion: reduce) {
    .hk-thumb-stack__layer { transition: none; }
}

/* === Bilingual Block ===
   Arabic + German side-by-side on wide viewports, stacked on mobile.
   Spec B1 PR-4. Authoring is editor-driven; a custom Gutenberg block is a B2 deliverable. */
.hk-bilingual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2.5rem 0;
    padding: 2rem;
    border: var(--hk-glass-border);
    border-radius: var(--hk-radius);
    background: var(--hk-glass);
}
.hk-bilingual blockquote {
    margin: 0;
    line-height: 1.7;
}
.hk-bilingual blockquote[lang="ar"] {
    font-family: var(--hk-font-arabic);
    font-size: var(--hk-fs-3);
}
.hk-bilingual figcaption {
    font-family: var(--hk-font-body);
    font-size: var(--hk-fs--2);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hk-gold-text);
    text-align: center;
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    .hk-bilingual {
        grid-template-columns: 1fr 1fr;
    }
    .hk-bilingual figcaption {
        grid-column: 1 / -1;
    }
}
/* When the document direction is RTL (Arabic / Persian / Urdu pages),
   flip the grid flow so Arabic sits on the visually-leading side.
   Uses html[dir="rtl"] selector to match the project convention in
   assets/css/i18n.css (avoids the :dir() pseudo-class's pre-Safari-16.4
   gaps and keeps RTL targeting consistent across the codebase). */
html[dir="rtl"] .hk-bilingual {
    direction: rtl;
}
html[dir="rtl"] .hk-bilingual blockquote:not([lang="ar"]) {
    /* Restore LTR for the non-Arabic translation block — the parent's
       direction:rtl would otherwise cascade into German/etc. paragraphs. */
    direction: ltr;
}