/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Wax Flooring Experts - overrides.css
   Palette: Navy #073B76, Teal #0796A5, Gold #FFC62E - nothing else, anywhere.
   Section 1-2 override the documented custom properties (style.md). Section 3+
   force-fixes every element CONFIRMED via live DevTools inspection of the
   imported site (canopeexperts.ca) to render a hardcoded crimson (#E1315C)
   instead of reading those custom properties - this theme compiles several
   decorative/accent elements straight to a fixed color rather than a CSS
   variable, so no amount of :root token overriding reaches them; they need
   their own selector-level rule. Every rule below uses !important per
   explicit client instruction, to guarantee the brand palette wins over the
   theme default in every state.
   Fonts: Manrope 700 for headings, Inter 400-600 for everything else. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/manrope-bold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-medium.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-semibold.woff2') format('woff2');}

/* ---------- 1. Typography ---------- */
:root{
  --typography-family-heading:'Manrope', system-ui, -apple-system, sans-serif !important;
  --typography-family-main:'Inter', system-ui, -apple-system, sans-serif !important;
  --typography-family-paragraph:'Inter', system-ui, -apple-system, sans-serif !important;
  --typography-weight-heading:700 !important;
  --typography-weight-regular:400 !important;
  --typography-weight-medium:500 !important;
  --typography-weight-semibold:600 !important;
  --typography-weight-paragraph:400 !important;

  /* ---------- 2. Brand hues + semantic role pins (belt-and-braces) ---------- */
  --color-sienna:#073B76 !important;
  --color-sienna-deep:#0796A5 !important;
  --color-canadian-red:#FFC62E !important;

  --color-primary:#073B76 !important;
  --color-on-primary:#FFFFFF !important;
  --color-secondary:#0796A5 !important;
  --color-tertiary:#FFC62E !important;
  --color-accent:#FFC62E !important;
  --color-accent-hover:#0796A5 !important;
  --color-link-text:#073B76 !important;
  --color-link-text-hover:#0796A5 !important;
  --color-heading:#073B76 !important;

  /* Desktop nav */
  --color-current:#FFC62E !important;
  --color-current-dropdown:#FFC62E !important;
  --color-main-level:#073B76 !important;
  --color-hover-main-level:#0796A5 !important;
  --color-sub-menu:#073B76 !important;
  --color-hover-sub-menu:#0796A5 !important;

  /* Mobile nav */
  --color-current-menu-item:#FFC62E !important;
  --color-main-level-menu-item:#073B76 !important;
  --color-main-level-menu-item-hover-focus-mobile:#0796A5 !important;
  --color-dropdown-toggle-mobile:#073B76 !important;

  /* Nav toggle (hamburger) */
  --hamburger-color:#073B76 !important;
  --hamburger-color-active:#0796A5 !important;
}

/* ---------- 3. Generic buttons/links (WYSIWYG fields, quote-form submit, etc.) ---------- */
.wp-block-button__link,
.button,
.btn,
a.button,
button[type="submit"]{
  background-image:none !important;
  background-color:#073B76 !important;
  color:#ffffff !important;
  border-color:#073B76 !important;
}
.wp-block-button__link:hover,
.button:hover,
.btn:hover,
a.button:hover,
button[type="submit"]:hover{
  background-image:none !important;
  background-color:#0796A5 !important;
  border-color:#0796A5 !important;
}

/* WordPress core color-preset classes ("has-*-color") neutralized inside body
   content only, so an off-brand WP preset can't leak into imported markdown. */
.entry-content [class*="has-"][class*="-color"]:not([class*="-background-color"]),
.wp-block-post-content [class*="has-"][class*="-color"]:not([class*="-background-color"]){
  color:#073B76 !important;
}
.entry-content [class*="has-"][class*="-background-color"],
.wp-block-post-content [class*="has-"][class*="-background-color"]{
  background-color:#FFC62E !important;
}

/* ---------- 4. Header / nav chrome (confirmed hardcoded crimson) ---------- */
.nav-toggle{ color:#073B76 !important; border-color:#073B76 !important; }
.hamburger{
  background-color:#073B76 !important;
  color:#073B76 !important;
  border-color:#073B76 !important;
}

/* ---------- 5. Quote form (confirmed hardcoded crimson) ---------- */
.quote-form-step-indicator-bar{ background-color:#ebdcd0 !important; }
.quote-form-step-indicator.is-current .quote-form-step-indicator-bar{ background-color:#0096a1 !important; }
.quote-form-back{ color:#073B76 !important; border-color:#073B76 !important; }
.quote-form-next{
  background-image:none !important;
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#ffffff !important;
}
.quote-form-next:hover{ background-color:#0796A5 !important; border-color:#0796A5 !important; }

/* ---------- 6. Homepage stats + feature cards (confirmed hardcoded crimson) ---------- */
.stat-icon,
.stat-number{ color:#0796A5 !important; }
.feature-card-icon-tile{ color:#0796A5 !important; }
.feature-card-icon-tile i{ color:#0796A5 !important; }

/* ---------- 7. Pricing table (confirmed hardcoded crimson + a gold-to-slate
   gradient on the "most popular" card's button, and the "most popular" card
   itself reading --color-tertiary as a full background fill instead of just
   a border once that token was set to gold) ---------- */
.pricing-card-price{ color:#073B76 !important; }
.pricing-card.is-popular{
  background-color:#FFFFFF !important;
  background-image:none !important;
  border:2px solid #FFC62E !important;
}
.pricing-card-badge{
  background-color:#FFC62E !important;
  color:#073B76 !important;
  border-color:#FFC62E !important;
}
.pricing-card-cta{
  background-image:none !important;
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#ffffff !important;
}
.pricing-card-cta:hover,
.pricing-card-cta:focus{
  background-image:none !important;
  background-color:#0796A5 !important;
  border-color:#0796A5 !important;
  color:#ffffff !important;
}
.pricing-card li::before{
  color:#0796A5 !important;
  border-color:#0796A5 !important;
}
.local-calculator-cta{
  background-image:none !important;
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#ffffff !important;
}
.local-calculator-cta:hover{ background-color:#0796A5 !important; border-color:#0796A5 !important; }

/* ---------- 8. CTA banner: full-width tiled-floor strip + polished navy
   card. Structure confirmed via live DevTools on canopeexperts.ca:
   section.block-cta-banner (full-width outer, no background of its own)
   > div.cta-banner (centered card) > h2.cta-banner-heading,
   p.cta-banner-description, div.cta-banner-buttons > a.cta-banner-button-
   primary/-secondary. Tiles are CSS gradients only, no images. Card colour
   stays this brand's own navy #073B76 (not a new hex) and gold #FFC62E -
   only the 3 brand colours, plus white/greys for the tile material and
   text contrast. !important guards every rule the theme has shown it will
   otherwise override with a hardcoded value. ---------- */
.block-cta-banner{
  position:relative;
  box-sizing:border-box;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:64px 20px !important;
  background-color:#eef0f2 !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 2px), rgba(178,184,190,.55) calc(100% - 2px)),
    linear-gradient(0deg, transparent 0, transparent calc(100% - 2px), rgba(178,184,190,.55) calc(100% - 2px)),
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.5) 0%, transparent 60%),
    radial-gradient(circle at 15% 80%, rgba(0,0,0,.025) 0%, transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(0,0,0,.02) 0%, transparent 55%),
    linear-gradient(#f6f7f8, #eceef0) !important;
  background-repeat:repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-size:160px 160px, 160px 160px, 160px 160px, 160px 160px, 100% 100%, 100% 100%, 100% 100% !important;
}
.cta-banner{
  box-sizing:border-box;
  width:100% !important;
  max-width:1320px !important;
  margin:0 auto !important;
  padding:56px 44px !important;
  background-color:#073B76 !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 12% 15%, rgba(255,255,255,.05) 0%, transparent 55%),
    radial-gradient(circle at 88% 85%, rgba(255,255,255,.04) 0%, transparent 55%) !important;
  border:none !important;
  border-radius:9px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(4,28,58,.35) !important;
  text-align:center;
}
.cta-banner-heading,
.cta-banner :is(h1,h2,h3,h4){
  color:#FFFFFF !important;
  text-align:center;
  margin:0 0 18px !important;
  line-height:1.2;
}
.cta-banner-heading::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin:18px auto 0;
  background:#FFC62E !important;
  border-radius:999px;
}
.cta-banner-description,
.cta-banner p{
  color:#E8EEF4 !important;
  text-align:center;
  margin:0 auto 32px !important;
  max-width:576px;
}
.cta-banner-buttons{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:16px;
}
.cta-banner-button-primary,
.cta-banner-button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  min-width:200px;
  padding:0 28px;
  border-radius:8px !important;
  font-weight:700;
  white-space:nowrap;
  box-sizing:border-box;
}
.cta-banner-button-primary{
  background-color:#FFFFFF !important;
  color:#073B76 !important;
  border:none !important;
}
.cta-banner-button-primary:hover{
  background-color:#0796A5 !important;
  color:#FFFFFF !important;
}
.cta-banner-button-secondary{
  background-color:transparent !important;
  color:#FFFFFF !important;
  border:2px solid #FFFFFF !important;
}
.cta-banner-button-secondary:hover{
  background-color:#FFFFFF !important;
  color:#073B76 !important;
}
@media (max-width:640px){
  .block-cta-banner{
    padding:40px 16px !important;
    background-size:90px 90px, 90px 90px, 90px 90px, 90px 90px, 100% 100%, 100% 100%, 100% 100% !important;
  }
  .cta-banner{
    padding:40px 24px !important;
  }
  .cta-banner-buttons{
    flex-direction:column;
    align-items:stretch;
  }
  .cta-banner-button-primary,
  .cta-banner-button-secondary{
    width:100%;
    min-width:0;
  }
}

/* ---------- 9. Cost-calculator widget (confirmed hardcoded crimson on
   labels, kickers, the number input, and the preset-chip border) ---------- */
.local-calculator-kicker,
.local-calculator-panel-kicker,
.local-calculator-step-label,
.local-calculator-input-unit,
.local-calculator-results-kicker,
[class*="local-calculator"] input,
[class*="local-calculator"] strong{
  color:#073B76 !important;
}
.local-calculator-preset{
  color:#073B76 !important;
  border-color:rgba(7,59,118,0.15) !important;
}
.local-calculator-preset.is-selected{
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#FFFFFF !important;
}

/* ---------- 10. Misc single-instance fixes (confirmed hardcoded crimson) ---------- */
.block-media-text-button{
  background-image:none !important;
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#ffffff !important;
}
.block-media-text-button:hover{ background-color:#0796A5 !important; border-color:#0796A5 !important; }
.faq-archive-count{ color:#0796A5 !important; }

/* ---------- 11. Sticky mobile CTA bar + back-to-top (confirmed hardcoded
   crimson on the "Call" button and the back-to-top button; "Get a Quote"
   already reads the gold accent token correctly, so it is left alone) ---------- */
.sticky-cta-call{
  background-image:none !important;
  background-color:#0796A5 !important;
  border-color:#0796A5 !important;
  color:#FFFFFF !important;
}
.sticky-cta-call:hover,
.sticky-cta-call:focus{
  background-image:none !important;
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#FFFFFF !important;
}
a.no-external-link-indicator.top{
  background-image:none !important;
  background-color:#073B76 !important;
  border-color:#073B76 !important;
  color:#FFFFFF !important;
}
a.no-external-link-indicator.top:hover{ background-color:#0796A5 !important; border-color:#0796A5 !important; }
/* multi-import:brand-layer:end */