/* ============================================================
   Haut.AI — Hair Analysis landing page
   Page-specific styles: base, interactive states (hover/focus),
   responsive rules. Design tokens live in colors_and_type.css.
   Recreated from the design handoff (style-hover / style-focus /
   runtime constructs converted to real CSS + a little vanilla JS).
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Buttons ─────────────────────────────────────────── */
.ha-btn-primary { transition: background 0.15s ease, box-shadow 0.15s ease; }
.ha-btn-primary:hover { background: var(--brand-800); box-shadow: var(--shadow-cta-md); }

.ha-btn-secondary { transition: background 0.15s ease; }
.ha-btn-secondary:hover { background: var(--brand-o-100); }

/* white button on the blue / dark accent bands */
.ha-btn-invert { transition: opacity 0.15s ease; }
.ha-btn-invert:hover { opacity: 0.88; }

/* ── Nav ─────────────────────────────────────────────── */
.ha-nav-link { transition: background 0.15s ease; }
.ha-nav-link:hover { background: var(--ink-o-04); }

/* dropdowns open on hover (was onMouseEnter/Leave in the prototype) */
.ha-menu-panel { display: none; }
.ha-menu:hover .ha-menu-panel { display: block; }

.ha-menu-item { transition: background 0.15s ease, color 0.15s ease; }
.ha-menu-item:hover { background: var(--brand-o-100); color: var(--brand-700); }

/* ── Brand logo wall ─────────────────────────────────── */
.ha-brand-logo { transition: opacity 0.18s ease; }
.ha-brand-logo:hover { opacity: 1; }

/* ── Text / email / social links ─────────────────────── */
.ha-email, .ha-social, .ha-footer-link { transition: color 0.15s ease; }
.ha-email:hover, .ha-social:hover, .ha-footer-link:hover { color: var(--brand-700); }
.ha-social-img { transition: opacity 0.15s ease; }
.ha-social-img:hover { opacity: 0.78; }

.ha-textlink { transition: opacity 0.15s ease; }
.ha-textlink:hover { opacity: 0.75; }

/* ── FAQ accordion ───────────────────────────────────── */
.ha-faq-head { cursor: pointer; }
.ha-faq-icon { transition: transform 0.2s ease; }
.ha-faq-row.is-open .ha-faq-icon { transform: rotate(45deg); }
.ha-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.ha-faq-row.is-open .ha-faq-answer { grid-template-rows: 1fr; }
.ha-faq-answer > div { overflow: hidden; }

/* ── Contact form (HubSpot form, styled like the rest of the page) ─── */
.ha-contact-form { max-width: 560px; }
.ha-contact-form form { display: flex; flex-direction: column; gap: 18px; }
.ha-cf-submit:disabled { opacity: 0.6; cursor: default; }
.ha-contact-form .w-input {
  font-family: var(--font-sans); font-size: 17px; color: #0d2c6e;
  background: #fff; border: 1px solid var(--divider-soft); border-radius: 18px;
  padding: 20px 24px; outline: none; width: 100%; box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.ha-contact-form .w-input::placeholder { color: rgba(13,44,110,0.5); }
.ha-contact-form textarea.w-input { resize: vertical; min-height: 120px; }
.ha-contact-form .w-input:focus { border-color: var(--brand-700); outline: 2px solid rgba(20,84,212,0.20); }
.ha-contact-form .honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ha-contact-form .w-embed { display: none; }
.ha-cf-foot { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ha-cf-privacy { font-size: 14px; color: var(--ink); }
.ha-cf-privacy a { color: var(--ink); text-decoration: underline; }
.ha-cf-submit {
  font-family: var(--font-sans); background: #000000; color: #fff; font-size: 17px;
  font-weight: 500; letter-spacing: var(--tracking-btn); padding: 22px 42px;
  border-radius: 999px; border: none; cursor: pointer; transition: opacity 0.15s ease;
}
.ha-cf-submit:hover { opacity: 0.8; }
.ha-contact-form .w-form-done, .ha-contact-form .w-form-fail { margin-top: 16px; padding: 18px 22px; border-radius: var(--radius-lg); font-size: 15px; }
.ha-contact-form .w-form-done { background: var(--brand-o-100); color: var(--brand-700); }
.ha-contact-form .w-form-fail { background: rgba(248,68,104,0.08); color: var(--danger); }

/* ── Mobile nav (hamburger) ──────────────────────────── */
.ha-burger { display: none; }

/* ── Responsive (from the design handoff) ────────────── */
@media (max-width: 900px) {
  #hero-row { flex-direction: column !important; gap: 40px !important; padding-top: 56px !important; padding-bottom: 64px !important; }
  #hero-row h1 { font-size: 36px !important; }
  #hero-phone { height: auto !important; width: 100% !important; max-width: 300px !important; }
  #s5-row, #s6-row, #rnd-row, #cta-row { flex-direction: column !important; gap: 40px !important; align-items: stretch !important; }
  #hiw-grid, #toolkit-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #outcomes-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #git-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  #git-right { padding-top: 0 !important; }
  #cred-stats { grid-template-columns: 1fr !important; }
  #rnd-card { padding: 44px 28px !important; }
  #rnd-charts { grid-template-columns: 1fr !important; }

  /* hamburger shows; the desktop link group is hidden until toggled open */
  .ha-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 9px; border: none; background: transparent; cursor: pointer;
  }
  .ha-burger span { display: block; height: 2px; width: 22px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  body.ha-nav-open .ha-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.ha-nav-open .ha-burger span:nth-child(2) { opacity: 0; }
  body.ha-nav-open .ha-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* menu is hidden until toggled, so the actions group holds the right edge */
  .ha-nav-actions { margin-left: auto; }
  #main-nav-links { display: none !important; }
  body.ha-nav-open #main-nav-links {
    display: flex !important;
    flex-direction: column; align-items: stretch; gap: 2px;
    position: fixed; top: 72px; left: 0; right: 0;
    max-height: calc(100vh - 72px); overflow-y: auto;
    background: #ffffff; border-bottom: 1px solid var(--divider-soft);
    box-shadow: var(--shadow-lift); padding: 12px 24px 20px; z-index: 120;
  }
  /* inline the dropdowns so every link is reachable on touch (no hover).
     !important overrides the panels' inline absolute-position styles. */
  body.ha-nav-open #main-nav-links .ha-menu { position: static; }
  body.ha-nav-open #main-nav-links .ha-nav-link { justify-content: flex-start; }
  body.ha-nav-open #main-nav-links .ha-menu-panel {
    display: block !important; position: static !important;
    top: auto !important; left: auto !important; padding-top: 0 !important;
  }
  body.ha-nav-open #main-nav-links .ha-menu-panel > div {
    border: none !important; box-shadow: none !important;
    min-width: 0 !important; border-radius: 0 !important; padding: 0 0 0 12px !important;
  }
}
@media (max-width: 560px) {
  #hero-row h1 { font-size: 32px !important; }
  #hiw-grid, #toolkit-grid, #s5-grid { grid-template-columns: 1fr !important; }
}