/* ============================================================
   Margaret River Circus School — website skin
   Re-skinned to the MRCS Design System (see /style/).
   Visual language ported to plain CSS: sky gradient + tent
   stripes, Lilita One / Fredoka, flat offset "card-stock"
   shadows, coloured time pills, bunting + stars, ink footer.
   Tokens are imported from ./ds/ (mirror of /style/tokens/).
   ============================================================ */
@import url('./ds/tokens.css');

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  line-height: var(--lh-body);
  background: var(--mrcs-sky-3);
  -webkit-font-smoothing: antialiased;
}

/* Sky gradient + tent-stripe texture as a fixed full-viewport field. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--surface-page);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--texture-stripes);
  pointer-events: none;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mrcs-white); }

.wrap { width: min(100% - 2.5rem, 1180px); margin-inline: auto; }

/* ============================================================
   Hero — TentHeader look: bunting, stars, logo, Lilita title
   ============================================================ */
.hero {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 7vw, 4.75rem) 0 clamp(2rem, 5vw, 3rem);
  overflow: hidden;
}

/* spotlight glow behind the title */
.hero::before {
  content: "";
  position: absolute;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 760px; height: 560px;
  max-width: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* bunting strip across the very top of the hero */
.bunting {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  gap: 5px;
  padding: 0 10px;
  z-index: 2;
  pointer-events: none;
}
.bunting::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: rgba(255,255,255,0.4);
}
.bunting i {
  flex: 1;
  height: 42px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  animation: mrcs-sway 6s ease-in-out infinite;
}
.bunting i:nth-child(4n+1) { background: var(--mrcs-blue); }
.bunting i:nth-child(4n+2) { background: var(--mrcs-green); }
.bunting i:nth-child(4n+3) { background: var(--mrcs-white); }
.bunting i:nth-child(4n+4) { background: var(--mrcs-cyan); }
.bunting i:nth-child(odd)  { animation-delay: -3s; }

/* scattered stars */
.stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stars i {
  position: absolute;
  background: var(--mrcs-white);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: mrcs-twinkle 4s ease-in-out infinite;
}
.stars i:nth-child(1) { top: 64px;  left: 7%;  width: 26px; height: 26px; }
.stars i:nth-child(2) { top: 50px;  right: 9%; width: 20px; height: 20px; background: var(--mrcs-green); animation-delay: -1.5s; }
.stars i:nth-child(3) { top: 140px; left: 16%; width: 15px; height: 15px; background: var(--mrcs-green); animation-delay: -2.5s; }
.stars i:nth-child(4) { top: 120px; right: 15%; width: 22px; height: 22px; animation-delay: -1s; }
.stars i:nth-child(5) { bottom: 30px; left: 12%; width: 17px; height: 17px; background: var(--mrcs-green); animation-delay: -3s; }
.stars i:nth-child(6) { bottom: 44px; right: 11%; width: 24px; height: 24px; animation-delay: -0.5s; }

.hero .wrap { position: relative; z-index: 3; }
/* logo with a soft white outer glow so it lifts off the sky */
.hero-logo {
  display: inline-block;
  margin: 0 auto 1.25rem;
}
.hero-logo img {
  width: min(360px, 70vw);
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 24px rgba(255, 255, 255, 0.7));
}
.hero .title-text {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(2.5rem, 8vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--mrcs-white);
  margin: 0 0 1rem;
  text-shadow: var(--text-shadow-display);
}
.hero .tagline {
  margin: 0 auto;
  max-width: 42ch;
  color: var(--mrcs-white);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: var(--fw-medium);
}

/* ============================================================
   Sections
   ============================================================ */
main { padding-bottom: 1.5rem; }
.section { padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.section h2 {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(1.7rem, 4.5vw, var(--fs-h2));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0 0 0.4rem;
  color: var(--mrcs-white);
  text-shadow: 0 4px 0 #1d6f9c;
}
.section-intro {
  text-align: center;
  max-width: 64ch;
  margin: 0.8rem auto 0;
  color: var(--mrcs-white);
  font-weight: var(--fw-medium);
}

/* ============================================================
   Card grid + class cards
   Each section sets --cat (its category colour); cards and time
   pills inherit it. Convention per the design system SKILL.md.
   ============================================================ */
.section { --cat: var(--mrcs-blue); }
.section--club         { --cat: var(--mrcs-cyan); }
.section--early        { --cat: var(--mrcs-orange); }
.section--beginners    { --cat: var(--mrcs-red); }
.section--intermediate { --cat: var(--mrcs-teal); }
.section--troupes      { --cat: var(--mrcs-grass); }

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: var(--space-8);
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  border-top: var(--card-accent-w) solid var(--cat);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-head {
  padding: 1.15rem 1.3rem 0.5rem;
  position: relative;
}
.card-head h3 {
  margin: 0;
  padding-bottom: 1rem;
  font-family: var(--font-text);
  font-size: 1.5rem;   /* slightly above the 22px card-title token */
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
/* time → coloured pill in the card's category colour */
.card-head .when {
  display: inline-block;
  margin: 0 0 1.1rem;
  background: var(--cat);
  color: var(--text-on-color);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-chip);
  letter-spacing: 0.5px;
  padding: 4px 13px;
  border-radius: var(--radius-pill);
}
.card-head .when + h3 { margin-top: 0; }

/* "New Class" badge */
.badge-new {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--mrcs-green);
  color: var(--mrcs-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
}

.card-body {
  padding: 0.65rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body p.desc {
  margin: 0 0 1.2rem;
  color: var(--text-muted);
  font-size: 1rem;
}

/* ============================================================
   Booking slot — availability pill + button
   ============================================================ */
.slots { margin-top: auto; display: flex; flex-direction: column; gap: 0.9rem; }
.slot { display: flex; flex-direction: column; }
.slot-when {
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: var(--text-strong);
}
.avail {
  align-self: flex-start;
  font-weight: var(--fw-semibold);
  font-size: 0.82rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  margin: 0 0 0.7rem;
}
.avail.open { background: var(--mrcs-green-tint); color: var(--mrcs-grass); }
.avail.full { background: var(--mrcs-cloud);      color: var(--text-muted); }

/* brand pill button with flat offset shadow + press feel */
.btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-text);
  font-weight: var(--fw-semibold);
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--text-on-color);
  box-shadow: var(--shadow-pop);
  transition: filter .15s ease, transform .06s ease, box-shadow .06s ease;
}
.btn:hover  { filter: brightness(0.92); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
.btn.open { background: var(--mrcs-green); color: var(--mrcs-ink); }
.btn.full { background: var(--mrcs-ink);   color: var(--mrcs-white); }

/* "Invitation Only" — frosted dashed plaque inside the card */
.invite {
  margin-top: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-caps);
  color: var(--cat);
  border: 2px dashed color-mix(in srgb, var(--cat) 55%, transparent);
  border-radius: var(--radius-block);
  padding: 0.8rem 1rem;
}

/* ============================================================
   Footer — ink block
   ============================================================ */
.site-footer {
  margin-top: 2rem;
  padding: 1.75rem 0 2.25rem;
  text-align: center;
}
.site-footer .wrap {
  background: var(--surface-ink);
  border: var(--border-on-ink);
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-block);
  padding: 1.5rem 1.25rem;
}
.site-footer a {
  font-family: var(--font-display);
  color: var(--mrcs-white);
  font-size: 1.25rem;
  letter-spacing: var(--ls-display);
  text-decoration: none;
}
.site-footer a:hover { color: var(--mrcs-green); }
.site-footer .credit {
  font-size: 0.82rem;
  color: var(--mrcs-green);
  margin: 0.5rem 0 0;
}

/* ============================================================
   Sheet-unreachable notice
   ============================================================ */
.notice {
  max-width: 1180px;
  margin: 1rem auto 0;
  padding: 0.7rem 1.1rem;
  background: var(--surface-panel);
  border: var(--border-dashed);
  border-radius: var(--radius-panel);
  color: var(--mrcs-white);
  font-weight: var(--fw-medium);
  font-size: 0.9rem;
  text-align: center;
}

/* ============================================================
   Motion — gentle, ease-in-out; respect reduced-motion
   ============================================================ */
@keyframes mrcs-sway    { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes mrcs-twinkle { 0%,100% { opacity: .45; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(12deg); } }

@media (prefers-reduced-motion: reduce) {
  .bunting i, .stars i { animation: none; }
}