/* Cedar City Tutoring - shared styles across all pages */

:root {
  /* Spacing tokens: every vertical rhythm on the site comes from these. */
  --space-section: 6.5rem;
  --space-section-sm: 4rem;
  --ease-spring: cubic-bezier(0.34, 1.42, 0.48, 1);
  --ease-out: cubic-bezier(0.22, 0.9, 0.34, 1);

  /* Layered, colour-tinted elevation system: base -> elevated -> floating */
  --shadow-elevated: 0 1px 2px rgba(23,48,46,0.05), 0 6px 16px -6px rgba(23,48,46,0.10);
  --shadow-floating: 0 2px 4px rgba(23,48,46,0.05), 0 14px 34px -10px rgba(23,48,46,0.16), 0 30px 60px -30px rgba(15,95,87,0.22);
  --shadow-clay: 0 2px 4px rgba(194,86,54,0.16), 0 12px 28px -8px rgba(224,113,75,0.36);
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #17302E;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; }
.display-xl { letter-spacing: -0.035em; line-height: 1.03; }
.display-lg { letter-spacing: -0.03em; line-height: 1.08; }
.display-md { letter-spacing: -0.022em; line-height: 1.15; }
.body-lg { line-height: 1.7; }
.label-caps { letter-spacing: 0.16em; text-transform: uppercase; }

/* Grain overlay for depth, applied to tinted sections */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* Layered radial gradient washes */
.wash-cream {
  background-color: #FDF8F2;
  background-image:
    radial-gradient(1100px 520px at 12% -10%, rgba(15,95,87,0.10), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(224,113,75,0.13), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, rgba(244,233,220,0.9), transparent 65%);
}
.wash-pine {
  background-color: #0A4740;
  background-image:
    radial-gradient(820px 480px at 8% 0%, rgba(15,95,87,0.95), transparent 62%),
    radial-gradient(680px 460px at 96% 88%, rgba(224,113,75,0.26), transparent 60%);
}
.wash-sand {
  background-color: #F8F1E8;
  background-image:
    radial-gradient(760px 420px at 88% 0%, rgba(15,95,87,0.09), transparent 60%),
    radial-gradient(620px 400px at 4% 96%, rgba(224,113,75,0.10), transparent 60%);
}

/* Buttons: transform + opacity + shadow only, spring easing */
.btn {
  transition: transform 0.24s var(--ease-spring), box-shadow 0.24s var(--ease-out), background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:focus-visible { outline: 3px solid #0A5A58; outline-offset: 3px; }
.btn-clay { background-color: #E0714B; color: #fff; box-shadow: var(--shadow-clay); }
.btn-clay:hover { background-color: #C25636; box-shadow: 0 4px 8px rgba(194,86,54,0.20), 0 18px 38px -10px rgba(224,113,75,0.46); }
.btn-clay:focus-visible { outline-color: #17302E; }
.btn-pine { background-color: #0A5A58; color: #fff; box-shadow: 0 2px 4px rgba(10,71,64,0.18), 0 12px 28px -10px rgba(15,95,87,0.42); }
.btn-pine:hover { background-color: #0A4740; box-shadow: 0 4px 8px rgba(10,71,64,0.22), 0 18px 38px -12px rgba(15,95,87,0.52); }
.btn-ghost { background-color: transparent; color: #0A5A58; box-shadow: inset 0 0 0 1.5px rgba(15,95,87,0.28); }
.btn-ghost:hover { background-color: rgba(15,95,87,0.06); box-shadow: inset 0 0 0 1.5px rgba(15,95,87,0.55), 0 10px 24px -12px rgba(15,95,87,0.4); }
.btn-cream { background-color: #FDF8F2; color: #0A4740; box-shadow: 0 2px 4px rgba(0,0,0,0.10), 0 14px 30px -12px rgba(0,0,0,0.5); }
.btn-cream:hover { background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.14), 0 20px 40px -14px rgba(0,0,0,0.55); }

.nav-link { position: relative; transition: color 0.18s var(--ease-out); }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: #E0714B; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s var(--ease-spring);
}
.nav-link:hover { color: #0A5A58; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:focus-visible { outline: 2px solid #0A5A58; outline-offset: 4px; border-radius: 3px; }
.nav-link[aria-current="page"] { color: #0A5A58; font-weight: 600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.card {
  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-out), border-color 0.2s var(--ease-out);
  box-shadow: var(--shadow-elevated);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-floating);
  border-color: rgba(15,95,87,0.32);
}

/* Large tappable contact rows on the contact page */
.contact-row {
  transition: transform 0.26s var(--ease-spring), box-shadow 0.26s var(--ease-out), border-color 0.2s var(--ease-out);
  box-shadow: var(--shadow-elevated);
}
.contact-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-floating);
  border-color: rgba(224,113,75,0.5);
}
.contact-row:focus-visible { outline: 3px solid #0A5A58; outline-offset: 3px; }
.contact-row .arrow { transition: transform 0.26s var(--ease-spring); }
.contact-row:hover .arrow { transform: translateX(4px); }

.field {
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.field:focus {
  outline: none;
  border-color: #0A5A58;
  box-shadow: 0 0 0 4px rgba(15,95,87,0.14);
  background-color: #fff;
}
.field::placeholder { color: #A3AFAD; }

details.faq > summary { list-style: none; cursor: pointer; transition: color 0.18s var(--ease-out); }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary:hover { color: #0A5A58; }
details.faq > summary:focus-visible { outline: 2px solid #0A5A58; outline-offset: 4px; border-radius: 6px; }
details.faq .chev { transition: transform 0.28s var(--ease-spring); }
details.faq[open] .chev { transform: rotate(180deg); }

/* Scroll reveal: transform + opacity only */
.rv { opacity: 0; transform: translateY(18px); }
.rv-in { opacity: 1; transform: translateY(0); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card:hover, .contact-row:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Handwriting headline.

   The glyphs are converted to SVG paths at build time, so nothing is fetched at
   runtime: no font file, no parser library. Two things make it read as a pen
   stroke rather than a fade:

   - Every contour is its own <path>. An SVG dash pattern restarts at each
     subpath, so one path holding the whole phrase cannot draw progressively;
     splitting them and staggering the delays is what moves a pen left to right.
   - The weight comes from one filled copy underneath, inked in as the stroke
     finishes. That fill stays a single path so the counters (the holes in an
     'o' or an 'e') still read as holes.

   `currentColor` drives both, so the surrounding text colour class still wins.
--------------------------------------------------------------------------- */
.hw {
  display: inline-block;
  overflow: visible;
  height: var(--hw-height, 1.16em);
  width: calc(var(--hw-height, 1.16em) * var(--hw-aspect));
  /* Drop the box so the glyph baseline lands on the text baseline. */
  vertical-align: calc(var(--hw-height, 1.16em) * var(--hw-baseline) * -1);
}
.hw-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  animation: hw-ink 0.5s ease-out 1.718s forwards;
}
.hw-ink {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation-name: hw-draw;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes hw-draw { to { stroke-dashoffset: 0; } }
@keyframes hw-ink  { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hw-fill { opacity: 1; animation: none; }
  .hw-ink  { display: none; }
}

/* Cedar City Marketing credit line in the footer */
.ccm-credit {
  opacity: 0.7;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ccm-credit:hover,
.ccm-credit:focus-visible { opacity: 1; }
.ccm-credit:active { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .ccm-credit { transition: none; }
}