/* Fitrip, behaviour styles for the static build (header, dropdowns, mobile menu).
   These replace the interactive states the original DC preview runtime produced. */

/* ---- Header: transparent over hero, solid cream after scroll ---- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; box-shadow:none;
  transition:background .4s ease, box-shadow .4s ease;
}
.site-header.solid{ background:var(--cream); box-shadow:var(--shadow-nav); }
.site-nav{
  height:76px; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
}
.nav-logo{ display:flex; align-items:center; flex-shrink:0; }
.nav-logo img{ height:36px; transition:opacity .3s; }
.site-header .logo-green{ display:none; }
.site-header.solid .logo-cream{ display:none; }
.site-header.solid .logo-green{ display:block; }

.nav-link{
  font-family:var(--font-body); font-size:.86rem; font-weight:500; letter-spacing:.04em;
  color:var(--cream); transition:opacity .2s, color .2s;
  display:flex; align-items:center; gap:.25rem;
}
.site-header.solid .nav-link{ color:var(--green); }
.nav-link:hover{ opacity:.7; }
.nav-caret{ font-size:.6em; opacity:.6; margin-top:1px; }
.nav-cta{ background:var(--green); color:var(--white); border:1px solid var(--white);
  padding:.55rem 1.25rem; }
.site-header.solid .nav-cta{ border-color:var(--green); }

/* ---- Dropdowns (pure CSS hover) ---- */
.nav-item{ position:relative; }
.nav-dd{
  position:absolute; top:calc(100% + .6rem); left:50%; transform:translateX(-50%);
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-raised);
  padding:.75rem 1.25rem; min-width:220px; z-index:110;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
/* transparent bridge across the gap so the cursor can travel from the
   menu label into the dropdown without losing :hover (dropdown stays open) */
.nav-dd::before{
  content:''; position:absolute; left:0; right:0; top:-.7rem; height:.7rem;
}
.nav-item:hover .nav-dd{ opacity:1; visibility:visible; }
.nav-dd a{
  display:block; padding:.5rem 0; font-size:.875rem; font-family:var(--font-body);
  color:var(--green); border-bottom:1px solid var(--green-100); transition:color .2s;
}
.nav-dd a.last{ border-bottom:none; }
.nav-dd a:hover{ color:var(--sand-600); }
.nav-dd .soon{ font-size:.78em; color:var(--sand-600); }

/* ---- Mobile menu ---- */
.mobile-menu{
  position:fixed; inset:0; background:var(--green); z-index:200;
  padding:2rem var(--gutter); display:none; flex-direction:column; overflow-y:auto;
}
.mobile-menu.open{ display:flex; }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.mobile-menu-top button{ background:none; border:none; color:var(--cream); font-size:2.5rem; line-height:1; cursor:pointer; padding:0; }
.mobile-links{ display:flex; flex-direction:column; gap:1.5rem; }
.mobile-links a{
  font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.06em; font-size:2rem; color:var(--cream); line-height:1.1;
}
.mobile-cta{
  display:inline-flex; align-items:center; margin-top:2.5rem; padding:.8rem 2rem;
  border-radius:var(--radius); background:var(--sand); color:var(--green);
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; align-self:flex-start;
}

/* generic hover shim: applied via JS reading [style-hover] */

/* ---- Touch target sizes (mobile hygiene) --------------------------------
   Controls below ~44px are hard to hit reliably on a phone. These expand the
   tappable area without changing how anything looks. */

/* Hamburger: the main mobile nav control, was 22x28 */
.nav-burger{
  min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
  font-size:1.5rem; line-height:1; padding:0;
  background:none; border:none; color:inherit;
}
/* Mobile menu close button */
.mobile-menu-top button{ min-width:44px; min-height:44px; }

/* Testimonial carousel dots: keep the 10px dot, expand the hit area via an
   invisible overlay so the visual design is untouched.
   Dots sit 18px apart, so grow the full 44px vertically but only to the
   midpoint of the 8px gap horizontally, otherwise neighbouring dots would
   overlap and a tap would select the wrong review. */
[data-slide-go]{ position:relative; }
[data-slide-go]::after{
  content:''; position:absolute; inset:-17px -4px;
}

/* Carousel prev/next arrows */
[data-slide-prev],[data-slide-next]{ min-width:44px; min-height:44px; }