/*
Theme Name: Swing Bandits
Theme URI: https://www.swingbanditsdance.ca/
Description: Custom child theme for Swing Bandits Dance Studio. Built on Twenty Twenty-Four. Contains the visual design system that turns the Block Editor layout into the v2 mockup — brand tokens, hero, inclusivity band with Progress Pride stripe, event cards, calendar tiles, workshop schedule, classes timeline + pricing card, footer styling.
Author: Swing Bandits Dance Studio
Author URI: https://www.swingbanditsdance.ca/
Template: twentytwentyfour
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swing-bandits
Tags: block-theme, custom-colors, custom-logo, custom-menu, full-site-editing, accessibility-ready
*/

/* =====================================================================
   SWING BANDITS — ADDITIONAL CSS (v2)
   ---------------------------------------------------------------------
   Where to paste: Appearance → Editor → Styles → "Additional CSS"
   (or Appearance → Customize → Additional CSS, whichever your install
    surfaces. Both end up in the same place.)

   This CSS is the visual layer that turns the native Block Editor
   layout into the v2 mockup. Every block in the homepage / header /
   footer / page template uses a class name that this file styles.

   Brand tokens are at the top — adjust colours, fonts or spacing
   here and the whole site updates.
   ===================================================================== */


/* ---------- 1. Brand tokens ---------- */
:root {
  --sb-ink:        #141741;            /* deep blue — primary text & dark surfaces */
  --sb-ink-soft:   #2a2c5e;
  --sb-ink-mute:   rgba(20, 23, 65, 0.65);

  --sb-orange:     #ff821a;            /* the sole accent */
  --sb-orange-deep:#e0660a;
  --sb-orange-soft:#ffe4cc;

  --sb-cream:      #f4f1ed;            /* warm neutral surface */
  --sb-cream-deep: #ebe5db;
  --sb-paper:      #ffffff;

  --sb-r-md:   16px;
  --sb-r-lg:   24px;
  --sb-r-pill: 999px;

  --sb-shadow-soft: 0 12px 32px -16px rgba(20, 23, 65, 0.18);
  --sb-shadow-lift: 0 24px 60px -24px rgba(20, 23, 65, 0.25);

  --sb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ---------- 2. Base typography & link colour ---------- */
body {
  background: var(--sb-cream);
  color: var(--sb-ink);
}

a { transition: color 0.2s var(--sb-ease); }
a:hover { color: var(--sb-orange-deep); }

::selection { background: var(--sb-orange); color: var(--sb-paper); }

:focus-visible {
  outline: 3px solid var(--sb-orange);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ---------- 3. Buttons (override Twenty Twenty-Four defaults) ---------- */
.wp-block-button__link {
  border-radius: var(--sb-r-pill);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  transition: transform 0.18s var(--sb-ease), background 0.18s var(--sb-ease), box-shadow 0.18s var(--sb-ease);
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--sb-shadow-soft);
}
.wp-block-button__link:active { transform: translateY(0); }

/* Default fill (orange) */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link {
  background: var(--sb-orange);
  color: var(--sb-paper);
  border: 2px solid var(--sb-orange);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) .wp-block-button__link:hover {
  background: var(--sb-orange-deep);
  border-color: var(--sb-orange-deep);
  color: var(--sb-paper);
}

/* Outline variant (use is-style-outline) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--sb-ink);
  border: 2px solid var(--sb-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--sb-ink);
  color: var(--sb-paper);
}

/* Ghost variant (use className "is-style-ghost") — text-only link button */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  color: var(--sb-ink);
  border: 2px solid transparent;
  padding: 14px 8px;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  color: var(--sb-orange-deep);
  background: transparent;
  transform: none;
  box-shadow: none;
}


/* ---------- 4. HEADER / sticky nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 237, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(20, 23, 65, 0.08);
  padding: 12px 24px !important;
}

.site-nav__inner { gap: 24px; }

.site-nav__brand .wp-block-site-logo img { border-radius: 0; }

.site-nav__wordmark .wp-block-site-title,
.site-nav__wordmark .wp-block-site-title a {
  font-family: 'More Sugar', 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--sb-ink);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  text-decoration: none;
}
.site-nav__wordmark .wp-block-site-tagline {
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--sb-ink-mute);
  text-transform: uppercase;
  margin: 3px 0 0;
}

/* Nav links */
.site-nav__links .wp-block-navigation-item__content {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: var(--sb-r-pill);
  transition: background 0.2s var(--sb-ease), color 0.2s var(--sb-ease);
}
.site-nav__links .wp-block-navigation-item__content:hover,
.site-nav__links .wp-block-navigation-item__content:focus {
  background: rgba(255, 130, 26, 0.12);
  color: var(--sb-orange-deep);
}

/* "Tickets & Merch" CTA — pill button with shopping-bag icon injected via CSS */
.site-nav__cta .wp-block-button__link {
  padding: 11px 20px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-nav__cta .wp-block-button__link::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}


/* ---------- 5. HERO ---------- */
.sb-hero {
  background: var(--sb-cream);
  padding: var(--wp--preset--spacing--40) 24px var(--wp--preset--spacing--60) !important;
  overflow: hidden;
}

.sb-hero__inner { gap: var(--wp--preset--spacing--50); align-items: center; }

/* "Next party" pill — wraps a wp:paragraph with class sb-hero__pill */
.sb-hero__pill {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px !important;
  background: var(--sb-paper);
  border: 1.5px solid var(--sb-ink);
  border-radius: var(--sb-r-pill);
  font-family: 'Quicksand', sans-serif;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  color: var(--sb-ink) !important;
  text-decoration: none !important;
  margin: 0 0 var(--wp--preset--spacing--30) !important;
  transition: background 0.2s var(--sb-ease), color 0.2s var(--sb-ease), transform 0.18s var(--sb-ease);
  width: max-content;
  max-width: 100%;
}
.sb-hero__pill::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--sb-orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 130, 26, 0.22);
  animation: sb-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.sb-hero__pill::after {
  content: '→';
  font-weight: 700;
  transition: transform 0.2s var(--sb-ease);
}
.sb-hero__pill:hover {
  background: var(--sb-ink);
  color: var(--sb-paper) !important;
  transform: translateY(-1px);
}
.sb-hero__pill:hover::after { transform: translateX(2px); }

@keyframes sb-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 130, 26, 0.22); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 130, 26, 0.10); }
}

/* Hero eyebrow ("Welcome to") */
.sb-hero__welcome {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.32em !important;
  color: var(--sb-orange-deep) !important;
  text-transform: uppercase;
  margin: 0 0 8px !important;
}

/* Hero title */
.sb-hero__title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600;
  font-size: clamp(48px, 8vw, 104px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em;
  color: var(--sb-ink) !important;
  margin: 0 0 8px !important;
}

/* Hero subtitle */
.sb-hero__subtitle {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px) !important;
  color: var(--sb-ink-soft) !important;
  line-height: 1.1 !important;
  margin: 0 0 var(--wp--preset--spacing--30) !important;
}

/* Hero lede */
.sb-hero__lede {
  font-size: 18px !important;
  color: var(--sb-ink-soft) !important;
  max-width: 48ch;
  line-height: 1.55 !important;
  margin: 0 0 var(--wp--preset--spacing--30) !important;
}

/* Hero meta row (location / cadence) */
.sb-hero__meta {
  border-top: 1px dashed rgba(20, 23, 65, 0.18);
  padding-top: 20px !important;
  margin-top: var(--wp--preset--spacing--30) !important;
  font-size: 14px;
  color: var(--sb-ink-mute);
}
.sb-hero__meta strong { color: var(--sb-ink); font-weight: 700; }


/* ---------- 6. INCLUSIVITY BAND ---------- */
.sb-inclusivity {
  background: var(--sb-ink);
  color: var(--sb-paper);
  padding: var(--wp--preset--spacing--50) 24px !important;
}
.sb-inclusivity__inner { gap: var(--wp--preset--spacing--50); align-items: center; }

.sb-inclusivity__eyebrow {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.32em !important;
  color: var(--sb-orange) !important;
  text-transform: uppercase;
  margin: 0 0 16px !important;
}
.sb-inclusivity__title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 5vw, 60px) !important;
  line-height: 1.02 !important;
  color: var(--sb-paper) !important;
  margin: 0 !important;
}
.sb-inclusivity__title strong { color: var(--sb-orange); font-weight: inherit; }

.sb-inclusivity__body p,
.sb-inclusivity__body { color: rgba(255, 255, 255, 0.82); font-size: 18px; line-height: 1.6; }

/* Progress Pride flag stripe — full CSS gradient, no image needed */
.sb-pride-stripe {
  display: block !important;
  width: 100%;
  max-width: 520px;
  height: 14px !important;
  border-radius: 999px;
  margin: var(--wp--preset--spacing--30) 0 0 !important;
  padding: 0 !important;
  background: linear-gradient(
    to right,
    #e40303 0%,    #e40303 11%,
    #ff8c00 11%,   #ff8c00 22%,
    #ffed00 22%,   #ffed00 33%,
    #008026 33%,   #008026 44%,
    #004dff 44%,   #004dff 55%,
    #750787 55%,   #750787 66%,
    #ffffff 66%,   #ffffff 73%,
    #ffafc7 73%,   #ffafc7 80%,
    #74d7ee 80%,   #74d7ee 87%,
    #613915 87%,   #613915 94%,
    #000000 94%,   #000000 100%
  ) !important;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  font-size: 0;
}

/* Identity chips row */
.sb-chips { gap: 10px; flex-wrap: wrap; }
.sb-chip {
  padding: 8px 16px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: var(--sb-r-pill);
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sb-paper) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  margin: 0 !important;
}


/* ---------- 7. Section framing utilities ---------- */
.sb-section {
  padding: var(--wp--preset--spacing--60) 24px !important;
}
.sb-section--cream      { background: var(--sb-cream); }
.sb-section--cream-deep { background: var(--sb-cream-deep); }
.sb-section--paper      { background: var(--sb-paper); }

.sb-eyebrow {
  display: inline-block !important;
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.32em !important;
  color: var(--sb-orange-deep) !important;
  text-transform: uppercase;
  margin: 0 0 14px !important;
  padding-left: 28px !important;
  position: relative;
}
.sb-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  background: var(--sb-orange);
  border-radius: 2px;
}

.sb-title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em;
  color: var(--sb-ink) !important;
  margin: 0 0 var(--wp--preset--spacing--40) !important;
  max-width: 22ch;
}
.sb-title strong { color: var(--sb-orange); font-weight: inherit; }


/* ---------- 8. EVENT CARDS (Coming Up Next) ---------- */
.sb-event-card {
  background: var(--sb-paper);
  border-radius: var(--sb-r-lg);
  padding: var(--wp--preset--spacing--30) !important;
  box-shadow: var(--sb-shadow-soft);
  border: 1px solid rgba(20, 23, 65, 0.06);
  transition: transform 0.3s var(--sb-ease), box-shadow 0.3s var(--sb-ease);
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.sb-event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sb-shadow-lift);
}

.sb-event-card .wp-block-image {
  margin: calc(-1 * var(--wp--preset--spacing--30)) calc(-1 * var(--wp--preset--spacing--30)) 0 !important;
  border-radius: var(--sb-r-lg) var(--sb-r-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--sb-cream-deep);
}
.sb-event-card .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-event-card__date {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--sb-orange-deep) !important;
  margin: 0 !important;
}
.sb-event-card__day {
  display: block;
  font-size: 44px !important;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sb-ink) !important;
  margin-top: 4px;
}

.sb-event-card__badges { gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.sb-event-card__badge {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 6px 12px !important;
  border-radius: var(--sb-r-pill);
  background: var(--sb-orange-soft) !important;
  color: var(--sb-orange-deep) !important;
  margin: 0 !important;
  white-space: nowrap;
}
.sb-event-card__badge.is-style-alt {
  background: var(--sb-ink) !important;
  color: var(--sb-paper) !important;
}

.sb-event-card__title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
  margin: 4px 0 0 !important;
  color: var(--sb-ink) !important;
}

.sb-event-card__body {
  font-size: 15px !important;
  color: var(--sb-ink-mute) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Compact timeline inside a card */
.sb-event-card__time { margin: 0; }
.sb-event-card__time-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0 !important;
  border-bottom: 1px dashed rgba(20, 23, 65, 0.1);
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  color: var(--sb-ink-mute);
  margin: 0 !important;
}
.sb-event-card__time-row:last-child { border-bottom: 0; padding-bottom: 0 !important; }
.sb-event-card__time-row strong {
  font-family: 'More Sugar', 'Fredoka', sans-serif;
  font-weight: 600;
  color: var(--sb-ink);
  min-width: 70px;
}


/* ---------- 9. CALENDAR ---------- */
.sb-calendar {
  background: var(--sb-paper);
  border-radius: var(--sb-r-lg);
  padding: var(--wp--preset--spacing--40) !important;
  box-shadow: var(--sb-shadow-soft);
}

.sb-cal-month {
  padding: 18px 18px 16px !important;
  border-radius: var(--sb-r-md);
  background: var(--sb-cream) !important;
  border: 1px solid rgba(20, 23, 65, 0.06);
  transition: transform 0.2s var(--sb-ease), border-color 0.2s var(--sb-ease);
  position: relative;
}
.sb-cal-month:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 130, 26, 0.4);
}

.sb-cal-month__name {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--sb-ink-mute) !important;
  margin: 0 !important;
}
.sb-cal-month__day {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 44px !important;
  line-height: 1 !important;
  color: var(--sb-ink) !important;
  margin: 4px 0 10px !important;
  letter-spacing: -0.02em;
}
.sb-cal-month__label {
  font-size: 13px !important;
  color: var(--sb-ink-soft) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* "This month" — bright orange tile */
.sb-cal-month.is-style-accent {
  background: var(--sb-orange) !important;
  border-color: var(--sb-orange);
}
.sb-cal-month.is-style-accent .sb-cal-month__name  { color: rgba(255,255,255,0.85) !important; }
.sb-cal-month.is-style-accent .sb-cal-month__day,
.sb-cal-month.is-style-accent .sb-cal-month__label { color: var(--sb-paper) !important; }

/* "Featured" — dark navy tile (workshops) */
.sb-cal-month.is-style-featured {
  background: var(--sb-ink) !important;
  border-color: var(--sb-ink);
}
.sb-cal-month.is-style-featured .sb-cal-month__name  { color: var(--sb-orange) !important; }
.sb-cal-month.is-style-featured .sb-cal-month__day,
.sb-cal-month.is-style-featured .sb-cal-month__label { color: var(--sb-paper) !important; }

/* "Quiet" — no-event month, dimmed */
.sb-cal-month.is-style-quiet { opacity: 0.7; }

/* Pills container in calendar tile */
.sb-cal-month__pills {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  max-width: calc(100% - 20px);
}
.sb-cal-month__pill {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  padding: 4px 8px !important;
  border-radius: var(--sb-r-pill);
  background: var(--sb-paper) !important;
  color: var(--sb-orange-deep) !important;
  margin: 0 !important;
  white-space: nowrap;
}
.sb-cal-month__pill.is-style-alt {
  background: var(--sb-orange) !important;
  color: var(--sb-paper) !important;
}
.sb-cal-month.is-style-accent .sb-cal-month__pill.is-style-alt {
  background: var(--sb-ink) !important;
  color: var(--sb-paper) !important;
}


/* ---------- 10. WORKSHOPS ---------- */
.sb-workshops { background: var(--sb-cream-deep); }
.sb-workshops__grid { gap: var(--wp--preset--spacing--50); align-items: start; }

.sb-workshops__banner .wp-block-image {
  border-radius: var(--sb-r-lg);
  overflow: hidden;
  box-shadow: var(--sb-shadow-soft);
  margin: 0;
}
.sb-workshops__banner .wp-block-image img { width: 100%; height: auto; display: block; }

.sb-workshops__note {
  margin-top: var(--wp--preset--spacing--30) !important;
  padding: 22px 24px !important;
  background: var(--sb-paper);
  border-radius: var(--sb-r-md);
  border: 1px solid rgba(20, 23, 65, 0.06);
}
.sb-workshops__note h4 {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  margin: 0 0 6px !important;
  color: var(--sb-ink) !important;
}
.sb-workshops__note p {
  font-size: 14px !important;
  color: var(--sb-ink-mute) !important;
  margin: 0 !important;
}

.sb-workshop-day {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: var(--sb-ink) !important;
  padding: 12px 0 8px !important;
  border-bottom: 2px solid var(--sb-orange);
  margin: var(--wp--preset--spacing--30) 0 8px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sb-workshop-day::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--sb-orange);
  border-radius: 50%;
}

.sb-workshop-item {
  padding: 16px !important;
  background: var(--sb-paper);
  border-radius: var(--sb-r-md);
  border: 1px solid rgba(20, 23, 65, 0.06);
  margin: 0 0 14px !important;
  display: grid !important;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: start;
  transition: transform 0.2s var(--sb-ease);
}
.sb-workshop-item:hover { transform: translateY(-1px); }

.sb-workshop-item__time {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  color: var(--sb-orange-deep) !important;
  padding-top: 2px;
  margin: 0 !important;
}
.sb-workshop-item__title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  color: var(--sb-ink) !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
.sb-workshop-item__desc {
  font-size: 14px !important;
  color: var(--sb-ink-mute) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.sb-workshop-item__level {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: var(--sb-r-pill);
  background: var(--sb-cream) !important;
  color: var(--sb-ink) !important;
  margin: 0 !important;
  white-space: nowrap;
  align-self: start;
}

@media (max-width: 600px) {
  .sb-workshop-item { grid-template-columns: 1fr; gap: 6px; }
  .sb-workshop-item__level { justify-self: start; }
}


/* ---------- 11. CLASSES timeline + pricing card ---------- */
.sb-classes__grid { gap: var(--wp--preset--spacing--50); align-items: start; }

.sb-timeline-item {
  position: relative;
  padding-left: 36px !important;
  margin: 0 0 var(--wp--preset--spacing--30) !important;
}
.sb-timeline-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: -32px;
  width: 2px;
  background: rgba(20, 23, 65, 0.12);
}
.sb-timeline-item:last-child::before { display: none; }
.sb-timeline-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--sb-cream);
  border: 3px solid var(--sb-orange);
  border-radius: 50%;
}

.sb-timeline-item__time {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--sb-orange-deep) !important;
  margin: 0 0 4px !important;
}
.sb-timeline-item__title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  margin: 0 0 8px !important;
  color: var(--sb-ink) !important;
  line-height: 1.15;
}
.sb-timeline-item__body p,
.sb-timeline-item p {
  font-size: 15px;
  color: var(--sb-ink-soft);
  line-height: 1.55;
  margin: 0 0 8px;
}
.sb-timeline-item__body p:last-child { margin-bottom: 0; }

/* Pricing card (right column) */
.sb-pricing {
  background: var(--sb-ink) !important;
  color: var(--sb-paper) !important;
  border-radius: var(--sb-r-lg);
  padding: var(--wp--preset--spacing--40) !important;
  box-shadow: var(--sb-shadow-lift);
  position: sticky;
  top: 100px;
}
.sb-pricing__title {
  font-family: 'More Sugar', 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  color: var(--sb-paper) !important;
  margin: 0 0 4px !important;
}
.sb-pricing__sub {
  color: rgba(255, 255, 255, 0.72) !important;
  margin: 0 0 24px !important;
}

.sb-pricing-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 16px 0 !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.16) !important;
  gap: 16px !important;
  margin: 0 !important;
}
.sb-pricing-row:last-of-type { border-bottom: 0; }
.sb-pricing-row__label {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--sb-paper);
}
.sb-pricing-row__sub {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin-top: 3px;
}
.sb-pricing-row__amount {
  font-family: 'More Sugar', 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--sb-orange);
  white-space: nowrap;
}
.sb-pricing-row__amount.is-free { color: var(--sb-paper); }

.sb-pricing__note {
  margin-top: 20px !important;
  padding: 14px 16px !important;
  background: rgba(255, 130, 26, 0.16) !important;
  border-radius: var(--sb-r-md);
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-left: 3px solid var(--sb-orange);
}


/* ---------- 12. FOOTER ---------- */
.sb-footer {
  background: var(--sb-ink) !important;
  color: var(--sb-paper);
  padding: var(--wp--preset--spacing--50) 24px var(--wp--preset--spacing--40) !important;
}

.sb-footer h4 {
  font-family: 'Quicksand', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--sb-orange) !important;
  margin: 0 0 14px !important;
}

.sb-footer p,
.sb-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.55;
}
.sb-footer a:hover { color: var(--sb-orange); }
.sb-footer strong { color: var(--sb-paper); }

.sb-footer .wp-block-site-logo img { width: 64px; height: 64px; border-radius: 0; }

/* Footer dates */
.sb-footer-date {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0 !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
  margin: 0 !important;
  font-size: 15px !important;
}
.sb-footer-date:last-child { border-bottom: 0; }
.sb-footer-date strong {
  font-family: 'More Sugar', 'Fredoka', sans-serif;
  font-weight: 600;
}
.sb-footer-date em {
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* Social icons in footer */
.sb-footer .wp-block-social-links .wp-social-link {
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: background 0.2s var(--sb-ease), transform 0.2s var(--sb-ease);
}
.sb-footer .wp-block-social-links .wp-social-link:hover {
  background: var(--sb-orange) !important;
  transform: translateY(-2px);
}
.sb-footer .wp-block-social-links .wp-social-link svg { fill: var(--sb-paper); }

/* Newsletter links */
.sb-footer-newsletter a {
  color: var(--sb-orange) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--sb-orange);
}

/* Bottom legal row */
.sb-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px !important;
  margin-top: var(--wp--preset--spacing--40) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}


/* ---------- 13. Responsive overrides ---------- */
@media (max-width: 980px) {
  .sb-hero__inner,
  .sb-inclusivity__inner,
  .sb-workshops__grid,
  .sb-classes__grid {
    grid-template-columns: 1fr !important;
    gap: var(--wp--preset--spacing--30) !important;
  }
}

@media (max-width: 781px) {
  .site-nav .wp-block-navigation { display: none; }
  .site-nav__cta .wp-block-button__link { padding: 9px 16px; font-size: 13px; }
}


/* ---------- 14. Hide the old default "title" on the homepage ---------- */
/* If the homepage page has a title set, hide it — the hero already
   plays that role. Comment out if you want the page title to show. */
.page-id-2 .wp-block-post-title,
.home .wp-block-post-title { display: none; }