/* ============================================================
   Wendy B. Yoga — Stylesheet
   ------------------------------------------------------------
   Color palette:
     --sky-blue      #a1c6ea  (soft blue)
     --sky-blue-pale #cfe1f2  (pale blue, gradient floor — keeps hero/contact
                               tinted instead of fading out to page white)
     --sage          #8f9b6b  (sage green)
     --off-white     #f1f1f1  (off-white / section backgrounds)
     --warm-sand     #e8ddd0  (warm neutral, alternate section bg)
     --deep-sage     #5c6b4f  (deep accent, headings/buttons/contrast text)
   ============================================================ */

:root {
  --sky-blue: #a1c6ea;
  --sky-blue-pale: #cfe1f2;
  --sage: #8f9b6b;
  --off-white: #f1f1f1;
  --warm-sand: #e8ddd0;
  --deep-sage: #5c6b4f;

  --text-main: #33352e;
  --text-soft: #5a5d52;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-nav: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1100px;
  --radius: 14px;
}

/* ---------- Reset / base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--off-white);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--deep-sage);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

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

section {
  padding: 80px 0;
}

.section-intro {
  max-width: 640px;
  color: var(--text-soft);
  margin-top: 12px;
  margin-bottom: 40px;
}

/* ---------- Eyebrow labels ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background-color: var(--deep-sage);
  color: var(--off-white);
  box-shadow: 0 4px 14px rgba(92, 107, 79, 0.25);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(92, 107, 79, 0.3);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--deep-sage);
  color: var(--deep-sage);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--deep-sage);
  color: var(--off-white);
  transform: translateY(-2px);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(241, 241, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(92, 107, 79, 0.15);
}

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

.wordmark {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--deep-sage);
  letter-spacing: 0.03em;
}

.wordmark span {
  color: var(--sage);
  font-style: italic;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  position: relative;
  padding-bottom: 4px;
}

/* Nav-scale variant of .btn — the default button padding/size is tuned
   for hero and form use and overwhelms the header bar */
.nav-cta {
  font-family: var(--font-nav);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 22px;
  /* An <a> won't center its own text the way a <button> does, and this
     goes full-width in the mobile menu */
  text-align: center;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--sage);
  transition: width 0.2s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--deep-sage);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--sky-blue) 0%, var(--sky-blue-pale) 100%);
  padding-top: 90px;
  /* No bottom padding so the marquee strip sits flush on the hero's
     lower edge; .hero-inner carries the spacing instead */
  padding-bottom: 0;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(320px 320px at 88% 12%, rgba(143, 155, 107, 0.22), transparent 70%),
    radial-gradient(260px 260px at 6% 92%, rgba(161, 198, 234, 0.35), transparent 70%);
}

/* min-height keeps the background photo readable — without the portrait
   the row would otherwise collapse to the height of the copy alone */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 56px;
  min-height: 520px;
  padding-bottom: 72px;
}

/* ---------- Hero marquee ---------- */
.hero-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 14px 0;
  background-color: rgba(241, 241, 241, 0.45);
  border-top: 1px solid rgba(92, 107, 79, 0.15);
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}

.hero-marquee-item {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--deep-sage);
  white-space: nowrap;
  padding-right: 56px;
}

/* Decorative separator sitting in the gap between repeats */
.hero-marquee-item::after {
  content: '\00B7';
  margin-left: 56px;
  color: var(--sage);
}

/* Lets a visitor stop the motion to read it — WCAG 2.2.2 */
.hero-marquee:hover .hero-marquee-track,
.hero-marquee:focus-within .hero-marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Capped so the headline doesn't run the full container width now that
   the hero copy is the only thing in the row */
.hero-text {
  flex: 1;
  max-width: 620px;
}

.hero h1 {
  font-size: clamp(2.7rem, 5.5vw, 3.8rem);
  margin-bottom: 16px;
}

.tagline {
  font-size: 1.15rem;
  color: var(--text-soft);
  max-width: 480px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.hero-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-soft);
}

.hero-features i {
  color: var(--sage);
  font-size: 0.85rem;
}

/* ============================================================
   PHOTO HERO — preview treatment
   ------------------------------------------------------------
   Puts the pop-up class photo behind the hero and flips the hero
   text to light so it stays readable over the image.
   To go back to the blue gradient hero, delete this whole block.
   ============================================================ */
.hero {
  background-image: url('images/wendybyoga-background-grass.jpg');
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

/* Scrim: heaviest on the left behind the copy, clearing toward the
   right so the photo still reads */
.hero-bg {
  background: linear-gradient(100deg,
    rgba(38, 44, 32, 0.9) 0%,
    rgba(38, 44, 32, 0.78) 42%,
    rgba(38, 44, 32, 0.35) 100%);
}

.hero .eyebrow {
  color: var(--warm-sand);
}

.hero h1 {
  color: var(--off-white);
}

.hero .tagline,
.hero .hero-features li {
  color: rgba(241, 241, 241, 0.92);
}

.hero .hero-features i {
  color: var(--warm-sand);
}

.hero .btn-outline {
  border-color: var(--off-white);
  color: var(--off-white);
}

.hero .btn-outline:hover,
.hero .btn-outline:focus-visible {
  background-color: var(--off-white);
  color: var(--deep-sage);
}

.hero-marquee {
  background-color: rgba(38, 44, 32, 0.6);
  border-top-color: rgba(241, 241, 241, 0.25);
}

.hero-marquee-item {
  color: var(--off-white);
}

.hero-marquee-item::after {
  color: var(--warm-sand);
}

/* Stacked layout needs an even scrim, since the copy is full-width */
@media (max-width: 860px) {
  .hero-bg {
    background: rgba(38, 44, 32, 0.82);
  }
}

/* ---------- About ---------- */
.about {
  background-color: var(--off-white);
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

.about-image {
  flex: 0 0 420px;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 6px solid var(--warm-sand);
  box-shadow: 0 20px 40px rgba(92, 107, 79, 0.2);
}

.about-text {
  flex: 1;
}

.about-text h2 {
  margin-bottom: 16px;
}

.about-text p {
  margin-bottom: 14px;
  color: var(--text-soft);
}

.pull-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--deep-sage);
  border-left: 3px solid var(--sage);
  padding-left: 20px;
  margin: 20px 0;
  line-height: 1.4;
}

/* ---------- Class Types ---------- */
.classes {
  background-color: var(--off-white);
}

.classes h2,
.offerings h2,
.contact h2 {
  margin-bottom: 4px;
}

/* 280px min resolves to exactly three columns at full width, so the row
   is deliberate rather than an artifact of how many cards happen to exist */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.class-card {
  display: flex;
  flex-direction: column;
  background-color: var(--warm-sand);
  border-radius: var(--radius);
  padding: 28px 24px;
  border-top: 4px solid var(--sage);
  box-shadow: 0 8px 20px rgba(51, 53, 46, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.class-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(51, 53, 46, 0.1);
}

.class-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(143, 155, 107, 0.15);
  color: var(--deep-sage);
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.class-card h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.class-card p {
  color: var(--text-soft);
  font-size: 0.98rem;
}

/* ---------- Intensity meter ---------- */
.intensity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(92, 107, 79, 0.12);
}

.intensity-label {
  font-family: var(--font-nav);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.intensity-dots {
  display: flex;
  gap: 5px;
}

.intensity-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(92, 107, 79, 0.18);
}

.intensity-dots .is-filled {
  background-color: var(--sage);
}

/* ---------- Offerings ---------- */
.offerings {
  background-color: var(--warm-sand);
}

.offering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.offering-card {
  display: flex;
  flex-direction: column;
  background-color: var(--off-white);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: 0 8px 20px rgba(51, 53, 46, 0.06);
}

.offering-card h3 {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.offering-price {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--deep-sage);
  margin-bottom: 14px;
}

.offering-unit {
  font-family: var(--font-nav);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.offering-desc {
  color: var(--text-soft);
  font-size: 0.98rem;
  margin-bottom: 18px;
}

.offering-list {
  list-style: none;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(92, 107, 79, 0.15);
}

.offering-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.94rem;
  color: var(--text-main);
}

.offering-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--sage);
}

/* ---------- Upcoming pop-up dates ---------- */
.popup-dates {
  margin-top: 40px;
}

.popup-heading {
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.popup-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
}

.popup-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  background-color: var(--off-white);
  border-left: 4px solid var(--sage);
  border-radius: var(--radius);
  padding: 18px 24px;
}

.popup-date {
  font-weight: 700;
  color: var(--deep-sage);
  min-width: 150px;
}

.popup-time {
  color: var(--text-soft);
  min-width: 90px;
}

.popup-location {
  color: var(--text-main);
  font-weight: 500;
}

.popup-note {
  margin-top: 14px;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
}

/* ---------- Contact ---------- */
.contact {
  background: linear-gradient(160deg, var(--sky-blue) 0%, var(--sky-blue-pale) 100%);
}

.contact-inner {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.contact-form-wrap {
  flex: 1.4;
}

.contact-social {
  flex: 1;
  background-color: rgba(241, 241, 241, 0.7);
  border-radius: var(--radius);
  padding: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.contact-form label {
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 6px;
  color: var(--deep-sage);
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid rgba(92, 107, 79, 0.3);
  border-radius: 10px;
  background-color: var(--off-white);
  color: var(--text-main);
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(143, 155, 107, 0.25);
}

.contact-form button {
  margin-top: 24px;
  align-self: flex-start;
}

.form-status {
  margin-top: 16px;
  font-weight: 600;
}

.social-icons {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--deep-sage);
  color: var(--off-white);
  font-size: 1.2rem;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
  background-color: var(--sage);
  transform: translateY(-2px);
}

/* ---------- Legal pages ---------- */
.legal {
  background-color: var(--off-white);
}

.legal-content {
  max-width: 740px;
}

.legal-content h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin-bottom: 8px;
}

.legal-updated {
  color: var(--text-soft);
  font-size: 0.92rem;
  margin-bottom: 32px;
}

.legal-content h2 {
  font-size: 1.4rem;
  margin-top: 36px;
  margin-bottom: 12px;
}

.legal-content p {
  color: var(--text-soft);
  margin-bottom: 14px;
}

.legal-content a {
  color: var(--deep-sage);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-list {
  color: var(--text-soft);
  margin: 0 0 14px 1.4em;
  list-style: disc;
}

.legal-list li {
  margin-bottom: 6px;
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--deep-sage);
  color: var(--off-white);
  text-align: center;
  padding: 48px 0 28px;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer-wordmark {
  color: var(--off-white);
}

.footer-wordmark span {
  color: var(--sky-blue);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.footer-nav .nav-link {
  color: rgba(241, 241, 241, 0.85);
  font-weight: 500;
}

.footer-nav .nav-link::after {
  background-color: var(--sky-blue);
}

.footer-social .social-icon {
  background-color: rgba(241, 241, 241, 0.12);
}

.footer-social .social-icon:hover,
.footer-social .social-icon:focus-visible {
  background-color: var(--sage);
}

.footer-copyright {
  color: rgba(241, 241, 241, 0.6);
  padding-top: 12px;
  border-top: 1px solid rgba(241, 241, 241, 0.15);
  width: 100%;
}

.footer-copyright a {
  color: rgba(241, 241, 241, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-copyright a:hover,
.footer-copyright a:focus-visible {
  color: var(--sky-blue);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Collapse the marquee to a single static centered line */
  .hero-marquee-track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .hero-marquee-item[aria-hidden="true"] {
    display: none;
  }

  .hero-marquee-item {
    padding-right: 0;
  }

  .hero-marquee-item::after {
    content: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-inner,
  .about-inner,
  .contact-inner {
    flex-direction: column;
    text-align: left;
  }

  .about-inner {
    text-align: center;
  }

  .about-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
  }

  .about-inner .pull-quote {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
  }
}

/* Nav collapses at 860px rather than 700px — six items including the
   Book a Class button overflow the header bar below ~860px */
@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--off-white);
    border-bottom: 1px solid rgba(92, 107, 79, 0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .primary-nav.open {
    max-height: 400px;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .primary-nav li {
    border-top: 1px solid rgba(92, 107, 79, 0.1);
  }

  .nav-link {
    display: block;
    padding: 14px 0;
  }

  .nav-cta-item {
    border-top: none;
  }

  .nav-cta {
    display: block;
    width: 100%;
    margin-top: 16px;
  }
}

@media (max-width: 700px) {
  section {
    padding: 56px 0;
  }

  .popup-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2.3rem;
  }
}