/* ==========================================================================
   TrichoLab homepage HTML options — shared base
   Palette + type tokens per docs/rfq-public-site/homepage-html-options-brief.md
   ========================================================================== */

:root {
  /* Brand palette */
  --paper: #f3eada;        /* antique white — warm page base */
  --paper-deep: #ece0c9;   /* darker paper wash */
  --cream: #faf5ea;        /* card surface — never pure white */
  --sage: #8a9065;
  --sage-tint: #e4e6d4;
  --cypress: #545a3d;
  --cypress-deep: #3f4430;
  --shiitake: #796856;
  --stucco: #a49382;
  --stucco-tint: #e7ddd0;
  --jet: #212322;

  /* Type */
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(56px, 9vw, 120px);
  --shadow-soft: 0 10px 30px rgba(33, 35, 34, 0.08);

  /* Motion (brief: hover 120–180ms, menus 180–250ms, sliders 250–400ms, reveal 350–500ms) */
  --t-hover: 150ms ease;
  --t-menu: 220ms ease;
  --t-slide: 320ms cubic-bezier(0.33, 1, 0.68, 1);
  --t-reveal: 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--jet);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, figure, p, ul, ol, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }

/* --- Accessibility -------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--cypress); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--paper); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--cypress); color: var(--paper);
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none; transition: top var(--t-menu);
}
.skip-link:focus-visible { top: 0; }

/* --- Layout helpers -------------------------------------------------------- */
.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--wide { width: min(1400px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* --- Buttons ---------------------------------------------------------------
   Min 48px tall — comfortably above the 44px touch-target floor. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; text-align: center;
  border-radius: 999px; border: 1.5px solid transparent;
  transition: background-color var(--t-hover), color var(--t-hover),
              border-color var(--t-hover), transform var(--t-hover);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--cypress); color: var(--paper); }
.btn--primary:hover { background: var(--cypress-deep); }
.btn--jet { background: var(--jet); color: var(--paper); }
.btn--jet:hover { background: #000; }
.btn--outline { border-color: var(--jet); color: var(--jet); background: transparent; }
.btn--outline:hover { background: var(--jet); color: var(--paper); }
.btn--outline-light { border-color: rgba(243, 234, 218, 0.7); color: var(--paper); background: transparent; }
.btn--outline-light:hover { background: var(--paper); color: var(--cypress-deep); }
.btn--whatsapp { background: var(--sage); color: #fff; }
.btn--whatsapp:hover { background: #798055; }
.btn .ico { flex: 0 0 auto; }

/* Brand wordmark — SVG is fill="currentColor", so mask it to inherit color */
.logo-mark {
  display: inline-block; width: 168px; aspect-ratio: 600.61 / 128;
  background: currentColor;
  -webkit-mask: url("tricholab-logo.svg") center / contain no-repeat;
  mask: url("tricholab-logo.svg") center / contain no-repeat;
}

/* Text link with underline offset */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; color: var(--cypress);
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1.5px; transition: color var(--t-hover);
}
.tlink:hover { color: var(--jet); }

/* --- Shared molecules ------------------------------------------------------ */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--shiitake);
}
.kicker::before { content: ""; width: 26px; height: 1.5px; background: var(--sage); }

.stars { display: inline-flex; gap: 2px; color: var(--sage); }
.on-dark .stars { color: #cdd3a8; }

/* Carousel primitives (scroll-snap; arrows/drag wired in shared.js) */
.rail {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; cursor: grab;
  padding-bottom: 4px;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging * { pointer-events: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.rail-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--cypress); color: var(--cypress);
  transition: background-color var(--t-hover), color var(--t-hover), opacity var(--t-hover);
}
.rail-btn:hover { background: var(--cypress); color: var(--paper); }
.rail-btn[disabled] { opacity: 0.35; pointer-events: none; }
.on-dark .rail-btn { border-color: rgba(243, 234, 218, 0.6); color: var(--paper); }
.on-dark .rail-btn:hover { background: var(--paper); color: var(--cypress-deep); }

/* Scroll reveal (JS adds .is-in; no-JS and reduced-motion stay visible) */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--t-reveal), transform var(--t-reveal);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile sticky booking bar (shown by shared.js after the hero scrolls past) */
.sticky-book {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(33, 35, 34, 0.92); backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform var(--t-menu);
}
.sticky-book.is-on { transform: none; }
.sticky-book .btn { flex: 1; min-height: 48px; padding-inline: 12px; font-size: 0.9rem; }
@media (min-width: 900px) { .sticky-book { display: none; } }