/* ===========================================================================
   Canada Create — Content Components (Brand System 2026)
   One source of truth for comparison tables, pricing tables and CTAs inside
   article and page content. Everything inherits the brand tokens defined in
   cc-brand-2026.css; no font families, colours or sizes are invented here.

   Responsive strategy: NEVER horizontal scroll. Wide tables pin their first
   column as the row label and tab through the remaining columns on small
   screens (progressive enhancement — without JS the table simply wraps).
   ========================================================================= */

:root{
  --cc-c-radius:14px;
  --cc-c-border:#DDE3F0;
  --cc-c-shadow:0 18px 40px rgba(7,27,56,.08);
  --cc-c-gap:clamp(16px,2.2vw,28px);
}

/* ---------------------------------------------------------------- block ---*/
.cc-block{
  width:100%;
  max-width:100%;
  margin:clamp(32px,4vw,56px) 0;
  box-sizing:border-box;
}





/* ---------------------------------------------------------------- table ---*/
.cc-table-wrap{
  width:100%;
  max-width:100%;
  border:1px solid var(--cc-c-border);
  border-radius:var(--cc-c-radius);
  background:#fff;
  box-shadow:var(--cc-c-shadow);
  overflow:hidden;      /* clip, never scroll */
  box-sizing:border-box;
}

.cc-table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  background:transparent;
  font-family:var(--cc-font-body);
  font-size:16px;
  line-height:1.5;
  color:#222;
}
.cc-table th,
.cc-table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--cc-c-border);
  overflow-wrap:break-word;   /* never mid-word unless unavoidable */
  word-break:normal;
  hyphens:none;
  min-width:0;
}
.cc-table thead th{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  letter-spacing:0;
  color:#fff;
  background:var(--cc-midnight);
  border-bottom:0;
  position:relative;
}
.cc-table tbody tr:last-child th,
.cc-table tbody tr:last-child td{border-bottom:0}
.cc-table tbody tr:nth-child(even){background:var(--cc-paper)}




/* numeric / short columns stay tight */


/* Name column: a proper noun must never break across lines. It takes exactly
   the width its longest label needs, and the prose columns absorb the rest. */
.cc-table .cc-col-name{
  width:1%;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  font-weight:700;
  color:var(--cc-midnight);
}


/* the emphasised column (your own product/plan) */
.cc-table .cc-col-highlight{background:rgba(227,21,7,.05)}
.cc-table thead .cc-col-highlight{background:var(--cc-red)}
.cc-table thead .cc-col-highlight small{
  display:block;
  font-family:var(--cc-font-body);
  font-weight:500;
  font-size:12px;
  line-height:1.4;
  opacity:.9;
  margin-top:3px;
}

/* ----------------------------------------------------------- table tabs ---*/

/* Segmented control: one grey track, the active segment is a raised white
   card with a red underline. Each segment carries a number badge (identity)
   and a chevron (state: right = closed, down = open). */




/* Hover on a non-active segment: midnight fill, everything in it goes white
   (text, number badge, chevron). Overrides the theme's generic button:hover. */







/* Column swap is instant and solid: no fade. */



/* ------------------------------------------------------------ table CTA ---*/
.cc-table-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--cc-c-border);
  background:var(--cc-midnight);
  color:#fff;
  box-sizing:border-box;
}
.cc-table-cta__copy{min-width:0;flex:1 1 300px}
.cc-table-cta__title{
  display:block;
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:#fff;
  margin:0 0 4px;
}
.cc-table-cta__text{
  margin:0;
  font-family:var(--cc-font-body);
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}
.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:13px 24px;
  border:0;
  border-radius:10px;
  background:var(--cc-grad-cta);
  color:#fff!important;
  font-family:var(--cc-font-body);
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  text-align:center;
  text-decoration:none!important;
  white-space:normal;
  box-sizing:border-box;
  transition:filter .16s ease,transform .16s ease;
}
.cc-btn:hover,.cc-btn:focus-visible{background:var(--cc-grad-cta-hover);transform:translateY(-1px)}
.cc-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}



/* ---------------------------------------------------------- phone / call --*/
.cc-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  min-width:0;
}
.cc-call{
  display:inline-flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-decoration:none!important;
}
.cc-call__label{
  font-family:var(--cc-font-head);
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--cc-coral);
  white-space:nowrap;
}
.cc-call__number{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(22px,2.3vw,28px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:#fff;
  white-space:nowrap;
  text-decoration:none!important;
}
.cc-call:hover .cc-call__number,
.cc-call:focus-visible .cc-call__number{color:var(--cc-coral)}
.cc-call:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}

/* Light-surface variant of the call block. */
.cc-call--ink .cc-call__label{color:var(--cc-red)}
.cc-call--ink .cc-call__number{color:var(--cc-midnight)}
.cc-call--ink:hover .cc-call__number,
.cc-call--ink:focus-visible .cc-call__number{color:var(--cc-red)}
.cc-call--ink:focus-visible{outline-color:var(--cc-red)}

/* Sits directly under a card's action button, inside the same column. */
.cc-call--card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
  margin-top:14px;
  padding-top:13px;
  /* Neutral rule reads correctly on both light and dark cards. */
  border-top:1px solid rgba(128,128,128,.32);
  text-align:center;
  box-sizing:border-box;
  /* Take the card's text colour, not the theme's link colour, so the number
     below can inherit a value that actually contrasts with the card. */
  color:inherit;
}
.cc-call--card .cc-call__label{
  font-size:10px;
  letter-spacing:.8px;
}
/* The number inherits the card's own text colour, so it stays legible on a
   white card (#1A1A1A) and on a dark featured card (#FFFFFF) with no
   per-card overrides. */
.cc-call--card .cc-call__number{
  font-size:20px;
  line-height:1.25;
  color:inherit;
}
.cc-call--card:hover .cc-call__number,
.cc-call--card:focus-visible .cc-call__number{color:var(--cc-red)}

/* Dark featured cards: Signal Red on #1A1A1A is only 3.63:1, so the label
   switches to Coral Flare (5.24:1). */
[style*="color:#ffffff"] .cc-call--card .cc-call__label,
[style*="color: #ffffff"] .cc-call--card .cc-call__label,
[style*="color:#fff;"] .cc-call--card .cc-call__label,
[style*="background:#1a1a1a"] .cc-call--card .cc-call__label,
[style*="background:#071b38"] .cc-call--card .cc-call__label{
  color:var(--cc-coral);
}
[style*="color:#ffffff"] .cc-call--card .cc-call__number,
[style*="color: #ffffff"] .cc-call--card .cc-call__number,
[style*="color:#fff;"] .cc-call--card .cc-call__number,
[style*="background:#1a1a1a"] .cc-call--card .cc-call__number,
[style*="background:#071b38"] .cc-call--card .cc-call__number{
  color:#fff!important;
}
[style*="color:#ffffff"] .cc-call--card:hover .cc-call__number,
[style*="background:#1a1a1a"] .cc-call--card:hover .cc-call__number{color:var(--cc-coral)!important}
/* Cards keep their actions stacked at the foot of the column. */



/* ------------------------------------------------ end-of-post lead CTA ----*/
.cc-endcta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(20px,3vw,40px);
  margin:clamp(36px,4.5vw,56px) 0;
  padding:clamp(26px,3.4vw,40px);
  border-radius:var(--cc-c-radius);
  background:var(--cc-grad-dark);
  color:#fff;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}
.cc-endcta::after{
  content:"";
  position:absolute;
  inset:auto -60px -80px auto;
  width:320px;height:260px;
  background:radial-gradient(ellipse at center,rgba(227,21,7,.20),transparent 70%);
  pointer-events:none;
}





@media(max-width:820px){
  .cc-endcta{grid-template-columns:minmax(0,1fr)}
  
  
  
}

/* -------------------------------------------------------------- pricing ---*/











/* ----------------------------------------------------------- standalone ---*/
.cc-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:clamp(32px,4vw,48px) 0;
  padding:clamp(22px,3vw,34px);
  border-radius:var(--cc-c-radius);
  border-left:5px solid var(--cc-red);
  background:var(--cc-midnight);
  color:#fff;
  box-sizing:border-box;
}

.cc-cta p{
  margin:0;
  font-family:var(--cc-font-body);
  font-size:17px;
  line-height:1.5;
  color:rgba(255,255,255,.85);
  max-width:60ch;
}

/* ------------------------------------------------------------ responsive --*/
@media(max-width:900px){
  .cc-table th,.cc-table td{padding:12px 13px}
  .cc-table{font-size:15px}
}

@media(max-width:760px){
  /* Tabs appear only once JS has wired them up. */
  /* One full-width choice per row: long column labels stay readable. */
  
  
  /* Hide every tabbed column except the active one and any highlight column. */
  

  .cc-table{font-size:15px;line-height:1.5}
  .cc-table th,.cc-table td{padding:12px}
  .cc-table thead th{font-size:14px}
  /* Names may wrap between words on small screens, but never mid-word. */
  .cc-table .cc-col-name{
    white-space:normal;
    overflow-wrap:normal;
    word-break:keep-all;
    width:auto;
  }

  .cc-table-cta{flex-direction:column;align-items:flex-start}
  /* Stacked: the copy block must size to its text, not to its 300px row basis. */
  .cc-table-cta__copy{flex:0 0 auto;width:100%}
  .cc-table-cta .cc-actions{width:100%}
  .cc-table-cta .cc-btn{width:100%}
  .cc-cta{flex-direction:column;align-items:flex-start}
  .cc-cta .cc-btn{width:100%}
  
}

@media(max-width:480px){
  
  .cc-table{font-size:14px}
  .cc-table th,.cc-table td{padding:11px 10px}
}

@media(prefers-reduced-motion:reduce){
  .cc-btn,.cc-table-tabs button{transition:none}
  .cc-btn:hover{transform:none}
}

/* ===========================================================================
   LEGACY FALLBACKS
   Hand-built blocks that still live inside post content. These rules give them
   brand typography and safe layout so that when inline font-sizes are removed
   nothing is left unstyled. Attribute selectors are used deliberately: they
   brand the old markup without rewriting a single article.
   ========================================================================= */

/* Old horizontal-scroll wrappers are neutralised — components never scroll. */
.cc-block [style*="overflow-x"],
.entry-content > [style*="overflow-x:auto"],
.entry-content > [style*="overflow-x: auto"]{
  overflow-x:visible!important;
  overflow:visible!important;
}

/* Hand-built card/pricing grids: reflow instead of overflowing, brand type. */

.entry-content [style*="grid-template-columns"] > *,
.cc-prose-inner [style*="grid-template-columns"] > *,
#packages [style*="grid-template-columns"] > *{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box;
}

/* Legacy blog CTA: brand surface, brand type, real touch targets. */
.cc-blog-cost-cta{
  border-radius:var(--cc-c-radius);
  padding:clamp(22px,3vw,34px)!important;
  box-sizing:border-box;
}
.cc-blog-cost-cta h2,.cc-blog-cost-cta h3,.cc-blog-cost-cta h4{
  font-family:var(--cc-font-head);
  font-weight:700;
  line-height:1.25;
  color:#fff;
}
.cc-blog-cost-cta p,.cc-blog-cost-cta li{
  font-family:var(--cc-font-body);
  font-size:17px;
  line-height:1.5;
}
.cc-blog-cost-cta a:not(.cc-btn){
  color:var(--cc-coral);
  font-weight:700;
}

/* ---------------------------------------------------------------- footer --
   The footer contact rows are Ccl icon boxes whose titles are <h3>.
   Once per-widget sizes were removed they inherited the heading scale, so the
   address rendered at 35px. These rules give the column its own proper scale.
   ------------------------------------------------------------------------ */





/* The local number stays the most prominent line in the block. */





/* Toll-free block sitting under the local number, on the dark footer. */
.cc-call--footer{
  align-items:flex-start;
  width:100%;
  margin:14px 0 4px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.18);
  text-align:left;
}
.cc-call--footer .cc-call__label{font-size:10px;letter-spacing:.8px;color:var(--cc-coral)}
.cc-call--footer .cc-call__number{font-size:21px;line-height:1.25;color:#fff}
.cc-call--footer:hover .cc-call__number{color:var(--cc-coral)}

/* Compact button variant for tight columns like the footer. */
.cc-btn--sm{
  min-height:42px;
  padding:10px 18px;
  font-size:14px;
  border-radius:9px;
}
.cc-footer-cta{margin:16px 0 4px}

@media(max-width:767px){
  
  .cc-call--footer{align-items:flex-start}
}

/* Any anchor styled as a button inline keeps a real target once sizes go. */
.entry-content a[style*="background"],
.cc-prose-inner a[style*="background"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 22px;
  border-radius:10px;
  font-family:var(--cc-font-body);
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  box-sizing:border-box;
  max-width:100%;
  white-space:normal;
}

/* Big numeric callouts (prices, stats) keep presence without inline sizes. */
.entry-content [class*="price"] strong,
.cc-prose-inner [class*="price"] strong,
#packages [style*="font-weight"] + span,
.cc-stat-value{
  font-family:var(--cc-font-head);
  font-weight:700;
  font-size:clamp(30px,3.4vw,40px);
  line-height:1.15;
  color:var(--cc-midnight);
  overflow-wrap:anywhere;
}

/* Nothing inside article content may exceed its column. */

.entry-content pre,.cc-prose-inner pre{max-width:100%;overflow-x:auto}

/* ============================================================ breadcrumb ==
   One breadcrumb standard site-wide (inc/cc-breadcrumbs.php). Hero variant
   sits inside a page's hero; header variant sits inside the header shell,
   directly under the navigation container, same width and same background.
   ========================================================================= */
.cc-svc-crumbs{margin:0;font-family:var(--cc-font-body);font-size:14px;line-height:1.5;min-width:0}
.cc-svc-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0}
.cc-svc-crumbs li{display:inline-flex;align-items:center;min-width:0;color:rgba(255,255,255,.78)}
.cc-svc-crumbs li+li::before{content:"/";padding-inline:8px;opacity:.55}
.cc-svc-crumbs a{color:#fff;text-decoration:none;font-weight:400}
.cc-svc-crumbs a:hover,.cc-svc-crumbs a:focus-visible{color:var(--cc-coral);text-decoration:none}
.cc-svc-crumbs [aria-current]{color:#fff;font-weight:500;overflow-wrap:anywhere}
/* 1 Nov 2026 (Amir): where the header band fades into the light page (posts, CC Zone, categories: the seam script marks the band cc-seam-host and the fade shows once html.cc-bgf-js is set), the trail is dark midnight so it never reads white on white; header bands over a dark hero carry no fade and keep the white trail */
html.cc-bgf-js .cc-site-header__band.cc-seam-host .cc-svc-crumbs li{color:rgba(7,27,56,.72)}
html.cc-bgf-js .cc-site-header__band.cc-seam-host .cc-svc-crumbs :is(a,[aria-current]){color:var(--cc-midnight,#071B38)}
html.cc-bgf-js .cc-site-header__band.cc-seam-host .cc-svc-crumbs a:is(:hover,:focus-visible){color:var(--cc-coral)}
/* Ccl Pro breadcrumbs widget wrapper (fed by the yoast_breadcrumb shim). */

/* Header placement: sits right under the navigation container, same width,
   no box of its own, minimal height so the header does not grow. */



/* Toll-free line beside the local number in the header top bar. */







@media(max-width:767px){
  .cc-svc-crumbs{font-size:12px}
  .cc-svc-crumbs li+li::before{padding-inline:6px}
  
  
  
}