/* Christian Steves — voice actor site
   Design tokens and helper classes ported from the design handoff prototype.
   Exact values come from design_handoff_voice_actor_site/README.md. */

:root {
  /* Accent (brand red). Themeable — curated alternates: #A62A22 #C23B2E #96201C #A8442A */
  --accent: #8E2B24;
  /* Glass header tint — default "Lighter" */
  --header-bg: rgba(252, 250, 245, 0.52);
}

html { scroll-behavior: smooth; }
body { margin: 0; }
* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cs-enter { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-cred, .cs-cred-tab, .cs-cred-tip { transition: none !important; }
  .cs-flash-target.cs-flash { animation: none !important; }
}

/* Utility: toggled by main.js for the mobile menu and form state swaps */
.cs-hidden { display: none !important; }

/* ---- Nav-link flash: feedback when a nav link's target is already in view
   (no scroll happens), so the click still reads as having done something.
   Padding/margin cancel out so resting layout is unaffected. ---- */
.cs-flash-target { display: inline-block; padding: 2px 6px; margin: -2px -6px; border-radius: 6px; }
/* Flex column items stretch to fill the cross axis (width) by default,
   which would make the highlight box span the whole row instead of
   hugging the word — opt out for headings that are flex children. */
.cs-flash-target.cs-flash-fit { align-self: flex-start; }
.cs-flash-target.cs-flash { animation: cs-flash-wiggle 650ms ease-in-out; }
@keyframes cs-flash-wiggle {
  0%   { transform: translateX(0); background-color: transparent; }
  15%  { transform: translateX(-6px); background-color: rgba(142, 43, 36, .16); }
  30%  { transform: translateX(6px); }
  45%  { transform: translateX(-4px); background-color: rgba(142, 43, 36, .12); }
  60%  { transform: translateX(3px); }
  75%  { transform: translateX(-1px); background-color: rgba(142, 43, 36, .06); }
  100% { transform: translateX(0); background-color: transparent; }
}

/* ---- Nav ---- */
.cs-nav-links { display: flex; align-items: center; gap: 32px; }
.cs-hamburger { display: none; }

/* ---- Sticky mobile action bar (shown ≤620px) ---- */
.cs-sticky-bar { display: none; }

/* ---- Hero ---- */
.cs-hero-grid { display: flex; flex-direction: column; gap: 26px; align-items: center; text-align: center; max-width: 720px; margin: 0 auto; }

/* ---- Demo player: play/pause icon swap (button gets .is-playing) ---- */
.cs-play-icon { display: block; }
.cs-pause-icon { display: none; }
.cs-play-btn.is-playing .cs-play-icon { display: none; }
.cs-play-btn.is-playing .cs-pause-icon { display: flex; }

/* ---- About ---- */
.cs-about-grid { display: grid; grid-template-columns: 264px 1fr; gap: 48px; align-items: start; }
.cs-headshot { width: 100%; max-width: 264px; aspect-ratio: 4/5; }
.cs-headshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Contact form ---- */
.cs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-form-full { grid-column: 1 / -1; }
.cs-contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; }

/* ---- Audio setup (divider list, NOT cards) ---- */
.cs-studio-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cs-studio-item { display: flex; align-items: center; gap: 14px; padding: 6px 22px; }
.cs-studio-item + .cs-studio-item { border-left: 1px solid #E5DCC8; }

/* ---- Credit cards (dog-ear + tooltip) ---- */
.cs-credits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-cred { transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.cs-cred:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(28, 43, 58, .12); border-color: var(--accent, #8E2B24); }
.cs-cred-tab { transition: filter .14s ease; }
.cs-cred:hover .cs-cred-tab { filter: brightness(.82); }
.cs-cred-tip { opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; transform: translateY(-100%) translateY(4px); }
.cs-cred:hover .cs-cred-tip { opacity: 1; transform: translateY(-100%); }

/* Tablet: keep about two-column but tighter; collapse nav to hamburger */
@media (max-width: 860px) {
  .cs-nav-links { display: none; }
  .cs-hamburger { display: flex; }
  .cs-about-grid { grid-template-columns: 200px 1fr; gap: 32px; }
  .cs-contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .cs-form-grid { grid-template-columns: 1fr; }
  .cs-form-full { grid-column: 1 / -1; }
}

/* Narrow: stack about, keep headshot + intro side by side as a compact header row */
@media (max-width: 620px) {
  .cs-about-grid { grid-template-columns: 147px 1fr; gap: 20px; row-gap: 30px; }
  .cs-headshot { max-width: 147px; }
  /* Smaller bio type balances the larger photo column (!important beats inline 16px) */
  .cs-about-bio p { font-size: 14px !important; }
  /* Dissolve the right column so only the bio sits beside the photo;
     credits + audio setup become grid items spanning the full width.
     !important: overrides the wrapper's inline display:flex. */
  .cs-about-col { display: contents !important; }
  .cs-about-bio { grid-column: 2; grid-row: 1; }
  .cs-about-credits, .cs-about-studio { grid-column: 1 / -1; }
  .cs-studio-row { grid-template-columns: 1fr; }
  .cs-studio-item { padding: 16px 0; }
  .cs-studio-item + .cs-studio-item { border-left: none; border-top: 1px solid #E5DCC8; }
  .cs-credits-grid { grid-template-columns: 1fr; }
  .cs-sticky-bar { display: flex; }
  body { padding-bottom: 78px; }

  /* Mobile polish. !important is required below: these override inline styles. */
  /* Tighter section padding = more content width on small screens */
  .cs-nav { padding: 12px 16px !important; }
  .cs-hero { padding: 44px 18px 40px !important; }
  #about, #contact { padding: 44px 18px !important; }
  #demos { padding: 20px 16px !important; }
  .cs-hero-grid { gap: 22px; }
  /* Sticky bar already provides the Contact CTA — drop the duplicate hero button */
  .cs-hero-contact { display: none !important; }
  /* Let the subline wrap naturally instead of the authored two-line break */
  .cs-hero-sub br { display: none; }
  /* "Download MP3" only — the full filename wraps badly at this width */
  .cs-dl-file { display: none; }
  /* 16px minimum stops iOS Safari from zooming the page on input focus */
  #cs-form input, #cs-form textarea { font-size: 16px !important; }
  /* Bigger touch targets: seek slider hit area and footer links */
  #cs-seek { height: 30px !important; }
  .cs-footer-links { gap: 8px !important; flex-wrap: wrap; }
  .cs-footer-links a { padding: 8px 6px; }
}

@media (max-width: 420px) {
  .cs-about-grid { grid-template-columns: 115px 1fr; gap: 16px; }
  .cs-headshot { max-width: 115px; }
}