/* ============================================================
   Jersey Jump — Header
   Sticky on scroll (position: sticky). assets/js/header-scroll.js
   toggles .is-scrolled once the page scrolls past a threshold — used
   here for a subtle shadow and to settle the logo into the header
   (see LOGO below). The header's own height never changes on scroll.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-primary);
  color: var(--color-white);
  transition: box-shadow 0.2s ease, padding-block 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 16px var(--color-black-a15);
}

.header-inner {
  position: relative; /* anchors the absolutely-positioned logo */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* Header height never changes on scroll (matches Heron Lakes — only
     background/shadow change there); whatever height the fluid clamp
     resolves to at the current viewport width is kept as-is. */
  min-height: var(--header-height);
  /* Room for the absolutely-positioned logo on the left, so nav/phone
     don't render underneath it. Scales with the logo's own clamp below. */
  padding-inline-start: clamp(120px, 20vw, 200px);
}

/* ============================================================
   LOGO
   Mobile-first fluid scaling: 100px at mobile up to 170px on
   desktop, overlapping below the header at every size. Only
   .header-logo is positioned (absolute) — .header-logo-img just
   matches its size and flows normally inside it. On scroll, since
   the header itself never resizes, the logo just shrinks to match
   the header's own (unchanged) height and vertically centers —
   settling into the header rather than the header resizing around it.
   ============================================================ */
.header-logo {
  position: absolute;
  top: 10%;
  left: 0;
  width: clamp(100px, 16vw, 170px);
  height: clamp(100px, 16vw, 170px);
  transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, transform 0.2s ease;
}

.header-logo-img {
  width: clamp(100px, 16vw, 170px);
  height: clamp(100px, 16vw, 170px);
  transition: width 0.2s ease, height 0.2s ease;
}

.site-header.is-scrolled .header-logo {
  top: 50%;
  transform: translateY(-50%);
  width: var(--header-height);
  height: var(--header-height);
}

.site-header.is-scrolled .header-logo-img {
  width: var(--header-height);
  height: var(--header-height);
}

.header-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-white);
}

/* ============================================================
   NAV + CTA
   The CTA renders as the last item inside .header-nav so it
   sits flush with the menu, styled as a pill button.
   ============================================================ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  justify-content: center;
}

.main-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-menu .top-level-item > a {
  font-family: var(--font-body);
  color: var(--color-white);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-menu .top-level-item > a:hover,
.main-menu .top-level-item > a:focus-visible {
  color: var(--color-yellow);
}

.main-menu .top-level-item.current-menu-item > a,
.main-menu .top-level-item.current-menu-ancestor > a,
.main-menu .top-level-item.current-menu-parent > a {
  color: var(--color-yellow);
}

/* ============================================================
   DROPDOWN (items with children, e.g. "Rentals") — DESKTOP ONLY
   Shown on hover/focus of the top-level item. The parent link
   itself still navigates normally (e.g. Rentals → Party Rentals) —
   the dropdown is just a quick-links overlay on top. Mobile uses a
   different accordion-style sub-menu — see mobile-menu.css.
   ============================================================ */
@media (min-width: 1025px) {

  .main-menu .top-level-item {
    position: relative;
  }

  .main-menu .has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
  }

  .main-menu .has-children:hover > a::after,
  .main-menu .has-children:focus-within > a::after {
    transform: rotate(-135deg) translateY(2px);
  }

  /* .sub-menu-wrap carries the gap (padding-top) between the parent link
     and the dropdown panel — padding stays part of its own hoverable box
     (unlike margin), so crossing it never drops the hover state. It has
     no background, so the gap reads as transparent — the header shows
     through — while .sub-menu inside keeps the visible white rounded panel. */
  .sub-menu-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }

  .top-level-item:hover > .sub-menu-wrap,
  .top-level-item:focus-within > .sub-menu-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sub-menu {
    min-width: 260px;
    overflow: hidden; /* clips the first/last item's square hover highlight to the panel's rounded corners */
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 12px 28px var(--color-black-a15);
  }

  .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--color-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .sub-menu a:hover,
  .sub-menu a:focus-visible {
    background-color: var(--color-blue-100);
    color: var(--color-primary);
  }

  /* Current page's dropdown item keeps the hover look even without
     hovering, so reopening the dropdown shows where you are. */
  .sub-menu .current-menu-item > a {
    background-color: var(--color-blue-100);
    color: var(--color-primary);
  }

  /* Mobile uses the .sub-menu-toggle button instead (mobile-menu.css) */
  .sub-menu-toggle {
    display: none;
  }

}

/* .header-cta-btn itself carries no visual styles — see .cta-button in
   main.css for that. It's just the hook mobile-menu.css uses to hide
   the header's CTA on mobile and show it inside the full-screen panel. */

/* ============================================================
   PHONE — label above, number below
   ============================================================ */
.header-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  flex-shrink: 0;
  background-color: #013B8D;
  padding: 0.5rem 2.5rem;
  height: var(--header-height);
}

.header-phone-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.header-phone-number {
  font-family: var(--font-accent);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-yellow);
  text-decoration: none;
}

/* ============================================================
   MOBILE HAMBURGER + full-screen panel top row
   Hidden on desktop — mobile-menu.css shows them (and the full
   mobile nav overlay) below the 1024px breakpoint. The duplicate
   logo exists only for that full-screen panel — desktop uses the
   real .header-logo instead.
   ============================================================ */
.mobile-menu-toggle,
.mobile-menu-panel-header {
  display: none;
}