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

   Fonts: no override needed. The base "multi" theme's own defaults are already
   'Fraunces' (headings) and 'DM Sans' (body) - see style.md section 6 - which
   matches the live carpetexperts.ca site's fonts exactly, confirmed via Chrome
   DevTools Computed panel (2026-08-13). No font files are shipped here; the
   theme's bundled defaults are used as-is.

   Colors: brand hues below were extracted from the live carpetexperts.ca site's
   Computed styles (H1 color, page background, and the two sticky CTA buttons on
   /contact/) at the client's explicit request. NOTE: carpetexperts.ca is
   currently operated as a different, unrelated business ("Carpet Experts
   Ottawa") - see build-notes.md for the full caveat on this. */

:root{
  /* Brand hues - matched to the live site's two CTA button colors */
  --color-sienna:#A8552F;       /* "Call" button background - also matches the site's scrollbar-thumb color */
  --color-sienna-deep:#732F1E;  /* shared CTA text color / darker hover hue - darker than sienna */
  --color-canadian-red:#962C36; /* "Get a Quote" button background - distinct secondary accent */

  /* Belt-and-braces: pin the semantic roles directly too */
  --color-primary:#A8552F;
  --color-accent:#A8552F;
  --color-accent-hover:#732F1E;
  --color-link-text:#A8552F;
  --color-link-text-hover:#732F1E;

  /* Surface / ink ramp - paper and ink matched directly to the live site;
     tint/deep/rule/ink-soft are reasonable derived values in the same warm
     palette family (not directly observed - the live site did not expose
     these as distinct computed values on the elements inspected). */
  --color-paper:#FAF6F0;
  --color-paper-tint:#FDFBF8;
  --color-paper-deep:#F0E6D8;
  --color-rule:#E8DDCB;
  --color-ink:#1E1A17;
  --color-ink-soft:#5C4F45;

  /* Quote-form "Next" button reads this documented token directly
     (confirmed via DevTools - it was rendering the theme's default
     #334155 slate). Pinned to the brand accent. */
  --color-tertiary-dark:#A75532;
}

/* Page background (set in theme.json; overridden here per style.md section 3) */
body{ background:#FAF6F0; }

/* ---------------------------------------------------------------------
   Component-level color fixes (2026-08-13) - client-specified exact hex
   (#A75532) for four specific UI elements on the live site that render
   with hardcoded colors NOT driven by any documented token (confirmed
   via DevTools Computed - the quote-form step indicator and back-to-top
   button showed #E1315C, matching none of the tokens above). Per
   style.md section 1 ("add normal CSS rules targeting theme classes")
   these are targeted directly as plain class rules rather than tokens.
   Per section 10, undocumented classes may change on a theme update -
   re-check these four rules after upgrading the base theme.
   ------------------------------------------------------------------- */

/* Quote-form step indicator - a soft tan for not-yet-reached steps,
   brand accent for the current step AND any step already passed.
   (Selectors cover several likely state-class/attribute names since the
   exact one isn't fully visible in DevTools' truncated class list.) */
.quote-form-step-indicator-bar{ background:#EADDD2; }
.quote-form-step-indicator.is-current .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-complete .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-completed .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-active .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-done .quote-form-step-indicator-bar,
.quote-form-step-indicator[data-current="true"] .quote-form-step-indicator-bar,
li.is-current .quote-form-step-indicator-bar,
li.is-complete .quote-form-step-indicator-bar,
li.is-completed .quote-form-step-indicator-bar{ background:#A75532; }

/* Quote-form Back button - white background (reverted from a solid fill),
   only the border/text use the brand accent, same on hover. */
.quote-form-back{
  background:#FFFFFF;
  border-color:#A75532;
  color:#A75532;
}
.quote-form-back:hover,
.quote-form-back:focus{
  background:#FFFFFF;
  border-color:#A75532;
  color:#A75532;
}

/* Quote-form Next button - direct class override (the --color-tertiary-dark
   token above did not end up controlling this button in practice). Border
   color added 2026-08-14 - DevTools showed the button's background already
   correct (#A75532) but its border still rendering the theme's default red. */
.quote-form-next{ background:#A75532; border-color:#A75532; }
.quote-form-next:hover,
.quote-form-next:focus{ background:#5E3F37; border-color:#5E3F37; }

/* Quote-form "Select an area" field underline, active/focus state */
.quote-form-select:focus,
.quote-form-select:active,
.quote-form-field:focus-within .quote-form-select{ border-bottom-color:#A75532; }

/* Pricing table "Ask about..." CTA buttons */
.pricing-card-cta{ background:#A75532; }

/* "Most Popular" pricing card border and badge */
.pricing-card.is-popular{ border-color:#A75532; }
.pricing-card-badge{ background:#A75532; }

/* Pricing card price text */
.pricing-card-price{ color:#A75532; }

/* Back-to-top button */
#top.top{ background:#A75532; }

/* Feature-card icon color (circular icons in feature-cards blocks
   sitewide - "What Every Service Shares", "Why Choose ... Toronto",
   etc.) - was rendering the theme's hardcoded default pink, not a brand
   hue. Broadened 2026-08-13: the exact wrapper class wasn't fully
   visible in DevTools, so this matches on class names containing both
   "feature" and "tile" rather than one guessed exact class. */
.feature-tile,
.feature-tile i,
[class*="feature"][class*="tile"],
[class*="feature"][class*="tile"] i{ color:#A75532; }

/* ============================================================
   CTA banner - carpet-themed re-skin (2026-08-14). Scoped to
   .cta-banner and its descendants only; wording, links, and the
   block's own HTML/class names are untouched.

   Assumption flagged: the real markup does not emit a
   `.cta-banner-fringe` element (confirmed via DevTools on this
   build), so the top/bottom fringe is built with `::before`/
   `::after` pseudo-elements on `.cta-banner` itself instead - no
   HTML change needed. The two buttons are targeted structurally
   (`:nth-of-type`) rather than by a guessed class name, since
   their exact classes weren't visible in DevTools; if the wrong
   button ends up styled as "primary", swap the two nth-of-type
   blocks below.
   ============================================================ */

.cta-banner{
  position:relative;
  overflow:visible;
  box-sizing:border-box;
  margin-block:3rem;
  padding-block:110px;
  padding-inline:2rem;
  border:10px solid #6E2430;
  outline:3px solid #C99A6C;
  outline-offset:-18px;
  box-shadow:0 18px 32px -12px rgba(30,20,14,0.45);
  background-color:#A75532;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 2px, transparent 2px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 2px, transparent 2px, transparent 10px);
}

/* Cream carpet fringe, top and bottom */
.cta-banner::before,
.cta-banner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:18px;
  /* The theme's base stylesheet sets background-repeat:no-repeat on this
     pseudo-element, so without an explicit repeat only one 9px tile paints. */
  background-image:repeating-linear-gradient(90deg, #F3E9D8 0, #F3E9D8 3px, transparent 3px, transparent 9px) !important;
  background-repeat:repeat-x !important;
  background-size:9px 18px;
  pointer-events:none;
}
.cta-banner::before{ top:-18px; }
.cta-banner::after{ bottom:-18px; }

/* Heading - large, centered, off-white vintage serif + small divider.
   Sized/spaced to match the client's reference screenshot at ~2047px
   viewport width: 80px font, 0.95 line-height, wraps naturally onto two
   lines, max-width 1600px. clamp() scales it down on narrower screens. */
.cta-banner :is(h1,h2,h3,h4,.cta-banner-heading){
  position:relative;
  color:#FBF3E7;
  font-family:var(--typography-family-heading);
  font-weight:700;
  text-align:center;
  font-size:clamp(48px,4vw,80px);
  line-height:0.95;
  max-width:1600px;
  margin-inline:auto;
  padding-bottom:1.75rem;
  margin-bottom:1.5rem;
}
.cta-banner :is(h1,h2,h3,h4,.cta-banner-heading)::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:85px;
  height:2px;
  background:#FBF3E7;
  opacity:0.7;
}

/* Description - centered, light cream, sans-serif. 26px/1.5 at desktop,
   max-width 820px, scales down with clamp() on narrower screens. */
.cta-banner p{
  color:#F3E7D6;
  text-align:center;
  font-family:var(--typography-family-main);
  font-size:clamp(18px,2vw,26px);
  line-height:1.5;
  max-width:820px;
  margin-inline:auto;
  margin-bottom:2.75rem;
}

/* Buttons - shared pill shape. ~80px tall / 22px text at desktop; the
   second button gets a 20px gap from the first (buttons sit inline,
   so margin does the job of a flex gap). */
.cta-banner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-radius:999px;
  height:80px;
  padding-inline:2.75rem;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cta-banner a:nth-of-type(2){ margin-left:20px; }

/* Primary - ivory pill, dark text */
.cta-banner a:nth-of-type(1){
  background:#FBF3E7;
  color:#3A241C;
  border:2px solid #FBF3E7;
}
.cta-banner a:nth-of-type(1):hover{ background:#EFE1CB; }
.cta-banner a:nth-of-type(1):focus-visible{ outline:3px solid #3A241C; outline-offset:2px; }

/* Secondary - transparent, ivory outline + text */
.cta-banner a:nth-of-type(2){
  background:transparent;
  color:#FBF3E7;
  border:2px solid #FBF3E7;
}
.cta-banner a:nth-of-type(2):hover{ background:rgba(251,243,231,0.15); }
.cta-banner a:nth-of-type(2):focus-visible{ outline:3px solid #FBF3E7; outline-offset:2px; }

/* Mobile - stack buttons vertically (display:flex on the link itself
   makes it a full-width block without needing the wrapper's class) */
@media (max-width:600px){
  .cta-banner{ padding-block:64px; padding-inline:1.25rem; }
  .cta-banner a{
    display:flex;
    width:100%;
    max-width:320px;
    height:64px;
    font-size:18px;
    margin-inline:auto;
  }
  .cta-banner a + a{ margin-top:0.75rem; margin-left:0; }
}

/* ---------------------------------------------------------------------
   Footer contact column icons + hide the auto-rendered NAP row
   (2026-08-14). The "Contact" footer column has three lines - phone,
   email, address - each gets an icon via ::before. Icons are matched by
   href scheme (tel:/mailto:) which is reliable regardless of the
   theme's exact class names; the address line has no href, so it's
   matched structurally as the last link in that column instead.
   ------------------------------------------------------------------- */
#colophon a[href^="tel:"],
#colophon a[href^="mailto:"],
#colophon li:last-child:not(:has(a[href])){
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
#colophon a[href^="tel:"]::before{
  content:"\f095"; /* fa-phone */
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";
  font-weight:900;
}
#colophon a[href^="mailto:"]::before{
  content:"\f0e0"; /* fa-envelope */
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";
  font-weight:900;
}
#colophon li:last-child:not(:has(a[href]))::before{
  content:"\f3c5"; /* fa-location-dot */
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";
  font-weight:900;
}

/* The theme's own auto-rendered footer NAP row - confirmed via DevTools
   (2026-08-14) to be `div.footer-contact-row` (a direct child of
   `.footer-inner`, sibling to `.footer-columns` and `.footer-bottom`,
   containing a `tel:` link + `span.footer-address`) - duplicated the
   Contact column above, hidden here. The earlier guessed class names
   (.footer-bottom/.site-info/.footer-meta/.footer-contact-bar/.footer-nap)
   didn't match the real markup, which is why it was still showing;
   this is the confirmed real selector. */
#colophon .footer-contact-row{
  display:none;
}

/* ---------------------------------------------------------------------
   Mobile nav toggle (hamburger) icon color (2026-08-14). The theme
   documents --hamburger-color (defaults to var(--color-primary)) for
   this, but DevTools showed the live toggle still rendering the
   theme's hardcoded pink (#E1315C) rather than following that token -
   same pattern as the quote-form Next button earlier - so both the
   token AND a direct class override are set here for reliability.
   ------------------------------------------------------------------- */
:root{
  --hamburger-color:#A75532;
  --hamburger-color-active:#A75532;
}
#nav-toggle,
#nav-toggle.nav-toggle,
.nav-toggle{
  color:#A75532;
}

/* Real markup confirmed via the client's DevTools screenshots (2026-08-14,
   round 4): the icon is NOT bars directly on the button. It's a single
   `<span class="hamburger" aria-hidden="true">` inside `#nav-toggle`, and
   the three bars are: the span's own background (middle bar), plus its
   ::before and ::after pseudo-elements (top/bottom bars, which rotate to
   form the X on open). Every previous round targeted `#nav-toggle span`,
   `#nav-toggle::before/::after` (the BUTTON's own pseudo-elements, which
   don't exist here) and never reached `.hamburger::before/::after` (the
   SPAN's pseudo-elements, which is where the theme's hardcoded #E1315C
   actually lives) - confirmed directly in the Computed panel on both the
   closed-state and open-state screenshots. That's why nothing worked
   across three rounds: the selectors simply never matched the real
   elements. This replaces all of that guessing with the confirmed target.
   The middle bar (the span's own background) already correctly disappears
   on open per the client's screenshots (clean X, no extra line) - so its
   color is only forced in the closed state, to avoid fighting whatever
   opacity/transform the theme uses to hide it when open. The ::before/
   ::after bars are the same two elements in both states (just rotated),
   so one unconditional rule covers the hamburger AND the X. */
.nav-toggle:not([aria-expanded="true"]) .hamburger{
  background-color:#A75532 !important;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{
  background-color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   FAQ accordion question text - hover/focus color (2026-08-14). Real
   class confirmed via DevTools: `summary.faq-question` (inside
   `details.faq-item` > `div.faq-list`, used by every faq-section block
   sitewide - about, contact, home, cost-calculator, etc.).
   ------------------------------------------------------------------- */
.faq-question:hover,
.faq-question:focus-visible{
  color:#A75532;
}

/* ---------------------------------------------------------------------
   Mobile sticky bottom CTA bar - "Call" button background (2026-08-14).
   Assumption flagged: this bar's exact class name wasn't visible in the
   screenshot provided (only its rendered appearance - a fixed bottom
   bar with a "Call" pill and a "Get a Quote" pill). Matched here by the
   `tel:` link's href scheme, scoped to a handful of likely wrapper
   class names for this kind of mobile CTA bar, plus a fixed-position
   fallback via `[class*="sticky"]`/`[class*="mobile-cta"]`. If it
   doesn't pick up the color, a DevTools Styles/Computed screenshot of
   that specific "Call" button will confirm the real class to target.
   ------------------------------------------------------------------- */
.sticky-cta a[href^="tel:"],
.sticky-cta-bar a[href^="tel:"],
.mobile-cta-bar a[href^="tel:"],
.mobile-sticky-cta a[href^="tel:"],
.cta-sticky-bar a[href^="tel:"],
[class*="sticky"][class*="cta"] a[href^="tel:"],
[class*="mobile"][class*="cta"] a[href^="tel:"]{
  background-color:#A75532;
}

/* ---------------------------------------------------------------------
   Areas dropdown submenu - underline under a menu item (2026-08-14).
   DevTools screenshot showed the element path `a.dropdown-item.nav-link`
   > `span` for a submenu item ("CARPET INSTALLATION AJAX") rendering an
   underline in the theme's default pink. The base theme documents
   `--color-current-dropdown` (the "current item" indicator colour inside
   an open dropdown) as the token that drives this, so that's set first;
   a direct rule is layered on top covering the two ways a themed
   underline is typically built (text-decoration on the link/span itself,
   or a ::after border/background) - same reliability pattern used for
   the nav-toggle hamburger above, since token coverage alone wasn't
   sufficient for that case either.
   ------------------------------------------------------------------- */
:root{
  --color-current-dropdown:#A75532;
  --color-current:#A75532;
}
.dropdown-item.nav-link,
.dropdown-item.nav-link span,
.dropdown-menu .nav-link,
.dropdown-menu .dropdown-item{
  text-decoration-color:#A75532;
}
.dropdown-item.nav-link::after,
.dropdown-item.nav-link span::after,
.dropdown-menu .nav-link::after{
  background-color:#A75532;
  border-color:#A75532;
}

/* ---------------------------------------------------------------------
   Cost-calculator page - accent red swapped to brand colour (2026-08-14,
   round 4). Rounds 1-3 chased individual "kicker" classes one at a time
   as new screenshots turned up more of them - `panel-kicker`,
   `results-kicker`, and now a THIRD, page-top one confirmed via DevTools:
   `span.local-calculator-kicker` ("INSTANT LOCAL ESTIMATE", above the
   H1). Rather than keep whack-a-moling individual kicker class names as
   more turn up, this round adds a wildcard catch-all -
   `[class^="local-calculator-"][class*="kicker"]` - that covers every
   kicker variant on the page (present and, if the theme has more not yet
   screenshotted, future) in one rule, on top of the specific classes
   already confirmed:
   - `p.local-calculator-step-label` ("1. SELECT CARPET GRADE", "2.
     PROJECT SIZE" - shared by every numbered step)
   - `strong[data-result-type]` (classless result values in the
     breakdown panel - "Mid-Grade (Nylon, Berber)", "200 sq ft", "Remove
     old carpet")
   - `button.local-calculator-preset` (the "Bedroom" / "Living room" /
     "Whole floor (avg)" quick-preset buttons)
   - `span.local-calculator-input-unit` (the "sq ft" unit label next to
     the exact-size input)
   The client confirmed round 3's fixes (steps 1 and 2) DID take effect
   after reimport, so the pipeline is working - this round-4 kicker is a
   genuinely new element, not a re-import/caching repeat.
   ------------------------------------------------------------------- */
.local-calculator-step-label,
[class^="local-calculator-"][class*="kicker"],
.local-calculator-preset:not(.is-selected),
.local-calculator-input-unit{
  color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   Result-row values ("Mid-Grade (Nylon, Berber)", "200 sq ft", "Remove
   old carpet") - round 6, ROOT CAUSE FOUND. Rounds 2-5 targeted
   `strong[data-result-type]` and kept escalating specificity, but it
   never took effect no matter how specific the selector got - because
   the attribute was wrong the whole time. A full DevTools Styles-panel
   scroll (not just Computed) on the actual live element showed the real
   markup is `<strong data-result-row="project_type">`, not
   `data-result-type` - a different attribute name entirely, so every
   prior round's selector never matched this element at all (confirmed:
   none of them appeared in the cascade, not even struck through). The
   rule that was actually winning is the theme's own
   `.local-calculator-breakdown strong{color:var(--color-primary)}`.
   Fixed by targeting the real attribute, qualified with the real
   container class so this beats that theme rule on specificity alone
   (kept !important too, as a safety margin).
   ------------------------------------------------------------------- */
.local-calculator-breakdown strong[data-result-row],
[class*="local-calculator"] strong[data-result-row],
strong[data-result-row]{
  color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   Root-cause fix, round 7: the "Exact size" number input (step 2) was
   still showing red after round 6, confirmed via DevTools - the winning
   rule was `.local-calculator-input-wrap input{color:var(--color-primary)}`.
   The site's global `:root{--color-primary:#A8552F}` (top of this file)
   is already correct brand color - but that value clearly isn't what's
   reaching elements inside the calculator widget, since this input (and
   every other calculator element chased in rounds 2-6) rendered the
   theme's default red instead. That only happens if something scoped to
   the calculator widget re-declares `--color-primary` locally (a widget
   accent default, separate from the site brand, that the global :root
   value can't reach because a more specific rule inside the widget wins
   for that custom property). Rather than keep adding one more
   `color:...!important` per element every time a new one turns up,
   fixing the custom property itself at the widget's container level
   fixes every current AND future element inside it that reads
   var(--color-primary) - including this input, in one rule. */
[class*="local-calculator"]{
  --color-primary:#A75532;
}
.local-calculator-input-wrap input{
  color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   "Master Bedroom" / preset-size selected state - matches the reference
   site's filled brown-gradient + white-text treatment for the active
   size preset, vs. the plain outlined look for unselected presets
   (already handled by .local-calculator-preset above).
   ------------------------------------------------------------------- */
.local-calculator-preset.is-selected{
  background:linear-gradient(135deg,#A75532,#732F1E) !important;
  border-color:#732F1E !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------
   Kill the connector between process steps - the theme draws a
   ::before line/arrow on every .process-step that follows another.
   ------------------------------------------------------------------- */
.process-step + .process-step::before{
  display:none !important;
  content:none !important;
}
/* multi-import:brand-layer:end */