/* Cape Landscapes site nav (2026-09-12). One nav for every interior page, matching the homepage:
   see-through over the hero with a Deep Navy fade at the top, Footer Blue at 95% once the hero scrolls out
   (or from the top on pages with no hero), horizontal logo over the hero, stacked logo on the solid bar.
   Loaded by every interior page after cape-interior-drafts.css. The homepage carries the same rules inline. */

:root { --nav-gutter: clamp(24px, 5.8vw, 108px); }

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  /* Proportional nav fill (Bethany 2026-09-14): --nav-fill is set by cape-nav.js on scroll,
     0 at the top of a hero page to 1 once the hero's bottom reaches the nav's bottom edge.
     No CSS transition here: the JS already drives this every scroll frame (rAF-throttled),
     and a transition on top of that would lag behind the scroll position. */
  background: rgba(34, 69, 100, var(--nav-fill, 0));
  box-shadow: 0 6px 22px rgba(9, 35, 57, calc(var(--nav-fill, 0) * .2));
}
.site-header.no-hero { position: sticky; }
.site-header.no-hero.is-condensed { background: #224564; box-shadow: 0 6px 22px rgba(9, 35, 57, .2); } /* pages with no hero (service page mocks, About, Contact): bar always fully solid (Bethany 9/13) */

.nav-shell {
  width: calc(100% - 2 * var(--nav-gutter));
  min-height: 64px;
  margin-inline: auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* logo: horizontal over the hero, stacked once the bar is solid */
.brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.brand img { display: block; width: 300px; height: auto; }
/* Stacked bold logo always, on every page, no swap on scroll (Bethany 2026-09-14, matches the homepage).
   Specificity note: ".brand img" (class+type) outranks a single ".brand-orange"/".brand-stacked" class,
   so these use ".brand .brand-orange"/".brand .brand-stacked" (two classes) to win over it. */
.brand .brand-orange { display: none; }
.brand .brand-stacked { display: block; width: auto; height: 48px; }

/* links */
.nav { display: flex; align-items: center; gap: 34px; }
.nav > a,
.nav-dropdown summary {
  position: relative;
  color: var(--site-white); /* white (Bethany 9/12 late); was #fff4ee at 90% */
  opacity: 1;
  font: 400 15.5px/1.2 "Jost", Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0; /* square hover box (Bethany 9/12 late) */
  padding: 8px 14px;
  margin: -8px -14px;
  cursor: pointer;
  list-style: none;
  overflow: hidden; isolation: isolate; /* clips the hover wipe to the pill */
  transition: color 400ms ease;
  -webkit-font-smoothing: antialiased;
}
/* hover = deep orange wipe filling the pill from the top, text turns white (Bethany 9/12 late) */
.nav > a::before, .nav-dropdown summary::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: -1;
  background: #DE4A18; transition: height 400ms ease; /* 9/28 (Bethany): the nav hover wipe stays the original #DE4A18, same as the card wipes */
}
.nav > a:hover::before, .nav > a:focus-visible::before,
.nav-dropdown[open] summary::before, .nav-dropdown:hover summary::before, .nav-dropdown:focus-within summary::before { height: 100%; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav > a:hover, .nav > a:focus-visible,
.nav-dropdown[open] summary, .nav-dropdown:hover summary, .nav-dropdown:focus-within summary {
  color: var(--site-white);
  opacity: 1;
}

/* current page: an outline the size of the hover box, nothing else changes (Bethany 9/12 late) */
.nav > a[aria-current="page"],
.nav-dropdown:has(a[aria-current="page"]) summary { box-shadow: inset 0 0 0 2px #CB4215; }
.nav-dropdown-menu a[aria-current="page"] strong { text-decoration: underline; text-decoration-color: #F35B1F; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* the current page keeps the row's white text and carries a bright orange underline; the deep-orange text was too dark on the blue-gray panel (Bethany 10/7, from her phone; first set 9/12 late) */

/* the current page's link does not fill on hover: outline only, text stays (Bethany 9/13) */
.nav > a[aria-current="page"]:hover::before, .nav > a[aria-current="page"]:focus-visible::before,
.nav-dropdown:has(a[aria-current="page"]):hover summary::before, .nav-dropdown:has(a[aria-current="page"])[open] summary::before, .nav-dropdown:has(a[aria-current="page"]):focus-within summary::before { height: 0; }
.nav > a[aria-current="page"]:hover, .nav > a[aria-current="page"]:focus-visible,
.nav-dropdown:has(a[aria-current="page"]):hover summary, .nav-dropdown:has(a[aria-current="page"])[open] summary, .nav-dropdown:has(a[aria-current="page"]):focus-within summary { color: var(--site-white); }

/* dropdown panel */
.nav-dropdown { position: relative; }
.nav-dropdown::details-content { content-visibility: visible; }
.nav-dropdown-menu { /* square white panel hanging off the orange box (Bethany 9/12 late) */
  position: absolute;
  top: calc(100% + 14px); /* 8px = the title box's overhang (negative margin) + a 6px gap; the ::before bridge keeps hover alive across it */
  left: -14px;
  z-index: 1;
  width: max-content;
  min-width: 250px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: var(--site-white);
  box-shadow: 0 18px 40px rgba(12, 26, 43, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.nav-dropdown-menu::before { content: ""; position: absolute; top: -16px; right: 0; left: 0; height: 16px; }
.nav-dropdown[open] .nav-dropdown-menu, .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (hover: hover) and (min-width: 701px) {
  .nav-dropdown:focus-within:not(:hover):not([open]) .nav-dropdown-menu { opacity: 0; pointer-events: none; transform: translateY(-7px); }
  .nav-dropdown:focus-within:not(:hover):not([open]) summary { background: none; color: var(--site-white); }
}
.nav-dropdown-menu a { display: block; padding: 11px 18px; border-radius: 0; text-decoration: none; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: #F9D8C2; }
.nav-dropdown-menu a strong { display: block; color: #172D4A; font: 500 15px/1.3 "Jost", Arial, sans-serif; letter-spacing: .01em; }

/* the fade the nav sits on, at the top of the page hero (same image the homepage uses) */
.page-banner::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  background: url("photos/hero-v2/nav-overlay-deepest.png") top center / 100% 100% no-repeat; /* #0C1A2B, same file as the homepage (Bethany 9/12 late) */
}

/* mobile */
.menu-button { display: none; width: 46px; height: 46px; border: 0; background: transparent; color: #fff4ee; cursor: pointer; }
.menu-button span { display: block; width: 26px; height: 2px; margin: 6px auto; background: currentColor; }
@media (max-width: 820px) {
  .menu-button { display: block; position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 28px;
    background: rgba(34, 69, 100, .98);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 200ms ease;
  }
  .nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
  .nav > a, .nav-dropdown summary { font-size: 22px; margin: 0; padding: 6px 11px; }
  .nav-dropdown { text-align: center; }
  .nav-dropdown-menu {
    position: static; width: min(330px, 80vw); margin: 14px auto 0; padding: 6px;
    background: color-mix(in srgb, var(--site-white) 8%, transparent); border-color: color-mix(in srgb, var(--site-white) 34%, transparent);
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    display: none; opacity: 1; pointer-events: auto; transform: none;
  }
  .nav-dropdown[open] .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { justify-content: center; text-align: center; }
  .nav-dropdown-menu a strong { color: var(--site-white); font-size: 17px; }
  .nav-dropdown-menu a:hover strong, .nav-dropdown-menu a:focus-visible strong { color: #172D4A; } /* 10/7: on the peach hover row the white phone-menu text was unreadable; navy like desktop */
  .brand img { width: 220px; }
  .brand .brand-stacked { height: 40px; } /* 10/7 (Bethany): two classes so it beats the 48px base rule; was ".brand-stacked", which never applied */
}