/* =========================================================================
   Pond Pumps Adviser Pro — main.css
   ========================================================================= */

:root {
	--ppa-pond-blue: #0E3D5C;
	--ppa-water-teal: #1F8C8F;
	--ppa-moss: #3C6E47;
	--ppa-lily: #7BB661;
	--ppa-stone: #5B6770;
	--ppa-sand: #E9DFC9;
	--ppa-amber: #E29722;
	--ppa-electric: #1F8FFF;
	--ppa-ink: #0B1B26;
	--ppa-muted: #5E6F7B;
	--ppa-surface: #F4F8FA;
	--ppa-border: #D8E2E8;
	--ppa-white: #FFFFFF;

	--ppa-radius-sm: 8px;
	--ppa-radius: 14px;
	--ppa-radius-lg: 22px;
	--ppa-shadow: 0 8px 24px -12px rgba(14, 61, 92, 0.18);
	--ppa-shadow-lg: 0 30px 80px -40px rgba(14, 61, 92, 0.4);
	--ppa-ring: 0 0 0 3px rgba(31, 143, 255, 0.25);

	--ppa-container: 1200px;
	--ppa-gap: clamp(1rem, 2vw, 1.5rem);

	--ppa-font-sans: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--ppa-font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
	--ppa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.ppa-theme {
	margin: 0;
	background: var(--ppa-white);
	color: var(--ppa-ink);
	font-family: var(--ppa-font-sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--ppa-water-teal); text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { color: var(--ppa-pond-blue); }

h1, h2, h3, h4 { font-family: var(--ppa-font-display); color: var(--ppa-pond-blue); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.65rem, 4.5vw, 3.25rem); font-weight: 700; word-wrap: break-word; }
h2 { font-size: clamp(1.35rem, 3vw, 2.25rem); font-weight: 700; word-wrap: break-word; }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; }
p  { margin: 0 0 1em; word-wrap: break-word; }

.ppa-mono { font-family: var(--ppa-font-mono); }

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.ppa-skip {
	position: absolute; left: -999px; top: 0; padding: .5rem 1rem;
	background: var(--ppa-pond-blue); color: var(--ppa-white); z-index: 999;
}
.ppa-skip:focus { left: 1rem; top: 1rem; }

.ppa-container {
	max-width: var(--ppa-container);
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
}

/* ----- Header ----- */
.ppa-site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--ppa-border);
}
.ppa-site-header__row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 1rem;
	align-items: center;
	padding: .75rem 1.25rem;
}
.ppa-brand {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 700; color: var(--ppa-pond-blue); text-decoration: none;
	font-family: var(--ppa-font-display); font-size: 1.15rem;
}
.ppa-brand--light { color: var(--ppa-white); }
.ppa-site-nav { justify-self: end; }
.ppa-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 1.25rem; align-items: center;
}
.ppa-menu a {
	color: var(--ppa-ink); text-decoration: none; font-weight: 500; font-size: .95rem;
	padding: .35rem .25rem; border-bottom: 2px solid transparent; transition: border-color .15s ease;
}
.ppa-menu a:hover { border-color: var(--ppa-water-teal); color: var(--ppa-pond-blue); }
.ppa-cta-mini {
	display: inline-flex; align-items: center; gap: .35rem;
	background: var(--ppa-pond-blue); color: var(--ppa-white) !important;
	padding: .55rem .85rem; border-radius: 999px; font-weight: 600;
	text-decoration: none; font-size: .9rem;
}
.ppa-cta-mini:hover { background: var(--ppa-water-teal); }
.ppa-menu-toggle {
	display: none; background: none; border: 0; padding: .5rem; cursor: pointer;
}
.ppa-menu-toggle__bars,
.ppa-menu-toggle__bars::before,
.ppa-menu-toggle__bars::after {
	display: block; width: 22px; height: 2px; background: var(--ppa-ink); border-radius: 2px;
	transition: transform .2s ease;
	content: '';
}
.ppa-menu-toggle__bars { position: relative; }
.ppa-menu-toggle__bars::before { position: absolute; top: -7px; }
.ppa-menu-toggle__bars::after  { position: absolute; top:  7px; }

.ppa-disclosure-bar {
	background: var(--ppa-surface); border-top: 1px solid var(--ppa-border);
	font-size: .8rem;
}
.ppa-disclosure-bar .ppa-container { padding-top: .35rem; padding-bottom: .35rem; }

/* ----- Pills / chips ----- */
.ppa-pill {
	display: inline-flex; align-items: center; gap: .35rem;
	background: var(--ppa-surface); color: var(--ppa-muted);
	border: 1px solid var(--ppa-border); border-radius: 999px;
	padding: .25rem .65rem; font-size: .78rem;
}
.ppa-pill--disclosure { background: #FFF9EC; color: #8a6b1c; border-color: #f3e1b0; }
.ppa-pill--safety     { background: #EFF6FF; color: #1a3a72; border-color: #cbe0ff; }
.ppa-eyebrow {
	display: inline-block; text-transform: uppercase; letter-spacing: .08em;
	font-size: .75rem; font-weight: 700; color: var(--ppa-water-teal);
	margin-bottom: .5rem;
}
.ppa-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ppa-chip {
	background: var(--ppa-surface); color: var(--ppa-muted);
	border: 1px solid var(--ppa-border); border-radius: 999px;
	padding: .15rem .55rem; font-size: .75rem;
	font-family: var(--ppa-font-mono);
}

/* ----- Buttons ----- */
.ppa-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .35rem; padding: .65rem 1.05rem;
	border-radius: 999px; font-weight: 600; font-size: .95rem;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ppa-btn--primary { background: var(--ppa-pond-blue); color: var(--ppa-white); }
.ppa-btn--primary:hover { background: var(--ppa-water-teal); }
.ppa-btn--ghost { background: transparent; border-color: var(--ppa-border); color: var(--ppa-pond-blue); }
.ppa-btn--ghost:hover { background: var(--ppa-surface); }
.ppa-btn--amazon { background: linear-gradient(135deg, #F2A41F, #E29722); color: #1a1300; border: 0; }
.ppa-btn--amazon:hover { transform: translateY(-1px); }
.ppa-btn--lg  { padding: .9rem 1.4rem; font-size: 1rem; }
.ppa-btn--sm  { padding: .35rem .75rem; font-size: .8rem; }
.ppa-btn--block { width: 100%; }

/* ----- Section frame ----- */
.ppa-section { padding: clamp(2.25rem, 5vw, 4.5rem) 0; }
.ppa-section + .ppa-section { border-top: 1px solid var(--ppa-border); }
.ppa-section__head { max-width: 760px; margin-bottom: 1.5rem; }
.ppa-section__title { margin: 0 0 .4em; }
.ppa-section__sub  { color: var(--ppa-muted); margin: 0; }

.ppa-link {
	color: var(--ppa-water-teal); font-weight: 600;
	text-decoration: none; border-bottom: 1px dashed transparent;
}
.ppa-link:hover { border-bottom-color: currentColor; }

/* ----- Grids ----- */
.ppa-grid { display: grid; gap: var(--ppa-gap); }
.ppa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.ppa-grid--3, .ppa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.ppa-grid--2, .ppa-grid--3, .ppa-grid--4 { grid-template-columns: 1fr; }
}

.ppa-card-grid { display: grid; gap: var(--ppa-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppa-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ppa-card-grid, .ppa-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ppa-card-grid, .ppa-card-grid--3 { grid-template-columns: 1fr; } }

.ppa-card {
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius); padding: 1.25rem;
	box-shadow: var(--ppa-shadow); transition: transform .15s ease, box-shadow .15s ease;
	text-decoration: none; color: inherit;
	display: flex; flex-direction: column; gap: .35rem;
}
.ppa-card:hover { transform: translateY(-2px); box-shadow: var(--ppa-shadow-lg); }
.ppa-card__title { margin: 0 0 .25em; }
.ppa-card__excerpt { color: var(--ppa-muted); margin: 0; }
.ppa-card__media img { border-radius: var(--ppa-radius); }

/* ----- Sticky CTA + Compare drawer ----- */
.ppa-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: none; gap: .5rem; padding: .65rem .75rem;
	background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
	border-top: 1px solid var(--ppa-border);
}
.ppa-sticky-cta .ppa-btn { flex: 1; }
@media (max-width: 720px) { .ppa-sticky-cta { display: flex; } body.ppa-front { padding-bottom: 5rem; } }

.ppa-compare-drawer {
	position: fixed; right: 0; bottom: 0;
	width: min(420px, 95vw); max-height: 80vh; overflow: auto;
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius) var(--ppa-radius) 0 0;
	box-shadow: var(--ppa-shadow-lg); padding: 1rem; z-index: 60;
	transform: translateY(110%); transition: transform .25s ease;
}
.ppa-compare-drawer.is-open { transform: translateY(0); }
.ppa-compare-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }

/* ----- Footer ----- */
.ppa-site-footer {
	background: linear-gradient(180deg, #102e44, #0b1b26);
	color: #c8d7e0; padding: 3rem 0 1.5rem; margin-top: 4rem;
}
.ppa-site-footer h4 { color: #fff; font-family: var(--ppa-font-sans); font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.ppa-site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.ppa-site-footer a { color: #c8d7e0; text-decoration: none; }
.ppa-site-footer a:hover { color: #fff; }
.ppa-site-footer__grid {
	display: grid; gap: 2rem;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .ppa-site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ppa-site-footer__grid { grid-template-columns: 1fr; } }
.ppa-site-footer__tagline { color: #97aab8; }
.ppa-site-footer__legal { margin-top: 2rem; border-top: 1px solid #2b4456; padding-top: 1.25rem; font-size: .8rem; color: #8a9faf; }
.ppa-site-footer__legal .ppa-disclosure-line { color: #cfd8df; }
.ppa-fine { font-size: .78rem; color: #8a9faf; }

/* ----- Disclaimer aside ----- */
.ppa-disclaimer {
	border-radius: var(--ppa-radius); padding: .85rem 1rem;
	background: #FFF8E8; border: 1px solid #f3dc9c; color: #4a3a14;
	margin: 1rem 0;
}
.ppa-disclaimer--electrical { background: #EAF4FF; border-color: #c0dcff; color: #11365a; }
.ppa-disclaimer--fish { background: #ECF8F1; border-color: #bfe6cd; color: #1b4a2f; }

.ppa-quick-answer {
	background: var(--ppa-surface); border: 1px solid var(--ppa-border);
	border-left: 4px solid var(--ppa-water-teal);
	padding: 1rem 1.2rem; border-radius: var(--ppa-radius);
	margin: 1rem 0;
}

/* ----- Generic article ----- */
.ppa-article { padding: 2rem 0 3rem; }
.ppa-article__head { margin-bottom: 1.5rem; }
.ppa-article__title { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: .35em; }
.ppa-article__meta { color: var(--ppa-muted); font-size: .9rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.ppa-article__body img { border-radius: var(--ppa-radius); margin: 1.25em 0; }

.ppa-archive { padding: 2rem 0 3rem; }
.ppa-archive__head { margin-bottom: 1.5rem; }
.ppa-archive__intro { color: var(--ppa-muted); }

/* ----- Search form ----- */
.ppa-search {
	display: grid; grid-template-columns: 1fr auto; gap: .5rem;
	max-width: 540px;
}
.ppa-search input {
	padding: .65rem 1rem; border-radius: 999px;
	border: 1px solid var(--ppa-border);
}

/* ----- Icons ----- */
.ppa-icon { display: inline-block; vertical-align: -4px; color: currentColor; }

/* ----- 404 ----- */
.ppa-404 { padding: 2.5rem 0 4rem; }
.ppa-404__head { max-width: 700px; margin-bottom: 1.5rem; }
.ppa-404__product { margin-bottom: 2rem; }
.ppa-404__search { margin: 2rem 0 2rem; }
.ppa-404__tools .ppa-card span { display: block; color: var(--ppa-muted); }
.ppa-404__tools .ppa-card strong { display: block; color: var(--ppa-pond-blue); margin-bottom: .15rem; }

/* ----- Honor reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ----- Mobile nav ----- */
@media (max-width: 960px) {
	.ppa-site-header__row { grid-template-columns: auto 1fr auto; gap: .5rem; padding: .55rem .9rem; }
	.ppa-menu-toggle { display: inline-flex; justify-self: end; align-items: center; }
	.ppa-cta-mini { display: none; }
	.ppa-site-nav {
		grid-column: 1 / -1; display: none;
		border-top: 1px solid var(--ppa-border); padding-top: .5rem; margin-top: .5rem;
	}
	.ppa-site-nav.is-open { display: block; }
	.ppa-menu { flex-direction: column; align-items: stretch; gap: .25rem; padding-bottom: .5rem; }
	.ppa-menu a { padding: .75rem .25rem; border-bottom: 1px solid var(--ppa-border); border-radius: 0; }
}

@media (max-width: 480px) {
	:root { --ppa-gap: .85rem; }
	.ppa-section { padding: 2rem 0; }
	.ppa-container { padding: 0 1rem; }
	.ppa-brand { font-size: 1rem; }
	.ppa-brand span { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
	.ppa-disclosure-bar { font-size: .72rem; }
	.ppa-btn--lg { padding: .75rem 1.1rem; font-size: .95rem; }
	.ppa-sticky-cta .ppa-btn { font-size: .85rem; padding: .55rem .75rem; }
	.ppa-compare-drawer { width: 100vw; border-radius: 0; }
}