/*
  shr-sections.css — shared design-system layout primitives (sitewide).

  Extracted from shr-home-page.css so the homepage, native content-page
  templates (About/Contact 2026, …) and the future product page all consume
  ONE source for sections, kickers, rules, headings, blueprint frames + corner
  marks, hover-lift, scroll-reveal and tag chips — no duplicated CSS.

  Loaded on every page (dep: shr-shared for the :root tokens). Homepage-only
  sections (hero, animated shredder, marquee, stats, promo/category/level/oil
  grids) stay in shr-home-page.css, which now depends on this file.

  Selectors are class-scoped, so on pages that don't use them these rules are
  inert. The only page-scoped block is `body.s2u-native …`, added by the
  native content-page templates via a body_class filter (functions.php).
*/

/* ═══════════ Native content-page base (get_header path) ═══════════
   Storefront wraps page content in .site-content .col-full (pinned by the
   child style.css to max-width:100% + 5% side padding !important). On the
   native templates we let sections bleed full-width like the homepage, and
   paint the page background the homepage steel-grey. Scoped to the
   `s2u-native` body class so normal pages / shop / product are untouched. */
body.s2u-native { background: var(--s2u-bg); }
body.s2u-native .site-content .col-full { max-width: none !important; padding: 0 !important; }

.s2u-page { color: var(--s2u-text); font-family: var(--s2u-font-body); font-size: 16px; line-height: 1.55; text-wrap: pretty; -webkit-font-smoothing: antialiased; }
.s2u-page *, .s2u-page *::before, .s2u-page *::after { box-sizing: border-box; }
.s2u-page img { max-width: 100%; height: auto; }
.s2u-page a { color: var(--s2u-accent-700); }
.s2u-page a:hover { color: var(--s2u-red); }
.s2u-page .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══════════ Container ═══════════ */
.s2u-container { max-width: 1240px; margin: 0 auto; }

/* ═══════════ Sections ═══════════ */
.s2u-section { padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px); }
.s2u-section--tight-bottom { padding-bottom: clamp(48px, 6vw, 80px); }
.s2u-section--bordered { border-top: 1px solid var(--s2u-divider); }
.s2u-section--last { padding-bottom: clamp(56px, 7vw, 96px); }

/* Dark navy section (echoes the homepage hero) — flips text/heading/rule/corner
   colours for content on a dark background. Reusable across content pages. */
.s2u-section--dark { background: var(--s2u-navy); color: rgba(255, 255, 255, .72); }
.s2u-section--dark .s2u-h2 { color: #fff; }
.s2u-section--dark .s2u-kicker { color: var(--s2u-accent-400); }
.s2u-section--dark .s2u-rule { background: rgba(255, 255, 255, .14); }
.s2u-section--dark .s2u-more { color: #fff; }
.s2u-section--dark .s2u-more:hover { color: var(--s2u-red); }
.s2u-section--dark .s2u-blueprint, .s2u-section--dark .s2u-card { border-color: rgba(255, 255, 255, .18); }
.s2u-section--dark .s2u-corner { color: rgba(255, 255, 255, .4); }
.s2u-section--dark .s2u-stat__num { color: var(--s2u-accent-400); }
.s2u-section--dark .s2u-stat__label { color: rgba(255, 255, 255, .6); }

/* Shredded-paper pile bleeds up from the bottom of the section; image top is
   white so it blends into the section bg. Extra bottom padding gives the pile
   room. (Homepage "Keep it running" + reusable on any section.) */
.s2u-section--paper-bg {
	background: url('assets/home/pile-of-shred-paper-1-2400x1000.webp') bottom center / cover no-repeat;
	padding-bottom: clamp(80px, 11vw, 140px);
}
@media (max-width: 680px) {
	.s2u-section--paper-bg {
		background-image: url('assets/home/pile-of-shred-paper-1080x1350.webp');
		padding-bottom: clamp(70px, 22vw, 120px);
	}
}

/* ═══════════ Section heads ═══════════ */
.s2u-kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--s2u-accent-700);
	margin-bottom: 12px;
	font-feature-settings: 'tnum' 1;
}
.s2u-kicker--red { color: var(--s2u-red); letter-spacing: .14em; margin-bottom: 20px; }
.s2u-rule { height: 1px; border: 0; background: var(--s2u-divider); margin: 0 0 28px; }
.s2u-section__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.s2u-h2 {
	font-family: var(--s2u-font-heading);
	font-weight: 600;
	font-size: clamp(28px, 3vw, 40px);
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0;
	color: var(--s2u-text);
}
.s2u-h2--solo { margin-bottom: 32px; }
.s2u-more { font-size: 14px; font-weight: 600; color: var(--s2u-accent-700); text-decoration: none; }
.s2u-more:hover { color: var(--s2u-red); }

/* ═══════════ Blueprint frames + corner registration marks ═══════════ */
.s2u-blueprint, .s2u-card, .s2u-cat-card, .s2u-level { position: relative; border: 1px solid var(--s2u-divider); }
.s2u-corner { position: absolute; width: 15px; height: 15px; color: rgba(29, 31, 32, .35); pointer-events: none; z-index: 2; }
.s2u-corner::before { content: ''; position: absolute; left: 7px; top: 0; width: 1px; height: 100%; background: currentColor; }
.s2u-corner::after { content: ''; position: absolute; top: 7px; left: 0; width: 100%; height: 1px; background: currentColor; }
.s2u-corner--tl { top: -8px; left: -8px; }
.s2u-corner--tr { top: -8px; right: -8px; }
.s2u-corner--bl { bottom: -8px; left: -8px; }
.s2u-corner--br { bottom: -8px; right: -8px; }
.s2u-corner--out { color: rgba(255, 255, 255, .55); }

/* ═══════════ Motion helpers ═══════════ */
.s2u-lift { transition: transform .18s ease, box-shadow .18s ease; }
.s2u-lift:hover { transform: translateY(-3px); box-shadow: var(--s2u-shadow-md); }
.s2u-lift:hover .s2u-corner { color: var(--s2u-red); }

.s2u-reveal, .s2u-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.s2u-reveal.s2u-in, .s2u-stagger.s2u-in > * { opacity: 1; transform: none; }
.s2u-stagger > *:nth-child(2) { transition-delay: .08s; }
.s2u-stagger > *:nth-child(3) { transition-delay: .16s; }
.s2u-stagger > *:nth-child(4) { transition-delay: .24s; }
.s2u-stagger > *:nth-child(5) { transition-delay: .32s; }
.s2u-stagger > *:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
	.s2u-reveal, .s2u-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ═══════════ Stat tiles ═══════════
   Big count-up figure + uppercase label. Grid wrapper auto-fits; used by the
   homepage stats strip and content-page stat bars. */
.s2u-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 28px; }
.s2u-stat { padding: 24px; }
.s2u-stat__num {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 52px; line-height: 1;
	color: var(--s2u-accent-700); font-feature-settings: 'tnum' 1; text-transform: uppercase;
}
.s2u-stat__label {
	font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--s2u-neutral-700); margin-top: 10px;
}

/* ═══════════ Tag chips ═══════════ */
.s2u-tag-sale {
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: #fff; background: var(--s2u-red); padding: 3px 8px;
}
.s2u-tag-popular {
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: #fff; background: var(--s2u-red); padding: 2px 6px;
}

/* ═══════════ Icon badge (colored circle around a shr_icon() svg) ═══════════
   Used on card grids (e.g. Why Buy From Us reasons, Why Shred reasons/risks/
   audiences) to give scannable visual variety without touching the strict
   steel-blue/red brand palette used for type + CTAs. Color is set via a
   modifier, not inline style, so the palette stays centrally controlled. */
.s2u-icon-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex-shrink: 0;
	background: var(--s2u-accent-100); color: var(--s2u-accent-700);
}
.s2u-icon-badge svg { width: 22px; height: 22px; }
.s2u-icon-badge--amber  { background: color-mix(in srgb, var(--s2u-icon-amber) 12%, #fff); color: var(--s2u-icon-amber); }
.s2u-icon-badge--green  { background: color-mix(in srgb, var(--s2u-icon-green) 12%, #fff); color: var(--s2u-icon-green); }
.s2u-icon-badge--blue   { background: color-mix(in srgb, var(--s2u-icon-blue) 12%, #fff); color: var(--s2u-icon-blue); }
.s2u-icon-badge--purple { background: color-mix(in srgb, var(--s2u-icon-purple) 12%, #fff); color: var(--s2u-icon-purple); }
.s2u-icon-badge--teal   { background: color-mix(in srgb, var(--s2u-icon-teal) 12%, #fff); color: var(--s2u-icon-teal); }
.s2u-icon-badge--red    { background: color-mix(in srgb, var(--s2u-red) 12%, #fff); color: var(--s2u-red); }
/* On a dark section, tint against navy instead of white so it doesn't look
   like a pasted-in light chip. */
.s2u-section--dark .s2u-icon-badge--amber  { background: color-mix(in srgb, var(--s2u-icon-amber) 22%, transparent); color: #f0b74a; }
.s2u-section--dark .s2u-icon-badge--green  { background: color-mix(in srgb, var(--s2u-icon-green) 22%, transparent); color: #4ade80; }
.s2u-section--dark .s2u-icon-badge--blue   { background: color-mix(in srgb, var(--s2u-icon-blue) 22%, transparent); color: #93b4ff; }
.s2u-section--dark .s2u-icon-badge--purple { background: color-mix(in srgb, var(--s2u-icon-purple) 22%, transparent); color: #c4a2ff; }
.s2u-section--dark .s2u-icon-badge--teal   { background: color-mix(in srgb, var(--s2u-icon-teal) 22%, transparent); color: #5eead4; }
.s2u-section--dark .s2u-icon-badge--red    { background: color-mix(in srgb, var(--s2u-red) 22%, transparent); color: #ff8a94; }