/*
Theme Name: Klassen
Theme URI: https://klassenwaterandice.ca
Author: Knoll Creative
Description: Block theme for Klassen Water & Ice. Pairs with the Klassen Core plugin, which holds the towns, branches, plan builder and lead routing.
Version: 1.5.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: klassen
*/

html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased}
.wp-site-blocks{padding:0}
.wp-site-blocks > * + *{margin-block-start:0}
:focus-visible{outline:3px solid var(--wp--preset--color--canola);outline-offset:2px}
main.wp-block-group > * + *,.kw-home > .wp-block-post-content > * + *{margin-block-start:0}
.kw-section{padding:64px max(20px, calc((100% - 1080px) / 2))}
.kw-section > * + *{margin-block-start:0}
.kw-lede{color:var(--wp--preset--color--muted);max-width:56ch;margin-top:12px}

/* header */
header.wp-block-template-part{position:sticky;top:0;z-index:20}
.admin-bar header.wp-block-template-part{top:32px}
@media(max-width:782px){.admin-bar header.wp-block-template-part{top:0}}
.kw-header{background:var(--wp--preset--color--paper);border-bottom:1px solid var(--wp--preset--color--line);padding:0 20px}
.kw-header__in{max-width:1080px;margin:0 auto;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.kw-mark{display:flex;flex-direction:column;line-height:.8;text-decoration:none}
.kw-mark__k{font-family:var(--wp--preset--font-family--script);font-size:1.55rem;color:var(--wp--preset--color--blue)}
.kw-mark__w{font-family:var(--wp--preset--font-family--display);font-style:italic;font-weight:800;font-size:1.15rem;color:var(--wp--preset--color--text);letter-spacing:.02em;margin-left:22px}
.kw-header .wp-block-navigation{font-weight:500}
.kw-header .wp-block-buttons{flex-shrink:0}

/* hero */
.kw-hero{background:var(--wp--preset--color--blue);color:#fff;overflow:hidden}
.kw-hero__in{max-width:1080px;margin:0 auto;display:grid}
.kw-hero__copy{padding:36px 20px 40px}
.kw-hero__copy > * + *{margin-block-start:0}
.kw-hero h1{color:#fff;font-size:clamp(3.2rem,14vw,5.4rem);line-height:1.02;margin:0}
.kw-hero__sub{margin:16px 0 26px;max-width:38ch;font-size:1.1rem;color:#DDE8FF}
.kw-hero__photo{position:relative;min-height:340px;margin:0}
.kw-hero__photo .wp-block-image{position:absolute;inset:0;margin:0}
.kw-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;display:block}
@media(min-width:860px){
  .kw-hero__in{grid-template-columns:1.15fr .85fr;padding:0 20px}
  .kw-hero__copy{padding:72px 40px 80px 0}
  .kw-hero__photo{min-height:600px}
}

/* promise strip */
.kw-promise{background:var(--wp--preset--color--ink);color:#fff;padding:0 20px}
.kw-promise__in{max-width:1080px;margin:0 auto;padding:18px 0;display:grid;gap:10px 20px;grid-template-columns:1fr 1fr;font-weight:500;font-size:.97rem}
.kw-promise__in > *{margin:0}
.kw-promise p::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--wp--preset--color--canola);margin-right:10px;vertical-align:1px}
@media(min-width:860px){.kw-promise__in{grid-template-columns:repeat(4,auto);justify-content:space-between;font-size:1rem}}

/* starter plans */
.kw-presets{display:grid;gap:14px;margin-top:26px;margin-bottom:26px}
.kw-presets > *{margin:0}
@media(min-width:860px){.kw-presets{grid-template-columns:repeat(3,1fr)}}
.kw-preset{background:var(--wp--preset--color--paper);border:1.5px solid var(--wp--preset--color--line);border-radius:10px;padding:18px}
.kw-preset > *{margin:0}
.kw-preset h3{font-size:1.5rem}
.kw-preset__what{color:var(--wp--preset--color--muted);margin-top:4px}
.kw-preset__amt{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:2rem;color:var(--wp--preset--color--blue);margin-top:10px}
.kw-preset__link{margin-top:8px;font-weight:600}

/* price board */
.kw-board{margin-top:28px;border-top:2px solid var(--wp--preset--color--text)}
.kw-board > *{margin:0}
.kw-row{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--wp--preset--color--line)}
.kw-row > *{margin:0}
.kw-row h3{font-size:1.55rem}
.kw-row p{grid-column:1/-1;color:var(--wp--preset--color--muted);max-width:60ch}
.kw-row p.kw-price{grid-row:1;grid-column:2;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:1.15rem;white-space:nowrap}
@media(min-width:860px){
  .kw-row{grid-template-columns:280px 1fr auto;padding:22px 0}
  .kw-row p{grid-column:2;grid-row:1}
  .kw-row p.kw-price{grid-column:3}
}

/* steps */
.kw-band{background:var(--wp--preset--color--paper);border-top:1px solid var(--wp--preset--color--line);border-bottom:1px solid var(--wp--preset--color--line)}
.kw-steps{margin-top:28px;display:grid;gap:22px;counter-reset:s}
.kw-steps > *{margin:0}
.kw-stepitem{counter-increment:s;position:relative;padding-left:68px;min-height:54px}
.kw-stepitem > *{margin:0}
.kw-stepitem::before{content:counter(s);position:absolute;left:0;top:0;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.6rem;width:54px;height:54px;border-radius:50%;background:var(--wp--preset--color--jug);color:var(--wp--preset--color--blue);display:grid;place-items:center;box-shadow:inset 0 0 0 5px var(--wp--preset--color--paper),0 0 0 2px var(--wp--preset--color--blue)}
.kw-stepitem strong{display:block;font-size:1.1rem}
.kw-stepitem p + p{color:var(--wp--preset--color--muted)}
@media(min-width:860px){.kw-steps{grid-template-columns:repeat(3,1fr)}}

/* territory */
.kw-terr{display:grid;gap:28px;margin-top:28px}
.kw-terr > *{margin:0}
@media(min-width:860px){.kw-terr{grid-template-columns:1.1fr .9fr;align-items:start}}

/* water */
.kw-water{background:var(--wp--preset--color--ink);color:#fff}
.kw-water h2,.kw-water h3{color:#fff}
.kw-water .kw-lede,.kw-water .kw-cols p{color:#B9C8EA}
.kw-water a{color:var(--wp--preset--color--canola)}
.kw-cols{display:grid;gap:22px;margin-top:26px}
.kw-cols > *{margin:0}
.kw-cols > * > *{margin:0}
.kw-cols p{margin-top:6px}
@media(min-width:860px){.kw-cols{grid-template-columns:repeat(3,1fr)}}

/* work to home */
.kw-w2h{background:var(--wp--preset--color--jug)}
.kw-w2h .kw-lede{color:var(--wp--preset--color--text)}
.kw-w2h .wp-block-buttons{margin-top:20px}

/* start */
.kw-start{background:var(--wp--preset--color--paper);border-top:1px solid var(--wp--preset--color--line)}
.kw-start .kw-form{margin-top:26px}

/* inner pages */
.kw-page{padding:48px 20px 64px}
.kw-page > *{max-width:760px;margin-left:auto;margin-right:auto}
.kw-page .wp-block-post-title{font-size:clamp(2.4rem,8vw,3.6rem);margin-bottom:20px}
.kw-page--wide{padding-left:max(20px, calc((100% - 1080px) / 2));padding-right:max(20px, calc((100% - 1080px) / 2))}
.kw-page--wide > *{max-width:none}
.kw-townhead{background:var(--wp--preset--color--blue);color:#fff;padding:48px max(20px, calc((100% - 1080px) / 2))}
.kw-townhead .wp-block-post-title{color:#fff;font-size:clamp(2.6rem,9vw,4.4rem);margin:6px 0 0}
.kw-townhead p{margin:0;color:#DDE8FF;font-weight:500}
.kw-towngrid{display:grid;gap:28px}
.kw-towngrid > *{margin:0}
@media(min-width:860px){.kw-towngrid{grid-template-columns:1fr 420px;align-items:start}}

/* footer */
.kw-footer{background:var(--wp--preset--color--ink);color:#B9C8EA;padding:40px 20px;font-size:.97rem}
.kw-footer__in{max-width:1080px;margin:0 auto;display:grid;gap:22px}
.kw-footer__in > *{margin:0}
.kw-footer strong{color:#fff}
.kw-footer a{color:inherit}
@media(min-width:860px){.kw-footer__in{grid-template-columns:1.2fr 2fr}}
.kw-townhead h1{color:#fff;font-size:clamp(2.6rem,9vw,4.4rem);margin:6px 0 0}

/* town page content */
.kw-eyebrow{display:block;font-family:var(--wp--preset--font-family--body);font-size:1.05rem;font-weight:500;line-height:1.4;letter-spacing:0;color:#DDE8FF;margin-bottom:6px}
.kw-towngrid .wp-block-post-content{margin-top:28px}
.kw-towngrid .wp-block-post-content > * + *{margin-block-start:1rem}
.kw-towngrid .wp-block-post-content h2{font-size:clamp(1.7rem,5vw,2.2rem);margin-block-start:2.2rem}
.kw-facts{background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--line);border-radius:10px;padding:18px 20px}
.kw-facts > *{margin:0}
.kw-facts ul{list-style:none;padding:0;margin:0}
.kw-facts li{padding:7px 0;border-bottom:1px solid var(--wp--preset--color--line)}
.kw-facts li:last-child{border-bottom:0}
.kw-faq details{background:var(--wp--preset--color--paper);border:1px solid var(--wp--preset--color--line);border-radius:8px;padding:14px 16px}
.kw-faq details + details{margin-block-start:8px}
.kw-faq summary{font-weight:600;cursor:pointer}
.kw-faq details[open] summary{margin-bottom:8px}
@media(min-width:860px){.kw-towngrid > .kw-plan{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto;overscroll-behavior:contain}}
.kw-townhead .kw-badges{margin-top:20px}
.kw-towngrid .kw-reviews{margin-top:22px}

/* Dark mode: follows the phone or computer setting. Every colour on the site comes from the
   palette tokens, so flipping the tokens flips the whole site, plugin components included. */
@media (prefers-color-scheme: dark){
  :root:root{
    --wp--preset--color--ice:#0B1430;
    --wp--preset--color--paper:#121E42;
    --wp--preset--color--text:#E8EEF9;
    --wp--preset--color--muted:#9FB0CF;
    --wp--preset--color--line:#2A3B69;
    --wp--preset--color--jug:#1B2C5C;
    --wp--preset--color--ink:#070E24;
  }
  body{background:var(--wp--preset--color--ice);color:var(--wp--preset--color--text)}
  .kw-mark__k{color:#8FB0FF}
  .kw-preset__amt,.kw-rate,.kw-br a,a{color:#8FB0FF}
  .kw-btn,.wp-block-button__link{color:#1a1a1a}
  .kw-btn--ghost{color:var(--wp--preset--color--text);box-shadow:inset 0 0 0 2px #8FB0FF}
  .kw-sent.is-err{background:#4A1F19;color:#FFD9D3}
  .kw-plan{box-shadow:0 10px 0 rgba(0,0,0,.35)}
  .kw-stepitem::before{box-shadow:inset 0 0 0 5px var(--wp--preset--color--paper),0 0 0 2px #8FB0FF;color:#8FB0FF}
  .kw-header{border-bottom-color:var(--wp--preset--color--line)}
  .kw-footer{color:#B9C8EA}
}