/*
 * SOS Menu — Frontend CSS v3
 * Uses --sm-* custom properties set inline by PHP renderer.
 * All selectors use sm- prefix to avoid theme conflicts.
 */

/* =====================================================================
   Skip link
===================================================================== */
.sm-skip {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: #1a1a1a;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10001;
    white-space: nowrap;
}
.sm-skip:focus {
    position: fixed;
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* =====================================================================
   Header
===================================================================== */
.sm-header {
    position: relative;
    z-index: var(--sm-z, 9000);
    background-color: var(--sm-bg, #fff);
    border-bottom: 1px solid var(--sm-border, #e0e0e0);
    width: 100%;
    box-sizing: border-box;
    background-image: var(--sm-bg-img, none);
    background-position: var(--sm-bg-pos, center center);
    background-size: var(--sm-bg-size, cover);
}
.sm-header__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    max-width: var(--sm-maxw, 1200px);
    min-height: var(--sm-h, 64px);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    gap: 0;
}

.sm-logo {
    flex-shrink: 0;
    margin-right: 24px;
    display: flex;
    align-items: center;
}

/* =====================================================================
   Logo
===================================================================== */
.sm-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.sm-logo a:focus-visible { outline: 3px solid var(--sm-accent, #cc3300); outline-offset: 3px; border-radius: 4px; }
.sm-logo__img {
    display: block;
    /* Logo max-height is independent of nav bar height.
       The header inner has overflow:hidden so a 500px logo image
       is clipped to the header height — it never pushes the bar taller.
       max-height controls how much of the available header space the logo fills. */
    max-height: var(--sm-logo-max-h, 40px);
    max-width: var(--sm-logo-max-w, 200px);
    width: auto;
    height: auto;
    object-fit: contain;
}
.sm-logo__text { font-size: 1.25rem; font-weight: 700; color: var(--sm-text, #1a1a1a); white-space: nowrap; }

/* =====================================================================
   CTA button
===================================================================== */
.sm-header__cta { flex-shrink: 0; margin-left: 16px; }
a.sm-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 44px;
    min-width: 44px;
    background-color: var(--sm-accent, #cc3300);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    box-sizing: border-box;
    transition: filter var(--sm-speed, 200ms) ease;
}
a.sm-cta-btn:hover { filter: brightness(1.12); color: #fff; text-decoration: none; }
a.sm-cta-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--sm-accent, #cc3300);
    color: #fff;
}

/* =====================================================================
   Nav
===================================================================== */
.sm-header .sm-nav,
.sm-wrap .sm-nav,
nav.sm-nav {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* =====================================================================
   Menu list
===================================================================== */
ul.sm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    /* Aligns menu items left/center/right within the nav space,
       independent of logo position */
    justify-content: var(--sm-nav-align, flex-start);
    font-family: var(--sm-font, inherit);
    height: 100%;
}

/* =====================================================================
   Menu items
===================================================================== */
li.sm-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Kill theme-injected arrows on parent items */
ul.sm-list li.menu-item-has-children > a::after,
ul.sm-list li.menu-item-has-children > a::before,
ul.sm-list .sm-link--parent::after,
ul.sm-list .sm-link--parent::before {
    display: none !important;
    content: none !important;
}

/* =====================================================================
   Links
===================================================================== */
a.sm-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    /* Stretch to fill header height — does not set a height that could expand the header */
    align-self: stretch;
    min-height: 44px;    /* WCAG 2.5.8 touch target floor */
    color: var(--sm-text, #1a1a1a);
    background-color: transparent;
    text-decoration: none;
    font-size: var(--sm-fz-top, 0.9375rem);
    font-weight: var(--sm-fw-top, 500);
    letter-spacing: var(--sm-ls, normal);
    text-transform: var(--sm-tt, none);
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: color var(--sm-speed, 200ms) ease, background-color var(--sm-speed, 200ms) ease;
}
a.sm-link--parent { padding-right: 4px; }
a.sm-link:hover {
    color: var(--sm-text, #1a1a1a);
    background-color: var(--sm-hover-bg, #f5f5f5);
    text-decoration: none;
}
a.sm-link[aria-current="page"] {
    color: var(--sm-accent, #cc3300);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--sm-accent, #cc3300);
    text-decoration: underline;
    text-underline-offset: 3px;
}
a.sm-link:focus-visible {
    outline: 3px solid var(--sm-accent, #cc3300);
    outline-offset: 2px;
    background-color: var(--sm-hover-bg, #f5f5f5);
    color: var(--sm-text, #1a1a1a);
    text-decoration: none;
}

/* =====================================================================
   Toggle (chevron) button
===================================================================== */
button.sm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    padding: 0 10px 0 2px;
    min-width: 36px;
    min-height: 44px;
    height: auto;
    background-color: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: var(--sm-text, #1a1a1a);
    font-size: 0;
    box-sizing: border-box;
    transition: color var(--sm-speed, 200ms) ease, background-color var(--sm-speed, 200ms) ease;
}
button.sm-toggle:hover {
    background-color: var(--sm-hover-bg, #f5f5f5);
    color: var(--sm-text, #1a1a1a);
}
button.sm-toggle:focus-visible {
    outline: 3px solid var(--sm-accent, #cc3300);
    outline-offset: 2px;
    background-color: var(--sm-hover-bg, #f5f5f5);
}

/* Chevron icon — CSS only */
.sm-chevron {
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--sm-speed, 200ms) ease;
    pointer-events: none;
}
button.sm-toggle[aria-expanded="true"] .sm-chevron {
    transform: rotate(225deg) translateY(2px);
}

/* =====================================================================
   Dropdown panel
===================================================================== */
ul.sm-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: calc(var(--sm-z, 9000) + 1);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 220px;
    width: max-content;
    max-width: 320px;
    background-color: var(--sm-dd-bg, #fff);
    border: 1px solid var(--sm-dd-border, #e0e0e0);
    border-top: 3px solid var(--sm-dd-accent, #cc3300);
    border-radius: 0 0 var(--sm-dd-radius, 4px) var(--sm-dd-radius, 4px);
    box-shadow: var(--sm-dd-shadow, 0 4px 16px rgba(0,0,0,.12));
    box-sizing: border-box;
    /* Hidden — visibility:hidden removes from tab order */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
        opacity var(--sm-speed, 200ms) ease,
        transform var(--sm-speed, 200ms) ease,
        visibility 0ms var(--sm-speed, 200ms);
}

/* Nested flies right */
ul.sm-dropdown ul.sm-dropdown {
    top: -7px;
    left: 100%;
}

/* Open state */
li.sm-item--open > ul.sm-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity var(--sm-speed, 200ms) ease,
        transform var(--sm-speed, 200ms) ease,
        visibility 0ms 0ms;
}

/* Dropdown items layout */
ul.sm-dropdown > li.sm-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Dropdown links */
ul.sm-dropdown a.sm-link {
    flex: 1 1 auto;
    height: auto;
    min-height: 44px;
    padding: 10px 20px;
    font-size: var(--sm-fz-sub, 0.875rem);
    font-weight: var(--sm-fw-sub, 400);
    letter-spacing: normal;
    text-transform: none;
    color: var(--sm-dd-text, #1a1a1a);
    white-space: normal;
}
ul.sm-dropdown a.sm-link:hover {
    background-color: var(--sm-hover-bg, #f5f5f5);
    color: var(--sm-dd-text, #1a1a1a);
}
ul.sm-dropdown a.sm-link:focus-visible {
    outline: 3px solid var(--sm-dd-accent, #cc3300);
    outline-offset: 2px;
    background-color: var(--sm-hover-bg, #f5f5f5);
    color: var(--sm-dd-text, #1a1a1a);
}

/* Dropdown toggle */
ul.sm-dropdown button.sm-toggle {
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    padding: 0 12px;
    border-left: 1px solid var(--sm-dd-border, #e0e0e0);
}
ul.sm-dropdown button.sm-toggle .sm-chevron { transform: rotate(-45deg); }
ul.sm-dropdown button.sm-toggle[aria-expanded="true"] .sm-chevron { transform: rotate(45deg) translateY(-2px); }

/* =====================================================================
   Hamburger button (mobile)
===================================================================== */
button.sm-hamburger {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0 12px;
    min-height: 44px;
    min-width: 44px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--sm-text, #1a1a1a);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    box-sizing: border-box;
}
button.sm-hamburger:focus-visible {
    outline: 3px solid var(--sm-accent, #cc3300);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Hamburger lines */
button.sm-hamburger > span:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    width: 22px;
    height: 16px;
}
button.sm-hamburger > span:first-child span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform var(--sm-speed, 200ms) ease, opacity var(--sm-speed, 200ms) ease;
}
button.sm-hamburger[aria-expanded="true"] > span:first-child span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
button.sm-hamburger[aria-expanded="true"] > span:first-child span:nth-child(2) { opacity: 0; transform: scaleX(0); }
button.sm-hamburger[aria-expanded="true"] > span:first-child span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   Sticky header
===================================================================== */
.sm-header.sm-header--sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--sm-z, 9000);
    will-change: transform;
    transition: background-color var(--sm-speed, 200ms) ease, box-shadow var(--sm-speed, 200ms) ease, transform var(--sm-speed, 200ms) ease;
}
.sm-header.sm-header--sticky.is-shrunk .sm-header__inner { min-height: var(--sm-h-sticky, 52px); }
.sm-header.sm-header--sticky.is-shrunk { background-color: var(--sm-sticky-bg, #fff); box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.sm-header.sm-header--hidden { transform: translateY(-110%); }
body.sm-sticky-active { padding-top: var(--sm-h, 64px); }

/* =====================================================================
   Theme isolation — prevents common theme rules bleeding in
===================================================================== */
.sm-header a, .sm-wrap a, nav.sm-nav a { text-decoration: none; }
.sm-header a:hover, .sm-wrap a:hover, nav.sm-nav a:hover { text-decoration: none; }
.sm-header ul, .sm-header li, .sm-wrap ul, .sm-wrap li, nav.sm-nav ul, nav.sm-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.sm-list { gap: 0; }

/* Kill theme dropdown-toggle buttons inside plugin markup */
.sm-header .dropdown-toggle,
.sm-wrap .dropdown-toggle,
nav.sm-nav .dropdown-toggle {
    display: none !important;
}

/* Kill theme hover/focus-within opening sub-menus */
.sm-header li:hover > ul:not(.sm-dropdown),
.sm-header li:focus-within > ul:not(.sm-dropdown),
nav.sm-nav li:hover > ul,
nav.sm-nav li:focus-within > ul { display: none; visibility: hidden; }
nav.sm-nav li.sm-item--open > ul.sm-dropdown { display: block; visibility: visible; }

/* =====================================================================
   Mobile layout
===================================================================== */
/*
 * Mobile layout block — 768px is a safe structural fallback.
 * The hamburger show/hide and list collapse are handled by a PHP-generated
 * @media block using the actual configured breakpoint value (see renderer.php).
 * Rules here govern the stacked layout structure that applies at any mobile width.
 */
@media (max-width: 768px) {

    .sm-header__inner { flex-wrap: wrap; height: auto; min-height: var(--sm-h, 64px); padding: 0 16px; }
    .sm-logo { flex: 1 1 auto; margin-right: 0; }
    .sm-header__cta { order: 3; flex: 0 0 100%; margin: 0; padding: 8px 0 12px; border-top: 1px solid var(--sm-border, #e0e0e0); }

    .sm-header .sm-nav,
    .sm-wrap .sm-nav,
    nav.sm-nav { order: 2; flex: 0 0 100%; width: 100%; }

    /* Hamburger and list toggle — PHP also outputs these at the real configured
       breakpoint. This 768px fallback ensures baseline behaviour if PHP block
       is absent (e.g. shortcode mode without header mode active). */
    button.sm-hamburger { display: flex; flex: 0 0 auto; order: 1; margin-left: 8px; }

    ul.sm-list {
        display: none;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        height: auto;
        width: 100%;
        background-color: var(--sm-bg, #fff);
        border-top: 1px solid var(--sm-border, #e0e0e0);
    }
    ul.sm-list.sm-list--open { display: flex; }

    li.sm-item { flex-wrap: nowrap; border-bottom: 1px solid var(--sm-border, #e0e0e0); }
    li.sm-item:last-child { border-bottom: none; }

    a.sm-link { flex: 1 1 auto; height: auto; min-height: 48px; padding: 12px 16px; }

    button.sm-toggle { flex: 0 0 auto; align-self: stretch; height: auto; min-height: 48px; padding: 0 16px; border-left: 1px solid var(--sm-border, #e0e0e0); }
    ul.sm-dropdown button.sm-toggle { position: static; border-left: 1px solid var(--sm-dd-border, #e0e0e0); }
    ul.sm-dropdown button.sm-toggle .sm-chevron { transform: rotate(45deg) translateY(-2px); }
    ul.sm-dropdown button.sm-toggle[aria-expanded="true"] .sm-chevron { transform: rotate(225deg) translateY(2px); }

    ul.sm-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--sm-border, #e0e0e0);
        border-radius: 0;
        padding: 0;
        width: 100%;
        max-width: none;
        display: none;
        transition: none;
    }
    li.sm-item--open > ul.sm-dropdown { display: block; pointer-events: auto; }
    ul.sm-dropdown a.sm-link { padding-left: 32px; }
    ul.sm-dropdown ul.sm-dropdown a.sm-link { padding-left: 48px; }

    .sm-header.sm-header--sticky { position: relative; }
    body.sm-sticky-active { padding-top: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root { --sm-speed: 0ms !important; }
}

/* =====================================================================
   Parent mode: nav_only
   The <a> itself is the toggle — chevron sits inside the link.
   No separate button, so no right-padding reduction needed.
===================================================================== */
a.sm-link--toggle {
    cursor: pointer;
    gap: 8px;
    padding-right: 14px;  /* room for the chevron */
}
a.sm-link--toggle .sm-chevron {
    /* Chevron inherits from .sm-chevron but sits inline in the link */
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--sm-speed, 200ms) ease;
    pointer-events: none;
}
a.sm-link--toggle[aria-expanded="true"] .sm-chevron {
    transform: rotate(225deg) translateY(2px);
}
/* nav_only items don't have a separate toggle button */
li.sm-item--toggle-link > button.sm-toggle {
    display: none;
}

/* =====================================================================
   Icons (SVG sprite via <use>)
===================================================================== */
svg.sm-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    pointer-events: none;
}
svg.sm-icon--sm { width: 14px; height: 14px; }
svg.sm-icon--md { width: 18px; height: 18px; }
svg.sm-icon--lg { width: 24px; height: 24px; }

/* Badges */
.sm-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}