/* =====================================================================
   Header + hero — rebuilt to match the live 5horof.com layout.
   The header does not sit above the video, it sits ON it: utility row,
   then logo / centred menu / Shop Online pill, then the centred hero.
   Everything below is the V1 arrangement; what is new is that the bar
   turns into a solid sticky one once you scroll past the hero, and the
   same component also works on the inner pages (where there is no video).
   ===================================================================== */

/* ---------- the bar ---------- */
.site-head { position: relative; z-index: 40; background: var(--navy-900); }

/* On a page with a hero the bar is transparent and overlays the video. */
.site-head--over { position: absolute; inset-inline: 0; top: 0; background: transparent; }

/* Once the hero has scrolled away it re-attaches to the top of the window.
   Without this the menu is unreachable for the whole rest of a long page. */
.site-head--stuck {
  position: fixed; inset-inline: 0; top: 0;
  background: rgba(7, 20, 38, .96);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  transform: translateY(0);
  transition: transform .3s var(--ease);
}
.site-head--stuck .head-top { display: none; }
.site-head--stuck .head-nav__in { min-height: 66px; }
.site-head--stuck .head-brand img { height: 46px; }

/* Reading direction decides whether the bar is there at all: scrolling down is
   reading, so the bar gets out of the way; scrolling up is looking for something,
   which on a long page almost always means the menu. On a phone that hands about
   66px of screen back to the content on every downward scroll. */
.site-head--stuck.site-head--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .site-head--stuck { transition: none; } }

/* ---------- utility row ---------- */
.head-top { padding-block: .8rem; font-size: .93rem; color: #fff; }
.head-top__in { display: flex; align-items: center; gap: clamp(1rem, 4vw, 3.5rem); flex-wrap: wrap; }
.head-top a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 500; }
.head-top a:hover { color: var(--yellow); }
.head-top svg { width: 1.15em; height: 1.15em; flex: none; }
@media (max-width: 1199px) { .head-top { display: none; } }

/* ---------- logo / menu / shop ---------- */
.head-nav__in { display: flex; align-items: center; gap: 1rem; min-height: 88px; }
.head-brand { flex: none; display: inline-flex; align-items: center; }
.head-brand img { height: 72px; width: auto; transition: height .2s var(--ease); }
@media (max-width: 767px) { .head-brand img { height: 52px; } }

.menu { display: none; }
@media (min-width: 1200px) {
  /* auto margins on both sides is what actually centres the menu between
     the logo and the Shop button, whatever width the logo happens to be */
  .menu { display: flex; align-items: center; gap: .1rem; margin-inline: auto; }
}
.menu__item { position: relative; }
.menu__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .6rem 1.1rem; border-radius: 8px;
  color: #fff; font-size: .98rem; font-weight: 500; white-space: nowrap;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.menu__link:hover, .menu__item:hover > .menu__link { color: var(--yellow); }
.menu__link[aria-current="page"] { color: var(--yellow); font-weight: 600; }
.menu__caret { width: .62em; height: .62em; opacity: .8; transition: transform .18s var(--ease); }
.menu__item:hover .menu__caret { transform: rotate(180deg); }

.menu__drop {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 15.5rem;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .45rem; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* a small invisible bridge, so the menu doesn't close in the gap under the link */
.menu__item::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 10px; }
.menu__item:hover .menu__drop, .menu__item:focus-within .menu__drop {
  opacity: 1; visibility: visible; transform: none;
}
.menu__drop a {
  display: block; padding: .62rem .8rem; border-radius: 7px;
  font-size: .93rem; color: var(--ink); white-space: nowrap;
}
.menu__drop a:hover { background: var(--blue-50); color: var(--brand); }

.btn-shop {
  /* Below 1200px the menu is gone, so nothing is pushing this to the right —
     the auto margin does it. Above 1200px the menu's own auto margins already do. */
  flex: none; display: none; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border-radius: 30px;
  padding: .82rem 1.5rem; font-size: .9rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 31, 154, .35);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
@media (min-width: 992px)  { .btn-shop { display: inline-flex; } }
.btn-shop:hover { background: var(--brand-2); color: #fff; transform: translateY(-2px); }

/* the single auto margin that holds the trailing group against the edge */
.head-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; flex: none; }

/* ---------- language switch (phones and tablets) ----------
   Above 1200px this lives in the utility row; below it, the utility row is gone,
   so it appears here instead. It is never absent. */
.head-lang {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px; padding-inline: .85rem;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff;
  font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.head-lang:hover { color: var(--yellow); border-color: rgba(255,255,255,.55); }
.head-lang svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 1200px) { .head-lang { display: none; } }
@media (max-width: 420px)  { .head-lang span { display: none; } }

/* ---------- burger ---------- */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(255,255,255,.35); border-radius: 10px;
  background: rgba(255,255,255,.08); cursor: pointer;
}
@media (min-width: 1200px) { .burger { display: none; } }
.burger span { display: block; width: 19px; height: 2px; background: #fff; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: #fff;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden; background: var(--navy-900);
}
.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Flat 50% black, exactly as the live site — it is what makes white text
   readable over a moving picture. The extra gradient at the top is only
   there so the menu keeps its contrast on a bright frame. */
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.5); }
.hero__scrim::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 320px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}

.hero__in {
  position: relative; z-index: 3;
  width: 100%; max-width: 900px; margin-inline: auto;
  padding-inline: var(--gut);
  padding-block: clamp(9rem, 16vh, 12rem) clamp(3rem, 8vh, 5rem);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: clamp(.95rem, 1.5vw, 1.05rem); font-weight: 500; color: #fff;
  margin-bottom: 1.1rem;
}
.hero__badge svg { width: 1.1em; height: 1.1em; color: var(--yellow); flex: none; }
.hero h1 {
  font-size: clamp(1.85rem, 5vw, 3.1rem); font-weight: 700; line-height: 1.18;
  color: #fff; margin-bottom: .65rem; letter-spacing: -.015em;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero h2 {
  font-size: clamp(1rem, 1.9vw, 1.32rem); font-weight: 500; line-height: 1.45;
  color: #EDF2FB; margin-bottom: .55rem; letter-spacing: 0;
}
.hero__text { font-size: clamp(.93rem, 1.4vw, 1.05rem); color: #D3DEEF; margin: 0 auto; max-width: 44rem; }

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; align-items: stretch;
  margin-top: 2rem;
}

/* Both buttons share one shape so they line up exactly. The wrapping
   "WhatsApp / Now" was caused by there being no white-space rule and by the
   inline SVG having no intrinsic size — an unsized <svg> claims 300x150 and
   pushed the label onto a second line. */
.hbtn, .hbtn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 58px; padding: 0 2rem;
  border-radius: 12px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; letter-spacing: .005em;
  white-space: nowrap; line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), filter .25s var(--ease);
}
.hbtn svg, .hbtn2 svg { width: 21px; height: 21px; flex: none; }

.hbtn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 31, 154, .38), inset 0 1px 0 rgba(255,255,255,.18);
}
.hbtn:hover {
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 44, 220, .48), inset 0 1px 0 rgba(255,255,255,.25);
  filter: saturate(1.1);
}

/* V1's yellow button turned WhatsApp-green on hover — a leftover from when it
   was a green button. Kept yellow, deepened slightly. */
.hbtn2 {
  background: linear-gradient(135deg, var(--yellow) 0%, #FFC800 100%);
  color: #14181F;
  box-shadow: 0 10px 28px rgba(253, 215, 23, .32), inset 0 1px 0 rgba(255,255,255,.45);
}
.hbtn2:hover {
  color: #14181F; transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(253, 215, 23, .45), inset 0 1px 0 rgba(255,255,255,.55);
}
/* the WhatsApp mark reads better as a dark disc on yellow than as a flat glyph */
.hbtn2 svg { color: #128C34; }

.hbtn:active, .hbtn2:active { transform: translateY(-1px); }

@media (max-width: 575px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: .75rem; }
  .hbtn, .hbtn2 { width: 100%; padding-inline: 1.25rem; }
}

/* the scroll cue at the bottom of the hero */
.hero__scroll {
  position: absolute; z-index: 3; bottom: 26px; inset-inline: 0;
  display: flex; justify-content: center; color: rgba(255,255,255,.7);
}
.hero__scroll svg { width: 26px; height: 26px; animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }
@media (max-height: 700px) { .hero__scroll { display: none; } }

/* ---------- hero poster and video ----------
   The poster is an <img> and paints immediately; the video is layered over it
   and only fades in once main.js has decided the connection can afford it. */
.hero__media img { position: absolute; inset: 0; }
.hero__video {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .6s var(--ease);
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }