/* Dream Taekwondo — shared styles. Most layout lives inline in each page;
   this file holds base rules, interactive states and phone-size overrides. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: #C8102E; }
a:hover { color: #8E0B20; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #FFB800; outline-offset: 2px;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Home hero slideshow ---------- */
.hero .slide { opacity: 0; transition: opacity 1.2s ease; }
.hero .slide.is-active { opacity: 1; }
.slide-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #FFFFFF; background: transparent; cursor: pointer; }
.slide-dot.is-active { background: #FFFFFF; }
.slide-toggle { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slide-toggle svg { fill: #FFFFFF; }
.slide-toggle .icon-play { display: none; }
.slide-toggle.is-paused .icon-play { display: block; }
.slide-toggle.is-paused .icon-pause { display: none; }

/* ---------- Forms ---------- */
.lead-form input, .lead-form select { font-family: 'Barlow', sans-serif; color: #111111; background: #FFFFFF; }
.form-status:empty { display: none; }
.form-status { font-weight: 600; }
.form-status.is-ok { color: #2E8B3E; }
.form-status.is-error { color: #FF7A8A; }
.lead-form button[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Study guide accordion ---------- */
details.belt summary::-webkit-details-marker { display: none; }
details.belt .belt-icon::before { content: "+"; }
details.belt[open] .belt-icon::before { content: "\2212"; }
details.belt summary:hover { background: #F7F7F7; }

/* ---------- Mobile menu button (hidden on desktop) ---------- */
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px 9px; border: 1px solid #FFFFFF; background: transparent; cursor: pointer; flex-direction: column; justify-content: space-between; }
.menu-toggle span { display: block; height: 2px; background: #FFFFFF; transition: transform 0.2s ease, opacity 0.2s ease; }
.site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- Phones & small tablets: lighter, less crowded layout ---------- */
@media (max-width: 760px) {
  /* Type scale */
  h1 { font-size: 48px !important; line-height: 1 !important; }
  h2 { font-size: 34px !important; margin-bottom: 16px !important; }
  h3 { font-size: 24px !important; }

  /* Header: logo + Free Trial + menu button; links open from the button */
  .site-header > div { padding: 10px 16px !important; gap: 10px !important; flex-wrap: wrap !important; }
  .site-header a img { width: 44px !important; height: 44px !important; }
  .site-header a span { font-size: 22px !important; }
  .site-header > div > div { order: 2; margin-left: auto; }
  .site-header > div > div a { padding: 10px 12px !important; font-size: 14px !important; }
  .menu-toggle { display: flex; order: 3; }
  .site-header nav { display: none !important; order: 4; width: 100%; flex-direction: column; gap: 0 !important; padding: 4px 0 8px; font-size: 17px !important; }
  .site-header.is-open nav { display: flex !important; }
  .site-header nav a { padding: 12px 0; border-top: 1px solid #333333; }
  .hide-sm { display: none !important; }

  /* More breathing room, less padding */
  [style*="padding: 88px 24px"] { padding: 48px 20px !important; }
  [style*="padding: 72px 24px"] { padding: 44px 20px !important; }
  [style*="padding: 56px 24px"] { padding: 36px 20px !important; }
  [style*="padding: 88px 24px 40px"] { padding: 48px 20px 24px !important; }
  [style*="padding: 48px 24px 88px"] { padding: 24px 20px 44px !important; }

  /* Home hero */
  .hero { min-height: 560px !important; }
  .hero-shade { background: linear-gradient(180deg, rgba(17,17,17,0.94) 0%, rgba(17,17,17,0.86) 55%, rgba(17,17,17,0.35) 80%, rgba(17,17,17,0.1) 100%) !important; }
  .hero p { font-size: 16px !important; }
  .hero a { padding: 14px 18px !important; font-size: 16px !important; }

  /* Trust bar: compact 2 x 2 */
  .trust-bar > div { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 14px !important; padding: 14px 20px !important; font-size: 13px !important; }

  /* Program cards and reviews: swipe sideways instead of a long stack */
  #programs, .reviews { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; gap: 14px !important; margin: 0 -20px; padding: 0 20px 10px; scrollbar-width: none; }
  #programs::-webkit-scrollbar, .reviews::-webkit-scrollbar { display: none; }
  #programs > article { flex: 0 0 78%; scroll-snap-align: start; }
  #programs img { height: 130px !important; }
  #programs article > div { padding: 18px !important; gap: 8px !important; }
  .reviews > figure { flex: 0 0 82%; scroll-snap-align: start; padding: 20px !important; }
  .reviews blockquote { font-size: 15px !important; }

  /* Belt path: 2 x 2 */
  .belt-path { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .belt-path li { padding: 10px !important; }
  .belt-path li p:last-child { font-size: 15px !important; }

  /* Master Lee: smaller photo, compact credentials */
  .coach-photo { max-width: 220px !important; margin: 0 auto; }
  #about [style*="gap: 56px"] { gap: 28px !important; }
  #about ul { font-size: 14px !important; gap: 10px !important; }

  /* 5 principles: small tags instead of big boxes */
  .principles { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; }
  .principles > div { padding: 8px 14px !important; font-size: 20px !important; }

  /* Birthday party page */
  .party-hero { min-height: 480px !important; }
  .party-hero-img { width: 100% !important; opacity: 0.55; }
  .party-hero-shade { background: linear-gradient(180deg, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.7) 100%) !important; }
  .party-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .party-gallery img { height: 130px !important; }
}

/* Hero headline: centred; forced line break on phones only */
.br-sm { display: none; }
@media (max-width: 760px) {
  .br-sm { display: inline; }
  .hero-copy h1 { font-size: 72px !important; line-height: 0.92 !important; }
}
@media (max-width: 760px) {
  .hero-copy > div > p:first-child { letter-spacing: 1.5px !important; font-size: 12px !important; }
}
@media (max-width: 760px) {
  .hero-eyebrow { letter-spacing: 2px !important; font-size: 12px !important; gap: 10px !important; }
  .hero-eyebrow span { width: 20px !important; }
  .hero-sub .br-lg { display: none; }
}

/* Footer staff shortcut: no text selection / copy menu on long press */
.admin-row, .admin-row * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Studio calendar: month grid on desktop, list view on phones */
@media (max-width: 760px) {
  .cal-month { display: none !important; }
  .cal-agenda { display: block !important; }
}

/* Nav item shown only in the phone menu (desktop has the Email Us button) */
.show-sm { display: none !important; }
@media (max-width: 760px) { .site-header.is-open .show-sm { display: block !important; } }

/* Laptops / tablets: tighten the header so it stays on one line */
@media (min-width: 761px) and (max-width: 1180px) {
  .site-header nav { gap: 14px !important; font-size: 14px !important; }
  .site-header a[href^="mailto:"], .site-header a[href$="#trial"] { padding: 10px 12px !important; font-size: 14px !important; }
}

/* Reviews carousel */
.reviews.rv-on { display: block !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.rv-track { display: flex; gap: 24px; transition: transform .7s ease; will-change: transform; }
.rv-track > figure { flex: 0 0 calc((100% - (var(--per, 3) - 1) * 24px) / var(--per, 3)) !important; box-sizing: border-box; }
.rv-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.rv-dots button { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #C8102E; background: transparent; padding: 0; cursor: pointer; }
.rv-dots button.is-active { background: #C8102E; }
@media (prefers-reduced-motion: reduce) { .rv-track { transition: none; } }