/* Albion Roofing — main stylesheet
   Tokens + global layout rules. Module CSS is enqueued separately
   in functions.php so each file gets its own filemtime cache-bust. */

/* ============================= TOKENS ============================= */
:root {
	/* Brand colours pulled directly from the logo SVG */
	--navy:        #2a3460;   /* mid navy — for CTA bands / accents */
	--navy-deep:   #1d2545;   /* exact logo navy — used for header & hero backgrounds */
	--navy-deep-rgb: 29, 37, 69;   /* RGB tuple for rgba() overlays */
	--teal:        #4dbaae;   /* exact logo teal/green */
	--teal-hover:  #3ba398;
	--teal-soft:   rgba(77, 186, 174, 0.10);
	--ink:         #11202b;
	--muted:       #5b6b76;
	--line:        rgba(17, 32, 43, 0.10);
	--bg:          #ffffff;
	--bg-soft:     #f6f7f8;
	--container-max: 1280px;       /* standard desktop */
	--container-max-wide: 1440px;  /* widescreen ≥1600px */
}
@media (min-width: 1600px) {
	:root { --container-max: var(--container-max-wide); }
}

/* ============================= RESET (tiny) ============================= */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Inter Variable', Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-feature-settings: "cv11", "ss01", "ss03";
	color: var(--ink);
	background: var(--bg);
	line-height: 1.55;
	font-size: 16px; /* standard desktop body */
}
@media (min-width: 1600px) {
	body { font-size: 18px; } /* widescreen body */
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 9999; }
.skip-link:focus { left: 8px; top: 8px; }

/* ============================= LAYOUT ============================= */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 720px) {
	.container, .container--narrow { padding: 0 15px; }
}

.section { padding: 80px 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy-deep); color: #fff; }
.section--teal { background: var(--teal); color: #fff; }
@media (max-width: 720px) { .section { padding: 56px 0; } }

/* ============================= TYPOGRAPHY ============================= */
h1, h2, h3, h4 { font-family: inherit; color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0; color: var(--muted); text-wrap: pretty; }

.eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--teal);
}
.eyebrow--onDark { color: #8dd6cd; }

/* ============================= BUTTONS ============================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 1rem; font-weight: 600;
	padding: 11px 22px;
	border: 0;
	transition: background .15s, box-shadow .15s, transform .15s;
	text-wrap: nowrap;
	white-space: nowrap;
}
.btn--primary {
	background: var(--teal); color: #fff;
	box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 14px -8px rgba(77,186,174,.55);
}
.btn--primary:hover { background: var(--teal-hover); }
.btn--secondary {
	background: #fff; color: var(--ink);
	box-shadow: 0 1px 2px rgba(17,32,43,.06), 0 0 0 1px rgba(17,32,43,.10) inset;
}
.btn--secondary:hover { box-shadow: 0 1px 2px rgba(17,32,43,.10), 0 0 0 1px rgba(17,32,43,.18) inset; }
.btn--ghost-light {
	background: rgba(255,255,255,.08); color: #fff;
	box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}
.btn--ghost-light:hover { background: rgba(255,255,255,.14); }

/* ============================= GLOBAL CARD ============================= */
.card {
	display: flex; flex-direction: column;
	background: #fff;
	padding: 26px;
	box-shadow: 0 1px 2px rgba(17,32,43,.04), 0 0 0 1px var(--line) inset;
	transition: transform .2s, box-shadow .2s;
	color: inherit;
}
a.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -12px rgba(17,32,43,.18), 0 0 0 1px var(--line) inset;
}

/* ============================= FORM (estimate) ============================= */
.estimate-card {
	background: #fff;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(17,32,43,.05), 0 0 0 1px var(--line) inset;
	/* Account for sticky header when scroll-targeted via #estimate */
	scroll-margin-top: 120px;
}
.estimate-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.estimate-card__helper { font-size: 13.5px; margin-bottom: 18px; }

.form { display: grid; gap: 12px; }
.form input, .form textarea {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	padding: 12px 14px;
	border: 0;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line) inset;
	color: var(--ink);
	transition: box-shadow .15s;
}
.form input:focus, .form textarea:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--teal) inset, 0 0 0 4px rgba(77,186,174,.12);
}
.form textarea { min-height: 120px; resize: vertical; }
.form .btn { width: 100%; }
.form__success {
	margin: 0;
	padding: 12px 14px;
	background: var(--teal-soft);
	color: var(--teal-hover);
	font-size: 14px;
	font-weight: 500;
}

/* ============================= WP DEFAULTS ============================= */
.screen-reader-text { position: absolute !important; left: -9999px; }