/* ============================================================
   Walters Billing — Shared Typography & Color Theme
   Load this file on every page AFTER the page's own <style>
   block. It centralizes the two-font system (Lora / Manrope)
   and consistent text-color roles across the site without
   changing any page layout. Accent green kept at the original
   site value (#2FAE7C / #249266) — it reads with more contrast
   than the darker alternative, especially over navy/blue.
   ============================================================ */

/* ---------- Font hierarchy ---------- */
h3{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:19px;
  font-weight:800;
}
h4{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  font-weight:700;
}
.lede{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
}
.eyebrow{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;
}

/* ---------- Buttons ---------- */
.btn-accent,
.btn-submit{
  background:var(--accent);
  color:var(--white);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:700;
}
.btn-accent:hover,
.btn-submit:hover{background:var(--accent-dark);}

/* ---------- Specialist / landing-page form ---------- */
.form-group label{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12.5px;
  color:rgba(255,255,255,.85);
}
.field-note,
.form-required-note,
.form-privacy,
.form-privacy a{
  font-size:12.5px;
  color:rgba(255,255,255,.70);
}
.form-card h2{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:19px;
}

/* ---------- Testimonials (homepage + all form pages) ---------- */
.testimonial-quote,
.testimonial-card .quote-text,
.testimonial-card p.quote-text{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  font-style:normal;
  font-weight:400;
  line-height:1.7;
  color:var(--ink);
}
.testimonial-attr strong,
.testimonial-card .quote-attr strong{color:var(--navy);}
.testimonial-attr span,
.testimonial-card .quote-attr{color:var(--muted);}
/* Decorative quotation mark stays Lora + green — intentionally untouched. */

/* ---------- Footer ---------- */
.footer-top p,
.footer-locations p{color:rgba(255,255,255,.70);}
.footer-locations h3{color:rgba(255,255,255,.90);}
.footer-bottom{color:rgba(255,255,255,.65);}
.family-strip a{color:var(--accent);}

/* Footer phone numbers: give them a distinct at-rest style so they read
   as clickable instead of blending into the surrounding footer text. */
.footer-locations a{
  color:rgba(255,255,255,.92);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.4);
  text-underline-offset:2px;
}
.footer-locations a:hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
}

/* Footer bottom bar link (Cookie Preferences): same clickable treatment. */
.wb-consent-manage-link{
  color:rgba(255,255,255,.65);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:2px;
}
.wb-consent-manage-link:hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
}

/* ---------- Clickable contact info (phone / email) site-wide ---------- */
a[href^="tel:"],
a[href^="mailto:"]{
  text-decoration:underline;
  text-decoration-color:currentColor;
  text-underline-offset:2px;
}
.footer-locations a[href^="tel:"]{text-decoration-color:rgba(255,255,255,.4);}

/* ---------- Active menu state ---------- */
nav.primary-nav > ul > li > a.active{
  font-weight:700;
  color:var(--navy);
}
.dropdown li a.active{
  font-weight:700;
  color:var(--navy);
}
.mobile-nav > a.active{
  font-weight:800;
}
.mobile-group-label.active{
  font-weight:800;
}
.mobile-nav .mobile-sub a.active{
  font-weight:700;
  color:var(--navy);
}

/* ---------- Reserve green for actions: noninteractive labels -> blue ---------- */
.metric-label,
.metric-chip .metric-label,
.service-card .idx,
.service-tile .idx,
.timeline-step .step-label,
.scope-box h3,
.blog-card-date,
.team-title,
.sidebar-author-label,
.sidebar-author-title,
.legal-body a{
  color:var(--blue);
}

/* Review-point numbers: white on the navy circle. */
.review-points .point-num{color:var(--white);}

/* ---------- Cookie consent banner ---------- */
#wb-consent-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9999;
  background:var(--navy);
  box-shadow:0 -4px 16px rgba(0,0,0,.15);
  transition:opacity .3s ease, transform .3s ease;
  /* Safety cap: this element must never take up more than a slice of the
     viewport. If content ever runs long, it scrolls inside the banner
     instead of expanding to fill the screen. */
  max-height:40vh;
  overflow-y:auto;
}
#wb-consent-banner.wb-consent-hide{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}
.wb-consent-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wb-consent-text{
  margin:0;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.85);
  flex:1 1 320px;
}
.wb-consent-text a{
  color:var(--accent);
  text-decoration:underline;
}
.wb-consent-actions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}
.wb-consent-btn{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  font-weight:700;
  padding:8px 16px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  color:#fff;
  cursor:pointer;
  line-height:1.2;
  white-space:nowrap;
}
.wb-consent-btn.wb-consent-accept{
  background:var(--accent);
  border-color:var(--accent);
}
.wb-consent-btn.wb-consent-accept:hover{background:var(--accent-dark);border-color:var(--accent-dark);}
.wb-consent-btn.wb-consent-reject:hover{background:rgba(255,255,255,.1);}
@media (max-width:600px){
  #wb-consent-banner{max-height:60vh;}
  .wb-consent-inner{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start; /* was space-between — that's what stretched the gap on mobile */
    text-align:left;
    padding:14px 18px;
    gap:10px;
  }
  .wb-consent-text{font-size:12.5px;}
  .wb-consent-actions{justify-content:flex-end;}
}