/*
 * CMCO Rebrand — Global Style Override
 * Drop-in plugin. Do NOT edit theme files directly.
 * Source: CMCO Brand Identity Guide (FINAL, provided by Michael Campbell / CMCO Marketing)
 * Applies: color tokens, typography, gradients, buttons.
 * Structure of pages is intentionally untouched — visual layer only.
 */

/* ==========================================================================
   1. FONT-FACE — Zalando Sans SemiExpanded (self-hosted, variable font)
   ========================================================================== */

@font-face {
	font-family: 'Zalando Sans SemiExpanded';
	src: url('../fonts/ZalandoSansSemiExpanded-Variable.woff2') format('woff2-variations'),
	     url('../fonts/ZalandoSansSemiExpanded-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Zalando Sans SemiExpanded';
	src: url('../fonts/ZalandoSansSemiExpanded-Variable-Italic.woff2') format('woff2-variations'),
	     url('../fonts/ZalandoSansSemiExpanded-Variable-Italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   2. CMCO BRAND COLOR TOKENS (from Brand Identity Guide, Color Palette Specs)
   ========================================================================== */

:root {
	/* CMCO Primary Blue — logo, primary brand color */
	--cmco-primary-blue: #0066ba;

	/* CMCO Midnight Blue — dark backgrounds, product page headers */
	--cmco-midnight-blue: #00344f;

	/* Bright Blue gradient (icons, color gradients) */
	--cmco-bright-blue-start: #009ade;
	--cmco-bright-blue-end: #0066ba;

	/* Blue linear/angle gradient (linear lines, graphic bars) */
	--cmco-blue-linear-start: #003765;
	--cmco-blue-linear-end: #0066ba;

	/* Orange linear gradient (accent lines only, per guide) */
	--cmco-orange-start: #ff9900;
	--cmco-orange-end: #dd0000;

	/* Secondary accent colors — charts/graphs ONLY per guide, not covers/CTAs */
	--cmco-slate-gray: #5f6b7a;
	--cmco-steel-gray: #7e8895;
	--cmco-cool-gray: #aeb7c2;
	--cmco-stone: #c7c0b7;

	/* Legacy CMCO gradient token — primary brand gradient (replaces old red/gold) */
	--gradient: linear-gradient(90deg, var(--cmco-bright-blue-start), var(--cmco-bright-blue-end));

	/* Typography */
	--cmco-font-primary: 'Zalando Sans SemiExpanded', Arial, sans-serif;
}

/* ==========================================================================
   3. GLOBAL TYPOGRAPHY OVERRIDE
   ========================================================================== */

/* BUG FIX 2026-07-07: the original blanket "* { font-family !important }" rule
   was also stomping icon fonts (Font Awesome .fa/.fab/.fas, dashicons,
   megamenu-pro's genericons/fontawesome5, revslider's revicons), which turned
   every icon glyph — including the footer's LinkedIn/Facebook/Instagram social
   icons — into an invisible "missing glyph" box on mobile (and desktop).
   Fix: explicitly exclude all icon-font selectors from the override via :not(). */
body,
*:not([class*="fa-"]):not([class^="fa"]):not([class*=" fa"]):not(.dashicons):not([class*="dashicons-"]):not([class*="genericon"]):not([class*="revicon"]):not(.icon):not([class*="icon-"]) {
	font-family: var(--cmco-font-primary) !important;
}

/* Belt-and-suspenders: explicitly re-assert the icon-font stack on the
   glyph elements themselves in case any other rule's specificity/!important
   wins the cascade over the :not() exclusion above. */
i[class*="fa-"], i[class^="fa"], i[class*=" fa"],
.fa, .fas, .far, .fal, .fab, .fad,
[class*="dashicons-"],
[class*="genericon"],
[class*="revicon"] {
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Sharp", "Font Awesome 6 Sharp Duotone", "Font Awesome 6 Duotone", "Font Awesome 6 Free", "Font Awesome 6 Brands", dashicons, Genericons, revicons, sans-serif !important;
}

h1, h2, h3, .h1, .h2, .h3 {
	font-weight: 700 !important; /* Zalando Sans SemiExpanded Bold, per guide */
}

h4, h5, h6, .h4, .h5, .h6 {
	font-weight: 600 !important; /* SemiBold */
}

body, p, li, a, span, .smbodytext {
	font-weight: 300; /* Light, per guide body-text spec */
}

/* ==========================================================================
   4. COLOR SWAP — old Kito Crosby red/gold gradient -> CMCO blue gradient
   ========================================================================== */

::selection {
	background: var(--cmco-primary-blue);
	color: #ffffff;
}

.anim-gradient {
	background-image: var(--gradient) !important;
}

/* Old theme's semantic background helper classes: repoint "black" bg to
   CMCO Midnight Blue where the design intent was a "dark brand" background
   (header/footer/hero use .bgblack extensively per header.php/footer.php) */
.bgblack {
	background-color: var(--cmco-midnight-blue) !important;
}

.bggrey {
	background-color: #f5f6f7 !important;
}

/* --------------------------------------------------------------------------
   4b. BLACK-BACKGROUND SWEEP (2026-07-08, per Adam: "make all the black svgs
   in the hero sections the dark blue cmco color, same with all black shapes
   on homepage")

   ROOT CAUSE: several theme rules set a literal #000000/black background via
   inline <style> blocks that render AFTER this plugin's stylesheet <link> in
   the page <head> (per-page style blocks are echoed inline by Elementor/
   RevSlider at render time, always late in <head>). Same-specificity
   selectors + !important => later-source-order wins the cascade tie, so a
   plain override here would silently lose. Selectors below intentionally
   match with equal-or-higher specificity chains so they win regardless of
   the per-page block's position in <head>.

   1) sr7-module (RevSlider container — the homepage hero image/text slider)
      — set via inline <style id="wp-custom-css"> as
      "sr7-module { background-color: black!important }"
   2) .herobanner:after (secondary/interior page hero — About, Harrington,
      Peerless, Crosby, etc.) — set via a per-page inline <style> block as
      ".herobanner:after { background-color: #000000; }"
   -------------------------------------------------------------------------- */
sr7-module.sr7-module,
body sr7-module {
	background-color: var(--cmco-midnight-blue) !important;
}

html body .herobanner:after,
html body.page .herobanner:after {
	background-color: var(--cmco-midnight-blue) !important;
}

/* ==========================================================================
   5. BUTTONS — kc-btn family (used sitewide per grep of theme templates)
   ========================================================================== */

.kc-btn,
.kc-btn-dark,
.kc-btn-primary,
a.kc-btn {
	background: var(--cmco-primary-blue) !important;
	background-image: none !important;
	border-color: var(--cmco-primary-blue) !important;
	color: #ffffff !important;
	font-family: var(--cmco-font-primary) !important;
	font-weight: 600 !important;
	border-radius: 2px !important; /* CMCO brand skews squarer/more geometric than legacy rounded KC buttons */
}

/* BUG FIX 2026-07-08 (round 2, per Adam: "the hover state on buttons is all
   wrong. the dark blue matches the bg color. esp in header and footer"):
   the ORIGINAL hover override below set the hover background to
   --cmco-midnight-blue (#00344f) — which is the EXACT same color as the
   header/footer/hero .bgblack background (also #00344f). Any kc-btn sitting
   on a header/footer background (e.g. "CHANNEL PARTNERS") became invisible
   on hover — button and backdrop turned identical color. Fixed by using
   --cmco-bright-blue-start (#009ade) instead: a lighter, on-brand accent
   (part of the official Bright Blue gradient token) that reads clearly
   against BOTH light page backgrounds AND the dark midnight-blue header/
   footer/hero backgrounds. */
.kc-btn:hover,
.kc-btn-dark:hover,
.kc-btn-light:hover,
a.kc-btn:hover {
	background: var(--cmco-bright-blue-start) !important;
	border-color: var(--cmco-bright-blue-start) !important;
	color: #ffffff !important;
}

/* WooCommerce buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button {
	background-color: var(--cmco-primary-blue) !important;
	color: #ffffff !important;
	border-radius: 2px !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--cmco-midnight-blue) !important;
}

/* --------------------------------------------------------------------------
   5b. BUTTON TEXT COLOR — fix inherited-color stomp inside grey sections
   (per Adam, 2026-07-08: "on /industries/ see the differing 'learn' and
   'more' button text colors" — e.g. Aquaculture/Construction/Entertainment
   "Learn More" buttons).

   ROOT CAUSE: the theme's grey-background helper rule
     .bggrey * { color: black; }
   is a plain (non-!important) rule, but it targets the button's inner
   <span class="d-none d-xxl-inline">Learn </span> DIRECTLY. Our .kc-btn
   color:#fff!important rule is set on the <a> itself, and reaches the span
   only via CSS inheritance — and inheritance ALWAYS loses to any explicit
   rule matching the element, regardless of specificity or !important. So
   inside a .bggrey card, "Learn " renders black while "More" (a bare text
   node, not wrapped in its own span) stays inherited-white — hence the two
   different colors in the same button.
   FIX: force every descendant of a kc-btn family button to explicitly
   inherit the button's own color, beating .bggrey * outright. */
.kc-btn *,
.kc-btn-light *,
.kc-btn-dark *,
.kc-btn-primary * {
	color: inherit !important;
}

/* ==========================================================================
   6. LINKS
   ========================================================================== */

a {
	color: var(--cmco-primary-blue);
}

a:hover {
	color: var(--cmco-midnight-blue);
}

/* ==========================================================================
   7. FOOTER TAGLINE — "Intelligent Motion"
   Injected via PHP hook (see class-cmco-footer-tagline.php); styled here.
   ========================================================================== */

.cmco-footer-tagline {
	font-family: var(--cmco-font-primary) !important;
	font-weight: 300;
	font-size: 0.85rem;
	color: #ffffff;
	opacity: 0.85;
	letter-spacing: 0.03em;
	margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   7b. FOOTER MERGER STATEMENT — "Kito Crosby is now Columbus McKinnon"
   Injected via PHP hook (cmco_rebrand_footer_statement_script); styled here.
   -------------------------------------------------------------------------- */

.cmco-footer-statement {
	font-family: var(--cmco-font-primary) !important;
	font-weight: 300;
	font-size: 0.8rem;
	color: #ffffff;
	opacity: 0.75;
	/* CLIENT FEEDBACK (Michael/KC, 2026-07-13): "add more white space below the
	   [footer] logo to separate it from 'Kito Crosby is now CMCO. Learn more.'"
	   The "Intelligent Motion" tagline that used to sit between them was removed
	   in v0.8.0, so this statement now sits directly under the footer logo.
	   !important: this <p> is a direct child of a Bootstrap `.row`, whose
	   `.row > * { margin-top: var(--bs-gutter-y) }` rule ties this class on
	   specificity (both one class) and resolves the gutter to 0 — pixel-verified
	   it flattened our margin to 0. Forcing it guarantees the separation. */
	margin-top: 1.75rem !important;
	max-width: 640px;
}

/* --------------------------------------------------------------------------
   7c. /BRANDS PROMO WIDGET — "See all of CMCO's leading product brands"
   Injected via PHP hook (cmco_rebrand_brands_promo_widget_script), brands page
   only. Stylized full-bleed hero banner appended under the 6 brand cards: the
   Dorner System photo fills the card, a midnight-blue diagonal gradient scrim
   sits on top for legibility, and the content (gradient "Our Brands" eyebrow +
   large white headline + custom "More" pill) is overlaid left. On hover the
   photo scales subtly, the scrim deepens, and the button arrow slides. All
   colors from the CMCO Brand Guide tokens. Per client 2026-07-13; restyled
   2026-07-13 per Adam ("make it prettier").
   -------------------------------------------------------------------------- */

.cmco-brands-promo {
	margin-top: 2.75rem;
	/* The theme's parent `.container` uses `overflow: hidden` with only ~12px
	   side padding, which clips this card's drop-shadow into a hard vertical
	   line on both edges. Inset the card so the shadow renders fully inside the
	   clip boundary, and use negative-spread shadows below so their sideways
	   reach stays within that inset (no clip on either edge). */
	padding: 0 16px 30px;
}

.cmco-brands-promo-link,
.cmco-brands-promo-link:hover,
.cmco-brands-promo-link:focus {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 340px;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none !important;
	background: var(--cmco-midnight-blue);
	/* Negative spread (-14) keeps the shadow's sideways reach (30-14=16px) within
	   the 16px wrapper inset, so the parent container's overflow:hidden never
	   clips it into a hard vertical line. */
	box-shadow: 0 16px 30px -14px rgba(0, 52, 79, 0.45);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
	isolation: isolate;
}

.cmco-brands-promo-link:hover {
	box-shadow: 0 24px 44px -16px rgba(0, 52, 79, 0.55);
	transform: translateY(-3px);
}

/* Photo layer — absolutely fills the card, scales up gently on hover. */
.cmco-brands-promo-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1.02);
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cmco-brands-promo-link:hover .cmco-brands-promo-bg {
	transform: scale(1.08);
}

/* Midnight-blue diagonal gradient scrim for headline contrast. */
.cmco-brands-promo-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(0, 52, 79, 0.94) 0%, rgba(0, 52, 79, 0.72) 42%, rgba(0, 52, 79, 0.12) 78%, rgba(0, 52, 79, 0) 100%),
		linear-gradient(0deg, rgba(0, 52, 79, 0.55) 0%, rgba(0, 52, 79, 0) 55%);
	transition: opacity 0.35s ease;
}

.cmco-brands-promo-link:hover .cmco-brands-promo-scrim {
	opacity: 0.92;
}

/* Overlaid content block, left-aligned. */
.cmco-brands-promo-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	max-width: 620px;
	padding: 2.75rem 2.75rem 2.75rem 3rem;
}

/* Eyebrow with a short bright-blue gradient accent bar to its left. */
.cmco-brands-promo-kicker {
	display: inline-flex;
	align-items: center;
	font-family: var(--cmco-font-primary) !important;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff;
	opacity: 0.95;
}

.cmco-brands-promo-kicker::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 3px;
	margin-right: 0.75rem;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--cmco-bright-blue-start), var(--cmco-bright-blue-end));
}

.cmco-brands-promo-text {
	font-family: var(--cmco-font-primary) !important;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.15;
	color: #ffffff !important;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 20, 34, 0.35);
}

/* Custom pill button — white on a bright-blue gradient, arrow slides on hover.
   Deliberately NOT reusing .kc-btn here so we fully control the on-photo look. */
.cmco-brands-promo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.35rem;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	font-family: var(--cmco-font-primary) !important;
	font-weight: 600;
	font-size: 0.95rem;
	color: #ffffff !important;
	background: linear-gradient(90deg, var(--cmco-bright-blue-start), var(--cmco-bright-blue-end));
	box-shadow: 0 6px 18px rgba(0, 102, 186, 0.4);
	transition: box-shadow 0.3s ease, filter 0.3s ease;
}

.cmco-brands-promo-link:hover .cmco-brands-promo-btn {
	filter: brightness(1.08);
	box-shadow: 0 8px 24px rgba(0, 102, 186, 0.55);
}

.cmco-brands-promo-arrow {
	display: inline-block;
	font-size: 1.15rem;
	line-height: 1;
	transform: translateX(0);
	transition: transform 0.3s ease;
}

.cmco-brands-promo-link:hover .cmco-brands-promo-arrow {
	transform: translateX(4px);
}

/* Mobile: stack taller, ease the padding, let the scrim cover more so text
   never fights the photo on narrow screens. */
@media (max-width: 767px) {
	.cmco-brands-promo-link {
		min-height: 300px;
	}
	.cmco-brands-promo-scrim {
		background:
			linear-gradient(90deg, rgba(0, 52, 79, 0.92) 0%, rgba(0, 52, 79, 0.72) 60%, rgba(0, 52, 79, 0.4) 100%),
			linear-gradient(0deg, rgba(0, 52, 79, 0.6) 0%, rgba(0, 52, 79, 0) 60%);
	}
	.cmco-brands-promo-content {
		padding: 2rem 1.75rem;
		max-width: 100%;
	}
	.cmco-brands-promo-text {
		font-size: 1.55rem;
	}
}

/* ==========================================================================
   8. LOGO SIZING GUARDS
   Guide specifies min clearspace ½X and min size ¾" (72px @96dpi web equiv).
   Existing header/footer <img> inline styles are left as-is (theme controls
   layout box); this just guards against the new asset's aspect ratio
   causing unexpected overflow if theme CSS assumed the old logo's ratio.
   ========================================================================== */

.headerlogo img,
a.headerlogo img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	object-position: left center; /* BUG FIX 2026-07-08: theme's old inline style
		(object-fit:contain with default center position, combined with the
		asset's own transparent padding) let the logo visually drift away from
		the container's left edge on some viewports. Forcing left alignment
		keeps it flush with the nav container's left rail, matching the footer
		logo/container alignment. */
}

/* BUG FIX 2026-07-08 (round 2, per Adam: "space under logo above
   'intelligent motion' in footer"): the footer logo <img> is inline
   (default) inside its block-level <a> wrapper. ANY inline (non-block,
   non-inline-block) image sits on a text baseline, which reserves descender
   space below it — a well-known CSS phenomenon ("phantom gap under
   images") independent of the image file's own content/padding. That
   baseline gap was stacking visually between the logo and the
   ".cmco-footer-tagline" div injected right after it. Setting the image to
   display:block removes it from the inline text flow entirely, collapsing
   the gap to zero. */
footer a[href="/"] img {
	display: block;
}

/* ==========================================================================
   9. NAV BRAND STRIP — remove the 6 small sub-brand logos from the header
   nav (per Adam, 2026-07-08: "remove the 6 tiny brands from nav"). These are
   the Kito/Crosby/Harrington/Gunnebo/Peerless/eepos icons rendered above the
   main nav row in .headercompanies (header.php markup, theme-owned — hidden
   here rather than edited, per the zero-theme-file-edit constraint).
   Targeted by literal href (most robust — independent of lazysizes class
   swaps and of the theme's invalid-but-browser-tolerated <a><li><img></li></a>
   nesting). Only the 6 brand icons are hidden — the "CHANNEL PARTNERS" link
   that also lives inside .headercompanies is left visible (Adam did not ask
   for that to be removed).
   ========================================================================== */

.headercompanies a[href="/kito/"],
.headercompanies a[href="/crosby/"],
.headercompanies a[href="/harrington/"],
.headercompanies a[href="/gunnebo/"],
.headercompanies a[href="/peerless/"],
.headercompanies a[href="/eepos/"] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   9b. "ALL BRANDS" NAV ITEM — add a link under the top-level "Brands" nav
   dropdown to the corporate cmco.com brand hub (per Adam, 2026-07-08:
   "add an 'all brands' item under brands top level menu that goes to
   https://www.cmco.com/en-us/our-brands/"). The Brands dropdown is rendered
   by the MaxMegaMenu plugin from the WP menu data structure (theme-owned,
   editable only through the WP admin Menus screen or the mega menu's own
   settings) — not a static template we can safely hand-edit here, so the
   item is appended client-side to match the zero-theme-file-edit
   constraint used throughout this plugin (see logo swap notes above for
   the same rationale). Styled to visually match the other mega-menu-link
   items it sits alongside (Kito/Crosby/Harrington/Gunnebo/Peerless/eepos),
   plus a divider line and slightly bolder weight so it reads as the
   "see everything" catch-all rather than a 7th product-brand peer.
   -------------------------------------------------------------------------- */

.cmco-all-brands-item {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 4px;
}

.cmco-all-brands-item > a.mega-menu-link {
	font-weight: 700 !important;
}

/* ==========================================================================
   9c. THIRD BLACK DECORATIVE SVG — /imgs/resource-card-overlay.svg
   (per Adam, 2026-07-08: "on peerless/ some shapes are still black"). This
   is a THIRD instance of the same "externally-referenced SVG with no
   explicit fill defaults to black" bug documented in section 9/PHP file
   header for brandoverlay.svg and hero-banner-overlay-black.svg — missed
   in round 1 because it's applied as a CSS ::before background-image
   (.rescard:before { background-image: url('/imgs/resource-card-overlay.svg');
   }, theme's style.css) rather than an <img> tag, so it didn't show up in
   the original DOM sweep for <img src="*.svg"> elements. It renders on the
   "Product Catalogs / Training / Engineered Solutions / Resources & Tools"
   cards used on Peerless, Industries, and other brand/product pages.
   Because ::before is a real CSS pseudo-element (not a swappable <img>),
   this one IS reachable by a plain CSS override — no client-side JS swap
   needed here, unlike the other two. */

.rescard:before {
	background-image: url('../svgs/resource-card-overlay-cmco.svg') !important;
}

/* ==========================================================================
   9d. TWO LOGO ASSETS TO REMOVE SITEWIDE (per Adam, 2026-07-08):
     1. /wp-content/uploads/2023/09/ryw-logoindustries.svg — "Raise Your
        World" campaign logo shown at the bottom of the Industries/product
        pages (the .rywlogo image in the "container rywcontainer" section).
     2. /smallplainlogo.svg — small centered brand mark shown above the
        "Together we lift..." headline on several pages, AND used as the
        password-protected-page placeholder background-image
        (.post-password-form:before in theme's style.css — left untouched,
        that's an unrelated internal admin-only screen, not a public page).
   Both are legacy Kito Crosby brand marks (old shackle/hook icon), not part
   of the CMCO identity — hidden via CSS rather than PHP template edits.
   ========================================================================== */

img.rywlogo,
img[src*="ryw-logoindustries.svg"],
img[data-src*="ryw-logoindustries.svg"] {
	display: none !important;
}

img[src="/smallplainlogo.svg"],
img[data-src="/smallplainlogo.svg"] {
	display: none !important;
}

/* ==========================================================================
   11. LEARN/MORE FONT-WEIGHT MISMATCH (per Adam, 2026-07-08, follow-up
   punch-list — /industries/): same root-cause SHAPE as the round-3 color
   fix (5b above) but a DIFFERENT property. The global rule
     body, p, li, a, span, .smbodytext { font-weight: 300; }
   (section 3 of this file) matches the inner
     <span class="d-none d-xxl-inline">Learn </span>
   DIRECTLY, while the bare "More" text node has no element of its own to
   match and so inherits font-weight:600 from .kc-btn — same "explicit
   match on the child always beats inherited value from the parent"
   mechanism documented in 5b, just font-weight instead of color this time.
   Fixed with the same "force every descendant to re-declare explicitly"
   pattern, extended to include font-weight.
   ========================================================================== */

.kc-btn *,
.kc-btn-light *,
.kc-btn-dark *,
.kc-btn-primary * {
	font-weight: inherit !important;
}

/* ==========================================================================
   12. BUTTON CARET DEFAULT COLOR (per Adam, 2026-07-08: "on /industries/
   ...the right-facing caret is black — change it to white" AND on
   /careers/: "the caret is black and should be white in its default
   (pre-hover) state").

   ROOT CAUSE: theme's .kc-btn-light::after rule uses btn-carat-black.svg
   (stroke:#000) by DEFAULT, and only swaps to btn-carat-light-1.svg
   (stroke:#fff) ON HOVER — backwards from what the CMCO-blue-background
   buttons need, since .kc-btn-light now sits on a colored background at
   all times (not white-by-default like the legacy theme assumed), so a
   black caret is low-contrast/wrong from first paint, not just on hover.
   Used on: Industries page "Learn More" buttons + Careers "See All Open
   Positions" button — same theme selector, one CSS fix covers both.
   Uses the theme's OWN existing white-caret asset (no new SVG needed).
   ========================================================================== */

.kc-btn-light::after {
	background-image: url('/wp-content/uploads/2023/08/btn-carat-light-1.svg') !important;
}

/* ==========================================================================
   13. CAREERS PAGE (per Adam, 2026-07-08):
     a) "Filter by Location" box — inline style="background-color:black"
        on the theme's .row (not a class) — needs an attribute selector
        since inline styles beat class-based CSS specificity, but our
        !important still wins the cascade.
     b) "See All Open Positions" button padding — bumped generously beyond
        the theme's base .kc-btn padding (10px/30px) to read as more
        substantial, matching the visual weight Adam is asking for.
   ========================================================================== */

div.px-5.pt-3.pb-3.mb-3[style*="background-color: black"],
div.px-5.pt-3.pb-3.mb-3[style*="background-color:black"] {
	background-color: var(--cmco-midnight-blue) !important;
}

.location-filter-container {
	background-color: var(--cmco-midnight-blue) !important;
}

a.kc-btn.kc-btn-light[href*="workforcenow.adp.com"] {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	padding-left: 42px !important;
	padding-right: 42px !important;
}

/* ==========================================================================
   14. "SEE PRODUCTS" LINKS ON /product-categories/ DON'T MATCH SITE BUTTON
   STYLE (per Adam, 2026-07-08: "Crosby product buttons don't match the
   site's blue button style... they are not using the kc-btn class").

   ROOT CAUSE CONFIRMED: these <a><span>See Products</span></a> links (18
   instances on /product-categories/) have a completely EMPTY class
   attribute in the raw HTML — not a wrong class, no class at all. They
   render via the theme's OWN dedicated selector
   (.product-detail-link a: black text, black 2px border, plain ">" char),
   a legitimate separate design that was never brought in line with the
   CMCO blue-button system. Rather than a risky JS class-injection into
   18 template-generated nodes, this CSS override re-skins the theme's
   own selector to visually match .kc-btn (same bg/color/radius/font
   tokens as section 5 above) without touching the HTML/template.
   ========================================================================== */

.listpage-product-section .product-box-section .product-list-box .product-content .right-section .inner-content .product-detail-link a {
	background: var(--cmco-primary-blue) !important;
	border-color: var(--cmco-primary-blue) !important;
	color: #ffffff !important;
	border-radius: 2px !important;
	font-family: var(--cmco-font-primary) !important;
	font-weight: 600 !important;
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.listpage-product-section .product-box-section .product-list-box .product-content .right-section .inner-content .product-detail-link a:hover {
	background: var(--cmco-bright-blue-start) !important;
	border-color: var(--cmco-bright-blue-start) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   15. "AUTHENTICATE YOUR PRODUCT" ICON BROKEN/MISSING (per Adam, 2026-07-08,
   confirmed his own hunch: "may be related to the icon library migration").

   ROOT CAUSE: markup uses `fa-sharp fa-thin fa-file-certificate` — BOTH
   the "Sharp" style family AND the specific "file-certificate" glyph are
   FontAwesome PRO-only. This site's actual loaded FA kit is the FREE CDN
   release (use.fontawesome.com/releases/v6.4.2/css/all.css, confirmed via
   direct fetch — zero fa-sharp/fa-thin icon definitions, zero
   fa-file-certificate glyph at all, Pro or free). The icon has been
   rendering as an empty/invisible box since whoever authored this markup
   assumed a Pro FA license was active. Swapped to `fa-solid fa-certificate`
   — confirmed present and free (content: "\f0a3" in the same all.css).
   Appears on /product-categories/ AND single WooCommerce product pages
   (shared template partial) — one fix covers both per Adam's ask.
   ========================================================================== */

.left-section-link .icon i.fa-sharp.fa-thin.fa-file-certificate,
.left-section-link .icon i[class*="file-certificate"] {
	font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Pro", "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
}
.left-section-link .icon i.fa-sharp.fa-thin.fa-file-certificate::before,
.left-section-link .icon i[class*="file-certificate"]::before {
	content: "\f0a3" !important; /* fa-certificate (Solid, free) */
}

/* ==========================================================================
   16. TRAINING ALLIANCE PROGRAM — "Who are potential members?" section
   (per Adam, 2026-07-08):
     a) Text renders BLACK on the .bgblack (now CMCO Midnight Blue) section
        — this section's plain <h5>/<li> elements were never given an
        explicit white color anywhere (unlike hero titles which use
        .gradtext or similar), so they fall back to the browser default
        black, which is now unreadable against the dark-blue section bg.
     b) Bullet list misalignment: <ul> has no explicit list-position/
        text-align, and the surrounding .text-center context does NOT
        cascade into it (text-align is inherited, but the <li> content is
        wrapped in nested <div class="col-*"> flex/grid children that
        reset it) — bullets render browser-default left-justified while
        the <h5> text inside visually appears centered from parent
        classes, creating the "bullets left, text centered" mismatch.
   Fixed by forcing white text + consistent left-aligned list markers
   (matches bullet convention used elsewhere on the site, e.g. quality
   page's .ul1/.li1 lists) so bullets and text agree on ONE alignment
   rather than fighting each other.
   NOTE: also fixed a separate, structural bug on this same page — 2
   unclosed <div> tags in the "Our Training Alliance Members" logo-grid
   content block were trapping every section after it (including this one
   and the footer) inside a narrower container than intended. That was a
   raw post_content HTML fix (page ID 2677), not a CSS fix — see vault
   Clients/kitocrosby.md for detail; not repeatable via this stylesheet.
   ========================================================================== */

section.bgblack ul li,
section.bgblack ul li h5,
section.bgblack ul li span {
	color: #ffffff !important;
	text-align: left !important;
}

section.bgblack ul {
	list-style-position: outside;
	padding-left: 1.5em;
	text-align: left !important;
}

/* ==========================================================================
   10. NOTES / KNOWN EXCEPTIONS (see QA todo — colors intentionally NOT
      touched here because they are set per-element via Elementor's own
      inline widget settings, not this global stylesheet; those pages are
      swept individually per Adam's "PHP/CSS scope, not deep Elementor"
      instruction — flag list maintained in plugin's admin notice)
   ========================================================================== */

/* ==========================================================================
   17. CLIENT FEEDBACK (Michael/KC checkin, 2026-07-10): drop the orange/red-gold
       TEXT fill site-wide -> CMCO Midnight Blue. Client: "Change text (e.g.
       'Building Construction Products' labels) from current color to blue or
       black across the entire site; icons and gradient bars can stay as-is."

       ROOT CAUSE of the "orange text": the theme paints certain headings with
       a red->gold gradient CLIPPED to the text via
       `background: -webkit-linear-gradient(180deg,#dd0000,#ffbb00);
        -webkit-background-clip:text; -webkit-text-fill-color:transparent;`
       on the `.gradient-text` class (industry pages: "<X> Products",
       "<Industry> brands power...", "Featured Projects and Applications", the
       404 label, etc.).

       FIX: neutralize the gradient text-fill and paint the text solid CMCO
       Midnight Blue. We must override BOTH the gradient background AND the
       -webkit-text-fill-color (which otherwise keeps the glyphs transparent
       and beats `color`). We deliberately DO NOT touch:
         - `.blackicons i` (icons — client said leave icons alone)
         - `.anim-gradient` / gradient BARS/shapes (decorative bars — leave)
       Only text-bearing `.gradient-text` is retargeted.
   ========================================================================== */

.gradient-text {
	/* kill the red/gold gradient fill */
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	/* paint the glyphs solid CMCO Midnight Blue (reads crisp on the white
	   page background these headings sit on) */
	-webkit-text-fill-color: var(--cmco-midnight-blue) !important;
	color: var(--cmco-midnight-blue) !important;
}

/* Any inline <a>/<span> nested inside a .gradient-text heading (e.g. the
   anchor Notion/Elementor injects mid-title) inherits the same treatment so
   the whole heading is one consistent color, not a two-tone line. */
.gradient-text a,
.gradient-text span {
	-webkit-text-fill-color: var(--cmco-midnight-blue) !important;
	color: var(--cmco-midnight-blue) !important;
	background: none !important;
	background-image: none !important;
}

/* ==========================================================================
   17b. ICON EXEMPTION (client Michael/KC, 2026-07-10 follow-up, per Adam:
        "the icons can still be the gradients. and also on the industry
        sector pages like construction").

   ROOT CAUSE of the regression: section 17 above flattens EVERY
   `.gradient-text` element to solid Midnight Blue — but `.gradient-text` is
   overloaded in this theme. It's used on TWO different kinds of element:
     (a) TEXT HEADINGS  — e.g. "<X> Products", "Featured Projects and
         Applications", the 404 label. Client DID want these solid blue.
     (b) ICON GLYPHS   — FontAwesome <i class="fa-... gradient-text"> marks
         (9 distinct glyphs sitewide: fa-badge-check = "Authenticate your
         product" starburst, fa-file-certificate = "Verify authenticity"
         ID-card, plus box-open, boxes-packing, bullhorn, graduation-cap,
         link, headset). Client wants these to KEEP the orange gradient
         ("icons and gradient bars can stay as-is").
   Section 17 caught BOTH, so the FA icons on the where-to-buy card block
   (BlokCam/Straightpoint) AND the WooCommerce product/category templates
   went solid slate-blue. The two <img>-referenced SVG icons in the same
   block (book-icon.svg, location) were unaffected — an <img> SVG can't be
   recolored by page CSS — which is why only 2 of the 4 cards changed and
   the inconsistency was visible.

   DISCRIMINATOR: only the ICON usage ever carries an `fa-*` class alongside
   `.gradient-text`; the text-heading usage never does. So we re-exempt any
   `.gradient-text` that is ALSO a FontAwesome glyph and restore the theme's
   ORIGINAL orange text-fill gradient on it (same 180deg #dd0000->#ffbb00
   the theme used, reproduced here since section 17 nuked the theme rule).
   Text headings keep the section-17 blue; icons return to gradient.
   Reversible: delete this 17b block to go back to all-blue.
   ========================================================================== */

i.gradient-text,
i[class*="fa-"].gradient-text,
[class*="fa-"].gradient-text,
.icon i.gradient-text {
	/* restore the theme's original red/gold gradient, clipped to the glyph */
	background: -webkit-linear-gradient(180deg, #dd0000, #ffbb00) !important;
	background-image: -webkit-linear-gradient(180deg, #dd0000, #ffbb00) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	/* `color` is the non-webkit fallback; keep it in the orange family so
	   browsers that ignore -webkit-text-fill still render an on-brand tint
	   rather than the section-17 blue. */
	color: #f60 !important;
}

/* Weglot language switcher used the SAME red/gold text-fill, but it sits in
   the DARK header (midnight-blue background), so blue-on-blue would vanish.
   Repaint it WHITE (its own rule already declares color:white as the fallback
   under the gradient — we just make that the actual visible fill). */
.weglot-language * {
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #ffffff !important;
	color: #ffffff !important;
}

/* ==========================================================================
   18. CLIENT REQUEST (Michael/KC, 2026-07-10): hide the big interactive
       "Boost" world-map iframe on the /about/ page FOR NOW.

       The map is #iframe-wrapper > iframe#responsive-iframe (1280x720),
       src kito-crosby-boost.azurewebsites.net, sitting between the stat
       numbers and the "A legacy of more than 260 years" section. Client
       wants it hidden temporarily (not deleted). CSS-hide the WRAPPER (not
       just the iframe) so the whole block collapses with no empty gap left
       behind, and scope it to the About page template only so no other page
       that reuses #iframe-wrapper (e.g. the Boost embed elsewhere) is
       affected. Fully reversible: delete this block to restore.
   ========================================================================== */
.page-template-page-about #iframe-wrapper {
	display: none !important;
}


/* ==========================================================================
   19. MOBILE HERO CROWDING + DIAGONAL-OVERLAP FIX
       .default-herosection h1  (2026-07-20, rev2)

       The shared industries-template hero (page-industries.php:
       <h1 class="gradtext fw-800"> pulling ACF page_head, inside
       .container.height-340.d-flex.align-items-end) has a full-width
       diagonal photo overlay (hero-banner-overlay SVG, dark CMCO-blue
       wedge on the left, photo showing through the bottom-right triangle).

       Two mobile bugs:
       (a) NO mobile font-size cap -> h1 rendered at desktop 48px, the
           longest line ~516px wide on a 390px screen, crowding under the
           nav and overflowing.
       (b) Even at a reduced size, the ACF page_head hardcodes <br> line
           breaks that produce LONG lines (e.g. "Find your local sales"
           = 328px) which run PAST the diagonal edge and sit on top of the
           photo -- unreadable white-on-photo. The diagonal cuts further
           left as it descends, so long lines can't clear it at any
           vertical position.

       Fix (<=990px): cap font to 26px, neutralize the hardcoded <br>s so
       the browser wraps on WIDTH instead, and constrain the h1 to a
       ~190px column that stays inside the dark wedge. Result: the heading
       wraps to short lines fully on the blue, clear of the photo, with a
       clean top gap. Scoped to this hero only; reversible by deleting
       this block. Applies to every industries-template page (locator,
       mining, construction, certificates, etc.) which all share it -- the
       max-width simply gives short headings extra whitespace and forces
       long ones to wrap safely left of the diagonal.
   ========================================================================== */
@media screen and (max-width: 990px) {
	.default-herosection h1.gradtext,
	.default-herosection h1 {
		font-size: 26px !important;
		line-height: 1.2 !important;
		max-width: 190px !important;
	}
	/* neutralize the ACF-authored hard line breaks so text wraps on width */
	.default-herosection h1.gradtext br,
	.default-herosection h1 br {
		display: none !important;
	}
}


/* ==========================================================================
   20. CATEGORY-PAGE INFO-CARD ICONS: force fa-sharp → Sharp Thin
       (2026-07-20)

       Product-category pages (e.g. /product-category/load-monitoring/) have
       four info cards; two use FontAwesome icons authored as
       `fa-sharp gradient-text fa-<name> fa-solid`
       (fa-certificate = "Authenticate your product",
        fa-badge-check  = "Verify authenticity of a certificate").

       BUG: the theme markup pairs `fa-sharp` with `fa-solid`. The Free FA
       CSS + megamenu's bundled FA both pin `.fa-solid { font-family:
       "Font Awesome 6 Free"; font-weight:900 }` at a specificity our §3
       Pro-family stack doesn't beat for these, so:
         - fa-certificate rendered as the FREE SOLID seal (thick/wrong), and
         - fa-badge-check (Pro-only glyph) rendered as an EMPTY TOFU BOX.

       FIX: for the `.gradient-text.fa-sharp` info-card icons, force the kit's
       Sharp family at weight 100 (Thin) so both resolve from Font Awesome 6
       Sharp Thin — matching the intended thin line-art look of the other
       hero icons. Scoped to `.gradient-text.fa-sharp` ONLY, so it does not
       touch the already-correct `fa-sharp fa-thin` icons elsewhere or any
       intentionally-solid icons. The gradient fill (background-clip:text)
       is unaffected. Requires the Pro kit (b5ecd5d44d) to be loaded — see
       §3 note + kc-security fa_kit. Reversible by deleting this block.
   ========================================================================== */
i.fa-sharp.gradient-text, .gradient-text.fa-sharp,
i.fa-sharp.gradient-text::before, .gradient-text.fa-sharp::before {
	font-family: "Font Awesome 6 Sharp" !important;
	font-weight: 100 !important;
}