/*
 * ServiFlex — Main Frontend Stylesheet
 * All non-block-specific, global styles.
 */

/* -------------------------------------------------------------------------
 * CSS Custom Properties (defaults — overridden by custom-colors.css after save)
 * ---------------------------------------------------------------------- */
:root {
	--sf-color-primary:    #003087;
	--sf-color-secondary:  #0056b3;
	--sf-color-accent:     #00a86b;
	--sf-color-accent-dark:#007a4d;
	--sf-color-emergency:  #e53e00;
	--sf-color-emergency-dark: #c0360a;
	--sf-color-highlight:  #ffc107;
	--sf-color-light:      #f4f6f9;
	--sf-color-white:      #ffffff;
	--sf-color-dark:       #1a1a2e;
	--sf-color-text:       #2d3748;
	--sf-color-muted:      #718096;
	--sf-color-border:     #e2e8f0;
	--sf-font-heading:     'Montserrat', sans-serif;
	--sf-font-body:        'Inter', sans-serif;

	/* Footer-specific tokens */
	--sf-footer-bg:        #1a1a2e;
	--sf-footer-text:      rgba(255, 255, 255, 0.82);
	--sf-footer-heading:   #ffffff;
	--sf-footer-link:      rgba(255, 255, 255, 0.72);
	--sf-footer-link-hover:#ffffff;
}

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

html { scroll-behavior: smooth; }

body {
	font-family: var(--sf-font-body, var(--wp--preset--font-family--inter, 'Inter', system-ui, sans-serif));
	color: var(--sf-color-text);
	background-color: #ffffff;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

/* Global link colors (light background contexts) */
a {
	color: var(--sf-color-secondary);
	transition: color 0.15s;
}
a:hover { color: var(--sf-color-primary); }

/* =========================================================================
 * HEADER
 * ====================================================================== */
.sf-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid var(--sf-color-border);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.sf-header-inner {
	padding: 0 1.5rem;
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
	min-height: 72px;
}

/* -------------------------------------------------------------------------
 * Header brand: logo + site title
 * ---------------------------------------------------------------------- */
.sf-header-brand {
	flex-shrink: 0;
	gap: 0.75rem;
}

/* Site logo */
.sf-site-logo img {
	width: auto;
	max-height: 52px;
	display: block;
}

/* Site title — shown when no logo is uploaded */
.sf-site-title,
.sf-header-brand .wp-block-site-title {
	margin: 0;
	line-height: 1;
}

.sf-site-title a,
.sf-header-brand .wp-block-site-title a {
	font-family: var(--sf-font-heading) !important;
	font-size: 1.35rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	color: var(--sf-color-dark) !important;
	text-decoration: none !important;
}

.sf-site-title a:hover,
.sf-header-brand .wp-block-site-title a:hover {
	color: var(--sf-color-primary) !important;
}

/*
 * When a logo IS present and visible, hide the text title to avoid duplication.
 * Remove this rule if you want both the logo image and site name visible side-by-side.
 */
.sf-header-brand:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

/* -------------------------------------------------------------------------
 * Header navigation — WP Navigation block (native Site Editor menus)
 * ---------------------------------------------------------------------- */
.sf-primary-nav .wp-block-navigation__container { gap: 0; }

.sf-primary-nav a.wp-block-navigation-item__content,
.sf-primary-nav .wp-block-navigation-item__content {
	padding: 0.45rem 0.85rem;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	color: var(--sf-color-dark) !important;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s;
}

.sf-primary-nav a.wp-block-navigation-item__content:hover,
.sf-primary-nav .wp-block-navigation-item__content:hover {
	background: var(--sf-color-light);
	color: var(--sf-color-primary) !important;
}

/* Mobile hamburger icon — keep it dark on white header */
.sf-primary-nav .wp-block-navigation__responsive-container-open svg,
.sf-primary-nav .wp-block-navigation__responsive-container-close svg {
	color: var(--sf-color-dark);
	fill: var(--sf-color-dark);
}

/* -------------------------------------------------------------------------
 * Classic nav bridge — Appearance > Menus output inside wp:navigation blocks
 * Applies when the navigation block has no Site-Editor ref assigned.
 * ---------------------------------------------------------------------- */

/* ---- Shared list reset ---- */
.sf-nav-classic .sf-nav-menu,
.sf-nav-classic .sf-nav-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Desktop: primary nav — horizontal flex row ---- */
.sf-primary-nav.sf-nav-classic .sf-nav-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.sf-primary-nav.sf-nav-classic .sf-nav-menu > li {
	position: relative;
}

.sf-primary-nav.sf-nav-classic .sf-nav-menu a {
	display: block;
	padding: 0.45rem 0.85rem;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	color: var(--sf-color-dark);
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.sf-primary-nav.sf-nav-classic .sf-nav-menu a:hover,
.sf-primary-nav.sf-nav-classic .sf-nav-menu li:focus-within > a {
	background: var(--sf-color-light);
	color: var(--sf-color-primary);
}

/* ---- Desktop: primary nav sub-menus (dropdowns) ---- */
.sf-primary-nav.sf-nav-classic .sf-nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--sf-color-border);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1);
	z-index: 1000;
	padding: 0.4rem 0;
}

.sf-primary-nav.sf-nav-classic .sf-nav-menu li:hover > .sub-menu,
.sf-primary-nav.sf-nav-classic .sf-nav-menu li:focus-within > .sub-menu {
	display: block;
}

.sf-primary-nav.sf-nav-classic .sf-nav-menu .sub-menu a {
	border-radius: 0;
	padding: 0.5rem 1rem;
	font-weight: 500;
	font-size: 0.875rem;
}

/* ---- Desktop: footer nav — vertical list ---- */
.sf-footer-nav.sf-nav-classic .sf-nav-menu {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sf-footer-nav.sf-nav-classic .sf-nav-menu a {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--sf-footer-link) !important;
	text-decoration: none;
	transition: color 0.15s;
	padding: 0;
}

.sf-footer-nav.sf-nav-classic .sf-nav-menu a:hover {
	color: #fff !important;
}

.sf-footer-nav.sf-nav-classic .sf-nav-menu .sub-menu {
	padding-left: 1rem;
	margin-top: 0.25rem;
}

/* ---- Mobile toggle button ---- */
.sf-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	color: var(--sf-color-dark);
	border-radius: 4px;
	transition: background 0.15s;
}

.sf-mobile-toggle:hover {
	background: var(--sf-color-light);
}

/* Show the hamburger icon; hide the close icon by default */
.sf-mobile-toggle .sf-mobile-toggle__close { display: none; }

/* When nav is open: hide hamburger, show close icon */
.sf-primary-nav.sf-nav--open .sf-mobile-toggle .sf-mobile-toggle__close { display: block; }
.sf-primary-nav.sf-nav--open .sf-mobile-toggle svg:not(.sf-mobile-toggle__close) { display: none; }

/* ---- Mobile: stack the nav vertically ---- */
@media (max-width: 767px) {
	.sf-primary-nav.sf-nav-classic {
		position: relative;
	}

	.sf-mobile-toggle {
		display: flex;
	}

	/* Hide the menu until toggled open */
	.sf-primary-nav.sf-nav-classic .sf-nav-menu {
		display: none;
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 50%;
		transform: translateX(-50%);
		width: min(360px, 95vw);
		background: #fff;
		border: 1px solid var(--sf-color-border);
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(0,0,0,0.12);
		padding: 0.75rem 0;
		z-index: 9999;
		flex-direction: column;
		gap: 0;
	}

	.sf-primary-nav.sf-nav-classic.sf-nav--open .sf-nav-menu {
		display: flex;
	}

	.sf-primary-nav.sf-nav-classic .sf-nav-menu a {
		border-radius: 0;
		padding: 0.65rem 1.25rem;
		font-size: 1rem;
	}

	.sf-primary-nav.sf-nav-classic .sub-menu {
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		background: var(--sf-color-light) !important;
		border-radius: 0 !important;
		padding: 0 !important;
		display: none !important;
	}

	.sf-primary-nav.sf-nav-classic li.sf-submenu-open > .sub-menu {
		display: flex !important;
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
 * Header action buttons
 * ---------------------------------------------------------------------- */
.sf-header-buttons { gap: 0.6rem; }

/* Base button reset inside header */
.sf-header-buttons .wp-block-button__link {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	padding: 0.5rem 1.1rem !important;
	border-radius: 4px !important;
	white-space: nowrap;
	transition: background-color 0.15s, transform 0.1s !important;
	line-height: 1.4 !important;
}

/* "Get a Quote" — Accent green */
.sf-btn-quote .wp-block-button__link,
.wp-block-button__link.has-accent-background-color {
	background-color: var(--sf-color-accent) !important;
	color: #ffffff !important;
	border: none !important;
}

.sf-btn-quote .wp-block-button__link:hover,
.wp-block-button__link.has-accent-background-color:hover {
	background-color: var(--sf-color-accent-dark) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* "Call Now" — Emergency orange-red */
.sf-btn-call .wp-block-button__link,
.wp-block-button__link.has-emergency-background-color {
	background-color: var(--sf-color-emergency) !important;
	color: #ffffff !important;
	border: none !important;
}

.sf-btn-call .wp-block-button__link:hover,
.wp-block-button__link.has-emergency-background-color:hover {
	background-color: var(--sf-color-emergency-dark) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Shrink header on scroll */
.sf-header--scrolled .sf-header-inner { min-height: 56px; }

/* =========================================================================
 * FOOTER
 * ====================================================================== */
.sf-site-footer {
	background-color: var(--sf-footer-bg) !important;
	padding: clamp(3rem, 6vw, 5rem) 1.5rem 2rem !important;
}

/* -------------------------------------------------------------------------
 * Footer — force ALL text/links to be light-on-dark
 *
 * This override is intentionally broad and uses !important to beat
 * WordPress's generated color utility classes (has-*-color) which often
 * come in with high specificity in block themes.
 * ---------------------------------------------------------------------- */

/* Base text */
.sf-site-footer,
.sf-site-footer p,
.sf-site-footer li,
.sf-site-footer ul,
.sf-site-footer ol,
.sf-site-footer address,
.sf-site-footer span,
.sf-site-footer label,
.sf-site-footer figcaption,
.sf-site-footer .wp-block-shortcode {
	color: var(--sf-footer-text) !important;
}

/* Headings — full white */
.sf-site-footer h1,
.sf-site-footer h2,
.sf-site-footer h3,
.sf-site-footer h4,
.sf-site-footer h5,
.sf-site-footer h6,
.sf-site-footer .wp-block-heading {
	color: var(--sf-footer-heading) !important;
}

/* Links — light with hover to full white */
.sf-site-footer a,
.sf-site-footer a:visited {
	color: var(--sf-footer-link) !important;
	text-decoration: none;
	transition: color 0.15s;
}

.sf-site-footer a:hover,
.sf-site-footer a:focus {
	color: var(--sf-footer-link-hover) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Phone links specifically (output by [sf_phone] shortcode) */
.sf-site-footer .sf-phone-link,
.sf-site-footer .sf-local-phone {
	color: var(--sf-color-highlight) !important;
	font-weight: 600;
	text-decoration: none;
}

.sf-site-footer .sf-phone-link:hover,
.sf-site-footer .sf-local-phone:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

/* Navigation block inside footer */
.sf-site-footer .wp-block-navigation,
.sf-site-footer .wp-block-navigation a,
.sf-site-footer .wp-block-navigation .wp-block-navigation-item__content,
.sf-footer-nav .wp-block-navigation-item__content {
	color: var(--sf-footer-link) !important;
	text-decoration: none !important;
}

.sf-site-footer .wp-block-navigation a:hover,
.sf-site-footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.sf-footer-nav .wp-block-navigation-item__content:hover {
	color: var(--sf-footer-link-hover) !important;
}

.sf-site-footer .wp-block-navigation__container,
.sf-footer-nav .wp-block-navigation__container {
	flex-direction: column;
	gap: 0.2rem;
}

.sf-site-footer .wp-block-navigation .wp-block-navigation-item__content,
.sf-footer-nav .wp-block-navigation-item__content {
	padding: 0.25rem 0 !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
}

/* Service area list (output by [sf_service_area_list] shortcode) */
.sf-site-footer .sf-service-area-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-site-footer .sf-service-area-list li {
	padding: 0.2rem 0;
	font-size: 0.9rem;
	color: var(--sf-footer-text) !important;
}

.sf-site-footer .sf-service-area-list li::before {
	content: '→ ';
	color: var(--sf-color-accent);
	font-weight: 600;
}

/* Footer layout */
.sf-footer-columns {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
}

.sf-footer-col { min-width: 180px; flex: 1; }
.sf-footer-brand { flex-basis: 280px; flex-shrink: 0; }

/* Logo in footer — invert to white */
.sf-footer-logo img,
.sf-site-footer .wp-block-site-logo img {
	width: auto;
	max-height: 50px;
	filter: brightness(0) invert(1);
}

/* Divider line */
.sf-footer-divider {
	border-color: rgba(255, 255, 255, 0.15) !important;
	opacity: 1 !important;
}

/* =========================================================================
 * SECTION / BLOCK SHARED STYLES
 * ====================================================================== */
.sf-section-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 2.5rem;
}

.sf-section-title {
	font-family: var(--sf-font-heading);
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--sf-color-dark);
	margin: 0 0 0.75rem;
	line-height: 1.25;
}

.sf-section-subtitle {
	font-size: 1.05rem;
	color: var(--sf-color-muted);
	margin: 0;
	line-height: 1.65;
}

/* =========================================================================
 * PAGE HEADER (inner pages)
 * ====================================================================== */
.sf-page-header {
	background: var(--sf-color-light);
	padding: 2.5rem 1.5rem;
}

.sf-page-header .wp-block-post-title {
	font-size: clamp(1.75rem, 4vw, 3rem) !important;
	font-weight: 800 !important;
	color: var(--sf-color-dark) !important;
	margin: 0 !important;
}

/* =========================================================================
 * WP CORE BLOCK OVERRIDES
 * ====================================================================== */
/* All buttons get the heading font + bold weight as a baseline */
.wp-block-buttons .wp-block-button__link {
	border-radius: 4px !important;
	font-family: var(--sf-font-heading) !important;
	font-weight: 700 !important;
}

/* Primary (default) button */
.wp-block-button__link.has-primary-background-color {
	background-color: var(--sf-color-primary) !important;
	color: #ffffff !important;
}
.wp-block-button__link.has-primary-background-color:hover {
	background-color: var(--sf-color-secondary) !important;
	color: #ffffff !important;
}

/* Secondary button */
.wp-block-button__link.has-secondary-background-color {
	background-color: var(--sf-color-secondary) !important;
	color: #ffffff !important;
}
.wp-block-button__link.has-secondary-background-color:hover {
	background-color: var(--sf-color-primary) !important;
	color: #ffffff !important;
}

/* Separator */
.wp-block-separator { border-color: var(--sf-color-border) !important; }

/* Constrained layout inline padding */
.wp-block-group.is-layout-constrained > * { padding-inline: 1.5rem; }

/* =========================================================================
 * UTILITY
 * ====================================================================== */
.sf-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* =========================================================================
 * SCROLL-REVEAL
 * ====================================================================== */
.sf-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.sf-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sf-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
 * ACCESSIBILITY
 * ====================================================================== */
:focus-visible {
	outline: 3px solid var(--sf-color-secondary);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: #fff;
	color: var(--sf-color-primary);
	font-weight: 700;
	text-decoration: none;
	border-bottom-right-radius: 4px;
}
.skip-link:focus { top: 0; }

/* =========================================================================
 * RESPONSIVE
 * ====================================================================== */
@media (max-width: 768px) {
	.sf-header-inner { flex-wrap: wrap; gap: 0.75rem; padding: 0.5rem 1rem; }
	.sf-footer-columns { flex-direction: column !important; }
	.sf-footer-col { width: 100% !important; flex-basis: 100% !important; }
}

@media (max-width: 600px) {
	/* Show only the Call Now button on small phones */
	.sf-btn-quote { display: none; }
}

@media (max-width: 480px) {
	.sf-header-actions { display: none; }
}