/* Well Water Insider site-wide brand layer (loaded on every page, after GeneratePress).
   Brand v1, approved 2026-09-29: Deep Aquifer ink + Spring Teal on Stone. Bricolage Grotesque + Figtree. */

:root {
	--wwi-ink: #0C2F3A;
	--wwi-ink-2: #123F4D;
	--wwi-teal: #0E6F6A;
	--wwi-teal-dark: #0B5A56;
	--wwi-teal-soft: #DDF2EF;
	--wwi-teal-on-ink: #5FD3C8;
	--wwi-bg: #F5F6F4;
	--wwi-surface: #FFFFFF;
	--wwi-surface-2: #F5F6F4;
	--wwi-line: #E1E6E3;
	--wwi-line-2: #C9D2CE;
	--wwi-text: #16262B;
	--wwi-muted: #5A6B6E;
	--wwi-green: #1B7F4B; --wwi-green-bg: #E3F4EA;
	--wwi-amber: #9A6200; --wwi-amber-bg: #FFF3D6;
	--wwi-red: #B3261E;   --wwi-red-bg: #FBE8E6;
	--wwi-radius: 12px;
	--wwi-radius-sm: 10px;
	--wwi-shadow-sm: 0 1px 2px rgba(12, 47, 58, .05);
	--wwi-shadow: 0 2px 4px rgba(12, 47, 58, .04), 0 12px 32px rgba(12, 47, 58, .08);
	--wwi-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
	--wwi-font-body: "Figtree", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

	/* Map onto GeneratePress global color variables so theme buttons, links and blocks follow the brand */
	--contrast: var(--wwi-ink);
	--contrast-2: var(--wwi-muted);
	--contrast-3: var(--wwi-line-2);
	--base: var(--wwi-bg);
	--base-2: var(--wwi-surface-2);
	--base-3: var(--wwi-surface);
	--accent: var(--wwi-teal);
}

/* Base type */
body {
	font-family: var(--wwi-font-body);
	color: var(--wwi-text);
	background: var(--wwi-bg);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .wwi-display {
	font-family: var(--wwi-font-display);
	font-variation-settings: "opsz" 96;
	color: var(--wwi-ink);
	letter-spacing: -.02em;
	line-height: 1.08;
	text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; font-weight: 600; }
p, li { max-width: 68ch; }
a { color: var(--wwi-teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wwi-ink); }
.entry-content > p:first-of-type:not(.wwi-lead) { }
.wwi-lead { font-size: 1.15rem; color: var(--wwi-muted); }
.wwi-eyebrow { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wwi-teal); margin-bottom: .5rem; }
.wwi-muted { color: var(--wwi-muted); }
.wwi-tnum { font-variant-numeric: tabular-nums; }

/* GeneratePress header */
.site-header { background: var(--wwi-surface); border-bottom: 1px solid var(--wwi-line); }
.site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }
.site-logo img { height: 36px; width: auto; max-height: 36px; }
.site-logo + .site-branding .main-title, .site-logo + .site-branding .site-description { display: none; } /* logo replaces the text title */
.main-navigation a, .main-navigation .menu-toggle { font-family: var(--wwi-font-body); font-weight: 500; font-size: .95rem; color: var(--wwi-text); }
.main-navigation .main-nav ul li a { padding-left: 14px; padding-right: 14px; }
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--wwi-teal-dark); }
.main-navigation .wwi-nav-cta > a { background: var(--wwi-ink); color: #fff !important; border-radius: var(--wwi-radius-sm); padding: 9px 16px !important; line-height: 1.2; margin-left: 8px; }
.main-navigation .wwi-nav-cta > a:hover { background: var(--wwi-ink-2); }

/* GeneratePress buttons and blocks */
.button, button, input[type="button"], input[type="submit"], .wp-block-button__link, .gb-button {
	font-family: var(--wwi-font-body); font-weight: 600; border-radius: var(--wwi-radius-sm);
	background: var(--wwi-ink); color: #fff; border: 1px solid var(--wwi-ink);
}
.button:hover, button:hover, .wp-block-button__link:hover, .gb-button:hover { background: var(--wwi-ink-2); color: #fff; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wwi-ink); border-color: var(--wwi-line-2); }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
	font-family: var(--wwi-font-body); border: 1px solid var(--wwi-line); border-radius: var(--wwi-radius-sm); background: var(--wwi-surface); color: var(--wwi-text); padding: .75em 1em;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--wwi-teal); outline-offset: 1px; border-color: transparent; }

/* Content area */
.entry-header h1, .page-header h1, h1.entry-title { color: var(--wwi-ink); }
.one-container .site-content, .separate-containers .site-content { padding-top: 40px; padding-bottom: 72px; }
@media (max-width: 768px) { .one-container .site-content, .separate-containers .site-content { padding-top: 24px; padding-bottom: 48px; } }
.wwi-map-tiles img { filter: saturate(.6) contrast(.95); } /* calmer OSM tiles */
.site-content, .site-main { background: transparent; }
.separate-containers .inside-article, .one-container .container { background: transparent; }
.entry-content table { font-variant-numeric: tabular-nums; font-size: .95rem; }
.entry-content table th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wwi-muted); border-bottom: 1px solid var(--wwi-line-2); }
.entry-content table td { border-bottom: 1px solid var(--wwi-line); }

/* Ink sections (hero, CTA bands) */
.wwi-ink { background: var(--wwi-ink); color: #E8F0EF; }
.wwi-ink h1, .wwi-ink h2, .wwi-ink h3 { color: #fff; }
.wwi-ink p { color: #C7D6D6; }
.wwi-ink a { color: var(--wwi-teal-on-ink); }
.wwi-ink .wwi-eyebrow { color: var(--wwi-teal-on-ink); }
.wwi-ink .wwi-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.28); }
.wwi-ink .wwi-btn--ghost:hover { background: rgba(255,255,255,.08); }

/* Footer */
.site-footer, .site-info, .footer-widgets { background: var(--wwi-ink); color: #C7D6D6; font-size: .92rem; }
.site-footer a, .footer-widgets a { color: #E8F0EF; }
.site-footer a:hover, .footer-widgets a:hover { color: var(--wwi-teal-on-ink); }
.footer-widgets .widget-title { font-family: var(--wwi-font-display); color: #fff; font-size: 1rem; }
.site-info { border-top: 1px solid rgba(255,255,255,.1); }

/* Breadcrumbs (Yoast) */
.wwi-crumbs, #breadcrumbs { font-size: .85rem; color: var(--wwi-muted); margin-bottom: 1rem; }
.wwi-crumbs a, #breadcrumbs a { color: var(--wwi-muted); text-decoration: none; }
.wwi-crumbs a:hover, #breadcrumbs a:hover { color: var(--wwi-teal-dark); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }