/*
Theme Name: Levende Sophia Child
Theme URI: https://livingsophia.com/
Description: Child theme for Levende Sophia — built from Kim's ChatGPT canvas 1:1.
Author: Flashcloud
Author URI: https://flashcloud.com/
Template: kadence
Version: 1.2.8
Text Domain: livingsophia-child
*/

:root {
  --ls-sand:        #F4F0E8;
  --ls-sand-2:      #EAE6DD;
  --ls-sand-3:      #F7F3EC;
  --ls-ink:         #2E2E2C;
  --ls-ink-soft:    #4C4A46;
  --ls-ink-mute:    #6B6A66;
  --ls-ink-place:   #8A877F;
  --ls-sage:        #8F9A8C;
  --ls-line:        #D8D2C8;
  --ls-line-soft:   rgba(216, 210, 200, 0.7);
  --ls-on-dark:     #F4F0E8;
  --ls-on-dark-2:   #E8E1D6;
  --ls-r-card:      2rem;
  --ls-r-input:     1rem;
  --ls-r-pill:      9999px;
  --ls-shadow-card: 0 12px 40px rgba(46, 46, 44, 0.05);
  --ls-shadow-hero: 0 20px 80px rgba(46, 46, 44, 0.08);
  /* Kim's canvas uses Tailwind's `font-serif` = ui-serif stack, which renders as Apple's New York on macOS.
     For cross-platform fidelity we use Source Serif 4 (very similar proportions to New York). */
  --ls-font-serif:  "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --ls-font-sans:   "Inter", "Helvetica Neue", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Base surfaces — dark-mode-first override of Kadence white frames */
html body {
  background: var(--ls-sand);
  color: var(--ls-ink);
  font-family: var(--ls-font-sans);
  font-size: 16px;           /* Tailwind root = 16px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.wp-singular .content-bg,
body .wp-site-blocks,
body .entry-content,
body .content-container,
body .site-container {
  background: transparent !important;
}
/* Kadence page-title banner kill (singles + pages) */
.page .entry-title,
.single .entry-title,
.page .entry-hero,
.single .entry-hero,
.page .entry-header,
.single .entry-header {
  display: none !important;
}
/* Don't let main stretch and create sticky-footer dead space on short pages */
.wp-site-blocks > main { flex: 0 0 auto !important; }

/* Kill Kadence's default top/bottom margin on the content area so hero's own py-28 is the only vertical space after header */
.content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
.entry-content-wrap,
body .entry-content-wrap { padding: 0 !important; }
body .entry.single-entry { box-shadow: none !important; }

/* Typography — Tailwind-exact values from Kim's canvas source.
   Serif headings default to weight 400 (Tailwind default). Source Serif 4 renders well at 400. */
h1, h2, h3, h4 {
  font-family: var(--ls-font-serif);
  font-weight: 400;
  color: var(--ls-ink);
  line-height: 1.1;          /* Tailwind "leading-tight" */
  letter-spacing: normal;
}
body p { color: var(--ls-ink-soft); }

/* Section H2 — Tailwind: text-4xl (36px) mobile, md:text-5xl (48px) */
.ls-section h2.wp-block-heading,
.ls-section-sand-2 h2.wp-block-heading {
  font-size: 2.25rem !important;   /* 36px = text-4xl */
  font-weight: 400 !important;
  line-height: 1.1 !important;
  margin: 0.5rem 0 2rem 0 !important;  /* mt-2 + mb-8 — tighter to match canvas */
}
@media (min-width: 768px) {
  .ls-section h2.wp-block-heading,
  .ls-section-sand-2 h2.wp-block-heading {
    font-size: 3rem !important;     /* 48px = md:text-5xl */
  }
}
/* Section eyebrow margin — override Gutenberg flow spacing */
.ls-section > .ls-eyebrow,
.ls-section-sand-2 > .ls-eyebrow {
  margin: 0 0 0 0 !important;
}

/* Card H3 — Tailwind: text-2xl leading-snug (24px / 1.375) */
.ls-card h3,
.ls-detail-card h3,
.ls-program-card h3 {
  font-size: 1.5rem;         /* 24px = text-2xl */
  font-weight: 400;
  line-height: 1.375;        /* leading-snug */
  letter-spacing: normal;
  margin: 0;
}

/* Manifest title — Tailwind: text-3xl (30px) mobile, md:text-4xl (36px) leading-relaxed (1.625) */
.ls-manifest-title {
  font-size: 1.875rem !important;  /* 30px = text-3xl */
  font-weight: 400 !important;
  line-height: 1.625 !important;   /* leading-relaxed */
  margin: 1.5rem 0 2rem 0 !important;   /* mt-6 */
}
@media (min-width: 768px) {
  .ls-manifest-title {
    font-size: 2.25rem !important;  /* 36px = md:text-4xl */
  }
}

/* Body paragraphs inside cards — Tailwind: text-base (16px) leading-7 (28px) */
.ls-card p,
.ls-detail-card p,
.ls-program-card p {
  font-size: 1rem;           /* 16px = text-base */
  line-height: 1.75;         /* leading-7 */
  color: var(--ls-ink-soft);
}

/* Practice & Contact body — Tailwind: leading-8 (32px) */
.ls-practice p,
.ls-contact p {
  font-size: 1rem;
  line-height: 2;            /* leading-8 */
  color: var(--ls-ink-soft);
}

/* Manifest body — Tailwind: text-lg (18px) leading-8 (32px) */
.ls-manifest p:not(.ls-manifest-title):not(.ls-eyebrow) {
  font-size: 1.125rem !important;   /* 18px = text-lg */
  line-height: 2 !important;        /* leading-8 */
}

/* Custom header — rendered by mu-plugin, bypasses Kadence builder entirely.
   Tailwind: sticky top-0 z-20 border-b border-[#D8D2C8]/70 bg-[#F4F0E8]/90 backdrop-blur-sm */
.ls-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 240, 232, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 210, 200, 0.7);
}
.ls-site-header-inner {
  max-width: 72rem;                   /* max-w-6xl — match hero .ls-container */
  margin: 0 auto;
  padding: 1rem 0;                    /* py-4, no horizontal pad so brand aligns with hero content */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
/* Mobile/tablet: restore horizontal gutter so header doesn't touch viewport edge */
@media (max-width: 1199.98px) {
  .ls-site-header-inner { padding: 1rem 1.5rem; }
}
.ls-brand {
  display: flex;
  align-items: center;
  gap: 1rem;                          /* gap-4 */
  text-decoration: none;
  flex-shrink: 0;
}
.ls-header-mark {
  width: 40px;                        /* h-10 w-10 */
  height: 40px;
  display: block;
}
.ls-brand-text { line-height: 1.25; }
.ls-brand-name {
  font-family: var(--ls-font-serif);
  font-size: 1.125rem;                /* text-lg = 18px */
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ls-ink);
}
.ls-brand-tag {
  font-family: var(--ls-font-sans);
  font-size: 0.75rem;                 /* text-xs = 12px */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ls-ink-mute);
  margin-top: 0.125rem;
}
.ls-site-header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;                        /* gap-6 */
}
/* Hide desktop lang switcher on mobile — shown in drawer instead */
@media (max-width: 767.98px) {
  .ls-site-header-right > .ls-lang-switcher:not(.ls-lang-switcher-mobile) { display: none; }
}
/* Hide Kadence's own header wrap if it still renders */
#masthead:not(.ls-site-header) { display: none !important; }

/* Eyebrows — Tailwind: text-sm uppercase tracking-[0.25em] text-[#8F9A8C] */
.ls-eyebrow {
  display: block;
  font-family: var(--ls-font-sans);
  font-size: 0.875rem;              /* text-sm = 14px */
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ls-sage);
  margin: 0;
}
/* Program + detail card eyebrows — Tailwind tracking-[0.2em] (slightly tighter) */
.ls-program-card > .ls-eyebrow,
.ls-detail-card > .ls-eyebrow {
  letter-spacing: 0.2em;
}
.ls-eyebrow-mute { color: var(--ls-line); }

/* Section wrappers — Tailwind py-16 md:py-24 = 64/96px */
.ls-section {
  padding: 4rem 0;              /* py-16 = 64px */
}
@media (min-width: 768px) {
  .ls-section { padding: 6rem 0; }   /* md:py-24 = 96px */
}
.ls-section-sand { background: var(--ls-sand); }
.ls-section-sand-2 {
  background: rgba(234, 230, 221, 0.8);      /* bg-sand-2/80 */
  padding: 4rem 0;
  margin-top: -25px !important;              /* pull whole section up 25px */
  margin-bottom: 0 !important;               /* no stray gap before detail panels */
  /* Break out of the article.entry max-width cap → edge-to-edge full viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Prevent horizontal scrollbar offsetting the math */
  max-width: 100vw;
}
@media (min-width: 768px) {
  .ls-section-sand-2 { padding: 6rem 0; }
}
/* Detail panels section (between Forløb cards and Manifest) — no stray mb */
.ls-section-sand-2 + section.wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 1.5rem !important;  /* 24px to match canvas-tight gap to manifest */
}
/* Manifest wrapper section — kill stray top padding (inline 1rem) + margin-bottom */
.ls-section-sand-2 + section.wp-block-group + section.wp-block-group {
  padding-top: 0 !important;
  padding-bottom: 2.5rem !important;  /* pb-10 = 40px canvas */
  margin-bottom: 0 !important;
}
/* Generic section wrappers (Praksis, Kontakt) — kill stray Gutenberg margins */
.wp-site-blocks .entry-content > section.ls-section,
.wp-site-blocks .entry-content section > .ls-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.entry-content > section.wp-block-group,
.single-content > section.wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Inline-padding replacements so wp:group JSON matches rendered HTML */
.ls-hero-inner { padding: 5rem 0 2rem 0; }
.ls-details-section { padding: 2.5rem 0 2rem 0; }
.ls-manifest-section { padding: 1rem 0 3rem 0; }

.ls-section-dark {
  background: var(--ls-ink);
  color: var(--ls-on-dark);
  border-radius: var(--ls-r-card);
}
.ls-section-dark p { color: var(--ls-on-dark-2); }
.ls-section-dark .ls-eyebrow { color: var(--ls-line); }

/* Container — Tailwind max-w-6xl = 72rem / 1152px, px-6 = 24px */
.ls-container {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* The entry-content wrapper adds its own padding — negate so our sections align to max-w-6xl at full-bleed width */
body.page .entry-content.single-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* 3-col / 2-col grids — Tailwind gap-6 (24px) for card grids, gap-10 (40px) for contact 2-col */
.ls-section .wp-block-columns,
.ls-section-sand-2 .wp-block-columns {
  gap: 1.5rem !important;               /* gap-6 */
  margin: 0 !important;
}
.ls-contact {
  gap: 2.5rem;                          /* gap-10 */
}

/* Hero — Tailwind canvas uses py-20 md:py-28 (80/112). Kim's preview renders at smaller width so
   the mobile value dominates. Use py-20 (80px) consistently for tighter feel matching his screenshot. */
.ls-hero { padding: 5rem 0; }               /* py-20 = 80px top and bottom */
.ls-hero > .wp-block-group__inner-container {
  display: grid;
  gap: 3rem;                                /* gap-12 */
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .ls-hero { padding: 4rem 0 3rem; }         /* tighter bottom to reduce hero→Om gap */
  .ls-hero > .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
/* Kadence's is-layout-flow caps EVERY direct child to --global-calc-content-width.
   Override inside the hero so children fill their column. */
.ls-hero .wp-block-group__inner-container > * { min-width: 0; }
.ls-hero .wp-block-group__inner-container > .wp-block-group,
.ls-hero .wp-block-group__inner-container > .wp-block-group > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;
}
/* Every block directly inside the hero-text flow container — let them use the full column width */
.ls-hero .wp-block-group__inner-container.is-layout-flow > *,
.ls-hero .wp-block-group__inner-container.is-layout-flow > .alignwide,
.ls-hero .wp-block-group.is-layout-flow > *,
.ls-hero .is-layout-flow > *:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  width: auto;
}
.ls-hero .ls-hero-title,
.ls-hero .ls-hero-text,
.ls-hero .ls-hero-ctas,
.ls-hero .ls-eyebrow {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Hero eyebrow → title: Tailwind mb-4 on eyebrow = 16px gap */
.ls-hero .ls-eyebrow {
  margin: 0 0 1rem 0 !important;       /* mb-4 = 16px */
}

/* Hero H1 — Tailwind: text-5xl leading-tight (48px/1.25) mobile, md:text-7xl (72px/1 tight) */
.ls-hero-title {
  font-family: var(--ls-font-serif);
  font-size: 3rem;           /* 48px = text-5xl */
  line-height: 1.25;         /* leading-tight */
  font-weight: 400;
  letter-spacing: normal;
  max-width: 36rem;          /* max-w-xl */
  margin: 0 !important;      /* kill all default heading margins */
}
@media (min-width: 768px) {
  .ls-hero-title {
    font-size: 4.5rem;       /* 72px = md:text-7xl */
    line-height: 1.05;
  }
}

/* Hero body — Tailwind: mt-8 text-lg leading-8 max-w-xl */
.ls-hero-text {
  font-size: 1.125rem;       /* 18px = text-lg */
  line-height: 2;            /* leading-8 */
  max-width: 36rem;          /* max-w-xl */
  color: var(--ls-ink-soft);
  margin: 2rem 0 0 0 !important;   /* mt-8 = 32px */
}

/* Hero CTAs — Tailwind mt-10 */
.ls-hero-ctas {
  margin: 2.5rem 0 0 0 !important;  /* mt-10 = 40px */
}
.ls-hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* Hero decorative box — Tailwind: min-h-[460px] rounded-[2rem] bg-sand-2 shadow-[0_20px_80px_rgba(46,46,44,0.08)] */
.ls-hero-decor {
  position: relative;
  min-height: 460px;
  border-radius: var(--ls-r-card);
  background: var(--ls-sand-2);
  box-shadow: 0 20px 80px rgba(46, 46, 44, 0.08);
  overflow: hidden;
}
.ls-hero-decor::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 45%),
    linear-gradient(180deg, rgba(244, 240, 232, 0.2), rgba(234, 230, 221, 0.7));
}
/* Fade from sand to transparent at the bottom — Tailwind: bottom-0 left-0 right-0 h-[70%] bg-gradient-to-t from-sand/70 */
.ls-hero-decor::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  background: linear-gradient(to top, rgba(244, 240, 232, 0.7), transparent);
  pointer-events: none;
}
/* Mark — Tailwind: right-10 top-10 h-28 w-28 (112px). Position on TOP of the ::after fade */
.ls-hero-mark {
  position: absolute;
  right: 2.5rem;                          /* right-10 = 40px */
  top: 2.5rem;                            /* top-10 */
  width: 7rem;                            /* w-28 = 112px */
  height: 7rem;
  z-index: 2;
}
/* Pull-quote card — widen slightly past Tailwind max-w-sm (24rem) to match Kim's wrapping at our desktop width */
.ls-hero-quote {
  position: absolute;
  bottom: 3rem;                           /* bottom-12 = 48px */
  left: 2.5rem;                           /* left-10 = 40px */
  right: 2.5rem;                          /* allow it to stretch to the right edge up to max-width */
  max-width: 28rem;                       /* between max-w-sm (24rem) and max-w-md (28rem) — fits Kim's 2-line wrap */
  border-radius: var(--ls-r-card);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.5rem;                        /* p-6 = 24px */
  z-index: 2;
}
/* Pull-quote text — Tailwind: font-serif text-2xl leading-snug (24px / 1.375) */
.ls-hero-quote p {
  font-family: var(--ls-font-serif);
  font-size: 1.375rem;                    /* slightly under text-2xl so 2 lines fit cleanly */
  font-weight: 400;
  line-height: 1.375;                     /* leading-snug */
  color: var(--ls-ink);
  margin: 0;
}

/* Buttons — Tailwind: px-6 py-3 text-sm for hero, px-5 py-2 text-sm for program cards */
.wp-block-button.ls-btn-primary .wp-block-button__link,
.ls-btn-primary a {
  background: var(--ls-ink) !important;
  color: var(--ls-on-dark) !important;
  border: none !important;
  border-radius: var(--ls-r-pill) !important;
  padding: 0.75rem 1.5rem !important;      /* py-3 px-6 */
  font-size: 0.875rem !important;          /* text-sm */
  font-weight: 400;
  transition: transform 0.2s;
}
.wp-block-button.ls-btn-primary .wp-block-button__link:hover,
.ls-btn-primary a:hover { transform: translateY(-2px); }
.wp-block-button.ls-btn-secondary .wp-block-button__link,
.ls-btn-secondary a {
  background: transparent !important;
  color: var(--ls-ink) !important;
  border: 1px solid rgba(46, 46, 44, 0.2) !important;
  border-radius: var(--ls-r-pill) !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 0.875rem !important;
  transition: background 0.2s;
}
.wp-block-button.ls-btn-secondary .wp-block-button__link:hover,
.ls-btn-secondary a:hover { background: var(--ls-sand-2) !important; }

/* Hero CTAs — Tailwind mt-10 (40px) + gap-4 (16px) */
.ls-hero-ctas {
  margin-top: 2.5rem !important;
  gap: 1rem !important;
  display: flex;
  flex-wrap: wrap;
}

/* About cards — Tailwind: rounded-[2rem] border border-sand bg-sand-3 p-8 shadow-sm */
.ls-card {
  background: var(--ls-sand-3);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-r-card);        /* rounded-[2rem] = 32px */
  padding: 2rem;                          /* p-8 = 32px */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);   /* shadow-sm */
}
.ls-card h3 {
  font-family: var(--ls-font-serif);
  font-size: 1.5rem;                      /* text-2xl */
  font-weight: 400;
  line-height: 1.375;                     /* leading-snug */
  margin: 0;
}
.ls-card p {
  margin-top: 1.25rem;                    /* mt-5 */
  font-size: 1rem;                        /* text-base */
  line-height: 1.75;                      /* leading-7 */
}

/* Program cards — Tailwind: p-8 rounded-[2rem] bg-sand shadow-[...]  */
.ls-program-card {
  background: var(--ls-sand);
  border-radius: var(--ls-r-card);
  padding: 2rem;                          /* p-8 = 32px */
  box-shadow: var(--ls-shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
/* mt-3 between eyebrow and H3 subtitle */
.ls-program-card h3 {
  font-family: var(--ls-font-serif);
  font-size: 1.5rem;                      /* 24px = text-2xl */
  font-weight: 400;
  line-height: 1.375;                     /* leading-snug */
  margin: 0.75rem 0 0 0;                  /* mt-3 only */
}
/* Canvas exact spacing inside card: eyebrow mb 0, h3 mt 12 mb 0, desc mt 20 */
.ls-program-card > .ls-eyebrow {
  margin: 0 !important;
}
.ls-program-card > h3.wp-block-heading {
  margin: 0.75rem 0 0 0 !important;       /* mt-3 = 12px, mb 0 */
}
.ls-program-card > p:not(.ls-eyebrow):not(.ls-program-price) {
  margin: 1.25rem 0 0 0 !important;       /* mt-5 = 20px, mb 0 — description */
}
/* Price — text-base font-medium, mb-4 */
.ls-program-card .ls-program-price {
  font-size: 1rem;                        /* 16px = text-base */
  font-weight: 500;                       /* font-medium */
  color: var(--ls-ink);
  margin: 0 0 1rem 0;                     /* mb-4 */
}
/* Divider block above CTAs — mt-8 border-t pt-6 */
.ls-program-cta-block {
  margin-top: 2rem;                       /* mt-8 */
  padding-top: 1.5rem;                    /* pt-6 */
  border-top: 1px solid var(--ls-line);
}
/* CTA stack — Tailwind: flex flex-col gap-3, buttons px-5 py-2 text-sm */
.ls-program-cta-block .wp-block-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                           /* gap-3 = 12px */
  margin: 0;
}
.ls-program-cta-block .wp-block-buttons .wp-block-button { width: 100%; }
.ls-program-cta-block .wp-block-buttons .wp-block-button__link {
  display: block;
  text-align: center;
  width: 100%;
  padding: 0.5rem 1.25rem !important;     /* py-2 px-5 */
  font-size: 0.875rem !important;         /* text-sm */
}
.ls-program-cta-block .ls-more-link {
  display: block;
  text-align: center;
  font-size: 0.875rem;                    /* text-sm */
  text-decoration: underline;
  color: var(--ls-ink);
  margin-top: 0.75rem;
}
.ls-program-cta-block .ls-more-link:hover { opacity: 0.7; }

/* Equal-height program cards — stretch column children, force CTA row into flex tail */
.ls-programs-grid .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr;           /* mobile: single column */
  grid-auto-rows: auto;
  gap: 1.5rem;
  align-items: stretch !important;
}
@media (min-width: 768px) {
  .ls-programs-grid .wp-block-columns {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
  }
}
.ls-programs-grid .wp-block-column.ls-program-card {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  height: auto !important;
  width: auto !important;
  flex-basis: auto !important;
}
.ls-programs-grid .ls-program-card > .ls-program-cta-block {
  margin-top: 2rem !important;  /* mt-8 = 32px minimum gap canvas spec */
}
/* Spacer above CTA absorbs extra vertical slack on short-content cards */
.ls-programs-grid .ls-program-card > p:not(.ls-eyebrow):not(.ls-program-price) {
  margin-bottom: auto !important;  /* push CTA block down on short cards */
}
.ls-programs-grid .ls-program-card > *:not(.ls-program-cta-block) { flex: 0 0 auto; }
.ls-programs-grid .ls-program-cta-block { margin-top: auto; }

/* Program detail panels (anchor targets below the Programs row) */
.ls-detail-card {
  background: var(--ls-sand-3);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-r-card);
  padding: 2rem;
  scroll-margin-top: 6rem;
}
.ls-detail-card h3 {
  font-family: var(--ls-font-serif);
  font-size: 1.5rem;
  margin: 0.5rem 0 1rem 0;
}
.ls-detail-card .ls-program-price {
  font-weight: 500;
  color: var(--ls-ink);
  margin: 0 0 1.25rem 0;
}

/* Manifest dark card — Tailwind: px-8 py-14 md:px-12 md:py-16 rounded-[2rem] bg-[#2E2E2C] */
.ls-manifest {
  background: var(--ls-ink);
  color: var(--ls-on-dark);
  border-radius: var(--ls-r-card);
  padding: 3.5rem 2rem;             /* py-14 px-8 = 56/32 */
  overflow: hidden;
}
@media (min-width: 768px) {
  .ls-manifest { padding: 4rem 3rem; }   /* md:py-16 md:px-12 = 64/48 */
}
.ls-manifest .ls-eyebrow { color: var(--ls-line); }

/* Manifest title — Tailwind: mt-6 text-3xl md:text-4xl leading-relaxed, max-w-4xl */
.ls-manifest .ls-manifest-title {
  font-family: var(--ls-font-serif);
  color: var(--ls-on-dark);
  max-width: 56rem;                 /* max-w-4xl = 896px */
  margin-top: 1.5rem;               /* mt-6 */
  margin-bottom: 2rem;              /* mt-8 on the next p = 32px gap */
}

/* Manifest body paragraphs — mt-8 on first body, mt-4 on second, max-w-3xl.
   Kadence wraps group children one level deep, so use descendant selector. */
.ls-manifest p:not(.ls-manifest-title):not(.ls-eyebrow) {
  max-width: 48rem !important;      /* max-w-3xl = 768px */
  color: var(--ls-on-dark-2) !important;
  margin: 2rem 0 0 0 !important;    /* mt-8 on body paragraphs */
}
.ls-manifest p:not(.ls-manifest-title):not(.ls-eyebrow) + p:not(.ls-manifest-title):not(.ls-eyebrow) {
  margin-top: 1rem !important;      /* mt-4 on subsequent */
}

/* Tighten gap between previous section and Praksis, and between Praksis and the next section */
section#praksis.ls-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  section#praksis.ls-section { padding-top: 3rem; padding-bottom: 3rem; }
}
section#praksis.ls-section + section.ls-section {
  padding-top: 3rem;
}
@media (min-width: 768px) {
  section#praksis.ls-section + section.ls-section { padding-top: 3rem; }
}

/* Practice section: header row (eyebrow+title left, intro paragraph right) then card grid below */
.ls-practice > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: none;
}
.ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child {
  margin-bottom: 0 !important;
}
.ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container {
  display: grid;
  row-gap: 0.25rem;
  column-gap: 2.5rem;
  align-items: start;
  grid-template-areas:
    "eyebrow ."
    "title intro";
  grid-template-rows: auto auto;
}
@media (max-width: 767px) {
  .ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container {
    grid-template-areas: "eyebrow" "title" "intro";
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) {
  .ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container {
    grid-template-columns: 0.9fr 1.1fr;
  }
}
.ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container > .ls-eyebrow {
  grid-area: eyebrow;
  margin: 0 0 0.25rem 0;
  color: var(--ls-sage) !important;
}
.ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container > h2 {
  grid-area: title;
  margin: 0 !important;
}
.ls-practice > .wp-block-group__inner-container > .wp-block-group:first-child > .wp-block-group__inner-container > p:not(.ls-eyebrow) {
  grid-area: intro;
  max-width: 40rem;
  align-self: start;
  margin: 0;
  line-height: 1.75;
  color: var(--ls-ink-soft, #4C4A46);
}
/* Practice grid: 2-col cards, expandable to span both columns with deeper content */
.ls-practice-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .ls-practice-grid { grid-template-columns: 1fr 1fr; }
}

.ls-practice-card {
  background: var(--ls-sand-3);
  border: 1px solid var(--ls-line);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(46, 46, 44, 0.04);
  transition: box-shadow 0.6s ease, transform 0.4s ease;
}
.ls-practice-card:hover {
  box-shadow: 0 20px 50px rgba(46, 46, 44, 0.08);
}
.ls-practice-card.is-active {
  box-shadow: 0 30px 90px rgba(46, 46, 44, 0.12);
}
@media (min-width: 900px) {
  .ls-practice-card.is-active { grid-column: 1 / -1; }
}

.ls-practice-trigger {
  display: grid;
  width: 100%;
  gap: 1.5rem;
  padding: 1.5rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ls-practice-trigger:hover,
.ls-practice-trigger:focus,
.ls-practice-trigger:active {
  background: transparent !important;
  color: var(--ls-ink) !important;
  box-shadow: none !important;
}
.ls-practice-trigger:focus { outline: none; }
.ls-practice-trigger:focus-visible {
  outline: 2px solid var(--ls-ink);
  outline-offset: -2px;
}
@media (min-width: 700px) {
  .ls-practice-trigger {
    grid-template-columns: 1fr;
    padding: 2rem;
  }
}
.ls-practice-thumb { display: none; }

.ls-practice-thumb {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--ls-sand-2);
  align-self: start;
  height: 220px;
}
.ls-practice-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.6s ease, transform 0.8s ease;
}
.ls-practice-card:hover .ls-practice-thumb img { transform: scale(1.04); }
.ls-practice-card.is-active .ls-practice-thumb img { opacity: 0.92; transform: scale(1.04); }
.ls-practice-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(46, 46, 44, 0.35), rgba(244, 240, 232, 0.05) 60%, transparent);
  pointer-events: none;
}
.ls-practice-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 232, 0.7);
  background: rgba(244, 240, 232, 0.3);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ls-practice-badge > span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ls-sand);
  display: block;
}

.ls-practice-meta {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.ls-practice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.ls-practice-num {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ls-sage);
}
.ls-practice-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--ls-line);
  border-radius: 50%;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.ls-practice-card:hover .ls-practice-toggle {
  background: var(--ls-sand-2);
}
.ls-practice-toggle::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid var(--ls-ink);
  border-bottom: 1.5px solid var(--ls-ink);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}
.ls-practice-card.is-active .ls-practice-toggle::before {
  transform: translateY(2px) rotate(-135deg);
}

.ls-practice-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.875rem;
  line-height: 1.15;
  margin: 0;
  color: var(--ls-ink);
}
@media (min-width: 700px) {
  .ls-practice-title { font-size: 2.25rem; }
}
.ls-practice-subtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  color: var(--ls-muted);
  margin: 0.75rem 0 0 0;
  line-height: 1.4;
}
.ls-practice-text {
  margin: 1.5rem 0 0 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ls-ink-soft, #4C4A46);
  max-width: 36rem;
}

/* Deeper / expanded panel — height-animated via grid-rows trick */
.ls-practice-deeper {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s ease, opacity 0.6s ease;
}
.ls-practice-card.is-active .ls-practice-deeper {
  grid-template-rows: 1fr;
  opacity: 1;
}
.ls-practice-deeper-inner {
  overflow: hidden;
  display: grid;
  gap: 2rem;
  border-top: 1px solid var(--ls-line);
  padding: 2rem 1.5rem;
}
@media (min-width: 700px) {
  .ls-practice-deeper-inner {
    padding: 2rem;
    grid-template-columns: 1fr 0.9fr;
  }
}
.ls-practice-deeper-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--ls-ink);
  margin: 0;
}
.ls-practice-deeper-image {
  border-radius: 1.5rem;
  border: 1px solid var(--ls-line);
  overflow: hidden;
  background: var(--ls-sand);
  min-height: 280px;
}
.ls-practice-deeper-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* Contact — styling on wrapper, grid on Gutenberg inner container */
.ls-contact {
  background: var(--ls-sand-3);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-r-card);
  padding: 2rem;
}
.ls-contact > .wp-block-group__inner-container {
  display: block;
}
@media (min-width: 768px) {
  .ls-contact { padding: 3rem; }
  .ls-contact > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* Footer — custom rendered, Tailwind exact:
   border-t border-[#D8D2C8]/70 px-6 py-8, flex-col gap-4 text-sm text-[#6B6A66], md:flex-row md:items-center md:justify-between */
.ls-site-footer {
  background: var(--ls-sand);
  border-top: 1px solid rgba(216, 210, 200, 0.7);
  color: var(--ls-ink-mute);
  font-size: 0.875rem;                /* text-sm = 14px */
  padding: 2rem 0 1.5rem;             /* py-8 */
  margin-top: 2rem;
}
.ls-site-footer a {
  color: var(--ls-ink);
  text-decoration: none;
  transition: opacity 0.2s;
}
.ls-site-footer a:hover { opacity: 0.7; }

.ls-footer-inner {
  max-width: 72rem;                   /* max-w-6xl */
  margin: 0 auto;
  padding: 0 1.5rem;                  /* px-6 */
  display: flex;
  flex-direction: column;
  gap: 1rem;                          /* gap-4 */
}
@media (min-width: 768px) {
  .ls-footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.ls-footer-brand {
  font-family: var(--ls-font-serif);
  font-size: 0.875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ls-ink);
  flex-shrink: 0;
}
.ls-footer-tagline {
  color: var(--ls-ink-mute);
  font-size: 0.875rem;
}

/* Meta row — below the primary footer row, with address + phone + social + credit */
.ls-footer-bar {
  max-width: 72rem;
  margin: 1.25rem auto 0;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px solid var(--ls-line-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ls-ink-mute);
}
@media (min-width: 768px) {
  .ls-footer-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
}
.ls-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.ls-footer-sep {
  opacity: 0.4;
  font-size: 0.875rem;
}
.ls-footer-credit { opacity: 0.85; }

/* Hide any Kadence footer that still tries to render */
#colophon:not(.ls-site-footer) { display: none !important; }

/* Header nav + switcher group — Tailwind: flex items-center gap-6 */
.ls-header-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;                          /* gap-6 = 24px */
}
/* Primary nav inside header — Tailwind: hidden md:flex gap-8 text-sm */
.ls-header-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  gap: 2rem;                            /* gap-8 = 32px */
}
@media (min-width: 768px) {
  .ls-header-nav ul { display: flex; }
}
.ls-header-nav li { margin: 0; }
.ls-header-nav a {
  font-family: var(--ls-font-sans);
  font-size: 0.875rem;                  /* text-sm */
  font-weight: 400;
  color: var(--ls-ink);
  text-decoration: none;
  transition: opacity 0.2s;
  line-height: 1;
}
.ls-header-nav a:hover { opacity: 0.7; }

/* Language switcher pill — Tailwind: rounded-full border border-[#D8D2C8] bg-[#F7F3EC] p-1 text-xs uppercase tracking-[0.15em] */
.site-header-row-container .ls-lang-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ls-line);
  background: var(--ls-sand-3);
  border-radius: var(--ls-r-pill);
  padding: 0.25rem;                     /* p-1 */
  font-size: 0.75rem;                   /* text-xs */
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ls-lang-switcher .ls-lang-item {
  padding: 0.5rem 0.75rem;              /* py-2 px-3 */
  border-radius: var(--ls-r-pill);
  color: var(--ls-ink-mute);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  font-weight: 400;
  line-height: 1;
}
.ls-lang-switcher .ls-lang-item.is-active,
.ls-site-header .ls-lang-switcher .ls-lang-item.is-active {
  background: var(--ls-ink) !important;
  color: #ffffff !important;
}
.ls-lang-switcher .ls-lang-item:not(.is-active):hover {
  color: var(--ls-ink);
}

/* Mobile toggle (hamburger) + drawer — shown <768px */
.ls-mobile-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 0.5rem;
  background: transparent;
  border: 1px solid var(--ls-line);
  border-radius: 9999px;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.ls-mobile-toggle:hover { background: rgba(46, 46, 44, 0.04); }
.ls-mobile-toggle:focus { outline: none; }
.ls-mobile-toggle:focus-visible {
  outline: 2px solid var(--ls-ink);
  outline-offset: 2px;
}
.ls-mobile-toggle[aria-expanded="true"] {
  background: var(--ls-ink);
  border-color: var(--ls-ink);
}
.ls-mobile-toggle[aria-expanded="true"] .ls-mobile-toggle-bar {
  background: var(--ls-sand);
}
.ls-mobile-toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ls-ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.ls-mobile-toggle[aria-expanded="true"] .ls-mobile-toggle-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.ls-mobile-toggle[aria-expanded="true"] .ls-mobile-toggle-bar:nth-child(2) {
  opacity: 0;
}
.ls-mobile-toggle[aria-expanded="true"] .ls-mobile-toggle-bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}
@media (min-width: 768px) {
  .ls-mobile-toggle { display: none; }
}

/* Drawer body */
.ls-mobile-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ls-sand);
  border-top: 1px solid var(--ls-line);
  padding: 1.25rem 1.5rem 1.75rem;
  box-shadow: 0 12px 40px rgba(46, 46, 44, 0.08);
  z-index: 90;
}
.ls-mobile-drawer[hidden] { display: none; }
@media (min-width: 768px) {
  .ls-mobile-drawer { display: none !important; }
}
.ls-mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ls-mobile-nav li { margin: 0; }
.ls-mobile-nav a {
  display: block;
  font-family: var(--ls-font-sans);
  font-size: 1.0625rem;
  color: var(--ls-ink);
  text-decoration: none;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ls-line);
}
.ls-mobile-nav a:hover { opacity: 0.7; }
.ls-lang-switcher-mobile { align-self: flex-start; }

body.ls-menu-open { overflow: hidden; }

/* Kadence wraps everything in .wp-site-blocks with overflow:clip which breaks sticky header.
   Scope-override just for the body wrapper above our header. */
.site.wp-site-blocks { overflow: visible !important; }

/* Polylang switcher — style as the canvas pill */
.ls-lang-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ls-line);
  background: var(--ls-sand-3);
  border-radius: var(--ls-r-pill);
  padding: 0.25rem;
  margin-left: 1.5rem;
}
.ls-lang-switcher a,
.ls-lang-switcher .lang-item a {
  font-family: var(--ls-font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ls-ink-mute) !important;
  padding: 0.45rem 0.9rem;
  border-radius: var(--ls-r-pill);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ls-lang-switcher .current-lang a,
.ls-lang-switcher .lang-item-current a,
.ls-lang-switcher .current_page_item a {
  background: var(--ls-ink);
  color: var(--ls-on-dark) !important;
}

/* WPForms overrides — sand theme matching canvas */
.ls-contact .wpforms-container,
.wpforms-container {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
.ls-contact .wpforms-form,
.wpforms-form {
  width: 100% !important;
}
.wpforms-form .wpforms-field-container {
  display: grid !important;
  gap: 1.25rem !important;   /* gap-5 = 20px between fields */
  width: 100% !important;
}
.wpforms-form .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.wpforms-form .wpforms-submit-container {
  width: 100% !important;
  margin-top: 1.25rem !important;  /* 20px gap before submit */
  padding: 0 !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--ls-line) !important;
  color: var(--ls-ink) !important;
  border-radius: 1rem !important;          /* rounded-2xl = 16px */
  padding: 1.25rem 1.25rem !important;     /* py-5 px-5 — roomy like canvas render */
  font-family: var(--ls-font-sans) !important;
  font-size: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;                 /* kill WPForms fixed height var */
  min-height: 0 !important;
  box-sizing: border-box !important;
  outline: none !important;
  line-height: 1.5 !important;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder { color: #8A877F !important; }
.wpforms-form textarea { min-height: 200px !important; }
.wpforms-form .wpforms-field-label { display: none !important; }
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
  background: var(--ls-ink) !important;
  color: var(--ls-on-dark) !important;
  border: none !important;
  border-radius: 9999px !important;         /* rounded-full */
  padding: 1.25rem 1.5rem !important;       /* py-5 px-6 — match field height rhythm */
  font-size: 0.875rem !important;           /* text-sm */
  font-family: var(--ls-font-sans) !important;
  transition: transform 0.2s !important;
  margin: 0 !important;
  width: 100% !important;                   /* full-width CTA */
  height: auto !important;                  /* kill WPForms size var */
  min-height: 0 !important;
  line-height: 1.5 !important;
  display: block !important;
  cursor: pointer !important;
}
.wpforms-form button[type="submit"]:hover { transform: translateY(-2px); }