/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Furniture Assembly Ottawa - overrides.css
   Only documented tokens (see build-client-zip references/style.md).
   Brand palette: Navy #073168, Red #EE002B, White #FFFFFF.
   Decorative-only hues (CTA-banner illustration: oak, cream, plant greens) are
   listed at their rules and are not part of the brand palette. */

/* 1. Self-hosted fonts. Heading: Manrope 700. Body: Inter 400/500/600. */
@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');
}

:root{
  /* Fonts */
  --typography-family-heading:'Manrope', Arial, Helvetica, sans-serif;
  --typography-family-main:'Inter', Arial, Helvetica, sans-serif;
  --typography-family-paragraph:var(--typography-family-main);
  --typography-weight-heading:700;

  /* Brand hues - primary hue = Navy, secondary/hover hue = Red (aliases). */
  --color-sienna:#073168;
  --color-sienna-deep:#EE002B;
  --color-canadian-red:#EE002B;
  --color-black:#000000;
  --color-white:#FFFFFF;

  /* Surface / ink ramp - kept to the three brand colours only. */
  --color-paper:#FFFFFF;
  --color-paper-tint:#FFFFFF;
  --color-paper-deep:#FFFFFF;
  --color-rule:#073168;
  --color-ink:#073168;
  --color-ink-soft:#073168;

  /* Direct role pins (belt-and-braces on top of the aliases above). */
  --color-primary:#073168;
  --color-on-primary:#FFFFFF;
  --color-secondary:#EE002B;
  --color-tertiary:#EE002B;
  --color-accent:#073168;
  --color-accent-hover:#EE002B;
  --color-heading:#073168;
  --color-main:#073168;
  --color-paragraph:#073168;
  --color-link-text:#073168;
  --color-link-text-hover:#EE002B;
}

/* Page background is set in theme.json as an inline style with higher
   specificity than a plain body{} rule - !important is needed to win here. */
body{ background:#FFFFFF !important; }

/* Dark sections (carpet-hero, cta-banner) set their own light heading colour
   locally against the navy surface - confirm it stays pure white here too. */
.block-cta-banner :is(h1,h2,h3,h4),
.carpet-hero :is(h1,h2,h3,h4){ color:var(--color-on-primary) !important; }

/* Required fix: kill the connector line the theme draws between stacked
   process-step cards (renders as a stray line without this). */
.process-step + .process-step::before{ content:none !important; display:none !important; }

/* Required fix: every button/CTA across the site must render as a flat colour
   fill, no gradient overlay (carpet-hero, pricing-table, the "Most Popular"
   pricing card, the cost calculator, and the cta-banner's own primary/
   secondary buttons all included). background-image is what a
   `background: linear-gradient(...)` declaration actually sets, so killing it
   here removes any gradient while leaving whatever background-color applies
   to each button in place. */
.wp-block-button__link,
a[class*="button"],
button[class*="button"],
a[class*="cta"],
button[class*="cta"],
.pricing-card-cta,
.pricing-card.is-popular .pricing-card-cta,
.local-calculator-cta{
  background-image:none !important;
}

/* Force a flat navy fill + white text on buttons/CTAs site-wide, EXCEPT the
   cta-banner's own primary/secondary buttons, which are reverted back to the
   design's original colour per your request (the gradient-kill above still
   applies to them). The substring matches also catch any theme button class
   not explicitly listed here, since pricing-card-cta and local-calculator-cta
   were both already found to skip a plain "button" substring match. */
.wp-block-button__link:not(.block-cta-banner *, .cta-banner *),
a[class*="button"]:not(.block-cta-banner a, .cta-banner a),
button[class*="button"]:not(.block-cta-banner button, .cta-banner button),
a[class*="cta"]:not(.block-cta-banner a, .cta-banner a),
button[class*="cta"]:not(.block-cta-banner button, .cta-banner button),
.pricing-card-cta,
.pricing-card.is-popular .pricing-card-cta,
.local-calculator-cta{
  background-color:var(--color-primary) !important;
  border-color:var(--color-primary) !important;
  color:var(--color-on-primary) !important;
}

/* =========================================================================
   Site-wide CTA: pure-CSS dresser-in-a-room, built only from the existing
   .block-cta-banner / .cta-banner markup via backgrounds, gradients,
   clip-path, shadows and ::before/::after. No new HTML, no images, no SVG,
   no base64, no canvas. Applies to every cta-banner block on every page
   (homepage, every service page, every area page), since each one reuses
   the same two classes regardless of its own heading/description text.
   ========================================================================= */

.block-cta-banner{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* Full-bleed: break out of whatever max-width container the theme wraps
     this block in, so the wall/floor room background reaches both edges of
     the viewport instead of stopping at the content column. */
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:calc(50% - 50vw);
}

/* Room backdrop: warm white wall over a light oak floor, restrained
   floorboard seams confined to the floor band. Fixed padding-top so the
   lamp/plant math below always lines up with the dresser's top edge. */
.block-cta-banner{
  padding-top:100px !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(7,49,104,.08) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #f8f7f4 0%, #f8f7f4 60%, #d9b98a 60%, #ad7d49 100%);
  background-position: left bottom, left top;
  background-size: 100% 40%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

/* ---- Table lamp -------------------------------------------------------
   One connected silhouette (shade + stem + base cut from a single
   clip-path polygon so there are no gaps or floating pieces), coloured by
   one hard-stop gradient: cream shade, brown stem and base. Bottom of the
   box is pinned 6px into the dresser's top slab so it visibly rests on it. */
.block-cta-banner::before{
  content:"";
  position:absolute;
  top:30px;
  left:7%;
  width:60px;
  height:76px;
  z-index:3;
  pointer-events:none;
  clip-path:polygon(
    22% 0%, 78% 0%,
    60% 32%, 60% 78%,
    74% 82%, 66% 100%,
    34% 100%, 26% 82%,
    40% 78%, 40% 32%
  );
  background-image:linear-gradient(180deg,
    #f3ead9 0%, #f3ead9 32%,
    #8a5f34 32%, #8a5f34 100%);
}

/* ---- Two potted plants --------------------------------------------------
   Each plant is a rounded pot (radial-gradient ellipse), a thin stem, and
   several small overlapping elliptical leaves - no squared-off shapes.
   Bottoms of both pots are pinned 6px into the dresser's top slab. */
.block-cta-banner::after{
  content:"";
  position:absolute;
  top:18px;
  right:7%;
  width:124px;
  height:92px;
  z-index:3;
  pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    /* plant A leaves (4 overlapping ellipses) */
    radial-gradient(ellipse at center, #4d8161 0 60%, transparent 66%),
    radial-gradient(ellipse at center, #3f7252 0 60%, transparent 66%),
    radial-gradient(ellipse at center, #356047 0 60%, transparent 66%),
    radial-gradient(ellipse at center, #3f7252 0 60%, transparent 66%),
    /* plant A stem */
    linear-gradient(#3f7252, #356047),
    /* plant A pot */
    radial-gradient(ellipse at center, #c9a06a 0 66%, transparent 72%),
    /* plant B leaves (4 overlapping ellipses) */
    radial-gradient(ellipse at center, #4d8161 0 60%, transparent 66%),
    radial-gradient(ellipse at center, #3f7252 0 60%, transparent 66%),
    radial-gradient(ellipse at center, #356047 0 60%, transparent 66%),
    radial-gradient(ellipse at center, #3f7252 0 60%, transparent 66%),
    /* plant B stem */
    linear-gradient(#3f7252, #356047),
    /* plant B pot */
    radial-gradient(ellipse at center, #c9a06a 0 66%, transparent 72%);
  background-position:
    9px 26px, 24px 23px, 15px 33px, 28px 32px,
    28px 56px,
    16px 72px,
    73px 26px, 88px 23px, 79px 33px, 92px 32px,
    92px 56px,
    80px 72px;
  background-size:
    30px 24px, 28px 22px, 26px 22px, 24px 20px,
    4px 16px,
    28px 20px,
    30px 24px, 28px 22px, 26px 22px, 24px 20px,
    4px 16px,
    28px 20px;
}

/* ---- The dresser --------------------------------------------------------
   Brand pink-red fill, slightly shorter than before. Drawer seams and
   handles are confined to the left/right 18% only; the centre 64% carries
   no decoration at all. */
.cta-banner{
  position:relative;
  overflow:visible;
  z-index:1;
  padding-top:40px !important;
  padding-bottom:40px !important;
  background-repeat:no-repeat;
  background-image:
    /* left column: drawer face seam lines, one per row */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.16) 0 2px,
      transparent 2px 6px,
      rgba(255,255,255,.10) 6px 8px,
      transparent 8px 31.33%),
    /* right column: same seam lines */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.16) 0 2px,
      transparent 2px 6px,
      rgba(255,255,255,.10) 6px 8px,
      transparent 8px 31.33%),
    /* left column: one handle per drawer row */
    radial-gradient(ellipse 18px 6px at 50% 50%, #073168 0 92%, transparent 94%),
    /* right column: one handle per drawer row */
    radial-gradient(ellipse 18px 6px at 50% 50%, #073168 0 92%, transparent 94%),
    /* base dresser body fill */
    linear-gradient(180deg, #EE002B 0%, #c4001f 100%);
  background-position:
    left top, right top,
    left top, right top,
    left top;
  background-size:
    18% 100%, 18% 100%,
    18% 33.33%, 18% 33.33%,
    100% 100%;
}
.cta-banner{
  background-repeat:
    repeat-y, repeat-y,
    repeat-y, repeat-y,
    no-repeat;
}

/* Belt-and-braces: whatever the theme's own width/columns are, the actual
   text content never renders past the centre 64%, so nothing decorative
   can end up "behind" it. */
.cta-banner > *{
  position:relative;
  z-index:3;
  max-width:64%;
  margin-left:auto;
  margin-right:auto;
}

/* Top slab: a lighter pink-red lip across the full width of the dresser. */
.cta-banner::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:12px;
  background:linear-gradient(180deg, #ff5578 0%, #c4001f 100%);
  box-shadow:0 3px 6px -2px rgba(0,0,0,.35);
  z-index:2;
  pointer-events:none;
}

/* Dresser legs: two short navy feet inset from each edge. */
.cta-banner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:12px;
  background-image:
    linear-gradient(#073168, #052549),
    linear-gradient(#073168, #052549);
  background-position: 6% top, 94% top;
  background-size: 16px 100%, 16px 100%;
  background-repeat:no-repeat, no-repeat;
  z-index:0;
  pointer-events:none;
}

/* Tablet: shrink the room padding, narrower drawer columns, smaller
   lamp/plants - all bottoms recomputed to stay flush on the (shorter)
   slab. */
@media (max-width:820px){
  .block-cta-banner{ padding-top:84px !important; }
  .cta-banner{
    background-size:
      18% 100%, 18% 100%,
      18% 33.33%, 18% 33.33%,
      100% 100%;
  }
  .block-cta-banner::before{
    top:26px; width:50px; height:64px;
  }
  .block-cta-banner::after{
    top:14px; width:100px; height:78px;
    background-position:
      7px 22px, 19px 20px, 12px 28px, 22px 27px,
      22px 47px,
      13px 61px,
      59px 22px, 71px 20px, 64px 28px, 74px 27px,
      74px 47px,
      65px 61px;
    background-size:
      24px 20px, 22px 18px, 21px 18px, 19px 16px,
      4px 14px,
      22px 17px,
      24px 20px, 22px 18px, 21px 18px, 19px 16px,
      4px 14px,
      22px 17px;
  }
}

/* Mobile: hide the side drawer stacks entirely (flat fill), shrink the
   room padding, one smaller lamp, one smaller plant. Buttons already
   stack full width via the theme's own button styles. */
@media (max-width:620px){
  .block-cta-banner{ padding-top:60px !important; }
  .cta-banner{
    padding-top:28px !important;
    padding-bottom:28px !important;
    background-image:linear-gradient(180deg, #EE002B 0%, #c4001f 100%);
    background-position:left top;
    background-size:100% 100%;
    background-repeat:no-repeat;
  }
  /* No side drawer columns exist at this width (flat fill above), so the
     content no longer needs the narrower safety width. */
  .cta-banner > *{ max-width:none; }
  .block-cta-banner::before{
    top:16px; left:6%; width:38px; height:48px;
  }
  .block-cta-banner::after{
    top:10px; right:6%; width:56px; height:50px;
    background-image:
      radial-gradient(ellipse at center, #4d8161 0 60%, transparent 66%),
      radial-gradient(ellipse at center, #3f7252 0 60%, transparent 66%),
      radial-gradient(ellipse at center, #356047 0 60%, transparent 66%),
      linear-gradient(#3f7252, #356047),
      radial-gradient(ellipse at center, #c9a06a 0 66%, transparent 72%);
    background-position:
      3px 8px, 16px 6px, 10px 14px,
      15px 30px,
      6px 38px;
    background-size:
      20px 16px, 18px 15px, 17px 15px,
      3px 10px,
      20px 14px;
  }
}
/* multi-import:brand-layer:end */