/*
 * Header styles for Shri OM Darbar
 * Rebuilt against the Layer 2/3 semantic tokens in style.css (no legacy aliases).
 */

/* ==========================================================
   HEADER SHELL
   ========================================================== */

.od-header {
    position: sticky;
    top: 0;
    z-index: var(--od-z-sticky);
    background-color: var(--od-bg-surface);
    box-shadow: var(--od-elevation-none);
    transition: box-shadow var(--od-duration-standard) var(--od-ease-standard),
                transform var(--od-duration-standard) var(--od-ease-standard);
}

/* Shadow only appears once the page has scrolled — keeps the hero seam clean at top */
.od-header.is-scrolled {
    box-shadow: var(--od-elevation-floating);
}

/* ==========================================================
   TOPBAR — institutional strip, uses the inverse (maroon) surface
   ========================================================== */

.od-header__topbar {
    background-color: var(--od-bg-inverse);
    color: var(--od-text-inverse-muted);
    font-size: var(--od-type-xs);
    padding: var(--od-space-2) 0;
    border-bottom: 1px solid var(--od-border-inverse);
}

.od-header__topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--od-space-4);
}

.od-header__contact,
.od-header__lang {
    display: flex;
    gap: var(--od-space-4);
    align-items: center;
}

.od-header__topbar a {
    color: var(--od-text-inverse-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-1);
    font-weight: var(--od-weight-medium);
}

.od-header__topbar a:hover,
.od-header__topbar a:focus-visible {
    color: var(--od-text-inverse);
}

.od-header__topbar .od-icon {
    flex-shrink: 0;
}

.od-header__lang {
    border-left: 1px solid var(--od-border-inverse);
    padding-left: var(--od-space-4);
}

.od-header__lang a {
    padding: var(--od-space-1) 0;
    position: relative;
}

.od-header__lang a.is-active {
    font-weight: var(--od-weight-bold);
    color: var(--od-text-inverse);
}

.od-header__lang a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background-color: var(--od-saffron-base);
    border-radius: var(--od-radius-pill);
}

/* ==========================================================
   MAIN BAR — brand + nav + CTA
   ========================================================== */

.od-header__main {
    /*padding: var(--od-space-4) 0;*/
    padding:10px 0;
}

.od-header__main-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--od-space-8);
}

.od-header__brand {
    display: flex;
    align-items: center;
    gap: var(--od-space-3);
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0; /* allow truncation instead of forcing overflow */
}

.od-header__logo-wrap {
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    flex-shrink: 0;
    /*width: 50px;*/
    width:auto;
    height: 50px;
}

.od-header__logo {
    height: 90px;
    width: auto;
    max-width: 240px;
    display: block;
}

/* Graceful fallback mark shown if the raster logo fails to load (see logos.php) */
.od-header__logo-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--od-radius-full, var(--od-radius-pill));
    background: linear-gradient(135deg, var(--od-saffron-base), var(--od-maroon-base));
    color: var(--od-white);
    font-family: var(--od-font-deva);
    font-size: 1.5rem;
    font-weight: var(--od-weight-bold);
    flex-shrink: 0;
}

.od-header__logo.is-broken {
    display: none;
}

.od-header__logo.is-broken + .od-header__logo-fallback {
    display: flex;
}

.od-header__sitename {
    font-size: var(--od-type-h4);
    font-weight: var(--od-weight-bold);
    color: var(--od-text-brand);
    line-height: var(--od-leading-tight);
    white-space: nowrap;
}

.od-header__sitename small {
    display: block;
    font-size: var(--od-type-xs);
    font-weight: var(--od-weight-medium);
    color: var(--od-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.od-header__nav {
    display: flex;
    align-items: center;
}

.od-header__nav-close {
    display: none; /* only shown inside the mobile drawer, see the max-width:991px block */
}

.od-header__menu {
    display: flex;
    list-style: none;
    align-items: center;
    gap: var(--od-space-1);
}

.od-header__menu > li > a {
    color: var(--od-text-secondary);
    font-weight: var(--od-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--od-space-1);
    padding: var(--od-space-2) var(--od-space-3);
    border-radius: var(--od-radius-md);
    position: relative;
}

.od-header__menu > li > a:hover,
.od-header__menu > li > a:focus-visible {
    color: var(--od-text-brand);
    background-color: var(--od-sand-surface);
}

/* Active page indicator */
.od-header__menu > li > a.is-current {
    color: var(--od-text-brand);
}

.od-header__menu > li > a.is-current::after {
    content: '';
    position: absolute;
    left: var(--od-space-3);
    right: var(--od-space-3);
    bottom: 0;
    height: 2px;
    background-color: var(--od-saffron-base);
    border-radius: var(--od-radius-pill);
}

.od-header__dropdown-parent {
    position: relative;
}

.od-header__dropdown-parent > a .od-icon--chevron-down {
    transition: transform var(--od-duration-fast, 150ms) var(--od-ease-standard);
}

.od-header__dropdown-parent:hover > a .od-icon--chevron-down,
.od-header__dropdown-parent.is-open > a .od-icon--chevron-down {
    transform: rotate(180deg);
}

.od-header__dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: var(--od-bg-surface);
    list-style: none;
    box-shadow: var(--od-elevation-modal);
    border: 1px solid var(--od-border-subtle);
    border-radius: var(--od-radius-lg);
    padding: var(--od-space-3);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--od-duration-fast, 150ms) var(--od-ease-standard),
                transform var(--od-duration-fast, 150ms) var(--od-ease-standard),
                visibility var(--od-duration-fast, 150ms);
    z-index: var(--od-z-dropdown);
    /* Long location lists flow into columns instead of one tall scrolling
       list. column-count (not CSS Grid, which this codebase's target
       browsers support fine, but keeping the technique boring and very
       well-supported here) grows the box to fit its content with no
       scrollbar. Deliberately NOT combined with max-height/overflow-y:
       constraining column-layout height causes browsers to add columns
       sideways off-screen instead of scrolling, which is worse than the
       single tall list this replaces. If the list grows past ~18 items,
       revisit with a "View all darbars" link instead of more columns. */
    column-count: 3;
    column-width: 180px;
    column-gap: var(--od-space-2);
    width: max-content;
    max-width: min(620px, calc(100vw - 2rem));
}

.od-header__dropdown li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.od-header__dropdown-parent:hover .od-header__dropdown,
.od-header__dropdown-parent:focus-within .od-header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.od-header__dropdown a {
    display: block;
    padding: var(--od-space-2) var(--od-space-3);
    font-weight: var(--od-weight-regular);
    color: var(--od-text-secondary);
    border-radius: var(--od-radius-md);
}

.od-header__dropdown a:hover,
.od-header__dropdown a:focus-visible {
    background-color: var(--od-bg-brand);
    color: var(--od-text-brand);
}

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

.od-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--od-space-2);
    padding: var(--od-space-3) var(--od-space-6);
    border-radius: var(--od-radius-pill);
    font-weight: var(--od-weight-bold);
    cursor: pointer;
    text-align: center;
    border: none;
    font-size: var(--od-type-sm);
    transition: background-color var(--od-duration-fast, 150ms) var(--od-ease-standard),
                transform var(--od-duration-fast, 150ms) var(--od-ease-standard),
                box-shadow var(--od-duration-fast, 150ms) var(--od-ease-standard);
    white-space: nowrap;
}

.od-btn--primary {
    background-color: var(--od-action-primary-bg);
    color: var(--od-action-primary-text) !important;
    box-shadow: 0 2px 8px rgba(222, 91, 60, 0.28);
}

.od-btn--primary:hover,
.od-btn--primary:focus-visible {
    background-color: var(--od-action-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(222, 91, 60, 0.36);
}

.od-btn--primary:active {
    transform: translateY(0);
}

/* ==========================================================
   MOBILE TOGGLE + BACKDROP
   ========================================================== */

.od-header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--od-border-default);
    border-radius: var(--od-radius-md);
    color: var(--od-text-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.od-header__toggle:hover,
.od-header__toggle:focus-visible {
    background-color: var(--od-sand-surface);
    border-color: var(--od-form-border-hover);
}

.od-header__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(42, 36, 34, 0.45);
    z-index: calc(var(--od-z-sticky) + 1);
    opacity: 0;
    transition: opacity var(--od-duration-standard) var(--od-ease-standard);
}

.od-header__backdrop.is-visible {
    display: block;
    opacity: 1;
}

/* ==========================================================
   RESPONSIVE — single source-of-truth breakpoint
   ========================================================== */

@media (max-width: 991px) {
    .od-header__logo-wrap,
    .od-header__logo {
        width: auto;
        height: 70px;
    }
.od-header__main {
    padding:0;
}
    .od-header__sitename {
        font-size: var(--od-type-base);
    }

    .od-header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 86vw);
        height: 100vh;
        height: 100dvh;
        background-color: var(--od-bg-surface);
        box-shadow: var(--od-elevation-modal);
        flex-direction: column;
        align-items: stretch;
        padding: var(--od-space-24) var(--od-space-6) var(--od-space-6);
        transition: right var(--od-duration-standard) var(--od-ease-standard);
        overflow-y: auto;
        z-index: calc(var(--od-z-sticky) + 2);
    }

    .od-header__nav.is-open {
        right: 0;
    }

    /* Explicit close button inside the drawer. The header's own hamburger
       button sits underneath the open drawer (same stacking context as
       the header bar, lower z-index than the drawer) and is not visible
       or tappable once the drawer is open — this is the drawer's own,
       always-reachable way out, so closing doesn't depend on a user
       noticing they can tap outside. */
    .od-header__nav-close {
        position: absolute;
        top: var(--od-space-6);
        right: var(--od-space-6);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: none;
        border: 1px solid var(--od-border-default);
        border-radius: var(--od-radius-md);
        color: var(--od-text-primary);
        cursor: pointer;
    }

    .od-header__nav-close:hover,
    .od-header__nav-close:focus-visible {
        background-color: var(--od-sand-surface);
        border-color: var(--od-form-border-hover);
    }

    .od-header__menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .od-header__menu > li > a {
        padding: var(--od-space-4) var(--od-space-2);
        border-radius: 0;
        border-bottom: 1px solid var(--od-border-subtle);
        width: 100%;
        justify-content: space-between;
    }

    .od-header__menu > li > a.is-current::after {
        display: none;
    }

    .od-header__menu > li > a.is-current {
        color: var(--od-text-brand);
        background-color: var(--od-bg-brand);
        border-radius: var(--od-radius-md);
    }

    .od-header__dropdown-parent > a .od-icon--chevron-down {
        transition: transform var(--od-duration-fast, 150ms) var(--od-ease-standard);
    }

    .od-header__dropdown-parent.is-open > a .od-icon--chevron-down {
        transform: rotate(180deg);
    }

    .od-header__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        /* The multi-column layout from the base rule (used on wider
           dropdowns) doesn't apply here: the mobile drawer is only
           ~256px wide once its own padding is subtracted, well under
           the ~368px column-width:180px needs for even two columns, so
           it was already rendering as a single column — this just makes
           that explicit instead of leaving unusable column properties
           in the computed style. */
        column-count: 1;
        width: 100%;
        max-width: none;
        transition: max-height var(--od-duration-standard) var(--od-ease-standard),
                    padding var(--od-duration-standard) var(--od-ease-standard);
    }

    .od-header__dropdown-parent.is-open .od-header__dropdown {
        max-height: 60vh;
        padding: var(--od-space-2) 0 var(--od-space-2) var(--od-space-4);
        overflow-y: auto;
    }

    .od-header__dropdown a {
        border-radius: var(--od-radius-md);
    }

    .od-header__nav-donate {
        display: block;
        margin-top: var(--od-space-6);
        width: 100%;
    }

    .od-header__nav-donate .od-btn {
        width: 100%;
    }

    .od-header__donate {
        display: none;
    }

    .od-header__toggle {
        display: flex;
    }
}

@media (min-width: 992px) {
    .od-header__nav-donate {
        display: none;
    }
}

/* Small phones — tighten topbar spacing without hiding the phone number/email.
   A temple's contact info is exactly what people look for on mobile; an
   earlier version of this rule hid the text and left only bare icons,
   which was the wrong tradeoff. Font size and gap shrink instead. */
@media (max-width: 480px) {
    .od-header__topbar-inner {
        justify-content: center;
        text-align: center;
        gap: var(--od-space-2) var(--od-space-3);
    }

    .od-header__topbar {
        font-size: 0.75rem;
    }

    .od-header__contact {
        gap: var(--od-space-3);
    }

    .od-header__main-inner {
        gap: var(--od-space-3);
    }

    .od-header__sitename {
        font-size: var(--od-type-sm);
    }
}

/* Respect reduced-motion preference for the drawer + dropdown too */
@media (prefers-reduced-motion: reduce) {
    .od-header__nav,
    .od-header__dropdown,
    .od-header__backdrop,
    .od-header__dropdown-parent > a .od-icon--chevron-down {
        transition-duration: 0.01ms !important;
    }
}