/* ============================================================
   TOKENS - a CSS-kaszkád 1. rétege (tokens -> layout -> components -> pages -> responsive)

   Betűk, design-tokenek, reset, container. A témacsere EGYETLEN pontja a
   lenti BRAND BLOCK: hardcode szín a többi rétegben TILOS - ha szín kell,
   előbb token lesz belőle, itt.
   Csak világos téma (nincs dark-modul, nincs témaváltó).
   ============================================================ */

/* ============================================================
   FONTS (Source Sans 3 szöveg + Source Code Pro mono - latin + latin-ext, helyi)
   A címbetű (Lora) a kits/serif-display.css-ben. Google Fonts SOHA.
   A böngésző csak a ténylegesen használt súlyt tölti le.
   ============================================================ */
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/source-sans-3-v19-latin_latin-ext-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/source-sans-3-v19-latin_latin-ext-500.woff2')     format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/source-sans-3-v19-latin_latin-ext-600.woff2')     format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/source-sans-3-v19-latin_latin-ext-700.woff2')     format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3/source-sans-3-v19-latin_latin-ext-800.woff2')     format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('../fonts/source-sans-code/source-code-pro-v31-latin_latin-ext-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('../fonts/source-sans-code/source-code-pro-v31-latin_latin-ext-500.woff2')     format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Chrome-üveg fátyol és fényél alapértékei. SZÁNDÉKOSAN a brand-blokk
       ELŐTT állnak: egy :root-szabályon belül a KÉSŐBBI sor nyer, így a
       brand-blokk felül tudja írni őket (a fátylat felül is írja: krém). */
    --glass-veil:         rgba(255, 255, 255, 0.4);
    --glass-veil-strong:  rgba(255, 255, 255, 0.6);
    --glass-sheen:        rgba(255, 255, 255, 0.6);
    --glass-sheen-strong: rgba(255, 255, 255, 0.8);
    --gomb-primary-color: #FFFFFF;

    /* === BRAND BLOCK (light) - Okker: mélyarany a krém papíron, bézs hajszálvonal, szén lábléc ===

       A gyülekezet korábbi oldalának váza marad (krém lap, bézs #E1D7C6,
       szén lábléc #2C2A29), az accent mélyarany.

       SZEREPOSZTÁS (WCAG-mérés):
         - az OKKER az accent-létra: gomb-felület fehér felirattal (#8A6420,
           5,36:1), szövegként a mélyebb okker (#7A5A1E, 5,70:1 a krémen).
         - az ARANY (#C9A45C) csak vonal és dísz a krémen (2,1:1 - NEM szöveg);
           a szén láblécen a SZÖVEG-accent a világos arany (#D9B76E, 7,45:1).
         - a SZÉN az accent-ink: a lábléc háttere.
         - a BÉZS a hajszálvonalak tokenje (--color-border), így a fejléc alsó vonala.

       Kontraszt-mérés:
         KRÉM  szöveg #2C2A29 a base-en 12,8:1 · muted #5A504A 7,04:1 ·
               subtle #6B625B 5,35:1 · okker-deep #7A5A1E 5,70:1 (fehéren
               6,35:1) · okker #8A6420 4,8:1 · fehér az accenten 5,36:1
         BÉZS  szöveg #2C2A29 10,0:1 · okker a bézsen #6B4E19 5,4:1
         SZÉN  szöveg #E8E1D6 11,0:1 · muted #B8AFA3 6,6:1 · arany #D9B76E 7,45:1 */

    /* Krém papír-család */
    --color-base:           #F7F2E9;  /* lap-háttér - krém */
    --color-surface:        #FFFDF9;  /* kártya/panel - emelt, meleg fehér */
    --color-surface-raised: #FFFFFF;
    --color-border:         #E1D7C6;  /* bézs - hajszálvonal */
    --color-border-strong:  #CBBDA4;
    --color-muted:          #CBBDA4;

    /* Meleg szöveg-hármas (text > muted > subtle, mind AA) */
    --color-text:           #2C2A29;
    --color-text-muted:     #5A504A;
    --color-text-subtle:    #6B625B;

    /* Okker-létra. A deep a domináns szöveg-token (link, eyebrow). */
    --color-accent:            #8A6420;  /* base - okker (felület) */
    --color-accent-deep:       #7A5A1E;
    --color-accent-light:      #C9A45C;  /* arany - CSAK vonal és dísz a krémen */
    --color-accent-ink:        #2C2A29;  /* szén */
    --color-accent-deep-hover: #5E4517;
    --color-accent-soft:       rgba(138, 100, 32, 0.08);
    --color-accent-medium:     rgba(138, 100, 32, 0.18);
    --color-accent-glow:        rgba(138, 100, 32, 0.32);
    --color-accent-glow-strong: rgba(138, 100, 32, 0.42);
    --color-accent-glow-soft:   rgba(138, 100, 32, 0.16);
    /* Szöveg accent-háttéren: FEHÉR (5,36:1). */
    --color-on-accent: #FFFFFF;
    /* Elsődleges gomb: accent -> deep (a fehér felirat mindkét végen olvasható). */
    --gomb-primary-grad: linear-gradient(135deg, var(--color-accent), var(--color-accent-deep));
    /* Galéria-sáv: egy fokkal mélyebb krém. */
    --color-gallery: #EFE7D6;
    /* A fejléc üveg-fátyla KRÉM (a lap papírja áttetszően). */
    --glass-veil:        rgba(247, 242, 233, 0.90);
    --glass-veil-strong: rgba(247, 242, 233, 0.97);

    /* Sion-tokenek - a brand-blokkon BELÜL (a chrome és a skin fogyasztja). */
    --sion-beige:             #E1D7C6;  /* hajszálvonal */
    --sion-charcoal:          #2C2A29;  /* a lábléc háttere */
    --sion-on-charcoal:       #E8E1D6;  /* szöveg a szénen (11,0:1) */
    --sion-on-charcoal-muted: #B8AFA3;  /* halkabb szöveg a szénen (6,6:1) */
    --sion-gold-on-charcoal:  #D9B76E;  /* arany szöveg-accent a szénen (7,45:1) */
    --sion-charcoal-line:     #45413E;  /* hajszálvonal a szénen */
    --sion-ochre-on-beige:    #6B4E19;  /* okker szöveg a bézsen (5,4:1) */
    --sion-gold-line:         #C9A45C;  /* arany vonal (dísz, nem szöveg) */
    /* Gombok - dupla keret: enyhe sarok + az elsődleges gomb belső gyűrűje. */
    --radius-btn:                 4px;
    --sion-ring-on-accent:        rgba(255, 255, 255, 0.62);
    --sion-ring-on-accent-hover:  rgba(255, 255, 255, 0.82);
    /* === /BRAND BLOCK (light) === */

    /* Status colors (WCAG AA kontraszt) */
    --status-ok-text:       #14532d;
    --status-ok-bg:         rgba(34, 122, 73, 0.10);
    --status-ok-border:     rgba(34, 122, 73, 0.40);

    --status-info-text:     #7B1E2C;
    --status-info-bg:       rgba(123, 30, 44, 0.07);
    --status-info-border:   rgba(123, 30, 44, 0.35);

    --status-neutral-text:  #4A5568;
    --status-neutral-bg:    #F1F5F9;
    --status-neutral-border:#CBD5E1;

    --status-warn-text:     #7A4D09;
    --status-warn-bg:       rgba(201, 123, 29, 0.10);
    --status-warn-border:   rgba(201, 123, 29, 0.40);
    --status-warn-dot:      #C97B1D;

    /* Élő állapot-pöttyök. A topbar-pötty a SÖTÉT (szén) sávon világít
       (zöld = most zajlik, borostyán = hamarosan véget ér); a lábléc-lista
       pöttye a mélyebb zöld. */
    --status-live-dot:      #5DD68C;
    --status-live-ring:     rgba(93, 214, 140, 0.30);
    --status-soon-dot:      #F5C062;
    --status-soon-ring:     rgba(245, 192, 98, 0.30);
    --status-ok-dot:        #227A49;
    --status-ok-ring:       rgba(34, 122, 73, 0.15);

    /* Szöveg és vonal a sötét (ink / szén) sávokon - topbar, drawer gombsor.
       Fehér-alapú áttetszőségek: bármely sötét felületen olvashatók. */
    --on-ink:        rgba(255, 255, 255, 0.92);
    --on-ink-strong: #FFFFFF;
    --on-ink-muted:  rgba(255, 255, 255, 0.72);
    --on-ink-faint:  rgba(255, 255, 255, 0.30);
    --on-ink-line:   rgba(255, 255, 255, 0.08);
    --on-ink-sep:    rgba(255, 255, 255, 0.25);
    --on-ink-sheen:  rgba(255, 255, 255, 0.18);

    /* Árnyék- és fátyol-segédek (a semleges sötét tintából) */
    --shadow-inset-sm: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-main:     0 16px 36px -18px rgba(15, 23, 42, 0.14);
    --overlay-veil:    rgba(15, 23, 42, 0.18);
    --overlay-modal:   rgba(13, 17, 23, 0.60);
    /* Szakasz-ritmus: a surface-szekció felső belső árnyéka. */
    --shadow-section-inset: inset 0 12px 20px -20px rgba(15, 23, 42, 0.12);
    /* Kereső-tálca: süllyesztett vályú + benne az emelt sziget. */
    --shadow-trough:   inset 0 2px 4px rgba(15, 23, 42, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
    --shadow-island:   0 1px 2px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.60);

    /* Font family (a címbetű --ff-display a kits/serif-display.css-ben) */
    --ff-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ff-mono: 'Source Code Pro', ui-monospace, 'SFMono-Regular', monospace;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Radius */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* Section */
    --section-py:    clamp(2.5rem, 5vw, 4rem);
    --section-px:    clamp(1rem, 4vw, 2rem);
    --container-max: 1200px;

    /* Typography */
    --fs-h1:      clamp(1.9rem, 4.5vw, 2.8rem);
    --fs-h2:      clamp(1.35rem, 3vw, 1.7rem);
    --fs-h3:      clamp(1.05rem, 2vw, 1.2rem);
    --fs-lead:    clamp(1.15rem, 2.2vw, 1.3rem);
    --fs-body:    1.125rem;
    --fs-small:   0.875rem;
    --fs-tiny:    0.78rem;
    --fs-eyebrow: 0.82rem;
    --ls-eyebrow: 0.14em;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);

    /* Motion */
    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --d-fast:   150ms;
    --d-base:   250ms;
    --d-slow:   400ms;

    /* Layout */
    --header-h: clamp(60px, 8vw, 76px);
    --header-h-scrolled: clamp(52px, 6.6vw, 62px);
    --topbar-h: clamp(32px, 4vw, 40px);
    --admin-bar-h: 0px;
    /* Morzsa-sáv magassága - csak a morzsás oldalakon nem nulla (lent). */
    --breadcrumb-h: 0px;
}

/* Morzsamenü (inc/breadcrumb.php): a sáv magassága; a horgony-célok
   scroll-margin-top-ja ennyivel több, hogy a tapadó sáv ne takarja őket. */
body.has-breadcrumb { --breadcrumb-h: 44px; }

/* WP admin-sáv eltolás - csak bejelentkezett nézetben. A core a tartalmat
   tolja (html margin-top), ez a változó a fix fejlécet tolja ugyanennyivel. */
body.admin-bar { --admin-bar-h: 32px; }
@media (max-width: 782px) {
    body.admin-bar { --admin-bar-h: 46px; }
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a {
    color: var(--color-accent-deep);
    text-decoration: none;
    transition: color var(--d-fast) var(--ease);
}
/* A link hover-jelzése színváltás, nem aláhúzás. A komponensek (nav, lábléc,
   gombok) saját, erősebb hover-szabályt hoznak - ez csak a "csupasz" szövegközi
   linkekre hat. */
a:hover {
    color: var(--color-accent);
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul, ol { list-style: none; }

/* Horgony-célok: a fix fejléc (és a tapadó morzsa) ne takarja ki a cél tetejét. */
section[id], main[id], .site-footer__col[id], form[id] { scroll-margin-top: calc(var(--header-h) + var(--admin-bar-h) + var(--breadcrumb-h) + 1rem); }

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Képernyőolvasó-only segédosztály + ugrólink */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: fixed;
    top: var(--admin-bar-h); left: var(--space-3);
    z-index: 1000;
    width: auto; height: auto;
    clip: auto;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    color: var(--color-accent-deep);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--section-px);
    padding-right: var(--section-px);
}