/* ═══════════════════════════════════════════════════════════════════════════
   sk-nav.css — the public marketing navbar, mega-menu and mobile drawer
   ───────────────────────────────────────────────────────────────────────────
   OWNS:      .sk-nav, .sk-mega, .sk-drawer and their children.
   REQUIRES:  sk-tokens.css, sk-buttons.css.
   NEVER:     `!important`; never a selector matching `.landing-navbar`,
              `.navbar-*`, `.mobile-drawer*` or `.ads-page-navbar`.

   REPLACES (rules left in landing.css, now unused — see the retirement ledger)
     .landing-navbar / .navbar-inner / .navbar-links / .navbar-actions
     .nav-signin / .nav-cta / .navbar-mobile-* / .mobile-drawer*
     .ads-page-navbar
   The legacy `.dark-hero .landing-navbar` block is NOT carried forward: no
   template sets `dark-hero`, so it was already dead code before this change.

   HEIGHT IS LOAD-BEARING
   Nine rules in landing.css compute hero and legal-page top padding from
   `--nav-height` (68 / 54 at ≤767). `--sk-nav-h` mirrors those values exactly,
   including the ≤991 → 56px step, so no hero moves.

   TRANSPARENT UNTIL SCROLLED
   The bar starts transparent over the hero and turns solid on scroll, which is
   the behaviour the site already had. It also turns solid while the mega-menu
   is open, otherwise the panel would hang off a transparent bar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The bar ───────────────────────────────────────────────────────────────── */
.sk-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--sk-nav-z);
    height: var(--sk-nav-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color 300ms ease, border-color 300ms ease,
                box-shadow 300ms ease;
}

.sk-nav.is-scrolled,
.sk-nav.is-menu-open {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--sk-nav-border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.sk-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--sk-nav-pad-x);
    position: relative;
}

/* ── Brand ─────────────────────────────────────────────────────────────────── */
.sk-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: none;
}
.sk-nav__brand:hover { text-decoration: none; }
.sk-nav__brand img { height: 44px; width: auto; display: block; }
.sk-nav__brand-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* ── Primary nav (desktop) ─────────────────────────────────────────────────── */
/* These run the full height of the bar on purpose. A dropdown anchored to a
   40px-tall list item would open from the middle of a 68px bar; anchored to an
   item that fills the bar, `top: 100%` is the bar's own bottom edge. */
.sk-nav__primary {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    height: 100%;
}

.sk-nav__list {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--sk-nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Deliberately NOT position:relative. The mega panel anchors to .sk-nav__inner
   (the centred navbar row) instead of to this item. Anchoring it to the trigger
   centred a 760px panel on a link sitting left of centre, which pushed its left
   edge 21px off-screen at 1024px. */
.sk-nav__item { display: flex; align-items: center; height: 100%; }

/* Compact dropdowns DO anchor to their own trigger — they are narrow enough
   that they cannot clip, and a 280px panel centred under a 1,400px bar would
   float unattached to the word that opened it. */
.sk-nav__item--anchored { position: relative; }

/* A link and a mega-trigger must be visually identical — one is an <a>, the
   other a <button>, so both reset their own chrome. */
.sk-nav__link,
.sk-nav__trigger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sk-btn-h);
    padding: 0 12px;
    margin: 0;
    border: 0;
    border-radius: var(--sk-btn-radius);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    color: var(--sk-nav-link);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--sk-transition), background-color var(--sk-transition);
}

.sk-nav__link:hover,
.sk-nav__trigger:hover,
.sk-nav__item.is-open .sk-nav__trigger {
    color: var(--sk-nav-link-hover);
    background: var(--bg-surface-2);
    text-decoration: none;
}

.sk-nav__link:focus-visible,
.sk-nav__trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sk-nav__chev {
    font-size: 0.7em;
    transition: transform var(--sk-transition);
}
.sk-nav__item.is-open .sk-nav__chev { transform: rotate(180deg); }

/* ── Right-hand actions (desktop) ──────────────────────────────────────────── */
.sk-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* ── Mobile cluster ────────────────────────────────────────────────────────── */
.sk-nav__mobile {
    display: none;
    align-items: center;
    gap: 8px;
    flex: none;
}

.sk-nav__burger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sk-touch-min);
    height: var(--sk-touch-min);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--sk-btn-radius);
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.sk-nav__burger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ═══ MEGA MENU ═══════════════════════════════════════════════════════════
   Five app tiles, then Synq on its own full-width row beneath them. The split
   is the point: Synq is a layer under the five apps, not a sixth app.
   ═════════════════════════════════════════════════════════════════════════ */
.sk-mega {
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    z-index: var(--sk-mega-z);
    width: var(--sk-mega-w);
    max-width: calc(100vw - (var(--container-pad) * 2));
    padding: var(--sk-mega-pad);
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: var(--sk-mega-radius);
    box-shadow: var(--sk-mega-shadow);

    /* Hidden with visibility rather than display: the panel can still animate,
       and its links stay out of both the tab order and the accessibility tree
       while closed.

       visibility is stepped with a delay, never interpolated. Putting it in the
       transition list as a normal property made it take the full 200ms to turn
       visible, so a keyboard user who opened the menu and tabbed straight away
       skipped every link in it. Here it flips to visible instantly on open, and
       waits for the fade to finish before flipping back on close. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sk-transition-panel),
                transform var(--sk-transition-panel),
                visibility 0s linear var(--sk-transition-panel);
}

.sk-nav__item.is-open > .sk-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--sk-transition-panel),
                transform var(--sk-transition-panel),
                visibility 0s linear 0s;
}

.sk-mega__heading {
    margin: 0 0 10px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.sk-mega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
}

.sk-mega__tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--sk-btn-radius);
    text-decoration: none;
    transition: background-color var(--sk-transition);
}
.sk-mega__tile:hover { background: var(--bg-surface); text-decoration: none; }
.sk-mega__tile:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.sk-mega__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--sk-btn-radius);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.9375rem;
}

.sk-mega__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.sk-mega__blurb {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;      /* 13px — above the 12px floor */
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── The Synq row — deliberately not a sixth tile ──────────────────────────── */
.sk-mega__layer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 12px;
    border-top: 1px solid var(--border-light);
    border-radius: var(--sk-btn-radius);
    text-decoration: none;
    transition: background-color var(--sk-transition);
}
.sk-mega__layer:hover { background: var(--bg-surface); text-decoration: none; }
.sk-mega__layer:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.sk-mega__layer .sk-mega__icon {
    background: var(--primary);
    color: #fff;
}

.sk-mega__layer-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: 1px;
}

/* ── Compact dropdown — Company, Resources ────────────────────────────────
   Same panel, sized for a short list of pages. Two entries in a 760px product
   grid would read as a catalogue rather than a menu. Width is content-driven
   and left-aligned to its trigger, so a two-item menu does not span the bar. */
.sk-mega--compact {
    width: 280px;
    max-width: calc(100vw - (var(--container-pad) * 2));
    padding: 8px;
    left: 0;
    transform: translateY(-4px);
}
.sk-nav__item.is-open > .sk-mega--compact { transform: translateY(0); }

.sk-mega__tile--plain { padding: 10px 12px; }

/* ── Menu footer — the homepage anchors the old navbar linked to directly ──── */
.sk-mega__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.sk-mega__footlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--sk-btn-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color var(--sk-transition), color var(--sk-transition);
}
.sk-mega__footlink:hover {
    background: var(--bg-surface);
    color: var(--primary);
    text-decoration: none;
}
.sk-mega__footlink:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.sk-mega__footlink > i { font-size: 0.7em; }

/* ═══ MOBILE DRAWER ═══════════════════════════════════════════════════════ */
.sk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--sk-drawer-backdrop-z);
    background: var(--sk-drawer-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sk-transition-panel),
                visibility 0s linear var(--sk-transition-panel);
}
.sk-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--sk-transition-panel), visibility 0s linear 0s;
}

.sk-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--sk-drawer-z);
    width: var(--sk-drawer-w);
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--sk-transition-panel),
                visibility 0s linear var(--sk-transition-panel);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sk-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--sk-transition-panel), visibility 0s linear 0s;
}

.sk-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sk-nav-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--border-light);
    flex: none;
}

.sk-drawer__close {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sk-touch-min);
    height: var(--sk-touch-min);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--sk-btn-radius);
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
}
.sk-drawer__close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sk-drawer__nav {
    list-style: none;
    margin: 0;
    padding: 8px;
    flex: 1 1 auto;
}

.sk-drawer__link,
.sk-drawer__groupbtn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: var(--sk-touch-min);
    padding: 10px 12px;
    margin: 0;
    border: 0;
    border-radius: var(--sk-btn-radius);
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-main);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.sk-drawer__link:hover,
.sk-drawer__groupbtn:hover { background: var(--bg-surface); text-decoration: none; }
.sk-drawer__link:focus-visible,
.sk-drawer__groupbtn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.sk-drawer__groupbtn .sk-nav__chev { font-size: 0.75rem; color: var(--text-muted); }
.sk-drawer__group.is-open .sk-nav__chev { transform: rotate(180deg); }

.sk-drawer__sub {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 0 12px;
    display: none;
}
.sk-drawer__group.is-open .sk-drawer__sub { display: block; }

.sk-drawer__sub .sk-drawer__link {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.sk-drawer__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 20px;
    border-top: 1px solid var(--border-light);
    flex: none;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════
   The desktop nav and the mobile cluster swap at 991px, matching the shell
   breakpoint the rest of the platform uses (UI_STANDARDS Part 11).
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* Reclaim room before anything is forced to wrap. */
    .sk-nav__inner { gap: 12px; }
    .sk-nav__link, .sk-nav__trigger { padding: 0 8px; }
}

@media (max-width: 991px) {
    .sk-nav__primary,
    .sk-nav__actions { display: none; }
    .sk-nav__mobile { display: flex; }
    .sk-nav__brand img { height: 34px; }
    .sk-nav__brand-text { font-size: 1.125rem; }
}

@media (max-width: 767px) {
    .sk-nav__brand img { height: 28px; }
    .sk-nav__brand-text { font-size: 1rem; }
    .sk-nav__brand { gap: 7px; }
}

/* ── Reduced motion (UI_STANDARDS Part 12 — hard requirement) ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .sk-nav,
    .sk-nav__link,
    .sk-nav__trigger,
    .sk-nav__chev,
    .sk-mega,
    .sk-mega__tile,
    .sk-mega__layer,
    .sk-mega__footlink,
    .sk-drawer,
    .sk-drawer-backdrop { transition: none; }
}