/*!
 * Becker Robotic — "New Website Alternative" skin
 * ================================================
 * Loaded AFTER every other theme stylesheet (see inc/enqueue.php) and
 * restyles the site to Monica's 2026 design-note direction without touching
 * template structure:
 *   - Arial (regular-weight headlines; bold only for small details)
 *   - pill-shaped outline buttons that fill solid on hover
 *   - flat corners, hairline cards, no glows/heavy shadows
 *   - light-gray #F5F5F5 ground, open compositions
 *   - grayscale client-logo marquee + animated stat counters
 * Scope: global token layer + the five showcase pages' sections. Other
 * pages inherit tokens/buttons/typography but keep their dev layouts.
 */

/* --------------------------------------------------------------------------
 * 1. TOKEN OVERRIDES
 * ------------------------------------------------------------------------ */
:root {
	--becker-font: Arial, Helvetica, sans-serif;

	/* Flat, catalog-like surfaces */
	--becker-radius-card: 0px;
	--becker-shadow-card: none;
	--becker-shadow-card-hover: 0 10px 26px rgba(44, 43, 48, 0.08);
	--becker-shadow-btn-red: none;
	--becker-shadow-btn-charcoal: none;

	/* Flat brand red instead of gradients */
	--becker-grad-primary: linear-gradient(135deg, #CC0033, #CC0033);
	--becker-grad-charcoal: linear-gradient(135deg, #2C2B30, #2C2B30);

	/* Larger, lighter display type */
	--becker-fs-display: clamp(34px, 4.4vw, 54px);
	--becker-fs-h2: clamp(26px, 3vw, 38px);
	--becker-fs-h3: 20px;
}

/* --------------------------------------------------------------------------
 * 2. BASE TYPOGRAPHY — regular-weight headings, balanced wrapping
 * ------------------------------------------------------------------------ */
h1, h2, h3, h4,
.hero__title,
.page-hero__title,
.page-section__title,
.contact__title,
.closing-cta__title,
.pillar-card__title,
.product-card__title,
.brand-card__name,
.next-card__title,
.offices-card__title,
.offices-card__region-title {
	font-weight: 400;
	text-wrap: balance;
	letter-spacing: -0.01em;
}

/* Bold survives only as a small-detail accent */
strong, b { font-weight: 700; }

/* --------------------------------------------------------------------------
 * 3. BUTTONS — pill outline; solid fill + white text on hover
 * ------------------------------------------------------------------------ */
.btn,
.btn-quote,
.product-card__add,
.shop-teaser__browse {
	border-radius: 999px;
	box-shadow: none;
	font-weight: 400;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.btn--primary,
.btn-quote {
	background: transparent;
	background-image: none;
	border: 1px solid var(--becker-red);
	color: var(--becker-red);
}
.btn--primary:hover,
.btn--primary:active,
.btn-quote:hover {
	background: var(--becker-red);
	background-image: none;
	border-color: var(--becker-red);
	color: var(--becker-white);
	box-shadow: none;
	transform: none;
}

.btn--secondary,
.btn--outline,
.product-card__add,
.shop-teaser__browse {
	background: transparent;
	background-image: none;
	border: 1px solid var(--becker-charcoal);
	color: var(--becker-charcoal);
}
.btn--secondary:hover,
.btn--outline:hover,
.product-card__add:hover,
.shop-teaser__browse:hover {
	background: var(--becker-charcoal);
	border-color: var(--becker-charcoal);
	color: var(--becker-white);
	box-shadow: none;
	transform: none;
}

/* On charcoal / teal bands */
.btn--ghost-dark {
	background: transparent;
	border: 1px solid #F2F2F3;
	color: #F2F2F3;
	border-radius: 999px;
}
.btn--ghost-dark:hover {
	background: #F2F2F3;
	border-color: #F2F2F3;
	color: var(--becker-charcoal);
	box-shadow: none;
}

/* WooCommerce buttons inherit the pill (shop.css sets its own radius) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 999px;
	box-shadow: none;
}

/* Form fields stay square — the pill is a button-only shape */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	border-radius: 0;
}

/* --------------------------------------------------------------------------
 * 4. EYEBROWS — small bold detail with the leading brand dash
 * ------------------------------------------------------------------------ */
.page-section__eyebrow,
.page-hero__eyebrow,
.hero__eyebrow,
.contact__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--becker-red);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.page-section__eyebrow::before,
.page-hero__eyebrow::before,
.hero__eyebrow::before,
.contact__eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: currentColor;
	flex: none;
}

/* --------------------------------------------------------------------------
 * 5. HEADER — flat light ground, pill quote button (structure untouched)
 * ------------------------------------------------------------------------ */
.site-header {
	background: var(--becker-bg-light);
	backdrop-filter: none;
	box-shadow: none;
	border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header--scrolled {
	border-bottom-color: var(--becker-border);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
 * 6. HOMEPAGE — hero
 * ------------------------------------------------------------------------ */
.hero--split {
	background: var(--becker-bg-light);
	padding-bottom: 0;
}
/* image sits flush on the hero's bottom edge; copy keeps its padding */
.hero--split .hero__inner {
	align-items: end;
	padding-bottom: 0;
}
.hero--split .hero__inner > div:first-child {
	align-self: center;
	padding-bottom: clamp(32px, 5vw, 64px);
}
.hero--split .hero__image {
	width: min(560px, 100%);
	height: auto;
	margin: 0 auto;
	display: block;
	align-self: end;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	background: transparent;
}
.hero__title { max-width: 16ch; }
.hero__lead { max-width: 58ch; }

/* --------------------------------------------------------------------------
 * 7. HOMEPAGE — trust strip: grayscale marquee + stat counters
 * ------------------------------------------------------------------------ */
.trust-strip { text-align: center; }
.trust-strip__label { display: block; text-align: center; }

.trust-strip__logos { overflow: hidden; }
.trust-strip__track {
	display: flex;
	width: max-content;
	animation: becker-alt-marquee 90s linear infinite;
}
.trust-strip__logos:hover .trust-strip__track { animation-play-state: paused; }
@keyframes becker-alt-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.trust-strip__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
	.trust-strip__set[aria-hidden="true"] { display: none; }
}

.trust-strip__set {
	display: flex !important; /* both copies visible => seamless -50% loop */
	align-items: center;
	gap: clamp(36px, 5vw, 72px);
	padding-right: clamp(36px, 5vw, 72px);
}

/* consistent visual scale; permanently grayscale — no color on hover */
.trust-strip__logo,
.trust-strip__logo--amazon {
	max-height: 40px;
	max-width: 190px;
	width: auto;
	height: auto;
	opacity: 0.6;
	filter: grayscale(1);
	transition: none;
}
.trust-strip__logo:hover,
.trust-strip__logo--amazon:hover {
	opacity: 0.6;
	filter: grayscale(1);
}

.trust-strip__certs { text-align: center; margin-top: 28px; }
.trust-strip__certs a { color: var(--becker-red); }

/* Animated counters, integrated near the top (JS: becker-alt.js) */
.trust-strip__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 4vw, 48px);
	margin-top: clamp(36px, 5vw, 60px);
}
@media (max-width: 720px) { .trust-strip__stats { grid-template-columns: 1fr; } }
.trust-strip__stat-num {
	font-size: clamp(34px, 4.5vw, 52px);
	line-height: 1.1;
	color: var(--becker-red);
	font-variant-numeric: tabular-nums;
}
.trust-strip__stat-lbl {
	margin-top: 8px;
	font-size: var(--becker-fs-body-sm);
	color: var(--becker-text-muted);
}
.trust-strip__stat-note {
	margin-top: 18px;
	font-size: var(--becker-fs-legal);
	color: var(--becker-text-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
 * 8. HOMEPAGE — Product & Services pillars: centered info, hairline cards,
 *    catalog column separators, icon covers image on hover
 * ------------------------------------------------------------------------ */
.pillars { background: var(--becker-white); }

.pillar-card {
	background: transparent;
	border: none;
	border-top: 1px solid var(--becker-dark-border);
	border-radius: 0;
	box-shadow: none;
	padding: 26px 0 0;
	text-align: center;
	position: relative;
	overflow: visible;
}
.pillar-card:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--becker-dark-border);
}
/* red line draws across the hairline on hover */
.pillar-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--becker-red);
	transition: width .35s ease;
}
.pillar-card:hover::before { width: 100%; }

/* catalog-style vertical separators between columns (3-col desktop grid) */
@media (min-width: 900px) {
	.pillars__grid .pillar-card:not(:nth-child(3n + 1)) {
		border-left: 1px solid var(--becker-border-soft);
		padding-left: clamp(18px, 2.4vw, 30px);
	}
	.pillars__grid .pillar-card:not(:nth-child(3n)) {
		padding-right: clamp(18px, 2.4vw, 30px);
	}
}

.pillar-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 18px;
}
.pillar-card__media .pillar-card__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform .4s ease;
	margin: 0;
}
.pillar-card:hover .pillar-card__media .pillar-card__image { transform: scale(1.04); }

/* brand icon covers the whole image on a light transparent wash */
.pillar-card__icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 14%;
	box-sizing: border-box;
	object-fit: contain;
	background: rgba(245, 245, 245, 0.88);
	opacity: 0;
	transition: opacity .25s ease;
}
.pillar-card:hover .pillar-card__icon { opacity: 1; }

.pillar-card__desc { margin-left: auto; margin-right: auto; }
.pillar-card__link { color: var(--becker-red); font-weight: 400; }

/* --------------------------------------------------------------------------
 * 9. HOMEPAGE — LHMS band, why-Becker, brands, applications, DCDI
 * ------------------------------------------------------------------------ */
.lhms { background: var(--becker-white); }
.lhms__image { border-radius: 0; box-shadow: none; }

.why-becker__point {
	border-left: 2px solid var(--becker-red);
	padding-left: 20px;
}
.why-becker__point-title { font-weight: 400; }

/* Brand cards — de-boxed: hairline top, name + colored underline + link */
.brand-card {
	background: transparent;
	border: none;
	border-top: 1px solid var(--becker-dark-border);
	border-radius: 0;
	box-shadow: none;
	padding: 26px 0 0;
	position: relative;
}
.brand-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--becker-red);
	transition: width .35s ease;
}
.brand-card:hover {
	border-color: var(--becker-dark-border);
	box-shadow: none;
	transform: none;
}
.brand-card:hover::before { width: 100%; }
.brand-card__name { font-weight: 400; letter-spacing: 0.03em; }
.brand-card__underline { border-radius: 0; transition: width .3s ease; }
.brand-card:hover .brand-card__underline { width: 64px; }
.brand-card__link { color: var(--becker-red); font-weight: 400; }

.app-card { border-radius: 0; box-shadow: none; }
.app-card__image { border-radius: 0; }

/* --------------------------------------------------------------------------
 * 10. HOMEPAGE — shop teaser & product cards (hairline, price/CTA row)
 * ------------------------------------------------------------------------ */
.shop-teaser__banner { display: none; } /* visuals must link to real items */

.product-card {
	background: transparent;
	border: none;
	border-top: 1px solid var(--becker-dark-border);
	border-radius: 0;
	box-shadow: none;
	padding: 22px 0 0;
	position: relative;
}
.product-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--becker-red);
	transition: width .35s ease;
}
.product-card:hover::before { width: 100%; }
.product-card:hover { box-shadow: none; transform: none; }
.product-card__image {
	border-radius: 0;
	mix-blend-mode: multiply;
}
.product-card__category {
	color: var(--becker-text-muted);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: var(--becker-fs-micro);
}
.product-card__add { padding: 10px 20px; }

/* --------------------------------------------------------------------------
 * 11. HOMEPAGE — proof band: darker overlay, white accents (readability)
 * ------------------------------------------------------------------------ */
.proof__overlay,
.proof__scrim {
	background: linear-gradient(90deg, rgba(37, 36, 41, 0.94) 0%, rgba(37, 36, 41, 0.72) 55%, rgba(37, 36, 41, 0.3) 100%);
}
.proof .page-section__eyebrow,
.proof__eyebrow { color: var(--becker-white); }
.proof a { color: var(--becker-white); }

/* --------------------------------------------------------------------------
 * 12. CLOSING CTA — centered
 * ------------------------------------------------------------------------ */
.closing-cta { text-align: center; }
.closing-cta__actions { justify-content: center; }

/* --------------------------------------------------------------------------
 * 13. CONTACT / LOCATIONS — open office blocks (regional groups stay)
 * ------------------------------------------------------------------------ */
.offices-card {
	border-radius: 0;
	box-shadow: none;
}
.offices-card__list > div {
	border-left: 1px solid var(--becker-dark-border);
	padding-left: 18px;
}
.offices-card__region-title {
	color: var(--becker-red);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: var(--becker-fs-caption);
}

/* Map already carries the alternative styling in contact.css (star HQ,
 * hover cards, legend) — only the frame flattens via the card tokens. */
.locations-map { border-radius: 0; box-shadow: none; }

/* --------------------------------------------------------------------------
 * 14. LHMS PRODUCT PAGE (page-lhms.php) — alt-native section styles
 * ------------------------------------------------------------------------ */
.alt-lhms-hero {
	background: var(--becker-bg-light);
	padding: clamp(48px, 7vw, 96px) 0 0;
}
.alt-lhms-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 820px) { .alt-lhms-hero__grid { grid-template-columns: 1fr; } }
.alt-lhms-hero__img { width: 100%; height: auto; mix-blend-mode: multiply; }

.alt-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 44px);
	padding: clamp(36px, 5vw, 64px) 0;
}
@media (max-width: 720px) { .alt-stat-row { grid-template-columns: 1fr; } }
.alt-stat {
	border-top: 2px solid var(--becker-red);
	padding-top: 16px;
}
.alt-stat__num { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; color: var(--becker-red); }
.alt-stat__lbl { margin-top: 8px; color: var(--becker-text-muted); font-size: var(--becker-fs-body-sm); }

.alt-feature-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	padding: clamp(32px, 5vw, 56px) 0;
}
.alt-feature-row + .alt-feature-row { border-top: 1px solid var(--becker-border-soft); }
.alt-feature-row--flip .alt-feature-row__media { order: 2; }
.alt-feature-row__media img { width: 100%; height: auto; mix-blend-mode: multiply; }
.alt-feature-row__kicker {
	font-size: var(--becker-fs-micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--becker-red);
}
.alt-feature-row h3 { margin-top: 12px; font-size: clamp(21px, 2.2vw, 27px); }
@media (max-width: 820px) {
	.alt-feature-row { grid-template-columns: 1fr; }
	.alt-feature-row--flip .alt-feature-row__media { order: 0; }
}

.alt-dark-band {
	background: var(--becker-charcoal);
	color: #F2F2F3;
	padding: clamp(48px, 7vw, 96px) 0;
}
.alt-dark-band .page-section__title { color: #F2F2F3; }
.alt-dark-band__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3.5vw, 44px);
}
@media (max-width: 900px) { .alt-dark-band__grid { grid-template-columns: 1fr; } }
.alt-dark-band__item {
	border-top: 1px solid var(--becker-dark-border);
	padding-top: 22px;
}
.alt-dark-band__item h3 { color: #F2F2F3; font-size: var(--becker-fs-h3); margin: 0 0 8px; }
.alt-dark-band__item p { color: var(--becker-dark-text); margin: 0; }

/* LHMS: validated-motion, global-standard baseline and service-model sections
 * (data from the FANUC dress-pack solutions deck, Sep 2026). Same rule-based
 * card language as .alt-stat / .alt-dark-band__item — no shadow cards. */
.alt-lhms-note {
	margin: 12px 0 0;
	color: var(--becker-text-muted);
	font-size: var(--becker-fs-body-sm);
	max-width: 760px;
}
.alt-baseline-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	margin-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 820px) { .alt-baseline-grid { grid-template-columns: 1fr; } }
.alt-baseline {
	border-top: 2px solid var(--becker-red);
	padding-top: 18px;
}
.alt-baseline h3 { margin: 0 0 14px; font-size: var(--becker-fs-h3); }
.alt-eng-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3.5vw, 44px);
	margin-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 900px) { .alt-eng-grid { grid-template-columns: 1fr; } }
.alt-eng-item {
	border-top: 1px solid var(--becker-border-soft);
	padding-top: 18px;
}
.alt-eng-item h3 { margin: 0 0 8px; font-size: var(--becker-fs-body); font-weight: 600; }
.alt-eng-item p { margin: 0; color: var(--becker-text-muted); font-size: var(--becker-fs-body-sm); }