/**
 * JS Nav widget.
 *
 * The site header: a logo, the primary navigation, and an optional CTA button.
 *
 * Desktop (>1024) is the Figma "Navigation - Desktop" frame (21927:4611): a
 * white bar with the 150x56 logo hard left and the uppercase links hard right,
 * and the CTA (hidden by default in the design, hence the Show CTA toggle)
 * after them. The bar carries no padding of its own — the Elementor container
 * the nav sits in owns the gutters, matching the design's 28px/120px.
 *
 * At/below 1024 the links + CTA collapse behind a hamburger into the rounded
 * white panel from the tablet (22954:16651) and mobile (22954:16645) frames —
 * 0.5px border, 16px radius, 16px padding, 20px gap, with the CTA full-width at
 * the bottom. The panel is held off the viewport edges by --js-nav-panel-gap
 * (32px tablet, 16px mobile), which is what makes it 704px wide at 768 and
 * 343px at 375, matching both frames exactly.
 *
 * Colours come from the child theme's shared tokens (custom.css) with the Figma
 * values inlined as fallbacks, and are overridable per instance from the Style
 * controls.
 */

/* Full width by default: as an item in an Elementor flex container a widget
   shrinks to its content width, which would leave the bar narrower than the
   page. Force it to the container's full width so the nav spans edge to edge. */
.elementor-widget-js_nav {
  width: 100%;
  max-width: 100%;
}

.js-nav {
  --js-nav-bg: var(--js-color-white, #ffffff);
  --js-nav-link: var(--js-color-text, #475569);
  --js-nav-link-hover: var(--js-color-highlight, #b28b2c);
  --js-nav-link-active: var(--js-color-highlight, #b28b2c);
  --js-nav-panel-bg: var(--js-color-white, #ffffff);
  --js-nav-panel-border: var(--js-color-border, #b0bed2);
  --js-nav-toggle: var(--js-color-primary, #111827);
  /* Side gap for the collapsed panel: 32px tablet, 16px mobile (below). */
  --js-nav-panel-gap: 32px;
  /* The bar carries the header's height itself rather than being padded to it
     by the container it sits in. The panel hangs from the bar, so any vertical
     padding on that container sat between the two and the panel opened inside
     the header instead of below it — invisible while both are white, and a
     visible seam the moment the header takes a background or a border. Owning
     the height here keeps the two edges the same edge. */
  --js-nav-bar-height: 112px;

  position: relative;
  display: block;
  width: 100%;
  background: var(--js-nav-bg);
  font-family: "Inter", sans-serif;
  /* Kill the translucent tap flash on mobile. */
  -webkit-tap-highlight-color: transparent;
}

.js-nav *,
.js-nav *::before,
.js-nav *::after {
  box-sizing: border-box;
}

.js-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -------- Bar: the always-visible row -------- */
/* No padding here on purpose: spacing is handled by the Elementor container
   the nav sits in (or by the widget's own Padding control), so a header
   template can control its own gutters without fighting the stylesheet. */
.js-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--js-nav-bar-height);
}

/* -------- Logo -------- */
.js-nav__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}

.js-nav__logo-img {
  display: block;
  width: 150px; /* overridden by the Logo Width control */
  height: auto;
  max-width: 100%;
}

/* -------- Links -------- */
.js-nav__list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.js-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--js-nav-link);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* A row with Link Source: None renders as plain text, not a link. */
span.js-nav__link {
  cursor: default;
}

@media (hover: hover) {
  a.js-nav__link:hover {
    color: var(--js-nav-link-hover);
  }
}

a.js-nav__link:focus-visible {
  outline: 2px solid var(--js-nav-link-active);
  outline-offset: 4px;
  border-radius: 2px;
}

.js-nav__link[aria-current="page"] {
  color: var(--js-nav-link-active);
}

/* -------- Hamburger (hidden on desktop) -------- */
.js-nav__toggle {
  display: none;
}

/* ================================================================
   Desktop ( > 1024px )
   ================================================================ */
@media (min-width: 1025px) {
  /* The panel is an inline flex row on desktop: links, then the CTA. */
  .js-nav__panel {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    min-width: 0;
    /* Gutter on the logo side only: the right-hand edge is the container's,
       so the last link ends flush with it rather than 32px short. */
    padding-inline: 32px 0;
  }

  /* Same reason, for the link's own 8px side padding: keep it between the
     links, drop it after the last one. */
  .js-nav__item:last-child .js-nav__link {
    padding-right: 0;
  }

  /* Figma sits the link row 6px below the logo's optical centre (the links
     frame is bottom-aligned against the 56px-tall script logo). Reproduced as
     an offset so it stays adjustable rather than baked into the layout. */
  .js-nav__list {
    transform: translateY(var(--js-nav-menu-offset, 6px));
  }

  .js-nav__panel .js-cta {
    flex: 0 0 auto;
  }

  /* The desktop bar carries the logo and the links and nothing else
     (21927:4611). A CTA turned on for the tablet and mobile panel would
     otherwise land in that row too, so it stays out unless Also Show on
     Desktop says otherwise. */
  .js-nav__panel .js-nav__cta:not(.js-nav__cta--desktop) {
    display: none;
  }
}

/* ================================================================
   Tablet + mobile ( <= 1024px ): hamburger + panel
   ================================================================ */
@media (max-width: 1024px) {
  .js-nav {
    --js-nav-bar-height: 88px;
  }

  /* Two classes (0,2,0) so the toggle's own colour outranks the theme's
     button:hover (0,1,1) — the bars below are drawn from currentColor. */
  .js-nav .js-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: 0;
    border: 0;
    background: none;
    color: var(--js-nav-toggle);
    cursor: pointer;
  }

  /* The frames put the hamburger icon's right edge on the container's gutter
     (menu button at x=335 in a 375 frame, x=712 in a 768 one). The button is
     44x44 rather than the icon's 24 — a touch target below 44 is the wrong
     thing to shrink on the device that needs it most — so it carries 10px of
     padding around the icon, which would otherwise hold the icon 10px short of
     that edge. The negative margin gives the button back only that padding, so
     the icon lands where the design draws it and the target keeps its size. */
  .js-nav .js-nav__toggle {
    margin-right: -10px;
  }

  .js-nav__toggle:focus-visible {
    outline: 2px solid var(--js-nav-link-active);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .js-nav__bars {
    position: relative;
    display: block;
    width: 24px;
    height: 16px;
  }

  .js-nav__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
  }

  .js-nav__bars span:nth-child(1) {
    top: 0;
  }
  .js-nav__bars span:nth-child(2) {
    top: 7px;
  }
  .js-nav__bars span:nth-child(3) {
    top: 14px;
  }

  /* Hamburger -> X while the panel is open. */
  .js-nav.is-open .js-nav__bars span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .js-nav.is-open .js-nav__bars span:nth-child(2) {
    opacity: 0;
  }
  .js-nav.is-open .js-nav__bars span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  /* The panel: a rounded white card spanning the viewport width, held off the
     edges by --js-nav-panel-gap. Absolute (not fixed) so it follows a sticky
     nav instead of detaching from it and survives a transformed sticky
     ancestor; JS expands left/width to the full span on open, so the width
     here is the no-JS fallback. */
  .js-nav__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: var(--js-nav-panel-gap, 32px);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(704px, calc(100vw - 2 * var(--js-nav-panel-gap, 32px)));
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    padding: 16px;
    background: var(--js-nav-panel-bg);
    border: 0.5px solid var(--js-nav-panel-border);
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(17, 24, 39, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .js-nav.is-open .js-nav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  /* Stacked link rows: 20px tall on a 20px gap, per both frames. Rows are
     left-aligned and full width, so align-items from the desktop row layout
     must be reset — otherwise each row centres on its own text. */
  .js-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .js-nav__item {
    display: block;
    width: 100%;
  }

  .js-nav__link {
    display: flex;
    width: 100%;
    min-height: 20px;
    padding: 0;
    line-height: 20px;
  }

  /* CTA sits full-width at the bottom of the panel. */
  .js-nav__panel .js-cta {
    display: flex;
    width: 100%;
  }
}

/* Mobile: tighten the panel's side gap to 16px (tablet keeps 32px). */
@media (max-width: 767px) {
  .js-nav {
    --js-nav-panel-gap: 16px;
    --js-nav-bar-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-nav__bars span,
  .js-nav__panel,
  .js-nav__link {
    transition: none;
  }
}