/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Mississauga Carpets - overrides.css
   Only documented tokens (references/style.md) plus a few safe custom rules.
   Brand: Rubik + neutral soft-blue palette. */

/* 1. Self-hosted Rubik (shipped in styles/assets/fonts/, installed to assets/dist/fonts/). */
@font-face{font-family:'Rubik';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/rubik-300.woff2') format('woff2');}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/rubik-400.woff2') format('woff2');}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/rubik-500.woff2') format('woff2');}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/rubik-700.woff2') format('woff2');}

:root{
  /* Fonts - Rubik across headings and body */
  --typography-family-heading:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typography-family-main:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typography-family-paragraph:'Rubik', system-ui, -apple-system, sans-serif;

  /* Brand hues - neutral soft blue (recolours primary/accent/links via aliases) */
  --color-sienna:#3d6fa5;
  --color-sienna-deep:#2c5680;
  --color-canadian-red:#6b7c93;

  /* Direct role pins */
  --color-primary:#3d6fa5;
  --color-secondary:#2c5680;
  --color-accent:#3d6fa5;
  --color-accent-hover:#2c5680;
  --color-link-text:#3d6fa5;
  --color-link-text-hover:#2c5680;

  /* Surfaces and ink - cool, soft, neutral */
  --color-paper:#ffffff;
  --color-paper-tint:#f2f6fb;
  --color-paper-deep:#e6edf5;
  --color-rule:#d4dce6;
  --color-ink:#1b2733;
  --color-ink-soft:#55616f;
}

/* Page background - soft blue-gray */
body{background:#f4f8fc;}

/* Scrollbars in the brand palette (Firefox + WebKit) */
html,*{scrollbar-width:thin;scrollbar-color:#3d6fa5 #e6edf5;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:#e6edf5;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(#4a7ab0,#2c5680);
  border:3px solid #e6edf5;
  border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#2c5680,#234869);}
::-webkit-scrollbar-corner{background:#e6edf5;}

/* ---------- Header logo: force it larger (theme renders it tiny) ---------- */
/* The header's only image is the logo, so sizing header imgs/svgs is the most
   selector-proof fix. !important beats the theme's inline/enqueued sizing (this
   sheet loads after the theme styles). */
header img,
.site-header img,
.custom-logo,
.custom-logo-link img,
.site-logo img,
.wp-block-site-logo img,
.site-branding img{
  height:52px !important;
  max-height:52px !important;
  width:auto !important;
  max-width:none !important;
}
/* inline-SVG logo variant (scoped to the logo link, not nav carets/hamburger) */
header a[rel="home"] svg,
.custom-logo-link svg,
.site-logo svg,
.site-branding svg{
  height:52px !important;
  width:auto !important;
}
/* un-clip a small fixed-height logo wrapper so the larger mark isn't cropped */
.custom-logo-link,
.site-logo,
.site-branding{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* ---------- CTA banner styled as a woven area rug ---------- */
/* The theme nests an inner `.cta-banner` panel (the visible box) inside the
   `.block-cta-banner` section. We texture that inner panel; the outer section
   keeps the theme default, and the fringe spans are hidden. */

/* Inner panel = the woven rug field */
.block-cta-banner .cta-banner{
  position:relative;
  background-color:#2f5c86 !important;
  background-image:
    radial-gradient(rgba(255,255,255,0.09) 0.5px, transparent 1.4px),                              /* light pile tufts */
    radial-gradient(rgba(0,0,0,0.20) 0.5px, transparent 1.4px),                                    /* dark pile tufts */
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, rgba(0,0,0,0.11) 1px 3px),      /* vertical pile strands */
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.17) 0 2px, rgba(255,255,255,0.05) 2px 6px),      /* horizontal weave rows */
    linear-gradient(180deg,#356a9c,#264d73) !important;                                            /* base pile shading */
  background-size:5px 5px, 5px 5px, 3px 3px, 6px 6px, 100% 100% !important;
  background-position:0 0, 2.5px 2.5px, 0 0, 0 0, 0 0 !important;
  border:4px solid #c9b489;                       /* woven border band */
  box-shadow:
    inset 0 0 0 8px rgba(0,0,0,0.16),             /* inner border shadow */
    inset 0 0 55px rgba(0,0,0,0.28);              /* plush vignette */
}

/* Rug fringe via pseudo-elements (hide the theme's own fringe spans to avoid doubling) */
.block-cta-banner .cta-banner-fringe{ display:none !important; }
.block-cta-banner .cta-banner::before,
.block-cta-banner .cta-banner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:15px;
  background:repeating-linear-gradient(90deg, #e7dab9 0 2px, rgba(0,0,0,0) 2px 6px);
  pointer-events:none;
}
.block-cta-banner .cta-banner::before{ top:0; }
.block-cta-banner .cta-banner::after{ bottom:0; }

/* Light text on the rug */
.block-cta-banner :is(h1,h2,h3,h4,p,span,li),
.block-cta-banner .cta-banner-heading,
.block-cta-banner .cta-banner-description{ color:#f2f7fc; }

/* Keep the CTA buttons crisp on the woven field */
.block-cta-banner .cta-banner-button{ box-shadow:0 2px 10px rgba(0,0,0,0.30); }
.block-cta-banner .cta-banner-button-secondary{ color:#f2f7fc !important; border-color:#f2f7fc !important; }

/* Hide the connector element between process steps */
.process-step + .process-step::before,
.process-step + .process-step:before{ content:none !important; display:none !important; }
/* multi-import:brand-layer:end */