/* ==========================================================================
   BASE — shared primitives only.
   Touch this file for: global resets, typography defaults, .container width,
   .btn variants, the generic .card shell, section vertical padding.
   Do NOT add section-specific rules here — put those in
   assets/css/sections/{section}.css instead.
   ========================================================================== */

* { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	color: var(--color-text-dark);
	margin: 0;
	line-height: 1.5;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	margin: 0 0 var(--space-sm);
	color: var(--color-text-dark);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3-lg); }

em, .emphasis {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-regular);
	color: var(--color-accent, #FE5C08);
}

.accent { color: var(--color-primary, #03193C); }

.emphasis-navy {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: var(--fw-regular);
	color: var(--color-primary, #03193C);
}

.eyebrow {
	color: var(--color-accent, #FE5C08);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.5px;
	margin-bottom: var(--space-xs);
}

.eyebrow.center,
h2.center {
	text-align: center;
}

/* Shared page column — top bar, nav, hero, sections all use this.
   Left padding creates the common left grid line for logo / address / hero. */
.container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width, 1370px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding, 24px);
	padding-right: var(--container-padding, 24px);
	text-align: left;
}

/* Set on <body> while the mobile drawer is open. */
body.no-scroll {
	overflow: hidden;
}

/* Visible to screen readers only — used for icon-only buttons. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Section vertical rhythm — every section wrapper gets this padding
   unless its own section CSS file overrides it. */
.section {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
}

/* ---------------- Section backgrounds ----------------
   Driven by inc/section-backgrounds.php, which prints one of these classes
   plus the matching custom properties on the <section> itself. */
.section-bg-color {
	background-color: var(--sec-bg-color, transparent);
}

.section-bg-gradient {
	background-color: var(--sec-bg-color, transparent);
	background-image: var(--sec-bg-gradient, none);
}

.section-bg-image {
	position: relative;
	background-color: var(--sec-bg-color, transparent);
	background-image: var(--sec-bg-url, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Tint sits between the photo and the content, so text stays readable. */
.section-bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sec-bg-color, var(--color-primary, #03193C));
	opacity: var(--sec-overlay, 0.55);
	pointer-events: none;
}

/* Overlay opacity of 0 means "show the photo as-is": drop the tint layer
   entirely instead of painting a fully transparent one. */
.section-bg-image--plain {
	background-color: transparent;
}

.section-bg-image--plain::before {
	display: none;
}

.section-bg-image > * {
	position: relative;
	z-index: 1;
}

/* ---------------- Buttons (universal ScaleX fill) ---------------- */
.btn,
.button {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	padding: 0 2rem;
	border-radius: 1.5rem;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: none;
	outline: none;
	isolation: isolate;
	transition: color 0.4s ease, border-color 0.4s ease;
	white-space: nowrap;
	gap: 8px;
	box-sizing: border-box;
}

.btn::before,
.button::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.475s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.btn:hover::before,
.button:hover::before,
.btn:focus-visible::before,
.button:focus-visible::before {
	transform: scaleX(1);
}

.btn svg,
.button svg {
	flex-shrink: 0;
	fill: currentColor;
}

/* 1. Primary Button (Yellow Base, White Text, Deepened Amber Hover) */
.btn-primary,
.button--primary,
.btn-accent {
	background-color: var(--color-accent, #FE5C08);
	color: #ffffff !important;
	border: 2px solid transparent;
}
.btn-primary::before,
.button--primary::before,
.btn-accent::before {
	background: var(--color-accent-hover, #E04F00);
}
.btn-primary:hover,
.button--primary:hover,
.btn-accent:hover,
.btn-primary:focus-visible,
.button--primary:focus-visible,
.btn-accent:focus-visible {
	color: #ffffff !important;
}

/* 2. Secondary Button (Blue Base, White Text, Dark Blue Hover) */
.btn-secondary,
.button--secondary {
	background-color: var(--color-primary, #03193C);
	color: #ffffff !important;
	border: 2px solid transparent;
}
.btn-secondary::before,
.button--secondary::before {
	background: var(--color-primary-hover, #02122C);
}
.btn-secondary:hover,
.button--secondary:hover,
.btn-secondary:focus-visible,
.button--secondary:focus-visible {
	color: #ffffff !important;
}

/* 3. Tertiary Button (White Outline, Fills White with Blue Text on Hover) */
.btn-tertiary,
.button--tertiary,
.btn-outline {
	background-color: transparent;
	color: #ffffff !important;
	border: 2px solid #ffffff;
}
.btn-tertiary::before,
.button--tertiary::before,
.btn-outline::before {
	background: #ffffff;
}
.btn-tertiary:hover,
.button--tertiary:hover,
.btn-outline:hover,
.btn-tertiary:focus-visible,
.button--tertiary:focus-visible,
.btn-outline:focus-visible {
	color: var(--color-primary, #03193C) !important;
}

/* Light-background outline (Layout 1 "All Services" and similar) */
.btn-outline-dark {
	background-color: transparent;
	color: var(--color-text-dark, #111827) !important;
	border: 2px solid var(--color-text-dark, #111827);
}
.btn-outline-dark::before {
	background: var(--color-primary, #03193C);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
	color: #ffffff !important;
	border-color: var(--color-primary, #03193C);
}

.btn__arrow { margin-left: 0; }

.btn__arrow-badge {
	background: var(--color-accent, #FE5C08);
	color: var(--color-white);
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}

/* ---------------- Generic card shell ---------------- */
/* Used as-is by Services Grid; extended (.card--benefit etc) by page templates. */
.card {
	background: var(--color-primary, #03193C);
	border-radius: var(--radius-card);
	overflow: hidden;
	color: var(--color-white);
}

.card__image {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.card__body {
	padding: 24px;
}

.card__icon-badge {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-accent, #FE5C08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary, #03193C);
}