/* ─────────────────────────────────────────────────────────────
   Yogalina · shared styles
   Single source of truth for design tokens — see DESIGN.md
   before changing anything here.
   RTL site: use logical properties only (inline-start/end,
   block-start/end) — never left/right.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  /* Palette (see DESIGN.md for usage rules) */
  --cream:       #F7F3ED;  /* main page background — never pure white */
  --dusty-blue:  #CADFE9;  /* hero / top section backgrounds */
  --lilac:       #E5D5EC;  /* alternating content section backgrounds */
  --sage:        #C9D6C5;  /* quote boxes, practice/lesson cards */
  --dusty-pink:  #E8CFCF;  /* soft accents, tags */
  --green:       #2E8B6B;  /* LARGE headings + icons/accents only (3.8:1 on cream) */
  --green-dark:  #236B52;  /* small headings, links, primary button bg — AA on all bgs */
  --green-hover: #1B5843;  /* primary button hover */
  --purple:      #4A3B6B;  /* inline emphasis, secondary buttons/outlines */
  --beige:       #B89F8D;  /* dividers, borders, muted anchors */
  --ink:         #2C2418;  /* body text */
  --surface:     #FDFBF7;  /* card surfaces (slightly lighter than cream) */

  /* Typography */
  --font-display: 'Varela Round', 'Assistant', system-ui, sans-serif;
  --font-body: 'Assistant', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.5rem, 8vw, 3.75rem);   /* h1 display */
  --fs-h1:      clamp(2.1rem, 6vw, 2.9rem);    /* page titles */
  --fs-h2:      clamp(1.7rem, 5vw, 2.25rem);   /* section headings */
  --fs-h3:      1.35rem;                        /* card titles */
  --fs-lede:    1.125rem;                       /* intro paragraphs */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.8rem;                         /* eyebrows, captions */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape & motion */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --shadow-soft: 0 6px 24px rgba(44, 36, 24, 0.08);
  --shadow-lift: 0 12px 32px rgba(44, 36, 24, 0.12);
  --ease: 0.2s ease;

  --content-max: 68rem;   /* ~1088px */
  --text-max: 42rem;      /* comfortable reading measure */
}

/* ── Base ── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Varela Round ships a single weight */
  line-height: 1.25;
  color: var(--green-dark);
}

p { max-width: var(--text-max); }

/* Assistant's heaviest loaded weight is 600 — avoid faux-bold 700 */
strong, b { font-weight: 600; }

a { color: var(--green-dark); }

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

/* keep the hidden attribute working on elements whose class sets display */
[hidden] { display: none !important; }

::selection { background: var(--dusty-pink); }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* English fragments inside Hebrew text */
[dir="ltr"] { unicode-bidi: isolate; }

/* ── Layout helpers ── */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-6); }
.section--cream { background: var(--cream); }
.section--lilac { background: var(--lilac); }
.section--blue  { background: var(--dusty-blue); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--purple);
  margin-block-end: var(--space-3);
}

.section-title {
  font-size: var(--fs-h2);
  margin-block-end: var(--space-4);
}

.lede {
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.75;
}

/* ── Buttons ──
   Primary: green bg + cream text. Secondary: purple outline.
   Never place buttons on lilac / dusty-blue surfaces. */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease),
              border-color var(--ease), transform var(--ease);
}
.btn-primary {
  background: var(--green-dark);
  color: var(--cream);
  border: 1.5px solid var(--green-dark);
}
.btn-primary:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--dusty-pink); /* solid fill so the button pops on any section bg */
  color: var(--purple);
  border: 1.5px solid var(--purple);
}
.btn-secondary:hover {
  background: var(--purple);
  color: var(--cream);
  transform: translateY(-1px);
}
.btn-primary svg,
.btn-secondary svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Text link with arrow (RTL: forward = left) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
}
.link-arrow:hover { color: var(--green-hover); text-decoration: underline; }
.link-arrow svg { width: 16px; height: 16px; }

/* ── Header / navigation ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-block-end: 1px solid rgba(184, 159, 141, 0.35); /* beige @ 35% */
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand img {
  display: block;
  block-size: 4.5rem;
  inline-size: auto;
}
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  padding: 10px;
  background: none;
  border: none;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  inline-size: 100%;
  block-size: 2px;
  border-radius: 2px;
  background: var(--green-dark);
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.open {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--cream);
  border-block-end: 1px solid rgba(184, 159, 141, 0.35);
  box-shadow: var(--shadow-soft);
}
.site-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-5) var(--space-5);
}
.site-nav a {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-s);
  transition: color var(--ease), background-color var(--ease);
}
.site-nav a:hover { color: var(--green-dark); }
.site-nav a[aria-current="page"] {
  color: var(--green-dark);
  font-weight: 600;
}

@media (min-width: 68rem) {
  .nav-toggle { display: none; }
  .site-nav,
  .site-nav.open {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
  }
  .site-nav ul {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
  }
  .site-nav a {
    padding: var(--space-2) var(--space-3);
    font-size: 0.95rem;
    white-space: nowrap;
  }
}

/* ── Hero ── */
.hero {
  background: var(--dusty-blue);
  padding-block: var(--space-6) var(--space-6);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  text-align: center;
}
.hero-photo {
  inline-size: 100%;
  max-inline-size: 26rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-lift);
}
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 400;
  color: var(--green-dark);
  margin-block-end: var(--space-4);
}
.hero-text .eyebrow { margin-block-end: var(--space-2); }
.hero-text .lede { margin-inline: auto; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block-start: var(--space-6);
}
.name-accent { color: var(--purple); font-weight: 600; }

@media (min-width: 45rem) {
  .hero { padding-block: var(--space-7) var(--space-7); }
  .hero-inner {
    flex-direction: row-reverse; /* photo at inline-end */
    text-align: start;
    justify-content: space-between;
  }
  .hero-text { max-inline-size: 34rem; }
  .hero-text .lede { margin-inline: 0; }
  .hero-photo { max-inline-size: 24rem; }
}

/* ── Cards ── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 45rem) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid rgba(184, 159, 141, 0.4);
  border-radius: var(--radius-m);
  padding: var(--space-5);
  transition: box-shadow var(--ease), transform var(--ease);
}
.card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.card h3 { font-size: var(--fs-h3); }
.card p { font-weight: 300; }
.card .link-arrow { margin-block-start: auto; }
.card--sage { background: var(--sage); border-color: transparent; }

/* Tag / pill accent */
.tag {
  display: inline-block;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  background: var(--dusty-pink);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ── Quote block (sage) ── */
.quote-block {
  background: var(--sage);
  border-radius: var(--radius-m);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
  max-inline-size: var(--text-max);
}

/* ── Split section (image/text alternating) ── */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}
.split-media { inline-size: 100%; max-inline-size: 24rem; }
.split-text p + p { margin-block-start: var(--space-3); }
@media (min-width: 45rem) {
  .split { flex-direction: row; align-items: flex-start; gap: var(--space-8); }
  .split-media { flex: 0 0 40%; position: sticky; top: 6rem; }
  .split-text { flex: 1; }
}

/* Photo placeholder (pending a real photo) */
.photo-placeholder {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-l);
  background: var(--dusty-pink);
  border: 1px solid rgba(184, 159, 141, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
}
.photo-placeholder svg { inline-size: 3.5rem; block-size: 3.5rem; opacity: 0.6; }

/* ── Page hero (sub-pages) ── */
.page-hero {
  background: var(--dusty-blue);
  padding-block: var(--space-6);
  text-align: center;
}
.page-hero h1 { font-size: var(--fs-h1); }
.page-hero .eyebrow { margin-block-end: var(--space-2); }
.page-hero .lede {
  margin-inline: auto;
  margin-block-start: var(--space-3);
}

/* ── Placeholder ("under construction") panel ── */
.placeholder-panel {
  background: var(--surface);
  border: 1px solid rgba(184, 159, 141, 0.4);
  border-radius: var(--radius-m);
  padding: var(--space-6);
  max-inline-size: var(--text-max);
  margin-inline: auto;
  text-align: center;
}
.placeholder-panel p { margin-inline: auto; font-weight: 300; }
.placeholder-panel .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-block-start: var(--space-5);
}

/* ── Podcast: listen buttons, episode cards ── */
.listen-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.platform-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: var(--dusty-pink); /* solid fill so the button pops on any section bg */
  border: 1.5px solid var(--purple);
  color: var(--purple);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--ease), color var(--ease), transform var(--ease);
}
.platform-btn:hover {
  background: var(--purple);
  color: var(--cream);
  transform: translateY(-1px);
}
.platform-btn svg { inline-size: 22px; block-size: 22px; flex-shrink: 0; }

.episode-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: var(--text-max);
  margin-inline: auto;
  margin-block-end: var(--space-5);
}
.episode-card h3 { font-size: var(--fs-h3); }
.ep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--purple);
}
.ep-desc { font-weight: 300; }
.ep-desc p + p { margin-block-start: var(--space-2); }
.ep-desc:not(.expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ep-toggle {
  align-self: start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--green-dark);
  cursor: pointer;
}
.ep-toggle:hover { color: var(--green-hover); text-decoration: underline; }
.episode-card audio {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}
.ep-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-2);
}
.ep-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
}
.ep-links a:hover { text-decoration: underline; }
.ep-links svg { inline-size: 16px; block-size: 16px; flex-shrink: 0; }

.signoff {
  margin-block-start: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.5;
}

/* ── Contact form ── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-weight: 600;
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--beige);
  border-radius: var(--radius-s);
  padding: 0.7rem 1rem;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 0;
  border-color: var(--purple);
}
.contact-form textarea {
  min-block-size: 8rem;
  resize: vertical;
}
.form-status { font-weight: 600; min-block-size: 1.5em; }
.form-status--ok { color: var(--green-dark); }
.form-status--error { color: var(--purple); }

/* ── Footer ── */
.site-footer {
  background: var(--cream);
  border-block-start: 1px solid rgba(184, 159, 141, 0.45);
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
}
.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-block: var(--space-4);
  padding: 0;
}
.footer-nav a {
  font-size: var(--fs-small);
  color: var(--ink);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--green-dark); text-decoration: underline; }
.footer-cta {
  margin-block: var(--space-4);
  margin-inline: auto; /* the global p max-width would otherwise pin it inline-start */
}
.socials {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-block: var(--space-4);
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(184, 159, 141, 0.5);
  color: var(--green-dark);
  transition: color var(--ease), border-color var(--ease), transform var(--ease);
}
.social:hover {
  color: var(--purple);
  border-color: var(--beige);
  transform: translateY(-2px);
}
.social svg { inline-size: 20px; block-size: 20px; }
.copyright {
  font-size: var(--fs-caption);
  font-weight: 300;
  color: var(--ink);
  margin-inline: auto;
}

/* ── Homepage (calm lobby redesign) ──
   Photo hero: cover photo under a dusty-blue→cream wash so the hero
   melts into the cream welcome section below it. Wash keeps text AA. */
.hero-cover {
  background-color: var(--dusty-blue);
  background-image:
    linear-gradient(rgba(202, 223, 233, 0.72), rgba(247, 243, 237, 0.9)),
    url("/img/cover-photo.webp");
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: center;
  text-align: center;
  min-block-size: min(60svh, 34rem);
  padding-block: var(--space-9);
}
.hero-cover .hero-title { margin-block-end: var(--space-3); }
.hero-tagline {
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  font-weight: 300;
  max-inline-size: var(--text-max);
  margin-inline: auto;
}

/* Airy sections: base section rhythm, one step up on desktop only */
.section--airy { padding-block: var(--space-6); }
@media (min-width: 45rem) {
  .section--airy { padding-block: var(--space-7); }
}
.section--sage { background: var(--sage); }

/* Centered statement copy (welcome / approach / gift sections) */
.statement {
  max-inline-size: var(--text-max);
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: 1.85;
}
.statement p { margin-inline: auto; }
.statement p + p { margin-block-start: var(--space-4); }
.statement-link { margin-block-start: var(--space-5); }

.link-arrow--purple { color: var(--purple); }
.link-arrow--purple:hover { color: var(--purple); }

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: var(--space-5);
}

/* Quiet section heading (smaller than .section-title alone) */
.section-title--quiet {
  font-size: clamp(1.45rem, 4vw, 1.7rem);
  text-align: center;
  margin-block-end: var(--space-5);
}

/* Destination cards: the whole card is the link — one compact row */
.card-nav {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  text-decoration: none;
}
.card-nav h3 { transition: color var(--ease); }
.card-nav:hover h3 { color: var(--green-hover); }
.card-nav-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--green-dark);
}
.card-nav-arrow svg { inline-size: 18px; block-size: 18px; }
.card-nav .tag { flex-shrink: 0; }
.card-nav--soon { opacity: 0.65; }
.card-nav--soon:hover { box-shadow: none; transform: none; }
@media (min-width: 45rem) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}