/* ==========================================================================
   Learn to Lipread — main stylesheet
   Palette: Horizons warm blue (#4A90C2) + muted sage + pale cream on
   white. Designed to feel warm, calm and non-clinical for adults 50+,
   with WCAG-passing contrast on all text.
   ========================================================================== */

:root{
  /* Brand — Horizons warm blue */
  --color-primary: #4A90C2;         /* brand blue on chips, icons, links */
  --color-primary-hover: #3B7BA8;   /* darker button variant (WCAG-safe) */
  --color-primary-tint: #E4EEF5;    /* pale blue background for eyebrow chips, early-bird boxes */

  /* Sage accent */
  --color-sage-deep: #5A7A62;       /* text-on-sage-tint for legibility */
  --color-sage-tint: #EDF1E9;

  /* Neutrals */
  --color-ink: #1E3A5F;             /* warm navy for headings */
  --color-body: #3F4A56;            /* body text — high contrast on both white and cream */
  --color-muted: #6B7280;
  --color-bg: #FFFFFF;
  --color-bg-alt: #FBF7EC;          /* pale cream section background */
  --color-border: #E8E4DA;          /* warm subtle border */
  --color-white: #FFFFFF;

  /* Community warm gradient — softened terracotta so it sits with the rest of the palette */
  --color-community-start: #B57560;
  --color-community-mid: #8A4A2E;
  --color-community-end: #3A1E10;

  /* Hero fallback colour behind the Unsplash image */
  --color-hero-fallback: #8A3A2D;

  /* Status */
  --color-waitlist-bg: #F2F0E8;

  /* Type — Outfit for both display and body, per Horizons style guide */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(30,58,95,0.06), 0 4px 14px rgba(30,58,95,0.06);
  --shadow-card-hover: 0 6px 20px rgba(30,58,95,0.10);

  /* Rhythm */
  --section-padding: 96px;
  --container-width: 1180px;
}

@media (max-width: 782px){
  :root{
    --section-padding: 56px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: inherit; }

/* Default icon size. Specific components (buttons, cards, footer)
   override this; it guarantees no unsized SVG ever renders huge. */
.icon{ width: 20px; height: 20px; flex: none; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); }
h2{ font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; }

:focus-visible{
  outline: 3px solid var(--color-primary-hover);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout helpers ---------- */
.container{
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}
.section{ padding-block: var(--section-padding); }
.section--alt{ background: var(--color-bg-alt); }
.section-head{ max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head p{ color: var(--color-body); font-size: 1.05rem; }
.section-head .catalog-heading{ font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); }
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  color: var(--color-primary-hover);
  background: var(--color-primary-tint);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  margin-bottom: 16px;
}
.eyebrow--icon-only{ padding: 10px; gap: 0; }
.eyebrow--icon-only .icon{ margin: 0; }
.media-row__image{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.media-row--text-only{ display: block; }
.media-row--text-only .media-row__text{ max-width: 620px; }
.meetup-intro{ max-width: 720px; }
.meetup-intro h2{ margin-bottom: 20px; }
.text-center{ text-align: center; }
.skip-link{
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--color-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); transition: top .15s ease;
}
.skip-link:focus{ top: 8px; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--color-primary-hover); color: #fff; }
.btn-primary:hover{ background: var(--color-ink); }
.btn-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.btn-ghost{
  background: var(--color-bg-alt); color: var(--color-ink);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.btn-ghost:hover{ background: var(--color-border); }
.btn-block{ width: 100%; border-radius: var(--radius-md); }
.btn-sm{ padding: 9px 18px; font-size: .88rem; }
.btn[disabled], .btn.is-disabled{
  background: var(--color-waitlist-bg); color: var(--color-muted); cursor: default;
}
.btn .icon{ width: 16px; height: 16px; flex: none; }

/* ---------- Site header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
}
.site-logo{
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; color: var(--color-primary);
  flex: none;
}
.primary-nav{ display: flex; }
.primary-nav ul{ display: flex; align-items: center; gap: 30px; }
.primary-nav a{
  font-weight: 600; font-size: .96rem; color: var(--color-ink);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.primary-nav a:hover{ color: var(--color-primary); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  color: var(--color-primary); border-bottom-color: var(--color-primary);
}
.header-actions{ display: flex; align-items: center; gap: 18px; flex: none; }
.header-cart{ color: var(--color-ink); display: inline-flex; }
.header-cart .icon{ width: 22px; height: 22px; }
.nav-toggle{
  display: none; background: none; border: 0; padding: 6px;
  color: var(--color-ink);
}
.nav-toggle .icon{ width: 26px; height: 26px; }
.nav-toggle .nav-toggle__close{ display: none; }
.site-header.is-open .nav-toggle .nav-toggle__open{ display: none; }
.site-header.is-open .nav-toggle .nav-toggle__close{ display: inline-block; }

@media (min-width: 901px) and (max-width: 1080px){
  .primary-nav ul{ gap: 18px; }
  .primary-nav a{ font-size: .9rem; }
}

@media (max-width: 900px){
  /* The mobile nav is kept IN the normal document flow rather than
     positioned. The header's backdrop-filter creates a containing block
     that interferes with positioned children, so the header simply grows
     taller when the menu is open. Simple and reliable. */
  .site-header__inner{ flex-wrap: wrap; }
  .primary-nav{
    display: none;
    width: 100%;
    order: 10;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .site-header.is-open .primary-nav{ display: block; }
  .primary-nav ul{ flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a{ display: block; padding: 14px 4px; border-bottom: 1px solid var(--color-border); }
  .primary-nav li:last-child a{ border-bottom: 0; }
  .nav-toggle{ display: inline-flex; }
  .header-actions .btn-primary{ padding: 10px 16px; font-size: .88rem; }
}

/* ---------- Home hero ---------- */
.hero{
  position: relative;
  padding-block: 140px 110px;
  color: #fff;
  overflow: hidden;
  /* Warm fallback colour shows through if the hero image ever fails
     to load, so the section still feels intentional rather than blank. */
  background-color: var(--color-hero-fallback);
}
.hero__media{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  /* Image URL is set inline by the template via get_header_image(),
     which returns the site owner's uploaded photo if one exists, or
     the Unsplash default registered in functions.php otherwise. */
}
.hero__media::after{
  content: ""; position: absolute; inset: 0;
  /* Overlay spec from Horizons: from-black/70 via-black/50 to-black/80 */
  background: linear-gradient(to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.50) 50%, rgba(0,0,0,.80) 100%);
}
.hero__content{
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto; text-align: center;
}
.hero__content .eyebrow{ background: rgba(255,255,255,.14); color: #fff; }
.hero h1{ color: #fff; margin-bottom: .15em; }
.hero .accent{ color: #A8D0EA; display: block; }
.hero__lede{ font-size: 1.15rem; color: rgba(255,255,255,.90); max-width: 620px; margin: 0 auto 32px; }
.hero__actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Feature grid (Why choose) ---------- */
.feature-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 940px; margin: 0 auto;
}
.feature-card{
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 32px;
}
.feature-card__icon{
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--color-primary-tint); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.feature-card__icon .icon{ width: 22px; height: 22px; }
.feature-card h3{ margin-bottom: 8px; }
.feature-card p{ margin: 0; font-size: .97rem; }

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

/* ---------- Course catalog ---------- */
.catalog-intro{ max-width: 680px; margin: 0 auto 40px; text-align: center; }

.county-picker{
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 40px; margin-bottom: 56px;
  text-align: center;
}
.county-picker__icon{
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--color-primary-tint); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.county-picker__icon .icon{ width: 22px; height: 22px; }
.county-picker p{ margin-bottom: 28px; }
.county-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 760px; margin: 0 auto;
}
.county-btn{
  display: block; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 16px; font-weight: 700;
  color: var(--color-ink); text-align: center; transition: border-color .15s ease, color .15s ease;
}
.county-btn:hover, .county-btn.is-active{ border-color: var(--color-primary); color: var(--color-primary); }

@media (max-width: 640px){
  .county-grid{ grid-template-columns: repeat(2, 1fr); }
  .county-picker{ padding: 24px; }
}

.county-section{ margin-bottom: 64px; scroll-margin-top: 100px; }
.county-section__heading{
  font-size: 1.4rem; margin-bottom: 8px; padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.course-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 1000px){ .course-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .course-grid{ grid-template-columns: 1fr; } }

.course-card{
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 26px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.course-card:hover{ box-shadow: var(--shadow-card-hover); }
.course-card--featured{ border-color: var(--color-primary); }
.course-card__tag{
  display: inline-flex; align-self: flex-start;
  background: var(--color-waitlist-bg); color: var(--color-ink);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 14px;
}
.course-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.course-card__free{ color: var(--color-primary); font-weight: 700; font-family: var(--font-display); }
.course-card h3{ font-size: 1.15rem; margin-bottom: 16px; }
.course-card__meta{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.course-card__meta-row{ display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--color-body); }
.course-card__meta-row .icon{ width: 16px; height: 16px; color: var(--color-primary); flex: none; }
.course-card__meta-row .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: none;
}
.course-card__spacer{ flex: 1; }
.course-card__dates{
  border-top: 1px solid var(--color-border);
  margin-top: 14px;
  padding-top: 12px;
}
.course-card__dates-title{
  font-weight: 600;
  color: var(--color-ink);
  font-size: .92rem;
  margin: 0 0 6px;
}
.course-card__dates-line{
  color: var(--color-body);
  font-size: .92rem;
  margin: 0 0 4px;
  line-height: 1.5;
  padding-left: 14px;
  text-indent: -14px;
}
.course-card__session-divider{
  height: 1px;
  background: var(--color-border);
  margin: 12px 0;
}
.course-card__pricing{ margin-bottom: 18px; }
.course-card__earlybird{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--color-primary-tint); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 10px;
}
.course-card__earlybird-label{ display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-primary-hover); font-size: .88rem; }
.course-card__earlybird-label .icon{ width: 16px; height: 16px; }
.course-card__earlybird-sub{ display: block; font-weight: 400; color: var(--color-muted); font-size: .78rem; }
.course-card__earlybird-price{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); }
.course-card__standard{ display: flex; align-items: center; justify-content: space-between; font-size: .9rem; padding: 0 2px; }
.course-card__standard .was{ text-decoration: line-through; color: var(--color-muted); }
.course-card__waitnote{
  text-align: center; font-size: .8rem; color: var(--color-muted);
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px;
}
.course-card__waitnote .icon{ width: 14px; height: 14px; }

.tc-box{
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 32px; margin-top: 48px;
}
.tc-box__title{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); margin-bottom: 16px; }
.tc-box__title .icon{ width: 20px; height: 20px; color: var(--color-primary); }
.tc-box ul{ display: flex; flex-direction: column; gap: 10px; }
.tc-box li{ position: relative; padding-left: 18px; font-size: .95rem; }
.tc-box li::before{ content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-muted); }
.tc-box strong{ color: var(--color-ink); }

/* ---------- Two-column media/text rows (What Happens / Community) ---------- */
.media-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  margin-bottom: 88px;
}
.media-row:last-child{ margin-bottom: 0; }
.media-row.is-reversed .media-row__media{ order: 2; }
.media-row.is-reversed .media-row__text{ order: 1; }
.media-row__media img, .media-row__media .media-placeholder{
  border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.media-placeholder{
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-tint), var(--color-bg-alt));
  color: var(--color-primary); border: 1px dashed var(--color-border);
}
.media-placeholder .icon{ width: 46px; height: 46px; opacity: .7; }
.media-row__text .eyebrow{ margin-bottom: 18px; }
.media-row__text h2{ margin-bottom: 18px; }
.media-row__text p{ margin-bottom: 14px; }
.media-row__text p:last-child{ margin-bottom: 0; }

@media (max-width: 860px){
  .media-row{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .media-row.is-reversed .media-row__media{ order: 1; }
  .media-row.is-reversed .media-row__text{ order: 2; }
}

/* ---------- Skills grid (What Happens) ---------- */
.skills-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.skills-grid .feature-card:nth-child(1),
.skills-grid .feature-card:nth-child(2){ grid-column: span 1; }
@media (max-width: 760px){
  .skills-grid{ grid-template-columns: 1fr; }
}

/* ---------- What Happens hero ---------- */
.page-hero{
  position: relative; padding-block: 90px 70px; text-align: center;
  background: var(--color-bg-alt); overflow: hidden;
}
.page-hero::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 78% 0%, rgba(24,160,240,.08), transparent 70%);
}
.page-hero__inner{ position: relative; max-width: 780px; margin: 0 auto; }
.page-hero p{ font-size: 1.08rem; }

/* Faded hero background photo (How Classes Work). The image sits very
   low-opacity behind the title, with a gradient fading it into the
   page — matching the Horizons "ghosted image" look. */
.page-hero--faded{ padding-block: 120px 90px; background: var(--color-bg-alt); }
.page-hero__bg{
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .28;
}
.page-hero--faded::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(251,247,236,.15) 0%, rgba(251,247,236,.7) 60%, var(--color-bg-alt) 100%);
}
.page-hero--faded .page-hero__inner{ z-index: 2; }

/* Faded background photo on the coloured heroes (Community, Contact).
   The image sits over the gradient at low opacity, so the warm colour
   still reads through and the white text stays legible. */
.community-hero,
.contact-hero{ position: relative; overflow: hidden; }
.hero-tint__bg{
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .22;
  mix-blend-mode: overlay;
}
.community-hero .container,
.contact-hero .container{ position: relative; z-index: 2; }

/* ---------- Teachers page ---------- */
.tab-toggle{
  display: inline-flex; background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: 5px; margin: 0 auto 56px; gap: 4px;
}
.tab-toggle__btn{
  background: transparent; border: 0; border-radius: var(--radius-full);
  padding: 11px 26px; font-weight: 700; font-size: .92rem; color: var(--color-body);
}
.tab-toggle__btn.is-active{ background: var(--color-bg); color: var(--color-ink); box-shadow: var(--shadow-card); }
.tab-panel{ display: none; }
.tab-panel.is-active{ display: block; }

.teacher{
  display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center;
  margin-bottom: 72px;
}
.teacher:nth-child(even){ direction: rtl; }
.teacher:nth-child(even) > *{ direction: ltr; }
.teacher__photo{ border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.teacher .badge{ margin-bottom: 16px; }
.teacher h2{ font-size: 1.5rem; margin-bottom: 14px; }
.teacher p{ margin-bottom: 12px; }

.badge{
  display: inline-flex; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--color-primary-hover); background: var(--color-primary-tint);
  padding: 7px 14px; border-radius: var(--radius-full);
}

@media (max-width: 800px){
  .teacher{ grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .teacher:nth-child(even){ direction: ltr; }
  .teacher__photo{ aspect-ratio: 4/3; max-width: 340px; }
}

.journey{ max-width: 760px; margin: 0 auto; }
.journey p{ margin-bottom: 1.1em; }

/* ---------- Community hero ---------- */
.community-hero{
  background: linear-gradient(135deg, var(--color-community-start) 0%, var(--color-community-mid) 45%, var(--color-community-end) 100%);
  color: #fff; text-align: center; padding-block: 100px 90px;
}
.community-hero .eyebrow{ background: rgba(255,255,255,.16); color: #fff; }
.community-hero h1{ color: #fff; }
.community-hero p{ color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto 32px; font-size: 1.08rem; }

.meetup-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 1000px){ .meetup-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px){ .meetup-grid{ grid-template-columns: 1fr; } }

.meetup-card{
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-card);
}
.meetup-card__region{
  display: inline-flex; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-sage-deep); background: var(--color-sage-tint);
  padding: 6px 12px; border-radius: var(--radius-full); margin-bottom: 14px;
}
.meetup-card h3{ font-size: 1.15rem; margin-bottom: 14px; }
.meetup-card__meta{ display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; margin-bottom: 8px; }
.meetup-card__meta .icon{ width: 16px; height: 16px; color: var(--color-primary); flex: none; margin-top: 2px; }
.meetup-card__footer{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border);
  font-size: .86rem; color: var(--color-muted);
}
.meetup-card__footer .btn{ padding: 9px 18px; font-size: .85rem; }
.meetup-card__footer .btn-outline-brand{
  background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary);
}
.meetup-card__footer .btn-outline-brand:hover{ background: var(--color-primary-tint); }

/* ---------- FAQ accordion ---------- */
.faq-groups{ display: flex; flex-direction: column; gap: 32px; margin-bottom: 48px; }
.faq-group{
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 28px 32px;
}
.faq-group__title{
  color: var(--color-primary-hover);
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 6px;
}
.faq-list{ max-width: none; margin: 0; }
.faq-item{ border-bottom: 1px solid var(--color-border); }
.faq-group .faq-item:last-child{ border-bottom: 0; }
.faq-item__q{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; text-align: left; padding: 22px 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-ink);
}
.faq-item__q .icon{ width: 20px; height: 20px; color: var(--color-primary); flex: none; transition: transform .15s ease; }
.faq-item[open] .faq-item__q .icon{ transform: rotate(180deg); }
.faq-item__a{ padding: 0 4px 22px; color: var(--color-body); }
.faq-item summary{ list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker{ display: none; }

/* Disclaimer box + Still-have-questions card */
.disclaimer-box{
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 28px 32px; margin-bottom: 40px;
}
.disclaimer-box__title{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; color: var(--color-ink);
  font-size: 1.15rem; margin-bottom: 14px;
}
.disclaimer-box__title .icon{ width: 22px; height: 22px; color: var(--color-primary); }
.disclaimer-box p{ margin: 0; }

.contact-cta{
  background: var(--color-primary-tint); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 44px 32px; text-align: center;
}
.contact-cta__icon{
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-bg); color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(30,58,95,.08);
}
.contact-cta__icon .icon{ width: 24px; height: 24px; }
.contact-cta h3{ font-size: 1.4rem; margin-bottom: 8px; }
.contact-cta p{ max-width: 460px; margin: 0 auto 20px; }
.contact-cta__link{
  color: var(--color-primary-hover); font-weight: 700; font-size: 1.1rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.contact-cta__link:hover{ color: var(--color-ink); }

@media (max-width: 640px){
  .faq-group{ padding: 20px 22px; }
  .disclaimer-box{ padding: 22px; }
  .contact-cta{ padding: 32px 22px; }
}

/* ---------- Contact page ---------- */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.form-field{ margin-bottom: 20px; }
.form-field label{ display: block; font-weight: 600; font-size: .9rem; color: var(--color-ink); margin-bottom: 8px; }
.form-field input, .form-field textarea{
  width: 100%; padding: 13px 16px; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-bg);
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--color-primary); }

@media (max-width: 800px){
  .contact-grid{ grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Site footer ---------- */
.site-footer{ background: var(--color-ink); color: rgba(255,255,255,.72); padding-block: 64px 32px; }
.footer-grid{
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
	gap: 48px;
	margin-bottom: 40px;
}
.footer-brand{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-primary); margin-bottom: 12px; display: block; }
.footer-brand-col p{ font-size: .92rem; }
.footer-col h4{ color: #fff; font-family: var(--font-body); font-size: .95rem; margin-bottom: 16px; font-weight: 700; }
.footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ color: rgba(255,255,255,.72); }
.footer-col a:hover{ color: #fff; }

.footer-contact-list li{
	display: flex; align-items: center; gap: 10px;
	font-size: .92rem;
}
.footer-contact-list .icon{ width: 16px; height: 16px; color: var(--color-primary); flex: none; }

.footer-social{
	display: flex; gap: 12px; margin-bottom: 20px;
}
.footer-social a{
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	color: #fff;
	transition: color .15s ease;
}
.footer-social a:hover{ color: var(--color-primary); }
.footer-social .icon{ width: 20px; height: 20px; }
.footer-tagline{ font-size: .88rem; }

.footer-bottom{
	border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
	font-size: .84rem;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-legal{
	display: flex; gap: 20px;
}
.footer-legal a{ color: rgba(255,255,255,.72); }
.footer-legal a:hover{ color: #fff; }

@media (max-width: 900px){
	.footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px){
	.footer-grid{ grid-template-columns: 1fr; gap: 28px; }
	.footer-bottom{ flex-direction: column; align-items: flex-start; }
	.footer-legal{ flex-wrap: wrap; gap: 12px 20px; }
}

/* ---------- Contact page ---------- */
.contact-hero{
	background: linear-gradient(135deg, var(--color-community-start) 0%, var(--color-community-mid) 45%, var(--color-community-end) 100%);
	color: #fff;
	text-align: center;
	padding-block: 100px 90px;
}
.contact-hero h1{ color: #fff; margin-bottom: 20px; }
.contact-hero p{
	color: rgba(255,255,255,.90);
	max-width: 620px;
	margin: 0 auto;
	font-size: 1.08rem;
}

.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
/* When only one card remains (callback form removed), centre it rather
   than leaving a lopsided empty column. */
.contact-grid:has(> :only-child){
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.contact-details-card,
.callback-card{
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 36px;
	box-shadow: var(--shadow-card);
}
.contact-details-card h2,
.callback-card h2{ font-size: 1.4rem; margin-bottom: 20px; }
.callback-card > p{ margin-bottom: 20px; }

.contact-block{ display: flex; gap: 16px; align-items: flex-start; }
.contact-block__icon{
	width: 44px; height: 44px; border-radius: var(--radius-md);
	background: var(--color-primary-tint); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	flex: none;
}
.contact-block__icon .icon{ width: 22px; height: 22px; }
.contact-block__body{ flex: 1; }
.contact-block__body h3{ font-size: 1.1rem; margin-bottom: 8px; }
.contact-block__body p{ font-size: .95rem; margin-bottom: 12px; }
.contact-block__email{
	font-weight: 700; color: var(--color-ink);
	margin-bottom: 14px !important;
	font-size: 1rem !important;
}

.contact-divider{
	border: 0; border-top: 1px solid var(--color-border);
	margin: 28px 0;
}

.callback-note{
	background: var(--color-sage-tint);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	display: flex; align-items: center; gap: 10px;
	font-size: .88rem; color: var(--color-sage-deep);
	margin-bottom: 24px !important;
}
.callback-note .icon{ width: 18px; height: 18px; flex: none; }

.callback-form .form-row{
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.callback-form .form-field{ margin-bottom: 20px; }
.callback-form select{
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235C6773' stroke-width='2'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}
.callback-form .required{ color: #C0392B; }
.callback-form button[disabled]{ opacity: .55; cursor: not-allowed; }

@media (max-width: 900px){
	.contact-grid{ grid-template-columns: 1fr; gap: 24px; }
	.callback-form .form-row{ grid-template-columns: 1fr; }
	.contact-details-card,
	.callback-card{ padding: 28px 22px; }
}

/* ---------- Ready to Connect CTA (Community page footer) ---------- */
.ready-cta{
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
	color: #fff;
	text-align: center;
	padding-block: 80px;
}
.ready-cta h2{ color: #fff; margin-bottom: 16px; }
.ready-cta p{
	color: rgba(255,255,255,.92);
	max-width: 600px;
	margin: 0 auto 32px;
	font-size: 1.05rem;
}
.btn-ready-cta{
	background: var(--color-bg);
	color: var(--color-ink);
	padding: 14px 30px;
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: 1rem;
	display: inline-flex;
	transition: background-color .15s ease;
}
.btn-ready-cta:hover{ background: var(--color-bg-alt); }

/* ---------- Founder's Story (My Journey tab) ---------- */
.founder-story{
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 56px;
	align-items: start;
	max-width: 1000px;
	margin: 0 auto;
}
.founder-story__photo img,
.founder-story__photo .media-placeholder{
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: var(--radius-lg);
}
.founder-story__body .badge{ margin-bottom: 16px; }
.founder-story__body h2{ margin-bottom: 20px; }
.founder-story__body p{ margin-bottom: 1.1em; }
.founder-story__callout{
	background: var(--color-primary-tint);
	border-left: 4px solid var(--color-primary);
	padding: 20px 24px;
	border-radius: var(--radius-md);
	margin: 24px 0;
	font-style: normal;
}
.founder-story__callout p{
	margin: 0;
	color: var(--color-ink);
	font-weight: 500;
}
.founder-story__signature{
	border-top: 1px solid var(--color-border);
	padding-top: 20px;
	margin-top: 28px !important;
	color: var(--color-body);
}

@media (max-width: 800px){
	.founder-story{ grid-template-columns: 1fr; gap: 32px; }
	.founder-story__photo{ max-width: 380px; margin: 0 auto; }
}

/* ---------- Optional editor content section ---------- */
/* Used on Home, Community and What Happens pages. Renders anything
   typed into the page's main editor. Kept intentionally light so
   Gutenberg block styles come through unchanged. */
.optional-content{ max-width: 760px; margin: 0 auto; }
.optional-content h2{ margin-bottom: .5em; }
.optional-content h3{ margin-top: 1.4em; margin-bottom: .5em; }
.optional-content p{ margin-bottom: 1.1em; }
.optional-content ul, .optional-content ol{ margin: 0 0 1.1em 1.4em; padding: 0; list-style: revert; }
.optional-content li{ margin-bottom: .4em; }
.optional-content img{ border-radius: var(--radius-md); margin: 1.2em 0; height: auto; }
.optional-content blockquote{
	border-left: 3px solid var(--color-primary);
	padding: 4px 0 4px 20px; margin: 1.4em 0;
	color: var(--color-ink); font-style: italic;
}
.optional-content a{ color: var(--color-primary-hover); text-decoration: underline; }

/* ---------- Generic page (fallback) ---------- */
.generic-content{ max-width: 780px; margin: 0 auto; padding-block: 64px; }
.generic-content h1{ margin-bottom: 24px; }

/* ---------- WordPress core alignment helpers ---------- */
.alignwide{ max-width: 1400px; }
.aligncenter{ margin-left: auto; margin-right: auto; }