/*
Theme Name: SunKraft Solar
Theme URI: https://www.sunkraftsolar.com
Author: SunKraft Solar
Description: Lightweight block theme for SunKraft Solar. Built for speed and search visibility: no page builder, no jQuery, no external font or script requests. Palette and type live in theme.json; business details live in the SK_CONFIG array at the top of functions.php.
Version: 1.0.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: sunkraft
Tags: full-site-editing, one-column, custom-colors, custom-menu, accessibility-ready
*/

/* ============================================================
   1. Base
   ============================================================ */

:root{
  --sk-shadow: 0 1px 2px rgba(20,27,46,.05), 0 10px 28px -14px rgba(20,27,46,.16);
  --sk-shadow-lg: 0 2px 4px rgba(20,27,46,.06), 0 24px 56px -24px rgba(20,27,46,.24);
}

body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3,h4{ text-wrap: balance; }
p{ text-wrap: pretty; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--wp--preset--color--sun-bright);
  outline-offset: 3px; border-radius: 2px;
}

.sk-skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background: var(--wp--preset--color--ink); color:#fff;
  padding:.75rem 1.25rem; font-weight:600; text-decoration:none;
}
.sk-skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   2. Header + navigation
   ============================================================ */

.sk-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.sk-header__inner{ display:flex; align-items:center; gap:2rem; max-width:1180px; margin:0 auto; padding:.85rem 1.5rem; }
.sk-logo{
  font-family: var(--wp--preset--font-family--display);
  font-weight:700; font-size:1.2rem; letter-spacing:-.02em;
  color: var(--wp--preset--color--ink); text-decoration:none; white-space:nowrap;
}
.sk-logo span{ color: var(--wp--preset--color--sun); }
.sk-header nav{ margin-left:auto; }
.sk-header .wp-block-navigation{ font-family: var(--wp--preset--font-family--display); font-size:.9375rem; font-weight:500; }
.sk-header .wp-block-navigation a{ text-decoration:none; color: var(--wp--preset--color--ink-soft); }
.sk-header .wp-block-navigation a:hover{ color: var(--wp--preset--color--sun); }
.sk-header .wp-block-navigation .current-menu-item > a{ color: var(--wp--preset--color--sun); font-weight:600; }

.sk-header__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--wp--preset--color--ink); color:#fff;
  font-family: var(--wp--preset--font-family--display);
  font-size:.875rem; font-weight:600; text-decoration:none;
  padding:.7rem 1.15rem; border-radius:4px; white-space:nowrap;
}
.sk-header__cta:hover{ background: var(--wp--preset--color--sun); color:#fff; }
@media (max-width:900px){ .sk-header__cta{ display:none; } }

/* ============================================================
   3. Hero
   ============================================================ */

.sk-hero{
  background: var(--wp--preset--color--ink); color:#fff;
  padding:clamp(3.5rem,8vw,6.5rem) 0; position:relative; overflow:hidden;
}
.sk-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(58rem 34rem at 88% -12%, rgba(216,148,18,.30), transparent 62%);
}
.sk-hero > *{ position:relative; z-index:1; }
.sk-hero :is(h1,h2,h3){ color:#fff; }
.sk-hero p{ color:#D5DAE6; }
.sk-hero__lead{ font-size: var(--wp--preset--font-size--large); max-width:52ch; }
.sk-hero .wp-block-button__link{ background:var(--wp--preset--color--sun-bright); color:var(--wp--preset--color--ink); }
.sk-hero .wp-block-button__link:hover{ background:#fff; color:var(--wp--preset--color--ink); }
.sk-hero .is-style-outline .wp-block-button__link{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.sk-hero .is-style-outline .wp-block-button__link:hover{ background:#fff; color:var(--wp--preset--color--ink); border-color:#fff; }

.sk-eyebrow{
  font-family: var(--wp--preset--font-family--mono);
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--sun-bright);
}

/* ============================================================
   4. Trust / stat bar
   ============================================================ */

.sk-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--wp--preset--color--rule);
  border:1px solid var(--wp--preset--color--rule); border-radius:6px; overflow:hidden;
}
.sk-stat{ background:var(--wp--preset--color--paper); padding:1.4rem 1.5rem; }
.sk-stat__n{
  display:block; font-family:var(--wp--preset--font-family--display);
  font-size:1.85rem; font-weight:700; letter-spacing:-.03em; line-height:1.1;
  color:var(--wp--preset--color--ink); font-variant-numeric:tabular-nums;
}
.sk-stat__l{ display:block; margin-top:.3rem; font-size:.875rem; line-height:1.45; color:var(--wp--preset--color--muted); }

/* ============================================================
   5. Cards
   ============================================================ */

.sk-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); }
.sk-grid--2{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }

.sk-card{
  background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--rule);
  border-radius:7px; padding:1.6rem 1.7rem; box-shadow:var(--sk-shadow);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.sk-card{ text-decoration:none; display:block; color:inherit; }
a.sk-card:hover{ box-shadow:var(--sk-shadow-lg); transform:translateY(-2px); border-color:#BFC7D6; }
.sk-card h3{ margin:0 0 .55rem; font-size:1.1875rem; }
.sk-card p{ margin:0; font-size:.9375rem; color:var(--wp--preset--color--muted); line-height:1.6; }
.sk-card__more{
  display:inline-block; margin-top:.9rem;
  font-family:var(--wp--preset--font-family--display); font-size:.875rem; font-weight:600;
  color:var(--wp--preset--color--sun);
}
a.sk-card:hover .sk-card__more{ text-decoration:underline; }

.sk-benefit__n{
  display:inline-grid; place-items:center; width:2rem; height:2rem; margin-bottom:.85rem;
  font-family:var(--wp--preset--font-family--mono); font-size:.8125rem; font-weight:600;
  color:var(--wp--preset--color--sun); background:var(--wp--preset--color--sun-wash);
  border:1px solid var(--wp--preset--color--sun-bright); border-radius:50%;
}

.sk-usp{ border-left:3px solid var(--wp--preset--color--sun-bright); border-radius:0 7px 7px 0; }

/* ============================================================
   6. Sections
   ============================================================ */

.sk-section{ padding:clamp(3rem,6vw,5rem) 0; }
.sk-section--alt{ background:var(--wp--preset--color--paper-alt); }
.sk-section--ink{ background:var(--wp--preset--color--ink); }
.sk-section--ink :is(h2,h3,li){ color:#fff; }
.sk-section--ink p{ color:#D5DAE6; }

.sk-shead{ max-width:60ch; margin-bottom:2.25rem; }
.sk-shead p{ color:var(--wp--preset--color--muted); font-size:var(--wp--preset--font-size--large); }

/* ============================================================
   7. Process steps
   ============================================================ */

.sk-steps{ counter-reset:sk; display:grid; gap:1px; background:var(--wp--preset--color--rule);
  border:1px solid var(--wp--preset--color--rule); border-radius:7px; overflow:hidden; }
.sk-step{ counter-increment:sk; background:var(--wp--preset--color--paper); padding:1.5rem 1.75rem 1.5rem 4.5rem; position:relative; }
.sk-step::before{
  content:counter(sk); position:absolute; left:1.6rem; top:1.55rem;
  width:1.9rem; height:1.9rem; display:grid; place-items:center;
  background:var(--wp--preset--color--ink); color:#fff; border-radius:50%;
  font-family:var(--wp--preset--font-family--mono); font-size:.8125rem; font-weight:600;
}
.sk-step h3{ margin:0 0 .35rem; font-size:1.0625rem; }
.sk-step p{ margin:0; font-size:.9375rem; color:var(--wp--preset--color--muted); }

/* ============================================================
   8. FAQ (core/details block)
   ============================================================ */

.sk-faq{ border:1px solid var(--wp--preset--color--rule); border-radius:7px; overflow:hidden; background:var(--wp--preset--color--paper); }
.sk-faq .wp-block-details{ border-bottom:1px solid var(--wp--preset--color--rule); padding:0; margin:0; }
.sk-faq .wp-block-details:last-child{ border-bottom:0; }
.sk-faq summary{
  cursor:pointer; padding:1.05rem 1.5rem 1.05rem 3rem; position:relative; list-style:none;
  font-family:var(--wp--preset--font-family--display); font-weight:600; font-size:1.0125rem;
  color:var(--wp--preset--color--ink);
}
.sk-faq summary::-webkit-details-marker{ display:none; }
.sk-faq summary::before{
  content:"+"; position:absolute; left:1.5rem; top:1.05rem;
  font-family:var(--wp--preset--font-family--mono); font-weight:600; color:var(--wp--preset--color--sun);
}
.sk-faq details[open] > summary{ background:var(--wp--preset--color--sunk); }
.sk-faq details[open] > summary::before{ content:"\2013"; }
.sk-faq details > :not(summary){ padding:.35rem 1.5rem 1.35rem 3rem; margin:0; font-size:.9688rem; color:var(--wp--preset--color--ink-soft); }
.sk-faq details > p{ margin:.65rem 0; }

/* ============================================================
   9. Callouts
   ============================================================ */

.sk-note{
  background:var(--wp--preset--color--teal-wash);
  border-left:3px solid var(--wp--preset--color--teal);
  padding:1.1rem 1.4rem; border-radius:0 6px 6px 0;
}
.sk-note p{ margin:.5rem 0; font-size:.9688rem; }
.sk-note p:first-child{ margin-top:0; } .sk-note p:last-child{ margin-bottom:0; }
.sk-note--sun{ background:var(--wp--preset--color--sun-wash); border-left-color:var(--wp--preset--color--sun-bright); }

.sk-todo{
  font-family:var(--wp--preset--font-family--mono); font-size:.8125rem; font-weight:600;
  background:#FFF3CD; color:#7A4E00; border:1px dashed #C79400;
  padding:.1rem .4rem; border-radius:3px;
}

/* ============================================================
   10. Breadcrumbs
   ============================================================ */

.sk-crumbs{ font-family:var(--wp--preset--font-family--display); font-size:.8125rem; color:var(--wp--preset--color--muted); padding:1rem 0 0; }
.sk-crumbs a{ color:var(--wp--preset--color--muted); text-decoration:none; }
.sk-crumbs a:hover{ color:var(--wp--preset--color--sun); text-decoration:underline; }
.sk-crumbs span[aria-current]{ color:var(--wp--preset--color--ink); font-weight:500; }
.sk-crumbs .sep{ padding:0 .45rem; color:var(--wp--preset--color--rule); }

/* ============================================================
   11. CTA band + footer
   ============================================================ */

.sk-cta{ background:var(--wp--preset--color--ink); color:#fff; padding:clamp(2.75rem,6vw,4.5rem) 0; position:relative; overflow:hidden; }
.sk-cta::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(44rem 26rem at 12% 118%, rgba(216,148,18,.26), transparent 60%); }
.sk-cta > *{ position:relative; z-index:1; }
.sk-cta :is(h2,h3){ color:#fff; } .sk-cta p{ color:#D5DAE6; }

.sk-footer{ background:#0E1422; color:#AEB6C7; padding:3.5rem 0 2rem; font-size:.9375rem; }
.sk-footer a{ color:#D3D9E5; text-decoration:none; }
.sk-footer a:hover{ color:var(--wp--preset--color--sun-bright); text-decoration:underline; }
.sk-footer h3{ color:#fff; font-size:.8125rem; font-family:var(--wp--preset--font-family--mono);
  letter-spacing:.12em; text-transform:uppercase; margin:0 0 .9rem; font-weight:600; }
.sk-footer__grid{ display:grid; gap:2.25rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.sk-footer ul{ list-style:none; margin:0; padding:0; }
.sk-footer li{ margin:.45rem 0; }
.sk-footer__base{ margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid #23293A;
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; font-size:.8125rem; color:#7B849A; }

/* ============================================================
   12. WhatsApp float
   ============================================================ */

.sk-wa{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:200;
  display:inline-flex; align-items:center; gap:.6rem;
  background:#25D366; color:#062E14; text-decoration:none;
  font-family:var(--wp--preset--font-family--display); font-weight:600; font-size:.9375rem;
  padding:.8rem 1.15rem; border-radius:100px; box-shadow:0 6px 22px -6px rgba(0,0,0,.4);
}
.sk-wa:hover{ background:#1FBA59; color:#062E14; }
.sk-wa svg{ width:19px; height:19px; flex:none; }
@media (max-width:640px){ .sk-wa span{ display:none; } .sk-wa{ padding:.95rem; border-radius:50%; } }

/* ============================================================
   13. Tables + long-form
   ============================================================ */

.sk-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.wp-block-table table{ border-collapse:collapse; font-size:.9375rem; }
.wp-block-table th{ text-align:left; background:var(--wp--preset--color--sunk);
  font-family:var(--wp--preset--font-family--display); font-weight:600; }
.wp-block-table :is(th,td){ border:1px solid var(--wp--preset--color--rule); padding:.7rem .9rem; }

.sk-prose :is(h2,h3){ margin-top:2.5rem; }
.sk-prose li{ margin:.45rem 0; }

@media print{ .sk-header,.sk-wa,.sk-cta{ display:none; } }

/* ============================================================
   14. Shortcode block safety
   The core/shortcode block sometimes wraps its output in <p>.
   These rules stop that from breaking the header flex row,
   the footer, or the fixed WhatsApp button.
   ============================================================ */
.sk-header__inner > p{ margin:0; display:contents; }
.wp-block-group > p:has(> .sk-footer),
.wp-block-group > p:has(> .sk-wa){ margin:0; display:contents; }
p:has(> .sk-skip-link){ margin:0; display:contents; }
p:empty{ display:none; }

/* ============================================================
   15. MOBILE + CROSS-PLATFORM
   Covers iOS Safari, Android Chrome, Windows Edge/Chrome and
   Firefox. Three named fixes here are for bugs that have hit
   this owner's previous site: Android sideways scroll, iOS
   safe-area, and headings breaking mid-word with hyphens.
   ============================================================ */

/* --- iOS: stop Safari inflating text when the phone rotates --- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* --- FIX 1: Android sideways scroll ------------------------------
   Caused by any single child wider than the viewport. `clip` is used
   rather than `hidden` because `hidden` creates a scroll container
   and silently kills the sticky header on Android Chrome.          */
html,body{ max-width:100%; }
body{ overflow-x:hidden; }            /* fallback for older Android WebView */
@supports (overflow-x:clip){ body{ overflow-x:clip; } }

/* Anything that is legitimately wide scrolls inside its own box,
   never by moving the whole page. */
.wp-block-table,
.sk-scroll,
pre,
.wp-block-code{ overflow-x:auto; max-width:100%; }

img,svg,video,iframe,canvas{ max-width:100%; height:auto; }
iframe{ display:block; }

/* Long unbroken strings (email addresses, URLs, GST numbers)
   must wrap instead of pushing the layout wide. */
p,li,td,th,dd,dt,figcaption,address{ overflow-wrap:break-word; }

/* --- FIX 2: headings must never hyphenate or split mid-word ------
   `word-break:break-all` and automatic hyphens were what mangled
   headings on the previous site. Both are explicitly disabled.    */
h1,h2,h3,h4,h5,h6,.sk-logo,.sk-stat__n{
  hyphens:manual;
  -webkit-hyphens:manual;
  word-break:normal;
  overflow-wrap:break-word;   /* wrap between words only */
}

/* --- FIX 3: iOS safe areas (notch, Dynamic Island, home bar) ----- */
.sk-header__inner{
  padding-left:max(1.5rem, env(safe-area-inset-left));
  padding-right:max(1.5rem, env(safe-area-inset-right));
}
.sk-wa{
  right:max(1.15rem, env(safe-area-inset-right));
  bottom:max(1.15rem, env(safe-area-inset-bottom));
}
.sk-footer{
  padding-bottom:max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.sk-hero,.sk-section,.sk-cta{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* --- iOS: a form field under 16px makes Safari zoom the page on
       focus, which then never zooms back out. 16px is the floor. -- */
input,select,textarea,button{
  font-size:max(16px,1rem);
  font-family:inherit;
}
input,select,textarea{
  max-width:100%;
  border-radius:4px;               /* iOS otherwise applies its own */
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--wp--preset--color--rule);
  padding:.7rem .85rem;
  background:var(--wp--preset--color--paper);
  color:var(--wp--preset--color--ink);
}
textarea{ min-height:8rem; }

/* --- Touch targets. 44px is Apple's minimum, 48dp Android's. ----- */
.wp-block-navigation a,
.wp-block-button__link,
.sk-header__cta,
.sk-wa,
.sk-faq summary,
.sk-footer a,
button,
[type="submit"]{
  min-height:44px;
  display:flex;
  align-items:center;
}
.sk-faq summary{ display:block; min-height:auto; padding-top:1.15rem; padding-bottom:1.15rem; }
.sk-footer a{ display:inline-flex; min-height:auto; padding:.2rem 0; }
.wp-block-navigation a{ display:inline-flex; padding:.5rem .1rem; }

/* Softer tap flash than the browser default on both platforms. */
a,button,summary,[role="button"]{ -webkit-tap-highlight-color:rgba(20,27,46,.10); }

/* --- Mobile navigation (WordPress navigation block overlay) ------ */
@media (max-width:781px){
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close{
    padding:.6rem; min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
  }
  .wp-block-navigation__responsive-container.is-menu-open{
    padding:max(4.5rem, calc(env(safe-area-inset-top) + 4rem)) 1.5rem
            max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
    background:var(--wp--preset--color--ink);
  }
  .wp-block-navigation__responsive-container.is-menu-open a{
    color:#fff; font-size:1.125rem; padding:.75rem 0;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
    border-bottom:1px solid rgba(255,255,255,.12);
  }
}

/* --- Layout reflow ---------------------------------------------- */
@media (max-width:900px){
  .sk-header__inner{ gap:1rem; }
}
@media (max-width:640px){
  .sk-stats{ grid-template-columns:repeat(2,1fr); }
  .sk-stat{ padding:1.1rem 1rem; }
  .sk-stat__n{ font-size:1.5rem; }
  .sk-grid,.sk-grid--2{ grid-template-columns:1fr; }
  .sk-card{ padding:1.3rem 1.35rem; }
  .sk-step{ padding:1.25rem 1.25rem 1.25rem 3.9rem; }
  .sk-step::before{ left:1.15rem; }
  .sk-faq summary{ padding-left:2.6rem; padding-right:1.15rem; }
  .sk-faq summary::before{ left:1.15rem; top:1.15rem; }
  .sk-faq details > :not(summary){ padding-left:1.15rem; padding-right:1.15rem; }
  .sk-note{ padding:1rem 1.15rem; }
  .sk-footer__grid{ gap:1.85rem; }
}
@media (max-width:400px){
  .sk-stats{ grid-template-columns:1fr; }
}

/* --- Android Chrome: address bar resize causes 100vh jump -------- */
.sk-hero{ min-height:auto; }
@supports (height:100dvh){ .sk-fullheight{ min-height:100dvh; } }

/* --- Windows: forced-colors / High Contrast mode ----------------- */
@media (forced-colors: active){
  .sk-card,.sk-stat,.sk-faq,.sk-steps,.sk-note{ border:1px solid CanvasText; }
  .sk-hero::after,.sk-cta::after{ display:none; }
  .sk-header__cta,.wp-block-button__link{ border:1px solid ButtonText; }
  .sk-benefit__n,.sk-step::before{ border:1px solid CanvasText; }
}

/* --- Windows / desktop: keep scrollbar gutter stable so the page
       does not shift horizontally between short and tall pages. --- */
@media (min-width:1024px){ html{ scrollbar-gutter:stable; } }

/* --- Landscape phones: reclaim vertical space -------------------- */
@media (max-height:520px) and (orientation:landscape){
  .sk-hero{ padding-top:2.25rem; padding-bottom:2.25rem; }
  .sk-header{ position:static; }
}

/* ============================================================
   16. Savings calculator + enquiry form
   ============================================================ */

.sk-calc{
  border:1px solid var(--wp--preset--color--rule); border-radius:7px;
  background:var(--wp--preset--color--paper); padding:1.75rem; box-shadow:var(--sk-shadow);
}
.sk-calc__form{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.sk-calc__field label{
  display:block; font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:.9375rem; margin-bottom:.45rem;
}
.sk-calc__input{ display:flex; align-items:stretch; }
.sk-calc__input > span{
  display:grid; place-items:center; padding:0 .8rem; font-weight:600;
  background:var(--wp--preset--color--sunk);
  border:1px solid var(--wp--preset--color--rule); border-right:0;
  border-radius:4px 0 0 4px; color:var(--wp--preset--color--muted);
}
.sk-calc__input input{ border-radius:0 4px 4px 0; flex:1; min-width:0; }
.sk-calc__help{ font-size:.8125rem; color:var(--wp--preset--color--muted); margin:.4rem 0 0; }

.sk-calc__out{
  margin-top:1.75rem; border-top:1px solid var(--wp--preset--color--rule);
  display:grid; gap:1px; background:var(--wp--preset--color--rule);
}
.sk-calc__row{
  background:var(--wp--preset--color--paper); display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:baseline; gap:.5rem 1rem;
  padding:.85rem .25rem;
}
.sk-calc__row > span{ color:var(--wp--preset--color--muted); font-size:.9375rem; }
.sk-calc__row > strong{
  font-family:var(--wp--preset--font-family--display); font-size:1.0625rem;
  font-variant-numeric:tabular-nums; color:var(--wp--preset--color--ink);
}
.sk-calc__row--hi{ background:var(--wp--preset--color--sun-wash); padding-inline:.75rem; }
.sk-calc__row--hi > strong{ color:var(--wp--preset--color--sun); }
.sk-calc__note{ font-size:.8125rem; color:var(--wp--preset--color--muted); margin:1.1rem 0; }
.sk-calc [hidden]{ display:none !important; }

.sk-form{
  border:1px solid var(--wp--preset--color--rule); border-radius:7px;
  background:var(--wp--preset--color--paper); padding:1.6rem;
}
.sk-form__field{ margin:0 0 1.1rem; }
.sk-form__field label{
  display:block; font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:.9375rem; margin-bottom:.4rem;
}
.sk-form__field label span{ color:var(--wp--preset--color--sun); }
.sk-form__field input,.sk-form__field select,.sk-form__field textarea{ width:100%; }
.sk-form__small{ font-size:.8125rem; color:var(--wp--preset--color--muted); margin:.85rem 0 0; }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.sk-form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.sk-grid > *{ max-width:none !important; margin-block:0 !important; margin-inline:0 !important; }
.sk-steps > *,.sk-stats > *{ max-width:none !important; margin:0 !important; }

/* ============================================================
   17. CASCADE FIXES
   Found by build/test_mobile.py, not by eye. Both were real.

   17a. The tap-target rule in section 15 set display:flex on
        .sk-header__cta, which overrode the display:none that hides
        it below 900px (same specificity, later in the file). The
        button then overflowed a 360px viewport by 19px and gave the
        whole page a horizontal scroll. Re-asserting the hide here,
        after the rule that broke it, is the fix.
   17b. The logo is a link and needs a 44px touch target.
   ============================================================ */

@media (max-width:900px){
  .sk-header__cta{ display:none; }
}

.sk-logo{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* Keep the header row from ever exceeding the viewport, whatever
   ends up inside it. */
.sk-header__inner{ min-width:0; max-width:100%; }
.sk-header__inner > *{ min-width:0; }
.sk-header nav{ min-width:0; overflow:hidden; }

/* 17c. Making .sk-logo a flex container (17b, for the 44px touch target)
       turned "SunKraft" and "Solar" into separate flex items, and flex
       discards the whitespace between them. A literal space cannot fix
       this; the gap has to come from CSS. */
.sk-logo{ gap:.3ch; }
.sk-logo span{ margin-left:.3ch; }

/* 17d. Collapsed WhatsApp button must be square before border-radius:50%
       can make it a circle. With flex padding alone it rendered as an oval. */
@media (max-width:640px){
  .sk-wa{
    padding:0; width:52px; height:52px; min-height:52px;
    border-radius:50%; justify-content:center; align-items:center;
  }
  .sk-wa svg{ width:24px; height:24px; }
}