/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT & CONTACT REDESIGN — Phase 5 (final phase)
   "Modern Showcase" restyle of the support and contact pages: photographic
   hero bands, trust chips, editorial cost ledger, token-aligned forms.

   Two scopes, one file:
     body.support-modern-page  → support.php
     body.contact-modern-page  → contact.php
   Loaded after each page's existing CSS (support.php inline heredoc /
   contact.css), so the body-class scope overrides where needed. Additive:
   all markup, pay-button URLs, tab logic, and form submission stay untouched.
   Tokens (--fd-*) come from foundation.css (global chrome bundle, Phase 1).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── shared: font + backdrop on both pages ────────────────────────────────── */
body.support-modern-page,
body.contact-modern-page {
  font-family: var(--fd-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.support-modern-page::before,
body.contact-modern-page::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb, var(--fd-accent) 10%, transparent), transparent 60%),
    radial-gradient(900px 700px at 8% 4%, rgba(90,120,200,.09), transparent 62%),
    var(--fd-bg-deep);
}
body.support-modern-page ::selection,
body.contact-modern-page ::selection { background: var(--fd-accent); color: var(--fd-accent-ink); }

/* shared hero headline / kicker treatment */
body.support-modern-page .sup-hero__kicker,
body.contact-modern-page .contact-hero__title {
  font-family: var(--fd-mono);
}

/* ═══ SUPPORT ═════════════════════════════════════════════════════════════════ */

/* hero as a photographic band */
body.support-modern-page .sup-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--fd-r-lg);
  isolation: isolate;
}
body.support-modern-page .sup-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: url('/img/backgrounds/lore-archives-scarlet-tome.png');
  background-size: cover; background-position: center;
}
body.support-modern-page .sup-hero__vig {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,9,13,.93) 0%, rgba(8,9,13,.72) 46%, rgba(8,9,13,.3) 74%, transparent 100%),
    linear-gradient(0deg, rgba(8,9,13,.78) 0%, transparent 56%);
}
body.support-modern-page .sup-hero__kicker {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fd-accent);
}
body.support-modern-page .sup-hero__title {
  font-family: var(--fd-display); font-weight: 500; letter-spacing: -.015em;
  color: var(--fd-ink);
}
body.support-modern-page .sup-hero__title em { font-style: italic; color: var(--fd-accent); }
body.support-modern-page .sup-hero__lede { color: var(--fd-ink-soft); font-size: 15px; line-height: 1.62; }

/* "free, ad-free" note → trust chip row */
body.support-modern-page .sup-hero__free {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--fd-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--fd-ink-soft);
}

/* pay buttons: adopt foundation radius/motion, KEEP brand tints */
body.support-modern-page .sup-pay {
  border-radius: var(--fd-r-sm);
  transition: transform var(--fd-t-fast), filter var(--fd-t-fast), box-shadow var(--fd-t-fast);
}
body.support-modern-page .sup-pay:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* section headings */
body.support-modern-page .sup-eyebrow {
  font-family: var(--fd-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--fd-accent);
}
body.support-modern-page .sup-h2 {
  font-family: var(--fd-display); font-weight: 500; letter-spacing: -.01em; color: var(--fd-ink);
}
body.support-modern-page .sup-h2 em { font-style: italic; color: var(--fd-accent); }
body.support-modern-page .sup-lead { color: var(--fd-ink-soft); }

/* cost ledger → editorial rows */
body.support-modern-page .sup-row {
  border-top: 1px solid var(--fd-line);
}
body.support-modern-page .sup-row__no {
  font-family: var(--fd-mono); color: var(--fd-accent); letter-spacing: .1em;
}
body.support-modern-page .sup-row__title {
  font-family: var(--fd-display); font-weight: 500; color: var(--fd-ink);
}
body.support-modern-page .sup-row__text { color: var(--fd-ink-soft); line-height: 1.6; }

/* ═══ CONTACT ═════════════════════════════════════════════════════════════════ */

/* hero band */
body.contact-modern-page .contact-hero {
  position: relative; overflow: hidden; border-radius: var(--fd-r-lg); isolation: isolate;
}
body.contact-modern-page .contact-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-image: url('/img/backgrounds/house-builder-archive-desk.png');
  background-size: cover; background-position: center;
}
body.contact-modern-page .contact-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,9,13,.55) 0%, rgba(8,9,13,.8) 70%, var(--fd-bg-deep) 100%);
}
body.contact-modern-page .contact-hero__title {
  font-size: 12px; /* used as kicker-adjacent; display title below handles size */
}
body.contact-modern-page .contact-hero__title,
body.contact-modern-page .contact-hero__subtitle { position: relative; z-index: 1; }
body.contact-modern-page .contact-hero__title {
  font-family: var(--fd-display); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(26px, 3.4vw, 40px); color: var(--fd-ink);
}
body.contact-modern-page .contact-hero__subtitle { color: var(--fd-ink-soft); }
body.contact-modern-page .contact-hero__ornament { color: color-mix(in srgb, var(--fd-accent) 50%, transparent); }

/* tabs → pill style (quiet default, accent active) */
body.contact-modern-page .contact-tab {
  font-family: var(--fd-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--fd-ink-mute);
  border-radius: var(--fd-r-sm) var(--fd-r-sm) 0 0;
  transition: color var(--fd-t-fast), background var(--fd-t-fast), border-color var(--fd-t-fast);
}
body.contact-modern-page .contact-tab:hover { color: var(--fd-ink-soft); }
body.contact-modern-page .contact-tab.active {
  color: var(--fd-ink);
  border-bottom-color: var(--fd-accent);
}

/* forms → .fd-field look */
body.contact-modern-page .form-input,
body.contact-modern-page .form-textarea,
body.contact-modern-page .form-select {
  background: var(--fd-bg-deep);
  border: 1px solid var(--fd-line-2);
  border-radius: var(--fd-r-sm);
  color: var(--fd-ink);
  font-family: var(--fd-body);
  transition: border-color var(--fd-t-fast), box-shadow var(--fd-t-fast);
}
body.contact-modern-page .form-input:focus,
body.contact-modern-page .form-textarea:focus,
body.contact-modern-page .form-select:focus {
  border-color: var(--fd-accent);
  box-shadow: 0 0 0 3px var(--fd-accent-soft);
  outline: none;
}
body.contact-modern-page .form-label { font-family: var(--fd-body); color: var(--fd-ink-soft); }
body.contact-modern-page .field-req { color: var(--fd-err); }
body.contact-modern-page .field-opt { color: var(--fd-ink-faint); }
body.contact-modern-page .btn--primary {
  background: var(--fd-accent); color: var(--fd-accent-ink);
  border: 1px solid transparent; border-radius: var(--fd-r-sm);
  font-family: var(--fd-body); font-weight: 600;
  transition: filter var(--fd-t-fast), transform var(--fd-t-fast);
}
body.contact-modern-page .btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* success + error states */
body.contact-modern-page .success-card__title {
  font-family: var(--fd-display); font-weight: 500; color: var(--fd-ink);
}
body.contact-modern-page .contact-alert {
  border: 1px solid color-mix(in srgb, var(--fd-err) 40%, transparent);
  border-radius: var(--fd-r-sm);
  background: color-mix(in srgb, var(--fd-err) 8%, transparent);
  color: var(--fd-ink);
}

/* ═══ REDUCED MOTION ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.support-modern-page .sup-pay,
  body.contact-modern-page .btn--primary { transition: none; }
  body.support-modern-page .sup-pay:hover,
  body.contact-modern-page .btn--primary:hover { transform: none; }
}