/* ------------------------------------------------------------------
   zip4lookup — shared theme
   Loaded by the server-rendered SEO pages and imported by the React app,
   so a visitor moving between them never sees a style shift.
   ------------------------------------------------------------------ */

:root {
  --ink:        #0E2F36;
  --ink-soft:   #3B5B60;
  --teal:       #1B7F84;
  --teal-dim:   #7FBFC3;
  --amber:      #F0A02E;
  --amber-dark: #C97F17;
  --paper:      #EDE7DA;
  --page:       #F7F4EE;
  --card:       #FFFFFF;
  --line:       rgba(14, 47, 54, .12);
  --line-soft:  rgba(14, 47, 54, .07);
  --ok:         #1E7A4C;
  --warn:       #B4531A;

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow: 0 1px 2px rgba(14,47,54,.05), 0 8px 24px -12px rgba(14,47,54,.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); font-weight: 400; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-word { font-size: 20px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); }
.brand-word b { color: var(--amber); }
.brand-word span { font-weight: 500; }
.site-head nav { display: flex; gap: 18px; font-size: 14px; font-weight: 600; }
.site-head nav a { color: var(--ink-soft); text-decoration: none; }
.site-head nav a:hover { color: var(--ink); }

/* ---------- layout ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 24px 20px 64px; }
.wrap section { margin: 34px 0; }

h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.15; letter-spacing: -1px; margin: 12px 0 10px; }
h2 { font-size: clamp(19px, 3.4vw, 23px); letter-spacing: -.4px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.lede { font-size: 17px; color: var(--ink-soft); max-width: 62ch; }

/* ---------- breadcrumbs ---------- */
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-size: 12.5px; color: var(--ink-soft);
}
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--teal-dim); }
.crumbs a { text-decoration: none; }

/* ---------- the lookup box: the most important element on the site ---------- */
.tool-card {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow);
}
.lookup-inline label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--teal-dim); margin-bottom: 10px;
}
.lookup-inline .row { display: flex; gap: 8px; flex-wrap: wrap; }
.lookup-inline input {
  flex: 1 1 240px; min-width: 0;
  padding: 14px 16px; font: inherit; font-size: 16px;
  border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
}
.lookup-inline input::placeholder { color: #8A9A98; }
.lookup-inline input:focus { border-color: var(--amber); outline: none; }
.lookup-inline button {
  padding: 14px 24px; font: inherit; font-weight: 700; font-size: 16px;
  border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--amber); color: #2A1A02;
}
.lookup-inline button:hover { background: #FFB245; }
.lookup-inline .hint { margin: 10px 0 0; font-size: 12.5px; color: var(--teal-dim); }

/* ---------- result ---------- */
.result {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow);
}
.zip4-display {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(30px, 8vw, 46px); letter-spacing: 1px;
  color: var(--ink); margin: 4px 0 2px; word-break: break-all;
}
.zip4-display .plus4 { color: var(--amber-dark); }
.copy-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--page); color: var(--ink);
}
.copy-btn:hover { border-color: var(--teal); }

.badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.badge {
  font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; background: var(--paper); color: var(--ink-soft);
}
.badge.ok   { background: #DFF0E6; color: var(--ok); }
.badge.warn { background: #FBE7D6; color: var(--warn); }

/* ---------- tables ---------- */
table.facts { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.facts th, table.facts td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
table.facts thead th {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--teal); border-bottom: 1px solid var(--line);
}
table.facts tbody th { width: 42%; font-weight: 600; color: var(--ink-soft); }

/* ---------- lists and chips ---------- */
ul.plain { padding-left: 18px; color: var(--ink-soft); }
ul.plain li { margin: 5px 0; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0; }
.chips a {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px; text-decoration: none; color: var(--ink);
}
.chips a:hover { border-color: var(--teal); background: #fff; }

.city-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.city-grid a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600;
}
.city-grid a:hover { border-color: var(--teal); }
.city-grid em { font-style: normal; font-size: 12px; color: var(--ink-soft); font-weight: 500; }

/* ---------- details ---------- */
details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 8px;
}
details summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14.5px; }

/* ---------- buttons and CTA ---------- */
.btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--r-md);
  background: var(--amber); color: #2A1A02; font-weight: 700; font-size: 15px;
  text-decoration: none; border: 0; cursor: pointer;
}
.btn:hover { background: #FFB245; color: #2A1A02; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--teal); background: var(--card); }

.cta-band {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-md); padding: 22px;
}
.cta-band h2 { margin-bottom: 6px; }
.cta-band p { color: var(--ink-soft); }

/* ---------- ads ---------- */
/* Ads.
   The reserved min-height is load-bearing: Cumulative Layout Shift is a
   ranking signal and a late-loading ad unit shoving the article down is the
   usual cause. Height comes from the server per placement.

   The margin is also deliberate. Google treats sustained accidental clicks
   as invalid traffic, and the fastest way to generate them is an ad sitting
   against a button. Keep real space around every unit. */
.ad {
  position: relative;
  margin: 32px 0;
  padding-top: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-soft); border-radius: var(--r-md);
  overflow: hidden;
}
.ad::before {
  content: 'Advertisement';
  position: absolute; top: 5px; left: 0; right: 0;
  text-align: center;
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-soft); opacity: .5;
}
.ad ins { position: relative; z-index: 1; width: 100%; }

/* Never let an ad sit directly against an interactive element. */
.tool-card + .ad, .lookup-inline + .ad { margin-top: 40px; }

/* ---------- footer ---------- */
.site-foot {
  background: var(--ink); color: var(--paper);
  padding: 40px 20px 28px; margin-top: 60px;
}
.foot-grid {
  max-width: 860px; margin: 0 auto; display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.foot-grid strong { display: block; margin-bottom: 8px; font-size: 14px; }
.foot-grid a { display: block; color: var(--teal-dim); text-decoration: none; font-size: 14px; padding: 3px 0; }
.foot-grid a:hover { color: #fff; }
.foot-grid p { font-size: 13.5px; color: var(--teal-dim); margin: 0; }
.legal {
  max-width: 860px; margin: 30px auto 0; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color: var(--teal-dim); line-height: 1.6;
}

/* ---------- forms elsewhere ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--ink);
}
.field input:focus { border-color: var(--teal); outline: none; }

.notice {
  padding: 12px 15px; border-radius: var(--r-md); font-size: 14px;
  background: #FBE7D6; color: var(--warn); border: 1px solid #F0C79E;
}
.notice.good { background: #DFF0E6; color: var(--ok); border-color: #B6DCC4; }

pre.code {
  background: var(--ink); color: var(--paper);
  padding: 16px; border-radius: var(--r-md);
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  overflow-x: auto;
}
pre.code .k { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 540px) {
  .site-head { padding: 12px 16px; }
  .site-head { flex-wrap: wrap; row-gap: 8px; }
  /* the menu goes under the logo and wraps, instead of pushing the page wider than the phone */
  .site-head nav { gap: 6px 14px; font-size: 13px; flex-wrap: wrap; width: 100%; }
  .wrap { padding: 18px 16px 48px; }
  table.facts tbody th { width: 46%; }
}

/* ------------------------------------------------------------------
   Guides — long-form article typography.
   Slightly narrower measure and looser leading than the data pages,
   because these are read rather than scanned.
   ------------------------------------------------------------------ */
.article p { max-width: 66ch; line-height: 1.72; }
.article h2 {
  margin-top: 42px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.article h3 { margin-top: 26px; font-size: 17px; color: var(--ink); }
.article ol { max-width: 66ch; padding-left: 20px; line-height: 1.72; }
.article ol li { margin: 9px 0; }
.article ul.plain li { margin: 9px 0; line-height: 1.66; }
.article .byline {
  font-size: 12.5px; letter-spacing: .3px;
  margin: 0 0 6px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.article pre.code { max-width: 66ch; }
.article .notice { max-width: 66ch; }
.article .tool-card, .article table.facts { margin-top: 18px; }

.guide-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.guide-row h2 {
  margin: 0 0 4px; font-size: 19px;
  border: 0; padding: 0;
}
.guide-row h2 a { text-decoration: none; }
.guide-row p { margin: 2px 0; }

/* Copyright sits ahead of the trademark notice but reads quieter — the
   trademark disclaimer is the part a reader needs, the copyright is the
   part the lawyers need. */
.legal .copyright {
  display: block;
  margin-bottom: 6px;
  color: rgba(237, 231, 218, .82);
  font-weight: 500;
}

/* Radius switcher on the nearby pages. Reads as a control, not a nav bar. */
.radius-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 18px 0; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: 14px;
}
.radius-switch a { text-decoration: none; padding: 3px 8px; border-radius: var(--r-sm); }
.radius-switch a:hover { background: var(--paper); }
.radius-switch strong {
  padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
}

/* EDDM planner controls. A dense control cluster rather than a long form —
   mailers iterate on these settings a dozen times in a sitting, so
   everything stays visible at once. */
.eddm-controls {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.eddm-controls .field { margin: 0; }
.eddm-controls label { color: var(--teal-dim); font-size: 12px; }
.eddm-controls input, .eddm-controls select {
  background: var(--paper); border: 1px solid transparent; padding: 8px 10px; font-size: 14px;
}
.eddm-controls input:focus, .eddm-controls select:focus { border-color: var(--amber); }
.eddm-controls input[type=range] { padding: 0; background: transparent; accent-color: var(--amber); }
.eddm-controls .check {
  display: flex; align-items: center; gap: 8px;
  color: var(--paper); font-size: 13px; font-weight: 500;
  grid-column: 1 / -1;
}
.eddm-controls .check input { width: auto; accent-color: var(--amber); }

/* Legal documents. Numbered sections, tighter measure, and a visible
   hierarchy — people scan these for one clause rather than reading them
   through, so the headings have to carry the navigation. */
.legal-doc h2 {
  font-size: 18px;
  margin-top: 38px;
}
.legal-doc h3 {
  margin-top: 22px;
  color: var(--teal);
  font-size: 15px;
}
.legal-doc p, .legal-doc ul.plain, .legal-doc ol { max-width: 68ch; }
.legal-doc .notice { margin: 18px 0; }
.legal-doc table.facts { font-size: 14px; }
.legal-doc .byline { margin-bottom: 18px; }

/* Intelligent Mail barcode. White plate regardless of theme — a barcode on
   a tinted background is one a scanner may not read, and someone will
   inevitably screenshot this. The IMb is wide (about 3 inches at true size),
   so it scrolls horizontally on a phone rather than shrinking below spec. */
.dpbc {
  margin: 18px 0 0;
  padding: 16px 14px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  overflow-x: auto;
}
.dpbc img {
  display: block;
  margin: 0 auto;
  height: 30px;
  width: auto;
  max-width: none;
  image-rendering: crisp-edges;
}

/* The state where we have the routing half but not the mailer's identity.
   Showing the digits we do have beats showing a barcode we shouldn't. */
.dpbc-empty {
  margin: 18px 0 0;
  padding: 16px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.dpbc-empty .routing {
  font-size: 22px; font-weight: 600; letter-spacing: 2px;
  margin: 0 0 2px; color: var(--ink);
}
.dpbc-empty .muted { font-size: 12px; margin: 0 0 10px; }
.dpbc-empty .small { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.dpbc figcaption {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Notification preference rows. Generous hit area — these get toggled on a
   phone, and a bare checkbox is a small target. */
.check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.check-row:hover { border-color: var(--teal); }
.check-row input { margin-top: 3px; accent-color: var(--amber); flex: 0 0 auto; }