/*header.css*//* Site header (templates/parts/header-main.html, header-home.html, header-search.html). Printed inline in by inc/cc-template-css.php so the header never paints unstyled. Hand-written 17 Oct 2026 to replace the page-builder rules that styled the old header markup. */ /* Header and band ------------------------------------------------------------------ */ .cc-site-header{position:relative;z-index:1000;isolation:isolate;overflow:visible;width:100%;max-width:none} .cc-site-header__band{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;width:100%;padding-inline:var(--cc-content-gutter);box-sizing:border-box;color:#fff;background-color:#071B38} .cc-site-header__inner{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:var(--cc-content-max);margin-inline:auto;box-sizing:border-box;min-width:0} /* Inner pages: the nebula band (variables come from the Customizer layers and ccNebSync in the header template) */ .cc-site-header--inner .cc-site-header__band{background-image:var(--cc-l1),var(--cc-l2),var(--cc-l3),var(--cc-neb);background-size:100% 100%,100% var(--cc-nb-t),100% var(--cc-nb-t),max(100%,calc(var(--cc-nb-t) * 1.5)) auto;background-position:0 0,0 0,0 0,center top;background-repeat:no-repeat;background-attachment:scroll} .cc-site-header--inner .cc-site-header__inner{padding-bottom:5px} /* Top bar: social links, local number, toll-free line, WhatsApp ------------------- */ .cc-site-header__meta{position:relative;z-index:2;display:flex;align-items:center;flex-wrap:nowrap;width:100%;min-height:32px;margin-bottom:1px;padding:14px 0 12px;box-sizing:border-box} .cc-site-header__social{display:flex;align-items:center;gap:16px;margin:0 auto 0 0;padding:0;list-style:none} .cc-site-header .cc-site-header__social>li{display:flex;margin:0;padding:0;line-height:1} .cc-site-header .cc-site-header__social-link{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;color:#fff;opacity:.92;text-decoration:none} .cc-site-header__social-link svg{display:block;width:22px;height:22px} .cc-site-header__social-link svg:not(.cc-soc-icon){fill:#fff} .cc-site-header__phone{line-height:1;white-space:nowrap} .cc-site-header__phone a{display:inline-block;padding:0;margin:0;min-height:0;font:600 14px/1 "DM Sans",sans-serif;color:#fff;white-space:nowrap;text-decoration:none;cursor:pointer} .cc-site-header__phone .cc-hdr-city{font-weight:400;opacity:.8} .cc-site-header .cc-hdr-tollfree{display:flex;align-items:center;gap:0;min-height:24px;margin:0 0 0 22px;padding:8px 0;color:#fff;font-family:var(--cc-font-body);font-size:14px;line-height:1.3;text-align:right;white-space:nowrap;text-decoration:none} .cc-site-header .cc-hdr-tollfree__label{display:inline;margin:0 4px 0 0;font:400 14px/1.2 "DM Sans",sans-serif;opacity:.8} .cc-site-header .cc-hdr-tollfree__number{margin:0;font:600 14px/1 "DM Sans",sans-serif;color:#fff;white-space:nowrap} .cc-site-header .cc-hdr-tollfree:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px} .cc-site-header .cc-hdr-wa{display:inline-flex;align-items:center;gap:6px;margin:0 0 0 22px;color:#fff;font:600 14px/1.2 "DM Sans",sans-serif;white-space:nowrap;text-decoration:none} .cc-site-header .cc-hdr-wa svg{flex:none;color:#25D366} .cc-site-header__meta a:hover,.cc-site-header__meta a:hover span{color:#FF4B3A;text-shadow:none} .cc-site-header .cc-site-header__social-link:hover{opacity:1} @media (max-width:1024px){ .cc-site-header__meta{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 0 8px} .cc-site-header__social{grid-column:1;grid-row:1/span 3;justify-self:start;gap:12px;margin:0} .cc-site-header .cc-site-header__social-link,.cc-site-header__social-link svg{width:18px;height:18px} .cc-site-header__phone{grid-column:2;grid-row:2;justify-self:end} .cc-site-header__phone a{font-size:12.5px} .cc-site-header .cc-hdr-tollfree__label{justify-self:end;} .cc-site-header .cc-hdr-tollfree__number{justify-self:end;} .cc-site-header .cc-hdr-wa{display:none} } @media (max-width:767px){ .cc-site-header__meta{grid-template-columns:minmax(0,1fr) auto;column-gap:8px} .cc-site-header__social{flex-wrap:wrap;gap:10px;min-width:0} .cc-site-header .cc-site-header__social-link{width:24px;height:24px} .cc-site-header .cc-hdr-tollfree{font-size:12px;white-space:normal} .cc-site-header .cc-hdr-tollfree__label{max-width:164px;white-space:normal} } /* Navigation row: logo, mega menu, service search ---------------------------------- */ .cc-site-header__nav{position:relative;z-index:20;isolation:isolate;display:flex;align-items:center;gap:20px;width:100%;min-height:80px;padding:10px 0;box-sizing:border-box;overflow:visible} .cc-site-header__brand{flex:1 0 auto;min-width:0} .cc-site-header__brand a{display:inline-block} .cc-site-header__brand img{display:inline-block;vertical-align:middle;border-radius:0} .cc-site-header__nav>.ccs{flex:0 0 auto} /* the mega menu block (still page-builder markup until templates/parts/mega-menu.html is converted) shares the free row space with the logo */ .cc-site-header__nav>.cc-primary-menu{flex-grow:1;min-width:0;max-width:100%;margin-block-end:0} @media (max-width:1024px){ .cc-site-header__nav{min-height:72px} .cc-site-header__brand img{width:148px;max-width:none;height:auto} } @media (max-width:767px){ .cc-site-header__nav{justify-content:space-between;gap:0;padding:0} } /* Breadcrumb under the navigation (inserted by inc/cc-header-inject.php) */ .cc-site-header .cc-svc-crumbs--header{width:100%;max-width:1320px;margin:0 auto;padding:2px 0 8px;line-height:1.3;box-sizing:border-box} .cc-site-header .cc-svc-crumbs--header ol{padding-inline:4px} @media (max-width:767px){.cc-site-header .cc-svc-crumbs--header{padding:0 0 6px}} /* Breadcrumb trail (18 Oct 2026): one line at every width, one type size for links and the current page, separators never wrap alone; long names end in an ellipsis (the full name stays in the markup, title and schema). */ body[class] .cc-site-header nav.cc-svc-crumbs a{font-size:inherit!important;font-weight:400!important;line-height:inherit!important;letter-spacing:0!important} .cc-site-header .cc-svc-crumbs--header ol{flex-wrap:nowrap;white-space:nowrap;overflow:hidden} .cc-site-header .cc-svc-crumbs--header li{display:flex;align-items:center;flex:0 1 auto;min-width:0;white-space:nowrap} .cc-site-header .cc-svc-crumbs--header li+li::before{flex:none} .cc-site-header .cc-svc-crumbs--header .cc-crumb-t{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cc-site-header .cc-svc-crumbs--header li:not([aria-current]){flex:0 0 auto;max-width:40%} .cc-site-header .cc-svc-crumbs--header li[aria-current]{flex:1 1 auto;overflow-wrap:normal} @media (max-width:767px){.cc-site-header .cc-svc-crumbs--header li:not([aria-current]){max-width:34%}} @media (max-width:1024px){.cc-site-header--inner .cc-site-header__inner{padding-bottom:0}} @media (max-width:767px){.cc-site-header--inner .cc-site-header__inner{padding-block:25px}} /* Phone canvas: the nebula covers band + page hero (variables from mu-plugin cc-hero-mobile-canvas) */ @media (max-width:767px){ .cc-site-header--inner .cc-site-header__band{background-size:100% 100%,100% var(--ccm-canvas),100% var(--ccm-canvas),auto var(--ccm-canvas2);background-position:0 0,0 0,0 0,50% calc(-1 * var(--ccm-shift))} } /* Mega menu toggle height on tablets and phones (kept from the old header style block; the mega menu itself is converted later) */ @media (max-width:1024px){.cc-primary-menu .cc-mm__toggle{box-sizing:border-box!important;height:40px!important;min-height:40px!important;max-height:40px!important}} /* Service search (templates/parts/header-search.html) ---------------------------- */ .ccs{position:relative;display:flex;align-items:center} .ccs .ccs-btn,.ccs-ov .ccs-x{display:grid;place-items:center;width:40px;height:40px;min-width:0;padding:0;box-sizing:border-box;background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;box-shadow:none;cursor:pointer;transition:border-color .15s,background .15s} .ccs .ccs-btn:hover,.ccs .ccs-btn[aria-expanded=true],.ccs-ov .ccs-x:hover{background:#E31507;border-color:#E31507} .ccs-btn svg{width:18px;height:18px} .ccs-ov{position:fixed;inset:0;z-index:99999;background:rgba(7,27,56,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;flex-direction:column;padding:24px 16px} .ccs-ov.show{display:flex} .ccs-in{width:100%;max-width:760px;margin:0 auto} .ccs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px} .ccs-ey{font:600 15px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:.7} .ccs-f{display:flex;align-items:center;gap:12px;border-bottom:2px solid #fff;padding:6px 0} .ccs-f svg{flex:none;width:22px;height:22px;color:#fff} .ccs-q{flex:1;min-width:0;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;color:#fff!important;font:600 22px Inter,sans-serif!important;padding:6px 0!important;height:auto!important} .ccs-q::placeholder{color:rgba(255,255,255,.5)} .ccs-hint{margin:14px 0 8px;font:600 15px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6)} .ccs-r{list-style:none;margin:0;padding:0;max-height:calc(100vh - 230px);overflow-y:auto} .ccs-r a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 12px;color:#fff;text-decoration:none;font:500 17px "DM Sans",sans-serif;border-bottom:1px solid rgba(255,255,255,.12)} .ccs-r a:after{content:"\2192";color:#E31507} .ccs-r a:hover,.ccs-r a.on{background:rgba(255,255,255,.08)} .ccs-r mark{background:none;color:#E31507} .ccs-none{color:rgba(255,255,255,.75);padding:14px 12px;font-size:15px} .ccs-none a{color:#fff} @media (min-width:1025px){ .ccs .ccs-btn{border-color:transparent} .ccs .ccs-btn:hover,.ccs .ccs-btn[aria-expanded=true]{background:transparent;border-color:#E31507} .ccs-ov{position:absolute;inset:auto;top:50%;right:100%;transform:translateY(-50%);width:440px;padding:0;margin-right:8px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .ccs-top{display:none} .ccs-f{background:#fff;border:0;padding:0 14px;height:44px} .ccs-f svg{color:#071B38;width:18px;height:18px} .ccs-q{color:#071B38!important;font:500 15px "DM Sans",sans-serif!important} .ccs-q::placeholder{color:#8793A3} .ccs-hint{display:none} .ccs-r{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:2px solid #E31507;box-shadow:0 30px 60px -20px rgba(7,27,56,.5);max-height:420px} .ccs-r:empty{display:none} .ccs-r a{color:#071B38;font-size:15px;padding:11px 14px;border-bottom:1px solid #E3E8EF} .ccs-r a:hover,.ccs-r a.on{background:#F5F7FA} .ccs-none{color:#55657B;background:#fff} .ccs-none a{color:#E31507} } /* 25 Oct 2026 (Amir): on tablet and phone widths the top-right block reads Toronto and its number first, then Toll-free and its number on one line, as on desktop. */ @media (max-width:1024px){ .cc-site-header .cc-site-header__phone{grid-column:2;grid-row:1;justify-self:end} .cc-site-header .cc-hdr-tollfree{display:flex;grid-column:2;grid-row:2;justify-self:end;align-items:center;gap:4px;margin:0;padding:0;min-height:0;font-size:13px;white-space:nowrap} .cc-site-header .cc-hdr-tollfree__label{grid-column:auto;grid-row:auto;display:inline;margin:0;max-width:none;font:400 12.5px/1.2 "DM Sans",sans-serif;letter-spacing:0;text-transform:none;opacity:.8;white-space:nowrap} .cc-site-header .cc-hdr-tollfree__number{grid-column:auto;grid-row:auto;font-size:12.5px} } /* 25 Oct 2026 (Amir): the Toll-free label stays visible on phones too, beside its number. */ @media (max-width:767px){html body .cc-site-header .cc-hdr-tollfree .cc-hdr-tollfree__label{display:inline!important}} /*mega-menu.css*//* Mega menu (templates/parts/mega-menu.html). Moved out of the part's inline style block 17 Oct 2026 and renamed to the cc-mm BEM classes. Printed inline in after header.css by inc/cc-template-css.php. */ @media (max-width:1024px){.cc-primary-menu .cc-mm__item .cc-mm__title button.cc-mm__drop{flex-direction:row!important;justify-content:flex-end!important;align-items:center!important}.cc-primary-menu .cc-mm__item .cc-mm__title button.cc-mm__drop>span{margin:0!important;position:static!important;transform:none!important}}@media (max-width:1024px){.ccmm .ccmm-m .mr{position:relative}.ccmm .ccmm-m .mr>a,.ccmm .ccmm-m .mr>span{padding-right:44px!important}.ccmm .ccmm-m .mr button{position:absolute!important;top:0;right:0;bottom:0;height:100%!important;background:transparent!important}.cc-primary-menu .cc-mm__item .cc-mm__title .cc-mm__drop,.cc-primary-menu .cc-mm__item .cc-mm__title .cc-mm__drop[aria-expanded=true]{background:transparent!important;align-items:center!important}.cc-primary-menu .cc-mm__drop>span{display:flex;align-items:center}}@media (max-width:1024px){.cc-primary-menu .cc-mm__item .cc-mm__title .cc-mm__link{padding:0 16px!important}.cc-primary-menu .cc-mm__item .cc-mm__title .cc-mm__drop{height:auto!important;min-height:54px;align-self:stretch!important;width:156px!important;flex:none!important;justify-content:flex-end!important;padding:0 21px 0 0!important;border-left:0!important;-webkit-tap-highlight-color:transparent}}@media (max-width:1024px){.cc-primary-menu .cc-mm__link{flex-direction:row!important;align-items:center!important;gap:12px;}.cc-primary-menu .cc-mm__link::before{content:"";width:20px;height:20px;flex:none;background:#3a5097;-webkit-mask:var(--cci) center/contain no-repeat;mask:var(--cci) center/contain no-repeat}.cc-primary-menu .cc-mm__item:last-child .cc-mm__link::before{background:#fff}.cc-primary-menu .cc-mm__item:nth-child(1){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 21V5h10v16M14 9h6v12M2 21h20M7 9h2M7 13h2M7 17h2M17 13h1M17 17h1'/%3E%3C/svg%3E")}.cc-primary-menu .cc-mm__item:nth-child(2){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 4.5a3.5 3.5 0 0 1 0 7M18 14c2.2.6 3.5 2.8 3.5 6'/%3E%3C/svg%3E")}.cc-primary-menu .cc-mm__item:nth-child(3){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E")}.cc-primary-menu .cc-mm__item:nth-child(4){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='7' width='18' height='13'/%3E%3Cpath d='M8 7V4h8v3M3 12h18'/%3E%3C/svg%3E")}.cc-primary-menu .cc-mm__item:nth-child(5){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='4' width='18' height='16'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.5'/%3E%3C/svg%3E")}.cc-primary-menu .cc-mm__item:nth-child(6){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h14v18H5zM8 7h8M8 11h8M8 15h5'/%3E%3C/svg%3E")}.cc-primary-menu .cc-mm__item:nth-child(7){--cci:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A17 17 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E")}}@media (min-width:1025px){.cc-primary-menu .cc-mm__title.is-current .cc-mm__text,.cc-primary-menu .cc-mm__title.is-current .cc-mm__link{color:#fff!important}}@media (max-width:1024px){.cc-primary-menu .cc-mm__link{align-self:stretch!important;min-height:54px}.cc-primary-menu .cc-mm__text{margin:0!important;justify-content:flex-start!important;text-align:left!important}.cc-primary-menu .cc-mm__title.is-current .cc-mm__text{color:#E31507!important}.cc-primary-menu .cc-mm__item:last-child .cc-mm__title .cc-mm__text,.cc-primary-menu .cc-mm__item:last-child .cc-mm__title .cc-mm__link{color:#fff!important}.cc-primary-menu .cc-mm__item:last-child .cc-mm__link{min-height:48px}}@media (max-width:1024px){.cc-primary-menu .cc-mm__toggle{border-radius:0!important;border:1px solid rgba(255,255,255,.5)!important;background:transparent!important;width:auto!important;height:40px!important;padding:0 14px!important;display:inline-flex!important;align-items:center;justify-content:center;color:#fff!important;transition:background .15s,border-color .15s}.cc-primary-menu .cc-mm__toggle:hover,.cc-primary-menu .cc-mm__toggle[aria-expanded=true]{background:#E31507!important;border-color:#E31507!important}.cc-primary-menu .cc-mm__toggle-icon svg{display:none!important}.cc-primary-menu .cc-mm__toggle[aria-expanded=false] .cc-mm__toggle-icon.cc-mm__toggle-open,.cc-primary-menu .cc-mm__toggle[aria-expanded=true] .cc-mm__toggle-icon.cc-mm__toggle-close{display:inline-flex!important;align-items:center;gap:10px;width:auto!important;height:auto!important}.cc-primary-menu .cc-mm__toggle-icon::before{content:"";display:block;width:18px;height:12px;background:linear-gradient(#fff 0 0) 0 0/100% 2px no-repeat,linear-gradient(#fff 0 0) 0 5px/100% 2px no-repeat,linear-gradient(#fff 0 0) 0 10px/100% 2px no-repeat}.cc-primary-menu .cc-mm__toggle-icon.cc-mm__toggle-close::before{width:14px;height:14px;background:linear-gradient(45deg,transparent 44%,#fff 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#fff 44% 56%,transparent 56%)}.cc-primary-menu .cc-mm__toggle-icon::after{content:"Menu";font:600 12px/1 Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#fff}.cc-primary-menu .cc-mm__toggle-icon.cc-mm__toggle-close::after{content:"Close"}.cc-primary-menu .cc-mm__wrapper{background:#fff!important;border-top:2px solid #E31507;box-shadow:0 30px 60px -20px rgba(7,27,56,.45);max-height:calc(100vh - 140px);overflow-y:auto}.cc-primary-menu .cc-mm__list{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important}.cc-primary-menu .cc-mm__item{width:100%;border-bottom:1px solid #E3E8EF}.cc-primary-menu .cc-mm__title{display:flex!important;justify-content:space-between!important;align-items:stretch!important;padding:0!important;margin:0!important;background:#fff!important;border:0!important;border-radius:0!important;min-height:54px}.cc-primary-menu .cc-mm__title:hover{background:#F5F7FA!important}.cc-primary-menu .cc-mm__link{flex:1;display:flex!important;justify-content:flex-start!important;padding:0 20px!important;font:600 16px "DM Sans",sans-serif!important;color:#071B38!important;text-align:left}.cc-primary-menu .cc-mm__text{font:inherit!important;color:inherit!important}.cc-primary-menu .cc-mm__title.is-current .cc-mm__link{color:#E31507!important;box-shadow:inset 3px 0 0 #E31507}.cc-primary-menu .cc-mm__drop{width:54px!important;align-self:stretch;display:flex!important;align-items:center;justify-content:center;border:0!important;border-left:1px solid #E3E8EF!important;border-radius:0!important;background:transparent!important;color:#071B38!important;padding:0!important}.cc-primary-menu .cc-mm__drop svg{fill:currentColor!important;width:12px!important;height:12px!important}.cc-primary-menu .cc-mm__drop[aria-expanded=true]{color:#E31507!important;background:#F5F7FA!important}.cc-primary-menu .cc-mm__item:last-child{border-bottom:0;padding:16px}.cc-primary-menu .cc-mm__item:last-child .cc-mm__title{background:#E31507!important;border-radius:8px!important;min-height:48px}.cc-primary-menu .cc-mm__item:last-child .cc-mm__title:hover{background:#C41206!important}.cc-primary-menu .cc-mm__item:last-child .cc-mm__link{justify-content:center!important;color:#fff!important;box-shadow:none!important}}.ccmm{--n:#071B38;--r:#E31507;--l:#F5F7FA;--ln:#E3E8EF;--m:#55657B;color:var(--n);font-family:"DM Sans",sans-serif;width:100%;text-align:left}.ccmm *{box-sizing:border-box}.ccmm p{margin:0}.ccmm .soon{display:none;font:600 9.5px Inter,sans-serif;letter-spacing:.8px;text-transform:uppercase;font-style:normal;color:var(--m);border:1px solid var(--ln);padding:1px 5px;margin-left:6px;white-space:nowrap}.ccmm-d{display:grid;grid-template-columns:300px 1fr 300px;max-width:1320px;margin:0 auto;padding:0 32px;min-height:520px}.ccmm-m{display:none}.ccmm .pns[aria-busy=true],.ccmm .ft[aria-busy=true]{opacity:.55}.ccmm .rl{border-right:1px solid var(--ln);padding:18px 0;display:flex;flex-direction:column}.ccmm .ey{font:600 15px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--m);padding:0 16px 10px}.ccmm .rl ul{list-style:none;margin:0;padding:0}.ccmm .ri{display:flex;align-items:center;gap:10px;padding:8px 16px;font:500 14.5px "DM Sans",sans-serif;color:var(--n);text-decoration:none;white-space:nowrap;cursor:pointer}.ccmm .ri .ic{width:20px;height:20px;flex:none}.ccmm .ri::after{content:"";margin-left:auto;flex:none;width:8px;height:10px;background:#A9B3C1;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M2 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}.ccmm .ri.on{color:var(--r)}.ccmm .ri:focus-visible,.ccmm .it:focus-visible{outline:2px solid var(--r);outline-offset:-2px}.ccmm .all{margin-top:auto;padding:12px 16px 0;font:600 14px "DM Sans",sans-serif;color:var(--n);text-decoration:none}.ccmm .all:hover{color:var(--r)}.ccmm .pns{padding:22px 28px}.ccmm .ph{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;padding-bottom:14px;border-bottom:1px solid var(--ln);margin-bottom:10px}.ccmm .ph .h{font:700 20px Inter,sans-serif;color:var(--n);margin-bottom:4px}.ccmm .ph .s{color:var(--m);font-size:14px}.ccmm .ex{white-space:nowrap;font:600 14px "DM Sans",sans-serif;color:var(--r);text-decoration:none}.ccmm .pg{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}.ccmm .it{display:block;padding:11px 12px;text-decoration:none;color:var(--n);outline:1px solid transparent;outline-offset:-1px;transition:background .12s,outline-color .12s}.ccmm a.it:hover{outline-color:var(--r)}html body:not(#mmx) .ccmm a.it{font:600 15px "DM Sans",sans-serif!important}.ccmm .it span{display:block;font-weight:500;font-size:13px;color:var(--m);margin-top:2px;line-height:1.35}.ccmm .solo{padding:10px 12px;color:var(--m);font-size:14px}.ccmm .ft{padding:22px 0 22px 24px;border-left:1px solid var(--ln)}.ccmm .cd{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px;color:#fff;background:linear-gradient(180deg,rgba(7,27,56,.35),rgba(7,27,56,.95)),#071B38 url(https://canadacreate.com/wp-content/uploads/2023/04/why-choose-canada-create-toronto-marketing-agency-background.webp) center/cover}.ccmm .cd .k{font:600 15px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;opacity:.8}.ccmm .cd .h{font:700 20px/1.2 Inter,sans-serif}.ccmm .cd .s{font-size:14px;opacity:.85}.ccmm .bt{background:var(--r);color:#fff;text-decoration:none;font:600 14px Inter,sans-serif;padding:11px 18px;text-align:center}.ccmm .bt:hover{background:#c41206;color:#fff}.ccmm .tf{color:#fff;text-decoration:none;font-size:13.5px}@media (max-width:1024px){.ccmm-d{display:none}.ccmm-m{display:block;background:var(--l)}.ccmm .mr{display:flex;align-items:stretch;border-top:1px solid var(--ln)}.ccmm .mr>a,.ccmm .mr>span{flex:1;display:flex;align-items:center;gap:12px;min-height:50px;padding:0 0 0 16px;color:var(--n);text-decoration:none;font:500 15px "DM Sans",sans-serif}.ccmm .mr>span{color:var(--n)}.ccmm .mr .ic{width:20px;height:20px;flex:none}.ccmm .mr>a,.ccmm .mr>span{min-width:0;line-height:1.25}.ccmm .mr button{width:156px!important;flex:none;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--n)!important;padding:0 20px 0 0!important;display:flex!important;align-items:center;justify-content:flex-end;cursor:pointer;-webkit-tap-highlight-color:transparent}.ccmm .mr button[aria-expanded=true]{color:var(--r)}.ccmm .mr button[aria-expanded=true] svg{transform:rotate(180deg)}.ccmm .mk{padding:2px 16px 10px 48px;background:#fff}.ccmm .mk a,.ccmm .mk span{display:flex;align-items:center;min-height:44px;color:var(--n);text-decoration:none;font-size:15px;border-bottom:1px solid var(--ln)}.ccmm .mk span{color:var(--n)}.ccmm .mc{padding:16px;display:grid;gap:10px}.ccmm .mc .tf{color:var(--n);text-align:center;padding:12px;border:1px solid var(--ln);background:#fff}} /* resets the page builder applied through its .ccl wrapper */ .cc-primary-menu,.cc-primary-menu *,.cc-primary-menu ::before,.cc-primary-menu ::after{box-sizing:border-box} .cc-primary-menu a{box-shadow:none;text-decoration:none} .cc-primary-menu img{border:none;border-radius:0;box-shadow:none;height:auto;max-width:100%} /* dropdown panel: was a page-builder container (flex column, shown only while active) */ .cc-mm__panel{position:relative;display:none;flex-direction:column;justify-content:center;align-items:stretch;flex-wrap:nowrap;flex:0 1 auto;gap:0;background-color:#fff;transition:background .3s,border .3s,box-shadow .3s,transform .4s} .cc-mm__panel.is-active{display:flex} @media (max-width:767px){.cc-mm__panel{justify-content:space-between}} /* 25 Oct 2026 (Amir): the phone menu ends with the Live SEO Report button (the red last item); Contact is a plain item after CC Zone. The button item does not exist on desktop, where the mega menu panels carry the audit card. */ @media (min-width:1025px){.cc-primary-menu .cc-mm__item--cta{display:none!important}} /* cc-mm-trim (26 Oct 2026, Amir): panes carry no heading/subheading/Explore row; each pane holds only the highest-CPC items that fit with no scroll at 1366x768. Grouped panes are two balanced column wrappers (.gc); a group that continues into column 2 (.gb--c) has no heading and starts level with column 1's first item. Phone accordion: group heads (a.mg) are copied above their items, same order as desktop. */ .ccmm .pg--g .gc{display:flex;flex-direction:column;gap:18px;min-width:0} .ccmm .pg--g .gb--c{padding-top:33px} html body[class] .ccmm .mk a.mg{font:700 13px/1.3 "DM Sans",sans-serif!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:#55657B!important;min-height:40px!important;padding-top:10px!important} html body[class] .ccmm .mk a.mg:hover{color:#E31507!important} /* 26 Oct 2026 (Amir): mega menu text is black, no pink tint or box, red only on hover, never underlined. Keyboard focus ring stays for accessibility. */ html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .gt,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm a.gt,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .gt *,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .cd .k,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .cd .tf,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ey,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .cd .h,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .cd .s,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ph .h,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ph .s{color:#000!important} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm a.gt:hover,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .cd .tf:hover,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .cd a:hover{color:#E31507!important} html body .ccmm a.it:hover{background:transparent!important;outline:0!important} .ccmm .ri,.ccmm .ri.on,.ccmm .ri .rt,.ccmm .ri.on .rt,.ccmm .it,.ccmm a.gt,.ccmm .gt,.ccmm .all,.ccmm .k,.ccmm .tf,.ccmm a{color:#000!important;text-decoration:none!important} .ccmm .ri.on{background:transparent!important;font-weight:700} .ccmm .ri.on::after{background:#000!important} .ccmm a.it:hover,.ccmm .it:hover{background:transparent!important;outline-color:transparent!important} .ccmm .ri:hover,.ccmm .ri:hover .rt,.ccmm a.it:hover,.ccmm a.gt:hover,.ccmm .all:hover,.ccmm .tf:hover,.ccmm a:hover{color:#E31507!important;text-decoration:none!important;background:transparent!important} .ccmm .ri:hover::after{background:#E31507!important} .ccmm a.bt,.ccmm a.bt:hover{color:#fff!important} /* 26 Oct 2026 (Amir): phone accordion, same rule: black, no pink box, red only on hover. */ html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr[class*="on"],html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr[class*="open"],html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr[aria-expanded="true"]{background:transparent!important;border-color:#E3E8EF!important;box-shadow:none!important} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr a,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr a *,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mk a.mg,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mk .mg{color:#000!important;text-decoration:none!important} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr a .ic{color:#000!important} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr a:hover,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mr a:hover *,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .mk a.mg:hover{color:#E31507!important} /* 27 Oct 2026 (Amir): the active item in the left column (service or industry group) sits in a soft box; text and icon stay black, red only on hover. */ @media (min-width:1025px){html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ri.on{background:#EEF2F7!important;border-radius:8px!important;font-weight:700;box-shadow:inset 0 0 0 1px #E3E8EF} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ri.on .rt,html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ri.on svg{color:#000!important} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ri.on::after{background:#000!important} html body:not(#cc-lux):not(#mc1):not(#mc2):not(#mc3):not(#mcx) .ccmm .ri{border-radius:8px;margin:1px 8px 1px 0}} /*footer.css*//* Site footer (templates/parts/footer.html). Printed inline in by inc/cc-template-css.php on every page that renders the footer. Moved out of the footer template 17 Oct 2026 (was an inline style block inside a page-builder wrapper). 25 Oct 2026: the zero-corner override (radius 0 on everything inside .ccf) removed; the site-wide corner rules in cc-global.css (14 px boxes, 8 px buttons and badges) apply. */ .cc-site-footer{display:block;width:100%} .ccf{--ccf-red:#E31507;--ccf-navy:#071B38;--ccf-line:rgba(255,255,255,.12);--ccf-muted:rgba(255,255,255,.72);background:radial-gradient(1200px 820px at 100% 0%,rgba(255,255,255,.085),transparent 62%),linear-gradient(168deg,#0c2449 0%,#071B38 52%,#05152c 100%) #071B38;color:#fff;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;line-height:1.6;width:100%;box-sizing:border-box;position:relative;overflow:hidden} .ccf *,.ccf *::before,.ccf *::after{box-sizing:border-box} .ccf__in{max-width:1384px;margin:0 auto;padding:0 32px} .ccf a{color:inherit;text-decoration:none;transition:color .2s ease} .ccf a:focus-visible{outline:2px solid #fff;outline-offset:3px} .ccf__cta{position:relative;} .ccf__cta .ccf__in{display:grid;grid-template-columns:minmax(0,1fr) auto;} .ccf__eyebrow{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:#FF4B3A;margin:0 0 10px} body[class] .ccf .ccf__title{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:44px!important;line-height:1.12!important;letter-spacing:-.015em!important;color:#fff!important;margin:0 0 18px!important;text-transform:none!important} .ccf__lead{margin:0;color:rgba(255,255,255,.8);max-width:680px;font-size:18px}.ccf__lead a{color:#fff;}.ccf__lead a:hover{color:#FF4B3A} .ccf__act{display:flex;} .ccf .ccf__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;background:#E31507;color:#fff!important;font-family:'Inter',sans-serif;font-weight:700;font-size:16px;line-height:1.2;border:2px solid #E31507;white-space:nowrap;transition:background .2s ease,border-color .2s ease,transform .2s ease} .ccf .ccf__btn:hover{background:#c41105;border-color:#c41105;color:#fff!important;transform:translateY(-1px)} .ccf__btn svg{width:18px;height:18px;flex:0 0 auto} .ccf__call{display:flex;flex-direction:column;gap:2px;line-height:1.3} .ccf__call small{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--ccf-muted)} .ccf__call a{font-family:'Inter',sans-serif;font-weight:700;font-size:18px;color:#fff;white-space:nowrap} .ccf__call a span{font-weight:400;color:var(--ccf-muted);font-family:'DM Sans',sans-serif;font-size:14px;margin-right:6px} .ccf__call a:hover{color:#FF4B3A} .ccf__grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:48px 40px;align-items:start} .ccf__nav{min-width:0} .ccf__logo{display:inline-block;margin:0 0 20px} .ccf .ccf__logo img{display:block;width:190px;height:auto;max-width:100%;border-radius:0} /* the logo keeps square corners (the kit rounds every img 30px) */ .ccf__about{margin:0 0 22px;color:var(--ccf-muted);max-width:400px} .ccf__nap{font-style:normal;display:flex;flex-direction:column;gap:12px;margin:0 0 24px} .ccf__row{display:flex;gap:12px;align-items:flex-start;color:var(--ccf-muted)} .ccf__row svg{width:18px;height:18px;flex:0 0 auto;margin-top:3px;stroke:#FF4B3A;fill:none;stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter} .ccf__row a:hover{color:#fff} .ccf__phones{display:flex;flex-direction:column;gap:2px;line-height:1.35} .ccf__phones b{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:#fff;margin-bottom:2px} .ccf__phones a{color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:16px;white-space:nowrap} .ccf__phones a span{font-family:'DM Sans',sans-serif;font-weight:400;color:var(--ccf-muted);font-size:14px;margin-right:6px} .ccf__phones a:hover{color:#FF4B3A} @media(max-width:767px){.ccf__phones{gap:8px}.ccf__phones a{display:flex;align-items:center;min-height:44px;padding:4px 0}} .ccf__soc{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none} .ccf__soc a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;color:#fff;transition:color .2s ease,transform .2s ease} .ccf__soc a:hover{color:#FF4B3A;transform:translateY(-2px)} .ccf__soc svg{width:34px;height:34px;display:block}.ccf__soc svg:not([fill]),.ccf__soc svg [fill="#000"],.ccf__soc svg [fill="black"]{fill:currentColor} @media(max-width:400px){.ccf__soc{gap:2px}.ccf__soc a{width:38px;height:40px}.ccf__soc svg{width:31px;height:31px}} body[class] .ccf .ccf__h{font-family:'Inter',sans-serif!important;font-weight:700!important;font-size:15px!important;letter-spacing:.05em!important;text-transform:uppercase!important;line-height:1.3!important;color:#fff!important;margin:0 0 16px!important;padding:0 0 12px!important;border-bottom:1px solid var(--ccf-line)} /* Link columns (rebuilt 25 Oct 2026): anchor text = the target page's H1; is the H1's name clause, the rest of the H1 */ .ccf__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .ccf__list li{margin:0;padding:0} .ccf__list a{display:block;color:#fff;font-size:15px;line-height:1.4} .ccf__list a b{display:block;font-weight:500;color:inherit;text-wrap:balance} .ccf__list a span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--ccf-muted);text-wrap:pretty} .ccf__list a:hover{color:#FF4B3A} .ccf__more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#fff!important} .ccf__more svg{width:16px;height:16px;flex:0 0 auto;transition:transform .2s ease} .ccf__more:hover{color:#FF4B3A!important} .ccf__more:hover svg{transform:translateX(3px)} .ccf__bar{padding:22px 0} .ccf__bar .ccf__in{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap} .ccf__copy{margin:0;font-size:14px;line-height:1.7;color:var(--ccf-muted)} .ccf__copy span{display:block} .ccf__legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;font-size:14px} .ccf__legal a{color:var(--ccf-muted)} .ccf__legal a:hover{color:#fff} .ccf__bbb{display:block;line-height:0} .ccf__bbb img{display:block;height:44px;width:auto;max-width:100%} .ccf__dmca{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;margin:0;border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none;box-sizing:border-box;font:700 13px/1.1 Arial,sans-serif}.ccf__dmca svg{flex:none;color:#E31507}.ccf__dmca small{display:block;margin-top:2px;font-weight:400;font-size:11px;opacity:.8}.ccf__dmca:hover,.ccf__dmca:focus-visible{border-color:#fff} .ccf__end{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .ccf__badges{display:flex;align-items:center;gap:12px} @media (max-width:1024px){ .ccf__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px} .ccf__brand{grid-column:1 / -1} .ccf__about{max-width:620px} } @media (max-width:767px){ .ccf__in{padding:0 16px} .ccf__lead{font-size:16px} .ccf .ccf__btn{width:100%} .ccf__grid{grid-template-columns:minmax(0,1fr);gap:40px} .ccf__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--ccf-rows,6),auto);grid-auto-flow:column;gap:0 16px} .ccf__list a{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 0;font-size:14px;line-height:1.35} .ccf__list a span{display:none} .ccf__more{margin-top:12px;min-height:44px} .ccf__bar{padding:32px 0 28px} .ccf__bar .ccf__in{flex-direction:column-reverse;align-items:center;text-align:center;gap:24px} .ccf__end{flex-direction:column-reverse;align-items:center;gap:22px;width:100%} .ccf__legal{justify-content:center;gap:8px 28px} .ccf__badges{justify-content:center;flex-wrap:wrap} .ccf__copy{width:100%;padding-top:22px;border-top:1px solid var(--ccf-line);font-size:13px} } /* 26 Oct 2026 (Amir): phone numbers always sit under the button; the heading column never gets squeezed. */ @media (min-width:768px) and (max-width:1180px){body[class] .ccf .ccf__title{font-size:36px!important}} @media (max-width:767px){body[class] .ccf .ccf__title{font-size:30px!important}} /* 27 Oct 2026 (Amir: "fit my footer CTA in the actual footer", approved site-wide the same day): one-piece footer. The CTA is the footer's top row on the one navy background: no band padding, the stars fade out before the columns start, a calm 56 px spacer instead of a divider line. */ body .ccf__cta{padding:88px 0 0} body .ccf__cta>canvas.cc-stars{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 45%,transparent 100%)} body .ccf__cta .ccf__in{grid-template-columns:minmax(0,1fr) max-content;gap:32px 56px;align-items:end} body .ccf__act{flex-direction:column;align-items:flex-start;gap:16px;flex-wrap:nowrap} @media (min-width:768px) and (max-width:1180px){body .ccf__cta{padding-top:72px}body .ccf__cta .ccf__in{gap:28px 32px}} @media (max-width:767px){body .ccf__cta{padding:56px 0 0}body .ccf__cta .ccf__in{grid-template-columns:minmax(0,1fr);gap:24px}body .ccf__act{align-items:stretch}} /* 27 Oct 2026: 1025 to 1279 px the brand column is narrower than the eight social icons; the row wraps instead of running into Services. */ @media (min-width:1025px){.ccf__soc{flex-wrap:wrap;row-gap:6px}} /* Footer main area padding, every width: 20 px top and bottom (Amir, 29 Oct 2026) */ body .ccf__main{padding:20px 0} /* CC 2026-10-27: footer bar badges never shrink or clip (the Cookie Settings link widened the legal list); tighter gaps on wide screens, badges wrap under the links when the row is still too narrow */ @media (min-width:1200px){html body .ccf .ccf__badges>*{flex-shrink:0!important}html body .ccf .ccf__end{flex-wrap:wrap!important;justify-content:flex-end!important;gap:12px 16px!important}html body .ccf .ccf__legal{gap:6px 16px!important}html body .ccf .ccf__badges{gap:10px!important;justify-content:flex-end!important}} /*single-post.css*//* Blog post layout (templates/parts/single-post.html). Hand-written 17 Oct 2026; replaces the page-builder container, widget and variable rules. Printed inline in on single posts by inc/cc-template-css.php. */ .cc-single{display:block} /* 25 Oct 2026 (Amir): the post canvas is full width like a service band (white edge to edge, the header fade spans the viewport); the article and sidebar sit at the 1320 px inner width of the header, breadcrumb and service hero with the service gutters. 2 Nov 2026 (Amir): the columns carry no side padding, so the article starts and the sidebar ends exactly on the header/breadcrumb edge at every width (RTL mirrors); the 20 px column gap is the layout's column-gap */ .cc-single .cc-single__layout{position:relative;display:flex;flex-direction:row;column-gap:20px;width:100%;max-width:none;margin-inline:0;padding:64px max(var(--cc-content-gutter,32px),calc((100% - 1320px) / 2));box-sizing:border-box;background:#fff} .cc-single__main{display:flex;flex-direction:column;gap:20px;width:calc((100% - 20px) * 2 / 3);min-width:0;padding:10px 0;box-sizing:border-box} .cc-single__article{display:flex;flex-direction:column;gap:10px;flex:0 0 auto} .cc-single__title{margin:0 0 15px;text-align:start;color:#494949} .cc-single__meta{min-width:0} .cc-single__media{display:flex;flex-direction:column;gap:9px} .cc-single__image{width:100%;max-width:100%;text-align:center} .cc-single__image img{display:inline-block;vertical-align:middle;width:100%;border-radius:0;box-shadow:0 0 20px 0 rgb(0 0 0 / .2)} .cc-single .cc-page-reading{position:relative;width:100%;max-width:100%;min-width:0} .cc-single__share{display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;padding:9px 0 10px;border:solid rgba(0,0,0,.17);border-width:1px 0} .cc-single__share-info{display:flex;flex-direction:column;justify-content:center;gap:8px;flex:0 0 50%;padding:10px;box-sizing:border-box} .cc-single__share-title{font-family:var(--cc-font-head);font-weight:700;letter-spacing:0;color:#161616} .cc-single__postinfo{text-align:left} .cc-single__share-links{display:flex;flex-direction:column;justify-content:center;flex:1 1 0;min-width:0} .cc-single__side{display:flex;flex-direction:column;gap:20px;width:calc((100% - 20px) / 3);min-width:0;padding:10px 0;box-sizing:border-box} .cc-single__recent{display:flex;flex-direction:column;align-items:stretch;gap:20px;flex:1 1 auto;align-self:stretch;padding:10px 0} .cc-single__recent-box{display:flex;flex-direction:column;gap:20px;padding:10px;background:#fff;border-radius:14px} .cc-single__nav{display:flex;flex-direction:column;gap:20px;width:100%;max-width:none;margin-inline:0;padding:10px max(var(--cc-content-gutter,32px),calc((100% - 1320px) / 2));box-sizing:border-box;background:#fff} .cc-single__navwrap{margin:0 0 38px} @media (max-width:1024px){ .cc-single .cc-single__layout{flex-direction:column;padding-block:40px} .cc-single__main,.cc-single__side{width:100%} } @media (max-width:767px){ .cc-single .cc-single__layout,.cc-single__nav{padding-inline:16px} .cc-single__article{padding:10px 0} .cc-single__share{flex-wrap:wrap} .cc-single__share-info,.cc-single__share-links{flex:1 1 100%} .cc-single__share-title{text-align:center} .cc-single__image{text-align:center} .cc-single__recent{flex:0 0 auto;padding:0;margin:0} .cc-single__navwrap{padding:0} .cc-single__share-links{padding-top:25.4px} } /* byline (moved from the template's inline style block) */ .cc-byline{margin:0 0 36px;padding:18px 0 20px;border-top:3px solid #E31507;border-bottom:1px solid #E3E8EF;font-family:"DM Sans",sans-serif;color:#33445C}.cc-byline__kicker{margin:0 0 12px;font:700 15px/1.2 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#E31507}.cc-byline__row{display:flex;align-items:center;gap:14px;margin:0 0 14px}.cc-byline__img{flex:0 0 64px;display:block;width:64px;height:64px;overflow:hidden;border-radius:50%}.cc-byline__img img{display:block;width:64px!important;height:64px!important;object-fit:cover;border-radius:50%!important}.cc-byline__name{display:block;font:700 18px/1.25 Inter,sans-serif;color:#071B38!important;text-decoration:none!important}.cc-byline__name:hover{color:#E31507!important}.cc-byline__role{margin:5px 0 0;font:600 15px/1.3 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#55657B;white-space:normal}.cc-byline__bio{margin:0 0 14px;font:400 15px/1.6 "DM Sans",sans-serif;color:#33445C}.cc-byline__links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:700 13px/1.4 Inter,sans-serif}.cc-byline__links a{color:#071B38!important;text-decoration:none!important}.cc-byline__links a:hover{color:#E31507!important;}.cc-byline__links span{color:#C3CCD8}body[class] .cc-byline p.cc-byline__role{margin:5px 0 0!important;font:600 15px/1.3 Inter,sans-serif!important;letter-spacing:.05em!important;text-transform:uppercase;color:#55657B!important;white-space:normal}body[class] .cc-byline p.cc-byline__kicker{font:700 15px/1.2 Inter,sans-serif!important;letter-spacing:.05em!important;margin:0 0 12px!important}body[class] .cc-byline p.cc-byline__bio{font:400 15px/1.6 "DM Sans",sans-serif!important;margin:0 0 14px!important} /* Google preferred source button (18 Oct 2026) replaces the share icons */ .cc-single__share-links .cc-prefsrc{display:flex;justify-content:flex-end;align-items:center;margin:0 10px 0 0;min-height:40px} .cc-prefsrc__link{display:inline-block;padding:10px 16px;border:1px solid rgba(0,0,0,.17);border-radius:8px;color:#161616;font-weight:600;text-decoration:none} .cc-single__postinfo .cc-post-info{list-style:none;margin:0;padding:0} @media (max-width:767px){.cc-single__postinfo .cc-post-info{justify-content:center;text-align:center}.cc-single__share-links .cc-prefsrc{justify-content:center;margin:0}} /* 25 Oct 2026 (Amir): post navigation without the top, bottom and middle rules */ html body.single-post:not(#cc-lux):not(#cc-x) .cc-post-nav,html body.single-post:not(#cc-lux):not(#cc-x) .cc-post-nav *{border:0!important;column-rule:none!important;box-shadow:none!important;outline:0!important} html body.single-post .cc-post-nav a::before,html body.single-post .cc-post-nav div::before,html body.single-post .cc-post-nav a::after,html body.single-post .cc-post-nav div::after{background:none!important;border:0!important} html body.single-post:not(#cc-lux):not(#cc-x) .cc-post-nav__separator-wrapper,html body.single-post:not(#cc-lux):not(#cc-x) .cc-post-nav__separator{display:none!important} /* 25 Oct 2026 (Amir): no rules around the preferred-sources share block and none on the author box */ html body.single-post:not(#cc-lux):not(#cc-x) footer.cc-single__share{border-top:0!important;border-bottom:0!important} html body.single-post:not(#cc-lux):not(#cc-x) .cc-byline{border-top:0!important;border-bottom:0!important} /* p25oct-navarrows: arrows only on the post navigation (labels removed in inc/cc-native.php) */ html body.single-post:not(#cc-lux) .cc-post-nav .post-navigation__arrow-wrapper{color:#071B38;font-size:18px;transition:color .2s} html body.single-post:not(#cc-lux) .cc-post-nav .post-navigation__arrow-wrapper svg{width:18px;height:18px;transition:transform .2s} html body.single-post:not(#cc-lux) .cc-post-nav a:hover .post-navigation__arrow-wrapper{color:#E31507} html body.single-post:not(#cc-lux) .cc-post-nav a:hover .post-navigation__arrow-prev svg{transform:translateX(-4px)} html body.single-post:not(#cc-lux) .cc-post-nav a:hover .post-navigation__arrow-next svg{transform:translateX(4px)} @media(prefers-reduced-motion:reduce){html body.single-post .cc-post-nav .post-navigation__arrow-wrapper svg,html body.single-post .cc-post-nav .post-navigation__arrow-wrapper{transition:none}} /* 25 Oct 2026 (publisher trust): "How we write CC Zone" link beside the date; the separator travels with the link when the byline line wraps on phones */ html body.single-post:not(#cc-lux) .cc-postmeta__how{display:inline-flex;align-items:center;gap:0 10px;white-space:nowrap} html body.single-post:not(#cc-lux) .cc-postmeta__how a{color:#E31507;font:inherit} html body.single-post:not(#cc-lux) .cc-postmeta__how a:hover{color:#071B38} @media(max-width:767px){html body.single-post:not(#cc-lux) .cc-postmeta__how{flex-basis:100%}html body.single-post:not(#cc-lux) .cc-postmeta__how .cc-postmeta__sep{display:none}}