/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Demolition Pros Ottawa overrides.css - only documented tokens (see style.md). */

/* 1. Self-hosted fonts */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/oswald-regular.woff') format('woff');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/oswald-medium.woff') format('woff');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/oswald-semibold.woff') format('woff');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/oswald-bold.woff') format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-regular.woff') format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-medium.woff') format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-semibold.woff') format('woff');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-bold.woff') format('woff');}

:root{
  /* Fonts: Oswald headings (per brand), Inter body/buttons */
  --typography-family-heading:'Oswald', 'Arial Narrow', Arial, sans-serif;
  --typography-family-main:'Inter', system-ui, -apple-system, sans-serif;

  /* Brand hues: logo orange as primary (recolours primary/accent/links) */
  --color-sienna:#e94d03;
  --color-sienna-deep:#b83a02;

  /* Belt-and-braces: set the semantic roles directly too */
  --color-primary:#e94d03;
  --color-accent:#e94d03;
  --color-accent-hover:#b83a02;
  --color-secondary:#b83a02;
  --color-link-text:#e94d03;
  --color-link-text-hover:#b83a02;

  /* Deep blue as the tertiary/badge accent (per brand request) */
  --color-canadian-red:#0f2a4a;
  --color-tertiary:#0f2a4a;
  --color-tertiary-dark:#091b30;
  --color-tertiary-container:#dbe4ee;

  /* Ink ramp stays close to default (charcoal from the logo palette) */
  --color-ink:#181a1c;
  --color-ink-soft:#4d5257;

  /* Desktop/mobile nav "current page" indicator - documented tokens
     (style.md section 9), pinned to brand orange instead of the base
     theme's default. */
  --color-current:#e94d03;
  --color-current-dropdown:#e94d03;
  --color-current-menu-item:#e94d03;
}

/* process-step connector kill (per SOP) */
.process-step + .process-step::before{content:none !important;display:none !important;}

/* Header logo sizing - logo.svg is a tall, non-square mark (480x595, no
   original viewBox - one was added on import so it now scales cleanly).
   Constrained here since there is no documented logo-size token; these
   selectors cover WordPress's standard custom-logo markup plus a couple of
   fallbacks in case the theme's header markup differs. */
.custom-logo-link,
.site-logo,
.site-branding{
  display:inline-flex;
  align-items:center;
}
.custom-logo,
.site-logo img,
.site-branding img,
header img[src*="logo.svg"]{
  max-height:29px;
  width:auto;
  height:auto;
}
@media (max-width:600px){
  .custom-logo,
  .site-logo img,
  .site-branding img,
  header img[src*="logo.svg"]{
    max-height:24px;
  }
}

/* Brand color enforcement - catch anything not wired to the documented
   tokens above (e.g. a "scroll to top" button or icon accents the base
   theme ships with its own default color). These selectors are not part
   of the documented token contract, so they are cast a little wide and
   backed with !important per an explicit brand request; if any of them
   miss the actual element, the exact class name from the live site's
   HTML will make this a one-line fix instead of a guess. */
a.scroll-to-top,
button.scroll-to-top,
.scroll-to-top,
.back-to-top,
.to-top,
[class*="scroll-top"],
[class*="scrolltop"],
[class*="back-to-top"],
[id*="scroll-top"],
[id*="back-to-top"]{
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
  color:#fff !important;
}
a.scroll-to-top:hover,
button.scroll-to-top:hover,
.scroll-to-top:hover,
.back-to-top:hover,
.to-top:hover,
[class*="scroll-top"]:hover,
[class*="scrolltop"]:hover,
[class*="back-to-top"]:hover{
  background-color:#b83a02 !important;
  border-color:#b83a02 !important;
}

/* Catch-all by icon content rather than wrapper class name: any button
   or link whose only job is an up-arrow / chevron-up icon (the near-
   universal "back to top" pattern) regardless of what the theme names
   its wrapper. */
a:has(> i.fa-arrow-up),
button:has(> i.fa-arrow-up),
a:has(> i.fa-chevron-up),
button:has(> i.fa-chevron-up),
a:has(> svg[class*="arrow-up" i]),
button:has(> svg[class*="arrow-up" i]),
a:has(i.fa-arrow-up),
button:has(i.fa-arrow-up),
a:has(i.fa-chevron-up),
button:has(i.fa-chevron-up){
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
  color:#fff !important;
}
a:has(> i.fa-arrow-up):hover,
button:has(> i.fa-arrow-up):hover,
a:has(> i.fa-chevron-up):hover,
button:has(> i.fa-chevron-up):hover{
  background-color:#b83a02 !important;
  border-color:#b83a02 !important;
}

/* Icon accents inside our card/checklist blocks. These icons sit inside
   a solid brand-color badge/square (see screenshot feedback), so the
   glyph itself needs to be WHITE to be visible against that background -
   setting it to the same orange as the badge made it invisible. */
.feature-cards i,
.trust-checklist i,
.process-steps i,
.feature-cards svg,
.trust-checklist svg,
.process-steps svg{
  color:#fff !important;
  fill:#fff !important;
}

/* Belt-and-braces: force the icon badge/wrapper itself to brand orange
   too, in case it isn't already, so glyph-on-badge contrast holds either
   way. */
.feature-cards [class*="icon"],
.trust-checklist [class*="icon"],
.process-steps [class*="icon"]{
  background-color:#e94d03 !important;
}

/* Exact off-brand elements identified via live DevTools inspection
   (2026-08-27) - these render a pink/crimson accent (roughly #e1315c)
   that isn't wired to --color-primary, so the token override alone
   doesn't reach them. Hardcoded to brand orange with !important since
   the class names are now confirmed, not guessed. */

/* Quote form: Next/Back buttons (progress bar left at theme default -
   see round 2026-08-27p note: only the current step should be orange,
   the rest stay the neutral track color, which is correct progress-
   indicator behaviour, not a bug) */
.quote-form-next{
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
  color:#fff !important;
}
.quote-form-back{
  border-color:#e94d03 !important;
  color:#e94d03 !important;
}

/* Feature card icon tiles */
.feature-card-icon-tile{
  background-color:#e94d03 !important;
}
.feature-card-icon-tile i,
.feature-card-icon-tile svg{
  color:#fff !important;
  fill:#fff !important;
}

/* Pricing table: price text, CTA button, "Most popular" badge, and the
   popular card's border */
.pricing-card-price{
  color:#e94d03 !important;
}
.pricing-card-cta{
  background-color:#0f2a4a !important;
  border-color:#0f2a4a !important;
  color:#fff !important;
}
.pricing-card-cta:hover{
  background-color:#091b30 !important;
  border-color:#091b30 !important;
}
.pricing-card.is-popular .pricing-card-cta{
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
  color:#fff !important;
}
.pricing-card.is-popular .pricing-card-cta:hover{
  background-color:#b83a02 !important;
  border-color:#b83a02 !important;
}
.pricing-card-badge{
  background-color:#e94d03 !important;
  color:#fff !important;
}
.pricing-card.is-popular{
  border-color:#e94d03 !important;
}

/* Media-text block button */
.block-media-text-button{
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
  color:#fff !important;
}
.block-media-text-button:hover{
  background-color:#b83a02 !important;
  border-color:#b83a02 !important;
}

/* External-link indicator icon */
.no-external-link-indicator,
[class*="no-external-link-indicator"]{
  background-color:#e94d03 !important;
  color:#fff !important;
  fill:#fff !important;
}

/* Round 2026-08-27c: additional exact-selector red fixes - mobile nav
   hamburger icon and FAQ archive/single-page elements, found via your live
   DevTools inspection (computed color/background was #E1315C, an
   off-brand crimson not wired to any documented token - same pattern as
   the previous round's fixes). */

/* Mobile nav hamburger icon (the 3-line menu toggle in the header) */
.hamburger,
.hamburger::before,
.hamburger::after{
  background-color:#e94d03 !important;
}

/* FAQ archive/list page: question link text and the "N answers" counter -
   reverted to plain text color per your request; orange now shows only on
   hover of the question link, not as a permanent state. */
.faq-list-text{
  color:#181a1c !important;
}
.faq-question-link:hover .faq-list-text,
.faq-question-link:focus-visible .faq-list-text{
  color:#e94d03 !important;
}
.faq-archive-count > span{
  color:#181a1c !important;
}

/* FAQ single page: "QUESTION NO. XX" eyebrow label - reverted to plain
   text color (not a link, no hover state). */
.faq-single-eyebrow-num{
  color:#181a1c !important;
}

/* FAQ single page: bottom CTA block and its primary button */
.faq-cta{
  background-color:#e94d03 !important;
}
.faq-cta-btn.is-primary{
  background-color:#fff !important;
  border-color:#fff !important;
  color:#e94d03 !important;
}

/* FAQ single page: "Related questions" heading - reverted to plain text
   color (not a link, no hover state). */
.faq-related-title{
  color:#181a1c !important;
}

/* WordPress core drop-cap paragraphs - best-effort, not a class you named
   directly, but "has-drop-cap" is the standard WP block-editor class and
   matches the large red "W" opening letter visible in your first
   screenshot. Flagging this one as unconfirmed. */
.has-drop-cap:first-letter{
  color:#e94d03 !important;
}

/* Round 2026-08-27d: inline FAQ accordion question text (faq-section block,
   embedded on pages such as the Services hub) - found via live DevTools
   inspection, computed to the same off-brand crimson #E1315C. Distinct from
   .faq-list-text (the FAQ archive listing page, fixed in the prior round). */
.faq-question{
  color:#181a1c !important;
}
.faq-question:hover,
.faq-question:focus-visible{
  color:#e94d03 !important;
}

/* Round 2026-08-27g: mobile nav hamburger's animated "X" (active state) and
   the sticky call-to-action bar's Call button - both confirmed off-brand
   crimson via your live DevTools inspection. */

/* Mobile hamburger's X shape when the menu is open (.js-nav-active) - a
   higher-specificity, active-state-scoped rule so it can't lose to whatever
   --hamburger-color-active resolves to internally.
   Round 2026-08-27ac fix: the base .hamburger element (the middle bar) is
   intentionally left OUT of this selector. The theme's own front-end.css
   hides that middle bar by setting its background transparent
   (".js-nav-active .hamburger, .nav-toggle{background-color:#0000}") so
   only the two rotated ::before/::after bars form a clean X. The prior
   version of this rule forced background-color on the base .hamburger too
   (with !important), which beat the theme's transparent rule and left the
   middle bar visible as a third line straight through the X. Coloring only
   ::before/::after preserves the clean X while keeping it orange. */
.js-nav-active .hamburger::before,
.js-nav-active .hamburger::after{
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
}
.js-nav-active .hamburger{
  background-color:transparent !important;
}

/* Sticky call-to-action bar: "Call" button */
.sticky-cta-call{
  background-color:#e94d03 !important;
  border-color:#e94d03 !important;
  color:#fff !important;
}

/* Round 2026-08-27i: cost-calculator result panel text - reverted to plain
   dark text per your request (was rendering in accent color). Some of these
   were given as plain names rather than exact CSS syntax, and one
   (project_type_detail) is confirmed via DevTools to be a data-result-row
   attribute value rather than a class - so each is covered as both a class,
   an id, and (where applicable) a data-result-row attribute, to be safe
   regardless of which form the theme actually uses. */
.local-calculator-step-label,
#local-calculator-step-label,
.local-calculator-results-kicker,
#local-calculator-results-kicker,
.local-calculator-input-unit,
#local-calculator-input-unit,
.local-calculator-quote-2-square_footage,
#local-calculator-quote-2-square_footage,
[data-result-row="project_type_detail"],
[data-result-row="square_footage_note"],
.project_type_detail{
  color:#181a1c !important;
}

/* Round 2026-08-27k: two more cost-calculator kicker labels reported as
   still coloured - given as plain names again, so covered as both class
   and id to be safe regardless of which form the theme uses. */
.local-calculator-kicker,
#local-calculator-kicker,
.local-calculator-panel-kicker,
#local-calculator-panel-kicker{
  color:#181a1c !important;
}

/* Round 2026-08-27q: cta-banner inner card - corrected using a proven
   reference implementation from another live site on this same importer
   (an Electrical Services Ottawa content folder you shared). Its build
   notes confirmed the real structure: .block-cta-banner is the OUTER
   full-width strip, and a separate INNER card sits centered on top of it
   with its own background - the outer wrapper and the inner card are two
   different elements, not one. Rounds n and o both mis-targeted this: n
   guessed inner class names that don't exist anywhere, o put the navy
   background on the OUTER wrapper instead of the inner card (which is why
   it rendered as a flat edge-to-edge bar with no card feel). This replaces
   both rounds.

   The outer wrapper here only gets layout (centering, padding) - no
   background of its own, per your instruction not to copy the reference
   site's background. The INNER card - targeted with the same multi-
   selector fallback chain the reference site used (its own build notes
   call this "still a best-effort guess," so it hedges the same way ours
   always has) - gets the navy background and dark border you originally
   asked for, plus the padding/radius/shadow/centering needed for it to
   actually read as a card. Every color below is yours (#0F2A49, #EA4C05,
   #181A1C, white) - nothing from the reference site's own palette
   (#1f3684, #ECB20C, its SVG artwork, etc.) was carried over, only the
   structural technique. If the card doesn't land right after reimport, a
   DevTools screenshot of it will confirm the exact wrapper element. */
.block-cta-banner{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:32px 16px;
}
.block-cta-banner > div,
.block-cta-banner .container,
.block-cta-banner .cta-banner-inner,
.block-cta-banner .inner{
  box-sizing:border-box;
  width:min(1180px, 100%);
  margin:0 auto;
  padding:56px 44px;
  background-color:#0F2A49 !important;
  border:2px solid #081B30 !important;
  border-radius:16px;
  box-shadow:0 18px 36px rgba(15,42,73,0.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.block-cta-banner h2,
.block-cta-banner h3{
  color:#FFFFFF !important;
  text-align:center;
  margin:0;
  line-height:1.2;
}
.block-cta-banner h2::after,
.block-cta-banner h3::after{
  content:"";
  display:block;
  width:70px;
  height:3px;
  margin:18px auto 0;
  background:#EA4C05;
  border-radius:999px;
}
.block-cta-banner p{
  color:rgba(255,255,255,0.82) !important;
  text-align:center;
  margin:16px 0 0;
}
.block-cta-banner .cta-banner-buttons,
.block-cta-banner .buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:26px;
  width:100%;
}
.block-cta-banner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  min-width:200px;
  height:52px;
  padding:0 24px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.block-cta-banner a:first-of-type{
  background:#EA4C05 !important;
  color:#FFFFFF !important;
  border:none !important;
}
.block-cta-banner a:first-of-type:hover{
  background:#c93f04 !important;
}
.block-cta-banner a:last-of-type{
  background:transparent !important;
  color:#FFFFFF !important;
  border:2px solid #FFFFFF !important;
}
.block-cta-banner a:last-of-type:hover{
  background:#FFFFFF !important;
  color:#0F2A49 !important;
}
.block-cta-banner a:hover{
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .block-cta-banner a{
    transition:background-color 180ms ease, color 180ms ease;
  }
  .block-cta-banner a:hover{
    transform:none;
  }
}
@media (min-width:900px){
  .block-cta-banner{
    padding:56px;
  }
  .block-cta-banner .cta-banner-buttons,
  .block-cta-banner .buttons{
    flex-direction:row;
  }
}

/* Round 2026-08-27s: quote-form progress bar - the current/complete step's
   bar reads var(--color-primary), confirmed via DevTools on the exact
   compound selector below, but that token isn't resolving to brand orange
   here - it renders the theme's default crimson (#E1315C), same root
   pattern as several other components on this site. Scoped narrowly to
   just the current/complete state (matching the confirmed selector
   exactly) so the not-yet-reached steps keep their correct neutral track
   color per your round-p correction - this isn't the blanket "force every
   bar orange" fix from before. */
.quote-form-step-indicator.is-current .quote-form-step-indicator-bar,
.quote-form-step-indicator-complete .quote-form-step-indicator-bar{
  background-color:#e94d03 !important;
}

/* Round 2026-08-27v: home hero (carpet-hero block) padding - your screenshot
   shows the content cramped tight against the announcement bar at the top
   and the bottom edge of the background photo at the bottom, with no
   breathing room. No confirmed DevTools selector for this block yet, so
   it's covered with the same naming pattern that was confirmed for
   .block-cta-banner (base theme blocks in this importer follow a
   .block-<type> convention), plus fallback forms as a safety net. Adds
   generous top/bottom padding, less on mobile. If this doesn't land after
   reimport, a DevTools screenshot of the hero's outer wrapper will confirm
   the exact class. */
.block-carpet-hero,
.carpet-hero,
.wp-block-acf-carpet-hero,
section.block-carpet-hero{
  padding-top:72px !important;
  padding-bottom:72px !important;
}
@media (max-width:768px){
  .block-carpet-hero,
  .carpet-hero,
  .wp-block-acf-carpet-hero,
  section.block-carpet-hero{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
}
/* multi-import:brand-layer:end */