/*
 * ShotShield theme styles. Design direction B, "Weigh-In".
 * Loaded on the front end and in the block editor.
 *
 * Order: fonts, tokens, Mai variable mapping, type, buttons, header, utility classes, sections, footer.
 * Palette slots Mai prints inline (primary, secondary, background...) are set in config.php, not here.
 * Class reference: readme.md, "Classes".
 */

/* ---------- Fonts (self-hosted, OFL; licenses in assets/fonts) ---------- */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
	font-weight: 400 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Outfit';
	src: url('../fonts/outfit-variable-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
	--ssg-paper: #f2f4f7;
	--ssg-white: #ffffff;
	--ssg-ink: #0e1319;
	--ssg-ink-2: #333c47;
	--ssg-muted: #4a5563;
	--ssg-line: #d5dbe3;
	--ssg-line-dark: #2a333e;
	--ssg-steel: #a9b4c1;
	--ssg-blue: #1747b5;
	--ssg-blue-deep: #0e2f7a;
	--ssg-blue-bright: #5b8cff;
	--ssg-red: #d3232c;

	--ssg-font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
	--ssg-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ssg-wide: 125%;
	--ssg-narrow: 75%;

	/* Desktop H1 about 2/3 of the first cut (92px read as huge, Vi 2026-10-19); H2 steps down with it so the
	   two stay apart. At 60px the longest title word, "Replacements" (10.7em), is 644px: it fits the 800px
	   page-title column whole. */
	--ssg-h1: clamp(32px, 4.67vw, 60px);
	--ssg-h2: clamp(26px, 3.2vw, 42px);
	--ssg-h3: 22px;
	--ssg-label: 14px;
}

/* Mai 2.39.0 reserved a 15px scrollbar gutter on every page. Every WoA theme carries this fix. */
html {
	scrollbar-gutter: auto;
}

/*
 * Mai prints its font and button variables on :root, inline, after this file.
 * Setting them on body wins for everything inside the page without a fight over :root.
 */
body {
	--body-font-family: var(--ssg-font-body);
	--heading-font-family: var(--ssg-font-display);
	--button-font-family: var(--ssg-font-body);
	--body-font-size: 17px;
	--body-line-height: 1.6;
	--heading-font-weight: 900;
	--heading-text-transform: uppercase;
	--heading-letter-spacing: -0.01em;
	--heading-line-height: 1;
	--button-font-weight: 700;
	--button-border-radius: 4px;
	--button-text-transform: none;
	--button-letter-spacing: 0;
	--button-padding: 15px 28px;
	--button-background-hover: var(--ssg-blue-deep);
	--button-secondary-color: var(--ssg-white);
	--button-secondary-color-hover: var(--ssg-white);
	--button-secondary-background: var(--ssg-ink);
	--button-secondary-background-hover: var(--ssg-blue);
	--link-color-hover: var(--ssg-blue-deep);
	--border: 1px solid var(--ssg-line);
	font-family: var(--ssg-font-body);
	color: var(--ssg-ink);
	background-color: var(--ssg-paper);
}

/* ---------- Type ---------- */

h1,
h2,
.ssg-display {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Display sizes apply to page content and page titles only, never to widget or plugin headings. */
.entry-content h1,
.entry-title {
	font-size: var(--ssg-h1);
	line-height: 0.92;
	letter-spacing: -0.02em;
}

.entry-content h2 {
	font-size: var(--ssg-h2);
	line-height: 1;
}

h1,
h2 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

/*
 * Phones: smaller display headings in the normal-width cut, with more line height, so the longest words on
 * the site ("Replacements", "Commercialization") fit whole down to a 320px screen. break-word is only a
 * last resort for a word that still can't fit. Tested in Chromium, Firefox and WebKit at 390, 360, 320.
 */
@media (max-width: 600px) {
	:root {
		--ssg-h1: clamp(26px, 7.6vw, 34px);
		--ssg-h2: clamp(20px, 5.8vw, 26px);
	}

	h1,
	h2,
	.ssg-display {
		font-stretch: 100%;
	}

	h1,
	h2 {
		overflow-wrap: break-word;
	}

	.entry-content h1,
	.entry-title {
		line-height: 1.1;
		letter-spacing: -0.01em;
	}

	.entry-content h2 {
		line-height: 1.15;
	}
}

h3,
h4,
h5,
h6 {
	--heading-text-transform: none;
	--heading-font-weight: 800;
	--heading-letter-spacing: 0;
	font-family: var(--ssg-font-display);
	font-stretch: 100%;
	line-height: 1.2;
	text-wrap: balance;
}

h3 {
	font-size: var(--ssg-h3);
}

.entry-content a:not(.wp-block-button__link):not(.button) {
	text-underline-offset: 0.15em;
}

/* ---------- Buttons ---------- */

.wp-block-button__link,
.button {
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Outline: ink border, fills with ink on hover. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	--button-color: var(--ssg-ink);
	--button-color-hover: var(--ssg-white);
	--button-background: transparent;
	--button-background-hover: var(--ssg-ink);
	border: 2px solid var(--ssg-ink);
	padding: 13px 26px;
}

.has-dark-background .wp-block-button.is-style-outline > .wp-block-button__link {
	--button-color: var(--ssg-white);
	--button-color-hover: var(--ssg-ink);
	--button-background-hover: var(--ssg-white);
	border-color: var(--ssg-white);
}

.wp-block-button__link:focus-visible,
.button:focus-visible,
.entry-content a:focus-visible {
	outline: 3px solid var(--ssg-blue-bright);
	outline-offset: 2px;
}

/* ---------- Header ---------- */

.site-header {
	--site-header-border-bottom: 1px solid var(--ssg-line);
	--menu-item-link-color: var(--ssg-ink);
	--menu-item-link-color-hover: var(--ssg-blue);
	--menu-font-weight: 600;
	--menu-font-size: 16px;
	--menu-text-transform: none;
}

/* The "button" class on a menu item: Shop Now in ink (Inspire paints nav buttons white). */
.nav-header .button,
.mobile-menu .button {
	--button-background: var(--ssg-ink);
	--button-color: var(--ssg-white);
	--button-background-hover: var(--ssg-blue);
	--button-color-hover: var(--ssg-white);
	--button-padding: 11px 20px;
}

/* 1000-1199px: the 240px logo and the full menu fit one row only with tighter link padding (16px -> 8px a side).
   Without it Shop Now drops to a second line. */
@media (min-width: 1000px) and (max-width: 1199px) {
	.nav-header {
		--menu-item-link-padding: var(--spacing-md) 8px;
	}
}

/* ---------- Utility classes (Additional CSS class field) ---------- */

/* Small condensed label above a heading. */
.ssg-eyebrow {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--ssg-muted);
}

.ssg-eyebrow-red {
	color: var(--ssg-red);
}

/* The two singlet bars before an eyebrow: red, then mat blue. */
.ssg-stripes {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ssg-stripes::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 34px;
	background: linear-gradient(90deg, var(--ssg-red) 0 6px, transparent 6px 8px, var(--ssg-blue) 8px 14px);
}

/* The lede under a display heading. */
.ssg-lede {
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.5;
	color: var(--ssg-ink-2);
	max-width: 34ch;
}

/* Inner pages: text-only sections use Mai's md width (800px), the same centred column as the page title, and
   a lede there fills it (about 70 characters a line) rather than the homepage's 34ch, which left a narrow,
   very long block beside empty space (Vi 2026-10-19, install guide and safety information). */
.has-md-content-width .ssg-lede {
	max-width: none;
}

/* Small print: "Head pad only. Headgear not included." */
.ssg-note {
	font-size: 15px;
	color: var(--ssg-muted);
}

.has-dark-background .ssg-note,
.has-dark-background .ssg-eyebrow:not(.ssg-eyebrow-red) {
	color: var(--ssg-steel);
}

/* Image with an offset mat-blue frame behind it. */
.wp-block-image.ssg-frame {
	position: relative;
	margin-right: 18px;
	margin-bottom: 18px;
}

.wp-block-image.ssg-frame::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 3px solid var(--ssg-blue);
	pointer-events: none;
}

.wp-block-image.ssg-frame img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

/* Image whose caption becomes an ink label in the bottom-left corner. */
.wp-block-image.ssg-label-caption {
	position: relative;
}

.wp-block-image.ssg-label-caption img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-image.ssg-label-caption figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 10px 14px;
	background: var(--ssg-ink);
	color: var(--ssg-white);
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 800;
	font-size: var(--ssg-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: left;
}

/* Black-and-white archive photos. */
.wp-block-image.ssg-archive img {
	filter: grayscale(1);
}

/* ---------- Fact strip ("scoreboard") ---------- */

.ssg-facts .wp-block-columns {
	gap: 0;
	margin: 0;
}

.ssg-facts .wp-block-column {
	padding: 26px 20px;
}

.ssg-facts .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--ssg-line-dark);
}

.ssg-stat {
	margin: 0;
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--ssg-white);
}

.ssg-stat-accent {
	color: var(--ssg-blue-bright);
}

.ssg-stat-label {
	margin: 8px 0 0;
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 700;
	font-size: var(--ssg-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssg-steel);
}

/* Phones and small tablets: the four figures sit in a 2 x 2 grid instead of one tall stack. */
@media (max-width: 781px) {
	.ssg-facts .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ssg-facts .wp-block-column + .wp-block-column {
		border-left: 0;
	}

	.ssg-facts .wp-block-column:nth-child(even) {
		border-left: 1px solid var(--ssg-line-dark);
	}

	.ssg-facts .wp-block-column:nth-child(n+3) {
		border-top: 1px solid var(--ssg-line-dark);
	}
}

/* ---------- Feature cards ---------- */

.ssg-card {
	background: var(--ssg-white);
	border: 1px solid var(--ssg-line);
	border-top: 6px solid var(--ssg-blue);
	padding: 26px;
	--heading-margin-top: 0;
	--heading-margin-bottom: 8px;
}

.ssg-card.ssg-card-red {
	border-top-color: var(--ssg-red);
}

.ssg-card > * {
	margin-top: 0;
}

.ssg-card > * + * {
	margin-top: 8px;
}

.ssg-card p {
	color: var(--ssg-ink-2);
	margin-bottom: 0;
}

/* ---------- Weigh-in card (size table) ---------- */

.ssg-weigh-card {
	background: var(--ssg-paper);
	border: 2px solid var(--ssg-ink);
	padding: 28px;
}

.ssg-weigh-card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-bottom: 2px solid var(--ssg-ink);
	padding-bottom: 12px;
	margin-bottom: 6px;
}

.ssg-weigh-card-head p {
	margin: 0;
}

.ssg-weigh-card-title {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 1.1;
}

.ssg-size-table {
	margin: 0;
}

.ssg-size-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	font-size: 18px;
}

.ssg-size-table th,
.ssg-size-table td {
	border: 0;
	padding: 12px 8px 12px 0;
	text-align: left;
	vertical-align: middle;
}

.ssg-size-table thead th {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 700;
	font-size: var(--ssg-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssg-muted);
	padding-top: 10px;
	padding-bottom: 10px;
}

.ssg-size-table tbody tr {
	border-top: 1px dashed var(--ssg-steel);
}

.ssg-size-table tbody tr:last-child {
	border-bottom: 1px dashed var(--ssg-steel);
}

.ssg-size-table tbody td:first-child {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 24px;
}

.ssg-size-table th:last-child,
.ssg-size-table td:last-child {
	text-align: right;
}

/* Side padding inside the table's border, so XS and "Pick XS" don't touch it (Vi 2026-10-19). */
.ssg-size-table th:first-child,
.ssg-size-table td:first-child {
	padding-left: 16px;
}

.ssg-size-table th:last-child,
.ssg-size-table td:last-child {
	padding-right: 16px;
}

@media (max-width: 600px) {
	.ssg-weigh-card {
		padding: 20px 16px;
	}

	.ssg-size-table table {
		font-size: 16px;
	}

	.ssg-size-table th,
	.ssg-size-table td {
		padding-right: 6px;
	}

	.ssg-size-table th:first-child,
	.ssg-size-table td:first-child {
		padding-left: 10px;
	}

	.ssg-size-table th:last-child,
	.ssg-size-table td:last-child {
		padding-right: 10px;
	}

	.ssg-size-table tbody td:first-child {
		font-size: 20px;
	}
}

.ssg-size-table td:last-child a {
	font-weight: 700;
}

/* ---------- Testimonial ---------- */

.ssg-quote {
	font-family: var(--ssg-font-display);
	font-weight: 800;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.2;
	text-wrap: balance;
	color: var(--ssg-ink);
}

.ssg-person {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ssg-person .wp-block-image {
	margin: 0;
	flex: 0 0 54px;
}

.ssg-person .wp-block-image img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
}

.ssg-person p {
	margin: 0;
	font-weight: 700;
}

.ssg-install .wp-block-column .ssg-person + .wp-block-buttons {
	margin-top: 32px;
}

/* ---------- Product cards ([shotshield_products]) ---------- */

.ssg-products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssg-product {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ssg-line);
	background: var(--ssg-paper);
	margin: 0;
}

.ssg-product-media {
	display: flex;
	justify-content: center;
	background: var(--ssg-white);
	padding: 22px;
}

.ssg-product-media img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
}

.ssg-product-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1 1 auto;
}

.ssg-product-badge {
	align-self: flex-start;
	background: var(--ssg-red);
	color: var(--ssg-white);
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
}

.ssg-product-title {
	margin: 0;
	font-size: 22px;
}

.ssg-products .ssg-product-title a {
	color: inherit;
	text-decoration: none;
}

.ssg-products .ssg-product-title a:hover {
	color: var(--ssg-blue);
}

.ssg-product-meta {
	color: var(--ssg-muted);
	margin: 0;
}

.ssg-product-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
	flex-wrap: wrap;
}

.ssg-product-price {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
}

.ssg-product-price del {
	font-size: 0.6em;
	opacity: 0.6;
}

.ssg-product-foot .button {
	--button-padding: 11px 18px;
	margin: 0;
}

.ssg-product-foot .button.ssg-button-outline {
	--button-background: transparent;
	--button-color: var(--ssg-ink);
	--button-background-hover: var(--ssg-ink);
	--button-color-hover: var(--ssg-white);
	border: 2px solid var(--ssg-ink);
	--button-padding: 9px 16px;
}

/* ---------- History timeline ---------- */
/* Five eras: one row on desktop, 3 + 2 on tablets, a list with the photo on the left on phones.
   Each era is a subgrid of the row (year / name / photo), so the photos line up whatever the length of
   an era name. Photo and name both link to that era on the timeline page (#era-* anchors). */

/* Classic themes wrap a default-layout group's blocks in .wp-block-group__inner-container; let the grid see
   through those wrappers so the eras and their year / name / photo are the grid's own items. */
.ssg-eras > .wp-block-group__inner-container,
.ssg-era > .wp-block-group__inner-container {
	display: contents;
}

.ssg-history .ssg-eras {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 0;
	border-top: 4px solid var(--ssg-ink);
}

.ssg-history .ssg-era {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 10px;
	align-content: start;
	padding: 22px 0 32px;
}

.ssg-era > *,
.ssg-era > .wp-block-group__inner-container > * {
	margin: 0;
}

.ssg-era-year {
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1;
	color: var(--ssg-red);
}

.ssg-era-year.ssg-era-year-blue {
	color: var(--ssg-blue);
}

.ssg-era-title {
	font-weight: 700;
	line-height: 1.35;
}

.ssg-era-title a {
	color: var(--ssg-ink);
	text-decoration: none;
}

.ssg-era-title a:hover,
.ssg-era-title a:focus-visible {
	color: var(--ssg-blue);
	text-decoration: underline;
}

.ssg-era .wp-block-image {
	align-self: start;
}

.ssg-era .wp-block-image a {
	display: block;
	max-width: 200px;
}

.ssg-era .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: filter 0.2s ease;
}

.ssg-era .wp-block-image a:hover img,
.ssg-era .wp-block-image a:focus-visible img {
	filter: grayscale(0);
}

.ssg-era a:focus-visible {
	outline: 3px solid var(--ssg-blue);
	outline-offset: 3px;
}

@media (max-width: 1023px) {
	.ssg-history .ssg-eras {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ssg-history .ssg-eras {
		grid-template-columns: 1fr;
	}

	.ssg-history .ssg-era {
		grid-row: auto;
		grid-template-rows: auto 1fr;
		grid-template-columns: 88px 1fr;
		column-gap: 16px;
		row-gap: 6px;
		padding: 16px 0;
		border-bottom: 1px dashed var(--ssg-steel);
	}

	.ssg-era .wp-block-image {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.ssg-era-year,
	.ssg-era-title {
		grid-column: 2;
	}

	.ssg-era-year {
		font-size: 24px;
		align-self: end;
	}
}

/* Timeline page: an era link lands with a little room above the era heading (the header does not stick). */
[id^="era-"] {
	scroll-margin-top: 32px;
}

/* ---------- Announcement bar (before-header template part) ---------- */

.ssg-announcement {
	margin: 0;
	padding: 9px 16px;
	text-align: center;
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-narrow);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
}

.before-header {
	border-bottom: 0;
	min-height: 0;
}

/* ---------- Footer (footer template part) ---------- */

.ssg-footer {
	color: var(--ssg-line);
	font-size: 16px;
	--link-color: var(--ssg-white);
	--link-color-hover: var(--ssg-white);
}

.ssg-footer a {
	color: var(--ssg-white);
}

.ssg-footer-brand {
	margin: 0;
	font-family: var(--ssg-font-display);
	font-stretch: var(--ssg-wide);
	font-weight: 900;
	font-size: 28px;
	text-transform: uppercase;
	color: var(--ssg-white);
	line-height: 1.1;
}

.ssg-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ssg-footer-links li {
	margin: 0;
}

.ssg-footer-legal {
	border-top: 1px solid var(--ssg-line-dark);
	margin-top: 32px; /* clear of the link and contact columns above the rule */
	padding-top: 22px;
	font-size: 14px;
	color: var(--ssg-steel);
}

.ssg-footer-legal p {
	max-width: 110ch;
	margin: 0 0 8px;
}

.ssg-footer-legal strong {
	color: var(--ssg-white);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.button {
		transition: none;
	}
}