/* ============================================================================
   Sanara Consulting — shared design system.

   Tokens, reset, primitives, and site chrome (masthead, nav, animated mark,
   scroll-reveal). Every content page links this in <head> BEFORE its own inline
   <style>, so a page can still override anything here locally; page-specific
   layout (heroes, section grids, article components) stays inline in the page.

   This file is the single source of truth for the brand foundation. Change a
   token here, not in five places. 404.html is deliberately standalone and does
   not link this — an error page should carry no external dependency.
   ============================================================================ */

:root {
  --ink:       #0e1f17;
  --paper:     #f4f4f1;
  --paper-2:   #ecebe6;
  --brass:     #b6914c;
  --brass-ink: #7d5e23;
  --muted:     rgba(14, 31, 23, 0.55);
  --faint:     rgba(14, 31, 23, 0.40);
  --rule:      rgba(14, 31, 23, 0.16);
  --rule-soft: rgba(14, 31, 23, 0.10);

  --paper-on-ink:        rgba(244, 244, 241, 0.82);
  --paper-on-ink-quiet:  rgba(244, 244, 241, 0.78);
  --paper-on-ink-muted:  rgba(244, 244, 241, 0.55);
  --rule-on-ink:         rgba(244, 244, 241, 0.18);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Settle: a whisper of overshoot, the flock's follow-through at micro scale.
     For small transforms (arrow nudges), never colour. */
  --ease-settle: cubic-bezier(0.34, 1.45, 0.64, 1);

  --pad-x: clamp(20px, 5.55vw, 80px);
  --content-max: 1480px;
  --measure: 980px;

  --display-font: 'EB Garamond', 'Times New Roman', serif;
  --body-font:    'EB Garamond', 'Times New Roman', serif;
  --serif-alt:    'EB Garamond', 'Times New Roman', serif;
  --sans-font:    system-ui, sans-serif;
}

/* ─── Reset + base ─── */
*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas { max-width: 100%; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
body.ready { opacity: 1; }

::selection { background: var(--brass); color: var(--paper); }
a { color: inherit; text-decoration: none; }

/* ─── Primitives ─── */
.tag {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.pad {
  padding-left:  max(var(--pad-x), (100vw - var(--content-max)) / 2);
  padding-right: max(var(--pad-x), (100vw - var(--content-max)) / 2);
}
.arrow     { display: inline-block; transition: transform 300ms var(--ease-settle); }
.row-arrow { display: inline-block; transition: transform 300ms var(--ease-settle), color 220ms var(--ease); }

/* ─── Site chrome: masthead + nav ─── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.masthead-wordmark { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.masthead-wordmark__sanara {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.masthead-wordmark__consulting {
  font-family: var(--display-font);
  font-style: normal;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brass-ink);
  line-height: 1;
  padding-left: 1px;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.5vw, 36px);
  font-family: var(--body-font);
  font-size: 16px;
  justify-content: flex-end;
}
.nav-link {
  position: relative;
  color: var(--ink);
  cursor: pointer;
  transition: color 220ms var(--ease), transform 160ms var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease);
}
.nav-link:hover { color: var(--brass-ink); }
.nav-link--accent { color: var(--brass-ink); }
.nav-link--accent:active { transform: scale(0.96); }

/* ─── Animated mark (JS-mounted sunrise logo, in masthead + footer) ─── */
.mark-svg .mk-h { transition: stroke-dashoffset 1100ms var(--ease) 200ms; }
.mark-svg .mk-c { transition: opacity 700ms var(--ease) 0ms; }
.mark-svg .mk-d { transition: opacity 900ms var(--ease) 500ms; }

/* ─── Scroll reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ─── Hover-driven motion, true-hover devices only ─── */
/* On touch a hovered transform would stick after a tap. The selector list is a
   superset of the CTA/link classes used across pages; a selector that matches
   nothing on a given page simply does nothing. */
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-link:hover .arrow,
  .row-link:hover .arrow,
  .cta:hover .arrow,
  .note-cta:hover .arrow { transform: translateX(5px); }
}

/* ─── Nav collapse on small screens ─── */
@media (max-width: 760px) {
  .nav-links .nav-link:not(.nav-link--accent):not([href="about.html"]) { display: none; }
}

/* ─── Reduced motion (shared subset; pages add their own for local elements) ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .mark-svg .mk-h,
  .mark-svg .mk-c,
  .mark-svg .mk-d { transition: none; }
}
