/* ==========================================================================
   AcroYoga.ca — "Counterbalance" design system
   The palette encodes the practice: TEAL grounds (the base),
   CORAL lifts (the flyer). Everything balances between them.
   ========================================================================== */

:root{
  --paper:      #FBF7F2;   /* warm off-white ground            */
  --paper-2:    #F4ECE3;   /* slightly deeper panel            */
  --ink:        #2C1E37;   /* deep aubergine — primary text    */
  --ink-soft:   #6E6076;   /* muted text                       */
  --base:       #167C72;   /* teal — the base (structure)      */
  --base-deep:  #0E5A53;
  --flyer:      #EE5B44;   /* coral — the flyer (action)       */
  --flyer-deep: #D2402A;
  --sun:        #F2B33C;   /* marigold — featured highlight    */
  --line:       #E7DDD2;
  --card:       #FFFFFF;

  --r:          14px;      /* radius */
  --maxw:       1040px;
  --shadow:     0 1px 2px rgba(44,30,55,.05), 0 8px 24px rgba(44,30,55,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

a{color:var(--flyer-deep); text-decoration:none}
a:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px}

/* ---- Display type ---------------------------------------------------- */
h1,h2,h3,.display{font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:700; letter-spacing:-.02em; line-height:1.05}
.mono{font-family:"Space Mono", ui-monospace, monospace}

/* ---- Header / nav ---------------------------------------------------- */
.site-head{border-bottom:1px solid var(--line); background:rgba(251,247,242,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20}
.site-head .wrap{display:flex; align-items:center; gap:18px; min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:8px; font-family:"Bricolage Grotesque"; font-weight:800; font-size:1.25rem; color:var(--ink); letter-spacing:-.03em}
.brand .dot{width:11px; height:11px; border-radius:50%; background:var(--flyer); align-self:center; box-shadow:0 0 0 4px rgba(238,91,68,.16)}
.brand:hover{text-decoration:none}
.nav{display:flex; gap:6px; align-items:center; margin-left:auto; font-size:.95rem; flex-wrap:wrap}
.nav a{color:var(--ink-soft); padding:6px 10px; border-radius:8px; font-weight:600}
.nav a:hover{color:var(--ink); background:var(--paper-2); text-decoration:none}
.nav a.active{color:var(--base-deep)}
.lang-pill{border:1px solid var(--line); border-radius:999px; padding:4px 4px; display:inline-flex; gap:2px; background:var(--card)}
.lang-pill a{padding:3px 11px; border-radius:999px; font-weight:700; font-size:.82rem; color:var(--ink-soft)}
.lang-pill a.on{background:var(--ink); color:#fff}
.lang-pill a:hover{text-decoration:none}

/* ---- Hero ------------------------------------------------------------ */
.hero{padding:54px 0 30px; display:grid; grid-template-columns:1.3fr .9fr; gap:30px; align-items:center}
.hero .eyebrow{font-family:"Space Mono"; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--base); margin:0 0 14px}
.hero h1{font-size:clamp(2.4rem, 5vw, 3.6rem); margin:0 0 16px}
.hero h1 .lift{color:var(--flyer)}
.hero h1 .ground{color:var(--base)}
.hero p.sub{font-size:1.12rem; color:var(--ink-soft); max-width:46ch; margin:0 0 24px}
.cta{display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff; font-weight:700; padding:13px 22px; border-radius:999px; font-family:"Bricolage Grotesque"}
.cta:hover{text-decoration:none; background:var(--flyer-deep)}
.hero-art{display:flex; justify-content:center}
.hero-art svg{width:100%; max-width:300px; height:auto}

/* ---- Section heading ------------------------------------------------- */
.section-head{padding:30px 0 6px}
.section-head .kicker{font-family:"Space Mono"; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--base)}
.section-head h2{font-size:1.7rem; margin:6px 0 4px}
.section-head p{margin:0; color:var(--ink-soft)}

/* ---- Category grid (home) ------------------------------------------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 0 10px}
.cat-card{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.cat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d8cabb; text-decoration:none}
.cat-card .ic{font-size:1.5rem}
.cat-card h3{font-size:1.12rem; margin:10px 0 4px; color:var(--ink)}
.cat-card p{margin:0 0 12px; font-size:.93rem; color:var(--ink-soft); line-height:1.45}
.cat-card .count{font-family:"Space Mono"; font-size:.78rem; color:var(--base-deep); background:rgba(22,124,114,.09); padding:3px 9px; border-radius:999px}

/* ---- Group + entries (category page) -------------------------------- */
.group{padding:26px 0 6px}
.group-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.group-head h3{font-size:1.18rem; color:var(--base-deep); margin:0; white-space:nowrap}
.group-head .rule{height:2px; background:linear-gradient(90deg,var(--base) 0,rgba(22,124,114,0) 100%); flex:1; border-radius:2px; opacity:.4}
.group-head .qty{font-family:"Space Mono"; font-size:.74rem; color:var(--ink-soft)}

.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:13px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px; position:relative; transition:transform .14s ease, box-shadow .14s ease}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.card.feat{border-color:var(--sun); box-shadow:0 0 0 1px var(--sun) inset}
.card .top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.card .name{font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.06rem; line-height:1.2}
.card .name a{color:var(--ink)}
.card .name a:hover{color:var(--flyer-deep); text-decoration:none}
.card .city{font-size:.86rem; color:var(--base); font-weight:600; margin-top:1px}
.card .note{font-size:.92rem; color:var(--ink-soft); margin:8px 0 0; line-height:1.45}
.card .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px}
.card .domain{font-family:"Space Mono"; font-size:.74rem; color:var(--flyer-deep)}
.card .domain::before{content:"\2197\00a0"}
.badge{font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:6px}
.badge.bi{background:rgba(22,124,114,.12); color:var(--base-deep)}
.badge.ft{background:var(--sun); color:#5a3d05}
.verified{font-family:"Space Mono"; font-size:.7rem; color:var(--ink-soft); margin-left:auto}

/* ---- Cross-language callout + footer -------------------------------- */
.callout{margin:46px 0 0; background:linear-gradient(120deg,var(--paper-2),#fff); border:1px solid var(--line); border-left:4px solid var(--flyer); border-radius:var(--r); padding:22px 24px}
.callout h4{font-family:"Bricolage Grotesque"; font-size:1.15rem; margin:0 0 6px}
.callout p{margin:0 0 12px; color:var(--ink-soft); max-width:60ch}
.callout a.go{font-weight:700; color:var(--flyer-deep)}

.site-foot{margin-top:40px; border-top:1px solid var(--line); padding:28px 0 60px; color:var(--ink-soft); font-size:.9rem}
.site-foot .row{display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; align-items:center}
.site-foot .disclaimer{max-width:62ch; margin:14px 0 0; font-size:.82rem; opacity:.85}

/* ---- Language picker (root) ----------------------------------------- */
.picker{min-height:100vh; display:grid; place-items:center; text-align:center; padding:30px}
.picker .mark{width:160px; margin:0 auto 18px}
.picker h1{font-size:clamp(2.2rem,6vw,3.4rem); margin:0 0 6px}
.picker p{color:var(--ink-soft); margin:0 0 26px}
.picker .choices{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.picker .choices a{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 30px; font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.1rem; color:var(--ink); min-width:170px}
.picker .choices a:hover{text-decoration:none; transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--flyer)}
.picker .choices a span{display:block; font-family:"Space Mono"; font-weight:400; font-size:.74rem; color:var(--ink-soft); margin-top:6px; text-transform:uppercase; letter-spacing:.08em}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width:820px){
  .hero{grid-template-columns:1fr; padding-top:34px}
  .hero-art{order:-1; max-width:220px; margin:0 auto}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cat-grid{grid-template-columns:1fr}
  .nav{width:100%; margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}
:focus-visible{outline:3px solid var(--base); outline-offset:2px; border-radius:4px}

/* Optional hero photo (set site.json "hero_image" to use your own) */
.hero-photo{width:100%;max-width:440px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}