/* =============================================================
   IRELAND DURGOTSAB — MAIN STYLESHEET
   Palette: Crimson #B5121B | Gold #D4AF37 | Saffron #FF6B00
   Fonts: Cormorant Garamond (headings) | Jost (body)
============================================================= */

/* ---------------------------
   CSS VARIABLES
--------------------------- */
:root {
    --crimson:       #B5121B;
    --crimson-dark:  #7A0C12;
    --crimson-light: #D4262F;
    --gold:          #D4AF37;
    --gold-light:    #F0D060;
    --gold-dark:     #9A7D1A;
    --saffron:       #FF6B00;
    --bg:            #09090F;
    --bg-surface:    #110808;
    --bg-card:       #160E0E;
    --text:          #F5F0E8;
    --text-muted:    #C9A87C;
    --text-dim:      #8A7060;
    --border:        rgba(var(--gold-rgb),0.18);
    --border-hover:  rgba(var(--gold-rgb),0.45);
    --overlay:       rgba(var(--bg-rgb),0.72);

    /* ----------------------------------------------------------------
       Colours that existed only as literals scattered through the files.
       Named here at their EXACT current values, so this is a rename, not a
       restyle - nothing moves today, but the palette is now swappable.
       ---------------------------------------------------------------- */
    --crimson-grad:    #D41421;   /* gradient partner; NOT equal to --crimson-light */
    --crimson-deep:    #8B0000;   /* gradient partner for --crimson-light */
    --burgundy:        #8B1020;   /* .btn-burgundy family (pages.css)     */
    --burgundy-dark:   #6B0C18;
    --burgundy-border: #A31428;
    --burgundy-text:   #F9EDE0;
    --crimson-shade:   #8A0D13;   /* floating-button gradient end         */
    --gold-shade:      #B8902A;   /* gold gradient end (woo.css)          */
    --saffron-dark:    #E05A00;   /* saffron hover                        */
    --bg-deep:         #060409;

    /* Status colours. Deliberately NOT brand colours: a success message
       must not be gold and an error must not be crimson, or the festival
       palette starts meaning "something went wrong". */
    --success:       #4ADE80;
    --success-alt:   #5CB85C;
    --success-light: #6EE7A0;
    --error:         #F87171;
    --neutral:       #9CA3AF;

    /* Third-party brand colour - WhatsApp owns these, not us. */
    --whatsapp:      #25D366;
    --whatsapp-dark: #20BD5A;

    --font-heading:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Jost', system-ui, sans-serif;
    --font-mantra:   'Tiro Devanagari', 'Noto Serif Devanagari', serif;

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  32px;
    /* The pill shape every button and badge uses. It was written as a bare
       50px in 30-odd places across three files, so "make the buttons less
       round" was a find-and-replace rather than a setting. */
    --radius-pill: 50px;

    /* ----------------------------------------------------------------
       CHANNEL VALUES for the brand colours.

       The palette above could not actually be changed. 132 places wrote
       rgba(var(--gold-rgb), .12) by hand for a gold tint or glow, so editing
       --gold recoloured borders and text and left every wash, shadow and
       hover the old colour. Splitting the channels lets an alpha variant
       derive from the palette instead of copying it:

           border: 1px solid rgba(var(--gold-rgb), 0.18);

       Change the three lines below and the whole site follows.
       ---------------------------------------------------------------- */
    --gold-rgb:    212, 175, 55;
    --crimson-rgb: 181, 18, 27;
    --bg-rgb:      9, 9, 15;
    /* The first sweep covered gold, crimson and the page background only.
       These were still written as literals, so a saffron glow or a success
       tint stayed the old colour when its token changed. */
    --saffron-rgb: 255, 107, 0;
    --success-rgb: 34, 197, 94;
    --neutral-rgb: 156, 163, 175;
    --burgundy-dark-rgb: 107, 12, 24;
    --text-rgb:    245, 240, 232;

    /* ----------------------------------------------------------------
       SPACING SCALE. There were no spacing tokens at all against roughly
       1,300 hand-written px values, which is why the section rhythm
       drifted (100px, 80px, 64px and 60px all appear as "a section").
       A 4px-based scale, so existing values mostly land on a step.
       ---------------------------------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  80px;
    --space-10: 100px;

    /* ----------------------------------------------------------------
       SHADOWS. Previously every shadow was written inline, so there was
       no consistent elevation language and blur radii ranged from 4px to
       80px with nothing in between meaning anything.
       ---------------------------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(var(--bg-rgb), 0.35);
    --shadow-md: 0 10px 24px rgba(var(--bg-rgb), 0.45);
    --shadow-lg: 0 20px 44px rgba(var(--bg-rgb), 0.55);
    --shadow-gold: 0 8px 28px rgba(var(--gold-rgb), 0.18);

    /* ----------------------------------------------------------------
       TYPE SCALE. Headings already use clamp(), but five slightly
       different "section title" ramps had been written by hand. These
       are the canonical steps; the existing h1-h4 rules match --step-6
       down to --step-3 so nothing moves today.
       ---------------------------------------------------------------- */
    --step--1: clamp(0.78rem, 0.9vw, 0.85rem);
    --step-0:  1rem;
    --step-1:  clamp(1.05rem, 1.4vw, 1.15rem);
    --step-2:  clamp(1.25rem, 2vw, 1.5rem);
    --step-3:  clamp(1.4rem, 3vw, 2rem);
    --step-4:  clamp(1.8rem, 4vw, 2.6rem);
    --step-5:  clamp(2rem, 5vw, 3.5rem);
    --step-6:  clamp(2.8rem, 7vw, 5.5rem);

    --transition:      0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    --transition-slow: 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ---------------------------
   RESET & BASE
--------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    /* overflow-x: hidden REMOVED.
       It did not prevent horizontal overflow, it hid it: anything wider than the
       screen was silently clipped instead of producing a scrollbar, so an overflow
       bug was invisible to us and to the reader, who just lost the right-hand edge
       of the content. An audit found nothing that needs the mask - no fixed width
       over 360px, no 100vw, no grid minimum above 320px - so it is gone, and a
       scrollbar appearing anywhere is now a signal worth chasing. */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* ---------------------------
   TYPOGRAPHY
--------------------------- */
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.8rem,7vw,5.5rem); }
h2 { font-size: clamp(2rem,5vw,3.5rem); }
h3 { font-size: clamp(1.4rem,3vw,2rem); }
h4 { font-size: clamp(1.1rem,2vw,1.4rem); }
p  { font-size: clamp(0.95rem,1.5vw,1.1rem); color: var(--text-muted); line-height: 1.8; }

.section-label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.25em; text-transform: uppercase; color: var(--saffron);
    display: block; margin-bottom: 12px;
}
.section-title { color: var(--text); margin-bottom: 16px; }
.section-title span { color: var(--gold); }
.section-subtitle { max-width: 600px; margin: 0 auto 56px; text-align: center; font-size: 1.05rem; }

/* ---------------------------
   UTILITY
--------------------------- */
.container      { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.gold    { color: var(--gold); }
.crimson { color: var(--crimson-light); }
.saffron { color: var(--saffron); }

.divider {
    width: 60px; height: 2px;
    background: linear-gradient(90deg, var(--crimson), var(--gold));
    margin: 20px auto; border-radius: 2px;
}
.divider-left { margin-left: 0; }

/* ---------------------------
   BUTTONS
--------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; border: none; transition: var(--transition); text-decoration: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    color: var(--text); box-shadow: 0 4px 24px rgba(var(--crimson-rgb),0.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--crimson-light), var(--crimson));
    box-shadow: 0 8px 32px rgba(var(--crimson-rgb),0.5);
    color: var(--text);
}
.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--bg); box-shadow: 0 4px 24px rgba(var(--gold-rgb),0.3);
}
.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    box-shadow: 0 8px 32px rgba(var(--gold-rgb),0.5);
    color: var(--bg);
}
.btn-outline { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--bg); }

/* ------------------------------------------------------------------
   BUTTON VARIANTS

   Five variants existed across two files. .btn-primary, .btn-gold and
   .btn-outline lived here; .btn-saffron and .btn-burgundy were defined
   separately in pages.css and re-declared what .btn already provides -
   border-radius, transition, font-weight - so the two halves of the
   system could drift, and did: one of them referenced a radius token
   that does not exist and rendered square.

   The lift on hover is declared once here for all five, so a variant
   cannot forget it. Colour still belongs to each variant.
   ------------------------------------------------------------------ */
.btn-primary:hover,
.btn-gold:hover,
.btn-outline:hover,
.btn-saffron:hover,
.btn-burgundy:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover,
    .btn-gold:hover,
    .btn-outline:hover,
    .btn-saffron:hover,
    .btn-burgundy:hover {
        transform: none;
    }
}

/* Nobody should be able to tab to a button and not see where they are. */
.btn:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

.section    { padding: 100px 0; }
.section-sm { padding: 64px 0; }

/* =============================================================
   HEADER
============================================================= */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; padding: 24px 40px;
    /*
     * NAMED PROPERTIES, NOT `all`.
     *
     * `transition: all` also animated backdrop-filter between the plain and
     * .scrolled states. A backdrop-filter makes the element a containing block
     * for fixed-position descendants, and it does so for every intermediate
     * value too — so while the blur was easing from 20px to none the mobile
     * drawer inside this header was still resolving against the header instead
     * of the viewport, and collapsed for the length of the transition.
     *
     * These three are the properties that actually change between the two
     * states and carry the visible shrink, so the animation looks identical.
     * Blur is not perceptible mid-transition anyway; being a containing block
     * very much is.
     */
    transition: padding 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.site-header.scrolled {
    background: rgba(var(--bg-rgb),0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 14px 40px; border-bottom: 1px solid var(--border);
}
.header-container {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1400px; margin: 0 auto;
}

/* Logo — image */
.logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo-img { height: 48px; width: auto; transition: var(--transition); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.site-header.scrolled .site-logo-img { height: 40px; }

/* Logo — text fallback */
.logo h2 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--gold); letter-spacing: 0.03em; }
.logo h2 span { color: var(--text); }
.custom-logo { max-height: 52px; width: auto; }

.main-nav ul { display: flex; gap: 8px; align-items: center; }
.main-nav ul li a {
    font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
    color: var(--text); padding: 8px 16px; border-radius: var(--radius-pill);
    transition: var(--transition); letter-spacing: 0.04em;
}
.main-nav ul li a:hover { color: var(--gold); background: rgba(var(--gold-rgb),0.08); }
.main-nav ul li.buy-tickets a {
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    color: var(--text); padding: 9px 20px; box-shadow: 0 2px 16px rgba(var(--crimson-rgb),0.3);
}
.main-nav ul li.buy-tickets a:hover {
    background: linear-gradient(135deg, var(--crimson-light), var(--crimson));
    box-shadow: 0 4px 24px rgba(var(--crimson-rgb),0.5);
}

.menu-toggle { display: none; flex-direction: column; cursor: pointer; gap: 5px; z-index: 200; padding: 4px; }
.menu-toggle span { display: block; width: 26px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .menu-toggle { display: flex; }
    .main-nav {
        position: fixed; inset: 0; background: rgba(var(--bg-rgb),0.98);
        backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center;
        transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.77,0,0.18,1); z-index: 100;
    }
    .main-nav.active { transform: translateX(0); }

    /*
     * THE FIX. Suspend the header's blur while the drawer is open.
     *
     * .site-header.scrolled sets backdrop-filter, and a backdrop-filter makes the
     * element the containing block for any `position: fixed` descendant. The
     * drawer is fixed inside the header, so once .scrolled lands (scrollY > 50)
     * `inset: 0` stops meaning "the viewport" and starts meaning "the header" —
     * the panel collapses to the header's own 84px strip and the links overlap the
     * page. That is why it worked at the top and broke after scrolling.
     *
     * Dropping the blur for the duration removes the containing block, so the
     * drawer resolves against the viewport at every scroll position. It costs
     * nothing to look at: the drawer is a full-screen opaque panel over the
     * header, so there is no visible backdrop to blur while it is open. The
     * header keeps its blur the rest of the time, unchanged.
     *
     * Do not "simplify" this away by giving .main-nav a top/height in px — that
     * treats the symptom, and it would break again the moment the header height
     * or the top bar changes.
     */
    body.nav-open .site-header,
    body.nav-open .site-header.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        /* Belt and braces: even if a future edit reinstates `transition: all`
           above, the swap here stays instant so no containing block can exist
           part-way through opening or closing. */
        transition: none;
    }
    .main-nav ul { flex-direction: column; text-align: center; gap: 4px; }
    .main-nav ul li a { font-size: 1.5rem; font-family: var(--font-heading); padding: 12px 32px; }
    .site-header { padding: 18px 24px; }
    .site-header.scrolled { padding: 12px 24px; }
}

/* =============================================================
   VIDEO BACKGROUND
============================================================= */
#globalVideo { position: fixed; inset: 0; z-index: -2; overflow: hidden; transition: opacity 1s ease; }
#globalVideo video { width: 100%; height: 100%; object-fit: cover; }
.global-overlay {
    position: fixed; inset: 0;
    background: linear-gradient(to bottom, rgba(var(--bg-rgb),0.55) 0%, rgba(var(--bg-rgb),0.65) 60%, rgba(var(--bg-rgb),0.88) 100%);
    z-index: -1; transition: background 0.6s ease;
}
.global-overlay.dark { background: rgba(var(--bg-rgb),0.85); }

/* =============================================================
   HERO
============================================================= */
#hero {
    /* 100vh counts the mobile address bar as if it were always hidden, so the
       hero changes height when the bar appears mid-scroll and the page jumps
       under the reader. svh is the SMALL viewport height and does not move. The
       vh line stays first as a fallback for browsers predating svh.

       .durga-scroll-section below already carried this fix, with a comment
       describing this exact problem; the hero directly above it did not. */
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; position: relative; padding: 0 24px;
}
.hero-eyebrow {
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--saffron);
    margin-bottom: 20px; display: block;
    opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease 0.3s forwards;
}
.hero-title {
    font-size: clamp(3.5rem,9vw,7.5rem);
    margin-bottom: 12px;
    opacity: 0; transform: translateY(30px); animation: fadeUp 0.9s ease 0.5s forwards;
}
.hero-title .highlight {
    background: linear-gradient(135deg, var(--gold), var(--saffron));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-year {
    font-size: clamp(1rem,2.5vw,1.6rem); color: var(--text-muted);
    font-family: var(--font-heading); font-style: italic; font-weight: 300;
    letter-spacing: 0.15em; margin-bottom: 32px;
    opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease 0.7s forwards;
}
.hero-tagline {
    max-width: 520px; margin: 0 auto 40px;
    opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease 0.85s forwards;
}
.hero-actions {
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease 1s forwards;
}
.hero-scroll-hint {
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0; animation: fadeIn 1s ease 1.5s forwards;
}
.hero-scroll-hint span { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); }
/* ------------------------------------------------------------------
   HERO PIECES SHARED BY THE FRONT PAGE AND THE INNER PAGES

   Two parallel systems existed: .hero-* on the front page and
   .page-hero-* everywhere else. The scroll line was written out twice,
   byte for byte, and the titles agreed on colour, weight and leading
   while differing only in size - so a change to "how a hero looks" had
   to be made in two files and, predictably, sometimes was not.

   Only what is genuinely identical is shared. The front page really is
   meant to be larger and animated; that stays with .hero-*.
   ------------------------------------------------------------------ */
.scroll-line,
.page-hero-scroll-line {
    width: 1.5px;
    height: 48px;
    background: linear-gradient(to bottom, var(--gold), transparent);
}

.scroll-line {
    animation: scrollPulse 2s ease infinite;
}

.hero-title,
.page-hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text);
    line-height: 1.05;
}

.hero-tagline,
.page-hero-subtitle {
    color: var(--text-muted);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
}

/* =============================================================
   NAV DURGA
============================================================= */
#navdurga-story { position: relative; }

/*
 * WHOLE-HOMEPAGE SCROLL SNAP — one container, not a nested one.
 * --------------------------------------------------------------------------
 * The first version made #navdurga-story its own scroller (height +
 * overflow-y:scroll + scroll-snap-type), confining snap to the nine goddess
 * panels. That produced a real, reported defect: two independent scroll
 * containers stacked on each other feel like "scroll under scroll" — the
 * page scrolls, then abruptly the section captures the wheel/trackpad and
 * scrolls itself, and the handoff between the two is what read as broken.
 *
 * The fix is not a tuning knob, it is removing the second scroller. The PAGE
 * — scoped to the homepage only via body.home, so no other page on the site
 * is affected — is now the only scroll container, and every section below
 * (hero, the nine panels, and the three organically-tall marketing sections)
 * is a snap point ON that one container via scroll-snap-align.
 *
 * PROXIMITY, not mandatory, and for one structural reason: scroll-snap-type
 * is set once per container, and this is now a single container for
 * sections of very different heights — the nine panels are exactly one
 * viewport each, but Puja Details / Gallery Preview / Sponsors are
 * organically tall, sized by their own content, not the screen. Mandatory
 * would force a snap at their top and then fight the reader trying to
 * scroll through several more screens of content inside them — the exact
 * "forced snap skips past reachable content" failure this section hit
 * before, just relocated onto the marketing sections instead of a mobile
 * panel. Proximity only pulls the view into place near a boundary you are
 * already close to, so scrolling through the middle of a tall section still
 * feels completely normal.
 *
 * The real trade-off, stated plainly: this also softens the goddess panels
 * from "always locks to exactly one per screen" to the same gentle pull —
 * that crispness was a property of the mandatory nested scroller, and
 * there is no way to keep it once everything shares one container.
 */
body.home {
    scroll-snap-type: y proximity;
}

#hero,
#puja-details,
#gallery-preview,
#sponsors {
    scroll-snap-align: start;
}

/* ------------------------------------------------------------------
   NAVDURGA SCROLL STORY
   Nine full-viewport sections. Everything below is written for the
   compositor: only opacity and transform animate, and nothing offscreen
   is painted until it is needed.
   ------------------------------------------------------------------ */
.durga-scroll-section {
    /* 100vh is the tallest the viewport EVER gets, so on mobile it counts
       the address bar as if it were always hidden. When the bar shows or
       hides mid-scroll the value changes, all nine sections re-layout, and
       the page jumps under the reader. svh is the SMALL viewport height —
       it does not move. The vh line stays first as a fallback for browsers
       that predate svh. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex; align-items: center;
    position: relative; padding: 80px 0;
    opacity: 0; transform: translateY(60px);
    transition: opacity 0.9s ease, transform 0.9s ease;

    /* Skip layout, paint and rasterisation for sections still offscreen.
       With nine viewport-sized sections, each carrying a large image and a
       blurred shadow, this is the single biggest win available — the
       browser stops doing work for content nobody is looking at.
       contain-intrinsic-size keeps the scrollbar honest by telling it how
       tall a skipped section would be. */
    content-visibility: auto;
    contain-intrinsic-size: auto 100svh;

    /* Each panel is a snap point. `start`, not `center`, because the panel
       is exactly one viewport tall on desktop — aligning its top edge to
       the scroller's top edge IS centering it; `start` is simply the
       version that also behaves correctly on mobile where the panel can be
       taller than the screen. */
    scroll-snap-align: start;
}
.durga-scroll-section.visible { opacity: 1; transform: translateY(0); }
.durga-scroll-section:nth-child(even) .durga-story-inner { flex-direction: row-reverse; }
.durga-story-inner {
    display: flex; align-items: center; gap: 80px;
    max-width: 1200px; margin: 0 auto; padding: 0 48px; width: 100%;
}
.durga-image-wrap { flex: 0 0 380px; position: relative; }
.durga-image-frame {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 3/4;
    /* Was 0 32px 80px. Blur radius is the expensive part of a shadow, and
       an 80px spread on nine large frames is real paint cost for a
       difference nobody can see. */
    box-shadow: 0 20px 44px rgba(0,0,0,0.55);
}
.durga-image-frame::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(var(--bg-rgb),0.7) 100%);
    z-index: 1;
}
.durga-image-frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 8s ease;
    /* The image sits inside a rounded, overflow-hidden frame that also
       carries an 80px shadow and a gradient overlay. Without its own layer
       the browser re-rasterises that whole stack for eight seconds while
       the zoom runs — nine times over. backface-visibility promotes the
       image alone, so the frame around it is painted once. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.durga-scroll-section.visible .durga-image-frame img {
    transform: scale(1.06);
    /* Declared only on the visible state. will-change held permanently on
       nine large images keeps nine compositor layers alive for the life of
       the page, which costs more memory than the animation saves. */
    will-change: transform;
}
.durga-image-wrap::before {
    content: ''; position: absolute; inset: -12px;
    border: 1.5px solid var(--border);
    border-radius: calc(var(--radius-lg) + 12px); z-index: -1;
}
.durga-text-wrap { flex: 1; min-width: 0; position: relative; }
.durga-bg-number {
    font-family: var(--font-heading); font-size: 8rem; font-weight: 700; line-height: 1;
    color: rgba(var(--gold-rgb),0.05); position: absolute; top: -30px; left: -10px;
    pointer-events: none; user-select: none; z-index: 0;
}
.durga-text-content { position: relative; z-index: 1; }
.durga-day-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--saffron); margin-bottom: 12px; display: block; }
.durga-name { font-family: var(--font-heading); font-size: clamp(2.8rem,5vw,4.5rem); font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.1; }
.durga-name-devanagari { font-family: var(--font-mantra); font-size: 1.2rem; color: var(--gold); font-weight: 400; margin-bottom: 28px; display: block; }
.durga-mantra-block {
    background: rgba(var(--gold-rgb),0.05); border: 1px solid var(--border);
    border-left: 3px solid var(--gold); padding: 16px 20px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 28px;
}
.durga-mantra-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 6px; }
.durga-mantra-text { font-family: var(--font-mantra); font-size: 1.05rem; color: var(--gold-light); font-style: italic; display: block; }
.durga-description { color: var(--text-muted); font-size: 1rem; line-height: 1.85; margin-bottom: 32px; }
.durga-attributes { display: flex; flex-wrap: wrap; gap: 8px; }
.durga-tag {
    font-size: 0.78rem; font-weight: 500; color: var(--text-muted);
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    padding: 6px 14px; border-radius: var(--radius-pill); transition: var(--transition);
}
.durga-tag:hover { border-color: var(--gold); color: var(--gold); }
.navdurga-divider { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 16px 0; opacity: 0.3; }
.navdurga-divider-line { height: 1px; width: 80px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.navdurga-divider-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }

/* =============================================================
   PUJA DETAILS
============================================================= */
#puja-details { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.puja-details-header { text-align: center; margin-bottom: 64px; }
/* ==================================================================
   CARD PRIMITIVE

   Seventeen classes were each styling the same object independently:
   all seventeen set the same background, sixteen the same border,
   fifteen the same transition. Changing "how a card looks" meant
   seventeen separate edits, so in practice it never happened and the
   cards drifted apart.

   Grouped, not renamed. The templates and the eight JS files that
   query these class names are untouched - only the definition moved.
   Anything a particular card needs differently it still declares for
   itself and wins on source order, because this block is loaded first.
   ================================================================== */
.achievement-card,
.combo-card,
.contact-form-card,
.event-card,
.mv-card,
.parking-card,
.past-event-card,
.product-ticket-card,
.pub-card,
.puja-card,
.special-card,
.story-card,
.support-card,
.team-card,
.ticket-card,
.timeline-card,
.wwd-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.achievement-card:hover,
.combo-card:hover,
.contact-form-card:hover,
.event-card:hover,
.mv-card:hover,
.parking-card:hover,
.past-event-card:hover,
.product-ticket-card:hover,
.pub-card:hover,
.puja-card:hover,
.special-card:hover,
.story-card:hover,
.support-card:hover,
.team-card:hover,
.ticket-card:hover,
.timeline-card:hover,
.wwd-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .achievement-card:hover,
    .combo-card:hover,
    .contact-form-card:hover,
    .event-card:hover,
    .mv-card:hover,
    .parking-card:hover,
    .past-event-card:hover,
    .product-ticket-card:hover,
    .pub-card:hover,
    .puja-card:hover,
    .special-card:hover,
    .story-card:hover,
    .support-card:hover,
    .team-card:hover,
    .ticket-card:hover,
    .timeline-card:hover,
    .wwd-card:hover {
        transform: none;
    }
}

.puja-cards-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; margin-bottom: 48px; }
.puja-card { padding: 36px 24px; text-align: center; position: relative; overflow: hidden;
}
.puja-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--crimson), var(--gold)); opacity: 0; transition: var(--transition);
}
.puja-card:hover { border-color: var(--border-hover); transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.4); }
.puja-card:hover::before { opacity: 1; }
.puja-card-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, rgba(var(--crimson-rgb),0.12), rgba(var(--gold-rgb),0.1));
    border: 1px solid var(--border); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.4rem;
}
.puja-card h4 { color: var(--gold); font-family: var(--font-heading); font-size: 0.9rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.puja-card-value { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text); font-weight: 600; line-height: 1.4; }
.puja-card p { color: var(--text-muted); font-size: 0.9rem; margin-top: 6px; }
.puja-announcement {
    background: linear-gradient(135deg, rgba(var(--crimson-rgb),0.1), rgba(var(--gold-rgb),0.06));
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 32px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.announcement-badge {
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    color: var(--text); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0;
}
.announcement-text { color: var(--text-muted); font-size: 0.95rem; flex: 1; margin: 0; }

/* =============================================================
   GALLERY
============================================================= */
#gallery-preview { position: relative; }
.gallery-header { text-align: center; margin-bottom: 56px; }
.gallery-masonry { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 200px; gap: 10px; margin-bottom: 40px; }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-card); cursor: pointer; }
.gallery-item:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 4; }
.gallery-item:nth-child(3) { grid-column: span 3; }
.gallery-item:nth-child(4) { grid-column: span 4; }
.gallery-item:nth-child(5) { grid-column: span 3; }
.gallery-item:nth-child(6) { grid-column: span 7; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(var(--bg-rgb),0.7) 0%, transparent 60%);
    opacity: 0; transition: var(--transition);
    display: flex; align-items: center; justify-content: center;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-overlay-icon {
    width: 48px; height: 48px; background: rgba(var(--gold-rgb),0.15);
    border: 1.5px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); transform: scale(0.8); transition: var(--transition);
}
.gallery-item:hover .gallery-overlay-icon { transform: scale(1); }
.gallery-placeholder {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--text-dim);
    font-size: 0.72rem; letter-spacing: 0.12em; gap: 10px; text-transform: uppercase;
    border: 1px dashed rgba(var(--gold-rgb),0.12); border-radius: var(--radius-md);
}
.placeholder-icon { font-size: 1.5rem; opacity: 0.3; }
.gallery-cta { text-align: center; }

/* =============================================================
   SPONSORS
============================================================= */
#sponsors { background: var(--bg-surface); border-top: 1px solid var(--border); }
.sponsors-header { text-align: center; margin-bottom: 56px; }
.sponsor-tier { margin-bottom: 48px; }

/* 2x2 sponsor grid */
.sponsors-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
    margin-bottom: 48px;
    align-items: start;
}
.sponsor-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.sponsor-cell .sponsor-tier-label {
    margin-bottom: 24px;
}
.sponsor-cell .sponsor-logos-row {
    justify-content: center;
}
@media (max-width: 640px) {
    .sponsors-row { grid-template-columns: 1fr; gap: 0; }
}
.sponsor-tier-label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--text-dim); text-align: center; margin-bottom: 24px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sponsor-tier-label::before, .sponsor-tier-label::after { content: ''; display: block; height: 1px; width: 60px; background: var(--border); }
.sponsor-logos-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; }
.sponsor-logo-item {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 20px 32px; display: flex; align-items: center; justify-content: center;
    transition: var(--transition); min-width: 160px; min-height: 76px;
}
.sponsor-logo-item:hover { border-color: var(--border-hover); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.sponsor-logo-item img { max-width: 140px; max-height: 60px; width: auto; height: auto; object-fit: contain; filter: grayscale(80%) brightness(1.3); transition: var(--transition); }
.sponsor-logo-item:hover img { filter: grayscale(0%) brightness(1); }
.sponsor-placeholder-text { font-family: var(--font-heading); font-size: 0.95rem; color: var(--text-dim); font-style: italic; }
.sponsor-cta { text-align: center; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.sponsor-cta p { margin-bottom: 20px; }

/* =============================================================
   FOOTER
============================================================= */
#site-footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding-top: 80px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid var(--border); }
.footer-brand h3 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--gold); margin-bottom: 4px; }
.footer-brand .tagline { font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; font-style: italic; display: block; }
.footer-brand p { font-size: 0.875rem; color: var(--text-dim); line-height: 1.75; margin-bottom: 24px; }
.social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.social-link {
    width: 38px; height: 38px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 0.85rem; transition: var(--transition);
}
.social-link:hover { background: rgba(var(--gold-rgb),0.1); border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.footer-col h4 { font-family: var(--font-heading); font-size: 0.95rem; color: var(--text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.875rem; color: var(--text-dim); transition: var(--transition); }
.footer-col ul li a:hover { color: var(--gold); padding-left: 4px; }
.footer-contact-item { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.footer-contact-icon { color: var(--gold); font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; width: 16px; }
.footer-contact-item span { font-size: 0.875rem; color: var(--text-dim); line-height: 1.6; }
.footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.78rem; color: var(--text-dim); margin: 0; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: 0.78rem; color: var(--text-dim); transition: var(--transition); }
.footer-bottom-links a:hover { color: var(--gold); }

/* =============================================================
   ANIMATIONS
============================================================= */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes scrollPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .durga-image-wrap { flex: 0 0 320px; }
    .durga-story-inner { gap: 48px; }
}
@media (max-width: 768px) {
    /* No mobile scroll-snap override needed here any more — body.home is
       already set to proximity for every viewport width (see the note at
       #navdurga-story above), which was the whole point of moving to one
       page-level container: there is no longer a stricter desktop mode to
       relax out of on a small screen. */
    .durga-story-inner,
    .durga-scroll-section:nth-child(even) .durga-story-inner { flex-direction: column; gap: 36px; padding: 0 20px; }
    .durga-image-wrap { flex: 0 0 auto; width: 100%; max-width: 320px; margin: 0 auto; }
    .durga-image-frame { aspect-ratio: 4/5; }
    .gallery-masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
    .gallery-item { grid-column: span 1 !important; grid-row: span 1 !important; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .puja-announcement { flex-direction: column; text-align: center; }
    .hero-actions { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
    .gallery-masonry { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    :root { --radius-lg: 14px; }
}

/* =============================================================
   HEADER ACCOUNT BUTTON
============================================================= */
.header-account { display: flex; align-items: center; margin-left: 8px; flex-shrink: 0; }
.header-account-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px;
    border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
    transition: var(--transition); white-space: nowrap; line-height: 1;
}
.header-account-btn--out { border: 1px solid rgba(var(--gold-rgb),0.5); color: var(--gold); background: transparent; }
.header-account-btn--out:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); box-shadow: 0 4px 16px rgba(var(--gold-rgb),0.3); }
.header-account-btn--in { border: 1px solid var(--border); color: var(--text-muted); background: rgba(255,255,255,0.04); max-width: 160px; }
.header-account-btn--in span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-account-btn--in:hover { border-color: rgba(var(--gold-rgb),0.3); color: var(--gold); background: rgba(var(--gold-rgb),0.06); }
.main-menu li a[href*=my-account], .main-menu li a[href*=my-account]:hover { display: none; }
.main-menu li:has(a[href*=my-account]) { display: none;     .header-account { display: none; }
}


/* ------------------------------------------------------------------
   NAVDURGA — reduced motion
   Nine sections that fade, rise and slowly zoom is a lot of movement for
   anyone who gets motion sickness from it. Honour the OS setting: the
   content still arrives, it simply arrives without the journey.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    /* The pull of native scroll-snap is itself motion someone may have asked
       for less of — dropped here alongside the fade/rise, not just the
       transitions. Content is unaffected either way; this only changes
       whether the page nudges toward a section boundary as you scroll.
       body.home is the scroll container now, not #navdurga-story. */
    body.home { scroll-snap-type: none; }
    .durga-scroll-section {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .durga-image-frame img,
    .durga-scroll-section.visible .durga-image-frame img {
        transition: none;
        transform: none;
        will-change: auto;
    }
}

/* ==================================================================
   SPONSORS, EDITED AS BLOCKS

   The committee now maintains sponsors on the "Sponsors & Partners"
   page: an H3 per tier, a group of images under it. These rules give
   that block output the same appearance the hardcoded markup had, so
   nobody has to think about layout while adding a logo.
   ================================================================== */
.sponsors-editable {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-7) var(--space-6);
    align-items: start;
}

/* Each tier heading starts a new cell, and carries its logos with it. */
.sponsors-editable h3 {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 var(--space-5);
    text-align: center;
}

.sponsors-editable .wp-block-group.sponsor-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin: 0 0 var(--space-6);
}

.sponsors-editable figure.wp-block-image {
    margin: 0;
    flex: 0 0 auto;
}

.sponsors-editable figure.wp-block-image img {
    max-height: 64px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    /* Logos arrive in every colour and finish. Muting them until hover keeps
       the row visually calm without hiding anyone. */
    opacity: 0.75;
    filter: grayscale(100%);
    transition: var(--transition);
}

.sponsors-editable figure.wp-block-image img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

@media (prefers-reduced-motion: reduce) {
    .sponsors-editable figure.wp-block-image img { transition: none; }
}

/* ==========================================================================
   Nav Durga — each goddess in her own colour
   --------------------------------------------------------------------------
   front-page.php sets three custom properties per section, from the shared map
   in idc_navdurga_colours():

     --durga-colour  her hue, solid, for accents
     --durga-wash    the same hue at 10%, for the panel behind them
     --durga-edge    the same hue at 28%, for borders

   Every rule falls back to gold, so a section without a colour looks exactly as
   it does today rather than losing its styling.

   WHY A WASH AND NOT A FILL. Two of the nine are hostile on a near-black page:
   Skandamata is pure white and Chandraghanta is a mid grey. As a fill, one panel
   would blind the reader mid-narrative and another would go muddy. At 10% behind
   dark text, all nine read as a shift in mood while the reading surface stays
   legible — which is the point of the section.
   ========================================================================== */

.durga-scroll-section {
	/* Sits under the content, so it tints without touching text contrast. */
	background-image: linear-gradient(
		160deg,
		var(--durga-wash, transparent) 0%,
		transparent 62%
	);
}

/* The big numeral was a flat 5% gold; it carries her colour now, which is the
   most visible cue at a glance without competing with the heading. */
.durga-bg-number {
	color: var(--durga-wash, rgba(var(--gold-rgb), .05));
}

.durga-day-label {
	color: var(--durga-colour, var(--saffron));
}

/* A short rule under the name, the width of a word — enough to register her
   colour at full strength where the wash is deliberately faint. */
.durga-name::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 14px;
	border-radius: 99px;
	background: var(--durga-colour, var(--gold));
}

.durga-tag {
	border-color: var(--durga-edge, var(--border));
}

.durga-tag:hover {
	border-color: var(--durga-colour, var(--gold));
	color: var(--durga-colour, var(--gold));
}

/* The image frame picks up the edge tint so the two halves of the panel agree. */
.durga-image-frame {
	box-shadow: 0 0 0 1px var(--durga-edge, transparent);
}

@media (prefers-contrast: more) {
	/* The wash is decorative; drop it rather than let it reduce contrast for
	   anyone who has asked for more. */
	.durga-scroll-section { background-image: none; }
}

/* =============================================================
   Responsive readiness — form controls
   -------------------------------------------------------------
   iOS Safari ZOOMS THE WHOLE PAGE when a control smaller than 16px receives
   focus, and does not zoom back out. The audit found sixteen such controls,
   including four on the payment path: the cart coupon field and quantity inputs
   at 14px, the state select and password field at 15px. Tapping any of them
   throws a buyer out of their layout mid-checkout.

   Scoped to 1024px and below, deliberately. The zoom only happens on iOS phones
   and tablets, and the desktop sizes are a design decision already signed off —
   there is no reason to change what a laptop shows to fix what a phone does.

   !important is warranted here and rarely is. The sixteen rules live across six
   stylesheets and several carry an ID selector (#coupon_code), so matching their
   specificity would mean sixteen overrides that break the moment one is renamed.
   One declaration for a hard accessibility floor is the smaller cost.

   Checkboxes, radios and ranges are excluded: font-size does not size them, and
   forcing 16px would only disturb their layout.
   ============================================================= */

@media (max-width: 1024px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* =============================================================
   BREADCRUMB
   -------------------------------------------------------------
   Sits directly under the fixed header on every page except the
   homepage. padding-top matches .page-hero's own 140px header
   clearance (pages.css) so it works as the first element under the
   header regardless of which hero, if any, follows it — the hero
   itself then drops back to just its own bottom-padding value via
   the adjacent-sibling rules below, so the two don't stack into a
   double gap.
   ============================================================= */
.idc-breadcrumb {
	padding: 140px 0 16px;
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border);
}

.idc-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.idc-breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

.idc-breadcrumb-item a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.25s ease;
}

.idc-breadcrumb-item a:hover {
	color: var(--gold-light);
}

.idc-breadcrumb-current {
	color: var(--text);
}

.idc-breadcrumb-sep {
	color: var(--text-dim);
}

.idc-breadcrumb + .page-hero {
	padding-top: 64px;
}

.idc-breadcrumb + .woo-page-hero {
	padding-top: 48px;
}

/* My Account's own top clearance (woo.css) is 100px both sides — same
   double-gap problem as the two heroes above, corrected the same way. */
.idc-breadcrumb + .myaccount-section {
	padding-top: 48px;
}

@media (max-width: 768px) {
	.idc-breadcrumb + .woo-page-hero {
		padding-top: 36px;
	}
}

/* =============================================================
   SECONDARY / TOP BAR  (added — UNESCO heritage link + socials)
============================================================= */
.top-bar{
    position: fixed; top: 0; left: 0; width: 100%; z-index: 95;
    background: rgba(var(--bg-rgb),0.92);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
}
.top-bar-inner{
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 8px 40px; min-height: 40px;
}
.top-bar-heritage{
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-muted); text-decoration: none;
    font-size: 0.78rem; letter-spacing: 0.03em; transition: color .3s ease;
}
.top-bar-heritage svg{ color: var(--gold); flex: 0 0 auto; }
.top-bar-heritage:hover{ color: var(--gold); }
.top-bar-social{ display: inline-flex; align-items: center; gap: 8px; }
.top-bar-social-link{
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    color: var(--text); border: 1px solid var(--border); transition: var(--transition);
}
.top-bar-social-link:hover{
    color: var(--gold); border-color: var(--gold); background: rgba(var(--gold-rgb),0.08);
}
.top-bar-social-link svg{ width: 15px; height: 15px; }
/* push the main (fixed) header down below the top bar */
.site-header{ top: 41px; }
@media (max-width: 900px){
    .top-bar-inner{ padding: 6px 20px; }
    .top-bar-heritage{ font-size: 0.7rem; }
    .site-header, .site-header.scrolled{ top: 40px; }
}
@media (max-width: 560px){
    .top-bar-heritage span{ display: none; } /* keep the icon, drop the long label */
}

/* =============================================================
   SPONSORS — full-width auto-scrolling marquee  (added)
============================================================= */
.sponsors-marquee{
    position: relative; width: 100vw; margin-left: calc(50% - 50vw);
    overflow: hidden; padding: 30px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.sponsors-track{
    display: flex; align-items: center; gap: 60px; width: max-content;
    animation: idc-marquee 45s linear infinite;
}
.sponsors-marquee:hover .sponsors-track{ animation-play-state: paused; }
.sponsors-track .sponsor-logo-item{
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    height: 120px; padding: 0 10px; margin: 0;
}
.sponsors-track .sponsor-logo-item img{
    max-height: 120px; width: auto; max-width: 280px; object-fit: contain; display: block;
}
.sponsors-track figure.wp-block-image{ margin: 0; }
@keyframes idc-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 768px){
    .sponsors-track{ gap: 40px; animation-duration: 30s; }
    .sponsors-track .sponsor-logo-item{ height: 84px; }
    .sponsors-track .sponsor-logo-item img{ max-height: 84px; max-width: 190px; }
}
@media (prefers-reduced-motion: reduce){
    .sponsors-track{ animation: none; }
    .sponsors-marquee{ overflow-x: auto; }
}

/* =============================================================
   HOMEPAGE GALLERY — button reset + self-contained lightbox  (added)
============================================================= */
.gallery-masonry button.gallery-item{
    border: none; padding: 0; margin: 0; font: inherit; width: 100%;
    background: var(--bg-card); cursor: pointer; color: inherit;
}
.idc-home-lightbox{
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.idc-home-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.idc-hlb-backdrop{ position: absolute; inset: 0; background: rgba(6,4,9,0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.idc-hlb-figure{ position: relative; z-index: 1; margin: 0; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.idc-hlb-img{ max-width: min(880px, 90vw); max-height: 78vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: 0 40px 100px rgba(0,0,0,0.8); }
.idc-hlb-cap{ color: var(--text-muted); font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.04em; text-align: center; }
.idc-hlb-close{
    position: absolute; top: 22px; right: 26px; z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; font-size: 1.8rem; line-height: 1; transition: var(--transition);
}
.idc-hlb-close:hover{ background: rgba(255,255,255,0.18); }

/* =============================================================
   LEGAL PAGES — Privacy Policy & Terms design  (added)
============================================================= */
.legal-content{ max-width: 860px; margin: 0 auto; padding: 8px 0 24px; font-family: var(--font-body); color: var(--text); }
.legal-content .legal-intro{ color: var(--text-muted); font-size: 1.05rem; line-height: 1.8; padding: 22px 26px; margin: 0 0 34px; border-left: 3px solid var(--gold); background: rgba(var(--gold-rgb),0.05); border-radius: var(--radius-md); }
.legal-content h2{ font-family: var(--font-heading); color: var(--gold); font-size: 1.8rem; margin: 40px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.legal-content h3{ font-family: var(--font-heading); color: var(--text); font-size: 1.3rem; margin: 26px 0 10px; }
.legal-content p, .legal-content li{ line-height: 1.85; color: var(--text-muted); }
.legal-content ul{ padding-left: 22px; margin: 12px 0 20px; }
.legal-content li{ margin-bottom: 8px; }
.legal-content a{ color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-content strong{ color: var(--text); }
.legal-content .legal-updated{ margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-dim); font-style: italic; }