/*
Theme Name: Service Framework
Description: Reusable local service site framework built on GeneratePress. Layout, global styles and section patterns live here, so a new city or industry site starts from code instead of a copy.
Template: generatepress
Version: 0.2.0
Text Domain: service-framework
*/

/* ==========================================================================
   1. Fonts. Self hosted so there is no request to Google and no layout shift.
   ========================================================================== */

@font-face {
	font-family: 'Libre Franklin';
	src: url('fonts/libre-franklin-latin.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url('fonts/source-serif-4-latin.woff2') format('woff2-variations');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens. A new city or industry site changes the brand block and nothing
      else. Never hard code a colour or a spacing value below this section.
   ========================================================================== */

:root {
	/* Brand */
	--sf-navy: #0F2340;
	--sf-navy-deep: #081234;
	--sf-ink: #16233A;
	--sf-muted: #5A6679;
	--sf-line: #E3E7ED;
	--sf-tint: #F6F7F9;
	--sf-white: #FFFFFF;
	--sf-accent: #1F7A4D;
	--sf-accent-dark: #17603C;
	--sf-accent-tint: #EAF3EE;
	--sf-star: #E9A825;
	--sf-on-dark-muted: #B9C4D4;

	/* Spacing scale */
	--sf-1: 4px;
	--sf-2: 8px;
	--sf-3: 12px;
	--sf-4: 16px;
	--sf-5: 24px;
	--sf-6: 32px;
	--sf-7: 48px;
	--sf-8: 64px;
	--sf-9: 80px;
	--sf-10: 96px;

	/* Type scale */
	--sf-h1: clamp(36px, 4.4vw, 58px);
	--sf-h2: clamp(28px, 2.9vw, 40px);
	--sf-h3: 22px;
	--sf-lead: clamp(16.5px, 1.25vw, 19px);
	--sf-body: 17px;
	--sf-small: 14px;
	--sf-eyebrow: 12px;

	/* Layout */
	--sf-container: 1200px;
	--sf-gutter: 24px;
	--sf-radius: 8px;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

body {
	font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: var(--sf-body);
	line-height: 1.6;
	color: var(--sf-ink);
	background: var(--sf-white);
}

h1, h2, h3, h4 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--sf-navy);
}

h1 { font-size: var(--sf-h1); }
h2 { font-size: var(--sf-h2); }
h3 { font-size: var(--sf-h3); line-height: 1.25; }

a { color: var(--sf-accent); }

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */

.sf-band { width: 100%; }
.sf-band--tint { background: var(--sf-tint); }
.sf-band--navy { background: var(--sf-navy); color: var(--sf-white); }

.sf-inner {
	max-width: var(--sf-container);
	margin: 0 auto;
	padding-left: var(--sf-gutter);
	padding-right: var(--sf-gutter);
}

.sf-eyebrow {
	font-size: var(--sf-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sf-muted);
	margin-bottom: var(--sf-3);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sf-2);
	padding: 14px 22px;
	border-radius: var(--sf-radius);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
}

.sf-btn--primary { background: var(--sf-accent); color: var(--sf-white); }
.sf-btn--primary:hover, .sf-btn--primary:focus { background: var(--sf-accent-dark); color: var(--sf-white); }

.sf-btn--outline { background: var(--sf-white); color: var(--sf-navy); border-color: var(--sf-line); }
.sf-btn--outline:hover, .sf-btn--outline:focus { border-color: var(--sf-navy); color: var(--sf-navy); }

/* ==========================================================================
   6. Header
   ========================================================================== */

.sf-header {
	background: var(--sf-white);
	border-bottom: 1px solid var(--sf-line);
}

.sf-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sf-5);
	padding-top: 14px;
	padding-bottom: 14px;
}

.sf-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--sf-navy);
	text-decoration: none;
	flex: 0 0 auto;
}

.sf-brand__name {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.15;
	display: block;
}

.sf-brand__kicker {
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sf-muted);
	display: block;
}

.sf-nav { display: flex; align-items: center; gap: var(--sf-5); margin-left: var(--sf-3); }
.sf-nav a { font-size: var(--sf-small); color: var(--sf-ink); text-decoration: none; }
.sf-nav a:hover { color: var(--sf-accent); }

.sf-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--sf-4); }

/* The phone number is the loudest thing in the header on purpose. Calls are the goal. */
.sf-header__phone {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sf-navy);
	text-decoration: none;
	white-space: nowrap;
}

.sf-header__phone:hover { text-decoration: underline; }

.sf-burger {
	display: none;
	color: var(--sf-navy);
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--sf-line);
	border-radius: 6px;
	background: var(--sf-white);
	cursor: pointer;
}

/* GeneratePress styles <button> with white text and shrinks svg inside it,
   which made this icon invisible and then two pixels tall. Pin both. */
.sf-burger svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.sf-mobile-nav { display: none; border-top: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-mobile-nav.is-open { display: block; }
.sf-mobile-nav a {
	display: block;
	padding: 14px var(--sf-gutter);
	border-bottom: 1px solid var(--sf-line);
	font-size: 16px;
	color: var(--sf-ink);
	text-decoration: none;
}

/* ==========================================================================
   7. Emergency strip
   ========================================================================== */

.sf-strip { background: var(--sf-accent); color: var(--sf-white); }

.sf-strip__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sf-5);
	padding-top: var(--sf-4);
	padding-bottom: var(--sf-4);
	flex-wrap: wrap;
}

.sf-strip__lead { font-weight: 600; }
.sf-strip__meta { font-size: var(--sf-small); color: rgba(255, 255, 255, 0.85); }

.sf-strip__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--sf-2);
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--sf-radius);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	color: var(--sf-white);
	text-decoration: none;
	white-space: nowrap;
}

.sf-strip__phone:hover { background: rgba(255, 255, 255, 0.12); color: var(--sf-white); }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.sf-footer { background: var(--sf-white); border-top: 1px solid var(--sf-line); }
.sf-footer__inner { padding-top: var(--sf-9); padding-bottom: var(--sf-6); }

.sf-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sf-6);
}

.sf-footer h2 {
	font-family: 'Libre Franklin', sans-serif;
	font-size: var(--sf-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sf-navy);
	margin-bottom: var(--sf-4);
}

.sf-footer p, .sf-footer li { font-size: 15px; color: var(--sf-muted); }
.sf-footer ul { list-style: none; margin: 0; padding: 0; }
.sf-footer li { margin-bottom: var(--sf-3); }

.sf-footer__phone { font-weight: 600; color: var(--sf-accent); text-decoration: none; }

.sf-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: var(--sf-4);
	flex-wrap: wrap;
	margin-top: var(--sf-8);
	padding-top: var(--sf-5);
	border-top: 1px solid var(--sf-line);
	font-size: var(--sf-small);
	color: var(--sf-muted);
}

/* ==========================================================================
   9. Mobile call bar. Fixed, always reachable, phone only.
   ========================================================================== */

.sf-callbar { display: none; }



/* ==========================================================================
   11. Hero
   ========================================================================== */

.sf-hero__inner {
	gap: var(--sf-8);
	padding-top: var(--sf-9);
	padding-bottom: var(--sf-9);
}

/* Core wraps group children in an extra .wp-block-group__inner-container, so
   the two column row is a wp:columns block, not a grid we own. Less CSS, and
   the column widths stay draggable in the editor. */
.sf-hero__inner .sf-hero__lead { max-width: none; }

.sf-hero h1 { margin: 0 0 var(--sf-5); }

.sf-hero__lead {
	font-size: var(--sf-lead);
	color: var(--sf-muted);
	margin: 0 0 var(--sf-6);
	max-width: 34em;
}

.sf-hero__actions {
	display: flex;
	gap: var(--sf-3);
	flex-wrap: wrap;
	margin-bottom: var(--sf-5);
}

.sf-rating { display: flex; align-items: center; gap: var(--sf-3); font-size: var(--sf-small); color: var(--sf-muted); }
.sf-rating__stars { color: var(--sf-star); letter-spacing: 2px; }
.sf-rating__source { font-size: var(--sf-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; }

.sf-figure {
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	background: var(--sf-tint) repeating-linear-gradient(-45deg, rgba(15, 35, 64, 0.03) 0 8px, transparent 8px 16px);
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sf-6);
	text-align: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	line-height: 1.7;
	color: var(--sf-muted);
}

/* ==========================================================================
   12. Trust badges
   ========================================================================== */

.sf-badges__inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--sf-5);
	padding-top: var(--sf-6);
	padding-bottom: var(--sf-6);
	text-align: center;
}

.sf-badge { display: flex; flex-direction: column; align-items: center; gap: var(--sf-2); }
.sf-badge svg { color: var(--sf-navy); }
.sf-badge span { font-size: var(--sf-small); font-weight: 600; color: var(--sf-navy); }

/* ==========================================================================
   10. Breakpoints
   ========================================================================== */

@media (max-width: 1023px) {
	.sf-nav { display: none; }
	.sf-burger { display: flex; }
	.sf-header__phone { font-size: 26px; }
	.sf-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.sf-hero__inner { gap: var(--sf-6); padding-top: var(--sf-7); padding-bottom: var(--sf-7); }
	.sf-figure { min-height: 300px; }
	.sf-badges__inner { grid-template-columns: repeat(3, 1fr); gap: var(--sf-5) var(--sf-3); }
}

@media (max-width: 767px) {
	:root { --sf-gutter: 20px; }

	body { padding-bottom: 78px; }

	.sf-brand__name, .sf-brand__kicker { display: none; }
	.sf-header__phone { font-size: 23px; }
	.sf-header__phone svg { display: none; }
	.sf-header__inner { gap: var(--sf-3); }

	.sf-strip__inner { justify-content: flex-start; gap: var(--sf-3); }
	.sf-strip__meta { display: none; }

	.sf-footer__grid { grid-template-columns: 1fr; gap: var(--sf-6); }
	.sf-hero__actions .sf-btn { flex: 1 1 100%; }
	.sf-badges__inner { grid-template-columns: repeat(2, 1fr); }
	.sf-footer__inner { padding-top: var(--sf-7); }

	.sf-callbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--sf-2);
		padding: 18px 16px;
		background: var(--sf-accent);
		color: var(--sf-white);
		font-size: 18px;
		font-weight: 600;
		text-decoration: none;
	}
}