/* ============================================================
   WKW Pain Relief Guide — static stylesheet
   Replaces the Tailwind Play CDN (~300KB + runtime JIT) with
   only the utilities this app actually uses.
   Values match Tailwind v3 exactly, so class names in the
   markup still mean what a Tailwind dev expects.

   BRAND TOKENS — do not change without Derrick's sign-off:
     black      #171717   (neutral-900)
     gold       #facc15   (yellow-400)   hover #eab308 (yellow-500)
     background #fafaf9   (stone-50)
     headings   Archivo   body Inter
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #171717;
  /* Painted here as well as on #root so iOS rubber-band overscroll
     shows the stone background rather than a white band. */
  background-color: #fafaf9;
}
img, svg, video { display: block; max-width: 100%; }
/* Links inherit their surroundings and carry no underline, matching
   the marketing site. Without this, gold CTA buttons built from <a>
   render with a default blue underline. */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }
h1, h2, h3, h4 { font-family: Archivo, Inter, sans-serif; font-size: inherit; font-weight: inherit; }

/* ============================================================
   SITE HEADER — kept identical to the marketing pages so the
   guide doesn't read as a different website. Values are copied
   from the <style> block in public/index.html; if you restyle
   the nav there, mirror the change here.
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 50; background: #171717; box-shadow: 0 1px 0 rgba(250,204,21,.15); }
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1100px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand span { color: #fff; font-family: Archivo, Inter, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: #d6d3d1; text-decoration: none; font-size: 14px; font-weight: 600; transition: color .15s; }
.nav-links a:hover { color: #facc15; }
.nav-cta { background: #facc15; color: #171717; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.nav-cta:hover { background: #eab308; }
.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.menu-btn svg { width: 26px; height: 26px; stroke: #fff; }
.nav-social { display: flex; align-items: center; gap: 14px; }
.nav-social a { color: #a3a3a3; }
.nav-social a:hover { color: #facc15; }
.nav-social svg { width: 20px; height: 20px; }

/* Same 860px breakpoint the marketing pages use, so the nav
   collapses into the hamburger at the identical width.
   .nav-links positions against .site-header (sticky = positioned),
   which is what makes the dropdown span the full width. */
@media (max-width: 860px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #171717; flex-direction: column; align-items: flex-start;
    padding: 18px 24px; gap: 18px; border-bottom: 1px solid rgba(250,204,21,.2);
  }
  .nav-links.open { display: flex; }
  .menu-btn { display: block; }
}

/* ---------- layout ---------- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.top-2    { top: .5rem; }
.left-1\/2 { left: 50%; }
.z-20     { z-index: 20; }
.block    { display: block; }
.inline-block { display: inline-block; }
.flex     { display: flex; }
.grid     { display: grid; }
.flex-1   { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap{ flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-baseline{ align-items: baseline; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1   { gap: .25rem; }
.gap-1\.5{ gap: .375rem; }
.gap-2   { gap: .5rem; }
.gap-3   { gap: .75rem; }
.gap-4   { gap: 1rem; }
.overflow-hidden { overflow: hidden; }
.min-w-0 { min-width: 0; }
.min-h-screen { min-height: 100vh; }

/* ---------- sizing ---------- */
.w-3 { width: .75rem; }  .h-3 { height: .75rem; }
.w-4 { width: 1rem; }    .h-4 { height: 1rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }  .h-6 { height: 1.5rem; }
.w-10{ width: 2.5rem; }  .h-10{ height: 2.5rem; }
.w-12{ width: 3rem; }    .h-12{ height: 3rem; }
.w-14{ width: 3.5rem; }  .h-14{ height: 3.5rem; }
.w-full { width: 100%; } .h-full { height: 100%; }
.h-px { height: 1px; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-xl { max-width: 36rem; }
.max-w-3xl{ max-width: 48rem; }
.max-w-5xl{ max-width: 64rem; }

/* ---------- spacing ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }  .mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }  .mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }    .mt-10{ margin-top: 2.5rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.pl-4 { padding-left: 1rem; }
.px-2\.5 { padding-left:.625rem; padding-right:.625rem; }
.px-3 { padding-left:.75rem; padding-right:.75rem; }
.px-4 { padding-left:1rem; padding-right:1rem; }
.px-5 { padding-left:1.25rem; padding-right:1.25rem; }
.px-6 { padding-left:1.5rem; padding-right:1.5rem; }
.px-8 { padding-left:2rem; padding-right:2rem; }
.py-0\.5 { padding-top:.125rem; padding-bottom:.125rem; }
.py-1 { padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5 { padding-top:.375rem; padding-bottom:.375rem; }
.py-2 { padding-top:.5rem; padding-bottom:.5rem; }
.py-2\.5 { padding-top:.625rem; padding-bottom:.625rem; }
.py-3 { padding-top:.75rem; padding-bottom:.75rem; }
.py-3\.5 { padding-top:.875rem; padding-bottom:.875rem; }
.py-4 { padding-top:1rem; padding-bottom:1rem; }
.py-8 { padding-top:2rem; padding-bottom:2rem; }
.py-10{ padding-top:2.5rem; padding-bottom:2.5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }

/* ---------- type ---------- */
.text-xs { font-size:.75rem; line-height:1rem; }
.text-sm { font-size:.875rem; line-height:1.25rem; }
.text-lg { font-size:1.125rem; line-height:1.75rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
.text-4xl{ font-size:2.25rem; line-height:2.5rem; }
.font-medium{ font-weight:500; } .font-semibold{ font-weight:600; }
.font-bold  { font-weight:700; } .font-extrabold{ font-weight:800; }
.tracking-tight { letter-spacing:-.025em; }
.text-center { text-align:center; }
.capitalize { text-transform:capitalize; }
.italic { font-style:italic; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.whitespace-nowrap { white-space:nowrap; }

/* ---------- color ---------- */
.text-white       { color:#fff; }
.text-neutral-300 { color:#d4d4d4; }
.text-neutral-400 { color:#a3a3a3; }
.text-neutral-500 { color:#737373; }
.text-neutral-600 { color:#525252; }
.text-neutral-700 { color:#404040; }
.text-neutral-900 { color:#171717; }
.text-yellow-400  { color:#facc15; }
.text-yellow-600  { color:#ca8a04; }
.text-amber-600   { color:#d97706; }
.text-amber-900   { color:#78350f; }
.text-red-400     { color:#f87171; }
.bg-white       { background-color:#fff; }
.bg-stone-50    { background-color:#fafaf9; }
.bg-stone-100   { background-color:#f5f5f4; }
.bg-stone-300   { background-color:#d6d3d1; }
.bg-neutral-800 { background-color:#262626; }
.bg-neutral-900 { background-color:#171717; }
.bg-yellow-50   { background-color:#fefce8; }
.bg-yellow-400  { background-color:#facc15; }
.bg-amber-50    { background-color:#fffbeb; }
.placeholder-neutral-400::placeholder { color:#a3a3a3; }
.placeholder-neutral-500::placeholder { color:#737373; }

/* ---------- border ---------- */
.border   { border-width:1px; border-style:solid; border-color:#e5e5e5; }
.border-l-4 { border-left-width:4px; border-left-style:solid; }
.border-stone-200  { border-color:#e7e5e4; }
.border-stone-300  { border-color:#d6d3d1; }
.border-neutral-700{ border-color:#404040; }
.border-neutral-900{ border-color:#171717; }
.border-yellow-300 { border-color:#fde047; }
.border-yellow-400 { border-color:#facc15; }
.border-amber-300  { border-color:#fcd34d; }
.border-red-500    { border-color:#ef4444; }
.rounded-lg  { border-radius:.5rem; }
.rounded-xl  { border-radius:.75rem; }
.rounded-2xl { border-radius:1rem; }
.rounded-full{ border-radius:9999px; }

/* ---------- effects ---------- */
.object-cover { object-fit:cover; }
.opacity-80 { opacity:.8; }
.blur-\[3px\] { filter: blur(3px); }
.select-none { user-select:none; -webkit-user-select:none; }
.pointer-events-none { pointer-events:none; }
.resize-none { resize:none; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* ---------- interactive states ---------- */
.hover\:bg-yellow-500:hover   { background-color:#eab308; }
.hover\:bg-stone-200:hover    { background-color:#e7e5e4; }
.hover\:bg-neutral-700:hover  { background-color:#404040; }
.hover\:text-yellow-400:hover { color:#facc15; }
.hover\:text-neutral-900:hover{ color:#171717; }
.hover\:border-yellow-400:hover { border-color:#facc15; }
.focus\:outline-none:focus { outline:none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring, #facc15); }
.focus\:ring-yellow-400:focus { --ring:#facc15; }
button:disabled { cursor:default; }
.disabled\:opacity-40:disabled { opacity:.4; }
.disabled\:cursor-not-allowed:disabled { cursor:not-allowed; }

/* Touch devices don't hover — stop sticky hover states on iOS. */
@media (hover: none) {
  .hover\:bg-yellow-500:hover   { background-color:#facc15; }
  .hover\:bg-stone-200:hover    { background-color:#f5f5f4; }
  .hover\:bg-neutral-700:hover  { background-color:#262626; }
}

/* ---------- responsive (sm: 640px) ---------- */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:w-auto { width: auto; }
}

/* Below ~380px the wordmark alone can crowd the hamburger, so step
   it down slightly. The old rules here targeted the guide's former
   bespoke header and are gone — the shared .site-header above now
   handles mobile via the same hamburger the marketing pages use. */
@media (max-width: 380px) {
  .brand span { font-size: 16px; }
  .site-nav { padding: 14px 16px; }
}