/* ==========================================================================
   components/nav.css — FINAL, SPILL-PROOF (clean merged)
   - Contained surface, no shifting
   - Submenu hover bridge + smooth open/close
   - Tooltip delayed (intentional hover)
   - Hero-Journeys + Perspective can pin-open in-section (JS-driven)
   - Mobile: submenu stacks BELOW trigger, wraps, no overflow
   - MERGED: nav search icon + guaranteed padding (even without .nav-search-input)
   - MERGED: optional .nav-search-btn styling retained
   - MERGED: supports BOTH pinning name conventions:
       body.in-hero-journeys OR body.in-hero-journey
       .is-pinned-herojourneys OR .is-pinned-hero-journey
       plus existing closed toggles
   ========================================================================== */

:root{
  --nav-drop: 20px;
  --brand-baseline: 0px;
  --nav-max: 860px;
  --topbar-clearance: 28px;

  --topbar-radius: 16px;
  --topbar-border: rgba(255,255,255,.06);

  --tooltip-delay: 1s;
}

/* Reserve room below sticky nav so content never crowds submenu */
.topbar + main{
  padding-top: var(--topbar-clearance);
}

/* -------------------------
   Topbar shell
   ------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar,
.topbar .container--topbar,
.topbar-inner{
  overflow: visible;
}

/* -------------------------
   Contained topbar surface (visual bar)
   ------------------------- */
.topbar .container--topbar{
  position: relative;
}

.topbar .container--topbar::before{
  content: "";
  position: absolute;
  z-index: 0;

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background: rgba(7,8,10,.55);
  backdrop-filter: blur(10px);

  border-left: 1px solid var(--topbar-border);
  border-right: 1px solid var(--topbar-border);
  border-bottom: 1px solid var(--line);

  border-bottom-left-radius: var(--topbar-radius);
  border-bottom-right-radius: var(--topbar-radius);

  pointer-events: none;
}

/* -------------------------
   Layout (content)
   ------------------------- */
.topbar-inner{
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: end;

  padding: 18px 0 10px;
  min-width: 0;
}

/* -------------------------
   Brand
   ------------------------- */
.brand-main{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-main .name{
  width: 280px;
  height: 84px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}

.brand-logo{
  width: 100%;
  height: 100%;
  max-height: 100px;
  object-fit: contain;
  object-position: left bottom;
  transform: translate(-28px, var(--brand-baseline)) scale(1.06); /* ← add -4px */
  transform-origin: left bottom;
  filter:
    drop-shadow(0 0 10px rgba(215,188,161,.35))
    brightness(1.18)
    contrast(1.12);
}

/* -------------------------
   Nav row
   ------------------------- */
.navlinks{
  display: flex;
  align-items: center;
  gap: 10px;

  flex-wrap: nowrap;
  min-width: 0;

  color: var(--muted);
  font-size: 13px;

  padding-bottom: var(--nav-drop);
}

/* Links */
.navlinks a{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.navlinks a:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  transform: translateY(-1px);
}

.navlinks a[aria-current="page"]{
  color: var(--text);
  border-color: rgba(215,188,161,.35);
  background: #d7bca11a;
}

/* -------------------------
   Submenu (desktop: absolute pill)
   ------------------------- */
.nav-item.has-submenu{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* caret is markup-based */
.nav-link .nav-caret{
  font-size: 11px;
  margin-left: 6px;
  opacity: .75;
}

/* Invisible hover bridge (desktop only) */
.nav-item.has-submenu::before{
  content:"";
  position:absolute;
  left: -14px;
  right: -14px;
  top: 100%;
  height: 18px;
  background: transparent;
}

/* submenu */
.submenu{
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  z-index: 50;

  display: flex;
  gap: 10px;
  padding: 8px 12px;
  margin-left: -10px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,8,10,.92);
  backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-4px);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear .16s;
}

.nav-item.has-submenu:hover > .submenu,
.nav-item.has-submenu:focus-within > .submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility 0s;
}

/* If a submenu item is current, highlight parent trigger */
.nav-item.has-submenu:has(.submenu a[aria-current="page"]) > .nav-link{
  color: var(--text);
  border-color: rgba(215,188,161,.35);
  background: rgba(215,188,161,.10);
}

/* ==========================================================================
   Tooltips (desktop)
   ========================================================================== */
.navlinks a[data-tip]{
  position: relative;
}

.navlinks a[data-tip]::after{
  content: attr(data-tip);
  position: absolute;

  bottom: calc(100% + 14px);
  left: 0;
  transform: translateY(6px);

  padding: 7px 10px;
  border-radius: 12px;

  background: rgba(12,14,18,.88);
  color: var(--text);

  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 6px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;

  z-index: 200;
}

.navlinks a[data-tip]::before{
  content: "";
  position: absolute;

  bottom: calc(100% + 6px);
  left: 18px;
  transform: translateY(4px);

  width: 0;
  height: 0;

  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(12,14,18,.88);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility 0s linear .14s;

  z-index: 199;
}

.navlinks a[data-tip]:hover::after,
.navlinks a[data-tip]:hover::before,
.navlinks a[data-tip]:focus-visible::after,
.navlinks a[data-tip]:focus-visible::before{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);

  transition:
    opacity .14s ease var(--tooltip-delay),
    transform .14s ease var(--tooltip-delay),
    visibility 0s linear var(--tooltip-delay);
}

/* ======================================================================
   NAV LINK COLOR HARD WALL (beats global link colors everywhere)
   ====================================================================== */

/* Default nav links = muted (never gold) */
.topbar .navlinks a,
.topbar .navlinks a:visited{
  color: var(--muted) !important;
  text-decoration: none;
}

/* Hover/focus = white */
.topbar .navlinks a:hover,
.topbar .navlinks a:focus-visible{
  color: var(--text) !important;
  text-decoration: none;
}

/* Current page = white */
.topbar .navlinks a[aria-current="page"]{
  color: var(--text) !important;
}

/* Submenu links follow same rules */
.topbar .submenu a,
.topbar .submenu a:visited{
  color: var(--muted) !important;
}

.topbar .submenu a:hover,
.topbar .submenu a:focus-visible{
  color: var(--text) !important;
}

/* Brand link never turns gold */
.topbar .brand-main a,
.topbar .brand-main a:visited{
  color: var(--text) !important;
}

/* ==========================================================================
   Search (desktop inline)
   ========================================================================== */
.nav-search{
  display: flex;
  align-items: center;
  gap: 10px;

  margin-left: auto;
  flex: 0 0 auto;
  min-width: 0;

  position: relative; /* for icon */
}

.nav-search-input{
  width: clamp(160px, 14vw, calc(260px - 10ch));
  min-width: 160px;

  padding: 9px 12px;
  padding-left: 34px; /* room for icon (class-based) */

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 13px;
}

/* Optional: if you ever add a nav search button */
.nav-search-btn{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* force dark (prevents page bleed) */
.topbar .nav-search .nav-search-input,
.topbar .nav-search input[type="search"]{
  background: rgb(10,12,16);
  color: rgba(232,237,245,.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* MERGED: guarantee icon spacing even if input lacks .nav-search-input */
.topbar .nav-search .nav-search-input,
.topbar .nav-search input[type="search"]{
  padding-left: 34px;
  box-sizing: border-box;
}

.topbar .nav-search .nav-search-input::placeholder,
.topbar .nav-search input[type="search"]::placeholder{
  color: rgba(232,237,245,.45);
}

.topbar .nav-search .nav-search-input:focus,
.topbar .nav-search input[type="search"]:focus{
  outline: none;
  border-color: rgba(232,237,245,.35);
  box-shadow: 0 0 0 3px rgba(232,237,245,.06);
}

.topbar .nav-search{ color-scheme: dark; }

/* search icon */
.topbar .nav-search::after{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 14px;
  height: 14px;

  background-color: rgba(255,255,255,.92);
  opacity: .95;
  pointer-events: none;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.293 14.293l4.707 4.707a1 1 0 001.414-1.414l-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.293 14.293l4.707 4.707a1 1 0 001.414-1.414l-4.707-4.707A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Pinned-open submenus (desktop, JS-driven)
   - Supports BOTH naming conventions so you can’t silently break pinning
   ========================================================================== */

/* Perspective pinned open */
body.in-perspective:not(.persp-menu-closed)
  .nav-item.has-submenu.is-pinned-perspective
  > .submenu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: opacity .16s ease, transform .16s ease, visibility 0s !important;
}

/* Hero-Journeys pinned open (plural convention) */
body.in-hero-journeys:not(.hj-menu-closed)
  .nav-item.has-submenu.is-pinned-herojourneys
  > .submenu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: opacity .16s ease, transform .16s ease, visibility 0s !important;
}

/* Hero-Journey pinned open (singular convention) */
body.in-hero-journey:not(.hj-menu-closed)
  .nav-item.has-submenu.is-pinned-hero-journey
  > .submenu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: opacity .16s ease, transform .16s ease, visibility 0s !important;
}

/* ==========================================================================
   Responsive behavior
   ========================================================================== */

@media (max-width: 980px){
  .navlinks{
    flex-wrap: wrap;
    padding-bottom: 0;
    max-width: var(--nav-max);
  }

  .navlinks > .nav-item,
  .navlinks > .nav-link{
    order: 1;
  }

  .nav-search{
    order: 2;
    width: 100%;
    max-width: var(--nav-max);
    margin: 8px auto 0;
  }

  .nav-search-input{
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 860px){
  .topbar-inner{
    grid-template-columns: 1fr;
    row-gap: 10px;
    align-items: start;
  }

  /* Center the brand/logo when the nav stacks */
  .brand-main{
    justify-content: center;
  }

  .brand-main .name{
    width: min(360px, 82vw);
    height: 84px;
  }

  .brand-logo{
    object-position: center bottom;
    transform-origin: center bottom;
  }
}

@media (max-width: 700px){
  /* keep rows from being constrained in narrow layouts */
  .navlinks,
  .nav-search{
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .brand-main .name{
    width: auto;
    max-width: 68vw;
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-main{ justify-content: center; }
  .brand-logo{ object-position: center bottom; transform-origin: center bottom; }
  .brand-logo{ max-width: 100%; }

  .navlinks a{ padding: 7px 10px; }

  .nav-search,
  .nav-search-input{
    width: 100%;
    min-width: 0;
  }

  /* Hide submenu containers */
  .nav-item.has-submenu > .submenu{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Remove caret indicator since submenu no longer exists */
  .nav-link .nav-caret{
    display: none;
  }

  /* Also neutralize pinned-menu overrides */
  body.in-perspective
    .nav-item.has-submenu.is-pinned-perspective
    > .submenu,
  body.in-hero-journeys
    .nav-item.has-submenu.is-pinned-herojourneys
    > .submenu,
  body.in-hero-journey
    .nav-item.has-submenu.is-pinned-hero-journey
    > .submenu{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }
}

@media (max-width: 420px){
  .nav-search-input{
    width: 100%;
  }
}

@media (max-width: 360px){
  .brand-main .name{ max-width: 62vw; }
  .navlinks a{ padding: 6px 9px; }
}

/* ==========================================================================
   MOBILE SUBMENUS — STACK BELOW (no side overflow)
   - Critical fix for your “refuses to shrink” offender
   ========================================================================== */
@media (max-width: 700px){

  /* Tooltips off (they can contribute to overflow + are annoying on touch) */
  .navlinks a[data-tip]::before,
  .navlinks a[data-tip]::after{
    display: none !important;
  }

  /* Hover bridge off */
  .nav-item.has-submenu::before{ display: none; }

  /* Make submenu host take full row so submenu sits UNDER it */
  .nav-item.has-submenu{
    display: block;     /* overrides inline-flex */
    width: 100%;
    min-width: 0;
  }

  /* Keep trigger looking like a pill (don’t force full width) */
  .nav-item.has-submenu > .nav-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
  }

  /* Submenu becomes in-flow panel BELOW trigger */
  .nav-item.has-submenu > .submenu{
    position: static;   /* key: below, not absolute */
    left: auto;
    top: auto;

    width: 100%;
    max-width: 100%;
    margin: 6px 0 0;
    margin-left: 0;

    padding: 8px 10px;
    border-radius: 14px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    transform: none;

    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .16s ease, visibility 0s linear .16s;
  }

  /* Open on focus-within (tap) or hover (if device emulates hover) */
  .nav-item.has-submenu:hover > .submenu,
  .nav-item.has-submenu:focus-within > .submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .16s ease, visibility 0s;
  }

  /* Submenu links can break/wrap */
  .submenu a{
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 7px 10px;
    border-radius: 999px;
  }

}