/* Site integration for the Happy Boy functions landing page (ENG-839).
   lp.css / lp-thanks.css are Merge Digital's files and are left untouched;
   everything that ties the page into the Statamic site lives here. */

/* The site header (partials/_nav) is 96px + 16px padding on mobile and
   84px + 16px from the `sm` breakpoint. The sticky section bar sits under it. */
#esv-hb { --site-header-h: 112px; }
@media (min-width: 640px) {
  #esv-hb { --site-header-h: 100px; }
}

/* The site's global .button and .link component classes share names with the
   landing page's. Where the site adds properties the landing page does not
   set, restore the values from Merge Digital's staging build. */
#esv-hb .button { line-height: 1.65; }
#esv-hb .link { display: inline; font-size: inherit; box-sizing: border-box; }

/* @tailwindcss/forms sets appearance:none on selects and draws its own arrow
   with a background-image that lp.css then overrides, leaving no arrow at all.
   Use the native control, as on staging. */
#esv-hb .field select { appearance: auto; }

/* Statamic form validation feedback */
#esv-hb .form-alert {
  background: #FDECEC; color: #8A1C1C; border: 1px solid #F3B4B4; border-radius: var(--radius, 4px);
  padding: .75rem 1rem; font-size: .9rem; margin-bottom: 1.25rem;
}
#esv-hb .field--error input, #esv-hb .field--error select, #esv-hb .field--error textarea { border-color: #C62828; }
#esv-hb .field__error { color: #C62828; font-size: .8rem; margin: .35rem 0 0; }
#esv-hb .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#esv-hb #submit-btn[disabled] { opacity: .7; cursor: progress; }

/* Transparent site header over the hero (partials/_nav yields
   transparent_header for this page). The header leaves the flow and overlays
   the page; it is transparent with light text until the page is scrolled or
   the mobile menu opens. */
#primary-nav.header-overlay { position: fixed; }
#primary-nav.header-overlay nav { transition: background-color .3s ease, color .3s ease; }
#primary-nav.header-overlay .nav-logo img { transition: filter .3s ease; }
#primary-nav.header-overlay--transparent nav { background-color: transparent; color: #fff; }
#primary-nav.header-overlay--transparent .nav-link { color: #fff; }
#primary-nav.header-overlay--transparent .nav-link:hover { border-color: #fff; }
#primary-nav.header-overlay--transparent .nav-logo img { filter: invert(1); }
#primary-nav.header-overlay--transparent nav button { color: #fff !important; } /* the menu button sets its colour with !important */
#primary-nav.header-overlay--transparent nav button:hover { background-color: transparent; }
#esv-hb .hero { min-height: 100svh; }

/* The section bar is hidden while the hero is on screen and slides in under
   the site header once the hero has scrolled past (the page script toggles
   .scrolled). Fixed rather than sticky so it never sits at the foot of the
   first screen. */
#esv-hb .nav {
  position: fixed; left: 0; right: 0; top: var(--site-header-h, 0px); z-index: 40;
  transform: translateY(-110%); opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .25s ease, background-color .3s ease, box-shadow .3s ease;
}
#esv-hb .nav.scrolled { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  #esv-hb .nav { transition: none; }
}

/* Section bar lockup: align the bar's container with the site header
   container (max-w-7xl with px-4 / sm:px-6 / lg:px-8) so the links start
   under the logo and Enquire sits under Book. The page's own content width is
   Merge Digital's and is left as delivered. */
#esv-hb .nav .container { max-width: 80rem; padding: 0 1rem; }
@media (min-width: 640px) { #esv-hb .nav .container { padding: 0 1.5rem; } }
@media (min-width: 1124px) { #esv-hb .nav .container { padding: 0 2rem; } }

/* ---- Typography consistency (feedback from Kate, 2026-10-06) ----
   The landing page is pulled onto the site's type: section-bar links use the
   site nav-link style, button text uses the site button text, and the small
   eyebrow labels use the site's heading tracking and semibold weight. Button
   shapes and the page's content width are Merge Digital's and are left as
   delivered. */
#esv-hb .nav .nav__links a { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.75; }
#esv-hb .button, #esv-hb .button.big, #esv-hb .nav .button { font-weight: 500; letter-spacing: 0; font-size: 1rem; line-height: 1.75; }
#esv-hb .button.big { font-size: 1.125rem; }
#esv-hb .nav .button { font-size: .875rem; }
#esv-hb .flair, #esv-hb .stats__lbl, #esv-hb .space__cap, #esv-hb .menu__eyebrow, #esv-hb .menu__badge,
#esv-hb .venue__cuisine, #esv-hb .detail h3, #esv-hb .card h3, #esv-hb .hero__proof, #esv-hb .card__privacy { letter-spacing: .05em; }
#esv-hb .space__cap, #esv-hb .menu__eyebrow, #esv-hb .venue__cuisine, #esv-hb .detail h3 { font-weight: 600; }

/* Button shape: the site has two shapes, the circular Book in the header and
   the 4px-radius standard button. The bar's pill Enquire is dropped onto the
   standard shape so the landing page does not add a third. */
#esv-hb .nav .button--pill { border-radius: 4px; }

/* Mobile section bar: the links scroll sideways by design, but at the site
   nav-link size they clipped behind Enquire. Smaller links on small screens,
   tighter spacing, and a fade on the right edge to show there is more. */
@media (max-width: 639px) {
  #esv-hb .nav .nav__links a { font-size: .9375rem; }
  #esv-hb .nav .nav__links { gap: 1rem; padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
}

/* ---- Container width (feedback from Kate, 2026-10-07) ----
   Merge's content width (1180px) is narrower than the site's, so sections
   did not line up with the header. All landing-page containers now use the
   site container (max-w-7xl with px-4 / sm:px-6 / lg:px-8). The section bar
   uses the same container, so on desktop its links start under the logo and
   Enquire finishes under Book. */
#esv-hb .container { max-width: 80rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { #esv-hb .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1124px) { #esv-hb .container { padding-left: 2rem; padding-right: 2rem; } }

/* Breathing room between the hero's proof line and the stats band. In
   Merge's layout the section bar sat between them; now that the bar is
   fixed, the stats follow the hero directly. (The hero keeps its own bottom
   padding: the container rule above only touches horizontal padding.) */
#esv-hb .stats { padding-top: 2.5rem; }

/* Close the hairline that can show between the fixed site header and the
   section bar on fractional header heights or page zoom: the bar extends its
   own background 1px upward. */
#esv-hb .nav.scrolled::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: inherit;
}

/* ---- Header swap (feedback from Kate, 2026-10-07) ----
   Once the hero scrolls away the site header itself swaps its links and
   call to action for the section links and Enquire (see partials/_nav and
   the header_swap_* yields in the functions template). Merge's separate
   section bar is therefore no longer shown; the rules for it above are kept
   only so it can be brought back by deleting this one. */
#esv-hb .nav { display: none !important; }

/* Header swap transition: the outgoing links/CTA blur out and slide away,
   the incoming ones blur in from the opposite side, in the direction of
   travel (down past the hero, up back into it). Both states share one grid
   cell so the header never reflows during the swap. */
#primary-nav .nav-swap-stage { display: grid; align-items: center; }
#primary-nav .nav-swap-stage > * { grid-area: 1 / 1; }
#primary-nav .flex.nav-swap-stage { justify-items: end; }
#primary-nav .flex.nav-swap-stage > * { margin-left: 0; }
#primary-nav .nav-swap-transition { transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease; will-change: opacity, transform, filter; }
#primary-nav .nav-swap-enter-from, #primary-nav .nav-swap-leave-to { opacity: 0; filter: blur(8px); }
#primary-nav .nav-swap-enter-to, #primary-nav .nav-swap-leave-from { opacity: 1; filter: blur(0); transform: none; }
#primary-nav[data-swap-dir="down"] .nav-swap-enter-from { transform: translateY(16px); }
#primary-nav[data-swap-dir="down"] .nav-swap-leave-to { transform: translateY(-16px); }
#primary-nav[data-swap-dir="up"] .nav-swap-enter-from { transform: translateY(-16px); }
#primary-nav[data-swap-dir="up"] .nav-swap-leave-to { transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  #primary-nav .nav-swap-transition { transition: opacity .2s ease; }
  #primary-nav .nav-swap-enter-from, #primary-nav .nav-swap-leave-to { transform: none; filter: none; }
}

/* ---- Mobile section strip (feedback from Kate, 2026-10-08) ----
   On small screens the header keeps its hamburger, so once the hero has
   scrolled away a slim strip of the section links sits under the header
   (dark, brand-coloured links, scrolls sideways if it has to). Desktop keeps
   the in-header swap. Uses the same slide/blur transition as the swap. */
#primary-nav .header-subnav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--theme-foreground-color); padding: .6rem 1rem;
}
#primary-nav .header-subnav__links {
  display: flex; justify-content: safe center; align-items: center; gap: 1.5rem;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#primary-nav .header-subnav__links::-webkit-scrollbar { display: none; }
#primary-nav .header-subnav .nav-link {
  color: var(--primary-color); font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  line-height: 1.4; border: 0; flex: none;
}
@media (min-width: 1124px) { #primary-nav .header-subnav { display: none !important; } }