/*
Theme Name: Every Pump
Theme URI: https://everypump.com
Author: Every Pump
Description: A simple, fast, readable theme built for one job: a homeowner mid-repair, standing in a basement with a phone, needs the answer on the page in front of them. One brand blue, one amber accent, one typeface (Public Sans), a type scale that actually carries hierarchy, and no clutter borrowed from a page builder. Built to replace a stock Astra install per the theme/README.md audit — every item it logged (clashing accent colors, sub-AA body contrast, a flat 32px/28px heading scale, a duplicated byline, unstyled tables and diagrams, a doubled category badge, missing footer trust links, "Powered by Astra" in the footer) is fixed directly in this theme, not patched with CSS on top of someone else's.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: everypump
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Brand palette — see assets/brand/Logo & Brand Identity for the rationale.
     One blue, one amber accent, checked against white at 7:1+. */
  --ep-ink: #17222F;
  --ep-ink-soft: #3C4A5C;
  --ep-ink-faint: #6B7684;
  --ep-blue: #1E5A8A;
  --ep-blue-deep: #143E5F;
  --ep-amber: #A8531A;
  --ep-amber-deep: #7E3E13;
  --ep-paper: #FFFFFF;
  --ep-paper-warm: #F7F6F3;
  --ep-line: #E3E1DB;
  --ep-line-soft: #EDEBE5;
  --ep-good: #2F6F4E;
  --ep-warn: #8A5A12;

  /* Type scale — 48 / 28 / 20 / 17 / 13. The old theme ran H1 32px against
     in-content H2 ~28px: two sizes that close read as no hierarchy at all. */
  --ep-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ep-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ep-h1: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --ep-h2: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --ep-h3: 1.25rem;
  --ep-body: 1.0625rem;
  --ep-small: 0.875rem;
  --ep-caption: 0.8125rem;

  --ep-measure: 42rem;       /* body copy line length */
  --ep-wide: 72rem;          /* page/container width */
  --ep-radius: 10px;
  --ep-radius-sm: 6px;
  --ep-space: 1rem;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--ep-font);
  font-size: var(--ep-body);
  line-height: 1.65;
  color: var(--ep-ink);
  background: var(--ep-paper);
  -webkit-font-smoothing: antialiased;
}

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

/* Form controls don't inherit the page font or sizing by default in every
   browser (a bare <button> especially) — that mismatch between the search
   input and its button is exactly what broke the search bar's alignment
   on mobile. */
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-appearance: none; appearance: none; }

a { color: var(--ep-blue); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--ep-blue-deep); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--ep-blue); outline-offset: 2px; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; color: var(--ep-ink); margin: 0 0 0.5em; }
h1 { font-size: var(--ep-h1); }
h2 { font-size: var(--ep-h2); margin-top: 2.25em; }
h3 { font-size: var(--ep-h3); margin-top: 1.75em; }
p { margin: 0 0 1.25em; }

.ep-container { max-width: var(--ep-wide); margin-inline: auto; padding-inline: 1.25rem; }
.ep-measure { max-width: var(--ep-measure); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ep-ink); color: #fff; padding: 12px 18px; z-index: 1000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   3. Header & logo
   ========================================================================== */

.ep-header { border-bottom: 1px solid var(--ep-line); background: var(--ep-paper); position: sticky; top: 0; z-index: 40; }
.ep-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.85rem; }

.ep-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ep-logo svg { flex: none; }
.ep-logo-text { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ep-ink); }
.ep-logo-text span { color: var(--ep-amber); }
.ep-logo:hover .ep-logo-text { color: var(--ep-ink); }

.ep-nav { display: flex; align-items: center; gap: 1.75rem; }
.ep-nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.ep-nav a { color: var(--ep-ink-soft); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.ep-nav a:hover { color: var(--ep-blue); }
.ep-nav .current-menu-item > a, .ep-nav .current_page_item > a { color: var(--ep-blue); }

.ep-menu-toggle { display: none; background: none; border: 1px solid var(--ep-line); border-radius: 8px; padding: 8px 10px; cursor: pointer; }

@media (max-width: 760px) {
  .ep-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ep-paper); border-bottom: 1px solid var(--ep-line); padding: 1rem 1.25rem 1.5rem; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ep-nav.is-open { display: flex; }
  .ep-nav ul { flex-direction: column; gap: 0.9rem; width: 100%; }
  .ep-menu-toggle { display: block; }
}

/* ==========================================================================
   4. Breadcrumbs, article header, meta
   ========================================================================== */

.ep-breadcrumbs { font-size: var(--ep-caption); color: var(--ep-ink-faint); margin-bottom: 1.25rem; }
.ep-breadcrumbs a { color: var(--ep-ink-faint); text-decoration: none; }
.ep-breadcrumbs a:hover { color: var(--ep-blue); }
.ep-breadcrumbs .sep { margin: 0 0.4em; }

.ep-silo-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ep-blue); background: #EAF1F7; border-radius: 999px; padding: 4px 12px; text-decoration: none; }
.ep-silo-badge:hover { color: var(--ep-blue-deep); }

.ep-article-header { padding-block: 2rem 1rem; }
.ep-article-title { margin-top: 0.75rem; }
.ep-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font-size: var(--ep-small); color: var(--ep-ink-faint); margin-top: 0.9rem; }
.ep-article-meta .dot::before { content: "·"; margin-right: 0.9rem; color: var(--ep-line); }

/* ==========================================================================
   5. Article body — content silos through here via the_content()
   ========================================================================== */

.ep-article-body { font-size: var(--ep-body); color: var(--ep-ink); }
.ep-article-body > * + * { margin-top: 0; }

.ep-article-body h2.wp-block-heading { border-top: 1px solid var(--ep-line); padding-top: 1.5em; }
.ep-article-body > :first-child h2.wp-block-heading,
.ep-article-body h2.wp-block-heading:first-child { border-top: none; padding-top: 0; }

.ep-article-body ul.wp-block-list,
.ep-article-body ol.wp-block-list { padding-left: 1.4em; margin: 0 0 1.25em; }
.ep-article-body li { margin-bottom: 0.4em; }

.ep-article-body strong { color: var(--ep-ink); }

.ep-article-body blockquote.wp-block-quote {
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-left: 3px solid var(--ep-amber);
  background: var(--ep-paper-warm);
  border-radius: 0 var(--ep-radius-sm) var(--ep-radius-sm) 0;
  font-size: 1rem;
  color: var(--ep-ink-soft);
}
.ep-article-body blockquote.wp-block-quote p:last-child { margin-bottom: 0; }

/* Tables — the old theme left these as unbordered text runs that pushed
   mobile pages sideways. */
.ep-article-body .wp-block-table {
  margin: 1.75em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ep-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.ep-article-body table th,
.ep-article-body table td {
  border: 1px solid var(--ep-line);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.ep-article-body table th {
  background: var(--ep-paper-warm);
  font-weight: 700;
  color: var(--ep-ink);
}
.ep-article-body table tbody tr:nth-child(even) td { background: #FBFAF8; }

/* Images & hand-built SVG diagrams — framed consistently, never pushing width */
.ep-article-body .wp-block-image,
.ep-article-body figure { margin: 1.75em 0; }
.ep-article-body .wp-block-image img,
.ep-article-body figure img,
.ep-article-body figure svg {
  border-radius: var(--ep-radius);
  border: 1px solid var(--ep-line);
  background: #fff;
}
.ep-article-body .wp-block-image figcaption,
.ep-article-body figcaption {
  font-size: var(--ep-caption);
  color: var(--ep-ink-faint);
  margin-top: 0.6em;
  text-align: center;
}

.ep-article-body hr.wp-block-separator { border: none; border-top: 1px solid var(--ep-line); margin: 2.5em 0; }

.ep-article-body a { word-break: break-word; }
.ep-article-body a[href*="amazon."]::after,
.ep-article-body a[data-asin]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.85em;
  color: var(--ep-ink-faint);
}

/* "When this needs a pro" callout — matched by a heading starting with that
   phrase; styled via .ep-pro-note which PHP adds server-side (see
   inc/content-filters.php) rather than relying on a Gutenberg block that
   doesn't exist in the drafts. */
.ep-pro-note {
  margin: 1.75em 0;
  padding: 1.1em 1.3em;
  border: 1px solid #E8D2B8;
  background: #FBF4EA;
  border-radius: var(--ep-radius);
}
.ep-pro-note h2, .ep-pro-note h3 { margin-top: 0; color: var(--ep-amber-deep); }

/* FAQ — CLAUDE.md §5.7: ## FAQ (h2), ### Question (h3), plain paragraph
   answer. No accordion JS, just clear vertical rhythm and a divider per Q. */
.ep-faq h2.wp-block-heading { border-top: 1px solid var(--ep-line); padding-top: 1.5em; }
.ep-faq h3.wp-block-heading {
  font-size: 1.05rem;
  margin-top: 1.6em;
  padding-top: 1.6em;
  border-top: 1px dashed var(--ep-line);
}
.ep-faq h3.wp-block-heading:first-of-type { border-top: none; padding-top: 0; }

/* ==========================================================================
   6. Table of contents (auto-built from H2s, see inc/template-functions.php)
   ========================================================================== */

.ep-toc { border: 1px solid var(--ep-line); border-radius: var(--ep-radius); background: var(--ep-paper-warm); padding: 1.1rem 1.3rem; margin: 1.5rem 0 2rem; }
.ep-toc summary {
  font-weight: 700; font-size: 0.95rem; cursor: pointer; color: var(--ep-ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.ep-toc summary::-webkit-details-marker { display: none; }
.ep-toc summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-left: 0.75em;
  border-right: 2px solid var(--ep-ink-faint); border-bottom: 2px solid var(--ep-ink-faint);
  transform: rotate(45deg); transition: transform .15s ease;
}
.ep-toc[open] summary::after { transform: rotate(-135deg); }
.ep-toc ol { margin: 0.9rem 0 0; padding-left: 1.2em; }
.ep-toc li { margin-bottom: 0.4em; font-size: 0.92rem; }
.ep-toc a { text-decoration: none; }
.ep-toc a:hover { text-decoration: underline; }

/* Lead paragraph — the article's first <p> (the TOC box sits before it as
   a sibling, so :first-of-type still finds the right one), given a touch
   more size/air so the page doesn't read as one unbroken block of 17px
   text from the headline straight through. */
.ep-article-body > p:first-of-type {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ep-ink-soft);
}

/* ==========================================================================
   7. Cards (archive / home grids)
   ========================================================================== */

.ep-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.ep-card { border: 1px solid var(--ep-line); border-radius: var(--ep-radius); overflow: hidden; display: flex; flex-direction: column; background: var(--ep-paper); transition: border-color .15s ease; }
.ep-card:hover { border-color: var(--ep-blue); }
/* object-fit: contain, not cover — most images on this site are hand-built
   SVG diagrams with text labels (CLAUDE.md §6.3), and cropping a diagram
   to fill a 16:9 box cuts labels and arrows off rather than just trimming
   background the way it would on an ordinary photo. Padding + the warm
   background keep a non-16:9 diagram or photo from looking like it's
   floating in a blank gap. */
.ep-card-thumb { aspect-ratio: 16/9; background: var(--ep-paper-warm); overflow: hidden; padding: 10px; }
.ep-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ep-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.ep-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0; }
.ep-card-title a { color: var(--ep-ink); text-decoration: none; }
.ep-card-title a:hover { color: var(--ep-blue); }
.ep-card-excerpt { font-size: 0.9rem; color: var(--ep-ink-soft); margin: 0; flex: 1; }
.ep-card-meta { font-size: var(--ep-caption); color: var(--ep-ink-faint); display: flex; align-items: center; gap: 0.5rem; }

/* ==========================================================================
   8. Silo pillar strip (front page)
   ========================================================================== */

/* 190px, not 150 — each tile now carries a description line (front-page.php
   added real copy per tile), and 150px was narrow enough to wrap that line
   awkwardly and still allow a cramped 2-up layout on a ~375px phone. */
.ep-silo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; }
.ep-silo-tile { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.1rem; border: 1px solid var(--ep-line); border-radius: var(--ep-radius); text-decoration: none; background: var(--ep-paper-warm); }
.ep-silo-tile:hover { border-color: var(--ep-blue); background: #EAF1F7; }
.ep-silo-tile-name { font-weight: 700; color: var(--ep-ink); font-size: 0.98rem; }
.ep-silo-tile-sub { font-size: 0.8rem; color: var(--ep-ink-faint); }

.ep-hero { padding-block: 3.5rem 3rem; border-bottom: 1px solid var(--ep-line); background: var(--ep-paper-warm); }
.ep-hero h1 { margin-bottom: 0.5rem; }
.ep-hero p { font-size: 1.05rem; color: var(--ep-ink-soft); max-width: 40rem; margin-bottom: 0; }

/* ==========================================================================
   13. Landing-page sections (front-page.php)
   ========================================================================== */

.ep-section { padding-block: 3.5rem; }
.ep-section-warm { background: var(--ep-paper-warm); border-top: 1px solid var(--ep-line); border-bottom: 1px solid var(--ep-line); }
.ep-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ep-blue); margin-bottom: 0.6rem; }
.ep-section-head { max-width: 38rem; margin-bottom: 2rem; }
.ep-section-head h2 { margin-top: 0; margin-bottom: 0.5rem; }
.ep-section-head p { color: var(--ep-ink-soft); margin-bottom: 0; font-size: 1rem; }
.ep-section-foot { margin-top: 1.75rem; }

.ep-pump-picker { margin-top: 2rem; }
.ep-silo-tile { position: relative; padding: 1.3rem 1.2rem 1.2rem; }
.ep-silo-tile-icon { width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--ep-line); display: flex; align-items: center; justify-content: center; margin-bottom: 0.7rem; }
.ep-silo-tile:hover .ep-silo-tile-icon { border-color: var(--ep-blue); }

.ep-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.75rem; }
.ep-feature { display: flex; flex-direction: column; gap: 0.6rem; }
.ep-feature-icon { width: 42px; height: 42px; border-radius: 10px; background: #EAF1F7; display: flex; align-items: center; justify-content: center; flex: none; }
.ep-feature h3 { margin: 0; font-size: 1.05rem; }
.ep-feature p { margin: 0; font-size: 0.92rem; color: var(--ep-ink-soft); line-height: 1.55; }

@media (max-width: 600px) {
  .ep-section { padding-block: 2.5rem; }
}

/* ==========================================================================
   9. Buttons
   ========================================================================== */

.ep-btn { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 0.95rem; padding: 0.7em 1.3em; border-radius: 999px; text-decoration: none; border: 1px solid transparent; }
.ep-btn-amber { background: var(--ep-amber); color: #fff; }
.ep-btn-amber:hover { background: var(--ep-amber-deep); color: #fff; }
.ep-btn-outline { border-color: var(--ep-line); color: var(--ep-ink); }
.ep-btn-outline:hover { border-color: var(--ep-blue); color: var(--ep-blue); }

/* ==========================================================================
   10. Pagination, search
   ========================================================================== */

.ep-pagination { display: flex; gap: 0.5rem; justify-content: center; margin: 2.5rem 0; }
.ep-pagination a, .ep-pagination span { padding: 0.55em 0.95em; border: 1px solid var(--ep-line); border-radius: 8px; text-decoration: none; color: var(--ep-ink-soft); font-size: 0.9rem; }
.ep-pagination .current { background: var(--ep-ink); color: #fff; border-color: var(--ep-ink); }
.ep-pagination a:hover { border-color: var(--ep-blue); color: var(--ep-blue); }

.ep-search-form { display: flex; gap: 0.5rem; }
.ep-search-form input[type="search"],
.ep-search-form button {
  /* Same box model, same line-height, same font size on both — this pair
     is what was drifting out of alignment, worse on mobile Safari, which
     applies its own native chrome to [type=search] unless appearance is
     reset. */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 3rem;
  line-height: 1;
  font-size: 0.95rem;
}
.ep-search-form input[type="search"] { flex: 1; min-width: 0; padding: 0 1.1em; border: 1px solid var(--ep-line); border-radius: 999px; background: var(--ep-paper); }
.ep-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ep-search-form button { flex: none; border: none; background: var(--ep-blue); color: #fff; padding: 0 1.4em; border-radius: 999px; font-weight: 700; cursor: pointer; }
.ep-search-form button:hover { background: var(--ep-blue-deep); }

@media (max-width: 380px) {
  .ep-search-form button { padding-inline: 1em; font-size: 0.88rem; }
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.ep-footer { background: var(--ep-ink); color: #C7D0D9; margin-top: 4rem; }
.ep-footer-top { padding-block: 3rem; display: grid; grid-template-columns: 1.3fr repeat(2, 1fr); gap: 2rem; }
.ep-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem; }
.ep-footer-brand .ep-logo-text { color: #fff; }
.ep-footer-tagline { font-size: 0.9rem; color: #9BA7B3; max-width: 26rem; }
.ep-footer-heading { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #9BA7B3; margin-bottom: 0.9rem; }
.ep-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ep-footer a { color: #C7D0D9; text-decoration: none; font-size: 0.92rem; }
.ep-footer a:hover { color: #fff; }
.ep-footer-bottom { border-top: 1px solid #28384A; padding-block: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; font-size: 0.82rem; color: #8694A2; }
.ep-footer-bottom a { color: #8694A2; }
.ep-footer-bottom a:hover { color: #fff; }

@media (max-width: 820px) {
  .ep-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ep-footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. Responsive type & spacing
   ========================================================================== */

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .ep-article-header { padding-block: 1.4rem 0.75rem; }
  .ep-footer-top { padding-block: 2.25rem; }
}

/* Print: an article should still work printed out and taped to the
   furnace — no header chrome, no nav, no footer noise. */
@media print {
  .ep-header, .ep-footer, .ep-toc, .no-print { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
}