/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Handyman Experts Ottawa — overrides.css
   Only documented tokens from the build-client-zip `style.md` contract are set here.
   Palette is restricted to exactly three brand colours per client instruction:
   Navy #032B60, Red #E5242A, Soft light gray #F3F4F6. Hover/darker states below are
   computed shades of the SAME two hues (navy/red), not new brand colours. White
   (#ffffff) and the theme's default dark ink are kept only as structural neutrals —
   every UI needs a surface/text pair with enough contrast against the light-gray
   page background; flagged here rather than silently added. `!important` is used
   throughout per explicit client instruction, though the cascade order alone (this
   file loads after the base stylesheet) would already make plain :root overrides win. */

/* 1. Self-hosted fonts — Barlow Condensed 700 for headings, Inter 400/500/600 for everything else. */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-600.woff2') format('woff2');
}

:root{
  /* Typography */
  --typography-family-heading:'Barlow Condensed', 'Arial Narrow', 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-paragraph:400 !important;
  --typography-weight-regular:400 !important;
  --typography-weight-medium:500 !important;
  --typography-weight-semibold:600 !important;

  /* Brand hues — navy is the primary hue, red is the tertiary/badge hue */
  --color-sienna:#032B60 !important;
  --color-sienna-deep:#021D42 !important;
  --color-canadian-red:#E5242A !important;

  /* Direct role pins: red drives buttons/accents (the "act now" colour), navy drives links/headings/nav (the "trust" colour) */
  --color-primary:#E5242A !important;
  --color-accent:#E5242A !important;
  --color-accent-hover:#B81420 !important;
  --color-link-text:#032B60 !important;
  --color-link-text-hover:#021D42 !important;
  --color-heading:#032B60 !important;
  --color-ink:#032B60 !important;

  /* Surfaces — soft light gray as the brand's page/card tint */
  --color-paper-tint:#F3F4F6 !important;
  --color-paper-deep:#E7E9EC !important;
  --color-surface-container:#F3F4F6 !important;
}

/* Page background: soft light gray per brand palette */
body{ background:#F3F4F6 !important; }

/* CTA-banner and hero sections render on a dark/brand fill — keep their headings legible (white on navy/red) per style.md §7 dark-sections guidance. */
.block-cta-banner :is(h1,h2,h3,h4),
.block-carpet-hero :is(h1,h2,h3,h4){ color:var(--color-on-primary) !important; }

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

/* No gradient buttons anywhere - solid brand-red fill only, per client instruction.
   Targets the common WP core/button and pricing/CTA button classes; neutralising
   background-image is a plain, safe rule (no theme internals relied upon). */
.wp-block-button__link,
a.button,
button.button,
.block-pricing-table a,
.block-cta-banner a,
.block-carpet-hero a{
  background-image:none !important;
}

/* CTA-banner background: the client-supplied pattern on the outer
   <section class="block-cta-banner"> only - the inner <div class="cta-banner">
   the theme renders inside it stays a plain flat brand-red fill, no texture.
   full-bleed fix: forces the section to break out of any max-width content
   container so the textured background reaches both edges of the viewport,
   regardless of how the theme nests it. */
.block-cta-banner{
  --s: 50px;
  --c1: #892424;
  --c2: #f1d4af;
  --g: conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0);
  background: var(--g),var(--g) var(--s) var(--s) var(--c2) !important;
  background-size: calc(2*var(--s)) calc(2*var(--s)) !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.block-cta-banner .cta-banner{
  background:var(--color-accent) !important;
}

/* Header CTA button - force brand-red fill. The phone-number pill in the
   header links to tel:+13434596368, so targeting any tel: link inside the
   header is a reliable way to hit it regardless of its exact class; the
   class-name selectors below are kept as a backstop in case the header ever
   adds a different (non-tel:) CTA button. */
.site-header a[href^="tel:"],
header a[href^="tel:"],
.site-header a.button,
.site-header .wp-block-button__link,
.site-header .header-cta,
.site-header .cta-button,
header .wp-block-button__link,
header a.button{
  background-color:var(--color-accent) !important;
  border-color:var(--color-accent) !important;
  color:#fff !important;
}
/* multi-import:brand-layer:end */