/* GENERATED FILE — DO NOT EDIT.
   Source: shared/design-system/navbar.css
   Regenerate: node shared/design-system/sync.mjs
   Edits here are overwritten and will silently desync the other targets. */

/* ============================================================
   Focus Media Services — NAVBAR
   ------------------------------------------------------------
   The site navbar: logo, menu, CTA pill, mobile off-canvas.

   Canonical source — edit here, then run:
       node shared/design-system/sync.mjs
   Never edit the generated copies in each target's ds folder.
   ============================================================ */

/* ---------- Navbar ---------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100px;
    padding: 0 15px;
    background: transparent;
    transition: background-color .3s ease-out, box-shadow .3s ease-out;
}
.navbar.is-stuck {
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 20px rgba(18, 41, 61, .1);
}

.navbar__logo { display: flex; align-items: center; padding: 0 15px; }
.navbar__logo img { height: 50px; width: auto; }
@media (max-width: 639px) {
    .navbar__logo img { height: 38px; }
    .navbar { min-height: 76px; }
}

.navbar__right { display: flex; align-items: center; flex-wrap: nowrap; }

.navbar__menu {
    display: none;
    list-style: none;
    margin: 0 20px 0 0;
    padding: 0;
}
/* Members had no signposted way back in: the only navbar action is the launch
   list, so someone who already has a seat had to know /account existed
   (Brad and Kathy, 2026-09-04). A quiet text link rather than a second button —
   two buttons side by side is the thing that made the membership page read as
   a choice between paying and signing in. */
.navbar__signin {
    display: none;
    margin-right: 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--body-text);
    text-decoration: none;
}
.navbar__signin:hover,
.navbar__signin:focus-visible { color: var(--secondary); text-decoration: underline; }

.navbar__cta { display: none; margin-right: 20px; }
@media (min-width: 1000px) {
    .navbar__menu { display: flex; }
    .navbar__cta { display: inline-flex; }
    .navbar__signin { display: inline-flex; }
}
.navbar__cta { white-space: nowrap; }
.navbar__menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .0833333rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary);
    border-radius: var(--radius-sm);
}
/* green underline on hover */
.navbar__menu > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease-in-out;
}
.navbar__menu > li > a:hover::after,
.navbar__menu > li > a:focus-visible::after { transform: scaleX(1); }
/* current page (aria-current="page", set by the portal navbar): the
   green underline holds instead of waiting for hover */
.navbar__menu > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Grouped items (2026-09-14) ----------
   Training and Services fold six destinations into two dropdowns beside
   About. The trigger is a button — it goes nowhere itself. The panel opens
   on hover and on keyboard focus within; a click or tap toggles .is-open
   for touch (site/assets/js/main.js on the static pages, React state in
   the CMS's site-nav.tsx). Same file for both, so they cannot drift. */
.navbar__group { position: relative; }
.navbar__group-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
    letter-spacing: .0833333rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
/* chevron, drawn from two borders so it inherits the text colour */
.navbar__group-btn::before {
    content: "";
    order: 2;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease-in-out, margin-top .2s ease-in-out;
}
/* the same green underline the plain links carry */
.navbar__group-btn::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease-in-out;
}
.navbar__group:hover .navbar__group-btn::after,
.navbar__group.is-open .navbar__group-btn::after,
.navbar__group:focus-within .navbar__group-btn::after,
.navbar__group-btn[aria-current="true"]::after { transform: scaleX(1); }
.navbar__group:hover .navbar__group-btn::before,
.navbar__group.is-open .navbar__group-btn::before,
.navbar__group:focus-within .navbar__group-btn::before { transform: rotate(225deg); margin-top: 3px; }

.navbar__sub {
    position: absolute;
    top: 100%;
    left: 4px;
    z-index: 1;
    min-width: 232px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;
}
/* the trigger sits 48px tall inside a 100px bar: bridge the gap so the
   pointer can travel down into the panel without closing it */
.navbar__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.navbar__group:hover .navbar__sub,
.navbar__group.is-open .navbar__sub,
.navbar__group:focus-within .navbar__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.navbar__sub a {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--primary);
    border-radius: var(--radius-sm);
}
.navbar__sub a:hover,
.navbar__sub a:focus-visible { background: var(--muted); color: var(--secondary); }
.navbar__sub a[aria-current="page"] { color: var(--secondary); font-weight: 600; }

/* Hamburger */
.navbar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 12px;
    margin-right: 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.navbar__toggle span { display: block; height: 2px; width: 100%; background: var(--primary); border-radius: 2px; }
@media (min-width: 1000px) {
    .navbar__toggle { display: none; }
}

/* Offcanvas (mobile menu) */
.offcanvas {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
}
.offcanvas.is-open { opacity: 1; visibility: visible; }
.offcanvas__bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85%;
    padding: 25px;
    background: #16222c;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s;
}
.offcanvas.is-open .offcanvas__bar { transform: translateX(0); }
.offcanvas__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 28px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}
.offcanvas__nav {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}
.offcanvas__nav a {
    display: block;
    padding: 10px 8px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #ccc;
    border-radius: var(--radius-sm);
}
.offcanvas__nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.offcanvas__nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); }
/* the same groups, flattened into headed sections — a dropdown inside a
   drawer is two menus deep, so the label is a caption, not a control */
.offcanvas__group + li,
.offcanvas__group + .offcanvas__group { margin-top: 14px; }
.offcanvas__group-label {
    display: block;
    padding: 4px 8px 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.offcanvas__group ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.offcanvas__cta { margin-top: 24px; width: 100%; }
/* the offcanvas is the only nav below 1000px, so the sign-in link lives here too */
.offcanvas__signin {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}
.offcanvas__signin:hover, .offcanvas__signin:focus-visible { color: #fff; text-decoration: underline; }