/* Peptide Care Finder -- shared stylesheet.
   Calm civic health-directory feel. Mobile-first. Light + dark tokens. */

:root {
  --bg: #F6F7F4;
  --surface: #FFFFFF;
  --ink: #14233A;
  --muted: #4B5A6B;
  --rule: #DDE3E0;
  --accent: #1D6F55;
  --accent-soft: #E3F1EB;
  --notice-bg: #FBF1E3;
  --notice-ink: #8A4B08;
  --pin: #D9573F;

  --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Source Serif 4", Georgia, Cambria, "Times New Roman", Times, serif;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 35, 58, 0.06), 0 1px 1px rgba(20, 35, 58, 0.04);
  --gutter: 16px;
  --max-width: 1040px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1A17;
    --surface: #16241F;
    --ink: #E6EEEA;
    --muted: #9DB0A8;
    --rule: #26362F;
    --accent: #5CC49C;
    --accent-soft: #1E332B;
    --notice-bg: #2A2013;
    --notice-ink: #E8B978;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
  color: var(--accent);
}

a:not(.btn) {
  text-underline-offset: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

img, svg {
  max-width: 100%;
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

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

/* Header */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--accent); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 6px 2px;
}
.site-nav a:hover {
  color: var(--accent);
}

/* Hero + finder */
.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: 40px 0 32px;
}
.hero h1 {
  max-width: 40ch;
}
.hero-sub {
  color: var(--muted);
  max-width: 55ch;
  font-size: 1.05rem;
}

.finder-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 24px;
  max-width: 480px;
}
.finder-field {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finder-field label {
  font-weight: 600;
  font-size: 0.95rem;
}
.zip-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.zip-input-wrap .pin-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
}
input.zip-input {
  width: 100%;
  height: 56px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 16px 0 42px;
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}
input.zip-input:focus {
  border-color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
/* The ZIP field has a label above it; the submit button does not. Giving
   both an equal, explicit height keeps them on the same baseline in the
   finder row on desktop, instead of the button looking short next to the
   taller ZIP input. */
.finder-form .btn-primary {
  height: 56px;
  padding: 0 24px;
}
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
}
.btn-primary:hover {
  filter: brightness(0.92);
}
.btn-secondary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-secondary:hover {
  background: var(--accent-soft);
}

.field-error {
  color: var(--notice-ink);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* Results */
.results {
  padding: 8px 0 8px;
}
.results:empty {
  display: none;
}
.state-line {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

.notice {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0 20px;
  background: var(--notice-bg);
  color: var(--notice-ink);
  border: 1px solid var(--notice-ink);
}
.notice p {
  margin: 0 0 8px;
}
.notice p:last-child { margin-bottom: 0; }
.notice a {
  color: var(--notice-ink);
  font-weight: 600;
}

.notice-soft {
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 12px 0 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
  color: var(--muted);
}
.notice-soft a { color: var(--accent); }

.error-box {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0 20px;
  background: var(--bg);
  border: 1px dashed var(--rule);
  color: var(--ink);
}

.options-section {
  margin: 28px 0;
}
.section-heading {
  margin-bottom: 12px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card-title { margin-bottom: 6px; }
.card-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.card-note {
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.card-action {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
}
.card-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 6px 0 0;
}

.paid-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 10px;
}

.empty-note {
  color: var(--muted);
  font-style: italic;
}

/* How it works + three ways strip */
.how-it-works {
  padding: 40px 0;
}
.steps-grid,
.ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.step-card, .way-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 8px;
}

.buddy-line {
  color: var(--muted);
  margin-top: 8px;
}

/* Generic content sections */
.section {
  padding: 32px 0;
}
.section + .section {
  border-top: 1px solid var(--rule);
}
.lede {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 65ch;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
}
th, td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  vertical-align: top;
}
thead th {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
}
tbody tr:last-child td {
  border-bottom: none;
}
.muted-cell {
  color: var(--muted);
}

.fee-notes {
  margin-top: 18px;
}
.fee-notes li {
  color: var(--muted);
  margin-bottom: 4px;
}
.checked-note {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 14px;
}

/* Rules section (online-peptide-doctors) */
.rules-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  list-style: none;
}
.rules-list li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* Forms (for-providers) */
.provider-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 720px;
  margin-top: 24px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field.full {
  grid-column: 1 / -1;
}
.form-field label {
  font-weight: 600;
  font-size: 0.95rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field textarea {
  padding: 11px 12px;
  border: 2px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-field textarea {
  min-height: 100px;
  resize: vertical;
}
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.form-status.success {
  background: var(--accent-soft);
  color: var(--accent);
}
.form-status.error {
  background: var(--notice-bg);
  color: var(--notice-ink);
}
.form-status[hidden] {
  display: none;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 28px 0;
  margin-top: 40px;
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 18px;
}
.footer-group h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-nav a:hover {
  color: var(--accent);
}
.footer-disclaimer {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 4px 0;
}

/* FAQ sections */
.faq-section {
  margin: 28px 0;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.faq-item h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.faq-item p:last-child {
  margin-bottom: 0;
}

/* Compact ZIP box on content pages */
.zip-box-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
}
.zip-box-wrap h2 {
  margin-bottom: 12px;
}
.zip-box {
  max-width: 420px;
  margin-top: 0;
}

/* Related-page link lists */
.related-links {
  margin: 28px 0;
}
.related-links ul {
  margin: 0;
  padding-left: 1.2em;
}
.related-links li {
  margin-bottom: 6px;
}

.checked-inline {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Numbered step list (reuses .step-card look on content pages) */
.steps-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  gap: 12px;
}
.steps-list li {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 18px;
}

/* Small screens */
@media (max-width: 480px) {
  /* .finder-field's flex-basis (220px) is a horizontal sizing hint for the
     desktop row layout. Once the form stacks into a column, that basis
     applies to height instead and leaves a large empty gap -- reset it so
     the field only takes the height its content needs. */
  .finder-form { flex-direction: column; align-items: stretch; }
  .finder-field { flex: 0 0 auto; }
  .header-inner { flex-direction: column; align-items: flex-start; }
}