/*
Theme Name: Chicago Roof
Theme URI: https://chicagoroofrepairreplacement.com
Author: Creative Sphere Media
Description: Custom theme for Chicago Roof Repair and Replacement. Built-in page importer, golden-rule internal-link checks, thin-content publish guard, RoofingContractor/Service/FAQPage/BreadcrumbList schema and SEO meta.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: chicago-roof
*/

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2')}

/* ---------- Tokens (from the brand design system) ---------- */
:root{
  --navy:#0B2545; --navy-700:#1D3A63; --sky:#41B6E6; --sky-100:#D6EEFA;
  --star:#C8102E; --star-700:#A10D25; --white:#FFFFFF;
  --surface:#FFFFFF; --surface-alt:#F5F7FA; --ink:#0B2545; --ink-muted:#4A5565; --line:#D9DFE7;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:80px; --s8:128px;
  --max:1200px; --read:760px; --gutter:32px;
}
@media (max-width:767px){:root{--gutter:24px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:16px;line-height:26px;color:var(--ink);background:var(--surface)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--navy-700)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--s3);top:var(--s3);background:var(--white);padding:var(--s2) var(--s3);z-index:100}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Type ---------- */
h1,h2,h3,.eyebrow,.btn,.nav a,.nav summary{font-family:var(--display)}
h1{font-weight:700;font-size:clamp(40px,6vw,64px);line-height:.98;letter-spacing:.03em;text-transform:uppercase;margin:0 0 var(--s4)}
h2{font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;margin:var(--s6) 0 var(--s3)}
h3{font-weight:700;font-size:24px;line-height:28px;letter-spacing:.02em;margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s3)}
.eyebrow{font-weight:500;font-size:14px;line-height:18px;letter-spacing:.4em;text-transform:uppercase;color:var(--sky-100);margin:0 0 var(--s3)}
.lead{font-size:19px;line-height:30px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);min-height:52px;padding:0 var(--s4);font-weight:700;font-size:20px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;border-radius:0;cursor:pointer}
.btn-star{background:var(--star);color:var(--white)}.btn-star:hover{background:var(--star-700);color:var(--white)}
.btn-navy{background:var(--navy);color:var(--white)}.btn-navy:hover{background:var(--navy-700);color:var(--white)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- Header ---------- */
.site-header{background:var(--white);position:relative;z-index:20}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-top:var(--s3);padding-bottom:var(--s3)}
.brand img{width:200px}
.nav{display:flex;align-items:center;gap:var(--s4)}
.nav a,.nav summary,.hdr .btn{white-space:nowrap}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s3);align-items:center}
.nav a,.nav summary{font-weight:600;font-size:17px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--navy);cursor:pointer;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav details{position:relative}
.nav details>ul{position:absolute;top:calc(100% + var(--s2));left:0;display:block;background:var(--white);border:1px solid var(--line);padding:var(--s2) 0;min-width:280px}
.nav details>ul li a{display:block;padding:var(--s2) var(--s3);font-size:16px;letter-spacing:.06em}
.nav details>ul li a:hover{background:var(--surface-alt)}
.menu-toggle{display:none}
.roofline{display:flex;align-items:flex-end;height:26px}
.roofline i{height:2px;background:var(--sky)}.roofline i:first-child{flex:0 0 18%}.roofline i:last-child{flex:1}
.roofline svg{flex:none;width:20px;height:26px}
@media (max-width:1180px){
  .menu-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid var(--line);padding:var(--s3) var(--gutter) var(--s4);flex-direction:column;align-items:stretch}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li>a,.nav summary{display:block;padding:var(--s2) 0}
  .nav details>ul{position:static;border:0;padding:0 0 0 var(--s3);min-width:0}
  .hdr .btn-star{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto 0 0 0;height:120px;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='80'%3E%3Cg fill='none' stroke='%231D3A63' stroke-width='3'%3E%3Cpolyline points='12,34 21.5,6 26.5,6 36,34'/%3E%3Cpolyline points='-12,74 -2.5,46 2.5,46 12,74'/%3E%3Cpolyline points='36,74 45.5,46 50.5,46 60,74'/%3E%3C/g%3E%3C/svg%3E")}
.hero .wrap{position:relative;padding-top:var(--s7);padding-bottom:var(--s7)}
.hero h1{color:var(--white);max-width:22ch}
.hero .lead{color:var(--sky-100);max-width:36rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.crumbs{font-size:14px;line-height:20px;color:var(--sky-100);margin-bottom:var(--s4)}
.crumbs a{color:var(--sky-100)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.crumbs li+li::before{content:"/";margin-right:var(--s2);opacity:.6}

/* ---------- Layout: 12-col (8 content + 4 sidebar) ---------- */
.layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding-top:var(--s6);padding-bottom:var(--s7)}
.content{grid-column:1 / span 8;min-width:0;max-width:var(--read)}
.aside{grid-column:9 / span 4}
@media (max-width:1023px){.content,.aside{grid-column:1 / -1}.aside{margin-top:var(--s6)}}
.content>h2:first-child{margin-top:0}
.content ul{padding-left:var(--s4)}
.content li{margin-bottom:var(--s2)}

/* A bullet: an outline chevron instead of a round dot */
.crr-a-list,.crr-service-list{list-style:none;padding-left:0!important}
.crr-a-list li,.crr-service-list li{position:relative;padding-left:var(--s4)}
.crr-a-list li::before,.crr-service-list li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpolyline points='0.8,11.5 3.6,1 5.4,1 8.2,11.5' fill='none' stroke='%230B2545' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat}

.crr-steps{counter-reset:s;list-style:none;padding:0!important;display:grid;gap:var(--s3)}
.crr-steps li{counter-increment:s;padding:var(--s3) var(--s3) var(--s3) var(--s7);position:relative;background:var(--surface-alt);margin:0}
.crr-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:var(--s3);top:var(--s3);font-family:var(--display);font-weight:700;font-size:28px;line-height:28px;color:var(--navy)}
.crr-steps strong{display:block;font-family:var(--display);font-size:20px;letter-spacing:.03em;text-transform:uppercase}

.crr-city-grid,.crr-service-cards{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2)}
.crr-city-grid li a{display:block;padding:var(--s3);border:1px solid var(--line);text-decoration:none;font-weight:600}
.crr-city-grid li a:hover{border-color:var(--navy)}
.crr-service-cards li{border:1px solid var(--line);padding:var(--s4);margin:0}
.crr-service-cards li a{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;display:block;margin-bottom:var(--s2)}
.crr-service-cards li span{display:block;color:var(--ink-muted);font-size:15px;line-height:24px}

.crr-faq details{border-top:1px solid var(--line);padding:var(--s3) 0}
.crr-faq details:last-child{border-bottom:1px solid var(--line)}
.crr-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
.crr-faq summary::after{content:"+";font-family:var(--display);font-size:24px;line-height:24px}
.crr-faq details[open] summary::after{content:"–"}
.crr-faq details p{margin:var(--s2) 0 0;color:var(--ink-muted)}
.crr-related{margin-top:var(--s6);padding:var(--s4);background:var(--surface-alt)}
.crr-related h2{margin-top:0;font-size:28px}

/* CTA band */
.crr-cta{background:var(--navy);color:var(--white);padding:var(--s5);margin:var(--s6) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.crr-cta p{margin:0;font-family:var(--display);font-weight:700;font-size:28px;line-height:32px;text-transform:uppercase;letter-spacing:.02em}
.crr-cta small{display:block;font-family:var(--body);font-weight:400;font-size:15px;line-height:22px;text-transform:none;letter-spacing:0;color:var(--sky-100)}

/* Sidebar card */
.card{border:1px solid var(--line);padding:var(--s4);position:sticky;top:var(--s4)}
.card h2{margin:0 0 var(--s2);font-size:28px}
.card .btn{width:100%;justify-content:center;margin-top:var(--s2)}
.card .nap{font-size:14px;line-height:20px;color:var(--ink-muted);margin-top:var(--s3)}

/* Form */
.crr-form{margin-top:var(--s6);padding:var(--s5);background:var(--surface-alt)}
.crr-form h2{margin-top:0}
.crr-form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (max-width:600px){.crr-form .grid{grid-template-columns:1fr}}
.crr-form label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--s1)}
.crr-form input,.crr-form select,.crr-form textarea{width:100%;min-height:48px;padding:var(--s2) var(--s3);border:1px solid var(--ink-muted);border-radius:0;font:inherit;background:var(--white);color:var(--ink)}
.crr-form .full{grid-column:1 / -1}
.crr-form .hp{position:absolute;left:-9999px}
.crr-form .btn{margin-top:var(--s3)}

/* Short form */
.crr-short .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.crr-short.compact .grid{grid-template-columns:1fr;gap:var(--s2)}
@media (max-width:600px){.crr-short .grid{grid-template-columns:1fr}}
.crr-short label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--s1)}
.crr-short input,.crr-short select{width:100%;min-height:48px;padding:var(--s2) var(--s3);border:1px solid var(--ink-muted);border-radius:0;font:inherit;background:var(--white);color:var(--ink)}
.crr-short .hp{position:absolute;left:-9999px}
.crr-short .btn{width:100%;justify-content:center;margin-top:var(--s3)}
.crr-short .fine{font-size:13px;line-height:18px;color:var(--ink-muted);margin:var(--s2) 0 0}
.card .or{font-size:14px;color:var(--ink-muted);margin:var(--s3) 0 var(--s2)}

/* Calculator */
.crr-calc{border:1px solid var(--line);padding:var(--s4);margin:var(--s4) 0}
.crr-calc .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
@media (max-width:600px){.crr-calc .row{grid-template-columns:1fr}}
.crr-calc output{display:block;margin-top:var(--s3);font-family:var(--display);font-size:28px;font-weight:700;text-transform:uppercase}
.crr-map iframe{width:100%;height:320px;border:0}

/* Footer: progressive disclosure */
.site-footer{background:var(--navy);color:var(--sky-100);position:relative;overflow:hidden;margin-top:var(--s7)}
.site-footer a{color:var(--white)}
.ft{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding-top:var(--s6);padding-bottom:var(--s4);position:relative}
.ft .ft-brand{grid-column:1 / span 4}.ft .ft-groups{grid-column:6 / span 7}
@media (max-width:1023px){.ft .ft-brand,.ft .ft-groups{grid-column:1 / -1}.ft .ft-groups{margin-top:var(--s5)}}
.ft-brand img{width:200px;margin-bottom:var(--s3)}
.ft-groups details{border-top:1px solid var(--navy-700);padding:var(--s3) 0}
.ft-groups summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);list-style:none;display:flex;justify-content:space-between}
.ft-groups summary::after{content:"+"}.ft-groups details[open] summary::after{content:"–"}
.ft-groups ul{list-style:none;padding:0;margin:var(--s3) 0 0;columns:2;column-gap:var(--gutter)}
.ft-groups li{margin-bottom:var(--s2);font-size:15px;break-inside:avoid}
.ft-legal{border-top:1px solid var(--navy-700);padding-top:var(--s3);padding-bottom:var(--s3);font-size:13px;line-height:20px;position:relative}

/* Mobile sticky call bar */
.callbar{display:none}
@media (max-width:767px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30}
  .callbar a{flex:1;justify-content:center;min-height:56px;font-size:18px;padding:0 var(--s3);white-space:nowrap}
  body{padding-bottom:56px}
}