/* Canada Create Brand System 2026 — Inter headlines / DM Sans body / consolidated red+navy.
   Loaded after cc-layout-1320.css. Per-widget Elementor sizes intentionally survive:
   the type scale below carries no !important, so explicit widget styling wins. */

/* Self-hosted faces (installed into assets/fonts by inc/cc-brand-fonts.php).
   Paths are relative to this stylesheet. */
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --cc-font-head:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cc-font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cc-red:#E31507;        /* Signal Red — primary accent */
  --cc-coral:#FF4B3A;      /* Coral Flare — red on dark (5.17:1 on Midnight) */
  --cc-ember:#C10E03;      /* Ember — gradient dark stop / pressed */
  --cc-midnight:#071B38;   /* the single dark surface */
  --cc-paper:#F6F8FB;
  --cc-slate:#545454;
  --cc-grad-cta:linear-gradient(135deg,#FF4B3A 0%,#E31507 55%,#C10E03 100%);
  --cc-grad-cta-hover:linear-gradient(135deg,#FF6A5B 0%,#FF4B3A 55%,#E31507 100%);
  --cc-grad-dark:linear-gradient(160deg,#0E2C55 0%,#071B38 60%,#050F1F 100%);
}

/* ---------- Guard rails: no horizontal scroll, ever ---------- */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,video{max-width:100%;height:auto}

/* Wide displays: bands breathe more; inner shell stays centered at 1320. */
@media(min-width:1600px){:root{--cc-content-gutter:48px}}

/* ---------- Headlines: Inter Bold, roomy 1.25, no negative tracking ---------- */
body[class] :is(h1,h2,h3,h4,h5,h6),
body[class] .elementor-heading-title{
  font-family:var(--cc-font-head)!important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0;
}
/* Brand scale — beats kit globals, still yields to per-widget Elementor styling. */
body[class] h1{font-size:clamp(32px,1.6vw + 26px,48px)}
/* H1 is the brand voice: scale and roomy leading are non-negotiable site-wide. */
body[class] h1,body[class] h1.elementor-heading-title{
  font-size:clamp(32px,1.6vw + 26px,48px)!important;
  line-height:1.25!important;letter-spacing:0!important;
}
body[class] :is(h2,h3),body[class] :is(h2,h3).elementor-heading-title{line-height:1.25!important}
body[class] h2{font-size:clamp(28px,1.4vw + 23px,42px)}
body[class] h3{font-size:clamp(25px,1.1vw + 21px,36px)}
body[class] h4{font-size:clamp(22px,0.8vw + 19px,30px)}
body[class] h5{font-size:20px}
body[class] h6{font-size:18px}

/* Prose pages: retire the old tight-tracked 64px h1 in favor of the brand scale. */
body.cc-unified-page #content .cc-prose-inner>h1{
  font-family:var(--cc-font-head);font-size:clamp(32px,1.6vw + 26px,48px);
  line-height:1.25;letter-spacing:0;
}
body.cc-unified-page #content .cc-prose-inner>:is(h2,h3){line-height:1.25;letter-spacing:0}

/* Navigation is interface text: body family, medium weight, one size. */
body[class] .elementor-nav-menu a,
body[class] .elementor-nav-menu .elementor-item,
body[class] .e-n-menu-title,
body[class] .e-n-menu-title-text,
body[class] .mega-menu-canada a,
body[class] .elementor-location-header nav a{
  font-family:var(--cc-font-body)!important;
  font-weight:500!important;
  font-size:16px!important;
  line-height:1.4!important;
  letter-spacing:0!important;
}

/* Section labels / eyebrows: the one sanctioned uppercase treatment. */
.cc-eyebrow,.cc-section-label,.cc-website-review__eyebrow{
  font-family:var(--cc-font-head);font-weight:600;
  text-transform:uppercase;letter-spacing:1px;line-height:1.25;
}

/* ---------- Body: DM Sans 400, 18/1.5 ---------- */
body[class]{font-family:var(--cc-font-body);font-size:18px;line-height:1.5;font-weight:400}
body[class] p,
body[class] .elementor-widget-text-editor,
body[class] .elementor-widget-theme-post-content{
  font-family:var(--cc-font-body);line-height:1.5;
}
body[class] p{font-size:18px;font-weight:400}
@media(max-width:767px){body[class] p{font-size:16px}}
body[class] li{line-height:1.6}
@media(max-width:767px){body[class]{font-size:16px}}

/* Blog reading column keeps its measure. */
body.single-post .elementor-widget-theme-post-content p{font-size:18px;line-height:1.55}
@media(max-width:767px){body.single-post .elementor-widget-theme-post-content p{font-size:16px}}

/* ---------- Buttons: one-family red gradient (never blends toward navy/black) ---------- */
body #content :is(.cc-cta-btn,.cc-cta-button,.cc-action-button,.cc-price-button),
body .elementor-button{
  font-family:var(--cc-font-body)!important;
  font-weight:700!important;
  font-size:16px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  background:var(--cc-grad-cta)!important;
  border-color:var(--cc-ember)!important;
  color:#fff!important;
}
body #content :is(.cc-cta-btn,.cc-cta-button,.cc-action-button,.cc-price-button):hover,
body #content :is(.cc-cta-btn,.cc-cta-button,.cc-action-button,.cc-price-button):focus-visible,
body .elementor-button:hover,
body .elementor-button:focus-visible{
  background:var(--cc-grad-cta-hover)!important;color:#fff!important;
}

/* Red accents on dark surfaces use Coral Flare, never raw Signal Red (contrast). */
.cc-on-dark-accent{color:var(--cc-coral)}

/* Legacy blog CTA blocks (~155 posts) carry inline off-brand colours: a
   #102239 navy and a #bd2435 crimson. They are corrected here instead of
   rewriting the posts, so article content stays untouched and the change is
   reversible by deleting this rule. */
body[class] .cc-blog-cost-cta{
  background:var(--cc-midnight)!important;
  border-left-color:var(--cc-red)!important;
}
body[class] .cc-blog-cost-cta a:not(.elementor-button):not([class*=btn]){
  color:var(--cc-coral)!important;
}

/* Reduced motion: calm every brand transition. */
@media(prefers-reduced-motion:reduce){
  body .elementor-button,body #content .cc-cta-btn{transition:none!important}
}