/**
 * SermonWave site header (includes/site_header_lib.php): logo, site nav (Home / Find a church / Sermons / Bible /
 * For churches), language pill, sign in, menu (☰). One header for the listen app (home, church pages) and every
 * site page (directory, sermons, Bible, marketing). Moved here from listen/css/listener.css; the listen page loads
 * this file BEFORE listener.css, so its cascade is what it was there.
 *
 * Tokens: the rules use the --listener-* tokens. On the listen page listener.css supplies them (dark by default,
 * light under [data-bs-theme="light"]). Site pages render the header with .sw-site-header--standalone, which supplies
 * them itself: light (the site pages are light), dark only when the page sets data-bs-theme="dark" on <html>.
 * Directions: logical properties (inset-inline-end, text-align: start), so ar / fa / ur mirror.
 */

/* ------------------------------------------------------------------ standalone tokens (site pages) */
.sw-site-header--standalone {
    --listener-bg-elevated:     #ffffff;
    --listener-bg-card-hover:   #f0f1f5;
    --listener-border:          rgba(13, 27, 62, 0.10);
    --listener-border-strong:   rgba(13, 27, 62, 0.18);
    --listener-text:            #1a1a2e;
    --listener-text-muted:      #4b5563;   /* 7.5:1 on white */
    --listener-text-faint:      #6b7280;   /* 4.8:1 on white */
    --listener-accent:          #b45309;   /* 5.0:1 on white (the listen light accent #d97706 is 3.2:1) */
    --listener-header-bg:       rgba(255, 255, 255, 0.97);
    --listener-header-blur:     20px;
    --listener-radius-sm:       8px;
    --listener-radius-md:       12px;
    --listener-radius-full:     9999px;
    --listener-font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --listener-font-size-xs:    0.75rem;
    --listener-font-size-sm:    0.8125rem;
    --listener-font-size-base:  1rem;
    --listener-safe-top:        env(safe-area-inset-top, 0px);
    --listener-header-height:   56px;
    --sw-header-cta-bg:         #1244C4;   /* brand blue (css/style.css --blue): white text 7.4:1 */
    --sw-header-cta-bg-hover:   #2B5CD6;
    z-index: 1000;                         /* above the site pages' maps / sticky bars, like the old header */
    font-family: var(--sw-lang-font, var(--listener-font));
    line-height: 1.5;
    color: var(--listener-text);
    text-align: start;
}
[data-bs-theme="dark"] .sw-site-header--standalone {
    --listener-bg-elevated:     #12121a;
    --listener-bg-card-hover:   #1c1c28;
    --listener-border:          rgba(255, 255, 255, 0.06);
    --listener-border-strong:   rgba(255, 255, 255, 0.12);
    --listener-text:            #e8e8e8;
    --listener-text-muted:      #a1a1b0;
    --listener-text-faint:      #8a8a9a;
    --listener-accent:          #f59e0b;
    --listener-header-bg:       rgba(10, 10, 15, 0.92);
}
/* site pages: the fixed header is 56px, border included (css/style.css used 72px for the old header) */
:root { --header-height: 56px; }

/* ------------------------------------------------------------------ bar */
#listener-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: calc(var(--listener-header-height) + var(--listener-safe-top));
    padding-top: var(--listener-safe-top);
    background: var(--listener-header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(var(--listener-header-blur));
    backdrop-filter: saturate(180%) blur(var(--listener-header-blur));
    border-bottom: 1px solid var(--listener-border);
    font-family: var(--sw-lang-font, var(--listener-font));
    line-height: 1.5;
}
#listener-header.sw-site-header--standalone { z-index: 1000; }

.listener-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--listener-header-height);
    padding: 0 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.listener-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 1 auto;
}

.listener-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin: 0 -2px;
    color: var(--listener-text-faint);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s;
}
.listener-header__back:hover { color: var(--listener-accent); }
[dir="rtl"] .listener-header__back svg { transform: scaleX(-1); }

.listener-header__home {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 0 1 auto;
}
.listener-header__home:hover .listener-header__org { color: var(--listener-accent); }

.listener-header__logo {
    height: 30px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0;
}

/* SermonWave logo (theme-aware: --light is the white-text logo for dark headers) */
.listener-header__uv-logo {
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}
[data-bs-theme="dark"] .listener-header__uv-logo--dark { display: none; }
[data-bs-theme="dark"] .listener-header__uv-logo--light { display: block; }
[data-bs-theme="light"] .listener-header__uv-logo--light { display: none; }
[data-bs-theme="light"] .listener-header__uv-logo--dark { display: block; }
/* site pages without a theme attribute: light header -> dark-text logo */
:root:not([data-bs-theme]) .sw-site-header--standalone .listener-header__uv-logo--light { display: none; }
:root:not([data-bs-theme]) .sw-site-header--standalone .listener-header__uv-logo--dark { display: block; }

.listener-header__text { min-width: 0; }
.listener-header__org {
    font-size: var(--listener-font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 180px;
    letter-spacing: -0.01em;
    transition: color 0.15s;
}

.listener-header__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.listener-header__btn {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--listener-border-strong);
    border-radius: var(--listener-radius-full);
    background: transparent;
    color: var(--listener-text-muted);
    font-size: var(--listener-font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    font-family: var(--sw-lang-font, var(--listener-font));
    text-decoration: none;
    white-space: nowrap;
}
.listener-header__btn:hover {
    color: var(--listener-text);
    border-color: var(--listener-text-faint);
    background: var(--listener-bg-elevated);
}
.listener-header__btn:focus-visible { outline: 2px solid var(--listener-accent); outline-offset: 2px; }

@media (max-width: 480px) {
    .listener-header__uv-logo { height: 24px; }
    .listener-header__right { gap: 4px; }
}
@media (pointer: coarse) {
    .listener-header__back { min-width: 44px; min-height: 44px; margin: 0 -12px; }
    .listener-header__home { min-height: 44px; }
}

/* ------------------------------------------------------------------ site navigation (inline from 1100px) */
.listener-header__nav { display: none; }
@media (min-width: 1100px) {
    .listener-header__nav {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }
}
.listener-header__nav-link {
    padding: 7px 12px;
    border-radius: var(--listener-radius-full);
    color: var(--listener-text-muted);
    font-size: var(--listener-font-size-sm);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.listener-header__nav-link:hover { color: var(--listener-text); background: var(--listener-bg-card-hover); }
.listener-header__nav-link.is-active { color: var(--listener-accent); font-weight: 600; }
.listener-header__nav-link:focus-visible,
.listener-menu__item:focus-visible,
.listener-menu__lang:focus-visible,
.listener-lang-switcher__option:focus-visible,
.listener-menu-btn:focus-visible { outline: 2px solid var(--listener-accent); outline-offset: 2px; }

/* the nav does not fit next to the logo and buttons (long translated labels): it moves into the menu
   (js/sw_site_header.js adds .is-compact after measuring) */
#listener-header.is-compact .listener-header__nav { display: none; }

/* ------------------------------------------------------------------ "Start free trial" (marketing pages) */
.listener-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--listener-radius-full);
    background: var(--sw-header-cta-bg, #1244C4);
    color: #fff;
    font-family: var(--sw-lang-font, var(--listener-font));
    font-size: var(--listener-font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}
.listener-header__cta:hover,
.listener-header__cta:focus-visible { background: var(--sw-header-cta-bg-hover, #2B5CD6); color: #fff; box-shadow: 0 4px 14px rgba(18, 68, 196, 0.3); }
.listener-header__cta:focus-visible { outline: 2px solid var(--listener-accent); outline-offset: 2px; }
@media (max-width: 560px) {
    .listener-header__cta { padding: 7px 11px; font-size: var(--listener-font-size-xs); }
    /* phones: room for the trial button -> "Sign in" moves into the menu */
    .sw-site-header--cta .listener-account-btn { display: none; }
}
/* still too wide (a long translation): the button is the menu's first item instead */
#listener-header.is-tight .listener-header__right > .listener-header__cta { display: none; }
/* ... and "Sign in" comes back to the bar (as on the home page) */
#listener-header.is-tight .listener-header__right > .listener-account-btn { display: flex; }

/* ------------------------------------------------------------------ UI language pill + dropdown */
.listener-lang-switcher { position: relative; }
.listener-lang-switcher__trigger { display: inline-flex; align-items: center; gap: 4px; }
.listener-lang-switcher__trigger span { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.05em; }
.listener-lang-switcher__trigger[aria-expanded="true"] { color: var(--listener-accent); border-color: var(--listener-accent); }
.listener-lang-switcher__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 200;
    min-width: 200px;
    max-height: calc(100vh - var(--listener-header-height) - var(--listener-safe-top) - 24px);
    overflow-y: auto;
    border-radius: 10px;
    background: var(--listener-bg-elevated);
    border: 1px solid var(--listener-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.listener-lang-switcher__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--listener-text);
    font-size: 0.85rem;
    text-align: start;
    transition: background 0.1s;
}
.listener-lang-switcher__option:hover { background: rgba(99, 102, 241, 0.08); color: var(--listener-text); }
.listener-lang-switcher__option.is-active { color: var(--listener-accent); }
.listener-lang-switcher__native { font-weight: 600; }
.listener-lang-switcher__name { color: var(--listener-text-faint); font-size: 0.75rem; margin-inline-start: auto; }
.listener-lang-switcher__option svg { color: var(--listener-accent); flex-shrink: 0; }

/* ------------------------------------------------------------------ account */
.listener-account-btn { text-decoration: none; }
.listener-account-btn.is-signed-in { color: var(--listener-accent); border-color: var(--listener-accent); }
@media (max-width: 520px) {
    .listener-account-btn__label { display: none; }
}

/* ------------------------------------------------------------------ menu (☰) */
.listener-menu-wrap { position: relative; }
.listener-menu-btn { padding: 6px 9px; }
.listener-menu-btn[aria-expanded="true"] { color: var(--listener-accent); border-color: var(--listener-accent); }
@media (pointer: coarse) {
    .listener-menu-btn { min-width: 40px; min-height: 36px; justify-content: center; }
}
.listener-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 210;
    width: 248px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - var(--listener-header-height) - var(--listener-safe-top) - 24px);
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--listener-radius-md);
    background: var(--listener-bg-elevated);
    border: 1px solid var(--listener-border-strong);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    text-align: start;
}
.listener-menu[hidden] { display: none; }
.listener-menu__nav,
.listener-menu__group { display: flex; flex-direction: column; }
.listener-menu__nav { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--listener-border); }
.listener-menu__group + .listener-menu__group { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--listener-border); }
@media (min-width: 1100px) {
    #listener-header:not(.is-compact) .listener-menu__nav { display: none; }
}
.listener-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--listener-radius-sm);
    color: var(--listener-text);
    font-family: var(--sw-lang-font, var(--listener-font));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}
.listener-menu__item:hover { background: var(--listener-bg-card-hover); color: var(--listener-text); }
.listener-menu__item.is-active { color: var(--listener-accent); font-weight: 600; }
.listener-menu__btn { width: 100%; border: 0; background: none; font: inherit; font-size: 0.875rem; text-align: start; cursor: pointer; }
.listener-menu__btn svg,
.listener-menu__item > svg { flex: none; color: var(--listener-text-muted); }
.listener-menu .listener-help-option { border-top: 0; }
.listener-menu__heading {
    padding: 6px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--listener-text-faint);
}
.listener-menu__lang-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; }
.listener-menu__lang {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: var(--listener-radius-full);
    border: 1px solid var(--listener-border-strong);
    color: var(--listener-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}
.listener-menu__lang:hover { border-color: var(--listener-text-faint); color: var(--listener-text); }
.listener-menu__lang.is-active { border-color: var(--listener-accent); color: var(--listener-accent); font-weight: 600; }
/* the phone number: digits stay left-to-right in ar / fa / ur */
.listener-menu__phone span { direction: ltr; unicode-bidi: isolate; }
/* the trial button in the menu (marketing pages) */
.listener-menu__cta { margin: 4px 6px 2px; justify-content: center; }
/* "Sign in" in the menu: only when the header has no room for it (phones on marketing pages) */
.listener-menu__account { display: none; }
@media (max-width: 560px) {
    .sw-site-header--cta .listener-menu__account { display: flex; }
    #listener-header.is-tight .listener-menu__account { display: none; }
}
/* languages: the globe pill on tablets / desktop, the menu on phones */
@media (min-width: 768px) {
    .listener-menu__langs { display: none; }
    .listener-menu__group.listener-menu__langs + .listener-menu__group { padding-top: 0; margin-top: 0; border-top: 0; }
}
@media (max-width: 767.98px) {
    .listener-lang-switcher { display: none; }
}