/*
Theme Name: Seaside Comfort Solutions
Theme URI: https://seasidecomfortsolutions.com/
Description: Custom theme for Seaside Comfort Solutions, heating and air in greater Charleston, SC.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: seaside-comfort
*/

/* Layout: corporate-editorial. White ground, hairline rules, square corners, full-bleed split panels
   that alternate image side. Headlines pair a light weight with a bold phrase. One accent (sea teal). */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --panel:#eceeed;
  --ink:#0c2229;
  --muted:#53656a;
  --line:#d8dedc;
  --accent:#00756d;
  --accent-press:#005b55;
  --accent-ink:#ffffff;
  --deep:#0b2b33;
  --on-deep:#eef4f3;
  --on-deep-muted:#a6bbbc;
  --on-deep-line:#24454d;
  --accent-on-deep:#5fd1c6;
  --copper:#9a4f16;
  --fg:var(--ink);
  --sub:var(--muted);
  --rule:var(--line);
  --link:var(--accent);
  --display:"Red Hat Display","Helvetica Neue",Arial,sans-serif;
  --body:"Red Hat Text","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1200px;
  --edge:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
}
/* dark bands remap the text tokens */
.util,.deep,.foot,.bar{--fg:var(--on-deep);--sub:var(--on-deep-muted);--rule:var(--on-deep-line);--link:var(--accent-on-deep);color:var(--fg)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
section{scroll-margin-top:96px}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--fg);text-wrap:balance}
h1{font-size:clamp(2.4rem,4.6vw,4.1rem);font-weight:300;line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:300;line-height:1.1;letter-spacing:-.015em}
h1 strong,h2 strong{font-weight:800}
h3{font-size:1.2rem;font-weight:700;line-height:1.25}
.eyebrow{font:600 .8rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.lede{font-size:1.12rem;color:var(--sub);max-width:36em}
.num{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 1.7em;border:1px solid transparent;border-radius:2px;font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s}
.btn-go{background:var(--accent);color:var(--accent-ink)}
.btn-go:hover{background:var(--accent-press)}
.deep .btn-go,.bar .btn-go{background:var(--accent-on-deep);color:var(--deep)}
.deep .form-side .btn-go{background:var(--accent);color:var(--accent-ink)}
.btn[disabled]{opacity:.6;cursor:default}
.tlink{display:inline-flex;align-items:center;gap:.4em;color:var(--link);font-weight:600;text-decoration:none;font-size:1.05rem}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
.tlink .arr{transition:transform .15s}
.tlink:hover .arr{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.tlink .arr,.faq summary::after{transition:none}}

/* utility bar + header */
.util{background:var(--deep);font-size:.85rem}
.util .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:9px}
.util a{color:var(--link);text-decoration:none;font-weight:600}
.util span{color:var(--sub)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:32px;min-height:80px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;min-width:0}
.brand-mark{display:block;height:46px;flex:none}
.brand-mark img{height:100%;width:auto}
.brand-name{font:800 1.05rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase}
.brand-name small{display:block;margin-top:5px;font:500 .62rem/1 var(--display);letter-spacing:.3em;color:var(--muted)}
.nav{display:flex;gap:30px;font-size:1rem}
.nav a{text-decoration:none}
.nav a:hover{color:var(--accent)}
@media (max-width:980px){.nav{display:none}}
@media (max-width:620px){.top .btn{display:none}.util .wrap>span{display:none}}

/* split panels (hero, about, request) */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(480px,46vw,640px)}
.split-text{display:flex;flex-direction:column;justify-content:center;gap:24px;padding-block:clamp(40px,6vw,88px);min-width:0}
.split-text.left{padding-left:var(--edge);padding-right:clamp(24px,5vw,72px)}
.split-text.right{padding-right:var(--edge);padding-left:clamp(24px,5vw,72px)}
.split-media{position:relative;margin:0;min-height:320px;overflow:hidden}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .split{grid-template-columns:minmax(0,1fr);min-height:0}
  .split-text.left,.split-text.right{padding-inline:var(--gutter)}
  .split-media{aspect-ratio:4/3;min-height:0;width:100%}
  .split.media-first .split-media{order:-1}
}
.hero{background:var(--panel)}
.hero .split-media img{object-position:68% 38%}
.cap{position:absolute;left:0;bottom:0;padding:10px 16px;background:var(--bg);font-size:.85rem;color:var(--muted)}
.cap b{color:var(--ink);font-weight:600}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.facts{display:flex;flex-wrap:wrap;margin:8px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--sub)}
.facts li{padding:2px 18px 2px 0;margin-right:18px;border-right:1px solid var(--rule)}
.facts li:last-child{border-right:0;margin-right:0}
.facts b{color:var(--fg);font-weight:600}

/* blocks */
.block{padding-block:clamp(56px,8vw,112px)}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:760px}

/* estimate */
.estimate .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.est-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;min-width:0}
.quote{margin:12px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.quote p{font:300 1.35rem/1.4 var(--display);color:var(--ink)}
.quote footer{margin-top:10px;font-size:.9rem;color:var(--muted)}
.compare{--pos:50%;position:relative;width:100%;aspect-ratio:4/5;max-height:600px;overflow:hidden;user-select:none;background:var(--panel)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.tag{position:absolute;top:0;padding:8px 14px;background:var(--deep);color:var(--on-deep);font:600 .72rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase}
.tag-l{left:0}.tag-r{right:0}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--bg);pointer-events:none}
.cmp-line::after{content:"\2194";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--bg);color:var(--ink);font-size:1.1rem}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.cmp-hint{margin-top:10px;font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.estimate .wrap{grid-template-columns:minmax(0,1fr)}.compare{aspect-ratio:1/1}}

/* services */
.services{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.svc li{border-bottom:1px solid var(--line)}
.svc li:not(:nth-child(3n)){border-right:1px solid var(--line)}
.svc a{display:flex;flex-direction:column;gap:10px;height:100%;padding:30px 28px 28px;text-decoration:none;transition:background .15s}
.svc a:hover{background:var(--panel)}
.svc p{color:var(--muted);font-size:.98rem}
.svc .go{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:600;font-size:.95rem}
.svc .free{align-self:flex-start;padding:3px 9px;background:var(--deep);color:var(--on-deep);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}.svc li:not(:nth-child(3n)){border-right:0}.svc li:nth-child(odd){border-right:1px solid var(--line)}}
@media (max-width:560px){.svc{grid-template-columns:minmax(0,1fr)}.svc li:nth-child(odd){border-right:0}.svc a{padding-inline:4px}}

/* about */
.about{background:var(--panel)}
.about p{color:var(--muted);max-width:36em}
.about p.strong{color:var(--ink);font-size:1.15rem}

/* work */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.job{display:flex;flex-direction:column;gap:16px;min-width:0}
.job img{width:100%;aspect-ratio:16/9;object-fit:cover}
.job-low img{object-position:50% 72%}
.job .eyebrow{color:var(--copper)}
.job-copy>p{color:var(--muted)}
.checks{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;font-size:.95rem;font-weight:500}
.checks li:not(:last-child)::after{content:"/";margin:0 10px;color:var(--line)}
@media (max-width:760px){.jobs{grid-template-columns:minmax(0,1fr)}}

/* areas + quick request */
.areas{border-top:1px solid var(--line)}
.areas-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(32px,6vw,88px);align-items:start}
.area-list{margin:0;border-top:1px solid var(--line)}
.area-list>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--line)}
.area-list dt{padding-top:3px;font:600 .78rem/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.area-list dd{margin:0}
.towns{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;font:400 1.1rem/1.6 var(--display)}
.towns li:not(:last-child)::after{content:"\00B7";margin:0 .55em;color:var(--muted)}
.towns .home{font-weight:700;color:var(--accent)}
.towns .home small{margin-left:6px;font:500 .72rem/1 var(--body);letter-spacing:.04em;color:var(--muted)}
.areas-note{margin-top:24px;color:var(--muted)}
.areas-note .num{color:var(--ink);font-weight:600}
.quick{position:sticky;top:110px;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,36px);background:var(--panel)}
.quick h3{font:300 1.9rem/1.15 var(--display)}
.quick h3 strong{font-weight:800}
.quick-sub{color:var(--muted)}
.quick-form{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.quick-form .btn{width:100%}
@media (max-width:900px){.areas-grid{grid-template-columns:minmax(0,1fr)}.quick{position:static}}
@media (max-width:560px){.area-list>div{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{background:var(--panel)}
.faq-list{max-width:880px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;list-style:none;font:500 1.15rem/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 1.7rem/1 var(--display);color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:62ch;padding-bottom:22px;color:var(--muted)}

/* request */
.request{background:var(--deep)}
.request .split-text h2{color:var(--fg)}
.contact{display:flex;flex-direction:column;gap:16px;margin:8px 0 0;padding:20px 0 0;border-top:1px solid var(--rule)}
.contact div{display:flex;flex-direction:column;gap:2px}
.contact dt{font-size:.82rem;color:var(--sub)}
.contact dd{margin:0;font-weight:600;overflow-wrap:anywhere;user-select:all}
.contact dd.big{font:300 2rem/1.1 var(--display)}
.form-side{--fg:var(--ink);--sub:var(--muted);--rule:var(--line);--link:var(--accent);background:var(--bg);color:var(--ink);display:flex;align-items:center;padding-block:clamp(36px,5vw,72px);padding-right:var(--edge);padding-left:clamp(24px,5vw,72px);min-width:0}
@media (max-width:860px){.form-side{padding-inline:var(--gutter)}}
.req-form{display:flex;flex-direction:column;gap:18px;width:100%;max-width:600px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:50px;padding:6px 10px;font-weight:600;font-size:.92rem;line-height:1.2;color:var(--muted);cursor:pointer}
.seg input:checked+label{background:var(--deep);color:var(--on-deep)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:-3px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:.88rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);font:400 1rem/1.4 var(--body)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy{font-size:.82rem;color:var(--muted)}
.note{padding:14px 16px;border-left:3px solid var(--accent);background:var(--panel);font-size:.95rem}
@media (max-width:520px){.row{grid-template-columns:minmax(0,1fr)}}

/* footer */
.foot{background:var(--deep);border-top:1px solid var(--on-deep-line);padding-block:clamp(40px,6vw,72px) 32px}
.foot .wrap{display:flex;flex-direction:column;gap:32px}
.foot-line{font:300 clamp(2rem,5.6vw,4.4rem)/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.foot-line strong{font-weight:800;color:var(--link)}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-top:22px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--sub)}
.foot-meta b{color:var(--fg);font-weight:600}

/* phone action bar */
.bar{display:none}
@media (max-width:620px){
  .bar{display:grid;grid-template-columns:1fr 1.5fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--deep);border-top:1px solid var(--on-deep-line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .bar .btn{min-height:48px}
  .bar .btn-line{border-color:var(--on-deep-line);color:var(--on-deep)}
  .foot{padding-bottom:100px}
}

/* ---- WordPress additions ---- */
body{margin:0}
[hidden]{display:none!important}
.admin-bar .top{top:calc(env(safe-area-inset-top,0px) + 32px)}
@media (max-width:782px){.admin-bar .top{top:calc(env(safe-area-inset-top,0px) + 46px)}}
@media (max-width:600px){.admin-bar .top{top:calc(env(safe-area-inset-top,0px) + 0px)}}
.contact dd a,.foot-meta a{color:inherit}
/* pages other than the homepage (privacy policy, service and town pages, posts) */
.page{background:var(--paper,var(--bg));padding-block:clamp(40px,6vw,88px)}
.prose{max-width:820px}
.prose h1{margin-bottom:28px;font-size:clamp(2rem,4.2vw,3.2rem);text-transform:none}
.prose h2{margin:1.6em 0 .5em;font-size:clamp(1.5rem,2.6vw,2rem)}
.prose h3{margin:1.4em 0 .4em}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose ul,.prose ol{padding-left:1.3em}
.prose a{color:var(--teal-text,var(--accent))}
.prose img{border-radius:var(--r-lg,0)}