/* ============================================
   ZenOmm - Standardized Navigation Styles
   ============================================

   SINGLE SOURCE OF TRUTH for all navigation styles.
   Do NOT add navigation CSS to individual page <style> blocks.

   Rethemed from YayTimer: every hardcoded gray/brand hue is replaced with
   a ZenOmm token var() defined in custom-styles.css (:root = Lavender Dusk,
   .dark = Royal Blue). Because the vars flip under .dark, most per-rule
   .dark color overrides are no longer needed — only structural dark
   differences (added border, stronger shadow) remain. Layout is unchanged.

   Conventions:
   - Use opacity/visibility for smooth transitions
   - SVG icons only (no emojis)
   - Mobile accordions use .expanded class (also supports .active/.open)
   ============================================ */

/* ===========================================
   Desktop Navigation Dropdown
   =========================================== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1rem;
    padding: 0;
}

.nav-dropdown-toggle:hover {
    color: var(--accent-primary);
}

.nav-dropdown-chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-content {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: var(--bg-panel);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(30, 18, 68, 0.15);
    z-index: 100;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.dark .nav-dropdown-content {
    border: 1px solid var(--border-panel);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown:focus-within .nav-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-content a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--text-on-panel);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 0.9375rem;
}

.nav-dropdown-content a:hover {
    background: var(--bg-panel-deep);
    color: var(--accent-primary);
}

.nav-dropdown-content .dropdown-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--icon-active);
}

.nav-dropdown-content .dropdown-divider {
    height: 1px;
    background: var(--border-panel);
    margin: 0.5rem 0;
}

/* ===========================================
   Language Selector Dropdown
   =========================================== */
.lang-dropdown {
    position: relative;
}

.lang-dropdown-content {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-panel);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(30, 18, 68, 0.15);
    z-index: 100;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    /* Always-visible scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--icon-inactive) transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* WebKit always-visible scrollbar */
.lang-dropdown-content::-webkit-scrollbar {
    width: 6px;
}
.lang-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}
.lang-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--icon-inactive);
    border-radius: 3px;
}
.lang-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

.dark .lang-dropdown-content {
    border: 1px solid var(--border-panel);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.lang-dropdown:hover .lang-dropdown-content,
.lang-dropdown:focus-within .lang-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-content a {
    display: block;
    padding: 10px 16px;
    color: var(--text-on-panel);
    text-decoration: none;
    transition: background 0.2s ease;
}

.lang-dropdown-content a:hover {
    background: var(--bg-panel-deep);
}

.lang-dropdown-content a.active {
    background: var(--accent-primary);
    color: var(--action-primary-text);
}

/* ===========================================
   Mobile Navigation Accordion
   =========================================== */
.mobile-nav-accordion {
    border-top: 1px solid var(--border-default);
    padding-top: 0.5rem;
}

.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1rem;
    text-align: left;
}

.mobile-nav-toggle:hover {
    color: var(--accent-primary);
}

.mobile-nav-chevron {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.mobile-nav-chevron.expanded,
.mobile-nav-chevron.active {
    transform: rotate(180deg);
}

/* Also support SVG rotation inside toggle button */
.mobile-nav-toggle.active svg,
.mobile-nav-toggle.expanded svg {
    transform: rotate(180deg);
}

.mobile-nav-list {
    display: none;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
}

.mobile-nav-list.expanded,
.mobile-nav-list.active,
.mobile-nav-list.open {
    display: block;
}

.mobile-nav-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.9375rem;
}

.mobile-nav-list a:hover {
    color: var(--accent-primary);
}

.mobile-nav-list .dropdown-icon {
    width: 1rem;
    height: 1rem;
    color: var(--icon-active);
}

/* ===========================================
   Mobile Language Accordion
   =========================================== */
.mobile-lang-accordion {
    border-top: 1px solid var(--border-default);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.mobile-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
}

.mobile-lang-toggle:hover {
    color: var(--accent-primary);
}

.mobile-lang-toggle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-lang-chevron {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
}

.mobile-lang-chevron.expanded,
.mobile-lang-chevron.active {
    transform: rotate(180deg);
}

.mobile-lang-list {
    display: none;
    padding-left: 1.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
    /* Always show scrollbar */
    overflow-y: scroll;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--icon-inactive) transparent;
}

/* Webkit browsers - always visible scrollbar */
.mobile-lang-list::-webkit-scrollbar {
    width: 6px;
}

.mobile-lang-list::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-lang-list::-webkit-scrollbar-thumb {
    background-color: var(--icon-inactive);
    border-radius: 3px;
}

.mobile-lang-list.expanded,
.mobile-lang-list.active {
    display: block;
}

.mobile-lang-list a {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-lang-list a:hover {
    color: var(--accent-primary);
}

.mobile-lang-list a.active {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ===========================================
   Active Page Indicator
   =========================================== */
.nav-link-active {
    color: var(--accent-primary) !important;
    font-weight: 500;
}

/* ===========================================
   Back to Top Button
   =========================================== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--hero-gradient);
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(106, 79, 184, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 50;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(106, 79, 184, 0.5);
}

.back-to-top svg {
    width: 24px;
    height: 24px;
}

/* ===========================================
   Breadcrumb Styles
   =========================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--icon-inactive);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* ===========================================
   Localized Nav-Overflow Guard (Plan_Website_3 Phase 8)
   ===========================================
   Long localized nav labels make the desktop link cluster wider than the
   row. Most visibly on ru-RU, the brand "ZenOmm" and the first link
   "Главная" overlap; the same latent overflow exists on fr-FR, uk-UA,
   de-DE, hu-HU, pl-PL, tr-TR, es-MX, pt-BR, ro-RO, … The row is a single
   non-wrapping flex (justify-between, no shrink), so an over-budget cluster
   grows leftward, slides under the brand, and/or overflows the right edge.

   CSS-only fix, scoped to .site-nav, zero HTML / tailwind.css change.
   Defense-in-depth:
     1. Protect the brand — never shrink, always keep a gap from the cluster
        (this alone removes the reported brand ↔ first-link overlap).
     2. Base reveal — hamburger below 1024px, inline desktop row from 1024px
        (en-US and short-label locales fit cleanly here). Implemented by
        overriding the Tailwind md: utilities under .site-nav, no HTML change.
     3. Locale-aware hamburger ladder (`:lang()`) — seven full-text nav
        labels in the longest languages genuinely cannot fit an inline row at
        a readable size at common desktop widths (measured: ru-RU needs
        ~1222px at a 1024px viewport, and still overflows at 1440px; fr-FR
        likewise). Rather than clip the row or shrink text to an unreadable
        size, each long-label locale KEEPS the clean compact menu until the
        viewport is wide enough that its inline row actually fits, then shows
        a lightly-tightened row. en-US / short locales are never touched
        (every rule below is scoped by :lang()), so they stay byte-default
        at every width — including the protected ≥1280px register.

   Measured reveal tiers (viewport width at which the inline row is shown):
     • Tier 0  (en, nl, sv, it, zh, ko, hi)                      ≥ 1024px
     • Tier 1  (de, nb, es, pt, ro, pl, hu, uk, tr, id, ja, bn)  ≥ 1280px
     • Tier 2  (fr)                                              ≥ 1440px
     • Tier 3  (ru — the longest)                                ≥ 1600px
   Below its tier each locale shows the hamburger menu (no overlap, no clip,
   all links reachable). Theme tokens only — no new color, no YayTimer hue.
   space-x-6 is left-margins on children, so spacing overrides target those
   margins (not just `gap`). A new long-label locale just joins a :is() list.
   =========================================== */

/* 1. Brand never compresses and keeps clear of the link cluster. */
.site-nav .flex.justify-between > a:first-child {
    flex-shrink: 0;
    margin-right: 1rem;
}

/* Nav-link labels never wrap mid-word (the row stays one line by reveal,
   not by hyphenation). Harmless for locales that already fit. */
.site-nav .nav-link {
    white-space: nowrap;
}

/* Shared hamburger-swap: hide the desktop cluster, re-show the hamburger,
   and let an opened mobile menu show (it also carries md:hidden). Each
   @media band below re-uses this via the appropriate :is(:lang(...)) scope. */

/* 2. Base: hamburger below 1024px for ALL locales. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .site-nav .hidden.md\:flex { display: none !important; }
    .site-nav #mobile-menu-button.md\:hidden { display: inline-block !important; }
    .site-nav #mobile-menu.md\:hidden:not(.hidden) { display: block !important; }
}

/* 3a. Tier 1+ (all long-label locales): keep the hamburger through
   1024–1280px — their inline row does not fit until ~1280px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    :is(:lang(de),:lang(nb),:lang(es),:lang(pt),:lang(ro),:lang(pl),:lang(hu),:lang(uk),:lang(tr),:lang(id),:lang(ja),:lang(bn),:lang(fr),:lang(ru)) .site-nav .hidden.md\:flex { display: none !important; }
    :is(:lang(de),:lang(nb),:lang(es),:lang(pt),:lang(ro),:lang(pl),:lang(hu),:lang(uk),:lang(tr),:lang(id),:lang(ja),:lang(bn),:lang(fr),:lang(ru)) .site-nav #mobile-menu-button.md\:hidden { display: inline-block !important; }
    :is(:lang(de),:lang(nb),:lang(es),:lang(pt),:lang(ro),:lang(pl),:lang(hu),:lang(uk),:lang(tr),:lang(id),:lang(ja),:lang(bn),:lang(fr),:lang(ru)) .site-nav #mobile-menu.md\:hidden:not(.hidden) { display: block !important; }
}

/* 3b. Tier 2+ (fr, ru): still over budget at 1280px — hamburger through
   1280–1440px. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    :is(:lang(fr),:lang(ru)) .site-nav .hidden.md\:flex { display: none !important; }
    :is(:lang(fr),:lang(ru)) .site-nav #mobile-menu-button.md\:hidden { display: inline-block !important; }
    :is(:lang(fr),:lang(ru)) .site-nav #mobile-menu.md\:hidden:not(.hidden) { display: block !important; }
}

/* 3c. Tier 3 (ru — the longest labels): hamburger through 1440–1600px. */
@media (min-width: 1440px) and (max-width: 1599.98px) {
    :lang(ru) .site-nav .hidden.md\:flex { display: none !important; }
    :lang(ru) .site-nav #mobile-menu-button.md\:hidden { display: inline-block !important; }
    :lang(ru) .site-nav #mobile-menu.md\:hidden:not(.hidden) { display: block !important; }
}

/* 3d. When a long-label locale's inline row IS shown (at/above its tier),
   tighten it modestly so it fits one line. Scoped by :lang() → en-US and
   short locales keep their default spacing/size at every width. */
@media (min-width: 1024px) {
    :is(:lang(de),:lang(nb),:lang(es),:lang(pt),:lang(ro),:lang(pl),:lang(hu),:lang(uk),:lang(tr),:lang(id),:lang(ja),:lang(bn),:lang(fr),:lang(ru)) .site-nav .hidden.md\:flex.space-x-6 > * + * {
        margin-left: 0.85rem !important;
    }
    :is(:lang(de),:lang(nb),:lang(es),:lang(pt),:lang(ro),:lang(pl),:lang(hu),:lang(uk),:lang(tr),:lang(id),:lang(ja),:lang(bn),:lang(fr),:lang(ru)) .site-nav .nav-link {
        font-size: 0.92rem;
    }
}