/*
Theme Name: Canadian Linen
Theme URI: https://www.canadianlinen.com
Author: Vestis
Description: Canadian Linen marketing site theme for WordPress VIP.
Version: 0.2.5
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: canadianlinen
*/

/* ==========================================================================
   Canadian Linen Theme — Initial View Layer
   Phase: First-pass layout and block presentation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties
   -------------------------------------------------------------------------- */
:root {
	--cl-color-primary:      #c41230;
	--cl-color-primary-dark: #9a0e25;
	--cl-color-text:         #1a1a1a;
	--cl-color-text-light:   #6b6b6b;
	--cl-color-bg:           #f0efef;
	--cl-color-bg-warm:      #f8f7f5;
	--cl-color-border:       #e0ddd8;
	--cl-color-header-utility: #707070;
	--cl-color-header-main:    #979797;
	--cl-color-header-nav-active: #4a4a4a;
	--cl-color-footer-bg:      #1a1a1a;
	--cl-color-cta:            #e8630a;
	--cl-color-cta-dark:       #c9540a;
	--cl-font-sans:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--cl-container-max:      1200px;
	--cl-container-pad:      1.5rem;
	--cl-space-xs:           0.5rem;
	--cl-space-sm:           1rem;
	--cl-space-md:           1.5rem;
	--cl-space-lg:           2.5rem;
	--cl-space-xl:           4rem;
}

/* --------------------------------------------------------------------------
   Base Reset & Typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Override lifted cl-site.css `html, body { height: 100% }` which was for
   the AngularJS app's fixed-height scroll containers and breaks normal
   page scrolling. */
html, body {
	height: auto;
	min-height: 100%;
}

body {
	margin: 0;
	font-family: 'sourcesanspro', var(--cl-font-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cl-color-text);
	background: var(--cl-color-bg);
}

/* Headings inherit the lifted Source Sans Pro too (with system sans fallback)
   so they don't fall back to the browser default serif if the webfont fails. */
h1, h2, h3, h4, h5, h6 {
	font-family: 'sourcesanspro', var(--cl-font-sans);
}

a {
	color: var(--cl-color-primary);
}

a:hover {
	color: var(--cl-color-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.75em;
	line-height: 1.2;
	font-weight: 700;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Accessibility utilities (skip link + sr-only text)
   -------------------------------------------------------------------------- */
.cl-skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--cl-color-primary);
	color: #fff;
	padding: 0.5rem 1rem;
	z-index: 9999;
	text-decoration: none;
}
.cl-skip-link:focus { top: 0; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

/* --------------------------------------------------------------------------
   Site Header - utility bar (top) + main bar (logo + nav)
   -------------------------------------------------------------------------- */
.cl-site-header {
	background: var(--cl-color-header-utility);
	position: relative;
	z-index: 50;
}

/* Top row: logo + contact + utility nav, all on the same grey strip */
.cl-utility-bar {
	background: var(--cl-color-header-utility);
	color: #fff;
}

.cl-utility-bar__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0.375rem var(--cl-container-pad);
	display: grid;
	/* 1fr auto 1fr -> contact column auto-sizes to its content (never wraps),
	   logo + utility-nav absorb remaining space on either side. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--cl-space-md);
	/* Sized to fit the French utility-nav (PORTAIL CLIENT / MAGASIN EN LIGNE /
	   SUCCURSALES / CARRIÈRES / FRANÇAIS) without crowding the logo column. */
	font-size: 0.6875rem;
}

.cl-site-header__logo-link { justify-self: start; }
.cl-utility-nav           { justify-self: end; }

.cl-site-header__logo-link { display: inline-flex; align-items: center; }

.cl-site-header__logo {
	display: block;
	max-height: 80px;
	width: auto;
}

.cl-utility-bar__contact {
	color: #fff;
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
}

.cl-utility-bar__contact-label {
	font-weight: 700;
	margin-right: 0.5rem;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Higher-specificity selector + !important to defeat any global anchor rule
   in the lifted cl-site.css that was painting the phone link orange/red. */
.cl-utility-bar a.cl-utility-bar__contact-phone,
.cl-utility-bar a.cl-utility-bar__contact-phone:visited {
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
}

.cl-utility-bar a.cl-utility-bar__contact-phone:hover {
	color: rgba(255, 255, 255, 0.8) !important;
}

.cl-utility-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.875rem;
}

.cl-utility-nav__list a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	font-size: 0.6875rem;
}

.cl-utility-nav__list a:hover { color: rgba(255, 255, 255, 0.8); }

/* ---- GTranslate language switcher (home utility bar) -------------------
 * The plugin renders a list of available languages inside
 * .cl-utility-nav__language (see header.php). We want it to look like one
 * more menu item in the utility bar -- a single "switch-to" link inline
 * with Portal / Web Store / etc., not a second row.
 *
 * Strategy:
 *   1. Flex the parent .cl-utility-nav so the <ul> and our language div
 *      sit side-by-side instead of stacking.
 *   2. Strip GTranslate's own list layout (ul, li) so its children
 *      collapse to inline.
 *   3. Hide the currently-active language entry (multiple selector hedges
 *      cover the class names GTranslate has used across versions).
 *   4. Style the remaining link to match the surrounding utility nav.
 */
/* GTranslate widget is injected as the last <li> of the utility menu
 * (see wp_nav_menu_items filter in functions.php). It lives inside the
 * existing <ul>, so it inherits the flex/inline-block layout of the menu
 * automatically -- no extra container styling needed.
 *
 * The <li> wrapper gets class="cl-utility-nav__language". Styling is
 * scoped by the PARENT container (the menu's <ul>) so we don't have to
 * special-case "home" vs "inner" -- whichever container we land in, we
 * inherit its base styles and only override what's needed.
 *
 * Common to both variants: hide the currently-active language, strip
 * GTranslate's wrapper's own padding/margin so the link aligns flush
 * with the parent <li>'s edge.
 */
.cl-utility-nav__language .gtranslate_wrapper {
	display: inline;
	margin: 0;
	padding: 0;
}

.cl-utility-nav__language .gt-current-lang,
.cl-utility-nav__language .gt_current,
.cl-utility-nav__language li.active,
.cl-utility-nav__language a.gt-current,
.cl-utility-nav__language a.gt_current,
.cl-utility-nav__language [aria-current="true"] {
	display: none !important;
}

/* Home-page utility bar: the <ul> is .cl-utility-nav__list (white text on
 * dark background). Match the surrounding utility-nav items exactly so the
 * language link reads as just another menu entry rather than pushing the
 * row to wrap. */
.cl-utility-nav__list .cl-utility-nav__language a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8125rem;
}
.cl-utility-nav__list .cl-utility-nav__language a:hover {
	color: rgba( 255, 255, 255, 0.8 );
}

/* Inner-page secondary-nav: lifted .secondary-nav rules set color #444,
 * uppercase, 12px. Match exactly so the language link blends in with
 * Portal / Web Store / Locations / Careers. */
.secondary-nav .cl-utility-nav__language a {
	color: #444;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 12px;
}
.secondary-nav .cl-utility-nav__language a:hover {
	color: var( --cl-color-cta, #c8102e );
}

/* Compress the inner-page secondary nav so all items + the language toggle
 * fit on one row even with longer French translations.
 * cl-site.css ships .secondary-nav ul li { padding-right: 0.5rem }; reduce
 * the inter-item gap and force nowrap on the <ul> so a tight overflow
 * doesn't push the last item to a second line.
 */
.secondary-nav > ul {
	white-space: nowrap;
}

.secondary-nav > ul > li {
	padding-right: 0.35rem;
}

.secondary-nav > ul > li:last-child {
	padding-right: 0;
}

/* Bottom row: primary nav only.
   The .cl-site-header--inner parent is constrained to 1200px so the brand
   row lines up with the page content, but the nav bar's GREY BACKGROUND
   should still extend edge-to-edge across the viewport (matches the live
   site). The `50% - 50vw` margins push the element outside the parent's
   max-width by exactly half the difference on each side, giving a full-
   viewport-width strip without restructuring the markup. */
.cl-site-header__main {
	background: var(--cl-color-header-main);
	color: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* The inner re-constrains the nav items back to the page's content column
   so the dropdowns sit under their associated content. No `justify-content`
   here — the nav itself stretches to fill the row and distributes items. */
.cl-site-header__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
	display: flex;
	align-items: stretch;
	gap: 0;
}

/* Mobile hamburger toggle */
.cl-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
}

.cl-nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 768px) {
	.cl-nav-toggle { display: inline-flex; }
}

/* Primary nav. `.cl-site-nav` fills the entire constrained row (flex: 1).
   The <ul> distributes top-level items across the full width via flexbox
   so wider text gets wider cells, with no manual sizing. flex-wrap: wrap
   lets items break to a second row when translated copy (e.g. French)
   exceeds the available width -- vs the previous display:table approach
   which would cause items to overflow past the right edge.
 */
.cl-site-nav {
	flex: 1;
	align-self: stretch;
	display: flex;
	align-items: stretch;
}

.cl-site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

.cl-site-nav__list > li {
	position: relative;
	flex: 1 1 auto;          /* grow to fill, shrink if needed, size to content as a base */
	display: flex;
	align-items: stretch;
	text-align: center;
}

.cl-site-nav__list > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: #fff;
	text-decoration: none;
	/* Reduced from 0.9375rem / 0.75rem to leave room for translated copy
	 * (French menu items run ~25-30% longer than the English source) and
	 * the GTranslate toggle appended to the utility nav. */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 1rem 0.5rem;
	/* `nowrap` keeps each menu item's text on one line. Container's flex-wrap
	 * still lets a full item drop to a new row when the line is exhausted. */
	white-space: nowrap;
	transition: background 0.15s;
}

/* Dark grey highlight on hover or when the item maps to the current page. */
.cl-site-nav__list > li > a:hover,
.cl-site-nav__list > li:hover > a,
.cl-site-nav__list > li.current-menu-item > a,
.cl-site-nav__list > li.current-menu-ancestor > a {
	background: var(--cl-color-header-nav-active);
	color: #fff;
}

/* White vertical dividers between top-level nav items (skip the last one). */
.cl-site-nav__list > li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* Down-arrow before items that have a submenu (matches the live site). */
.cl-site-nav__list > .menu-item-has-children > a::before {
	content: '';
	display: inline-block;
	margin-right: 0.5em;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

/* Submenu (dropdown). `min-width: 100%` makes the dropdown at least as wide
   as its parent nav cell (table-cell sized by content), and `text-align:
   left` overrides the `text-align: center` the table-cell parent passes
   down — items render left-aligned inside the dropdown. */
.cl-site-nav__list .sub-menu,
.cl-site-nav__list ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	z-index: 100;
	text-align: left;
}

.cl-site-nav__list .menu-item-has-children:hover > .sub-menu,
.cl-site-nav__list .menu-item-has-children:hover > ul,
.cl-site-nav__list .menu-item-has-children.is-open > .sub-menu,
.cl-site-nav__list .menu-item-has-children.is-open > ul {
	display: block;
}

.cl-site-nav__list .sub-menu a,
.cl-site-nav__list ul a {
	display: block;
	color: var(--cl-color-text);
	text-decoration: none;
	padding: 0.375rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	line-height: 1.4;
}

.cl-site-nav__list .sub-menu a:hover,
.cl-site-nav__list ul a:hover {
	background: var(--cl-color-bg-warm);
	color: var(--cl-color-primary);
}

/* --------------------------------------------------------------------------
   Site Content Wrapper
   -------------------------------------------------------------------------- */
.cl-site-content {
	min-height: 60vh;
}

.cl-page-main {
	padding-bottom: var(--cl-space-xl);
}

/* --------------------------------------------------------------------------
   Site Footer
   Mirrors prod: black bg, ghost "C" mark watermark in upper-right, top nav row,
   search bar, contact phone, social row, partner-site links, legal links.
   -------------------------------------------------------------------------- */
.cl-site-footer {
	background: var(--cl-color-footer-bg);
	color: rgba(255, 255, 255, 0.7);
	padding: 3rem 0 2rem;
	margin-top: 0;
	position: relative;
	overflow: hidden;
}

/* Ghost "C" watermark in upper-right corner. Decorative only. */
.cl-site-footer::after {
	content: "C";
	position: absolute;
	top: -1rem;
	right: -2rem;
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 900;
	font-size: 20rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.04);
	pointer-events: none;
	z-index: 0;
}

.cl-site-footer__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
	position: relative;
	z-index: 1;
}

/* Top nav row (UNIFORM SERVICES | FACILITY SERVICES | ...) */
.cl-site-footer__nav {
	margin: 0 0 1.5rem;
}

.cl-site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
}

.cl-site-footer__nav-list a,
.cl-site-footer a:link,
.cl-site-footer a:visited,
.cl-site-footer a:active {
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cl-site-footer__nav-list a:hover { color: #fff; text-decoration: underline; }

/* Search bar */
.cl-site-footer__search {
	display: flex;
	align-items: center;
	max-width: 380px;
	margin: 0 0 1.25rem;
	background: #2a2a2a;
	border-radius: 999px;
	padding: 0.25rem 0.25rem 0.25rem 1rem;
}

.cl-site-footer__search input[type="search"] {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 0.95rem;
	padding: 0.5rem 0.5rem;
	outline: none;
}

.cl-site-footer__search button {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
}

.cl-site-footer__search button:hover { color: #fff; }

/* Phone callout */
.cl-site-footer__contact {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	text-transform: none;
	letter-spacing: 0;
}

.cl-site-footer__phone,
a.cl-site-footer__phone:link,
a.cl-site-footer__phone:visited,
a.cl-site-footer__phone:active {
	color: var(--cl-color-cta);
	text-decoration: none;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

a.cl-site-footer__phone:hover { color: var(--cl-color-cta); text-decoration: underline; }

/* Social row */
.cl-site-footer__social {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	gap: 0.5rem;
}

.cl-site-footer__social-item img {
	display: block;
	width: 32px;
	height: 32px;
	transition: opacity 0.2s;
}

.cl-site-footer__social-item a:hover img { opacity: 0.75; }

/* Partner sites */
.cl-site-footer__partners {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
	text-transform: none;
	letter-spacing: 0;
}

.cl-site-footer__partners a,
.cl-site-footer__partners a:link,
.cl-site-footer__partners a:visited,
.cl-site-footer__partners a:active {
	color: var(--cl-color-cta);
	text-transform: none;
	letter-spacing: 0;
}

.cl-site-footer__partners a:hover { text-decoration: underline; }

/* Legal line */
.cl-site-footer__legal {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.65);
	text-transform: none;
	letter-spacing: 0;
}

.cl-site-footer__legal a,
.cl-site-footer__legal a:link,
.cl-site-footer__legal a:visited,
.cl-site-footer__legal a:active {
	color: var(--cl-color-cta);
	text-transform: none;
	letter-spacing: 0;
}

.cl-site-footer__legal a:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.cl-site-footer__nav-list { gap: 1rem; }
	.cl-site-footer::after { font-size: 14rem; }
}

/* --------------------------------------------------------------------------
   Block: Interior Page Hero
   Maps from legacy PageTitle module.
   Full-width red banner; inner wrapper constrains the heading.
   -------------------------------------------------------------------------- */
.cl-interior-page-hero {
	background: var(--cl-color-primary);
	color: #fff;
	padding: var(--cl-space-lg) 0;
}

.cl-interior-page-hero__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
}

.cl-interior-page-hero__title {
	margin: 0;
	font-size: clamp(1.375rem, 2.25vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Block: Breadcrumbs
   Maps from legacy Breadcrumb module.
   -------------------------------------------------------------------------- */
.cl-breadcrumbs {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: var(--cl-space-sm) var(--cl-container-pad);
	font-size: 0.875rem;
	color: var(--cl-color-text-light);
	border-bottom: 1px solid var(--cl-color-border);
}

.cl-breadcrumbs a {
	color: var(--cl-color-primary);
	text-decoration: none;
}

.cl-breadcrumbs a:hover {
	text-decoration: underline;
}

.cl-breadcrumbs__current {
	color: var(--cl-color-text);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Block: WYSIWYG Content
   Maps from legacy RichContent module.
   -------------------------------------------------------------------------- */
.cl-wysiwyg-content {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: var(--cl-space-lg) var(--cl-container-pad);
}

.cl-wysiwyg-content h1 { font-size: 2rem; }
.cl-wysiwyg-content h2 { font-size: 1.625rem; }
.cl-wysiwyg-content h3 { font-size: 1.375rem; }
.cl-wysiwyg-content h4 { font-size: 1.125rem; }

.cl-wysiwyg-content ul,
.cl-wysiwyg-content ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.cl-wysiwyg-content li {
	margin-bottom: 0.25em;
}

span.cl-wysiwyg-content {
	display: inline;
	padding: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   Block: Two-Column WYSIWYG
   Maps from legacy TwoColumn module.
   Five ratio variants driven by BEM modifier classes.
   -------------------------------------------------------------------------- */
.cl-two-col-wysiwyg {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: var(--cl-space-lg) var(--cl-container-pad);
	display: grid;
	gap: var(--cl-space-lg);
	align-items: start;
}

.cl-two-col--50-50 { grid-template-columns: 1fr 1fr; }
.cl-two-col--75-25 { grid-template-columns: 3fr 1fr; }
.cl-two-col--66-33 { grid-template-columns: 2fr 1fr; }
.cl-two-col--33-66 { grid-template-columns: 1fr 2fr; }
.cl-two-col--25-75 { grid-template-columns: 1fr 3fr; }

@media (max-width: 768px) {
	.cl-two-col-wysiwyg {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Block: Embedded Form
   Maps from legacy ContactUsForm module and Pardot iframe RichContent.
   -------------------------------------------------------------------------- */
.cl-embedded-form {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: var(--cl-space-lg) var(--cl-container-pad);
}

.cl-embedded-form iframe {
	display: block;
	width: 100%;
	border: none;
}

/* --------------------------------------------------------------------------
   Block: Brand Statement
   Full-width white section, centered eyebrow + big headline + supporting copy.
   The kind of breathing-room section the live site uses between content.
   -------------------------------------------------------------------------- */
.cl-brand-statement {
	background: #fff;
	padding: clamp(4rem, 8vw, 7rem) var(--cl-container-pad);
	text-align: center;
}

.cl-brand-statement__inner {
	max-width: 920px;
	margin: 0 auto;
}

.cl-brand-statement__eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cl-color-primary);
}

.cl-brand-statement__title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.625rem, 3.5vw, 2.625rem);
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--cl-color-text);
}

.cl-brand-statement__title--accent {
	color: var(--cl-color-text-light);
	font-weight: 300;
}

.cl-brand-statement__copy {
	max-width: 680px;
	margin: 0 auto;
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--cl-color-text-light);
}

/* --------------------------------------------------------------------------
   Block: Feature Block (image + content split)
   Image one side, copy the other. Stacks below 768px.
   -------------------------------------------------------------------------- */
.cl-feature-block {
	background: var(--cl-color-bg-warm);
	padding: clamp(4rem, 7vw, 6rem) 0;
}

.cl-feature-block__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	grid-template-columns: 1fr 1fr;
}

.cl-feature-block__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.cl-feature-block__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cl-color-primary);
}

.cl-feature-block__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--cl-color-text);
}

.cl-feature-block__copy {
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--cl-color-text-light);
}

.cl-feature-block__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--cl-color-primary);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 0.25rem;
	transition: gap 0.2s ease;
}

.cl-feature-block__cta:hover {
	gap: 0.75rem;
	color: var(--cl-color-primary-dark);
}

@media (max-width: 768px) {
	.cl-feature-block__inner {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Home: Hero
   Full-width photo banner with overlay, headline, copy, and CTA button.
   Background-image is set inline on the section so admins can change the
   photo per cl_section record without editing CSS.
   -------------------------------------------------------------------------- */
.cl-home-hero {
	background-image:
		linear-gradient(rgba(0, 50, 40, 0.15), rgba(0, 50, 40, 0.15)),
		url('/wp-content/themes/canadianlinen/images/UserFiles/HOME%20PAGE%20BACKGROUND/WEB-028CL-25.jpg');
	background-size: cover;
	background-position: center top;
	padding: 17rem 0 5rem;
	min-height: 680px;
}

.cl-home-hero__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
	text-align: center;
	color: #fff;
}

.cl-home-hero__title {
	font-size: clamp(1.375rem, 2.25vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	margin: 0 0 1rem;
}

.cl-home-hero__copy {
	max-width: 720px;
	margin: 1rem auto 2rem;
	font-size: 1.125rem;
	line-height: 1.55;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cl-home-hero__cta {
	display: inline-block;
	background: var(--cl-color-cta);
	color: #fff;
	padding: 1rem 2.5rem;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background 0.15s;
}

.cl-home-hero__cta:hover {
	background: var(--cl-color-cta-dark);
	color: #fff;
}

.cl-home-hero__cta-row {
	margin: 1.5rem 0 0.75rem;
}

.cl-home-hero__anniversary {
	margin: 0 0 1.5rem;
}

.cl-home-hero__anniversary-link,
a.cl-home-hero__anniversary-link:link,
a.cl-home-hero__anniversary-link:visited,
a.cl-home-hero__anniversary-link:active {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

a.cl-home-hero__anniversary-link:hover {
	color: #fff;
	text-decoration: underline;
}

.cl-home-hero__logo-row {
	margin: 1rem 0 0;
	text-align: center;
}

.cl-home-hero__logo {
	display: block;
	margin: 0 auto;
	max-width: 250px;
	height: auto;
}

/* --------------------------------------------------------------------------
   Home: Callout
   Centered eyebrow + headline + subtitle band. Two color variants:
   --dark (charcoal / white text) and --warm (warm-grey / dark text).
   -------------------------------------------------------------------------- */
.cl-home-callout {
	padding: clamp(3rem, 6vw, 5rem) var(--cl-container-pad);
	text-align: center;
}

.cl-home-callout--dark {
	background: #2a2a2a;
	color: #fff;
}

.cl-home-callout--warm {
	background: var(--cl-color-bg-warm);
	color: var(--cl-color-text);
}

.cl-home-callout__inner {
	max-width: 900px;
	margin: 0 auto;
}

.cl-home-callout__eyebrow {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cl-color-cta);
}

.cl-home-callout--warm .cl-home-callout__eyebrow {
	color: var(--cl-color-primary);
}

.cl-home-callout__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.cl-home-callout__subtitle {
	margin: 0 auto;
	max-width: 720px;
	font-size: 1.0625rem;
	line-height: 1.6;
	opacity: 0.95;
}

/* --------------------------------------------------------------------------
   Block: Industries We Serve
   Tile grid of industry cards. Future ACF block target.
   -------------------------------------------------------------------------- */
.cl-industries {
	padding: var(--cl-space-xl) 0;
	background: var(--cl-color-bg-warm);
}

.cl-industries__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
}

.cl-industries__title {
	text-align: center;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin-bottom: var(--cl-space-lg);
	color: var(--cl-color-text);
}

.cl-industries__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--cl-space-md);
}

.cl-industries__card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--cl-color-border);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cl-industries__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cl-industries__card-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.cl-industries__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.cl-industries__card:hover .cl-industries__card-image img {
	transform: scale(1.04);
}

.cl-industries__card-title {
	margin: 0;
	padding: var(--cl-space-sm) var(--cl-space-md);
	font-size: 1.0625rem;
	font-weight: 600;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Block: CTA Strip
   Full-width call-to-action band with title + copy + button.
   -------------------------------------------------------------------------- */
.cl-cta-strip {
	background: var(--cl-color-primary);
	color: #fff;
	padding: var(--cl-space-xl) 0;
	text-align: center;
}

.cl-cta-strip__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
}

.cl-cta-strip__title {
	color: #fff;
	margin: 0 0 var(--cl-space-sm);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.cl-cta-strip__copy {
	margin: 0 0 var(--cl-space-md);
	font-size: 1.0625rem;
	line-height: 1.6;
	opacity: 0.95;
}

.cl-cta-strip__button {
	display: inline-block;
	background: var(--cl-color-cta);
	color: #fff;
	padding: 1rem 2.5rem;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	transition: background 0.15s;
}

.cl-cta-strip__button:hover {
	background: var(--cl-color-cta-dark);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Anchor color override
   The lifted cl-site.css declares a:link/:visited/:active { color: #e57425 }
   with element-plus-pseudo specificity (0,1,1), which beats our plain class
   selectors (0,1,0). Re-state our CTA button text colors with anchor + class
   selectors so they override the global anchor color cascade.
   -------------------------------------------------------------------------- */
a.cl-home-hero__cta:link,
a.cl-home-hero__cta:visited,
a.cl-home-hero__cta:active,
a.cl-home-hero__cta:hover,
a.cl-cta-strip__button:link,
a.cl-cta-strip__button:visited,
a.cl-cta-strip__button:active,
a.cl-cta-strip__button:hover,
a.cl-callout__button:link,
a.cl-callout__button:visited,
a.cl-callout__button:active,
a.cl-callout__button:hover {
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Page-Load Fade-In
   CSS-only, runs once on load. Respects reduced-motion preference.
   Replaces the legacy AngularJS-driven fade.
   -------------------------------------------------------------------------- */
@keyframes cl-page-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

body {
	animation: cl-page-fade-in 0.45s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	body { animation: none; }
}

/* --------------------------------------------------------------------------
   JS-Driven State Classes
   Toggled by js/cl-theme.js. Defaults here so a no-JS visitor still gets a
   sensible (non-broken) layout.
   -------------------------------------------------------------------------- */
/* Mobile nav: hidden on small screens, opened by .is-open. When open, the
   nav drops below the hamburger as a full-width vertical stack instead of
   trying to share the row with the toggle. Submenus expand inline (not as
   absolute dropdowns) so they don't overflow the viewport. */
@media (max-width: 768px) {
	.cl-site-header__inner {
		flex-wrap: wrap;
	}

	.cl-site-nav {
		display: none;
		flex: 0 0 100%;
		order: 99;
	}
	.cl-site-nav.is-open {
		display: block;
	}

	.cl-site-nav__list {
		display: block;
		flex-wrap: nowrap;
	}

	.cl-site-nav__list > li {
		display: block;
		flex: 0 0 auto;
		text-align: left;
	}

	.cl-site-nav__list > li + li {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	.cl-site-nav__list > li > a {
		justify-content: flex-start;
		padding: 0.875rem 1rem;
		white-space: normal;
	}

	/* Lifted cl-site.css hides all <span> inside nav links at <= 767px
	   (legacy icon-only mobile pattern). Our menu wraps each label in
	   <span class="cl-nav-label--en"> / --fr for the GTranslate-aware
	   bilingual swap, so that rule wipes the labels entirely. Restore
	   visibility here -- specificity (0,2,0) beats the lifted (0,1,5). */
	.cl-site-nav__list .cl-nav-label--en {
		display: inline;
	}
	html[lang^="fr"] .cl-site-nav__list .cl-nav-label--en {
		display: none;
	}
	html[lang^="fr"] .cl-site-nav__list .cl-nav-label--fr {
		display: inline;
	}

	/* Submenus render inline below their parent on mobile (no absolute pos),
	   indented for hierarchy. JS adds .is-open on tap; CSS reveals the list. */
	.cl-site-nav__list .sub-menu,
	.cl-site-nav__list ul {
		position: static;
		min-width: 0;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.2);
		padding: 0;
	}

	.cl-site-nav__list .sub-menu a,
	.cl-site-nav__list ul a {
		color: #fff;
		padding: 0.5rem 1rem 0.5rem 2rem;
		white-space: normal;
	}

	.cl-site-nav__list .sub-menu a:hover,
	.cl-site-nav__list ul a:hover {
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
	}
}

/* --------------------------------------------------------------------------
   Home: Band (two-column section — circle badge + content)
   Two variants: --orange (page-2 in prod) and --dark (page-4 in prod).
   Mirrors the legacy custom-home.css patterns for .page-2 / .page-4.
   -------------------------------------------------------------------------- */
.cl-home-band {
	padding: 5rem 0;
}

.cl-home-band--orange {
	background: #e57425;
	color: #fff;
}

.cl-home-band--dark {
	background: #333;
	color: #fff;
}

.cl-home-band__inner {
	max-width: 960px;
	width: 90%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 4rem;
	align-items: center;
}

@media (max-width: 810px) {
	.cl-home-band__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
}

.cl-home-band__badge {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cl-home-band__badge img {
	max-width: 100%;
	height: auto;
}

.cl-home-band__content {
	color: #fff;
}

.cl-home-band__title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 0.5rem;
	line-height: 1.1;
}

.cl-home-band--dark .cl-home-band__title--split {
	text-transform: none;
}

.cl-home-band__title-accent {
	color: #e57425;
	text-transform: uppercase;
	font-weight: 700;
}

.cl-home-band__title-rest {
	color: #fff;
	text-transform: uppercase;
	font-weight: 300;
}

.cl-home-band__tagline {
	color: #04471d;
	font-style: italic;
	font-weight: 700;
	font-size: 1.5rem;
	margin: 1rem 0 1.5rem;
}

.cl-home-band__body {
	color: #fff;
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0 0 1rem;
}

.cl-home-band__cta-row {
	margin: 0;
}

.cl-home-band__cta,
a.cl-home-band__cta:link,
a.cl-home-band__cta:visited,
a.cl-home-band__cta:active {
	display: inline-block;
	background: #04471d;
	color: #fff;
	padding: 0.875rem 2rem;
	text-transform: uppercase;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.15s;
}

a.cl-home-band__cta:hover {
	background: #033615;
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Home: Industries strip (page-3 in prod)
   Dark intro headline block above a 6-column photo strip with dark labels.
   -------------------------------------------------------------------------- */
.cl-home-industries {
	background: #333;
	color: #fff;
}

.cl-home-industries__intro {
	max-width: 960px;
	width: 90%;
	margin: 0 auto;
	padding: 4rem 0 2.5rem;
	text-align: left;
}

.cl-home-industries__headline {
	font-size: clamp(1.5rem, 2.25vw, 2rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 1rem;
	line-height: 1.2;
}

.cl-home-industries__strip {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
}

@media (max-width: 900px) {
	.cl-home-industries__strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 540px) {
	.cl-home-industries__strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

.cl-home-industries__block {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

.cl-home-industries__block img {
	display: block;
	width: 100%;
	height: auto;
	border-right: 4px solid #fff;
}

.cl-home-industries__label,
.cl-home-industries__block .cl-home-industries__label {
	background: #212121;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 300;
	margin: 0;
	padding: 0.5rem 0;
}

a.cl-home-industries__block:link .cl-home-industries__label,
a.cl-home-industries__block:visited .cl-home-industries__label,
a.cl-home-industries__block:active .cl-home-industries__label {
	color: #fff;
}

a.cl-home-industries__block:hover .cl-home-industries__label {
	color: #fff;
	background: #2a2a2a;
}

/* --------------------------------------------------------------------------
   Inner Page Header (lifted-class chrome)
   The inner page top bar (.top-content) and brand row (#header .head-row)
   use the live site's markup so the lifted cl-site.css styles them. Theme
   overrides below adjust where the lifted defaults don't quite match the
   live render:
     1) Outer .cl-site-header default is dark grey for the homepage utility
        bar. Inner pages have a white brand row, so paint the wrapper white.
     2) The lifted .top-content is max-width 820px (an island). We want the
        grey band to extend full-width with content constrained inside, so
        flip the max-width from .top-content to .top-content .row. Also
        adds a little vertical breathing room.
     3) The lifted CSS points the search-button background at the absolute
        path /UserFiles/search-icon.png, which doesn't exist in the WP
        install. Repoint it at the theme's bundled copy.
   -------------------------------------------------------------------------- */
/* Inner-page header sits on the body's #f0efef as a centered white card —
   the legacy live site does the same. The body bg shows as a slightly
   darker band on either side; the header + content below share the same
   container max-width so they line up flush left/right. */
.cl-site-header--inner {
	background: #fff;
	max-width: var(--cl-container-max);
	margin: 0 auto;
}

.top-content {
	max-width: none;
	padding: 0.5rem 0;
	/* Extend the grey strip edge-to-edge same way the nav bar does, so all
	   three header rows (top utility / brand / nav) share a consistent
	   full-viewport-width band when the parent is constrained to 1200px.
	   `width: auto` is critical — the lifted cl-site.css sets
	   `.top-content { width: 100% }`, which would otherwise pin the element
	   at exactly the parent's 1200px and the right-side negative margin
	   wouldn't actually expand it (it'd only shift the box left). With
	   `width: auto`, the negative margins on both sides absorb into the
	   computed width, giving a full-viewport box. */
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Brand row: white background extends edge-to-edge, but the inner content
   (logo / contact / PYCCO tagline) is re-constrained to the same 1200px
   container as the nav bar below, with column padding zeroed so the
   leftmost column sits flush at the container's left padding edge (above
   the first nav item) and the rightmost column ends flush at the right
   padding edge (above the last nav item). */
#header {
	background: #fff;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

#header .head-row .row.logo-row {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 1rem var(--cl-container-pad);
	width: auto;
}

/* Foundation's default .columns padding pushes content inward by 0.9375rem
   on each side, which would offset the logo / tagline from the nav bar
   edges. Remove it on the brand row only. */
#header .head-row .row.logo-row .small-4.columns {
	padding-left: 0;
	padding-right: 0;
}

/* PYCCO tagline image (column 3) is inline-block by default and sits at
   the left of its column. Right-align it so its right edge meets the
   container's right padding edge (above the last nav item). */
#header .head-row .secondary-logo {
	text-align: right;
}

/* Contact phone (column 2 — .phone-internal) ships from the lifted CSS as
   text-align: right + font-size: 0.875rem, which puts it small and flush
   against the PYCCO tagline. Centre it inside its column AND bump the size
   to match the visual weight of the logo and tagline on the live site. */
#header .head-row .phone-internal {
	text-align: center;
	font-size: 1.25rem;
}
#header .head-row .phone-internal a {
	font-size: inherit;
	font-weight: 700;
}

.top-content .row {
	max-width: 820px;
	margin: 0 auto;
}

form.addsearch-search-box td.addsearch-search-button {
	background-image: url("images/search-icon.png");
}

/* --------------------------------------------------------------------------
   Page-specific tweaks
   These mirror inline <style> blocks the legacy CMS shipped in <head> for
   individual pages. Scoped via the cl-page--<uri> body class added by the
   body_class filter in functions.php.
   -------------------------------------------------------------------------- */
.cl-page--about-us-q-and-a .cl-standard-page__content h2 {
	color: var(--cl-color-cta);
}

/* "QUESTIONS? We can help" callout at the bottom of /about-us/locations/.
   The imported section content uses `.backgroundThankYou` which the mirror
   styles in a page-specific inline <style> block as `rgb(53,55,67)`. Lift
   that to our theme. Spans near-full content-column width with a small
   horizontal margin so it has whitespace breathing room on either side. */
.backgroundThankYou {
	background-color: rgb(53, 55, 67);
	padding: 1.25rem 1.5rem;
	margin: 2.5rem 1.5rem 1rem;
	text-align: center;
}

/* Selector specificity bumped to (0,2,0) so it beats the standard-page
   h2 rule `.cl-standard-page__content h2 { color: var(--cl-color-text) }`
   (0,1,1) — otherwise the white heading renders as the page's default
   near-black text on the dark navy box. */
.backgroundThankYou .cl-questions-cta__title {
	margin: 0 0 0.75rem;
	color: #f0f8ff;
	font-size: 1.5rem;
	font-weight: 700;
}

.cl-questions-cta__row {
	margin: 0;
}

/* Q&A collapsible (progressively enhanced by cl-theme.js). Each Q is a
   <details> with a <summary> styled to look like an h2; the answer body
   lives inside the <details> and shows/hides via the native disclosure. */
.cl-qa-item {
	border-bottom: 1px solid var(--cl-color-border);
	padding: 0;
	margin: 0;
}

.cl-qa-item__question {
	list-style: none;                /* hide the default disclosure marker… */
	cursor: pointer;
	color: var(--cl-color-cta);
	font-size: clamp(1.125rem, 1.5vw, 1.25rem);
	font-weight: 700;
	padding: 1.25rem 2rem 1.25rem 0;
	position: relative;
}

.cl-qa-item__question::-webkit-details-marker { display: none; } /* …also on Safari */

/* Chevron indicator on the right — rotates when open. */
.cl-qa-item__question::after {
	content: '';
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.15s ease;
}

.cl-qa-item[open] > .cl-qa-item__question::after {
	transform: translateY(-25%) rotate(-135deg);
}

.cl-qa-item > *:not(.cl-qa-item__question) {
	margin-left: 0;                  /* counter the mirror's margin-left: 40px */
	padding-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Breadcrumb (inner pages only)
   White strip below the primary nav, contained INSIDE the constrained 1200px
   header column — body `#f0efef` shows to the left and right of it at its
   vertical position, matching how the page content below the header sits.
   The white brand row + grey nav bar above DO extend full-viewport-width,
   so visually you get: full-width white → full-width grey nav → contained
   white breadcrumb (with grey sides) → contained white content.

   Items separated by a chevron the CSS draws via ::before — no separator
   markup needed in the HTML.
   -------------------------------------------------------------------------- */
.cl-breadcrumb {
	background: #fff;
}

/* Lifted cl-site.css `nav ul:not(.side-nav) { position: relative; z-index: 5002 }`
   puts the breadcrumb's <ul> in its own stacking context. Since it sits after
   the primary nav's <ul> in the DOM, that context paints on top of the nav's
   stacking context — which buries the dropdown sub-menu. Neutralize the
   lifted rule here so the breadcrumb stops creating that context.
   Selector is `nav.cl-breadcrumb .cl-breadcrumb__list` so specificity (0,2,1)
   beats the lifted `nav ul:not(.side-nav)` (0,1,2). */
nav.cl-breadcrumb .cl-breadcrumb__list {
	position: static;
	z-index: auto;
	list-style: none;
	margin: 0;
	max-width: var(--cl-container-max);
	padding: 0.75rem var(--cl-container-pad);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--cl-color-text-light);
}

.cl-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.cl-breadcrumb__item + .cl-breadcrumb__item::before {
	content: "›";
	color: var(--cl-color-cta);
	font-weight: 700;
	margin-right: 0.25rem;
}

.cl-breadcrumb__item a,
.cl-breadcrumb a:link,
.cl-breadcrumb a:visited,
.cl-breadcrumb a:active {
	color: #04471d;
	text-decoration: none;
}

.cl-breadcrumb__item a:hover { text-decoration: underline; }

.cl-breadcrumb__item.is-current span { color: var(--cl-color-text); }

/* --------------------------------------------------------------------------
   Template: Standard Sub-Page (content + sidebar)
   9/3 column split. Mirrors legacy widget-2column row. Used by About Us,
   Service Programs, and most corporate pages.
   -------------------------------------------------------------------------- */
.cl-standard-page {
	background: #fff;
	padding: 2.5rem 0 4rem;
	max-width: var(--cl-container-max);
	margin: 0 auto;
}

.cl-standard-page__inner {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	gap: 2.5rem;
}

@media (max-width: 880px) {
	.cl-standard-page__inner {
		grid-template-columns: 1fr;
	}
}

.cl-standard-page__content {
	min-width: 0;
}

.cl-standard-page__content h1,
.cl-standard-page__content h2,
.cl-standard-page__content h3 {
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
	color: var(--cl-color-text);
}

.cl-standard-page__content h1 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
.cl-standard-page__content h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.cl-standard-page__content h3 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); }

.cl-standard-page__content p {
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 1rem;
}

.cl-standard-page__sidebar { min-width: 0; }

/* --------------------------------------------------------------------------
   Sidebar Help block ("We're Here to Help!")
   Lives in the standard-page sidebar; styled to match the legacy callout.
   -------------------------------------------------------------------------- */
.cl-sidebar-help {
	background: #f7f7f7;
	padding: 1.5rem 1.25rem;
	border-bottom: 2px solid var(--cl-color-border);
}

.cl-sidebar-help__title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	color: var(--cl-color-text);
}

.cl-sidebar-help__body {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cl-color-text);
}

.cl-sidebar-help__cta-row {
	margin: 0;
}

.cl-sidebar-help__cta,
a.cl-sidebar-help__cta:link,
a.cl-sidebar-help__cta:visited,
a.cl-sidebar-help__cta:active {
	display: inline-block;
	background: var(--cl-color-cta);
	color: #fff;
	padding: 0.625rem 1.5rem;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 2px;
	font-size: 0.9375rem;
}

a.cl-sidebar-help__cta:hover {
	background: var(--cl-color-cta-dark);
	color: #fff;
}

/* --------------------------------------------------------------------------
   About Us cards (and the same pattern any inner page can reuse).
   Stacked headline + body + green LEARN MORE pill — replaces the legacy
   inline-styled "#065139 padded anchor" blocks the CMS authors used.
   -------------------------------------------------------------------------- */
/* Each "About Us"-style card on inner pages renders as a light-grey panel
   with an orange accent strip on the left and a soft drop edge on the
   bottom — mirrors the legacy site's #About / #History / #Locations boxes. */
.cl-about-card {
	background: #ebebeb;
	border-left: 8px solid var(--cl-color-cta);
	border-bottom: 2px solid #c8c8c8;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}

.cl-about-card h2 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: var(--cl-color-text);
}

.cl-about-card p {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.55;
}

.cl-about-card__cta,
a.cl-about-card__cta:link,
a.cl-about-card__cta:visited,
a.cl-about-card__cta:active {
	display: inline-block;
	background: #065139;
	color: #fff;
	padding: 0.625rem 1.25rem;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

a.cl-about-card__cta:hover {
	background: #043e2c;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Template: Product / Catalog Detail
   Same chrome as Standard Sub-Page but the content area uses a 4/8 split for
   the product card (left) + lifestyle photo + CTA (right).
   -------------------------------------------------------------------------- */
.cl-standard-page--product .cl-standard-page__content > h1 {
	margin-top: 0;
}

.cl-product-detail {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 1.5rem;
	margin: 1.5rem 0 2rem;
}

@media (max-width: 720px) {
	.cl-product-detail {
		grid-template-columns: 1fr;
	}
}

.cl-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cl-product-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.cl-product-card__banner {
	margin: 0;
	background: #1a1a1a;
	color: #fff;
	text-align: center;
	padding: 0.625rem 0.75rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.cl-product-card__specs {
	border: 2px solid var(--cl-color-border);
	border-top: 0;
	padding: 0.875rem 1rem 1rem;
	margin: 0;
	flex: 1;
}

.cl-product-card__specs ul {
	margin: 0;
	padding-left: 1.125rem;
}

.cl-product-card__specs li {
	margin-bottom: 0.25rem;
	font-size: 0.95rem;
	line-height: 1.45;
}

.cl-product-lifestyle {
	min-width: 0;
}

.cl-product-lifestyle__image {
	display: block;
	width: 100%;
	height: auto;
}

.cl-product-lifestyle__cta {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	padding-top: 1rem;
	border-top: 1px solid var(--cl-color-border);
}

.cl-product-lifestyle__cta a,
.cl-product-lifestyle__cta a:link,
.cl-product-lifestyle__cta a:visited,
.cl-product-lifestyle__cta a:active {
	color: var(--cl-color-cta);
	font-weight: 700;
	text-decoration: none;
}

.cl-product-lifestyle__cta a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Sidebar nav blocks ("Browse by Industry", "Browse by Products")
   Dark-grey heading strip + light body with orange square bullets.
   Used by template-product-detail.php; class names are generic so any future
   sidebar nav can reuse them.
   -------------------------------------------------------------------------- */
.cl-sidebar-nav {
	margin: 0 0 1rem;
	background: #f7f7f7;
	border: 1px solid var(--cl-color-border);
}

.cl-sidebar-nav__title {
	margin: 0;
	background: #888;
	color: #fff;
	padding: 0.625rem 1rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.cl-sidebar-nav__title strong { font-weight: 700; }

/* Same trick as the breadcrumb fix: the lifted cl-site.css rule
   `nav ul:not(.side-nav) { position: relative; z-index: 5002 }` puts the
   sidebar's <ul> in its own stacking context, which paints OVER the primary
   nav's dropdown and also makes the cursor "leave" the dropdown the instant
   it crosses into the sidebar area (closing the hover). Neutralizing
   position + z-index here drops it back into the document flow so the
   dropdown context wins. Selector specificity (0,2,1) beats lifted (0,1,2). */
nav.cl-sidebar-nav .cl-sidebar-nav__list {
	position: static;
	z-index: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-sidebar-nav__list li {
	border-bottom: 1px solid #e0ddd8;
}

.cl-sidebar-nav__list li:last-child { border-bottom: 0; }

.cl-sidebar-nav__list a,
.cl-sidebar-nav a:link,
.cl-sidebar-nav a:visited,
.cl-sidebar-nav a:active {
	display: block;
	padding: 0.625rem 1rem 0.625rem 1.5rem;
	color: var(--cl-color-text);
	text-decoration: none;
	font-size: 0.9375rem;
	position: relative;
}

.cl-sidebar-nav__list a::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 50%;
	width: 5px;
	height: 5px;
	background: var(--cl-color-cta);
	transform: translateY(-50%);
}

.cl-sidebar-nav a:hover {
	color: var(--cl-color-cta);
	background: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Template: Clean Story (gateway hubs + individual articles)
   Full-width layout, no right sidebar. Content centered at ~70% width on
   desktop. Hamburger category nav + centered Clean Story logo at top, then
   the article/gateway content, then the "PEOPLE YOU CAN COUNT ON" CTA block.
   -------------------------------------------------------------------------- */
.cl-clean-story {
	background: #fff;
	padding: 2rem 0 4rem;
	max-width: var(--cl-container-max);
	margin: 0 auto;
}

/* Dark navigation band at the top of every Clean Story page. The mirror's
   live site uses `background-color: #111c24` on its #flip panel — same dark
   blue-black. Spans the full viewport width via the negative-margin trick so
   it visually divorces the Clean Story section from the rest of the site
   chrome above (which has its own colour palette). */
.cl-clean-story__nav {
	background: #111c24;
	padding: 0.375rem 0.75rem 0;   /* no bottom — let the panel butt against the band's edge when open */
	margin: 1.5rem;                /* white inset on all sides — sits as a card within the .cl-clean-story column */
	position: relative;
	text-align: right;             /* hamburger on the right, matches the mirror */
}

.cl-clean-story__nav-toggle {
	background: rgba(255, 255, 255, 0.08);
	border: 0;
	cursor: pointer;
	font-size: 1.125rem;
	color: #fff;
	padding: 0.125rem 0.375rem;
	margin-bottom: 0.375rem;       /* matches the nav's removed bottom padding */
	line-height: 1;
	border-radius: 2px;
	transition: background 0.15s;
}

.cl-clean-story__nav-toggle:hover,
.cl-clean-story__nav-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* Selector intentionally specific: the lifted cl-site.css ships
   `nav ul:not(.side-nav) { position: relative; z-index: 5002 }` which would
   otherwise override our position rules (specificity 0,1,2 vs 0,1,0).
   `nav.cl-clean-story__nav .cl-clean-story__nav-panel` is 0,2,1 — beats it.

   The panel sits IN document flow as a full-width light-grey strip below
   the dark band (mirrors the live site's #panel { background: rgb(230,230,230);
   text-align: center }). Negative horizontal margins escape the nav's 1.5rem
   horizontal padding so the panel spans the full dark-band width. */
nav.cl-clean-story__nav .cl-clean-story__nav-panel {
	list-style: none;
	margin: 0 -0.75rem;            /* matches the nav's 0.75rem horizontal padding so the panel spans full band width */
	padding: 0.5rem 0;
	background: #e6e6e6;
	text-align: center;
	display: none;
	width: auto;
	position: static;
	z-index: auto;
}

nav.cl-clean-story__nav .cl-clean-story__nav-panel.is-open { display: block; }

.cl-clean-story__nav-panel li {
	border-bottom: 1px solid #d0d0d0;
}

.cl-clean-story__nav-panel li:last-child { border-bottom: 0; }

.cl-clean-story__nav-panel a,
.cl-clean-story__nav-panel a:link,
.cl-clean-story__nav-panel a:visited,
.cl-clean-story__nav-panel a:active {
	display: block;
	padding: 0.625rem 1rem;
	color: #1a2c39;
	font-size: 1.125rem;
	font-weight: 400;
	text-decoration: none;
}

.cl-clean-story__nav-panel a:hover { color: var(--cl-color-cta); }

/* Centered Clean Story logo */
.cl-clean-story__logo {
	text-align: center;
	max-width: 70%;
	margin: 0 auto 2rem;
}

.cl-clean-story__logo img {
	max-width: 360px;
	width: 100%;
	height: auto;
	display: inline-block;
}

/* Article / gateway body: centered, comfortable reading width. */
.cl-clean-story__article {
	max-width: 70%;
	margin: 0 auto;
	color: var(--cl-color-text);
	font-size: 1.0625rem;
	line-height: 1.65;
}

@media (max-width: 768px) {
	.cl-clean-story__nav,
	.cl-clean-story__logo,
	.cl-clean-story__article {
		max-width: 96%;
	}
}

.cl-clean-story__article h1 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	margin: 2rem 0 1.5rem;
	color: var(--cl-color-text);
}

.cl-clean-story__article h2 {
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	margin: 2rem 0 1rem;
	color: var(--cl-color-text);
}

.cl-clean-story__article h3 {
	font-size: 1.125rem;
	margin: 1.5rem 0 0.75rem;
	color: var(--cl-color-text);
}

.cl-clean-story__article p { margin: 0 0 1rem; }
.cl-clean-story__article ul,
.cl-clean-story__article ol { margin: 0 0 1rem 1.5rem; }
.cl-clean-story__article img { max-width: 100%; height: auto; }

/* Industry-tile grid on /the-clean-story/. Seven 14.2%-wide tiles in a row
   with a 4px white gutter between them, separating the linked images. The
   mirror serves these as page-specific inline styles; we lift them here so
   the .oneBOX … .sevenBOX classes the extractor preserves actually render. */
.cl-clean-story__article .picturesWidth {
	width: 100%;
	overflow: hidden;        /* clear the floated boxes */
	margin: 1rem 0 0;
}

.cl-clean-story__article .oneBOX,
.cl-clean-story__article .twoBOX,
.cl-clean-story__article .threeBOX,
.cl-clean-story__article .fourBOX,
.cl-clean-story__article .fiveBOX,
.cl-clean-story__article .sixBOX,
.cl-clean-story__article .sevenBOX {
	width: 14.2%;
	height: auto;
	border-right: 4px solid #fff;
	float: left;
	display: inline-block;
}

.cl-clean-story__article .sevenBOX { border-right: 0; }

.cl-clean-story__article .HeadlineArticle {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
}

.cl-clean-story__article .HeadlineBrandOne {
	text-align: center;
	letter-spacing: 1px;
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 1.5rem 0;
}

/* Mobile: stack the industry tiles to one per row. */
@media (max-width: 768px) {
	.cl-clean-story__article .oneBOX,
	.cl-clean-story__article .twoBOX,
	.cl-clean-story__article .threeBOX,
	.cl-clean-story__article .fourBOX,
	.cl-clean-story__article .fiveBOX,
	.cl-clean-story__article .sixBOX,
	.cl-clean-story__article .sevenBOX {
		width: 100%;
		border-right: 0;
		border-bottom: 4px solid #fff;
		float: none;
	}
}

/* Hero image at the top of an article */
.cl-clean-story__article .CS-ArticleHero,
.cl-clean-story__article .CS-Article {
	margin-left: 0;
	margin-right: 0;
}

/* Gateway article cards: each "row widget-2column" rendered as a stacked
   block with image + title + lede + read-more. */
.cl-clean-story__article .row.widget-2column {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 1.5rem;
	margin: 0 0 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--cl-color-border);
}

@media (max-width: 640px) {
	.cl-clean-story__article .row.widget-2column {
		grid-template-columns: 1fr;
	}
}

.cl-clean-story__article .subBrandworks {
	color: var(--cl-color-text);
	font-size: 1.125rem;
	margin: 0 0 0.5rem;
}

/* CTA footer block at the bottom of every Clean Story page */
.cl-clean-story__cta {
	max-width: 70%;
	margin: 3rem auto 0;
	text-align: center;
}

.cl-clean-story__cta-rule {
	margin: 2rem 0 1.5rem;
	border: 0;
	border-top: 2px solid #d2d2d2;
}

.cl-clean-story__cta-eyebrow {
	letter-spacing: 0.05em;
	font-size: 1.25rem;
	font-weight: 400;
	color: #065038;
	margin: 0;
}

.cl-clean-story__cta-body {
	font-size: 0.95rem;
	margin: 0.25rem 0 0.5rem;
	color: var(--cl-color-text);
}

.cl-clean-story__cta-link a,
.cl-clean-story__cta-link a:link,
.cl-clean-story__cta-link a:visited,
.cl-clean-story__cta-link a:active {
	letter-spacing: 0.05em;
	font-size: 1rem;
	font-weight: 700;
	color: #00523b;
	text-decoration: none;
}

.cl-clean-story__cta-link a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Template: Landing Page (full-width, stacked sections)
   Used by /landing-pages/<slug>/. The legacy site rendered each section as a
   100vh snap-scroll panel powered by fullpage.js. We replicate the snap-
   scroll feel via CSS scroll-snap (mandatory on the page wrapper) so no JS
   is needed. Each .section sits at min-height 100vh. Per-page background /
   button styling lives in a cl-page--<slug> block below this — keep it
   organized that way as more landing pages get polished.
   -------------------------------------------------------------------------- */
.cl-landing-page {
	width: 100%;
	max-width: none;
	background: #fff;
}

.cl-landing-page .section {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1.5rem;
	position: relative;
}

.cl-landing-page .section > .row {
	max-width: var(--cl-container-max);
	margin: 0 auto;
	width: 100%;
}

/* Hide fullpage.js navigation helpers (scroll arrow, anchor lists) we don't
   need in the static port. */
.cl-landing-page .scroll-link,
.cl-landing-page #actions,
.cl-landing-page #cover_all,
.cl-landing-page #ex,
.cl-landing-page .wistia_embed { display: none; }

/* --------------------------------------------------------------------------
   Contact form (Request a Quote)
   Rendered by partial-contact-form.php inside template-standard-page.php's
   9-col content area. The lifted Foundation CSS would otherwise leave the
   inputs invisible — Foundation paints them with a near-white bg, 1px light
   border, and inset shadow that disappears on the page's white background.
   Pin everything explicitly here so the form is legible without depending on
   Foundation's defaults.
   -------------------------------------------------------------------------- */
.cl-contact-form {
	margin: 1.5rem 0 2.5rem;
	max-width: 640px;
}

.cl-contact-form__field {
	margin-bottom: 1.25rem;
}

.cl-contact-form__field label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	color: var(--cl-color-text);
}

.cl-contact-form__req {
	color: var(--cl-color-primary);
	font-weight: 700;
	margin-left: 0.125rem;
}

/* High-specificity selectors so the lifted Foundation input rules don't win. */
.cl-contact-form input[type="text"],
.cl-contact-form input[type="email"],
.cl-contact-form input[type="tel"],
.cl-contact-form select,
.cl-contact-form textarea {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--cl-color-text);
	background: #fff;
	border: 1px solid #c4c4c4;
	border-radius: 2px;
	box-shadow: none;
	margin: 0;
	height: auto;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.cl-contact-form input:focus,
.cl-contact-form select:focus,
.cl-contact-form textarea:focus {
	outline: 0;
	border-color: var(--cl-color-primary);
	box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.15);
}

.cl-contact-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.cl-contact-form__field.is-invalid input,
.cl-contact-form__field.is-invalid select,
.cl-contact-form__field.is-invalid textarea {
	border-color: var(--cl-color-primary);
	background: #fff5f5;
}

.cl-contact-form__error {
	color: var(--cl-color-primary);
	font-size: 0.875rem;
	margin: 0.375rem 0 0;
}

.cl-contact-form__general-error {
	background: #fff5f5;
	border-left: 4px solid var(--cl-color-primary);
	padding: 0.75rem 1rem;
	color: var(--cl-color-text);
	margin-bottom: 1.5rem;
}

.cl-contact-form__submit {
	display: inline-block;
	background: #00523b;          /* matches legacy submit-button green */
	color: #fff;
	border: 0;
	padding: 1.125rem 2.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s;
	width: 100%;
}

.cl-contact-form__submit:hover,
.cl-contact-form__submit:focus {
	background: #003d2c;
	outline: 0;
}

/* Honeypot field: visually hidden but still focusable for assistive tech
   that announces hidden labels. Real users won't see or focus it; bots
   filling everything will trip it. */
.cl-contact-form__honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cl-contact-form--success {
	background: #f0f8f4;
	border-left: 4px solid #00523b;
	padding: 1.5rem 1.75rem;
	margin: 1.5rem 0 2.5rem;
}

.cl-contact-form--success h2 {
	margin: 0 0 0.5rem;
	color: #00523b;
}

.cl-contact-form__back {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--cl-color-primary);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Search results page (search.php)
   Custom layout shared by the header and footer search forms. Matches the
   inner-page chrome — sits on the body's #f0efef as a centered white card
   the same width as the standard-page template — but is a single column
   (no sidebar). Each result is title + URL + highlighted snippet.
   -------------------------------------------------------------------------- */
.cl-search-results {
	background: #fff;
	padding: 2.5rem 0 4rem;
	max-width: var(--cl-container-max);
	margin: 0 auto;
}

.cl-search-results__inner {
	max-width: 820px;        /* narrower than the page width — easier to scan */
	margin: 0 auto;
	padding: 0 var(--cl-container-pad);
}

.cl-search-results__heading {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 2.25vw, 2rem);
	color: var(--cl-color-text);
}

.cl-search-results__count {
	color: var(--cl-color-text-light);
	font-size: 0.9375rem;
	margin: 0 0 1.5rem;
}

.cl-search-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-search-results__item {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--cl-color-border);
}

.cl-search-results__item:last-child {
	border-bottom: 0;
}

.cl-search-results__title,
.cl-search-results__title:link,
.cl-search-results__title:visited {
	display: inline-block;
	color: var(--cl-color-primary);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
	margin: 0 0 0.125rem;
}

.cl-search-results__title:hover { text-decoration: underline; }

.cl-search-results__url {
	color: #04471d;          /* matches the breadcrumb link color */
	font-size: 0.8125rem;
	word-break: break-all;
	margin: 0 0 0.5rem;
}

.cl-search-results__snippet {
	color: var(--cl-color-text);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.cl-search-results__snippet mark {
	background: #fff3b0;
	color: inherit;
	padding: 0 0.125em;
	border-radius: 2px;
}

.cl-search-results__empty {
	color: var(--cl-color-text);
	font-size: 1rem;
	margin: 1rem 0;
}

.cl-search-results__form {
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0 1.5rem;
}

.cl-search-results__form input[type="search"] {
	flex: 1;
	padding: 0.625rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	border: 1px solid #c4c4c4;
	border-radius: 2px;
	background: #fff;
}

.cl-search-results__form button {
	background: #00523b;
	color: #fff;
	border: 0;
	padding: 0.625rem 1.25rem;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
}

.cl-search-results__form button:hover { background: #003d2c; }

/* Paginator — flat numeric pages with prev / next. Current page is solid
   primary-color, the rest are bordered. */
.cl-search-results__pagination {
	margin-top: 2rem;
}

.cl-search-results__pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	justify-content: center;
}

.cl-search-results__pagination a,
.cl-search-results__pagination span {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 600;
	border: 1px solid var(--cl-color-border);
	border-radius: 2px;
	text-decoration: none;
	color: var(--cl-color-text);
	background: #fff;
}

.cl-search-results__pagination a:hover {
	background: var(--cl-color-bg-warm);
	border-color: var(--cl-color-text-light);
}

.cl-search-results__pagination span.current {
	background: var(--cl-color-primary);
	color: #fff;
	border-color: var(--cl-color-primary);
}

.cl-search-results__pagination span.dots {
	border-color: transparent;
	background: transparent;
	color: var(--cl-color-text-light);
}

/* --------------------------------------------------------------------------
   Locations list ([cl_locations] / /about-us/locations/)
   Provinces are H2 section headings with a small count chip; each section
   renders its branches as a responsive 3-column card grid. Cards have a
   thin left orange accent (matches the .cl-about-card aesthetic), the city
   name as h3, the address, phone (tel: link), optional fax, and a
   "View on map" link that opens Google Maps at the branch's lat/lng.
   -------------------------------------------------------------------------- */
.cl-locations {
	margin: 2rem 0 3rem;
}

.cl-locations__intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 2rem;
	color: var(--cl-color-text);
}

.cl-locations__province {
	margin-bottom: 2.5rem;
}

.cl-locations__province-heading {
	font-size: 1.375rem;
	color: var(--cl-color-text);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--cl-color-cta);
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
}

.cl-locations__province-count {
	display: inline-block;
	background: var(--cl-color-border);
	color: var(--cl-color-text);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	min-width: 1.5rem;
	text-align: center;
}

.cl-locations__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.cl-locations__card {
	background: #ebebeb;
	border-left: 4px solid var(--cl-color-cta);
	border-bottom: 1px solid #c8c8c8;
	padding: 1rem 1.25rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cl-locations__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--cl-color-text);
}

.cl-locations__address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--cl-color-text);
	margin: 0;
}

.cl-locations__meta {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.125rem 0.625rem;
}

.cl-locations__meta dt {
	font-weight: 700;
	color: var(--cl-color-text-light);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	align-self: center;
}

.cl-locations__meta dd {
	margin: 0;
	color: var(--cl-color-text);
}

.cl-locations__meta a {
	color: var(--cl-color-primary);
	font-weight: 600;
	text-decoration: none;
}

.cl-locations__meta a:hover { text-decoration: underline; }

.cl-locations__map-link {
	margin-top: auto;          /* pin to the bottom of the card */
	display: inline-block;
	color: #04471d;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	padding-top: 0.25rem;
}

.cl-locations__map-link:hover { text-decoration: underline; }

/* Lifted from prod page-embedded <style> block (covid-recovery-services, hot-restaurant-concepts, etc.).
   ul/li rules scoped to .bulletBox — prod left them global only because the <style> was page-local. */
.bulletBox { background-color: rgb(0, 82, 56); }

.newspaper {
	column-count: 3;
	column-gap: 60px;
	column-rule: 1px solid #ffffff;
	background-color: rgb(0, 82, 56);
	padding-top: 12px;
	padding-left: 14px;
	padding-right: 14px;
	padding-bottom: 25px;
}

.bulletBox ul { color: #ffffff; }
.bulletBox li { margin-bottom: 10px; }

.breakIT { page-break-inside: avoid; }

/* Curated nav-label localization: each <a> in the primary nav contains both
   the English source label and the curated French label (see the
   wp_nav_menu_objects filter in functions.php). CSS picks which one is
   visible based on the html[lang] attribute, which GTranslate updates on
   every language toggle. This way we get short curated FR labels AND a
   working EN <-> FR toggle, regardless of cookie state. */
.cl-nav-label--fr { display: none; }
html[lang^="fr"] .cl-nav-label--en { display: none; }
html[lang^="fr"] .cl-nav-label--fr { display: inline; }