/* ContentWorks site wiring (6 Oct 2026): header dropdowns, header phone, "What we do" block,
   spoke breadcrumb. Loaded LAST in <head> on every page that carries the standard header, so it
   wins over each page's inline nav rules. Behaviour lives in /assets/cw-nav.js. */

/* --- Header dropdowns --------------------------------------- */
.navlinks .dd{position:relative}
.navlinks .dd-btn{font:inherit;color:#fff;opacity:.85;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.navlinks .dd-btn:hover,.navlinks .dd-btn[aria-expanded="true"]{opacity:1;color:var(--teal,#00BCD4)}
.navlinks .dd-btn .chev{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.navlinks .dd-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.navlinks .dd-btn:focus-visible{outline:3px solid var(--orange,#f1770a);outline-offset:3px;border-radius:6px}
.navlinks .dd-panel{display:none;position:absolute;top:100%;left:-16px;min-width:290px;margin-top:6px;background:rgba(8,39,41,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:8px;box-shadow:0 22px 50px -18px rgba(0,0,0,.6);z-index:60}
.navlinks .dd-panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.navlinks .dd-btn[aria-expanded="true"]+.dd-panel{display:block}
.navlinks .dd-panel a{display:block;padding:10px 14px;border-radius:9px;white-space:nowrap;opacity:.92;min-height:44px;line-height:24px}
.navlinks .dd-panel a:hover,.navlinks .dd-panel a:focus-visible{background:rgba(255,255,255,.09);color:var(--teal,#00BCD4);opacity:1}
.navlinks .dd-panel a.dd-all{margin-top:4px;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 9px 9px;font-weight:700}

/* --- Header phone ------------------------------------------- */
.nav-phone{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.95rem;white-space:nowrap;min-height:44px;min-width:44px;justify-content:center;border-radius:999px;opacity:.95}
.nav-phone:hover{color:var(--teal,#00BCD4);opacity:1}
.nav-phone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav-phone .np-num{display:none}
.navlinks .navlinks-phone{display:none}
@media(min-width:1360px){.nav-phone .np-num{display:inline}.nav-phone{padding:0 6px}}
.navlinks a,.navlinks .dd-btn{white-space:nowrap}
@media(min-width:1081px){.navlinks{gap:22px;font-size:.93rem;margin-left:28px}.nav-cta .btn-primary{white-space:nowrap}}

/* --- Mobile menu (<=1080px) ------ */
@media(max-width:1080px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:20px;background:rgba(8,39,41,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:24px;border-bottom:1px solid rgba(255,255,255,.12)}
  .navlinks.open>a{min-height:44px;display:flex;align-items:center;width:100%}
  .navtoggle{display:inline-flex}
  .navlinks.open{max-height:calc(100vh - 74px);max-height:calc(100dvh - 74px);overflow-y:auto}
  .navlinks.open .dd{width:100%}
  .navlinks.open .dd-btn{width:100%;justify-content:space-between}
  .navlinks.open .dd-panel{position:static;margin:0;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 4px 14px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .navlinks.open .dd-panel::before{display:none}
  .navlinks.open .dd-panel a{white-space:normal;padding:10px 0}
  .navlinks.open .dd-panel a.dd-all{border-top:0;margin-top:0;font-weight:700}
  .navlinks.open .navlinks-phone{display:flex;font-weight:700;color:var(--peach,#ffc693);opacity:1}
}

/* --- Visible breadcrumb on pages that lacked one (roofer spokes) --- */
.shero .crumb+.pill:not([style]){margin-top:14px}
.shero .crumb{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.84rem;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.shero .crumb a{color:rgba(255,255,255,.62)}
.shero .crumb a:hover{color:var(--peach,#ffc693)}
.shero .crumb .sep{margin:0 8px;opacity:.5}
.shero .crumb .here{color:#fff}

/* --- "What we do for <trade>" block --------------------------- */
.wwd{padding:64px 0;background:var(--white,#fff)}
.wwd h3.wwd-sub{font-size:1.15rem;margin:34px 0 14px;color:var(--dark,#082729)}
.wwd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.wwd-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;background:var(--teal-bg,#eff7f9);border-radius:var(--radius,18px);padding:22px;transition:transform .18s ease,box-shadow .18s ease}
.wwd-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm,0 8px 24px -12px rgba(8,39,41,.25))}
.wwd-card h3{font-size:1.05rem;margin:0;color:var(--dark,#082729)}
.wwd-card p{margin:0;font-size:.94rem;color:var(--muted,#5a6b6d)}
.wwd-card .arrow{color:var(--teal-text,#00717f);font-weight:700}
.wwd-card:focus-visible{outline:3px solid var(--orange,#f1770a);outline-offset:3px}
.wwd-grid.wwd-spokes{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.wwd-grid.wwd-spokes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.wwd-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wwd-grid,.wwd-grid.wwd-spokes{grid-template-columns:1fr}}

/* --- Secondary button beside the Scorecard in the closing CTA -- */
.final .subhero-cta .btn-ghost.light{margin:0}

/* Three buttons in the trade hero: keep them on one line where there is room */
.shero-cta .btn{padding:15px 22px;font-size:.98rem}