/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;600;700&display=swap');

:root{
  --typography-family-heading:'Plus Jakarta Sans',-apple-system,'system-ui','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --typography-family-main:'Inter',-apple-system,'system-ui','Segoe UI',Roboto,'Oxygen-Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  --typography-family-paragraph:var(--typography-family-main);
  --typography-family-button:var(--typography-family-main);
  --color-primary:#191b2b;
  --color-secondary:#191b2b;
  --color-tertiary:#E1315C;
  --color-tertiary-dark:#C22850;
  --color-tertiary-container:#FBE1E7;
  --color-paper:#F6F1E7;
  --color-paper-tint:#FBF8F2;
  --color-paper-deep:#EDE6D6;
  --color-rule:#E3DDCE;
  --color-ink:#191b2b;
  --color-ink-soft:#4A4B5E;
  --color-surface:#F6F1E7;
  --color-surface-container:#FBF8F2;
  --color-surface-container-low:#FBF8F2;
  --color-surface-container-high:#EDE6D6;
  --color-surface-container-highest:#E3DDCE;
  --color-on-surface:#191b2b;
  --color-accent:#E1315C;
  --color-accent-hover:#C22850;
  --color-heading:#191b2b;
  --color-main:#191b2b;
  --color-paragraph:#4A4B5E;
  --color-link-text:#E1315C;
  --color-link-text-hover:#191b2b;
  --color-blue:#191b2b;
  --color-info:#191b2b;
  --color-sienna:#191b2b !important;
  --wp--preset--color--blue:#191b2b;
  --wp--preset--color--primary:#191b2b;
  --wp--preset--color--secondary:#E1315C;
}

body{background:#F6F1E7;color:#191b2b;}
html{scrollbar-color:#191b2b #F6F1E7;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#F6F1E7;}
::-webkit-scrollbar-thumb{background-color:#191b2b;border-radius:8px;border:2px solid #F6F1E7;}
a{color:#E1315C;}
a:hover{color:#191b2b;}
/* CTA banner: styled as an interlock paver set in sand - the section is the
   sand bed, .cta-banner is the brick (chamfered edges via inset shadows),
   the fringes render as offset half-brick courses above and below. */
.block-cta-banner{background:#EDE6D6;color:#F6F1E7;padding-top:14px;padding-bottom:14px;overflow:visible;}
.block-cta-banner :is(h1,h2,h3,p){color:#F6F1E7;}
.cta-banner{
  position:relative;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.07), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 3px, transparent 3px 7px),
    #191b2b;
  border-radius:10px;
  padding:clamp(30px,5vw,52px) clamp(20px,6vw,64px);
  max-width:960px;
  margin:44px auto;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 2px 0 0 rgba(255,255,255,.06),
    inset 0 -4px 0 rgba(0,0,0,.45),
    inset -2px 0 0 rgba(0,0,0,.25),
    0 10px 24px rgba(25,27,43,.25),
    0 0 0 2px #E3DDCE;
}
.cta-banner-fringe{
  position:absolute;left:7%;right:7%;height:15px;
  background:repeating-linear-gradient(90deg,#23263a 0 106px,transparent 106px 120px);
  border-radius:7px;
  box-shadow:none;
}
.cta-banner-fringe::after{content:none;}
.cta-banner-fringe-top{bottom:calc(100% + 13px);top:auto;}
.cta-banner-fringe-bottom{top:calc(100% + 13px);bottom:auto;background-position-x:53px;}
.block-carpet-hero form{background:#FFFFFF;color:#191b2b;}
.block-quote-form form{background:#f6f0e7;color:#191b2b;}

/* Multi-step quote form: Next/step buttons navy pill (not the red accent), matching interlockexperts.ca */
.block-quote-form button,
.block-quote-form input[type="submit"],
.block-carpet-hero form button,
.block-carpet-hero form input[type="submit"]{
  background-color:#191b2b !important;
  border-color:#191b2b !important;
  border-radius:999px !important;
}

/* Mobile submenu dropdown-toggle buttons (Services/Areas expand chevrons) -
   match the hamburger menu-toggle button's background (transparent).
   Was #E1315C at rest / #C22850 on hover (inherited from the generic
   button/.btn/.button hover rule) - override rest, hover, and focus states. */
.dropdown-toggle,
.dropdown-toggle.toggled-on,
.dropdown-toggle[aria-expanded="true"],
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.dropdown-toggle.toggled-on:hover,
.dropdown-toggle.toggled-on:focus{
  background-color:transparent !important;
  background:none !important;
}

/* Quote form select dropdown - default black text, not the browser blue or the brand red.
   accent-color drives Chrome's native checkmark/focus-ring/scrollbar blue on the new
   customizable <select> popup, so it needs to be overridden alongside color/border. */
.quote-form-select,
.quote-form-select option,
.quote-form-select option:checked,
.quote-form-select::picker-icon,
.quote-form-select::checkmark{
  color:#191b2b !important;
}
.quote-form-select::checkmark{
  background-color:#191b2b !important;
  border-color:#191b2b !important;
  fill:#191b2b !important;
}
.quote-form-select{
  accent-color:#191b2b !important;
  scrollbar-color:#191b2b #F6F1E7 !important;
}
.quote-form-select:focus{
  outline-color:#191b2b !important;
  border-color:#191b2b !important;
}
.quote-form-select::picker(select){
  border-color:#191b2b !important;
  outline-color:#191b2b !important;
  scrollbar-color:#191b2b #F6F1E7 !important;
}
.quote-form-label{
  color:#191b2b !important;
}
.process-step + .process-step::before, .process-step +
  .process-step:before{content:none !important;display:none !important;}

/* Kill any leftover theme-default blue on buttons, links, focus rings, and badges */
button,.btn,.button,input[type="submit"]{background-color:var(--color-tertiary);border-color:var(--color-tertiary);}
button:hover,.btn:hover,.button:hover{background-color:var(--color-tertiary-dark);}
*:focus{outline-color:#E1315C;}

/* Header CTA / phone button */
.site-header a[href^="tel:"],
header a[href^="tel:"],
.header-cta,
.header-cta-button,
.header-phone,
.phone-pill,
.site-header .cta-button{
  background-color:#191b2b;
  color:#F6F1E7;
  border-color:#191b2b;
}

/* Header CTA button label text swap (link stays tel:, only visible text changes) */
.header-cta-button{
  font-size:0;
}
/* Reset text size only for text nodes rendered via ::after; icon keeps its own visible size below */
.header-cta-button::after{
  content:"Get my Quote";
  font-size:14px;
  font-weight:600;
}

/* Header CTA phone icon - keep visible, force cream color */
.header-cta-button i,
.header-cta-button svg,
.header-cta-button .icon,
.header-cta-button use{
  font-size:16px;
  color:#F6F1E7 !important;
  fill:#F6F1E7 !important;
  stroke:#F6F1E7 !important;
}
.header-cta-button svg *,
.header-cta-button path{
  fill:#F6F1E7 !important;
  stroke:#F6F1E7 !important;
}

/* Process-step icon wrap background */
.process-step-icon-wrap{
  background-color:#191b2b;
}

/* Card links */
.card a,
.card-link,
a.card-link,
.service-card a,
.services-grid .card a,
.services-grid a.learn-more{
  color:#191b2b;
}

.card a:hover,
.card-link:hover,
a.card-link:hover,
.service-card a:hover,
.services-grid .card a:hover,
.services-grid a.learn-more:hover{
  color:#e0315b;
}

/* Card subtitles */
.card .subtitle,
.card-subtitle,
.service-card .subtitle,
.services-grid .subtitle{
  color:#191b2b;
}

/* Nav link hover + underline (covers hover, focus, open-dropdown, active/current-page states) */
.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.nav-link.is-active,
.nav-link.current,
.nav-link.current-menu-item,
.nav-link[aria-current="page"],
.nav-link[aria-expanded="true"],
li.current-menu-item > .nav-link,
li.current_page_item > .nav-link,
.nav-link:hover *,
.nav-link:focus *,
.nav-link[aria-expanded="true"] *{
  color:#E1315C !important;
  border-bottom-color:#E1315C !important;
  text-decoration-color:#E1315C !important;
}

/* Site title / logo text hover - red, no default-theme blue */
.site-title a:hover,
.site-title:hover,
a.site-title:hover,
.site-branding a:hover,
.brand a:hover,
.site-logo-text:hover,
header .site-title:hover{
  color:#E1315C !important;
}

/* Mobile + tablet submenu items - red background on hover/tap */
@media (max-width: 1024px){
  .sub-menu a:hover,
  .sub-menu a:active,
  .sub-menu a:focus,
  .sub-menu .nav-link:hover,
  .sub-menu .nav-link:active,
  .sub-menu .nav-link:focus,
  .nav-submenu a:hover,
  .nav-submenu a:active,
  .nav-dropdown a:hover,
  .nav-dropdown a:active,
  li.menu-item-has-children .sub-menu a:hover,
  li.menu-item-has-children .sub-menu a:active{
    background-color:#E1315C !important;
    color:#F6F1E7 !important;
  }
}

/* Process step number */
.process-step-number{
  color:#E1315C !important;
}

/* Trust-checklist card icon badge only (was rendering a mis-encoded checkmark on blue) */
.block-trust-checklist .card-content::before{
  background-color:#E1315C !important;
  color:#F6F1E7 !important;
  content:"\2713" !important;
  font-family:Arial, sans-serif;
}

/* Sticky CTA bar - also show on desktop, contact page only (best-guess body class selectors) */
@media (min-width: 1025px){
  body.page-contact #sticky-cta,
  body.page-slug-contact #sticky-cta,
  body[class*="contact"] #sticky-cta,
  .contact-page #sticky-cta{
    display:flex !important;
  }
}

/* Review-wall author name */
.review-card-author{
  color:#191b2b !important;
}

/* Sticky CTA bar buttons - Call dark navy, Get a Quote red. Hover changes text color only, background stays fixed */
.sticky-cta-call{
  background-color:#191b2b !important;
}
.sticky-cta-quote{
  background-color:#E1315C !important;
}
.sticky-cta-call:hover,
.sticky-cta-call:hover *{
  color:#E1315C !important;
}
.sticky-cta-quote:hover,
.sticky-cta-quote:hover *{
  color:#191b2b !important;
}

/* Mobile nav toggle BUTTON (wrapper only, not the icon bars) - no background color */
.nav-toggle,
.menu-toggle,
.mobile-menu-toggle,
.nav-toggle.is-active,
.nav-toggle[aria-expanded="true"],
.menu-toggle.is-active,
.menu-toggle[aria-expanded="true"],
.nav-toggle:hover,
.menu-toggle:hover,
.mobile-menu-toggle:hover{
  background-color:transparent !important;
  background:none !important;
}

/* Restore hamburger icon bars, but only in the CLOSED state - leave the active/expanded
   state alone so the theme's native hamburger-to-X transform (hide middle bar, rotate
   top/bottom) still works instead of being fought by an unconditional !important */
.nav-toggle:not([aria-expanded="true"]) .hamburger,
.nav-toggle:not([aria-expanded="true"]) .hamburger::before,
.nav-toggle:not([aria-expanded="true"]) .hamburger::after,
.menu-toggle:not([aria-expanded="true"]) .hamburger,
.menu-toggle:not([aria-expanded="true"]) .hamburger::before,
.menu-toggle:not([aria-expanded="true"]) .hamburger::after{
  background-color:#191b2b !important;
}
/* Footer Contact column icons (phone/email via href, address/hours via position within
   the same list that contains the tel: link - our JSON order is phone, address, email, hours) */
#colophon a[href^="tel:"]::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f095";
  margin-right:8px;
  color:#E1315C;
}
#colophon a[href^="mailto:"]::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f0e0";
  margin-right:8px;
  color:#E1315C;
}
#colophon ul:has(a[href^="tel:"]) li:nth-child(2) a::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f3c5";
  margin-right:8px;
  color:#E1315C;
}
#colophon ul:has(a[href^="tel:"]) li:nth-child(n+4) a::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f017";
  margin-right:8px;
  color:#E1315C;
}
/* Hanging indent so a wrapped hours line aligns under the text, not under the icon */
#colophon ul:has(a[href^="tel:"]) li:nth-child(n+4) a{
  display:inline-block;
  padding-left:22px;
  text-indent:-22px;
}

/* Remove the redundant bottom contact row (duplicates the Contact column above it) */
.footer-contact-row{
  display:none !important;
}

.block-local-hero-feature-dot{
  background-color:#191b2b;
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.block-local-hero-feature-dot::after{
  content:"\2713";
  color:#F6F1E7;
  font-size:10px;
  line-height:1;
}

/* Remove leftover theme-default blue divider line under the "All Areas" link
   in the mobile Areas dropdown submenu (current-menu-item / view-all indicator) */
.sub-menu li,
.sub-menu a,
.sub-menu li.current-menu-item,
.sub-menu li.current-menu-item > a,
.nav-dropdown li,
.nav-dropdown a,
.dropdown-menu li,
.dropdown-menu a{
  border-bottom:none !important;
  box-shadow:none !important;
}
.sub-menu hr,
.nav-dropdown hr,
.dropdown-menu hr{
  display:none !important;
}

/* Font pairing copied from interlockexperts.ca (verified via live DevTools computed styles): Plus Jakarta Sans (headings, 800), Inter (body/paragraphs 400, buttons 700) */
body{
  font-family:var(--typography-family-main);
}
h1,h2,h3,h4,h5,h6,
.card-title,
.process-step-number,
.site-title,
.block-carpet-hero h1,
.block-carpet-hero h2{
  font-family:var(--typography-family-heading);
  font-weight:800;
}
p,
.card-description,
.card-subtitle,
.review-card-quote,
.review-card-author{
  font-family:var(--typography-family-paragraph);
  font-weight:400;
}
button,
.btn,
.button,
input[type="submit"],
.header-cta-button,
.sticky-cta-call,
.sticky-cta-quote,
.cta-banner-button,
.nav-link,
.card-link,
a.card-link{
  font-family:var(--typography-family-button);
  font-weight:700;
}
/* multi-import:brand-layer:end */