/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Ottawa Insulation Experts — overrides.css
   Only documented tokens (build-client-zip references/style.md). Plain hyphens
   only in any comments/content per house style — no em/en dashes. */

/* No custom webfont shipped in this build: the sandbox that authored this ZIP
   had no network access to fetch a Google Fonts file, so headings fall back to
   a system UI stack instead of a branded serif/sans. Safe, documented fallback
   per style.md section 6. Swap in a self-hosted woff2 later if desired -- see
   build-notes.md "Open items" for instructions. */

:root{
  /* Typography: system stack, no custom font shipped this build */
  --typography-family-heading: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --typography-family-main: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Brand hues: pulled directly from the client-supplied logo (insulation-logo.svg)
     for palette cohesion. Mid insulation-blue primary, navy hover/deep. */
  --color-sienna: #4a7fa9;
  --color-sienna-deep: #14324F;
  --color-primary: #4a7fa9;
  --color-link-text: #4a7fa9;
  --color-link-text-hover: #14324F;

  /* Warm amber/orange = the logo's "retained heat" core colour, kept as a
     distinct accent hue (not aliased to primary) so CTAs read warm against
     the cool blue base. */
  --color-accent: #F08A1D;
  --color-accent-hover: #d97706;
  --color-canadian-red: #F08A1D;
  --color-tertiary: #F08A1D;

  /* Surface/ink ramp: light tinted paper, never the brand hue, never dark. */
  --color-paper: #ffffff;
  --color-paper-tint: #f4f7fa;
  --color-paper-deep: #e8eef4;
  --color-ink: #172431;
  --color-ink-soft: #4d5a66;

  /* Mobile nav toggle (documented token, style.md section 9): default and
     active/open hamburger icon colour, both pinned to brand blue. */
  --hamburger-color: var(--color-sienna);
  --hamburger-color-active: var(--color-sienna);
}

/* Body background: light blue-tinted paper, per the "never brand colour,
   never dark" rule in style.md section 3. */
body{ background:#f1f5f9; }

/* Dark-section heading fix (hero / CTA banner render on brand-coloured
   backgrounds and need light heading text -- see style.md section 7). */
.block-hero :is(h1,h2,h3),
.block-cta-banner :is(h1,h2,h3),
.block-service-hero :is(h1,h2,h3),
.block-carpet-hero :is(h1,h2,h3){ color:var(--color-on-primary); }

/* Required kill switch: process-step connector line (build-notes SOP step 4). */
.process-step + .process-step::before{content:none !important;display:none !important;}

/* Hero feature list: swap the plain bullet dots for a FontAwesome checkmark.
   `features` is a plain-string array (per block-types.md), so the theme
   renders it as an ordinary <ul><li> list -- this replaces the native
   ::marker with a ::before check icon rather than depending on an exact
   list/item class name. */
.block-carpet-hero ul{
  list-style:none;
  margin:0;
  padding:0;
}
.block-carpet-hero ul li{
  position:relative;
  padding-left:1.75rem;
}
.block-carpet-hero ul li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:0.15em;
  color:var(--color-sienna);
}

/* Quote-form (carpet-hero embedded form) accent recolour: the base theme ships
   a hardcoded pink/red (#E1315C) on the active AND completed step-indicator
   bars, the field underline, and the Back/Next buttons. Recoloured to brand
   blue, navy on hover, matching the rest of the site. Only the truly
   upcoming/inactive step bars (pale, not red) keep the theme's own colour --
   "is-complete" etc. are extra guesses alongside the confirmed "is-current"
   in case a step past the current one uses a different modifier class. */
li.quote-form-step-indicator.is-current .quote-form-step-indicator-bar,
li.quote-form-step-indicator.is-complete .quote-form-step-indicator-bar,
li.quote-form-step-indicator.is-completed .quote-form-step-indicator-bar,
li.quote-form-step-indicator.is-done .quote-form-step-indicator-bar,
li.quote-form-step-indicator.is-past .quote-form-step-indicator-bar,
li[aria-current="true"] .quote-form-step-indicator-bar{
  background:var(--color-sienna) !important;
}
.quote-form-back,
.quote-form-next{
  background:var(--color-sienna) !important;
  border-color:var(--color-sienna) !important;
  color:#ffffff !important;
}
.quote-form-back:hover,
.quote-form-next:hover{
  background:var(--color-ink) !important;
  border-color:var(--color-ink) !important;
  color:#ffffff !important;
}

/* Field underline (the line under "Select a service" / "Select an area" etc.)
   -- same hardcoded red, confirmed via screenshot. Class name not confirmed
   via DevTools, so scoped broadly to anything under a "quote-form"-named
   wrapper rather than one exact selector. */
[class*="quote-form"] select,
[class*="quote-form"] input,
[class*="quote-form"] textarea{
  border-bottom-color:var(--color-sienna) !important;
}
[class*="quote-form"] select:focus,
[class*="quote-form"] input:focus,
[class*="quote-form"] textarea:focus{
  border-bottom-color:var(--color-sienna) !important;
}

/* "Back to top" floating indicator: same hardcoded theme pink/red as the
   quote-form buttons above, confirmed via DevTools (a#top.no-external-link-
   indicator). Not a documented token, so targeted directly like the quote-
   form fix. */
#top.no-external-link-indicator{
  background:var(--color-sienna) !important;
}

/* Mobile nav toggle (hamburger), take three: round 40's `color` override on
   #nav-toggle didn't work either, because the three bars are drawn with
   `span.hamburger` and its `::before`/`::after` pseudo-elements using
   `background` (not `color`) -- confirmed via DevTools computed styles on
   all three (span.hamburger, ::before, ::after), each showing
   `Background: #E1315C`. Targeting the real property this time. */
#nav-toggle .hamburger,
#nav-toggle .hamburger::before,
#nav-toggle .hamburger::after{
  background:var(--color-sienna) !important;
}

/* When the menu is open, the theme rotates ::before/::after into an X and
   normally hides the middle bar (the span's own background) -- but my
   !important above was keeping that middle bar visible too, cluttering the
   X. Confirmed the open-state marker is `body.js-nav-active`, so the middle
   bar is hidden only in that state, leaving a clean X. */
body.js-nav-active #nav-toggle .hamburger{
  background:transparent !important;
}

/* Sticky floating CTA bar: "Get a Quote" button background, confirmed
   sibling of `a.sticky-cta-button.sticky-cta-call`. */
.sticky-cta-button:not(.sticky-cta-call){
  background:var(--color-sienna) !important;
}

/* Sticky floating CTA bar: "Call" button background, confirmed via DevTools
   (a.sticky-cta-button.sticky-cta-call, was the theme's hardcoded #E1315C). */
.sticky-cta-button.sticky-cta-call{
  background:#f88507 !important;
}

/* ===========================================================================
   CTA banner: "unfinished insulated wall" visual treatment (CSS only, no
   images). Content/wording/links/buttons are untouched -- this only changes
   background, panel framing, and text colour.

   `.block-cta-banner` is the confirmed outer section (used above for the
   dark-section heading fix). `.cta-banner` / `.cta-banner-heading` /
   `.cta-banner-description` / `.cta-banner-buttons` / `.cta-banner-button(-
   primary|-secondary)` are the real inner classes, confirmed directly. The
   old `.block-cta-banner > *` guess is kept only as a harmless fallback for
   the plank-panel background/border/shadow, width and padding now live
   solely on `.cta-banner` so there is one source of truth for sizing.
   =========================================================================== */

.block-cta-banner{
  background-color:#8a5a3c;
  background-repeat:repeat;
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0 1px, transparent 1px 3px, rgba(255,255,255,.05) 3px 4px, transparent 4px 6px),
    repeating-linear-gradient(to right,
      #5e3c28 0, #5e3c28 3px,
      #8a5a3c 3px, #8a5a3c 19px,
      #b47b49 19px, #b47b49 22px,
      #5e3c28 22px, #5e3c28 25px,
      #aa774b 25px, #aa774b 33px,
      #c99b68 33px, #c99b68 135px,
      #ddbd91 135px, #ddbd91 160px,
      #aa774b 160px, #aa774b 168px
    ) !important;
  background-size:100% 6px, 168px 100%;
}

.block-cta-banner > *,
.cta-banner{
  box-sizing:border-box;
  border:16px solid #6f6557;
  border-radius:3px;
  position:relative;
  background-color:#172431;
  background-image:none;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.28),
    0 24px 36px -12px rgba(20,12,6,.60),
    0 8px 14px rgba(20,12,6,.32);
}

/* Width/padding: single source of truth on the confirmed class, replacing
   the old 760px cap. */
.cta-banner{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding:clamp(48px, 5vw, 80px) clamp(28px, 5vw, 72px);
}
.cta-banner-heading{
  max-width:1100px;
  margin-inline:auto;
}
.cta-banner-description{
  max-width:820px;
  margin-inline:auto;
}

.block-cta-banner :is(h1,h2,h3){ color:#faf7f1; }
.block-cta-banner p{ color:#f3ece1; }

/* Buttons */
.cta-banner-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:28px;
}

.cta-banner-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 36px;
  box-sizing:border-box;
  border-radius:10px;
  font-size:18px;
  font-weight:600;
  line-height:1;
  text-align:center;
  text-decoration:none;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.cta-banner-button-primary{
  border:2px solid #faf7f1;
  background-color:#faf7f1;
  color:#1a1a1a;
  box-shadow:0 5px 10px rgba(20,12,6,.3);
}

.cta-banner-button-secondary{
  border:2px solid #faf7f1;
  background-color:transparent;
  color:#faf7f1;
}

.cta-banner-button:hover{
  transform:translateY(-1px);
}

.cta-banner-button-primary:hover{
  border-color:#4a7fa9;
  background-color:#4a7fa9;
  color:#faf7f1;
  box-shadow:0 7px 14px rgba(20,12,6,.35);
}

.cta-banner-button-secondary:hover{
  background-color:rgba(250,247,241,.12);
}

.cta-banner-button:focus-visible{
  outline:3px solid #faf7f1;
  outline-offset:4px;
}

@media (max-width:768px){
  .cta-banner{
    padding:40px 24px;
  }

  .cta-banner-buttons{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .cta-banner-button{
    width:100%;
  }
}

/* ===========================================================================
   NOTE: an earlier round added a custom grid layout here for two homepage
   media-text rows, guessing at child element classes (figure/__media/
   __content) that turned out not to match the real markup. Since this CSS
   targets `.block-media-text` globally, it was silently breaking the About
   page's own two media-text sections (confirmed real classes, via DevTools:
   `section.block.block-media-text.block-media-text-image-left` and
   `-image-right` -- the theme already has native left/right layout support
   built around those modifier classes). The homepage rows that prompted this
   CSS have since been removed entirely, so the whole block is removed here
   too, letting the theme's own native `.block-media-text` layout render the
   About page sections the way it did before this session touched it.
   =========================================================================== */

/* ===========================================================================
   Feature-card icons, pricing-table, and FAQ hover: same hardcoded theme
   pink/red family as the quote-form/back-to-top fixes above, not documented
   tokens. Exact class names not confirmed via a DevTools computed-style
   panel for these three, so selectors are broad (attribute-contains) rather
   than one exact string, same approach used for the field-underline fix.
   =========================================================================== */

/* Feature-cards icon glyph colour (the circular icon tile above each card
   title, e.g. "Insulation Issues We Solve"). First attempt (attribute-
   contains on "feature-icon"/"card-feature") still showed red per screenshot,
   so this is broadened to catch any FontAwesome glyph inside a feature-card,
   scoped to the block itself rather than a specific tile/wrapper class name. */
.block-feature-cards i[class*="fa-"],
.block-feature-cards i[class*="fa-"]::before,
.block-feature-cards [class*="card"] i,
.block-feature-cards [class*="card"] i::before,
[class*="feature-icon"] i,
[class*="feature-icon"] i::before,
[class*="card-feature"] i,
[class*="card-feature"] i::before{
  color:#f88507 !important;
}

/* Pricing-table cards: border on every tier, price-line text on every tier,
   and the "Get a Quote" CTA button recoloured on every tier except the
   "Most Popular" (is-popular) card, which keeps its existing highlighted
   treatment untouched. */
.pricing-card,
[class*="pricing-card"]{
  border-color:var(--color-sienna) !important;
}
.pricing-card [class*="price"],
[class*="pricing-price"]{
  color:#172431 !important;
}
.pricing-card:not(.is-popular) [class*="cta"],
.pricing-card:not(.is-popular) a[class*="button"],
.pricing-card:not(.is-popular) button[class*="button"]{
  background:var(--color-sienna) !important;
  border-color:var(--color-sienna) !important;
}

/* "Most Popular" pricing-card badge background, confirmed via DevTools
   (span.pricing-card-badge, was the theme's hardcoded #E1315C). */
.pricing-card-badge{
  background:#f88507 !important;
}

/* "Most Popular" pricing card's own border, matching the badge colour.
   Overrides the blue border-color rule above for this one card only. */
.pricing-card.is-popular{
  border-color:#f88507 !important;
}

/* "Most Popular" pricing card's own CTA button: confirmed via DevTools
   `.is-popular .pricing-card-cta` uses a `var(--color-tertiary)` ->
   `var(--color-tertiary-dark)` gradient. Flattened to a single solid colour,
   no gradient, per request. */
.is-popular .pricing-card-cta,
.pricing-card.is-popular .pricing-card-cta{
  background-color:#f88507 !important;
  background-image:none !important;
}

/* FAQ question hover state. */
[class*="faq"] [class*="question"]:hover,
[class*="faq-item"] summary:hover,
[class*="faq-item"] button:hover{
  color:var(--color-sienna) !important;
}

/* Cost calculator (carpet-calculator block): kicker labels, step label,
   results kicker, input unit pill, and the size value inside the second
   quote-summary row, all recoloured off the theme's hardcoded red to the
   site's ink colour. */
.local-calculator-step-label,
.local-calculator-results-kicker,
.local-calculator-input-unit{
  color:#172431 !important;
}

/* "BUILD YOUR PROJECT" panel kicker: confirmed via DevTools the real class
   is `.local-calculator-panel-kicker` -- the earlier `.local-calculator-
   kicker` guess doesn't exist on this element and never matched. Set to
   black per request (separate shade from the navy-ink group above). */
.local-calculator-panel-kicker{
  color:#1a1a1a !important;
}

/* "Exact size" number input text (the typed "1000" value): confirmed via
   DevTools the real selector is `.local-calculator-input-wrap input` -- the
   theme's own rule bundles it with `.local-calculator-input-unit` under that
   selector. `local-calculator-quote-2-size` is the element's id, not a
   class, so the earlier `.local-calculator-quote-2-size` guess never
   matched anything either. Set to black. */
.local-calculator-input-wrap input{
  color:#1a1a1a !important;
}

/* Results row values ("Project Type," "Size"): confirmed via DevTools these
   are NOT a ".project_type" class -- they're `<strong data-result-row="...">`
   inside `.local-calculator-breakdown` (e.g. data-result-row="scope" for the
   size row), styled by the theme's own `color: var(--color-primary)`, which
   isn't resolving to this site's brand colours on the live page and renders
   the theme's hardcoded red instead. Targeted directly with !important so it
   holds regardless of why the variable isn't cascading. */
.local-calculator-breakdown strong,
.local-calculator-breakdown [data-result-row]{
  color:#172431 !important;
}

/* Attic-size preset buttons (Small attic / Medium attic / Large attic /
   Whole home): confirmed via DevTools these use the theme's own hardcoded
   pink/red for both the resting state (`.local-calculator-preset`, text
   colour `var(--color-primary)`) and the selected/focus/hover state
   (gradient `var(--color-primary)` -> `#573621`). Matched to the confirmed
   "Get an exact quote" CTA button instead (`.local-calculator-cta`:
   `background: linear-gradient(135deg, var(--color-tertiary) 0,
   var(--color-tertiary-dark) 100%); color: var(--color-white);`), so the
   preset buttons read as the same brand-orange gradient as the CTA. */
.local-calculator-preset{
  color:var(--color-tertiary) !important;
  border-color:var(--color-tertiary) !important;
}
.local-calculator-preset.is-selected,
.local-calculator-preset:focus,
.local-calculator-preset:hover{
  background:linear-gradient(135deg, var(--color-tertiary) 0%, var(--color-tertiary-dark) 100%) !important;
  border-color:var(--color-tertiary) !important;
  color:var(--color-white) !important;
}

/* FAQ archive page ("8 answers" count badge): confirmed via DevTools
   `.faq-archive-count span` sets `color: var(--color-primary)`, rendering
   the theme's hardcoded red instead of brand orange. */
.faq-archive-count span{
  color:#f88507 !important;
}

/* FAQ single-question page ("QUESTION NO. 01" eyebrow number): confirmed via
   DevTools the parent `.faq-single-eyebrow` already resolves to
   `var(--color-tertiary)` (orange), but the more specific child rule
   `.faq-single-eyebrow-num` overrides it back to `var(--color-primary)`
   (red). Pinned directly to orange so it matches the rest of the eyebrow. */
.faq-single-eyebrow-num{
  color:#f88507 !important;
}

/* FAQ single-question answer drop cap (the large first letter of the answer
   paragraph, e.g. the "R" in "Rebate programs..."). The DevTools panel this
   round only showed the ::first-letter box model, not the matched colour
   rule/class name, so this is scoped broadly to the first paragraph inside
   the FAQ single article rather than one confirmed exact selector. If it
   doesn't land, send a screenshot with the Styles panel open on this
   element and I'll tighten it to the real class. */
.faq-single p:first-of-type::first-letter,
[class*="faq-single"] p::first-letter{
  color:#1a1a1a !important;
}

/* Media-text block button (e.g. "Request a Free Quote" under an image/text
   section): confirmed via DevTools `.block-media-text-button` sets
   `background-color: var(--color-primary)`, rendering the theme's hardcoded
   red instead of brand blue. */
.block-media-text-button{
  background-color:#4a7fa9 !important;
}
/* multi-import:brand-layer:end */