/* ===================================================================
   Yoga Australia — Landing Page Utility CSS
   -------------------------------------------------------------------
   A small, composable class library for native-Gutenberg landing pages.
   Scoped under .ya-landing so it never leaks into BuddyBoss or other
   page styles. Designed for reuse across future landing pages, not
   just /private-health-for-yoga/.

   Atoms
     .ya-landing                  outer wrapper, single place to scope
     .ya-section                  vertical padding rhythm
       --tight                    half padding
       --accent                   plum background, cream text
       --cream                    cream background, plum text
       --hero                     hero variant, taller, spiral bg
     .ya-container                max-width 1200, horizontal padding
       --narrow                   max-width 760, for prose-heavy
     .ya-eyebrow                  uppercase small label
       --on-plum                  faded cream variant for dark bgs
     .ya-hero-title               H1 display
     .ya-hero-subtitle            H2 in hero, smaller display
     .ya-display                  H2 section heading
     .ya-lead                     larger paragraph for intros
       --on-plum                  cream variant for dark bgs
     .ya-card-grid                CSS grid for cards
       --cols-2                   two columns on tablet+
       --cols-4                   two-by-two on tablet, four on desktop
     .ya-card                     base card surface
       --accent                   plum on cream, the strong pathway
       --quiet                    soft mauve, secondary pathway
     .ya-card-tag                 inline label inside a card
     .ya-card-num                 large numeral for requirement cards
     .ya-buttons                  wraps a core/buttons block
     .ya-btn                      applied to core/button
       --primary                  solid plum
       --ghost                    plum outline
       --cream                    cream on plum (hero)
       --ghost-cream              cream outline on plum (hero)
     .ya-faq-list                 wraps stacked core/details blocks
     .ya-faq-item                 applied to each core/details
     .ya-form-slot                placeholder block for GF embeds
   =================================================================== */


/* ----- Tokens ----- */

.ya-landing {
  --ya-plum:        #6C4B61;
  --ya-plum-deep:   #5A3E51;
  --ya-plum-soft:   #8A7081;
  --ya-mauve:       #E1DCE0;
  --ya-mauve-warm:  #E3DCE1;
  --ya-cream:       #F3EDE4;
  --ya-cream-soft:  #F8F3EC;
  --ya-white:       #FFFFFF;
  --ya-line:        rgba(108, 75, 97, 0.18);

  --ya-font-display: "Fraunces", "Larken", Georgia, serif;
  --ya-font-body:    "Work Sans", system-ui, sans-serif;

  --ya-fs-hero:      clamp(2.5rem, 4vw + 0.5rem, 5rem);
  --ya-fs-subhero:   clamp(1.25rem, 1.6vw + 0.5rem, 2rem);
  --ya-fs-display:   clamp(1.875rem, 2.4vw + 0.75rem, 2.75rem);
  --ya-fs-h3:        clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --ya-fs-lead:      1.0625rem;
  --ya-fs-body:      0.9375rem;
  --ya-fs-small:     0.75rem;

  --ya-ls-label:     0.14em;
  --ya-ls-display:  -0.015em;

  --ya-s2: 8px;
  --ya-s3: 12px;
  --ya-s4: 16px;
  --ya-s5: 24px;
  --ya-s6: 32px;
  --ya-s7: 48px;
  --ya-s8: 64px;
  --ya-s9: 96px;

  --ya-radius:       4px;
  --ya-radius-card:  10px;

  font-family: var(--ya-font-body);
  font-weight: 300;
  font-size: var(--ya-fs-body);
  line-height: 1.6;
  color: var(--ya-plum);
}


/* ----- Base ----- */

.ya-landing,
.ya-landing * { box-sizing: border-box; }

.ya-landing p { margin: 0 0 var(--ya-s4) 0; }
.ya-landing p:last-child { margin-bottom: 0; }

.ya-landing a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.ya-landing a:hover { text-decoration-thickness: 2px; }

.ya-landing img { display: block; max-width: 100%; height: auto; }


/* ----- Section + container ----- */

.ya-section {
  padding: var(--ya-s8) 0;
  background: var(--ya-mauve);
}

.ya-section--tight  { padding: var(--ya-s7) 0; }

.ya-section--cream  { background: var(--ya-cream); }

.ya-section--accent {
  background: var(--ya-plum);
  color: var(--ya-cream);
}

.ya-section--accent a { color: var(--ya-cream); }

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

.ya-container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--ya-s6);
}


/* ----- Typography atoms ----- */

.ya-eyebrow {
  font-family: var(--ya-font-body);
  font-weight: 400;
  font-size: var(--ya-fs-small);
  letter-spacing: var(--ya-ls-label);
  text-transform: uppercase;
  color: var(--ya-plum-soft);
  margin: 0 0 var(--ya-s4) 0;
}

.ya-eyebrow--on-plum { color: rgba(243, 237, 228, 0.65); }

.ya-hero-title {
  font-family: var(--ya-font-display);
  font-weight: 400;
  font-size: var(--ya-fs-hero);
  line-height: 1.02;
  letter-spacing: var(--ya-ls-display);
  color: var(--ya-cream);
  margin: 0 0 var(--ya-s4) 0;
  max-width: 14ch;
}

.ya-hero-subtitle {
  font-family: var(--ya-font-display);
  font-weight: 400;
  font-size: var(--ya-fs-subhero);
  line-height: 1.15;
  color: rgba(243, 237, 228, 0.92);
  margin: 0 0 var(--ya-s6) 0;
  max-width: 24ch;
}

.ya-landing .ya-display,
.ya-landing h2.ya-display {
  font-family: var(--ya-font-display);
  font-weight: 400;
  font-size: var(--ya-fs-display);
  line-height: 1.1;
  letter-spacing: var(--ya-ls-display);
  color: inherit;
  margin: 0 0 var(--ya-s6) 0;
}

.ya-lead {
  font-family: var(--ya-font-body);
  font-weight: 300;
  font-size: var(--ya-fs-lead);
  line-height: 1.55;
  margin: 0 0 var(--ya-s6) 0;
  max-width: 38em;
}

.ya-lead--on-plum { color: rgba(243, 237, 228, 0.92); }


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

.ya-section--hero {
  position: relative;
  overflow: hidden;
  padding: var(--ya-s9) 0;
  min-height: 360px;
}

/* Spiral, recreated as layered radial gradients.
   Sits behind the content via a pseudo-element so the markup
   stays clean and editors never see it. */
.ya-section--hero::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -15%;
  width: 90vw;
  height: 90vw;
  max-width: 1100px;
  max-height: 1100px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(243, 237, 228, 0.08) 0%, rgba(243, 237, 228, 0) 18%),
    radial-gradient(circle at 50% 50%, rgba(243, 237, 228, 0.06) 22%, rgba(243, 237, 228, 0) 36%),
    radial-gradient(circle at 50% 50%, rgba(243, 237, 228, 0.05) 40%, rgba(243, 237, 228, 0) 54%),
    radial-gradient(circle at 50% 50%, rgba(243, 237, 228, 0.04) 58%, rgba(243, 237, 228, 0) 72%),
    conic-gradient(from 220deg at 50% 50%,
      rgba(243, 237, 228, 0.00) 0deg,
      rgba(243, 237, 228, 0.10) 90deg,
      rgba(243, 237, 228, 0.00) 180deg,
      rgba(243, 237, 228, 0.08) 270deg,
      rgba(243, 237, 228, 0.00) 360deg);
  filter: blur(2px);
}

.ya-section--hero > .ya-container,
.ya-section--hero > .wp-block-group.ya-container,
.ya-section--hero .ya-container { position: relative; z-index: 1; }


/* ----- Card grid + cards ----- */

.ya-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ya-s5);
  margin: var(--ya-s6) 0 var(--ya-s5);
}

@media (min-width: 720px) {
  .ya-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .ya-card-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .ya-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.ya-card {
  background: var(--ya-white);
  border: 1px solid var(--ya-line);
  border-radius: var(--ya-radius-card);
  padding: var(--ya-s6);
  display: flex;
  flex-direction: column;
  gap: var(--ya-s3);
}

.ya-card--accent {
  background: var(--ya-cream);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(108, 75, 97, 0.06), 0 8px 24px rgba(108, 75, 97, 0.08);
}

.ya-card--quiet {
  background: var(--ya-mauve-warm);
  border-color: transparent;
}

.ya-card-tag {
  font-family: var(--ya-font-body);
  font-weight: 500;
  font-size: var(--ya-fs-small);
  letter-spacing: var(--ya-ls-label);
  text-transform: uppercase;
  color: var(--ya-plum);
  margin: 0 0 var(--ya-s2) 0;
}

.ya-card-num {
  font-family: var(--ya-font-display);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ya-plum-soft);
  margin: 0 0 var(--ya-s3) 0;
}

.ya-landing .ya-card h3,
.ya-landing .ya-card .wp-block-heading {
  font-family: var(--ya-font-display);
  font-weight: 400;
  font-size: var(--ya-fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ya-ls-display);
  color: var(--ya-plum);
  margin: 0 0 var(--ya-s3) 0;
}


/* ----- Buttons ----- */
/* Custom classes apply to the .wp-block-button outer; we style the
   inner .wp-block-button__link, which is the anchor staff actually
   sees. */

.ya-buttons.wp-block-buttons { gap: var(--ya-s3) var(--ya-s3); margin-top: var(--ya-s5); }

.ya-landing .ya-btn .wp-block-button__link,
.ya-landing .ya-btn > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-family: var(--ya-font-body);
  font-weight: 500;
  font-size: var(--ya-fs-body);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--ya-plum);
  color: var(--ya-cream);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.ya-landing .ya-btn .wp-block-button__link:hover,
.ya-landing .ya-btn > a:hover { background: var(--ya-plum-deep); text-decoration: none; }

.ya-landing .ya-btn--primary .wp-block-button__link {
  background: var(--ya-plum);
  color: var(--ya-cream);
}

.ya-landing .ya-btn--ghost .wp-block-button__link {
  background: transparent;
  color: var(--ya-plum);
  border-color: var(--ya-plum);
}
.ya-landing .ya-btn--ghost .wp-block-button__link:hover {
  background: var(--ya-plum);
  color: var(--ya-cream);
}

.ya-landing .ya-btn--cream .wp-block-button__link {
  background: var(--ya-cream);
  color: var(--ya-plum);
}
.ya-landing .ya-btn--cream .wp-block-button__link:hover {
  background: var(--ya-white);
}

.ya-landing .ya-btn--ghost-cream .wp-block-button__link {
  background: transparent;
  color: var(--ya-cream);
  border-color: rgba(243, 237, 228, 0.65);
}
.ya-landing .ya-btn--ghost-cream .wp-block-button__link:hover {
  background: rgba(243, 237, 228, 0.12);
  border-color: var(--ya-cream);
}


/* ----- FAQ (core/details) ----- */

.ya-faq-list { margin-top: var(--ya-s5); }

.ya-landing .ya-faq-item {
  border-bottom: 1px solid var(--ya-line);
  margin: 0;
  padding: 0;
}

.ya-landing .ya-faq-item:first-of-type { border-top: 1px solid var(--ya-line); }

.ya-landing .ya-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--ya-s4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ya-s4);
  font-family: var(--ya-font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ya-plum);
}

.ya-landing .ya-faq-item > summary::-webkit-details-marker { display: none; }

.ya-landing .ya-faq-item > summary::after {
  content: "+";
  font-family: var(--ya-font-body);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ya-plum-soft);
  transition: transform 200ms ease;
  flex: 0 0 auto;
}

.ya-landing .ya-faq-item[open] > summary::after { content: "−"; }

.ya-landing .ya-faq-item > *:not(summary) {
  padding: 0 0 var(--ya-s5) 0;
}


/* ----- Form slot placeholder ----- */

.ya-form-slot {
  border: 1px dashed var(--ya-plum-soft);
  border-radius: var(--ya-radius-card);
  padding: var(--ya-s6);
  background: var(--ya-cream-soft);
  margin-top: var(--ya-s5);
}

.ya-form-slot p { margin: 0; color: var(--ya-plum-soft); font-style: italic; }


/* ----- Small overrides for core block defaults inside .ya-landing ----- */

.ya-landing .wp-block-buttons.ya-buttons .wp-block-button {
  margin: 0;
}

.ya-landing .wp-block-columns { gap: var(--ya-s5); }

.ya-landing .wp-block-group.alignfull { margin-left: 0; margin-right: 0; }


/* ----- Responsive niceties ----- */

@media (max-width: 540px) {
  .ya-container,
  .ya-container--narrow { padding: 0 var(--ya-s5); }

  .ya-section          { padding: var(--ya-s7) 0; }
  .ya-section--hero    { padding: var(--ya-s8) 0; }
  .ya-card             { padding: var(--ya-s5); }
}


/* ===================================================================
   Page-scoped overrides — full-bleed bands + hero text legibility
   Added 14 May 2026 (round two visual fixes).
   ------------------------------------------------------------------- */

/* Release BuddyBoss's overflow:hidden clip on #page.site so the band
   breakouts can escape the 1440px site frame and reach the viewport
   edges. Scoped to any landing page via the .ya-landing wrapper class
   so future landing pages inherit this rule automatically. */
body:has(.ya-landing) #page.site { overflow: visible; }

/* Every .ya-section paints viewport-wide. Inner .ya-container keeps
   the content column capped at 1200px as before. */
.ya-landing .ya-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Defeat the child theme's .wp-block-heading !important colour
   override on the hero text. Both specificity and !important are
   needed to win against main.css's !important rule. */
.ya-landing .wp-block-heading.ya-hero-title    { color: var(--ya-cream) !important; }
.ya-landing .wp-block-heading.ya-hero-subtitle { color: rgba(243, 237, 228, 0.92) !important; }


/* ===================================================================
   Round three — grid structural fix + mockup alignment
   Added 14 May 2026.
   ------------------------------------------------------------------- */

/* WordPress wraps wp:group children in a __inner-container which
   sits between the grid and its cards. display: contents removes
   the wrapper from layout so the cards become direct grid items. */
.ya-landing .ya-card-grid > .wp-block-group__inner-container {
  display: contents;
}

/* Section backgrounds — match mockup intent. */
.ya-landing .ya-section--eligibility { background: var(--ya-mauve-warm); }
.ya-landing .ya-section--apply       { background: var(--ya-mauve-warm); }
.ya-landing .ya-section--faq         { background: var(--ya-white); }

/* Pathway cards — strong (provider) is plum on cream, quiet
   (studio) is white with a hairline. Scoped to the pathways
   section so .ya-card--accent keeps its cream surface elsewhere. */
.ya-landing .ya-section--pathways .ya-card {
  border-radius: 6px;
  padding: var(--ya-s7);
}
.ya-landing .ya-section--pathways .ya-card--accent {
  background: var(--ya-plum);
  color: var(--ya-cream);
  box-shadow: none;
}
.ya-landing .ya-section--pathways .ya-card--accent .ya-card-tag,
.ya-landing .ya-section--pathways .ya-card--accent h3,
.ya-landing .ya-section--pathways .ya-card--accent .wp-block-heading {
  color: var(--ya-cream);
}
.ya-landing .ya-section--pathways .ya-card--accent p {
  color: rgba(243, 237, 228, 0.92);
}
.ya-landing .ya-section--pathways .ya-card--quiet {
  background: var(--ya-white);
  border: 1px solid var(--ya-line);
}

/* Eligibility req cards — small white surface, snug padding. */
.ya-landing .ya-section--eligibility .ya-card {
  background: var(--ya-white);
  border: 1px solid var(--ya-line);
  border-radius: 4px;
  padding: var(--ya-s5);
}

/* Eligibility intro and closing paragraphs read at lead size. */
.ya-landing .ya-section--eligibility .ya-container--narrow > p {
  font-size: var(--ya-fs-lead);
  line-height: 1.55;
  max-width: 38em;
}

/* Buttons — rectangle, not pill. */
.ya-landing .ya-btn .wp-block-button__link,
.ya-landing .ya-btn > a {
  border-radius: 4px;
}

/* Hero is the only .alignfull section, and the older
   .alignfull margin reset conflicts with the section
   breakout. Higher-specificity selector wins. */
.ya-landing .alignfull.ya-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Prevent horizontal scroll from the 100vw breakout against
   scrollbar width. Scoped to any landing page via the .ya-landing
   wrapper class. */
html:has(.ya-landing), body:has(.ya-landing) { overflow-x: hidden; }

/* Replace the radial+conic gradient stack on the hero ::before
   with the real YA spiral image, white-filtered and at 18% opacity,
   peeking from top-right per mockup intent. */
.ya-landing .ya-section--hero::before {
  top: -120px;
  right: -180px;
  width: 720px;
  height: 720px;
  max-width: none;
  max-height: none;
  background: url('https://yogaaustralia.org.au/wp-content/uploads/2026/05/ph-hero-spiral.png') no-repeat center/contain;
  filter: brightness(0) invert(1);
  opacity: 0.18;
}