/* ================================================================
   DMDA — shared site CSS, ported verbatim from the HTML/CSS/JS mockup.
   Covers: design tokens, reset/base, skip-link, header/nav, mobile nav,
   hamburger toggle, back-to-top, footer, page-hero, and the shared
   .sc-card accordion pattern used on every interior page.
   Page-specific CSS (Studio, Classes, Announcements, Media, Home, Contact)
   is enqueued per-template as each page is built.
================================================================ */

/* ================================================================
   DESIGN TOKENS
================================================================ */
:root {
  --bg-base:     #090C10;
  --bg-raised:   #0D1118;
  --bg-elevated: #131B24;
  --bg-card:     #0F141C;
  --bg-card-hi:  #192030;

  --blue:    #09AFF6;
  --darksky: #00283A;
  --teal:    #00BFB3;
  --berry:   #D63384;
  --purple:  #8B5CF6;
  --amber:   #F59E0B;

  --grad-bt:      linear-gradient(135deg, #09AFF6 0%, #00BFB3 100%);
  --grad-bt-rev:  linear-gradient(135deg, #00BFB3 0%, #09AFF6 100%);
  --grad-bg-blue: linear-gradient(90deg, rgba(9,175,246,0.05) 10%, rgba(9,175,246,0.15) 40%, rgba(9,175,246,0.15) 60%, rgba(9,175,246,0.05) 90%);
  --grad-bg-black: linear-gradient(90deg, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.9) 40%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.1) 90%);

  --t1: #E8EFF6;
  --t2: #7A8FA8;
  --t3: #415268;

  --b-dim:    rgba(255,255,255,0.1);
  --b-blue:   rgba(9,175,246,0.15);
  --b-teal:   rgba(0,191,179,0.15);
  --b-berry:  rgba(214,51,132,0.15);
  --b-purple: rgba(139,92,246,0.15);
  --b-amber:  rgba(245,158,11,0.18);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  --r-btn:  5px;
  --r-card: 10px;

  --ease:      0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--sans);
  background: var(--bg-base);
  color: var(--t1);
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; }
a.blue-link { color: var(--blue); text-decoration: none; }
a.blue-link:hover { filter: brightness(1.1); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ================================================================
   SKIP LINK
================================================================ */
.skip-link {
  position: absolute; top: -120%; left: 1rem;
  padding: 0.5rem 1.25rem;
  background: var(--blue); color: #000;
  font-weight: 700; font-family: var(--sans);
  text-decoration: none; z-index: 9999; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ================================================================
   HEADER
================================================================ */
.site-header {
  background: radial-gradient(ellipse at 50% 90%, rgba(9,175,246,0.2) 0%, transparent 80%);
  padding: 0.5rem 0rem 0rem;
  text-align: center;
  position: relative; z-index: 200;
  border-bottom: 1px solid var(--bg-base);
}

.header-logo {
  display: inline-block; margin-bottom: 0.5rem; line-height: 0;
}
.header-logo img { height: 130px; width: auto; margin: 0 auto; }

.logo-fb {
  display: none; align-items: center; gap: 0.6rem; height: 88px;
}
.logo-fb-mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-bt);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: #090C10;
}
.logo-fb-name {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 700;
  letter-spacing: 0.07em;
  background: var(--grad-bt);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.main-nav { display: flex; justify-content: center; flex-wrap: wrap; }

.main-nav a {
  display: inline-block; color: #fff; text-decoration: none;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 1rem 0.75rem 1rem; position: relative;
  transition: color var(--ease);
}
.main-nav a::after {
  content: '';
  position: absolute; bottom: 0; left: 1.1rem; right: 1.1rem;
  height: 2px; background: var(--grad-bt);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--ease);
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--blue); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ================================================================
   BUTTONS
================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.75rem;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase;
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--ease), box-shadow var(--ease), filter var(--ease), color var(--ease), border-color var(--ease);
  min-width: 200px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.38); }
.btn:active { transform: translateY(0); }
.btn-bt { background: var(--grad-bt); color: var(--darksky); }
.btn-bt:hover { filter: brightness(1.1); }
.btn-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,0.22); color: var(--t1);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--t1); box-shadow: none; }

.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ================================================================
   SHARED LAYOUT
================================================================ */
.s-line {
  width: 220px; height: 1px; margin: 0 auto 1rem; border: none; display: block;
}
.s-line-bt {
  background: linear-gradient(90deg, transparent, rgba(9,175,246,0.45), rgba(0,191,179,0.45), transparent);
}

/* ================================================================
   SCROLL REVEAL
================================================================ */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.65s ease, transform 0.65s ease; }
.rv.vis { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; }

/* ================================================================
   HAMBURGER TOGGLE
================================================================ */
.nav-toggle {
  display: none;
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 4px; z-index: 200;
}
.nav-toggle span {
  display: block; width: 30px; height: 2px;
  background: var(--blue); border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.20s ease;
  transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   MOBILE NAV OVERLAY
================================================================ */
.mobile-nav {
  position: fixed; top: 150px; right: 0; bottom: 0; left: 0;
  background: rgba(9,12,16,0.97);
  z-index: 150;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a {
  display: block; font-family: var(--sans);
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t1); text-decoration: none;
  padding: 1rem 2rem; transition: color var(--ease);
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible { color: var(--blue); }
.mobile-nav a[aria-current="page"] { color: var(--blue); }

@media (max-width: 768px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* ================================================================
   BACK TO TOP
================================================================ */
.back-to-top {
  position: fixed; bottom: 2rem; right: 1rem;
  width: 42px; height: 42px;
  background: var(--bg-elevated); border: 2px solid var(--b-dim);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--t2); font-size: 1rem; cursor: pointer;
  z-index: 120; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
              background var(--ease), color var(--ease), border-color var(--ease);
}
.back-to-top.is-visible { opacity: .9; visibility: visible; transform: translateY(0); }
.back-to-top:hover {
  background: var(--bg-card-hi); color: var(--blue);
  border-color: var(--b-blue); transform: translateY(-2px);
}
.back-to-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ================================================================
   FOOTER
================================================================ */
.site-footer {
  background: var(--bg-base);
  border-top: 1px solid var(--b-dim);
  padding: 3.5rem 1.5rem 1.5rem;
}
.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 200px 1fr 200px;
  gap: 3rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--b-dim); margin-bottom: 1.5rem;
}
.f-brand p { font-size: 0.9rem; color: var(--t2); line-height: 1.7; margin-top: 1rem; }
.f-brand img { margin: auto; width: 100%; }
.f-nav-cols { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.fnc h4 {
  font-family: var(--sans);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--t2); margin-bottom: 0.85rem;
}
.fnc ul { list-style: none; }
.fnc li { margin-bottom: 0.45rem; }
.fnc a { font-size: 0.9rem; color: var(--t1); text-decoration: none; transition: color var(--ease); }
.fnc a:hover { color: var(--blue); }
.f-info { text-align: right; }
.f-info p { font-size: 0.9rem; color: var(--t2); line-height: 1.7; }
.f-info a { color: var(--t1); text-decoration: none; transition: color var(--ease); }
.f-info a:hover { color: var(--blue); }
.f-socials { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }
.soc-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--b-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: var(--t2); text-decoration: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.soc-btn:hover { background: var(--bg-card-hi); color: var(--blue); border-color: var(--b-blue); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--t3); flex-wrap: wrap; gap: 0.5rem;
}
.footer-bottom a { color: var(--t3); text-decoration: none; transition: color var(--ease); }
.footer-bottom a:hover { color: var(--blue); }

/* ================================================================
   PAGE HERO
================================================================ */
.page-hero {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--b-dim);
  padding: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(9,175,246,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 600; line-height: 1;
  color: var(--t1); margin-bottom: 1rem;
  position: relative;
}
.page-hero .s-line { margin-bottom: 1rem; }
.page-hero p {
  font-size: 1rem; color: var(--t1);
  max-width: 600px; margin: 0 auto; line-height: 1.7;
  position: relative;
}

/* ================================================================
   SECTION CARDS (expandable accordion) — used on every interior page
================================================================ */
.sc-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

.sc-card {
  background: var(--bg-elevated);
  border: 1px solid var(--b-dim);
  overflow: hidden;
  transition: border-color var(--ease);
}
.sc-card.is-open { border-color: rgba(9,175,246,0.3); }

.sc-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 1.5rem;
  text-align: left; display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  color: var(--t1);
  transition: background var(--ease);
}

.sc-toggle:focus-visible { outline-offset: -3px; }
.sc-toggle:hover { background: rgba(9,175,246,0.04); }
.sc-card.is-open .sc-toggle { background: rgba(9,175,246,0.04); }

.sc-toggle-text { flex: 1; min-width: 0; }
.sc-toggle-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600; color: var(--t1);
  margin-bottom: 0.5rem; line-height: 1.2;
}
.sc-toggle-text p {
  font-size: 1rem; color: var(--t1); line-height: 1.7;
  font-family: var(--sans);
}

.sc-chevron {
  font-size: 1.2rem; color: var(--blue); flex-shrink: 0;
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1), color var(--ease);
}
.sc-card.is-open .sc-chevron { transform: rotate(180deg); }
/* First subsection on any page always uses the muted chevron color,
   regardless of its card's assigned color — keyed off each page's first
   section id in that page's own stylesheet (e.g. #our-story, #calendar). */

/* Smooth height via CSS grid trick */
.sc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.4,0,0.2,1);
}
.sc-card.is-open .sc-body { grid-template-rows: 1fr; }
.sc-body-inner { overflow: hidden; }

.sc-content {
  padding: 2rem;
  border-top: 1px solid var(--b-dim);
}

/* Note: the .card-blue / .card-purple / .card-berry / .card-teal color
   variants (background tint, chevron color, and page-specific content
   color overrides like .faq-a-text or .teacher-col-bio p) are NOT defined
   here — the mockup defines only the specific variants each page actually
   uses, mixed with that page's own content selectors, so each page's own
   stylesheet carries its own copy of exactly the variants it needs
   (matching the mockup's per-file duplication) rather than a generalized
   version here that could drift from the real per-page rules.

   First-subsection chevron color (always --t2 regardless of card color)
   is likewise page-specific — keyed off each page's first section id,
   e.g. #our-story, #calendar — and defined in that page's own stylesheet.

   The name-divider-line pattern (.teacher-col-bio h3::after /
   .ms-diane-text h3::after) is Studio-specific and lives in Studio's
   own stylesheet (task: Studio page build).

   .story-layout (text + side image) is Studio-specific (Our Story) and
   likewise lives in Studio's own stylesheet. */

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 768px) {
  .page-hero { padding: 1.5rem; }

  .sc-toggle { padding: 1.25rem; }
  .sc-content { padding: 1.25rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .f-info { text-align: left; }
  .f-socials { justify-content: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 920px) {
  .f-brand img { width: 70% !important; }
}