/*
Theme Name: Coyomena Yoga — Bold Sage
Description: One-Page Yoga-Studio-Template — Poster-Layout mit randlosen Bildflächen, überdimensionaler Versalschrift, dunklen und farbigen Bändern. Farbvariante Sage. Erzeugt beim Aktivieren automatisch Home-, Imprint- und Privacy-Seiten mit editierbarem Inhalt.
Version: 1.0.7
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
Author: StudioCoyomena
Author URI: https://www.studio.coyomena.com/
Update URI: https://studio.coyomena.com/
License: GNU General Public License v2 or later (PHP code); design, CSS, JavaScript and graphics: see README.txt
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coyomena-yoga-bold-sage
*/

/* The bundled fonts (assets/fonts/fonts.css) are enqueued from functions.php
   rather than @import'ed here:
   @import has to be the first rule in a stylesheet, which breaks as soon as
   WordPress rewrites or merges the file for the Block/Site Editor. */

/* ============================================================
   your name yoga — DESIGN 4 · "Bold"
   Poster layout: edge-to-edge image plates, oversized uppercase
   display type, full-bleed dark and accent bands, a horizontally
   scrolling gallery. High contrast throughout.
   Colour comes from assets/theme-{terracotta,sage,lavender}.css
   ============================================================ */


:root{
  /* Fallback palette (Terracotta); each page loads a theme sheet after. */
  --rose:#c7a99b;
  --brown:#9a7163;
  --terracotta:#8a3a1f;

  --paper:#f7f1ec;
  --cream:#efe4dc;
  --sand:#e6d3cb;
  --mist:#e8d6cc;

  --ink:#1c120c;
  --grey700:#4a3d34;
  --muted:#8b7c70;
  --on-dark:rgba(255,255,255,.72);

  --shadow-rgb:94,58,42;
  --accent-rgb:169,104,79;

  --head:'Archivo',sans-serif;
  --body:'Inter',sans-serif;

  --maxw:1320px;
  --gutter:clamp(20px,5vw,64px);
  --sect-pad:clamp(80px,10vw,150px);
}

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

/* reserve the scrollbar gutter so locking scroll for the menu doesn't shift the page */
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
/* land anchor jumps below the fixed nav instead of under it */
section[id]{scroll-margin-top:62px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.68;
  color:var(--grey700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* ============================================================
   TYPE — oversized, uppercase, tightly set
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--head);
  margin:0;
  color:var(--ink);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:.9;
}
h1{font-size:clamp(3rem,10.5vw,9.5rem);letter-spacing:-.04em;}
h2{font-size:clamp(2.3rem,6.4vw,5.4rem);letter-spacing:-.035em;}
h3{font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1;}
h4{font-size:.9rem;letter-spacing:.02em;}
h1 em,h2 em{font-style:normal;color:var(--terracotta);}
p{margin:0 0 1.2em;}
p:last-child{margin-bottom:0;}

.kicker{
  display:inline-block;
  font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--terracotta);
}
.kicker.boxed{
  border:2px solid currentColor;
  padding:.55em 1em;
}
/* the taglines in the hero and the retreat sit without a frame, flush
   with the heading */
.hero .kicker.boxed,
.retreat .kicker.boxed{border:none;padding:0;}
.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.72;}
.big-num{
  font-family:var(--head);font-weight:900;
  font-size:clamp(3rem,7vw,6rem);line-height:.85;
  letter-spacing:-.05em;
  color:var(--terracotta);
}

/* On dark bands the type flips. */
.band-dark{background:var(--ink);color:var(--on-dark);}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:#fff;}
.band-dark .kicker{color:var(--rose);}
.band-accent{background:var(--terracotta);color:rgba(255,255,255,.82);}
.band-accent h1,.band-accent h2,.band-accent h3,.band-accent h4{color:#fff;}
.band-accent .kicker{color:rgba(255,255,255,.75);}
.band-cream{background:var(--cream);}

/* ============================================================
   BUTTONS — solid blocks, no rounding
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--head);
  font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1.25em 2.1em;
  border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px);}
.btn .arrow{transition:transform .25s;}
.btn:hover .arrow{transform:translateX(4px);}
.btn.hollow{background:transparent;color:var(--ink);}
.btn.hollow:hover{background:var(--ink);color:var(--paper);}
.btn.accent{background:var(--terracotta);border-color:var(--terracotta);color:#fff;}
.btn.accent:hover{background:transparent;color:var(--terracotta);}
.btn.on-dark{background:#fff;border-color:#fff;color:var(--ink);}
.btn.on-dark:hover{background:transparent;color:#fff;}
/* Outlined twin of .on-dark, for a second CTA over a photo. */
.btn.ghost-dark{background:transparent;border-color:rgba(255,255,255,.6);color:#fff;}
.btn.ghost-dark:hover{background:#fff;border-color:#fff;color:var(--ink);}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);}
.reveal.d1{transition-delay:.09s;}
.reveal.d2{transition-delay:.18s;}
.reveal.d3{transition-delay:.27s;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   NAV — chunky, high contrast
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--gutter);
  transition:background .3s,padding .3s,box-shadow .3s;
}
.nav.scrolled{
  background:var(--paper);
  padding-top:14px;padding-bottom:14px;
  box-shadow:0 1px 0 rgba(var(--shadow-rgb),.18);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.brand .logo-mark{
  width:32px;height:32px;flex:none;
  background-color:#fff;
  -webkit-mask:url("logo-yoga.png") center/contain no-repeat;
  mask:url("logo-yoga.png") center/contain no-repeat;
  transition:background-color .3s;
}
.brand .bn{
  font-family:var(--head);font-size:.82rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  transition:color .3s;
}
.nav.scrolled .brand .logo-mark{background-color:var(--terracotta);}
.nav.scrolled .brand .bn{color:var(--ink);}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a,
.nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);text-decoration:none;
  transition:color .25s;
}
.nav.scrolled .nav-links a,
.nav.scrolled .nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content{color:var(--grey700);}
.nav-links a:hover,
.nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover{color:var(--terracotta);}
.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover{color:var(--terracotta);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px;}
.nav-toggle span{width:26px;height:2.5px;background:#fff;transition:.3s;}
.nav.scrolled .nav-toggle span{background:var(--ink);}

/* ============================================================
   HERO — full-viewport plate with the headline laid over it
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:flex-end;
  padding:0 0 clamp(48px,7vw,90px);
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg image-slot{width:100%;height:100%;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(var(--shadow-rgb),.62) 0%,
    rgba(var(--shadow-rgb),.30) 38%,
    rgba(var(--shadow-rgb),.78) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%;}
.hero .kicker{color:#fff;margin-bottom:24px;}
.hero h1{color:#fff;max-width:13ch;}
.hero h1 em{color:var(--rose);}
.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:30px;margin-top:clamp(30px,4vw,50px);
  padding-top:30px;border-top:2px solid rgba(255,255,255,.28);
}
.hero-foot p{color:rgba(255,255,255,.86);max-width:44ch;margin:0;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:var(--sect-pad) 0;}
.section.flush{padding:0;}
/* The measure has to be expressed on the heading itself: `ch` there resolves
   against the display size, not the 16px body size. */
.sec-head .kicker{margin-bottom:22px;}
.sec-head h2{max-width:11ch;}
.sec-head.wide h2{max-width:16ch;}

/* ---------- SPLIT: half type, half edge-to-edge plate ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(520px,62vw,760px);}
.split .split-media image-slot{width:100%;height:100%;min-height:340px;}
.split .split-body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,7vw,110px) clamp(28px,6vw,90px);
}
.split.rev .split-media{order:2;}
.split-body h2{margin-top:22px;}
.split-body .lead{margin-top:26px;}

.about-sign{
  font-family:var(--head);font-weight:500;font-style:normal;
  font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracotta);margin-top:34px;
}
.about-creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.about-creds span{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid rgba(255,255,255,.25);padding:.6em 1em;color:rgba(255,255,255,.75);
}

/* ---------- CLASSES: four big tiles with overlaid titles ---------- */
.offer-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(44px,5vw,70px);
}
.ocard{
  position:relative;overflow:hidden;
  min-height:clamp(300px,32vw,420px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,3vw,42px);
  background:var(--ink);
  color:rgba(255,255,255,.78);
}
.ocard image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
/* Enough darkness at the very top for the folio number to hold up over a
   bright photo, then deepening for the copy block at the bottom. */
.ocard::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(var(--shadow-rgb),.52) 0%, rgba(var(--shadow-rgb),.28) 26%, rgba(var(--shadow-rgb),.90) 80%);
  transition:background .45s;
}
.ocard:hover::after{background:linear-gradient(180deg, rgba(var(--shadow-rgb),.58) 0%, rgba(var(--shadow-rgb),.40) 26%, rgba(var(--shadow-rgb),.94) 80%);}
.ocard > *:not(image-slot){position:relative;z-index:2;}
.ocard .onum{
  position:absolute;top:clamp(20px,2.4vw,32px);left:clamp(26px,3vw,42px);
  font-family:var(--head);font-weight:900;font-size:1rem;letter-spacing:.1em;
  color:rgba(255,255,255,.82);
}
.ocard h3{color:#fff;}
.ocard .otag{
  display:block;margin-top:12px;
  font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rose);
}
.ocard p{margin-top:16px;font-size:.92rem;color:rgba(255,255,255,.75);max-width:40ch;}
.ocard .ometa{
  display:flex;gap:18px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}

/* ---------- RETREAT: full-bleed poster ---------- */
.retreat{position:relative;min-height:clamp(560px,72vw,820px);display:flex;align-items:center;overflow:hidden;}
.retreat .retreat-bg{position:absolute;inset:0;z-index:0;}
.retreat .retreat-bg image-slot{width:100%;height:100%;}
.retreat .retreat-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(var(--shadow-rgb),.88) 0%, rgba(var(--shadow-rgb),.55) 50%, rgba(var(--shadow-rgb),.15) 100%);
}
.retreat .wrap{position:relative;z-index:1;width:100%;}
.retreat .kicker{color:#fff;}
.retreat h2{color:#fff;margin-top:20px;max-width:12ch;}
.retreat h2 em{color:var(--rose);}
.retreat p{color:rgba(255,255,255,.86);max-width:44ch;margin-top:24px;}
.retreat-meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-top:36px;}
.retreat-meta .rk{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);}
.retreat-meta .rv{font-family:var(--head);font-weight:800;font-size:1.5rem;color:#fff;margin-top:6px;letter-spacing:-.02em;}
.retreat .btn{margin-top:38px;}

/* ---------- PRICING: three heavy blocks ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(44px,5vw,70px);}
.pcard{
  border:2px solid var(--ink);
  padding:clamp(28px,3vw,42px);
  display:flex;flex-direction:column;
  transition:transform .3s;
}
.pcard:hover{transform:translateY(-6px);}
.pcard.feature{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.78);}
.pcard .ptag{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);}
.pcard.feature .ptag{color:var(--rose);}
.pcard h3{margin-top:16px;}
.pcard.feature h3{color:#fff;}
.pcard .price{
  font-family:var(--head);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:.9;color:var(--ink);margin-top:24px;
}
.pcard.feature .price{color:#fff;}
.pcard .price small{
  display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;letter-spacing:.16em;
}
.pcard.feature .price small{color:rgba(255,255,255,.6);}
.pcard ul{list-style:none;margin:28px 0 0;padding:0;flex:1;}
.pcard li{
  font-size:.9rem;padding:10px 0;
  border-bottom:1px solid rgba(var(--shadow-rgb),.16);
}
.pcard.feature li{border-color:rgba(255,255,255,.16);}
.pcard .btn{margin-top:30px;justify-content:center;}
.price-note{text-align:center;margin-top:34px;font-size:.86rem;color:var(--muted);}

/* ---------- SCHEDULE: big rows on a dark band ---------- */
.sched{margin-top:clamp(44px,5vw,70px);}
.sched-row{
  display:grid;grid-template-columns:110px 130px 1fr auto;
  gap:clamp(16px,2.4vw,34px);align-items:center;
  padding:26px 0;
  border-top:1px solid rgba(255,255,255,.18);
  transition:padding-left .35s;
}
.sched-row:last-child{border-bottom:1px solid rgba(255,255,255,.18);}
.sched-row:hover{padding-left:12px;}
.sched-row .day{
  font-family:var(--head);font-weight:900;font-size:1.4rem;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--rose);
}
.sched-row .time{font-size:.86rem;font-weight:700;letter-spacing:.06em;color:#fff;}
.sched-row .cls{
  font-family:var(--head);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;
}
.sched-row .cls small{
  display:block;font-weight:400;font-size:.8rem;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.6);margin-top:5px;
}
.sched-row .lvl{
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ---------- VOICES ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(44px,5vw,70px);}
.tcard{
  background:var(--paper);
  padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;
}
.tcard .qm{
  font-family:var(--head);font-weight:900;font-size:3rem;line-height:.7;
  color:var(--terracotta);
}
.tcard p{
  margin-top:22px;font-size:1.02rem;line-height:1.62;color:var(--grey700);flex:1;
}
.tcard .who{
  margin-top:24px;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracotta);
}

/* ---------- GALLERY: edge-to-edge horizontal strip ---------- */
.gallery{overflow:hidden;}
.gallery .wrap{margin-bottom:clamp(30px,4vw,48px);}
/* scroll-padding keeps snapping from scrolling the strip past its own left
   padding on load; proximity stops it fighting a deliberate half-scroll. */
.gal-grid{
  display:flex;gap:clamp(12px,1.6vw,20px);
  overflow-x:auto;
  padding:0 var(--gutter) 18px;
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--gutter);
  -webkit-overflow-scrolling:touch;
}
.gal-grid image-slot{
  flex:0 0 clamp(260px,30vw,420px);
  height:clamp(320px,34vw,480px);
  scroll-snap-align:start;
  cursor:zoom-in;
  transition:opacity .35s;
}
.gal-grid image-slot:hover{opacity:.9;}
.gal-grid::-webkit-scrollbar{height:4px;}
.gal-grid::-webkit-scrollbar-track{background:rgba(var(--shadow-rgb),.1);}
.gal-grid::-webkit-scrollbar-thumb{background:var(--terracotta);}
/* Chevron buttons (added by gallery-strip.js) take over from the scrollbar. */
.gal-strip{position:relative;}
.gal-strip .gal-grid{padding-bottom:0;scrollbar-width:none;}
.gal-strip .gal-grid::-webkit-scrollbar{display:none;}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border:2px solid var(--ink);cursor:pointer;
  transition:background .2s,border-color .2s,opacity .25s,visibility .25s;
}
.gal-nav svg{width:22px;height:22px;display:block;}
.gal-nav:hover{background:var(--terracotta);border-color:var(--terracotta);}
.gal-nav:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;}
.gal-nav.is-hidden{opacity:0;visibility:hidden;}
.gal-prev{left:clamp(10px,2vw,28px);}
.gal-next{right:clamp(10px,2vw,28px);}

/* ---------- NEWSLETTER: full accent band ---------- */
.news h2{margin-top:20px;}
.news .news-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,70px);align-items:center;}
.news p{color:rgba(255,255,255,.82);margin-top:20px;max-width:44ch;}
.news-form{display:flex;gap:0;flex-wrap:wrap;}
.news-form input{
  flex:1;min-width:200px;
  background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.4);border-right:none;
  outline:none;padding:1.15em 1.4em;
  font-family:var(--body);font-size:.95rem;color:#fff;
}
.news-form input::placeholder{color:rgba(255,255,255,.6);}
.news-form input:focus{border-color:#fff;background:rgba(255,255,255,.18);}
.news-form button{
  background:#fff;border:2px solid #fff;color:var(--ink);
  font-family:var(--head);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1.15em 1.8em;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.6em;
  transition:background .25s,color .25s;
}
.news-form button:hover{background:transparent;color:#fff;}
.news-note{font-size:.74rem;color:rgba(255,255,255,.62);margin-top:16px;}
.news-thanks{
  font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:.06em;
  color:#fff;margin-top:18px;min-height:1.4em;
}

/* ---------- CONTACT: split, form on the dark half ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.contact-info{padding:clamp(60px,8vw,130px) clamp(28px,5vw,80px);}
.contact-info h2{margin-top:20px;}
.contact-info .lead{margin-top:22px;max-width:40ch;}
.contact-list{margin-top:38px;}
.contact-list .ci{
  display:grid;grid-template-columns:96px 1fr;gap:18px;
  padding:15px 0;border-top:1px solid rgba(var(--shadow-rgb),.18);align-items:baseline;
}
.contact-list .ck{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);}
.contact-list .cv{font-size:.94rem;color:var(--ink);}
.contact-list .cv a{color:var(--ink);text-decoration:none;border-bottom:2px solid rgba(var(--accent-rgb),.35);}
.contact-list .cv a:hover{border-color:var(--terracotta);color:var(--terracotta);}
.contact-map{margin-top:34px;}
.contact-map image-slot{width:100%;height:190px;}

.contact-form{
  background:var(--ink);
  padding:clamp(60px,8vw,130px) clamp(28px,5vw,80px);
  display:flex;flex-direction:column;justify-content:center;
}
.contact-form h3{color:#fff;margin-bottom:30px;}
.contact-form label{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:24px;
}
.contact-form label:first-of-type{margin-top:0;}
.contact-form input,.contact-form textarea{
  width:100%;background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.2);outline:none;
  font-family:var(--body);font-size:.95rem;color:#fff;
  padding:.95em 1.1em;margin-top:8px;
  transition:border-color .25s,background .25s;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.42);}
.contact-form input:focus,.contact-form textarea:focus{border-color:#fff;background:rgba(255,255,255,.13);}
.contact-form textarea{min-height:120px;resize:vertical;line-height:1.6;}
.contact-form .btn{margin-top:30px;align-self:flex-start;}
.contact-thanks{
  font-family:var(--head);font-weight:700;font-size:1rem;letter-spacing:.05em;
  color:var(--rose);margin-top:20px;min-height:1.4em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(60px,7vw,100px) 0 30px;}
.footer .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(26px,3vw,50px);}
.footer .fbrand .logo-mark{
  width:42px;height:42px;display:block;
  background-color:var(--rose);
  -webkit-mask:url("logo-yoga.png") center/contain no-repeat;
  mask:url("logo-yoga.png") center/contain no-repeat;
}
.footer .fbrand .bn{
  font-family:var(--head);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;margin-top:18px;
}
.footer .fbrand p{font-size:.88rem;margin-top:14px;max-width:32ch;}
.footer h4{
  font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose);
}
.footer ul{list-style:none;margin:18px 0 0;padding:0;}
.footer li{margin-bottom:9px;}
.footer li a{font-size:.9rem;color:rgba(255,255,255,.62);text-decoration:none;transition:color .25s;}
.footer li a:hover{color:#fff;}
.fsocial{display:flex;gap:14px;margin-top:18px;}
.fsocial a{color:rgba(255,255,255,.6);transition:color .25s;}
.fsocial a:hover{color:#fff;}
.footer-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.74rem;
}
.footer-bottom a{color:rgba(255,255,255,.62);text-decoration:none;}
.footer-bottom a:hover{color:#fff;}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{padding:clamp(130px,14vw,190px) 0 clamp(60px,8vw,110px);}
.legal .legal-inner{max-width:72ch;}
.legal .eyebrow{
  display:inline-block;
  font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terracotta);
}
.legal h1{font-size:clamp(2.6rem,7vw,5rem);margin-top:20px;}
.legal .updated{
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-top:18px;
}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-top:52px;padding-top:22px;border-top:2px solid rgba(var(--shadow-rgb),.18);}
.legal h3{font-size:1.1rem;margin-top:30px;}
.legal p,.legal li,.legal address{font-size:.95rem;line-height:1.75;font-style:normal;}
.legal address{margin:1.2em 0;}
.legal ul{padding-left:1.15em;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--ink);text-decoration:none;border-bottom:2px solid rgba(var(--accent-rgb),.35);}
.legal a:hover{color:var(--terracotta);border-color:var(--terracotta);}
.back-home{
  display:inline-flex;align-items:center;gap:.6em;margin-top:56px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terracotta);text-decoration:none;border:none;
}
.back-home:hover{color:var(--ink);}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  background:rgba(20,12,8,.94);
  padding:clamp(20px,4vw,60px);
  opacity:0;transition:opacity .25s ease;
}
.lb-overlay.open{display:flex;opacity:1;}
.lb-stage{position:relative;margin:0;max-width:min(1400px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:16px;}
.lb-img{max-width:100%;max-height:80vh;object-fit:contain;background:#1c120c;}
.lb-caption{color:rgba(255,255,255,.7);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-align:center;max-width:60ch;}
.lb-close,.lb-prev,.lb-next{
  position:absolute;z-index:2;background:transparent;border:2px solid rgba(255,255,255,.4);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:#fff;color:var(--ink);border-color:#fff;}
.lb-close{top:20px;right:20px;width:46px;height:46px;font-size:1.5rem;line-height:1;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.8rem;line-height:1;}
.lb-prev{left:20px;}
.lb-next{right:20px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .split{grid-template-columns:1fr;min-height:0;}
  .split .split-media{order:-1;}
  .split.rev .split-media{order:-1;}
  .split .split-media image-slot{height:clamp(300px,52vw,440px);min-height:0;}
  .news .news-inner{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .footer .fgrid{grid-template-columns:1fr 1fr;}
}

@media (max-width:820px){
  .offer-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
}

@media (max-width:760px){
  /* 16px minimum stops iOS Safari from zooming in on focus */
  .news-form input,.contact-form input,.contact-form textarea{font-size:16px;}
  .nav-toggle{display:flex;z-index:3;}
  .nav-links{
    position:fixed;inset:0;
    background:var(--ink);
    flex-direction:column;justify-content:center;align-items:center;
    gap:26px;
    transform:translateY(-100%);
    transition:transform .4s cubic-bezier(.2,.7,.3,1);
    z-index:2;
  }
  .nav-links.open{transform:none;}
  .nav-links a,.nav.scrolled .nav-links a,
.nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.nav.scrolled .nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content{font-size:1.1rem;letter-spacing:.14em;color:#fff;}
  .nav.menu-open,.nav.scrolled.menu-open{background:transparent;box-shadow:none;}
  .nav.menu-open .brand .logo-mark,.nav.scrolled.menu-open .brand .logo-mark{background-color:#fff;}
  .nav.menu-open .brand .bn,.nav.scrolled.menu-open .brand .bn{color:#fff;}
  .nav.menu-open .nav-toggle span,.nav.scrolled.menu-open .nav-toggle span{background:#fff;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  .hero-foot{flex-direction:column;align-items:flex-start;}
  .sched-row{grid-template-columns:80px 1fr;gap:6px 16px;}
  .sched-row .cls{grid-column:2;}
  .sched-row .lvl{grid-column:2;}
  .footer .fgrid{grid-template-columns:1fr;}
  .lb-prev,.lb-next{width:42px;height:42px;font-size:1.4rem;}
  .lb-prev{left:8px;} .lb-next{right:8px;}
  .gal-nav{width:42px;height:42px;}
  .gal-nav svg{width:18px;height:18px;}
}


/* ============================================================
   COLOUR — Sage
   ============================================================ */
:root{
  /* heading font of this colour (as in the Soft design) */
  --head:'Kalam','Bradley Hand',cursive;

  --rose:#c8d8c2;
  --brown:#6f8470;
  --terracotta:#3f5a3a;

  --paper:#f4f7f1;
  --cream:#e7eee2;
  --sand:#d2dccb;
  --mist:#d6e0cf;

  --ink:#141d12;
  --grey700:#3f4a3c;
  --muted:#7c8778;

  --shadow-rgb:24,44,24;
  --accent-rgb:111,132,112;
}

.lb-overlay{background:rgba(12,20,12,.94);}
.lb-img{background:#141d12;}

/* ============================================================
   WORDPRESS BLOCK SUPPORT
   Everything below adapts the markup differences between the plain
   HTML template and the block markup WordPress saves. It changes no
   design decision — only the selectors the same styles hang off.
   ============================================================ */

/* core/site-logo + core/site-title replace the masked .logo-mark span. */
.wp-block-site-logo{margin:0;line-height:0;}
.brand .wp-block-site-logo img{width:32px;height:auto;}
.footer .wp-block-site-logo img{width:42px;height:auto;}
.brand .wp-block-site-title,
.footer .wp-block-site-title{margin:0;}
.brand .wp-block-site-title a,
.footer .wp-block-site-title a{color:inherit;text-decoration:none;}

/* Inline elements (links, kickers) that are direct layout children get a
   paragraph wrapper from the block editor; display:contents takes that
   wrapper back out of the layout so the real child sits where it did. */
.bw{display:contents;}

/* Text-only boxes in the HTML template become core/paragraph, which brings
   its own margins. */
.wp-block-group > p:last-child{margin-bottom:0;}

/* core/list keeps the list styling the template already defines. */
ul.wp-block-list{list-style:none;}

/* core/image replaces <image-slot>: fill the frame it sits in. */
.wp-block-image{margin:0;}
.wp-block-image img{display:block;}

.hero-bg .wp-block-image,
.retreat-bg .wp-block-image,
.split-media .wp-block-image,
.ocard .wp-block-image{position:absolute;inset:0;width:100%;height:100%;}
.hero-bg .wp-block-image img,
.retreat-bg .wp-block-image img,
.split-media .wp-block-image img,
.ocard .wp-block-image img,
.contact-map .wp-block-image img,
.gal-grid .wp-block-image img{width:100%;height:100%;object-fit:cover;}
/* .split-media is a grid cell, so the figure needs a positioning context. */
.split-media{position:relative;min-height:340px;}
.ocard .wp-block-image{z-index:0;}
.contact-map .wp-block-image{width:100%;height:190px;}
.gal-grid .wp-block-image{
  flex:0 0 clamp(260px,30vw,420px);
  height:clamp(320px,34vw,480px);
  scroll-snap-align:start;cursor:zoom-in;transition:opacity .35s;
}
.gal-grid .wp-block-image:hover{opacity:.9;}
.ocard p.onum,.ocard p.ometa,.retreat-meta p,.contact-list p,
.about-creds p,.sched-row p,.tcard p.qm,.tcard p.who{margin:0;}
@media (max-width:1000px){
  .split-media .wp-block-image{position:relative;height:clamp(300px,52vw,440px);}
}

/* ============================================================
   BLOCK / SITE EDITOR ONLY
   .editor-styles-wrapper only exists inside the editor iframe, so none
   of this reaches the live site. Reveals the scroll-animated elements
   and unpins the fixed nav so the page can actually be edited.
   ============================================================ */
.editor-styles-wrapper .reveal{opacity:1 !important;transform:none !important;}
.editor-styles-wrapper .nav{position:static !important;background:none !important;box-shadow:none !important;}
.editor-styles-wrapper .hero{min-height:0 !important;padding-top:40px !important;}
.editor-styles-wrapper .nav-links{position:static !important;transform:none !important;background:none !important;}
.editor-styles-wrapper .brand .wp-block-site-title a{color:var(--ink) !important;}
.editor-styles-wrapper .hero-bg,
.editor-styles-wrapper .retreat-bg{position:relative !important;height:420px;}

/* ============================================================
   ICON MASKS — raw <svg> has no native block equivalent, so the
   social icons are CSS masks on a <span>.
   ============================================================ */
.icon-arrow-up{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205%20L12%2019%20M5%2012%20L12%205%20L19%2012%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205%20L12%2019%20M5%2012%20L12%205%20L19%2012%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-instagram{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217.3%22%20cy%3D%226.7%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-youtube{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M10%209l5%203-5%203z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%224%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M10%209l5%203-5%203z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-facebook{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%208h2.5V5H14c-2%200-3.5%201.5-3.5%203.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V8.5c0-.3.2-.5.5-.5z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M14%208h2.5V5H14c-2%200-3.5%201.5-3.5%203.5V11H8v3h2.5v7h3v-7H16l.5-3h-3V8.5c0-.3.2-.5.5-.5z%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-email{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M4%207l8%206%208-6%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M4%207l8%206%208-6%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.icon-burger-close{display:inline-block;background-color:currentColor;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%205%20L19%2019%20M19%205%20L5%2019%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%205%20L19%2019%20M19%205%20L5%2019%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;}
.fsocial .icon{width:21px;height:21px;}

/* Keep the retreat text off the band's edges once it outgrows the band. */
.retreat{padding:clamp(64px,8vw,110px) 0;}

/* ============================================================
   MOBILE MENU — grows out of the nav bar. parallax.js hands the
   panel the bar's current box (--bar-*); the panel starts clipped
   to exactly that shape and expands smoothly to full screen, then
   the links fade in. Closing shrinks it back into the bar.
   ============================================================ */
@media (max-width:760px){
  .nav-links{
    transform:none;visibility:hidden;opacity:0;
    clip-path:inset(var(--bar-t,0px) var(--bar-r,0px) var(--bar-b,calc(100% - 64px)) var(--bar-l,0px) round var(--bar-rad,0px));
    transition:clip-path .42s cubic-bezier(.55,0,.25,1), opacity .2s ease .22s, visibility 0s linear .42s;
  }
  .nav-links.open{
    visibility:visible;opacity:1;
    clip-path:inset(0px 0px 0px 0px round 0px);
    transition:clip-path .58s cubic-bezier(.5,0,.15,1), opacity .12s ease, visibility 0s;
  }
  .nav-links li{opacity:0;transform:translateY(14px);transition:opacity .15s ease, transform .2s ease;}
  .nav-links.open li{opacity:1;transform:none;transition:opacity .45s ease var(--d,.2s), transform .6s cubic-bezier(.2,.7,.3,1) var(--d,.2s);}
  .nav-links li:nth-child(2){--d:.24s;}
  .nav-links li:nth-child(3){--d:.28s;}
  .nav-links li:nth-child(4){--d:.32s;}
  .nav-links li:nth-child(5){--d:.36s;}
  .nav-links li:nth-child(6){--d:.4s;}
  .nav-links li:nth-child(n+7){--d:.44s;}
  /* logo stays above the panel while it grows and while it shrinks back */
  .nav .brand{position:relative;z-index:3;}
  /* Bold: logo and burger stay light until the dark panel has drawn back */
  .nav:not(.menu-open) .brand .bn,
  .nav:not(.menu-open) .brand .logo-mark,
  .nav:not(.menu-open) .nav-toggle span{transition-delay:.24s;}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .nav-links,.nav-links.open,.nav-links li,.nav-links.open li{transition:none;}
}
/* Block editor: always show the menu as a plain row, never clipped. */
.editor-styles-wrapper .nav-links,
.editor-styles-wrapper .nav-links li{visibility:visible !important;clip-path:none !important;opacity:1 !important;transform:none !important;}

/* Menu labels stay on one line (German labels such as "Über mich" are longer). */
.nav-links a,
.nav-links a.wp-block-navigation-item__content.wp-block-navigation-item__content{white-space:nowrap;}

/* Long single words (e.g. German "Datenschutzerklärung") must not run past a
   phone screen: break them only when they would overflow, hyphenate German. */
h1,h2,h3{overflow-wrap:break-word;}
:lang(de) h1,:lang(de) h2,:lang(de) h3{-webkit-hyphens:auto;hyphens:auto;}

/* Kalam has no italic: emphasised words in headings stay upright (as in
   the Soft design) instead of a synthetic slant. */
h1 em,h2 em,h3 em,h4 em{font-style:normal;}
h1,h2,h3,h4{font-synthesis-style:none;}

/* ============================================================
   MENU — core/navigation block (Design → Editor → Navigation).
   The wrappers WordPress adds take no part in the layout, so the
   menu items sit exactly where the existing menu styles expect them.
   ============================================================ */
.nav-links .wp-block-navigation,
.nav-links .wp-block-navigation__container{display:contents;}
.nav-links .wp-block-navigation-item{list-style:none;}
.nav-links .wp-block-navigation-item__content,
.footer .wp-block-navigation-item__content{padding:0;}
.footer nav.wp-block-navigation{display:contents;}
/* footer menu: the design's footer-list styles */
.footer ul.wp-block-navigation__container{display:block;list-style:none;margin:18px 0 0;padding:0;}
.footer li.wp-block-navigation-item{margin-bottom:9px;}

/* ============================================================
   FLOATING BAR (as in the Soft design) — once the page scrolls, the bar
   floats as a rounded glass bar. Colours and fonts stay this design's.
   ============================================================ */
.nav{
  border:1px solid transparent;
  transition:top .4s, left .4s, right .4s, padding .4s, background .4s,
             box-shadow .4s, border-radius .4s, border-color .4s;
}
.nav.scrolled{
  top:14px;left:18px;right:18px;
  padding:10px clamp(28px, 3.6vw, 48px) 10px clamp(18px, 2.4vw, 28px);
  border-radius:0;
  border-color:rgba(var(--accent-rgb),.18);
  box-shadow:0 14px 36px -20px rgba(var(--shadow-rgb),.22);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* The blur lives on a pseudo-element: backdrop-filter on the nav itself
   would make it the containing block of the fixed mobile menu. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  backdrop-filter:blur(14px) saturate(105%);
  -webkit-backdrop-filter:blur(14px) saturate(105%);
  opacity:0;transition:opacity .4s;
}
/* "body" outranks the colour files' own .nav.scrolled background */
body .nav.scrolled{background:color-mix(in srgb, var(--paper) 78%, transparent);}
.nav.scrolled::before{opacity:1;}
.nav.menu-open::before{opacity:0;transition:none;}
@media (max-width:760px){
  .nav.menu-open,
  .nav.scrolled.menu-open{background:transparent;border-color:transparent;box-shadow:none;}
  /* keep the floating bar's shape while the menu opens, so the burger/X
     and the logo stay under the finger */
  .nav.scrolled.menu-open{
    top:14px;left:18px;right:18px;border-radius:0;
    padding:10px clamp(28px, 3.6vw, 48px) 10px clamp(18px, 2.4vw, 28px);
  }
}