/* === Roof Experts · shared brand stylesheet ===
   Used by every non-homepage template (area, service, post, page).
   Homepage keeps its own inline styles for now. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,600&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,500;1,700&family=Lora:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
  --navy: #010146; --navy-2: #00012F; --navy-ink: #000020;
  --red: #DF1833; --red-2: #B91229;
  --pale: #E5EEEF; --beige: #EDE5E1; --cream: #FFFAF3; --paper: #FFFAF3;
  --ink: #0A0A1F; --ink-2: #2A2A3D; --muted: #6B6E7A; --line: #E2DCD3;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.display { font-family: "Roboto", "Helvetica Neue", sans-serif; font-weight: 900; letter-spacing: -0.025em; line-height: 1.0; }
.ital { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; color: var(--red); }
.mono { font-family: "Source Sans 3", sans-serif; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; }

/* Topbar */
.topbar { background: var(--navy-ink); color: #B7BBC9; font-size: 13px; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.topbar a { color: #C8CCDB; text-decoration: none; }
.topbar-l, .topbar-r { display: flex; gap: 20px; align-items: center; }
.badge-rev { color: #fff; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.stars { color: #F5C518; letter-spacing: 1px; }

/* Header */
.header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 88px; gap: 32px; }
.logo img,
.custom-logo-link img,
.custom-logo { height: 56px; width: auto; max-width: 240px; object-fit: contain; }
.custom-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
nav.primary { display: flex; gap: 28px; font-weight: 600; font-size: 15px; }
nav.primary a { text-decoration: none; color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; }
nav.primary a:hover { border-color: var(--red); }
.header-cta { display: flex; gap: 14px; align-items: center; }
.phone { font-weight: 700; text-decoration: none; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; }
.phone .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .12s ease, background .15s ease; cursor: pointer; border: none; }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-2); }
.btn.dark { background: var(--navy); color: #fff; }
.btn.dark:hover { background: var(--navy-2); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost.light { color: #fff; border-color: rgba(255,255,255,.5); }
.btn:hover { transform: translateY(-1px); }

/* Breadcrumb */
.crumbs { background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 0; font-size: 13px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.crumbs .sep { color: var(--line); margin: 0 10px; }
.crumbs .here { color: var(--ink); font-weight: 600; }

/* Section primitives */
section { padding: 96px 0; }
.section-head { margin-bottom: 56px; max-width: 880px; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--red); margin-bottom: 20px; font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.section-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--red); }
.section-head h2 { font-family: "Roboto", "Helvetica Neue", sans-serif; font-size: clamp(38px, 4.2vw, 60px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.08; padding-bottom: 0.08em; margin: 0 0 18px; }
.section-head h2 .ital { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; color: var(--red); }
.section-head p { font-size: 18px; color: var(--ink-2); margin: 0; max-width: 720px; }

/* Final CTA */
.final-cta { background: var(--red); color: #fff; padding: 96px 0; text-align: center; }
.final-cta h2 { font-family: "Roboto", "Helvetica Neue", sans-serif; font-size: clamp(40px, 5vw, 72px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; padding-bottom: 0.08em; margin: 0 auto 24px; max-width: 900px; }
.final-cta p { color: rgba(255,255,255,.9); font-size: 18px; max-width: 600px; margin: 0 auto 36px; }
.final-cta .btn-row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.final-cta .btn.primary { background: #fff; color: var(--red); }
.final-cta .phone-big { display: block; margin-top: 32px; font-family: "Roboto", "Helvetica Neue", sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; color: #fff; }

/* Footer */
footer { background: var(--navy-ink); color: #B7BBC9; padding: 80px 0 40px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }
.foot-col h4 { font-family: "Source Sans 3", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 18px; }
.foot-col a { display: block; color: #C8CCDB; text-decoration: none; padding: 5px 0; }
.foot-col a:hover { color: var(--red); }
.foot-col p { margin: 4px 0; line-height: 1.6; }
.foot-logo { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.foot-logo .mark { width: 40px; height: 40px; background: var(--paper); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.foot-logo .mark img { height: 30px; }
.foot-logo .name { color: #fff; font-family: "Roboto", "Helvetica Neue", sans-serif; font-weight: 900; font-size: 18px; letter-spacing: -0.01em; }
.foot-tagline { font-family: "Roboto", "Helvetica Neue", sans-serif; font-size: 22px; color: #fff; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 24px; max-width: 320px; font-weight: 700; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; justify-content: space-between; color: rgba(255,255,255,.5); font-size: 13px; flex-wrap: wrap; gap: 16px; }


/* ============================================================
   SERVICE-TEMPLATE BLOCK CONTENT
   Aligns Gutenberg body content on template-service.php to the
   template's own 1320px grid and Roboto type scale, and gives
   .rx-band groups full-bleed brand colour bands.
   Added Sept 2026.
   ============================================================ */

.page-template-template-service .wrap[style*="880px"]{
  max-width:1320px !important;
}

.page-template-template-service .wrap[style*="880px"] > .wp-block-heading,
.page-template-template-service .wrap[style*="880px"] > p,
.page-template-template-service .wrap[style*="880px"] > ul,
.page-template-template-service .wrap[style*="880px"] > ol,
.page-template-template-service .wrap[style*="880px"] > .wp-block-buttons,
.page-template-template-service .wrap[style*="880px"] > .wp-block-details,
.page-template-template-service .wrap[style*="880px"] > .wp-block-separator{
  max-width:880px;
  margin-left:0;
  margin-right:auto;
}

.page-template-template-service .wrap[style*="880px"] h2.wp-block-heading{
  font-family:Roboto,system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(34px,4.2vw,60px);
  line-height:1.08;
  letter-spacing:-1.3px;
  color:#0A0A1F;
  margin:72px 0 20px;
}
.page-template-template-service .wrap[style*="880px"] h3.wp-block-heading{
  font-family:Roboto,system-ui,sans-serif;
  font-weight:900;
  font-size:clamp(19px,1.6vw,25px);
  line-height:1.18;
  letter-spacing:-0.4px;
  color:#0A0A1F;
  margin:0 0 12px;
}
.page-template-template-service .wrap[style*="880px"] p.lead-paragraph{
  font-size:20px;
  line-height:1.6;
}

.page-template-template-service .rx-band{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  max-width:none !important;
  padding:76px calc(50vw - 628px) !important;
  border-radius:0 !important;
}
@media (max-width:1320px){
  .page-template-template-service .rx-band{
    padding-left:32px !important;
    padding-right:32px !important;
  }
}
.page-template-template-service .rx-band > *{
  max-width:880px;
  margin-left:0;
  margin-right:auto;
}
.page-template-template-service .rx-band h2.wp-block-heading{ margin-top:0; }
.page-template-template-service .rx-band-navy{
  background:#010146 !important;
  color:#ffffff !important;
}
.page-template-template-service .rx-band-navy h2.wp-block-heading,
.page-template-template-service .rx-band-navy h3.wp-block-heading{
  color:#ffffff !important;
}
.page-template-template-service .rx-band-navy a{
  color:#ffffff;
  text-decoration-color:rgba(255,255,255,.5);
}
.page-template-template-service .rx-band-light{
  background:#ffffff !important;
  color:#0A0A1F !important;
}

.page-template-template-service .wrap[style*="880px"] .wp-block-details{
  border-top:1px solid rgba(10,10,31,.14);
  padding:18px 0;
}
.page-template-template-service .wrap[style*="880px"] .wp-block-details summary{
  font-family:Roboto,system-ui,sans-serif;
  font-weight:700;
  font-size:18px;
  color:#0A0A1F;
  cursor:pointer;
}

/* Bands supply their own separation — drop adjacent rules */
.page-template-template-service .rx-band + .wp-block-separator,
.page-template-template-service .wp-block-separator:has(+ .rx-band){
  display:none;
}
.page-template-template-service .rx-band{
  margin-top:16px;
  margin-bottom:16px;
}
.page-template-template-service .rx-band + h2.wp-block-heading{
  margin-top:56px;
}

/* Hero card photo (template-service.php featured image) */
.svc-hero-card .card-media{
  margin:-32px -32px 22px;
  border-radius:4px 4px 0 0;
  overflow:hidden;
  line-height:0;
}
.svc-hero-card .card-media img{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
}

/* Block FAQ styled like the template's native details.q */
.page-template-template-service .wrap[style*="880px"] .wp-block-details{
  border-top:0;
  border-bottom:1px solid var(--line);
  padding:24px 0;
}
.page-template-template-service .wrap[style*="880px"] .wp-block-details summary{
  font-family:"Roboto","Helvetica Neue",sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:-0.01em;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.page-template-template-service .wrap[style*="880px"] .wp-block-details summary::-webkit-details-marker{ display:none; }
.page-template-template-service .wrap[style*="880px"] .wp-block-details summary::after{
  content:"+";
  float:right;
  color:var(--red);
  font-weight:700;
}
.page-template-template-service .wrap[style*="880px"] .wp-block-details[open] summary::after{ content:"\2013"; }
.page-template-template-service .wrap[style*="880px"] .wp-block-details p{
  margin:12px 0 0;
  color:var(--ink-2);
  font-size:15px;
}

/* Red eyebrows sit tight above their heading */
.page-template-template-service .wrap[style*="880px"] .section-eyebrow{ margin-bottom:8px; }
.page-template-template-service .wrap[style*="880px"] .section-eyebrow + h2.wp-block-heading{ margin-top:0; }

/* Hero card holding only a photo (no card text slots filled yet) */
.svc-hero-card:has(> .card-media:only-child){ padding:0; }
.svc-hero-card:has(> .card-media:only-child) .card-media{
  margin:0;
  border-radius:4px;
}
.svc-hero-card:has(> .card-media:only-child) .card-media img{ height:320px; }