/* =========================================================
   Hallhart Practice Theme — main.css
   ========================================================= */

/* Gellix is a licensed font (Fontfabric) — it isn't on Google Fonts, so it
   has to be self-hosted. Drop your licensed .woff2 (and .woff, if you have
   it) files into /assets/fonts/ using these exact names, and this will
   pick them up automatically:
     assets/fonts/Gellix-Regular.woff2   (weight 400)
     assets/fonts/Gellix-Medium.woff2    (weight 500)
   No files there yet? That's fine — text will just render in the
   browser's default sans-serif until you add them; nothing will break.
*/
@font-face{
  font-family:'Gellix';
  src:url('../fonts/Gellix-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Gellix';
  src:url('../fonts/Gellix-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#1c1a17;
  --ivory:#f4efe6;
  --stone:#7c766c;
  --line: rgba(28,26,23,0.12);
  --line-light: rgba(244,239,230,0.22);
  --ease: cubic-bezier(.16,.84,.44,1);
  --header-h: 84px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Gellix', sans-serif;
  font-weight:400;
}
h1,h2,h3{
  font-family:'Gellix', sans-serif;
  font-weight:500;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
@media(max-width:700px){.wrap{padding:0 22px;}}

.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  background:transparent; /* transparent until scrolled, so the hero video shows through behind it */
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(244,239,230,0.94);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
}
@media(max-width:700px){.site-header__inner{padding:0 22px;}}

.menu-toggle{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer;
  color:#fff; font-size:0.9rem; letter-spacing:0.01em;
  transition:color .35s var(--ease);
}
.site-header.is-scrolled .menu-toggle{color:var(--ink);}
/* simple 3-line icon via box-shadow trick */
.menu-icon{
  display:block;
  width:20px; height:1px; background:currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Invisible layout target the hero wordmark morphs into */
.logo-target{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:'Gellix', sans-serif;
  font-size:1.25rem;
  font-weight:500;
  letter-spacing:-0.01em;
  color:transparent;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.contact-link{
  display:flex; align-items:center; gap:8px;
  color:#fff; font-size:0.9rem;
  transition:color .35s var(--ease);
}
.site-header.is-scrolled .contact-link{color:var(--ink);}
.arrow-icon{width:16px; height:16px;}

/* ---------- HERO WORDMARK (fixed, morphs on scroll via JS) ---------- */
/* top/left are 0/0 on purpose: main.js positions this element with an
   absolute-pixel transform (translate(Xpx,Ypx) translate(-50%,-50%) scale()).
   Adding a 50vh/50vw offset here as well would double up with the JS
   translate and push the wordmark off-center (toward the bottom-right) —
   that was the "heading not centered" bug. Keep this at 0/0. */
.hero-word{
  position:fixed;
  top:0; left:0;
  font-size:clamp(3rem, 9vw, 7.5rem);
  font-weight:500;
  color:var(--ivory);
  white-space:nowrap;
  z-index:110;
  pointer-events:none;
  will-change:transform;
  opacity:0;
  transition:color .35s var(--ease), opacity .25s linear;
}
/* Bigger on desktop specifically — mobile keeps the size above. */
@media(min-width:1024px){
  .hero-word{
    font-size:clamp(7rem, 13vw, 13rem);
  }
}
.hero-word.is-ready{opacity:1;}
.hero-word.is-dark{color:var(--ink);}

/* ---------- HERO SECTION ---------- */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  background:#1c1a17;
  overflow:hidden;
}
/* Prefer dynamic viewport height where supported, so mobile browser
   chrome (address bar show/hide) can't leave a gap under the video. */
@supports (height: 100dvh){
  .hero{ height:100dvh; }
}
.hero-video-wrap{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
/* Self-hosted <video> — object-fit:cover always fills the section exactly,
   no vh/vw math needed (that math is only required for the Vimeo <iframe>
   fallback below, since iframes don't support object-fit). */
.hero-video-wrap video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Full-bleed "cover" technique for a fixed 16:9 background iframe (Vimeo/YouTube):
   size the iframe to whichever of width/height is larger, so it always
   overflows the container in one dimension, then clip with overflow:hidden
   on the wrapper above and re-center with the translate below. */
.hero-video-wrap iframe{
  position:absolute; top:50%; left:50%;
  width:177.78vh;      /* 16:9 -> 100vh * (16/9) */
  height:100vh;
  min-width:100%;
  min-height:56.25vw;  /* 100vw * (9/16) */
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}
/* Poster image — sits above the video, fades out (via JS adding .is-hidden)
   once the video is actually ready to play. */
.hero-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:1;
  transition:opacity .6s var(--ease);
}
.hero-poster.is-hidden{
  opacity:0;
  pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(15,13,11,0.25) 0%, rgba(15,13,11,0.55) 100%);
}
.scroll-cue{
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%);
  width:26px; height:60px; border:none; background:none; cursor:pointer;
  color:#fff; opacity:0.9;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);} }
.scroll-cue svg{width:100%; height:100%;}

/* ---------- INTRO / TAGLINE SECTION ---------- */
.intro{
  min-height:60vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:22px; padding:100px 40px;
}
.eyebrow{
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone);
}
.intro-heading{
  font-size:clamp(1.8rem, 4.6vw, 3.4rem);
  font-weight:400; line-height:1.15; max-width:960px;
}

.home-content{padding:0 0 80px;}

/* ---------- NAV OVERLAY ---------- */
.nav-overlay{
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  width:400px; max-width:100%;
  background:var(--ink); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:26px 40px 50px;
  box-shadow:40px 0 80px rgba(0,0,0,0.25);
  transform:translateX(-100%);
  transition:transform .55s var(--ease);
}
.nav-overlay.is-open{transform:translateX(0);}
@media(max-width:700px){
  .nav-overlay{width:100%; padding:22px 22px 40px;}
}

.nav-close{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; color:inherit; cursor:pointer; font-size:0.95rem;
}
.nav-close svg{width:18px; height:18px;}

.nav-overlay__menu{display:flex; align-items:center;}
.nav-overlay__list{list-style:none; display:flex; flex-direction:column; gap:22px;}
.nav-overlay__list a{
  font-family:'Gellix', sans-serif; font-size:2rem; font-weight:500;
  position:relative;
}
.nav-overlay__list a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--ivory);
  transition:width .3s var(--ease);
}
.nav-overlay__list a:hover::after{width:100%;}

.nav-overlay__bottom{display:flex; flex-direction:column; gap:14px; font-size:0.95rem;}
.nav-overlay__phone,.nav-overlay__message{display:flex; align-items:center; gap:10px; opacity:0.85;}
.nav-overlay__phone svg,.nav-overlay__message svg{width:18px; height:18px;}

body.nav-is-open{overflow:hidden;}

/* ---------- FOOTER ---------- */
.site-footer{padding:40px 0; text-align:center; font-size:0.8rem; color:var(--stone);}