/* Guelph Gas Fitter — WPL network template restyle — drops into /assets/css/styles.css on each site.
Targets the existing template's class names; changes NO html, NO content.
Only the two :root vars (--accent, --accent-dark) differ per site.
Design language matches the polished network template (green-gradient hero,
white sticky header, rounded photo cards, accent-dark bands). Contrast on
solid buttons + call bar uses --accent-dark so white text passes WCAG AA. */
:root{
--accent:#C2571A;
--accent-dark:#8A3D0F;
--ink:#16202a;
--muted:#43525f;
--bg:#ffffff;
--bg-alt:#f5f8fa;
--card:#ffffff;
--line:#e4e9ee;
--radius:12px;
--shadow:0 1px 3px rgba(16,32,45,.06),0 6px 20px rgba(16,32,45,.06);
--shadow-lg:0 14px 40px rgba(16,32,45,.16);
--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
--maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--accent-dark)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent-dark);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip-link:focus{left:0}
/* header */
.site-header{background:#fff;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:60;box-shadow:0 1px 10px rgba(0,0,0,.06)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;flex-wrap:wrap;gap:12px}
.brand{font-weight:800;font-size:1.22rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand span{color:var(--accent-dark)}
.site-header nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-links{display:flex;gap:20px;margin-right:8px}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.nav-links a:hover{color:var(--accent-dark)}
/* buttons */
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:8px;padding:13px 24px;font-size:1rem;line-height:1;transition:transform .05s ease,box-shadow .15s ease;cursor:pointer;border:0}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-dark);color:#fff}
.btn-primary:hover{box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-secondary{background:#fff;color:var(--accent-dark)}
.btn-secondary:hover{box-shadow:0 8px 22px rgba(0,0,0,.22)}
/* hero — gradient, two-column, keeps the existing image */
.hero{background:linear-gradient(120deg,var(--accent-dark) 0%,var(--accent) 100%);color:#fff;padding:64px 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-copy h1{font-size:2.35rem;line-height:1.15;letter-spacing:-.02em;margin-bottom:16px}
.hero-copy .sub{font-size:1.12rem;opacity:.95;max-width:560px;margin-bottom:26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.trust-row{display:flex;gap:10px;flex-wrap:wrap}
.trust-row span{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:7px 15px;font-size:.86rem;font-weight:600}
.hero-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:16/9;object-fit:cover}
/* local intro */
.local-intro{background:var(--bg-alt);padding:48px 0}
.local-intro .lead{max-width:68ch;margin:0 auto;font-size:1.12rem;color:var(--ink);text-align:left}
/* section heads */
section{padding:60px 0}
.section-head{max-width:720px;margin:0 auto 36px;text-align:center}
.eyebrow{display:inline-block;font-size:.84rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px}
.section-head h2{font-size:1.9rem;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.section-head p{color:var(--muted);font-size:1.05rem}
/* service cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-body{padding:22px}
.card-body h3{font-size:1.15rem;color:var(--ink);margin-bottom:8px}
.card-body p{color:var(--muted);font-size:1rem;line-height:1.6}
/* areas — accent-dark band, pill list */
.areas{background:var(--accent-dark);color:#fff}
.areas .section-head h2,.areas .eyebrow{color:#fff}
.areas .eyebrow{opacity:.85}
.area-list{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:820px;margin:0 auto}
.area-list li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 18px;font-size:.95rem}
.area-list li strong{font-weight:800}
/* faq */
.faq details{background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:16px 20px}
.faq summary{font-weight:700;cursor:pointer;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent-dark);font-weight:800;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin-top:12px;color:var(--muted);font-size:1rem;line-height:1.62}
/* cta band */
.cta-band{background:var(--accent-dark);color:#fff;text-align:center;padding:60px 0}
.cta-band h2{font-size:1.95rem;margin-bottom:12px;letter-spacing:-.02em}
.cta-band p{opacity:.92;max-width:560px;margin:0 auto 26px;font-size:1.05rem}
/* footer */
.site-footer{background:#12202e;color:#c3ced8;padding:40px 0;font-size:.94rem}
.site-footer .wrap p{margin-bottom:8px}
.site-footer a{color:#9ec7dd}
.site-footer .fine{opacity:.85;font-size:.88rem;margin-top:12px}
/* contact form — labels wrap their input () */
form{max-width:580px}
form label{display:block;font-weight:600;color:var(--ink);margin:18px 0 0}
form input,form textarea{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit;font-size:1rem;font-weight:400}
form input:focus,form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.07)}
form textarea{min-height:130px;resize:vertical}
.casl{font-size:.82rem;color:var(--muted);margin:16px 0 4px;line-height:1.55}
form button[type=submit]{margin-top:18px}
/* mobile call bar */
.mobile-callbar{display:none}
@media(max-width:820px){
.hero-grid{grid-template-columns:1fr;gap:28px}
.hero-media{order:-1}
.hero-copy h1{font-size:1.85rem}
.nav-toggle{display:block;order:3}
.nav-links{display:none;flex-direction:column;gap:0;width:100%;order:4;
border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.nav-links.open{display:flex}
.nav-links a{padding:12px 2px;border-bottom:1px solid var(--line);font-weight:600}
.nav-links a:last-child{border-bottom:0}
.site-header .wrap{flex-wrap:wrap}
}
@media(max-width:640px){
body{padding-bottom:62px}
.mobile-callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--accent-dark);color:#fff;text-align:center;font-weight:800;padding:16px;text-decoration:none;font-size:1.05rem;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.hero{padding:44px 0}
section{padding:44px 0}
}
.brand-icon{width:22px;height:22px;vertical-align:-5px;margin-right:6px;color:var(--accent);}
/* consent bar — non-essential trackers stay off until a choice is made */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#12202e;color:#e7edf2;
padding:16px 20px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
box-shadow:0 -2px 16px rgba(0,0,0,.28);font-size:.95rem;line-height:1.5}
.consent-bar p{margin:0;max-width:60ch}
.consent-bar a{color:#9ec7dd;text-decoration:underline}
.consent-actions{display:flex;gap:10px;flex-shrink:0}
.consent-bar .btn{padding:9px 18px;font-size:.92rem}
@media(max-width:640px){.consent-bar{bottom:62px;flex-direction:column;align-items:stretch;text-align:left}
.consent-actions{justify-content:stretch}.consent-actions .btn{flex:1;text-align:center}}
/* mobile nav toggle */
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;padding:10px;margin-left:auto}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
/* --- legibility fixes 2026-09-18 ---------------------------------------
1. .btn-primary is accent-dark on white elsewhere, but inside the hero it
sat dark-on-dark against the accent gradient: the TEXT had contrast, the
BUTTON had none. Invert it there so the primary CTA actually reads.
2. Same problem on the consent bar (dark bar): Accept was invisible while
Decline popped, which quietly biased the choice. Both are now clearly
visible and equally weighted.
3. On mobile the hero image was ordered above the copy, so the first screen
was a photo with the headline below the fold. Copy first. */
.hero .btn-primary{background:#fff;color:var(--accent-dark)}
.hero .btn-primary:hover{box-shadow:0 8px 22px rgba(0,0,0,.28)}
.consent-bar .btn-primary{background:#fff;color:var(--accent-dark)}
.consent-bar .btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.85)}
.consent-bar .btn-secondary:hover{background:rgba(255,255,255,.14)}
@media(max-width:820px){.hero-media{order:0}}
/* --- form legibility on the coloured CTA band, 2026-09-19 ------------------
The homepage quote form sits inside .cta-band (accent-dark). label and .casl
were inheriting --ink and --muted, which assume a white page: 1.1:1 to 1.9:1
against the band on all nine sites. Unreadable, on the main conversion form.
Field labels go white, the consent line goes near-white, and the submit
button gets the same inversion the hero CTA has. */
.cta-band label{color:#fff}
.cta-band .casl{color:rgba(255,255,255,.88)}
.cta-band .btn-primary{background:#fff;color:var(--accent-dark)}
.cta-band .btn-primary:hover{box-shadow:0 8px 22px rgba(0,0,0,.28)}
.cta-band input,.cta-band textarea{color:var(--ink);background:#fff}
.cta-band input::placeholder,.cta-band textarea::placeholder{color:#5b6875}
/* --- link legibility inside the dark bands, 2026-09-19 --------------------
Root cause: the global rule is a{color:var(--accent-dark)} and both .areas
and .cta-band are background:var(--accent-dark). Any inside them was
therefore drawn in exactly the band colour: the CTA phone number measured
1.00:1 (literally invisible) and the area chips 1.39-1.46:1 on all nine
sites. The sections set color:#fff, but the global a rule out-specifies
inheritance. Scoped overrides below, covering every dark band so a new
link dropped into one can't reintroduce this. */
.areas a,.cta-band a,.hero a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.areas a:hover,.cta-band a:hover,.hero a:not(.btn):hover{color:#fff;text-decoration:none}
.area-list li a{font-weight:600}
.area-list li strong{color:#fff}