/* ============================================
   The Anger Academy — Stylesheet (v2)
   Matches the existing live site's visual identity:
   white nav, photo hero with dark overlay text,
   grey/white wave-divided sections, red photo callouts,
   dark footer.
   ============================================ */

:root {
  --color-bg: #FFFFFF;
  --color-section-grey: #EFEFEF;
  --color-ink: #2B2B2B;
  --color-ink-soft: #5A5A5A;
  --color-red: #D5365B;
  --color-red-dark: #B82C4C;
  --color-green: #6FAE2E;
  --color-green-dark: #5E9626;
  --color-line: #DCDCDC;
  --color-footer-bg: #1A1A1A;
  --color-footer-text: #C9C9C9;

  --font-display: 'Quicksand', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --container-width: 1140px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.7;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 0.5em;
  color: var(--color-ink-soft);
}

p { margin: 0 0 1em; }

a { color: var(--color-red); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 2px;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.logo:hover { text-decoration: none; }
.logo .logo-mark { color: var(--color-red); font-size: 1.4rem; }

.main-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--color-red);
  text-decoration: none;
  border-bottom-color: var(--color-red);
}

/* ---------- Full-height "slide" sections + custom backgrounds ---------- */

.full-height-section {
  height: 100vh;   /* fallback for browsers without dvh support */
  height: 100dvh;  /* accounts for mobile browser address bar showing/hiding,
                       so content isn't cut off behind it - this is the actual
                       fixed-height behavior you asked for, working correctly
                       on mobile rather than just on desktop */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.full-height-section .container {
  max-height: 100%;
}
.full-height-section.photo-callout {
  display: flex;
}

/* On small screens, a section with overflow-y:auto becomes its own
   scroll container - any touch-drag that starts inside it scrolls
   that section instead of the page, which traps the user on the
   first section. Below this breakpoint, sections grow to fit their
   content naturally and the page itself scrolls, instead of forcing
   a fixed viewport height with internal scrolling. */
@media (max-width: 760px) {
  .full-height-section {
    height: auto;
    min-height: 100svh;
    overflow-y: visible;
  }
  .full-height-section .container {
    max-height: none;
  }
}

.section-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Sections that can receive a background overlay need their direct
   content wrapper raised above the overlay layer (z-index 2) */
.wave-section > .container,
.hero > .hero-content,
.photo-callout > .callout-box {
  position: relative;
  z-index: 2;
}

.has-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Section edge transitions (admin-controlled) ---------- */

/* These render as a decorative shape belonging to THIS section, biting
   into its own top/bottom edge - not overlapping the neighbouring
   section. This matches how the section's own background naturally
   paints on top of whatever came before it in normal document order,
   without needing any z-index tricks (which proved unreliable across
   sections with their own backgrounds/overlays). */
.section-edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  background-color: var(--edge-color, #FFFFFF);
}
.section-edge-top {
  top: 0;
}
.section-edge-bottom {
  bottom: 0;
}

.section-edge-wave.section-edge-top {
  clip-path: polygon(0 100%, 2% 0%, 4% 100%, 8% 20%, 12% 100%, 18% 10%, 24% 100%, 32% 40%, 40% 80%, 48% 70%, 56% 65%, 65% 62%, 75% 60%, 85% 52%, 95% 50%, 100% 48%, 100% 0%, 0% 0%);
}
.section-edge-wave.section-edge-bottom {
  clip-path: polygon(0 0%, 2% 100%, 4% 0%, 8% 80%, 12% 0%, 18% 90%, 24% 0%, 32% 60%, 40% 20%, 48% 30%, 56% 35%, 65% 38%, 75% 40%, 85% 48%, 95% 50%, 100% 52%, 100% 100%, 0% 100%);
}

.section-edge-diagonal.section-edge-top {
  clip-path: polygon(0 100%, 100% 0%, 100% 100%, 0% 100%);
}
.section-edge-diagonal.section-edge-bottom {
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 0%);
}

.section-edge-straight {
  display: none; /* "straight" means no transition shape at all */
}

/* ---------- Uploaded logo ---------- */

.logo-image {
  /* Actual width is set inline per-page from the admin-configured
     Logo Width setting (Site Settings), which always wins over the
     image file's own intrinsic dimensions - no !important needed here.
     This is just a sane fallback if the inline style is ever missing. */
  height: auto;
  max-height: 60px;
  min-height: 0;
  min-width: 0;
  display: block;
  flex-shrink: 0;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: #4a5a4a;
  background-image: linear-gradient(135deg, #3d4a3d 0%, #6b7d5e 50%, #8a9a6f 100%);
}

.hero-overlay-title {
  display: inline-block;
  background: rgba(60, 60, 60, 0.72);
  color: #fff;
  padding: 18px 28px;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 28px;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 60px 24px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
  max-width: var(--container-width);
  margin: 0 auto;
}

.hero-video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  background: #000;
  aspect-ratio: 16 / 9;
}
.hero-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hero-info-box {
  background: rgba(40, 40, 40, 0.78);
  color: #fff;
  padding: 28px 32px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-info-box p { color: #eee; font-size: 1.05rem; }
.hero-dates-note {
  color: #FFB4C2;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1.2em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
  width: fit-content;
}
.btn-green {
  background: var(--color-green);
  color: #fff;
}
.btn-green:hover { background: var(--color-green-dark); text-decoration: none; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 12px 24px;
}
.btn-outline:hover { border-color: var(--color-ink-soft); text-decoration: none; background: #f7f7f7; }

@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: 20px 0; }
}

/* ---------- Wave-divided text sections ---------- */

.wave-section {
  position: relative;
  padding: 90px 0 110px;
  background: var(--color-section-grey);
}
.wave-section.alt { background: #fff; }

.wave-section .container { max-width: 760px; }

.wave-section h2 {
  font-size: 2rem;
  text-align: center;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 0.9em;
}
.wave-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--color-ink-soft);
}

.wave-section p { color: var(--color-ink-soft); font-size: 1rem; }
.wave-section strong { color: var(--color-ink); }

.section-nav-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 2em;
  flex-wrap: wrap;
}

/* Decorative wave divider between grey/white sections */
.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px;
}
.wave-section + .wave-section,
.photo-callout + .wave-section,
.wave-section + .photo-callout {
  margin-top: 0;
}

/* ---------- Photo callout sections ---------- */

.photo-callout {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: #777;
}
.photo-callout.callout-dandelion { background-image: linear-gradient(160deg, #4a6a9a 0%, #87a8cc 100%); }
.photo-callout.callout-log { background-image: linear-gradient(160deg, #3d5a3d 0%, #7a9a5e 100%); }
.photo-callout.callout-stats { background-image: linear-gradient(160deg, #8a7a5e 0%, #c2b89a 100%); }

.callout-box {
  background: rgba(213, 54, 91, 0.88);
  color: #fff;
  padding: 28px 36px;
  max-width: 480px;
  margin: 0 24px;
}
.callout-box h3 {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 0.6em;
}
.callout-box ul {
  list-style: disc;
  padding-left: 1.2em;
  margin: 0;
}
.callout-box li {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.98rem;
}
.callout-box.centered {
  margin: 0 auto;
  text-align: center;
  max-width: 640px;
}
.callout-box.centered h3 { font-size: 1.5rem; font-weight: 400; font-family: var(--font-display); }

/* ---------- Expandable curriculum rows ---------- */

.curriculum-part {
  margin-bottom: 2.4em;
}
.curriculum-part-title {
  color: var(--color-green-dark);
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}
.curriculum-part-detail {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-bottom: 1.2em;
}

.topic-row {
  border: 1px solid var(--color-line);
  background: #fff;
  margin-bottom: 8px;
  border-radius: 2px;
}
.topic-row summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.topic-row summary::-webkit-details-marker { display: none; }
.topic-row summary::before {
  content: '+';
  color: var(--color-ink-soft);
  font-weight: 400;
  font-size: 1.1rem;
}
.topic-row[open] summary::before { content: '\2212'; }
.topic-row .topic-detail {
  padding: 0 16px 14px 42px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.topics-flow {
  font-size: 0.9rem;
  color: var(--color-green-dark);
  line-height: 1.9;
}
.topics-flow span:not(:last-child)::after {
  content: ' \2022 ';
  color: var(--color-ink-soft);
}

/* ---------- Costs ---------- */

.cost-figure {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
}
.cost-figure .struck { text-decoration: line-through; color: #999; font-weight: 400; }

.cost-list { padding-left: 1.2em; }
.cost-list li { margin-bottom: 8px; color: var(--color-ink-soft); }

.payment-option {
  margin-bottom: 1.2em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid var(--color-line);
}
.payment-option-label { color: var(--color-red); font-weight: 700; }
.struck-block { text-decoration: line-through; color: #999; }

.reading-list {
  columns: 2;
  column-gap: 32px;
  padding-left: 1.2em;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.reading-list li { margin-bottom: 8px; }
@media (max-width: 600px) { .reading-list { columns: 1; } }

/* ---------- Schedule ---------- */

.schedule-section {
  background: #5E8576;
  color: #fff;
}
.schedule-section h2 { color: #fff; }
.schedule-section h2::after { background: #fff; }
.schedule-section .container { max-width: 980px; }

.schedule-notice {
  background: rgba(0,0,0,0.2);
  border-left: 3px solid rgba(255,255,255,0.5);
  padding: 14px 18px;
  margin-bottom: 28px;
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.schedule-notice p { margin: 0; font-size: 0.92rem; color: #e8f0ed; flex: 1; }
.schedule-notice-dismiss {
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.7);
  padding: 4px 10px;
  font-size: 0.78rem;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.schedule-notice-dismiss:hover { background: rgba(255,255,255,0.1); }
.schedule-times-label { margin-bottom: 2px; }

.schedule-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
}
.schedule-grid h3 { color: #fff; font-size: 1.1rem; margin-bottom: 0.5em; }
.schedule-grid u { text-decoration: underline; }

.schedule-dates-list { list-style: none; padding: 0; margin: 0 0 1em; }
.schedule-dates-list li { margin-bottom: 6px; }
.schedule-dates-list .struck-block { color: #cfe0d8; }

.schedule-total-box {
  background: #fff;
  color: var(--color-ink);
  padding: 20px 24px;
  border-radius: var(--radius);
  margin-top: 16px;
}
.schedule-total-box h4 {
  font-family: var(--font-display);
  text-decoration: underline;
  font-size: 1.1rem;
  margin-bottom: 0.6em;
  font-weight: 400;
}
.schedule-total-box p { margin-bottom: 6px; font-size: 0.95rem; }

@media (max-width: 760px) { .schedule-grid { grid-template-columns: 1fr; } }

/* ---------- Apply ---------- */

.apply-section { text-align: center; }
.apply-list {
  text-align: left;
  max-width: 560px;
  margin: 0 auto 1.6em;
  padding-left: 1.2em;
}
.apply-list li { margin-bottom: 10px; color: var(--color-ink-soft); }
.apply-list .tag { color: var(--color-red); font-weight: 700; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 56px 0 28px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 40px;
}
.footer-col h4 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  border-bottom: 1px solid #3A3A3A;
  margin-bottom: 16px;
}
.footer-col p { margin-bottom: 1em; }
.footer-col a { color: var(--color-red); }
.footer-social { display: flex; gap: 10px; margin-top: 10px; }
.footer-social a {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.footer-social a:hover { text-decoration: none; background: var(--color-red-dark); }
.footer-apply-steps { list-style: none; padding: 0; margin: 0 0 1em; }
.footer-apply-steps li {
  padding: 10px 0;
  border-bottom: 1px solid #2E2E2E;
  font-size: 0.88rem;
}
.footer-bottom {
  border-top: 1px solid #2E2E2E;
  padding-top: 20px;
  font-size: 0.8rem;
  color: #888;
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Burger menu toggle ---------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile nav adjustments ---------- */

@media (max-width: 900px) {
  .header-inner { padding: 14px 24px; }
  .nav-toggle { display: flex; }

  /* Only collapse into a dropdown when a toggle button is present
     (the main homepage). Simpler pages without the toggle/JS - like
     the application form - keep the nav visible and let it wrap. */
  .nav-toggle ~ .main-nav {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    padding: 8px 24px 16px;
  }
  .nav-toggle ~ .main-nav.is-open {
    display: flex;
  }
  .nav-toggle ~ .main-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-line);
  }
  .nav-toggle ~ .main-nav a:last-child {
    border-bottom: none;
  }

  /* Pages without a toggle button: keep the old wrap-on-small-screens behavior */
  .header-inner:not(:has(.nav-toggle)) .main-nav {
    gap: 14px;
    justify-content: center;
  }
}