/*
  shr-shared.css — sitewide shared design system (2026-07 rollout)
  Enqueued on EVERY page (including the Homepage 2026 takeover, which
  dequeues Storefront's own CSS but not this file). Holds the pieces the
  homepage and the rest of the site share:
    · the :root design tokens (single source of truth)
    · the .s2u-wordmark / .s2u-accent brand type
    · the shared .s2u-footer component (rendered via footer.php)
  The sitewide header component will move here in the header phase.
  Homepage-only sections live in shr-home-page.css.
*/

/* ═══════════ Design tokens ═══════════ */
:root {
	--s2u-red: #e63946;
	--s2u-red-dark: #c92d3b;
	--s2u-navy: #111b27;
	--s2u-navy2: #1e2e42;
	--s2u-navy3: #2d3e55;

	/* Industry steel ramp (light sections) */
	--s2u-bg: #f2f2f3;
	--s2u-text: #1d1f20;
	--s2u-accent: #5980a6;
	--s2u-accent-100: #edf1f5;
	--s2u-accent-400: #8aa5c0;
	--s2u-accent-700: #40638c;
	--s2u-neutral-500: #9aa0a6;
	--s2u-neutral-600: #7c838a;
	--s2u-neutral-700: #55595e;
	--s2u-divider: rgba(29, 31, 32, .12);

	--s2u-font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
	--s2u-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--s2u-shadow-md: 0 12px 28px rgba(17, 27, 39, .14);
	--s2u-navy-grad: linear-gradient(160deg, var(--s2u-navy) 0%, var(--s2u-navy2) 55%, var(--s2u-navy3) 100%);
}

/* ═══════════ Focus outline ═══════════
   Hide the focus outline (the "purple box") after a MOUSE/TOUCH click, but
   keep it for keyboard navigation (:focus-visible) — accessibility. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: 0; }

/* ═══════════ Brand type (shared by header + footer) ═══════════ */
.s2u-accent { color: var(--s2u-red); }
.s2u-wordmark {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: 26px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ═══════════ Buttons (shared by header CTA + homepage hero) ═══════════ */
.s2u-btn {
	display: inline-block;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
}
/* .s2u-home a { } would outweigh a bare class on the homepage, so anchor these
   to the same specificity — button text must stay white in every state. */
.s2u-home a.s2u-btn--primary, .s2u-btn--primary { background: var(--s2u-red); border-color: var(--s2u-red); color: #fff; }
.s2u-home a.s2u-btn--primary:hover, .s2u-btn--primary:hover { background: var(--s2u-red-dark); border-color: var(--s2u-red-dark); color: #fff; }
.s2u-home a.s2u-btn--ghost, .s2u-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.s2u-home a.s2u-btn--ghost:hover, .s2u-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.s2u-btn-pop { transition: transform .16s ease, box-shadow .16s ease; }
.s2u-btn-pop:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(230, 57, 70, .35); }
.s2u-btn-pop:active { transform: translateY(0) scale(.98); box-shadow: 0 3px 8px rgba(230, 57, 70, .3); }
.s2u-btn--ghost.s2u-btn-pop:hover { box-shadow: 0 8px 20px rgba(255, 255, 255, .18); }

/* ═══════════ Promo bar (sitewide) ═══════════ */
.s2u-promo-bar {
	background: var(--s2u-red);
	color: #fff;
	text-align: center;
	padding: 9px clamp(16px, 4vw, 48px);
	font-size: 14px;
	line-height: 20px;
}
/* The .s2u-home .s2u-promo-bar a variant (0,2,1) beats the homepage's
   .s2u-home a { color: accent-700 } (0,1,1), which otherwise dims the text. */
.s2u-promo-bar a,
.s2u-home .s2u-promo-bar a { color: #fff; font-weight: 600; text-decoration: none; letter-spacing: .02em; }
.s2u-promo-bar a:hover,
.s2u-home .s2u-promo-bar a:hover { color: #fff; text-decoration: underline; }

/* ═══════════ Header (sitewide, sticky) ═══════════
   Link/img rules are scoped under .s2u-header (≥0,2,1) so they outrank the
   homepage's .s2u-home a / .s2u-home img resets, which load later. */
.s2u-header {
	background: var(--s2u-bg); border-bottom: 1px solid var(--s2u-divider);
	padding: 0 clamp(16px, 4vw, 48px);
	position: sticky; top: 0; z-index: 200;
	font-family: var(--s2u-font-body);
	-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
}
.s2u-header__inner {
	max-width: 1240px; margin: 0 auto;
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 14px 0;
}
.s2u-header .s2u-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--s2u-text); }
.s2u-header .s2u-header__brand img { height: 48px; width: auto; max-width: none; display: block; }
.s2u-header__wordmark { display: flex; align-items: baseline; gap: 6px; }
.s2u-header .s2u-wordmark { color: var(--s2u-navy); }
.s2u-header__tld { font-size: 15px; font-weight: 600; color: var(--s2u-neutral-600); letter-spacing: .06em; }
.s2u-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 500; }
.s2u-header .s2u-nav > a, .s2u-header .s2u-menu > a { color: var(--s2u-text); text-decoration: none; }
.s2u-header .s2u-nav > a:hover, .s2u-header .s2u-menu > a:hover { color: var(--s2u-red); }
.s2u-header__cta { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.s2u-header .s2u-header__phone { font-size: 14px; font-weight: 600; color: var(--s2u-text); text-decoration: none; font-feature-settings: 'tnum' 1; }
.s2u-header .s2u-header__phone:hover { color: var(--s2u-red); }

/* Cart icon + live count bubble (WooCommerce fragments) */
.s2u-header__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; text-decoration: none; transition: color .16s ease; }
.s2u-header .s2u-header__cart { color: var(--s2u-navy); }
.s2u-header .s2u-header__cart:hover { color: var(--s2u-red); }
.s2u-header__cart svg { display: block; }
.s2u-header__cart-count {
	position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px;
	padding: 0 5px; box-sizing: border-box; border-radius: 999px;
	background: var(--s2u-red); color: #fff; font-size: 11px; font-weight: 700;
	line-height: 18px; text-align: center; font-feature-settings: 'tnum' 1;
}
.s2u-header__cart-count:empty { display: none; }

/* Product search (self-contained GET form → shop results).
   Rules scoped under .s2u-header so they override Storefront's global
   input/button styling (margin, box-shadow, radius, min-height, bg) on
   non-homepage pages, which otherwise breaks the pill alignment. */
.s2u-search { display: flex; align-items: center; height: 38px; margin: 0; background: var(--s2u-accent-100); border: 1px solid var(--s2u-divider); border-radius: 999px; overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease; }
.s2u-search:focus-within { border-color: var(--s2u-navy); box-shadow: 0 0 0 3px rgba(89, 128, 166, .18); }
.s2u-header .s2u-search__input {
	border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none;
	font: inherit; font-size: 13px; color: var(--s2u-text);
	margin: 0; padding: 0 6px 0 16px; width: 168px; height: 100%; min-height: 0; line-height: normal;
}
.s2u-search__input::placeholder { color: var(--s2u-neutral-600); }
.s2u-header .s2u-search__btn {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 38px; height: 100%; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; box-shadow: none; background: transparent;
	color: var(--s2u-navy); cursor: pointer; transition: color .16s ease;
}
.s2u-header .s2u-search__btn:hover { color: var(--s2u-red); background: transparent; }

/* Dropdowns (pure CSS, hover + focus-within) */
.s2u-menu { position: relative; display: inline-flex; align-items: center; padding: 14px 0; margin: -14px 0; }
.s2u-sub {
	display: none; position: absolute; top: 100%; left: -18px; min-width: 240px;
	background: #fff; border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 12px 32px rgba(17, 27, 39, .18); padding: 6px 0; z-index: 60;
}
.s2u-menu:hover > .s2u-sub, .s2u-menu:focus-within > .s2u-sub { display: block; }
.s2u-menu:hover > .s2u-sub--2col, .s2u-menu:focus-within > .s2u-sub--2col { display: grid; grid-template-columns: 1fr 1fr; min-width: 340px; }
.s2u-header .s2u-sub a { display: block; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--s2u-text); text-decoration: none; white-space: nowrap; }
.s2u-header .s2u-sub a:hover { background: rgba(230, 57, 70, .07); color: var(--s2u-red); }

@media (max-width: 560px) {
	.s2u-header__inner { gap: 14px; }
	.s2u-nav { gap: 14px; }
	/* CTA row (phone · cart · WhatsApp) hugs the right edge; search takes its
	   own full-width row above it. */
	.s2u-header__cta { width: 100%; justify-content: flex-end; }
	.s2u-search { order: -1; flex: 1 1 100%; }
	/* Compound selector (0,2,1) so it actually beats the 168px default. */
	.s2u-header .s2u-search__input { width: 100%; flex: 1 1 auto; }
}

/* ═══════════ Footer (sitewide) ═══════════ */
.s2u-footer {
	background: linear-gradient(160deg, var(--s2u-navy) 0%, var(--s2u-navy2) 100%);
	color: rgba(255, 255, 255, .72);
	padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 48px) 32px;
	font-family: var(--s2u-font-body);
	line-height: 1.6;
	/* Match rendering across pages: the homepage body sets
	   -webkit-font-smoothing: antialiased (thinner/smaller-looking); reset it
	   here so the footer looks identical on the homepage and the rest of the site. */
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}
.s2u-footer__cols {
	max-width: 1240px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px;
}
.s2u-footer__brand { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 14px; text-decoration: none; }
.s2u-footer .s2u-footer__brand:hover .s2u-footer__tld { color: rgba(255, 255, 255, .85); }
/* The logo's lower swoosh + wordmark are dark navy (≈ the footer bg), so it's
   sat on a lightly tinted rounded chip for contrast. Compound selector (0,2,1)
   also outranks the homepage's .s2u-home img (0,1,1) reset (loads later). */
.s2u-footer .s2u-footer__brand img {
	height: 48px; width: auto; max-width: none; display: block;
	background: var(--s2u-accent-100); padding: 4px 6px; border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.s2u-footer__wordmark { display: flex; align-items: baseline; gap: 5px; }
.s2u-footer__wordmark .s2u-wordmark { font-size: 24px; color: #fff; }
.s2u-footer__tld { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.s2u-footer__about { font-size: 14px; line-height: 1.6; margin: 0; max-width: 38ch; }
.s2u-footer__head {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 16px;
	letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px;
}
.s2u-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-feature-settings: 'tnum' 1; }
/* Compound (.s2u-footer …) so these (0,2,1) beat the homepage's
   .s2u-home a { color: accent-700 } (0,1,1), which loads later. */
.s2u-footer .s2u-footer__links a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.s2u-footer .s2u-footer__links a:hover { color: var(--s2u-red); }
.s2u-footer__bottom {
	max-width: 1240px; margin: 40px auto 0; padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 13px; color: rgba(255, 255, 255, .5);
}
.s2u-footer__legal { display: flex; gap: 20px; }
.s2u-footer .s2u-footer__legal a { color: rgba(255, 255, 255, .5); text-decoration: none; }
.s2u-footer .s2u-footer__legal a:hover { color: var(--s2u-red); }