/*
 * fluid.css — Camiforex "fluid" refinement layer (loaded last)
 * Apple-style interface principles applied to the existing design:
 *   instant press feedback · interruptible, critically-damped motion · translucent materials
 *   size-specific typography · menus that grow from their trigger · reduced motion / transparency / contrast
 * Built by NgallaFX (ngallabrian@gmail.com)
 */

:root{
  /* motion: one family of curves for the whole site */
  --ease-out:cubic-bezier(.22,1,.36,1);        /* critically damped settle — no overshoot */
  --ease-sheet:cubic-bezier(.32,.72,0,1);      /* iOS sheet / drawer curve */
  --ease-press:cubic-bezier(.2,0,0,1);
  --t-press:90ms;
  --t-quick:220ms;
  --t-move:480ms;
  /* materials */
  --glass:rgba(8,9,13,.62);
  --glass-strong:rgba(8,9,13,.82);
  --glass-edge:rgba(137,245,178,.10);
  --focus:#7ef7a8;
}
html[data-theme="light"]{
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.86);
  --glass-edge:rgba(255,255,255,.9);
  --focus:#0ab74a;
}

html{scroll-padding-top:120px;-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
a,button,.btn,label,summary,[role="button"]{touch-action:manipulation}

/* ---------- 1 · Typography: tracking and leading by size ---------- */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.hero h1{font-size:clamp(38px,5vw + 4px,74px);line-height:1.03;letter-spacing:-.04em}
@media (min-width:1181px){.hero h1{max-width:600px}}
@media (min-width:1181px) and (max-width:1360px){.hero h1{font-size:62px;max-width:530px}}
.page-hero h1,.course-hero h1{font-size:clamp(32px,3.4vw + 10px,60px);line-height:1.06;letter-spacing:-.034em}
.sec-head h2,h2.big{font-size:clamp(30px,3.2vw + 10px,58px);line-height:1.07;letter-spacing:-.03em}
.gcard h3,.box h3{letter-spacing:-.018em}
.crs-card h3{letter-spacing:-.014em}
.hero .lead,.page-hero p,.course-hero p{letter-spacing:-.006em;line-height:1.5}
.tag,.cc-cat,.kicker{letter-spacing:.09em}
.plan .big{letter-spacing:-.045em}
.plan .price,.stat b,.kpi b,.dk b{letter-spacing:-.025em;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .hero h1{line-height:1.06;letter-spacing:-.034em}
  .page-hero h1,.course-hero h1,.sec-head h2,h2.big{line-height:1.1;letter-spacing:-.028em}
}

/* ---------- 2 · Response: feedback on press, never only on release ---------- */
.btn,.tabs button,.theme-tgl,.burger,.chip,.lang-sw a,.sub-btn,.mm-arrow,.to-top,.wa-float,.chat-fab,.lb-pick a,.lb-tabs a,.tool-tabs a,.acct-nav a,.seg button,.faq summary{
  transition-property:transform,box-shadow,border-color,background-color,color,opacity;
  transition-duration:var(--t-quick);transition-timing-function:var(--ease-out)}
.btn:active,.tabs button:active,.theme-tgl:active,.burger:active,.chip:active,.lang-sw a:active,.to-top:active,
.lb-pick a:active,.lb-tabs a:active,.tool-tabs a:active,.seg button:active,.acct-nav a:active{
  transform:scale(.965);transition-duration:var(--t-press);transition-timing-function:var(--ease-press)}
.wa-float:active,.chat-fab:active{transform:scale(.92);transition-duration:var(--t-press)}
.faq summary:active{transform:scale(.995)}
/* lift on hover only where a real pointer hovers — no "sticky hover" on phones */
@media (hover:none){
  .btn:hover,.crs-card:hover,.plan:hover,.gcard:hover,.ctst:hover,.ev-card:hover,.nw-card:hover{transform:none}
}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.965)}
  .crs-card,.gcard,.ctst,.ev-card,.nw-card{transition:transform var(--t-move) var(--ease-out),box-shadow var(--t-move) var(--ease-out),border-color .3s}
  .crs-card:hover,.gcard:hover,.ctst:hover,.ev-card:hover,.nw-card:hover{transform:translateY(-4px)}
}
.crs-card:active,.gcard:active,.ctst:active,.ev-card:active,.nw-card:active{transform:scale(.985);transition-duration:var(--t-press)}

/* keyboard focus: clear and on-brand, never on mouse click */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.btn:focus-visible{outline-offset:4px}
:focus:not(:focus-visible){outline:none}

/* ---------- 3 · Materials: translucent chrome, content flows underneath ---------- */
.nav{background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--glass-edge)}
html[data-theme="light"] .nav{background:var(--glass);border-color:rgba(220,222,226,.9);box-shadow:inset 0 1px 0 var(--glass-edge),0 14px 34px -24px rgba(24,26,37,.32)}
.header.stuck .nav{animation:navIn var(--t-move) var(--ease-sheet) both;box-shadow:inset 0 1px 0 var(--glass-edge),0 18px 40px -22px rgba(0,0,0,.85)}
html[data-theme="light"] .header.stuck .nav{box-shadow:inset 0 1px 0 var(--glass-edge),0 18px 40px -22px rgba(24,26,37,.28)}
@keyframes navIn{from{transform:translate(-50%,-16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* menus grow from the item that opened them, and materialize instead of just fading */
@media (min-width:1181px){
.sub,.mega{transform-origin:50% 0;transform:translate(-50%,-6px) scale(.96);
  transition:opacity var(--t-quick) var(--ease-out),transform var(--t-move) var(--ease-sheet),visibility var(--t-quick)}
.has-sub:hover .sub,.has-sub.open .sub,.has-mega:hover .mega,.has-mega.open .mega{transform:translate(-50%,0) scale(1)}
.sub,.mega-in{-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);background:var(--glass-strong)}
html[data-theme="light"] .mega-in{background:var(--glass-strong);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.sub a,.menu .mm-item{transition:background-color .18s var(--ease-out),color .18s}
.sub-btn svg,.mm-arrow svg{transition:transform var(--t-move) var(--ease-sheet)}
}

/* the "Lead coach" badge sizes to its text */
.pbadge{width:max-content;max-width:none}

/* ---------- 4 · Phone menu = a sheet: slides with the iOS curve, can be dragged closed ---------- */
@media (max-width:1180px){
  /* hidden sheet is truly hidden (no edge or shadow peeking in at the side of the screen) */
  .menu{visibility:hidden;transition:transform .5s var(--ease-sheet),visibility 0s linear .5s;will-change:transform;
    -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);background:var(--glass-strong);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);overscroll-behavior:contain}
  html[data-theme="light"] .menu{background:rgba(255,255,255,.9);box-shadow:-30px 0 60px -30px rgba(24,26,37,.25)}
  body.nav-open .menu{visibility:visible;transition:transform .5s var(--ease-sheet),visibility 0s}
  body .menu.is-dragging{transition:none!important}
  /* the scrim exists all the time so it can fade in and out (and follow a drag) */
  body::after{content:"";position:fixed;inset:0;z-index:54;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
    transition:opacity .45s var(--ease-out);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.nav-open::after{opacity:var(--scrim,1);pointer-events:auto}
  body.nav-dragging::after{transition:none}
  html[data-theme="light"] body::after{background:rgba(225,227,231,.6)}
}
body.side-open::after{opacity:1;pointer-events:auto}

/* ---------- 5 · Segmented control: one thumb that slides between options ---------- */
.tabs.seg-fluid{position:relative;isolation:isolate}
.tabs.seg-fluid button,.tabs.seg-fluid button.on,html[data-theme="light"] .tabs.seg-fluid button,html[data-theme="light"] .tabs.seg-fluid button.on{
  background:transparent;border-color:transparent;box-shadow:none;position:relative;z-index:1}
.tabs.seg-fluid button{color:var(--muted)}
.tabs.seg-fluid button.on{color:var(--white)}
html[data-theme="light"] .tabs.seg-fluid button.on{color:#fff}
.seg-thumb{position:absolute;top:6px;left:0;height:calc(100% - 12px);border-radius:6px;z-index:0;pointer-events:none;
  background:radial-gradient(120% 140% at 30% 0,rgba(67,219,124,.45),rgba(38,43,60,.35) 40%,#0a0b10 75%);
  border:1px solid #2a2f41;box-shadow:inset 0 1px 0 rgba(101,238,152,.35),0 8px 22px -12px rgba(67,219,124,.6);
  transition:transform var(--t-move) var(--ease-sheet),width var(--t-move) var(--ease-sheet)}
.seg-thumb.no-anim{transition:none}
html[data-theme="light"] .seg-thumb{background:linear-gradient(180deg,#1fe067,#0abe4d);border-color:transparent;box-shadow:0 10px 22px -12px rgba(10,183,74,.7)}
.panel.on{animation:panelIn .42s var(--ease-out) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 6 · Scroll reveals: shorter, smoother, no overshoot ---------- */
.rv{transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0s)}
.rv.z{transform:scale(.97)}
.rv.in,.rv.z.in{transform:none}

/* FAQ answers open smoothly where the browser can animate to "auto" */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-sheet),content-visibility .45s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- 7 · Theme switch: a soft cross-fade, never a hard flash ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease-out)}

/* ---------- 8 · Accessibility: motion, transparency, contrast ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .rv,.rv.z{transform:none!important;transition:opacity .3s linear!important}
  .header.stuck .nav{animation:none}
  .seg-thumb,.menu{transition-duration:.01ms!important}
  .panel.on{animation:none}
  .btn:hover,.crs-card:hover,.gcard:hover,.ctst:hover,.ev-card:hover,.nw-card:hover{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:1181px){
  .sub,.mega,.has-sub:hover .sub,.has-sub.open .sub,.has-mega:hover .mega,.has-mega.open .mega{transform:translate(-50%,0)!important;transition:opacity .15s linear,visibility .15s!important}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.sub,.mega-in,.menu{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .nav,.sub,.mega-in,.menu{background:#08090d!important}
  html[data-theme="light"] .nav,html[data-theme="light"] .sub,html[data-theme="light"] .mega-in,html[data-theme="light"] .menu{background:#ffffff!important}
}
@media (prefers-contrast:more){
  .nav,.sub,.mega-in,.menu{background:#060609!important;border-color:var(--mint)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-theme="light"] .nav,html[data-theme="light"] .sub,html[data-theme="light"] .mega-in,html[data-theme="light"] .menu{background:#fff!important;border-color:#0e0f14!important}
  :focus-visible{outline-width:3px}
}