/* Structural layout: containers, grid helpers, header/footer scaffolding. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--color-bg);
	margin: 0;
	overflow-x: hidden;
}

/* Icon sizing box. template-parts/components/icon.php wraps whatever SVG
 * you paste in (any viewBox, any fill/stroke) in `<span class="icon">`,
 * and the inner svg is forced to fill this box — so to resize an icon in
 * a given context, target `.icon` here (e.g. `.trust-bar__item .icon`),
 * never `svg` directly; the pasted markup's own width/height is ignored. */
.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding-x);
}

.container--narrow {
	max-width: 800px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-header-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-height);
}

.site-header__logo img,
.site-header__logo svg {
	display: block;
	height: 40px;
	width: auto;
}

.site-header__logo-text {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: 1.25rem;
	color: var(--color-header-text);
	text-decoration: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* Primary nav */
.primary-nav {
	display: none;
}

.primary-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
}

.primary-nav a {
	color: var(--color-header-text);
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-size: var(--fs-small);
}

.primary-nav a:hover {
	color: var(--color-primary);
}

/* Full labels everywhere by default (e.g. .mobile-nav, a vertical list
 * with room to spare when opened via the menu icon). .primary-nav is
 * the horizontal row shown ≥960px — it always uses the short label so
 * the row never wraps to a second line. */
.nav-label-short {
	display: none;
}

.primary-nav .nav-label-full {
	display: none;
}

.primary-nav .nav-label-short {
	display: inline;
}

.nav-toggle {
	display: inline-flex;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-2xs);
}

@media (min-width: 960px) {
	.primary-nav {
		display: block;
	}
	.nav-toggle {
		display: none;
	}
}

.mobile-nav {
	display: none;
	flex-direction: column;
	gap: var(--space-2xs);
	border-top: 1px solid var(--color-border);
	background: var(--color-header-bg);
	padding: var(--space-sm) 0;
}

.mobile-nav.is-open {
	display: flex;
}

.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mobile-nav a {
	display: block;
	padding: var(--space-xs) var(--container-padding-x);
	color: var(--color-header-text);
	text-decoration: none;
	font-weight: var(--fw-medium);
}

@media (min-width: 960px) {
	.mobile-nav {
		display: none !important;
	}
}

/* Sections */
.section {
	padding-block: var(--section-padding-y);
}

.section--sm {
	padding-block: var(--section-padding-y-sm);
}

.section__header {
	max-width: 680px;
	margin-bottom: var(--space-xl);
}

.section__header--center {
	margin-inline: auto;
	text-align: center;
}

/* Grids */
.grid {
	display: grid;
	gap: var(--space-lg);
}

.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--6 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(3, 1fr); }
	.grid--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.grid--6 { grid-template-columns: repeat(6, 1fr); }
}

.flex {
	display: flex;
}

.flex--wrap {
	flex-wrap: wrap;
}

.flex--center {
	align-items: center;
}

.flex--between {
	justify-content: space-between;
}

.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }

/* Two-column hero-style layout */
.split {
	display: grid;
	gap: var(--space-2xl);
	align-items: center;
}

@media (min-width: 960px) {
	.split--reverse {
		direction: rtl;
	}
	.split--reverse > * {
		direction: ltr;
	}
	.split {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

/* Footer */
.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer a {
	color: var(--color-footer-text);
}

.site-footer a:hover {
	color: #FFFFFF;
}

.site-footer__grid {
	display: grid;
	gap: var(--space-xl);
	grid-template-columns: 1fr;
	padding-bottom: var(--space-xl);
	border-bottom: 1px solid var(--color-footer-border);
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
	}
}

.site-footer__heading {
	color: var(--color-footer-heading);
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	margin-bottom: var(--space-sm);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-lg);
	font-size: var(--fs-small);
}

.site-footer__map {
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-footer-border);
}

.site-footer__map iframe {
	display: block;
	width: 100%;
	height: 220px;
	border: 0;
}

.site-footer .icon {
	width: 20px;
	height: 20px;
}