/*
Theme Name: Supercompensated
Theme URI: https://supercompensated.com
Author: Valotrail
Author URI: https://valotrail.com
Description: A performance-physiology brand site for senior leaders. Dark teal landing built around the supercompensation curve, with a light interior mode for long-form content. Carries the Valotrail build playbook: data-theme tokens, full-height flex frame, Customizer brand knobs, template_redirect gating, and svh/iOS fixes. Type is Schibsted Grotesk + JetBrains Mono. Waitlist runs on Fluent Forms + FluentCRM.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supercompensated

Bump Version: on every visual change — WordPress appends it to style.css?ver= for cache-busting.
*/

/* =========================================================================
   TOKENS
   Accent + type live on :root. Background/ink are set per data-theme.
   header.php sets data-theme="dark" on the landing + 404, "light" elsewhere.
   Type: Schibsted Grotesk carries display + body; JetBrains Mono carries the
   small uppercase labels (eyebrows, status, nav, footer, captions, buttons).
   ========================================================================= */
:root{
  /* brand accent (the "rise") — the glow used on dark surfaces */
  --rise:#2DD4BF;
  --rise-bright:#6FF0E0;
  --calm:#6E8482;            /* muted counter-tone — only the "paused/strain" path */

  --font-display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --maxw:1080px;
  --measure:760px;
  --measure-prose:68ch;
  --pad:clamp(1.25rem,4vw,2.5rem);
}

/* DARK — landing + 404 (the curve glows here) */
html[data-theme="dark"]{
  --bg:#072B2A;
  --ink:#ECF6F3;
  --muted:color-mix(in srgb, var(--ink) 54%, var(--bg));
  --faint:color-mix(in srgb, var(--ink) 32%, var(--bg));
  --line:color-mix(in srgb, var(--ink) 16%, var(--bg));
  background:var(--bg);
}

/* LIGHT — interior pages (airy teal, deep ink). Accent deepens for contrast. */
html[data-theme="light"]{
  --bg:#EDF4F1;
  --ink:#0C2E2A;
  --rise:#0E9488;            /* deeper teal so links/buttons read on light */
  --rise-bright:#13B3A2;
  --muted:color-mix(in srgb, var(--ink) 52%, var(--bg));
  --faint:color-mix(in srgb, var(--ink) 34%, var(--bg));
  --line:color-mix(in srgb, var(--ink) 16%, var(--bg));
  background:var(--bg);
}

/* =========================================================================
   BASE
   ========================================================================= */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
html{overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Guaranteed full-viewport backdrop — paints even where the body background
   isn't propagated (e.g. some in-app webviews). */
body::before{content:"";position:fixed;inset:0;background:var(--bg);z-index:-1;pointer-events:none;}

img,canvas,svg{max-width:100%;display:block;}
a{color:var(--rise);text-underline-offset:3px;text-decoration-thickness:1px;}
::selection{background:color-mix(in srgb, var(--rise) 32%, transparent); color:var(--ink);}

/* keyboard focus floor */
:focus-visible{outline:2px solid color-mix(in srgb, var(--rise) 80%, var(--ink)); outline-offset:3px; border-radius:2px;}

.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--bg);color:var(--ink);padding:.6rem 1rem;font-family:var(--font-mono);font-size:.8rem;}
.skip-link:focus{left:.5rem;top:.5rem;}

/* =========================================================================
   FRAME  (topbar / main / footer)
   ========================================================================= */
.stage{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:max(1.1rem, env(safe-area-inset-top)) var(--pad) 1.1rem;
}
.wordmark{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.74rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.wordmark:hover{color:var(--ink);}
.status{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.status__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--rise);
  animation:breathe 5.2s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--rise) 55%, transparent); opacity:.85;}
  50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--rise) 0%, transparent); opacity:1;}
}
.nav-mini{display:flex;gap:1.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;list-style:none;margin:0;padding:0;}
.nav-mini a{color:var(--muted);text-decoration:none;}
.nav-mini a:hover{color:var(--ink);}

.main{flex:1;display:flex;flex-direction:column;}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.2rem var(--pad) max(1.2rem, env(safe-area-inset-bottom));
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}
.footer a{color:inherit;text-decoration:none;}
.footer a:hover{color:var(--muted);}

/* =========================================================================
   HERO  (landing)
   ========================================================================= */
.hero-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2.5rem var(--pad);gap:clamp(2.25rem,6vh,4.5rem);}
.hero{width:100%;max-width:var(--measure);text-align:center;margin-inline:auto;}
.eyebrow{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(.62rem,1.5vw,.72rem);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 clamp(1.4rem,3.5vh,2rem);
}
.eyebrow .rise{color:var(--rise);}

.headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.05rem,5.4vw,4.15rem);
  line-height:1.05;
  letter-spacing:-.022em;
  margin:0;
  text-wrap:balance;
}
.headline .rise{color:var(--rise);}

.sub{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  line-height:1.45;
  color:var(--muted);
  margin:clamp(1.1rem,2.6vh,1.6rem) 0 0;
  text-wrap:balance;
}

/* =========================================================================
   WAITLIST — static placeholder (fallback) + Fluent Forms restyle
   ========================================================================= */
.signup{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.4rem 1.1rem;margin:clamp(1.9rem,4.5vh,2.6rem) auto 0;max-width:30rem;
}
.signup__input{
  flex:1 1 14rem;min-width:0;appearance:none;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;padding:.55rem .1rem;
  transition:border-color .25s ease;
}
.signup__input::placeholder{color:var(--faint);}
.signup__input:focus{outline:none;border-bottom-color:var(--rise);}
.signup__btn{
  flex:0 0 auto;background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:.55rem .1rem;position:relative;transition:color .25s ease;
}
.signup__btn::after{content:"";position:absolute;left:.1rem;right:.1rem;bottom:.32rem;height:1px;background:var(--rise);transform:scaleX(.001);transform-origin:left;transition:transform .3s ease;}
.signup__btn:hover{color:var(--rise);}
.signup__btn:hover::after{transform:scaleX(1);}
.signup__note{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;color:var(--faint);text-align:center;margin:.95rem auto 0;min-height:1em;}
.signup__note.done{color:var(--rise);}

/* Fluent Forms — restyle the embedded waitlist form to match the field above.
   NOTE: Fluent Forms class names can change across versions; verify against your
   installed version if the styling drifts (same lesson as the Valotrail retro). */
.sc-signup-ff{max-width:30rem;margin:clamp(1.9rem,4.5vh,2.6rem) auto 0;text-align:left;}
.sc-signup-ff .fluentform .ff-el-group{margin-bottom:0;}
.sc-signup-ff .fluentform .ff-el-input--label{display:none;}
.sc-signup-ff .fluentform input[type="email"],
.sc-signup-ff .fluentform input[type="text"]{
  width:100%;appearance:none;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;
  padding:.55rem .1rem;height:auto;box-shadow:none;border-radius:0;
}
.sc-signup-ff .fluentform input::placeholder{color:var(--faint);}
.sc-signup-ff .fluentform input:focus{outline:none;border-bottom-color:var(--rise);box-shadow:none;}
.sc-signup-ff .fluentform .ff-btn-submit,
.sc-signup-ff .fluentform button[type="submit"]{
  margin-top:1rem;background:transparent;border:1px solid var(--rise);color:var(--rise);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:.7rem 1.4rem;border-radius:999px;cursor:pointer;
  transition:background-color .25s ease,color .25s ease;box-shadow:none;
}
.sc-signup-ff .fluentform .ff-btn-submit:hover,
.sc-signup-ff .fluentform button[type="submit"]:hover{background:var(--rise);color:var(--bg);}
.sc-signup-ff .ff-message-success,
.sc-signup-ff .ff_submit_success{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--rise);background:transparent;border:0;padding:.6rem 0 0;}
.sc-signup-ff .error,.sc-signup-ff .ff-el-is-error input{border-bottom-color:#E98A6B;}
.sc-signup-ff .text-danger,.sc-signup-ff .ff-el-form-check-label.ff-el-is-error,.sc-signup-ff .error_message{font-family:var(--font-mono);font-size:.64rem;color:#E98A6B;letter-spacing:.04em;}

/* =========================================================================
   THE WAVE  (signature — front page only)
   ========================================================================= */
.wave{position:relative;width:100%;max-width:var(--maxw);height:clamp(190px,34svh,320px);margin-inline:auto;}
.wave::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 70% at 66% 36%, color-mix(in srgb, var(--rise) 12%, transparent), transparent 70%);pointer-events:none;}
#waveCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.wlabel{position:absolute;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);pointer-events:none;white-space:nowrap;opacity:0;animation:labelin .6s ease forwards;}
@keyframes labelin{to{opacity:1;}}
.wlabel--baseline{left:3.5%;top:60%;transform:translateY(-150%);animation-delay:.4s;}
.wlabel--recovered{left:66%;top:28.5%;transform:translate(-50%,-165%);color:var(--rise);animation-delay:2s;}
.wlabel--paused{left:80%;top:72%;transform:translate(-50%,55%);color:color-mix(in srgb, var(--calm) 75%, var(--bg));animation-delay:1.5s;}

/* =========================================================================
   INTERIOR PROSE  (light pages — the_content)
   ========================================================================= */
.page-head{padding:clamp(3rem,10vh,6rem) var(--pad) 0;max-width:var(--measure);margin-inline:auto;width:100%;}
.page-head .eyebrow{color:var(--rise);}
.page-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin:.2em 0 0;text-wrap:balance;}
.page-title .rise{color:var(--rise);}

.sc-prose{max-width:var(--measure-prose);margin:clamp(1.6rem,4vh,2.6rem) auto 0;padding:0 var(--pad) clamp(3rem,8vh,5rem);font-size:1.125rem;line-height:1.66;}
.sc-prose > *{margin-block:0;}
.sc-prose > * + *{margin-top:1.15em;}
.sc-prose h2{font-family:var(--font-display);font-weight:600;font-size:1.7rem;line-height:1.22;letter-spacing:-.01em;margin-top:2em;}
.sc-prose h3{font-family:var(--font-display);font-weight:600;font-size:1.32rem;line-height:1.28;margin-top:1.6em;}
.sc-prose h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:1.8em;}
.sc-prose a{color:var(--rise);text-decoration:underline;}
.sc-prose strong{font-weight:600;}
.sc-prose blockquote{margin:1.6em 0;padding-left:1.2em;border-left:2px solid var(--rise);color:var(--muted);font-size:1.05em;}
.sc-prose ul,.sc-prose ol{padding-left:1.3em;}
.sc-prose li + li{margin-top:.4em;}
.sc-prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0;}
.sc-prose code{font-family:var(--font-mono);font-size:.88em;background:color-mix(in srgb, var(--ink) 7%, var(--bg));padding:.1em .35em;border-radius:3px;}
.sc-prose img{margin:1.6em auto;border-radius:6px;}
.sc-prose figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint);text-align:center;margin-top:.6em;}

/* =========================================================================
   CARD UTILITY  (stretched-link — ready for archives/interior later)
   ========================================================================= */
.sc-card{position:relative;display:block;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);transition:border-color .2s ease;}
.sc-card:hover{border-color:color-mix(in srgb, var(--rise) 50%, var(--line));}
.sc-card a.sc-card__link::after{content:"";position:absolute;inset:0;}
.sc-card__meta{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;}
.sc-card__title{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.25;margin:.4rem 0 .3rem;display:block;}
.sc-card__title a{color:inherit;text-decoration:none;}

/* =========================================================================
   404
   ========================================================================= */
.notfound{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:3rem var(--pad);gap:1.4rem;}
.notfound__code{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--rise);}
.notfound__title{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,6vw,3.6rem);line-height:1.06;margin:0;max-width:18ch;letter-spacing:-.02em;}
.notfound__title .rise{color:var(--rise);}
.notfound__sub{font-family:var(--font-display);font-weight:400;color:var(--muted);max-width:46ch;}
.btn-ghost{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rise);border:1px solid var(--rise);border-radius:999px;padding:.7rem 1.5rem;text-decoration:none;transition:background-color .25s ease,color .25s ease;}
.btn-ghost:hover{background:var(--rise);color:var(--bg);}

/* =========================================================================
   RESPONSIVE / MOTION
   ========================================================================= */
@media (max-width:520px){
  .signup,.sc-signup-ff{align-items:stretch;}
  .wlabel--recovered{left:62%;}
}
@media (prefers-reduced-motion:reduce){
  .status__dot{animation:none;}
  .wlabel{animation:none;opacity:1;}
}