/* ============================================================================
 * "Modern Hamburger Menu" header style (option value: fullscreen) — a
 * left-aligned, editorial full-screen menu with animated underlines.
 *
 * Loaded when the desktop header_style = "fullscreen" AND/OR the
 * mobile_header_style = "hamburger-style" (see
 * ScriptsManager::load_header_styles()), since both reuse this exact
 * content design: the desktop overlay (#site-navigation.onward-fsm) and the
 * mobile slide-in panel (.ow-mobile-nav-wrap.hamburger-style.onward-fsm)
 * share every `.onward-fsm-*` content rule below (nav typography, animated
 * underline, arrows, submenus, footer). Only the two roots' own "shell"
 * rules differ (fixed fullscreen overlay vs. the existing mobile panel),
 * see the dedicated mobile section near the bottom of this file.
 *
 * Reveal-trigger rules use the plain `.onward-fsm.is-open` ancestor class
 * (not the `#site-navigation` id) precisely so they fire for both roots.
 *
 * Every selector is scoped under the `onward-fsm-` prefix, so nothing here
 * can leak into (or be affected by) the other header styles — including the
 * separate "Hamburger Menu" style, which uses its own `hamburger-` prefix
 * even though all three share the same PHP walker
 * (Onward\Core\Header::render_hamburger_menu()).
 *
 * Font-family intentionally uses `inherit` (the theme's own body font)
 * rather than a hard-coded webfont, so no new font asset is introduced.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Overlay shell
 * ------------------------------------------------------------------------- */
#site-navigation.onward-fsm {
    --ofsm-bg: #ffffff;
    --ofsm-ink: #111111;
    --ofsm-muted: #9a9a9a;
    --ofsm-line: rgba(17, 17, 17, 0.14);

    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ofsm-bg);
    color: var(--ofsm-ink);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

#site-navigation.onward-fsm.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease, visibility 0s linear 0s;
}

.onward-fsm-inner {
    min-height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(88px, 14vh, 140px) clamp(1.25rem, 5vw, 3rem) clamp(1.5rem, 4vh, 2.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Close sits on the overlay shell (not inside the scroller) so it never clips. */
#site-navigation.onward-fsm .onward-fsm-close {
    position: absolute;
    top: clamp(20px, 3vh, 32px);
    inset-inline-end: clamp(20px, 4vw, 48px);
    background: none;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ofsm-ink);
    z-index: 2;
    transition: opacity .2s ease;
}

/* Keep close clear of the WP admin bar when logged in. */
body.admin-bar #site-navigation.onward-fsm .onward-fsm-close {
    top: calc(32px + clamp(12px, 2vh, 20px));
}

@media screen and (max-width: 782px) {
    body.admin-bar #site-navigation.onward-fsm .onward-fsm-close {
        top: calc(46px + clamp(12px, 2vh, 20px));
    }
}

#site-navigation.onward-fsm .onward-fsm-close:hover,
#site-navigation.onward-fsm .onward-fsm-close:focus-visible {
    opacity: .55;
    outline: none;
}

#site-navigation.onward-fsm .onward-fsm-close svg {
    display: inline-block;
    width: 20px;
    height: 20px;
    fill: currentColor;
    color: var(--ofsm-ink);
}

/* ---------------------------------------------------------------------------
 * Nav list (all depths share the same rules; depth-0 gets the big headline
 * treatment with an animated underline, depth 1+ gets the smaller "--sub"
 * treatment). Indentation at each nested level comes from the recurring
 * padding + border-left on `.onward-fsm-submenu-list`.
 * ------------------------------------------------------------------------- */
.onward-fsm-nav,
.onward-fsm-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.onward-fsm-nav {
    display: block;
    width: 100%;
}

.onward-fsm-nav-li {
    position: relative;
    overflow: hidden;
}

.onward-fsm-nav-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ofsm-line);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1) var(--ofsm-delay, 0s);
}

.onward-fsm.is-open .onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row::after {
    transform: scaleX(1);
}

/* Display-scale nav type. font-family inherits Theme Options / body.
   line-height + padding keep glyphs clear of overflow:hidden reveal clips. */
.onward-fsm-nav-item {
    display: block;
    text-decoration: none;
    color: var(--ofsm-ink);
    font-family: inherit;
    font-weight: 800;
    font-size: clamp(48px, 8vw, 72px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    padding-block: 4px;
    transition: color .3s ease;
}

.onward-fsm-nav-item:hover,
.onward-fsm-nav-item:focus-visible {
    color: var(--ofsm-muted);
}

.onward-fsm-nav-item--sub {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    padding: 8px 0;
}

.onward-fsm-submenu {
    overflow: hidden;
    height: 0;
    transition: height .35s cubic-bezier(.65, 0, .35, 1);
}

.onward-fsm-submenu-list {
    padding-block: 8px;
    padding-inline: 24px 0;
    border-inline-start: 1px solid var(--ofsm-line);
    margin-inline-start: 0;
}

/* Reveal animation: depth-0 rows slide up/fade in with a stagger when the
   overlay opens; items inside a submenu do the same when their branch
   expands. Stagger delay is set inline by JS (see onward/js/header.js). */
.onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row > .onward-fsm-nav-item,
.onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row > .onward-fsm-arrow,
.onward-fsm-submenu-list .onward-fsm-nav-item,
.onward-fsm-submenu-list .onward-fsm-arrow {
    transform: translateY(100%);
    opacity: 0;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1) var(--ofsm-delay, 0s), opacity .5s ease var(--ofsm-delay, 0s);
}

.onward-fsm.is-open .onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row > .onward-fsm-nav-item,
.onward-fsm.is-open .onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row > .onward-fsm-arrow,
.onward-fsm-submenu.is-revealed > .onward-fsm-submenu-list > .onward-fsm-nav-li > .onward-fsm-nav-row > .onward-fsm-nav-item,
.onward-fsm-submenu.is-revealed > .onward-fsm-submenu-list > .onward-fsm-nav-li > .onward-fsm-nav-row > .onward-fsm-arrow {
    transform: translateY(0);
    opacity: 1;
}

/* Arrow toggle */
.onward-fsm-arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ofsm-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}

.onward-fsm-arrow svg {
    width: 18px;
    height: 18px;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.onward-fsm-nav > .onward-fsm-nav-li > .onward-fsm-nav-row .onward-fsm-arrow svg {
    width: 22px;
    height: 22px;
}

.onward-fsm-arrow[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* ---------------------------------------------------------------------------
 * Footer block: social links row, a hairline, then the site name wordmark
 * (pulled from WordPress Settings > General, see onward/header.php).
 * ------------------------------------------------------------------------- */
.onward-fsm-footer {
    margin-top: clamp(2rem, 6vh, 3.5rem);
}

.onward-fsm-social-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 clamp(1rem, 3vh, 1.5rem);
    padding: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s ease;
}

.onward-fsm.is-open .onward-fsm-social-list {
    opacity: 1;
    transform: translateY(0);
}

.onward-fsm-social-list .onward-fsm-nav-li {
    overflow: visible;
}

.onward-fsm-social-list .onward-fsm-nav-item--depth-0 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ofsm-ink);
}

.onward-fsm-social-list .onward-fsm-nav-item--depth-0:hover {
    color: var(--ofsm-muted);
}

.onward-fsm-footer-line {
    border: none;
    border-top: 1px solid var(--ofsm-line);
    margin: 0 0 clamp(1rem, 3vh, 1.5rem);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1) .1s;
}

.onward-fsm.is-open .onward-fsm-footer-line {
    transform: scaleX(1);
}

.onward-fsm-wordmark {
    font-family: inherit;
    font-weight: 900;
    font-size: clamp(44px, 14vw, 96px);
    letter-spacing: -0.04em;
    line-height: 0.9;
    opacity: 0;
    transform: translateY(20px);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1), opacity .5s ease;
}

.onward-fsm.is-open .onward-fsm-wordmark {
    opacity: 1;
    transform: translateY(0);
}

/* Persian / RTL: negative tracking crowds joins — reset on display titles. */
[dir="rtl"] .onward-fsm-nav-item,
[dir="rtl"] .onward-fsm-nav-item--sub,
[dir="rtl"] .onward-fsm-wordmark,
[dir="rtl"] .onward-fsm-social-list .onward-fsm-nav-item--depth-0,
:lang(fa) .onward-fsm-nav-item,
:lang(fa) .onward-fsm-nav-item--sub,
:lang(fa) .onward-fsm-wordmark,
:lang(fa) .onward-fsm-social-list .onward-fsm-nav-item--depth-0 {
    letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
 * Empty-state fallback (no menu assigned yet)
 * ------------------------------------------------------------------------- */
.onward-fsm-empty {
    font-size: 15px;
    color: var(--ofsm-muted);
}

.onward-fsm-empty a {
    color: var(--ofsm-ink);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .onward-fsm-inner {
        padding: clamp(70px, 12vh, 110px) 1.25rem 2rem;
    }

    .onward-fsm-submenu-list {
        padding-inline-start: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onward-fsm,
    .onward-fsm-submenu,
    .onward-fsm-arrow svg,
    .onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row::after,
    .onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row > .onward-fsm-nav-item,
    .onward-fsm-nav-li[data-depth="0"] > .onward-fsm-nav-row > .onward-fsm-arrow,
    .onward-fsm-submenu-list .onward-fsm-nav-item,
    .onward-fsm-submenu-list .onward-fsm-arrow,
    .onward-fsm-social-list,
    .onward-fsm-footer-line,
    .onward-fsm-wordmark {
        transition-duration: 0s !important;
        transform: none !important;
    }
}

body.onward-fsm-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Mobile reuse: Mobile Header Style = "Hamburger" (.ow-mobile-nav-wrap
 * .hamburger-style) gets the same nav/footer content design as the desktop
 * overlay above, inside the theme's existing mobile slide-in panel
 * (#mobile-menu.mobile-nav). The panel's own open/close, focus-trap and
 * entrance animation (onward/js/header.js "Mobile Menu" module) are left
 * untouched — this only restyles what is already shown inside it, and does
 * not move the `.mobile-menu-toggle` button.
 * ------------------------------------------------------------------------- */
.ow-mobile-nav-wrap.hamburger-style.onward-fsm .mobile-nav {
    /* Redefined here (not just inherited from #site-navigation.onward-fsm,
       a different element) so every shared .onward-fsm-* rule below that
       reads var(--ofsm-*) resolves correctly inside the mobile panel too. */
    --ofsm-bg: #ffffff;
    --ofsm-ink: #111111;
    --ofsm-muted: #9a9a9a;
    --ofsm-line: rgba(17, 17, 17, 0.14);

    background: var(--ofsm-bg);
    color: var(--ofsm-ink);
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    padding-top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
    padding: clamp(76px, 16vh, 108px) clamp(1.25rem, 6vw, 2rem) 2rem;
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .mobile-branding {
    margin-bottom: clamp(1.5rem, 5vh, 2.5rem);
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .mobile-branding img.custom-logo {
    width: 130px;
    display: block;
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .mobile-close svg {
    color: var(--ofsm-ink, #111111);
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .mobile-nav-wrap-inner {
    flex: 1 1 auto;
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .onward-fsm-footer {
    margin-top: clamp(2rem, 6vh, 3rem);
}

.ow-mobile-nav-wrap.hamburger-style.onward-fsm .onward-fsm-wordmark {
    font-size: clamp(40px, 16vw, 64px);
}

@media (prefers-reduced-motion: reduce) {
    .ow-mobile-nav-wrap.hamburger-style.onward-fsm .onward-fsm-submenu {
        transition-duration: 0s !important;
    }
}