/* ==========================================================================
   Income Outsource — Static Pages
   Generic page hero + About / Contact / Privacy / Write For Us sections.
   Long-form body copy reuses .entry-content typography from single.css —
   not duplicated here. All values from variables.css.
   ========================================================================== */

.page-main {
  display: block;
}

/* ---------------------------------------------------------------------
   Page hero — shared title band across every static page
   --------------------------------------------------------------------- */
.page-hero {
  /* Top padding trimmed a step (space-9 → space-7) — the gap under the
     sticky header read as too much across the site; bottom kept as-is. */
  padding-block: var(--space-7) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

/* A separate nested div from .container on purpose — combining a narrower
   max-width directly on the same element as .container's margin-inline:auto
   caused a second, unwanted centering pass (the box shrinks below 1200px,
   then auto-centers itself inside the space that centering already gave
   it), pushing the hero title inward instead of keeping it flush left with
   the rest of the page content below it. Nesting this as a plain child
   (default margin: 0) leaves it flush at .container's own left edge. */
.page-hero__inner {
  max-width: var(--content-measure);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.page-hero__title {
  margin: 0;
}

.page-hero__subtitle {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

/* Top margin omitted for the same reason as .page-layout above — .page-hero
   already provides the gap above whatever follows it. */
.page-media {
  margin-block: 0 var(--space-8);
}

.page-media img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Top padding intentionally omitted — .page-hero already carries its own
   bottom padding, so stacking a second top padding here doubled the gap
   between the hero and the content that follows it (48px + 48px = 96px,
   nearly double single.css's equivalent 32px header-to-content gap). */
.page-layout {
  padding-block: 0 var(--space-8);
}

.page-body {
  max-width: var(--content-measure);
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-mission {
  padding-block: var(--space-9);
  background: var(--color-bg-alt);
}

.about-mission__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.about-mission__item h2 {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--fs-h5);
}

.about-mission__item p {
  margin: 0;
  color: var(--color-text-muted);
}

.about-mission__index {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  color: var(--color-accent-hover);
}

.about-stats {
  padding-block: var(--space-9);
  text-align: center;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.about-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.about-stats__number {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.about-stats__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.about-founder {
  padding-block: var(--space-9);
  border-top: 1px solid var(--color-border);
}

/* Separate nested div from .container — see .page-hero__inner's comment
   above for why combining a narrower max-width with .container directly
   causes unwanted double-centering. */
.about-founder__inner {
  max-width: var(--content-measure);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.about-founder__avatar img {
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.about-founder__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.about-founder__name {
  margin: var(--space-1) 0;
  font-size: var(--fs-h4);
}

.about-founder__text {
  margin: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  /* .page-layout's own top padding is intentionally 0 (see its comment
     above) so pages whose content starts with plain prose don't get a
     doubled gap under .page-hero's border. The contact form has no such
     built-in top spacing of its own, so it sat flush against that border
     line — added here instead of changing the shared .page-layout, which
     would also shift About/Privacy/Write For Us. */
  margin-top: var(--space-8);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Honeypot — reuses .screen-reader-text's off-screen clip technique
   (base.css), not display:none: a bot reading computed styles to skip
   display:none fields would still find and fill this one, which is the
   point of a honeypot in the first place. */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form__status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.contact-form__status--success {
  color: var(--color-success);
  border-color: var(--color-success);
}

.contact-form__status--error {
  color: var(--color-error);
  border-color: var(--color-error);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__field label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form__field input:hover,
.contact-form__field textarea:hover {
  border-color: var(--color-border-strong);
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.contact-form__submit {
  align-self: flex-start;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  background: var(--color-accent);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  background: var(--color-accent-hover);
}

.contact-form__note {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.contact-info {
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  height: fit-content;
}

.contact-info__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h6);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-info__email {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  word-break: break-word;
}

.contact-info__email:hover {
  /* accent-hover, not accent — see single.css's .entry-content a:hover
     comment; plain --color-accent text falls short of AA 4.5:1 here. */
  color: var(--color-accent-hover);
}

.contact-info__response {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.contact-info__divider {
  height: 1px;
  margin-block: var(--space-6);
  background: var(--color-border);
}

.contact-info__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.contact-info__text a {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ==========================================================================
   Write For Us page
   ========================================================================== */
.wfu-hero__chip {
  margin-bottom: var(--space-2);
}

.wfu-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Currently unused — the trust-stats markup was removed from
   template-write-for-us.php (no real DA/traffic numbers yet for a
   pre-launch site) but this styling is kept for when it's re-added once
   there's real data to show; see the comment in inc/site-content.php. */
.wfu-trust {
  padding-block: var(--space-8);
  background: var(--color-ink);
  text-align: center;
}

.wfu-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.wfu-trust__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.wfu-trust__number {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-on-ink);
}

.wfu-trust__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-on-ink);
  opacity: 0.65;
}

.wfu-trust__note {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-caption);
  font-style: italic;
  color: var(--color-on-ink);
  opacity: 0.6;
}

.wfu-section {
  padding-block: var(--space-9);
}

.wfu-section--alt {
  background: var(--color-bg-alt);
}

/* Anchor targets for the hero's "See rates" / "Pitch a post" links */
#wfu-rates,
#wfu-cta {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.wfu-section__title {
  margin: 0 0 var(--space-2);
}

.wfu-section__lead {
  max-width: 60ch;
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

.wfu-guidelines {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.wfu-guidelines__item {
  padding: var(--space-5);
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.wfu-guidelines__item h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h6);
}

.wfu-guidelines__item p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Rate cards */
.wfu-rates {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.wfu-rate-card {
  position: relative;
  padding: var(--space-6);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.wfu-rate-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.wfu-rate-card--featured {
  border-color: var(--color-accent);
}

.wfu-rate-card__badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm);
}

.wfu-rate-card__tier {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h5);
}

.wfu-rate-card__price {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--color-accent-hover);
}

.wfu-rate-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.wfu-rate-card__list li {
  padding-left: var(--space-5);
  position: relative;
}

.wfu-rate-card__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* Accept / reject comparison */
.wfu-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.wfu-compare__col {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.wfu-compare__col--accept {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
}

.wfu-compare__col--reject {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.wfu-compare__col h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h5);
}

.wfu-compare__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.wfu-compare__col--accept li {
  padding-left: var(--space-5);
  position: relative;
}

.wfu-compare__col--accept li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: var(--fw-bold);
}

.wfu-compare__col--reject li {
  padding-left: var(--space-5);
  position: relative;
}

.wfu-compare__col--reject li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  color: var(--color-error);
  font-weight: var(--fw-bold);
}

/* Process timeline */
.wfu-process {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  counter-reset: wfu-step;
}

.wfu-process__step {
  position: relative;
  padding-left: var(--space-9);
}

.wfu-process__num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  color: var(--color-on-ink);
  background: var(--color-ink);
  border-radius: 50%;
}

.wfu-process__step h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-h6);
}

.wfu-process__step p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* CTA — solid "ledger ink" stamp surface, never flips in dark mode */
.wfu-cta {
  padding-block: var(--space-10);
  background: var(--color-ink);
  text-align: center;
}

.wfu-cta__inner {
  max-width: var(--content-measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.wfu-cta__title {
  margin: 0;
  color: var(--color-on-ink);
}

.wfu-cta__text {
  margin: 0;
  color: var(--color-on-ink);
  opacity: 0.75;
}

.wfu-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  .about-mission__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }

  .wfu-guidelines {
    grid-template-columns: repeat(2, 1fr);
  }

  .wfu-rates {
    grid-template-columns: repeat(3, 1fr);
  }

  .wfu-compare {
    grid-template-columns: repeat(2, 1fr);
  }

  .wfu-trust__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }

  .wfu-process {
    grid-template-columns: repeat(3, 1fr);
  }
}