/* Skulpt Online Coaching: WordPress-only rules, loaded after the design's css/site.css and
   css/home.css (skin-extra.php). Nothing here changes the approved look; it covers what
   WordPress adds around it. */

/* The design hangs the see-through nav and the big-screen sizes off <body class="home">. The
   engine's frame gives the home page <body class="cc-page cc-page-home">, so the same rules,
   copied from css/home.css, keyed to that. Keep in step with css/home.css. */
.cc-page-home .nav{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .35s,border-color .35s}
.cc-page-home .nav.solid{background:rgba(17,17,17,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:#222}
.cc-page-home .kick{font-size:14px}
@media (min-width:1800px){
  .cc-page-home{--wrap:1560px}
  body.cc-page-home{font-size:20px}
}
/* The engine widens .wrap to 1800px above 1920 (its house wide-screen rule). This design sets its
   own wide-screen width (--wrap 1560px from 1800px, checked by eye at 2560 before sign off), so it
   keeps it: more specific than the engine's .wrap. */
.cc-page .wrap{max-width:var(--wrap)}

/* The apply form: the honeypot box people never see, and the message line (errors) across the form. */
.skulpt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.af .skulpt-msg{grid-column:1/-1;padding:12px 14px;border-radius:10px;border:1px solid var(--line);color:var(--white);font-size:16px}
.af .skulpt-msg[hidden]{display:none}
.af .skulpt-msg--err{border-color:var(--red)}
.af [aria-invalid="true"]{border-color:var(--red)}
.af button[aria-busy="true"]{opacity:.7;cursor:progress}

/* Privacy and cookies, in the design's type. */
.legal{padding-top:clamp(60px,8vw,110px)}
.legal h1.t{font-size:clamp(50px,6.6vw,96px)}
.legal-body{max-width:760px;margin-top:clamp(34px,5vw,60px)}
.legal-body h2.t{font-size:clamp(28px,3vw,40px);margin:1.6em 0 .4em}
.legal-body p{margin:0 0 1em}
.legal-body a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.legal-body .small{margin-top:2.4em;font-size:15px;color:var(--grey)}
.legal-body .cookie-list{margin:0 0 1.2em;padding:0;list-style:none;border-top:1px solid var(--line,#2c2c2c)}
.legal-body .cookie-list li{padding:.8em 0;border-bottom:1px solid var(--line,#2c2c2c)}
.legal-body .cookie-list strong{color:var(--white)}
.legal-body #cookies{scroll-margin-top:100px}
.legal .lede{text-wrap:balance}
.legal-body li{text-wrap:pretty}

/* Page not found (templates/wp.php). */
.nf{padding:clamp(80px,12vw,160px) 0}
.nf h1{font-family:'Tusker',Impact,sans-serif;font-weight:700;text-transform:uppercase;color:var(--white);font-size:clamp(46px,6vw,84px);line-height:1.04;margin:0 0 18px}
.nf .btn{margin-top:12px}

/* The editor (html.static): a still page. No skull intro, nothing moving. */
html.static .intro{display:none!important}
html.static .marq-track,html.static .wall-track,html.static .fchip,html.static .chips-float .box,html.static [data-float],html.static .sk-glow,html.static .h-app .phone.ghost,html.static .h-scroll span,html.static .ui{animation:none!important}

/* The WhatsApp button (skulpt-design.php): a red circle on phones, a pill with the words from 900px.
   Under the cookie bar (z 90) and out of the way while it is open. */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:80;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:56px;height:56px;border-radius:999px;background:#e11c2b;color:#f9f9f9;text-decoration:none;box-shadow:0 10px 30px -8px rgba(0,0,0,.55);transition:transform .2s ease,opacity .2s ease}
.wa-float span{display:none;font-weight:700;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.wa-float:hover{transform:translateY(-2px)}
.wa-float:focus-visible{outline:2px solid #f9f9f9;outline-offset:3px}
/* Also out of the way while a form's send button is on screen (site.js sets body.wa-off), so it
   never sits on top of it. The editor never prints the button, so html.static needs no rule:
   home.js also sets html.static for visitors who ask for less motion. */
body.ck-open .wa-float,body.wa-off .wa-float{opacity:0;pointer-events:none}
@media (min-width:900px){.wa-float{right:24px;bottom:24px;width:auto;padding:0 22px 0 18px}.wa-float span{display:inline}}
@media print{.wa-float{display:none}}

/* The first case photo turns 12deg as it comes in (home.js), which made a 360px phone page 18px
   too wide until it landed. Clipped here, not on html or body, so the pinned panels keep working. */
.h-cases{overflow-x:clip}

/* Coaching pages on phones: the hero label stays readable on the brighter photos (the lake). */
@media (max-width:520px){
  .coaching .h-hero-photo::after{background:linear-gradient(0deg,#0b0b0b 6%,rgba(11,11,11,.82) 55%,rgba(11,11,11,.72) 80%,rgba(11,11,11,.8) 100%)}
  .coaching .h-hero .kick{text-shadow:0 1px 12px rgba(0,0,0,.9)}
}