/* ============================================================
   AMMORTAL HOUSTON — production styles
   Houston Medical Wellness landing page
   ------------------------------------------------------------
   Most layout lives as inline styles in the markup (this guarantees
   the page renders identically to the approved mockup). This file
   only holds what inline styles can't do: fonts, resets, keyframes,
   and the stateful classes the JS toggles (header scroll, reveal,
   FAQ accordion, booking selectors) plus responsive behavior.
   ============================================================ */

:root{
  --accent:#c79a5b;        /* primary gold */
  --accent-deep:#b3824a;   /* darker gold */
  --ink:#17100a;
  --espresso:#1d150e;
  --cream:#f4eee2;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:78px; }
body{
  margin:0;
  background:var(--cream);
  font-family:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
::selection{ background:var(--accent); color:#1a120a; }

@keyframes amFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes amPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* ---- sticky header (JS toggles .scrolled) ---- */
.am-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(180deg, rgba(15,10,6,.55), rgba(15,10,6,0));
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.am-header.scrolled{
  background:rgba(23,16,10,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(244,238,226,.1);
}

/* ---- scroll reveal (JS adds .is-visible) ---- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---- hover helpers ---- */
.am-cta{ transition:filter .2s; }
.am-cta:hover{ filter:brightness(1.08); }
.am-ghost{ transition:background .2s; }
.am-ghost:hover{ background:rgba(244,238,226,.1); }
.am-tech-cell{ transition:background .3s; }
.am-tech-cell:hover{ background:#241a11; }
.am-ess{ transition:all .2s; }
.am-ess:hover{ background:var(--accent-deep); color:#fff; }

/* ---- FAQ accordion (JS toggles .open on .am-faq) ---- */
.am-faq-icon{
  font-family:'Newsreader', serif; font-size:26px; color:var(--accent);
  transition:transform .25s; display:inline-block;
}
.am-faq.open .am-faq-icon{ transform:rotate(45deg); }
.am-faq-answer{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .35s ease, opacity .3s;
}
.am-faq.open .am-faq-answer{ max-height:340px; opacity:1; }

/* ---- booking selectors (JS toggles .active) ---- */
.am-svc{
  cursor:pointer; text-align:left; padding:16px; border-radius:3px;
  font-family:'Hanken Grotesk', sans-serif; transition:all .2s;
  background:#fff; color:#3a3127; border:1px solid #e4dac6;
}
.am-svc.active{ background:var(--accent); color:#1a120a; border-color:var(--accent); }
.am-time{
  cursor:pointer; padding:11px 15px; border-radius:3px; font-size:13.5px;
  font-weight:600; font-family:'Hanken Grotesk', sans-serif; transition:all .2s;
  background:#fff; color:#5a4f43; border:1px solid #e4dac6;
}
.am-time.active{ background:var(--accent); color:#1a120a; border-color:var(--accent); }

/* ---- media placeholders — REPLACE each with a real <img> in production ---- */
.am-slot{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#e7ddc9; color:#9a8a6c; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; border:1px dashed #cdbf9f;
  padding:10px;
}

/* ---- mobile ---- */
.am-mobile-bar{ display:none; }
@media (max-width:820px){
  .am-nav-links a:not(.am-book-btn){ display:none; }
}
@media (max-width:768px){
  .am-mobile-bar{
    position:fixed; bottom:0; left:0; right:0; z-index:48;
    background:rgba(23,16,10,.96); backdrop-filter:blur(12px);
    border-top:1px solid rgba(244,238,226,.12);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    display:flex; gap:10px; align-items:center;
  }
}