/* =============================================================
   Coach Tony Hockey — page styles
   Everything the design-system tokens/styles.css don't cover.
   Safe to edit. Colors reference design-system variables
   (var(--cth-*)); avoid hard-coding new hex values.
   ============================================================= */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cth-page); color: var(--text-strong); font-family: var(--font-sans, system-ui); }
[id] { scroll-margin-top: 96px; }

a { color: var(--text-strong); text-decoration: none; }
a:hover { color: var(--text-muted); }

/* hero bolt animation */
.hero-bolt { width: 84px; height: 84px; margin: 0 auto 26px; position: relative; animation: boltIn 1s var(--ease-soft) both, heroFloat 4.5s var(--ease-soft) 1s infinite; }
.hero-bolt img { width: 100%; height: 100%; display: block; border-radius: 22px; animation: heroGlow 3s ease-in-out 1s infinite; }
.hero-bolt .sheen { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; pointer-events: none; }
.hero-bolt .sheen::before { content: ""; position: absolute; top: -30%; left: -70%; width: 52%; height: 160%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(9deg); animation: boltSheen 5s ease-in-out 1.6s infinite; }
@keyframes boltIn { 0% { opacity: 0; transform: translateY(16px) scale(.82); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes heroGlow { 0%, 100% { filter: drop-shadow(0 10px 20px rgba(26,26,26,.3)); } 50% { filter: drop-shadow(0 14px 30px rgba(26,26,26,.55)); } }
@keyframes boltSheen { 0% { left: -70%; } 20% { left: 135%; } 100% { left: 135%; } }
@keyframes cthBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-bolt, .hero-bolt img, .hero-bolt .sheen::before, .hero-chevron i { animation: none !important; }
}

/* nav links */
a.nav-link { color: var(--text-muted); }
a.nav-link:hover { color: var(--text-strong); }

/* card + generic lift on hover */
.lift { transition: transform .22s var(--ease-soft), box-shadow .22s var(--ease-soft); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-tier-2); }

.icon-tile { flex: none; }
.nav-link { white-space: nowrap; }

/* sticky nav */
.navwrap { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background .25s var(--ease-soft), border-color .25s var(--ease-soft); }
.navwrap.scrolled { background: var(--cth-page); border-bottom-color: rgba(0,0,0,.08); }
header.sky { margin-top: -84px; padding-top: 84px; }

/* always center the nav pill regardless of side widths */
.nav > .nav-pill { position: absolute; left: 50%; transform: translateX(-50%); }

/* primary CTA — dark gradient + glow */
.btn-primary { background: linear-gradient(180deg, #3d3d3d 0%, #0b0b0b 100%); background-color: #0b0b0b; transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft); }
.btn-primary:hover { color: var(--cth-cloud); transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(26,26,26,.34); }
.btn-primary:hover .icon { color: var(--cth-cloud); }
.btn-glow { box-shadow: 0 20px 34px -8px rgba(26,26,26,.42), 0 9px 16px -5px rgba(26,26,26,.26); transition: box-shadow .24s var(--ease-soft), transform .24s var(--ease-soft), background-color .14s var(--ease-soft); }
.btn-glow:hover { box-shadow: 0 26px 44px -8px rgba(26,26,26,.50), 0 13px 22px -5px rgba(26,26,26,.32); transform: translateY(-2px); }

/* mobile menu + hamburger */
.nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: var(--border-hairline); background: var(--cth-cloud); cursor: pointer; color: var(--text-strong); box-shadow: var(--shadow-tier-1); }
.mobile-menu { display: none; flex-direction: column; padding: 6px 24px 16px; background: var(--cth-page); border-bottom: 1px solid rgba(0,0,0,.08); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--text-strong); border-bottom: var(--border-hairline); }
.mobile-menu a:last-child { border-bottom: none; }
@media (min-width: 1151px) { .mobile-menu { display: none !important; } }

/* FAQ accordion */
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }
.faq-icon { transition: transform .22s var(--ease-soft); }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* responsive grid collapses */
@media (max-width: 1020px) { .nav-pill { display: none; } }
@media (max-width: 1150px) { .nav .nav-link { display: none; } .nav-burger { display: inline-flex; } }
@media (max-width: 900px) { .grid[style*="1.15fr"], .grid[style*="1.05fr"], .sys-grid, .coach-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr !important; } }

/* =============================================================
   Mobile optimization (2026-07-09)
   Scoped so desktop (>640px) is byte-for-byte unchanged.
   ============================================================= */

/* FAQ questions were clipping on phones: base.css sets
   `button { white-space: nowrap }`, so long questions couldn't wrap
   and the "+" icon got pushed off the card (which is overflow:hidden).
   Allowing wrap is desktop-safe — desktop questions already fit one
   line, so they never wrap. */
.faq-q { white-space: normal; }
.faq-q > span:not(.faq-icon) { min-width: 0; overflow-wrap: break-word; }

@media (max-width: 640px) {
  /* The 96px desktop section rhythm is too airy on a phone (big empty
     bands above every heading, ~16000px total scroll). Tighten it. */
  section[style*="padding-block:96px"] { padding-block: 60px !important; }

  /* The italic hero span's layout box overhangs a few px past the
     viewport (italic glyph overhang — nothing visible is clipped),
     which lets phones scroll sideways ~9px. Clip it. */
  html { overflow-x: clip; }

  /* Footer links are 18px tall — too small for thumbs. Grow the tap
     area with padding (counts for hit-testing) and pull most of it
     back out of the layout with negative margin. */
  .foot-grid a { display: inline-block; padding-block: 12px; margin-block: -6px; }
  /* Bottom row: © line and Pembee credit were touching at 320px. */
  footer .row-between { flex-wrap: wrap; gap: 6px 16px; }
}

@media (max-width: 480px) {
  /* Tighten the nav so logo + "Book lessons" + burger all breathe.
     .nav-brand{flex:none} stops flexbox from crushing the logo to
     ~16px wide on small phones. */
  .nav { gap: 12px; }
  .nav-brand { flex: none; }
  .nav .btn { height: 40px; padding-inline: 16px; }
  .nav .row-3 { gap: 8px; }
}

@media (max-width: 400px) {
  /* --fs-hero's 56px floor overflows the viewport below ~360px
     ("your development" clipped + horizontal scroll at 320px).
     15.5vw resolves to >=56px at 362px+, so 375px phones and
     everything wider render exactly as before. */
  .display-hero { font-size: clamp(42px, 14.6vw, 56px); }

  /* With the logo protected at full width, the nav row needs more
     room on the smallest phones: slimmer gutters + slimmer CTA,
     and the CTA's arrow icon goes (the label is the affordance). */
  .navwrap .container { padding-inline: 20px; }
  .nav .btn { padding-inline: 14px; }
  .nav .btn .icon { display: none; }
  .mobile-menu { padding-inline: 20px; }
}

/* Touch ergonomics: kills the double-tap-to-zoom delay on taps.
   No visual effect anywhere. */
.btn, .nav-link, .nav-burger, .faq-q, .mobile-menu a, .foot-grid a { touch-action: manipulation; }

/* Notch / safe-area support (paired with viewport-fit=cover in the
   HTML meta). env() is 0 on desktop and non-notched devices, so
   these are no-ops outside notched phones. */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.navwrap { padding-top: env(safe-area-inset-top); }
footer { padding-bottom: env(safe-area-inset-bottom); }