/* ── Golden bridge ─────────────────────────────────────────────────
   Rethemes legacy styles.css pages (the /apply flow)
   to the golden system — white canvas, warm ink, blue accent — WITHOUT
   touching their DOM or form JS. styles.css stacks several themed
   "eras" that each re-override with !important; this file loads LAST,
   so equal-specificity !important rules here win the cascade.
   New pages (index, book, earn, …) use golden.css and never load this. */

:root {
  --icon-ground: #FFFFFF;
  --icon-ground-mid: #FFFFFF;
  --icon-surface: #FFFFFF;
  --icon-surface-elevated: #F5F3F0;
  --icon-primary: #2563EB;
  --icon-primary-deep: #1D4ED8;
  --icon-fuchsia: #2563EB;
  --icon-fuchsia-deep: #1D4ED8;
  --icon-violet-soft: #2563EB;
  --icon-violet: #2563EB;
  --icon-blue-accent: #2563EB;
  --icon-linen: #16120E;
  --icon-linen-muted: #5C554D;
  --icon-border: #E8E4DE;
  --icon-border-soft: #F0EDE8;
  --icon-gradient: linear-gradient(100deg, #2563EB, #3B82F6 55%, #7C3AED);
  --icon-gradient-page: #FFFFFF;
  --icon-danger: #E11D48;
  --icon-success: #15803D;
}

/* ── Page canvas ── */
body {
  background: #FFFFFF !important;
  color: var(--icon-linen) !important;
}
body::before,
body::after {
  display: none !important;
}

/* ── Nav: keep the floating-pill geometry, recolor light ── */
.nav,
.collapsible-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--icon-border) !important;
  box-shadow: 0 14px 40px rgba(22, 18, 14, 0.10) !important;
  backdrop-filter: blur(14px) !important;
}
.nav-links a,
.nav .nav-links a,
.nav-menu .nav-links a {
  color: var(--icon-linen-muted) !important;
  opacity: 1 !important;
}
.nav-links a:hover,
.nav .nav-links a:hover,
.nav-menu .nav-links a:hover {
  color: var(--icon-linen) !important;
}
.nav-hamburger span {
  background: var(--icon-linen) !important;
}
.nav-menu {
  background: rgba(255, 255, 255, 0.97) !important;
}

/* ── Buttons ── */
.nav-links a.btn-primary,
.nav .nav-links a.btn-primary,
.nav-menu .nav-links a.btn-primary {
  color: #FFFFFF !important;
}
.btn-primary,
.nav-links .btn-primary {
  background: var(--icon-gradient) !important;
  color: #FFFFFF !important;
}
.btn-glass,
.btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--icon-linen) !important;
  color: var(--icon-linen) !important;
}

/* ── Hero + section text (join/invite/shoot-era classes included) ── */
.hero-headline,
.shoot-hero h1,
.apply-hero h1,
.section-title,
h1, h2, h3 {
  color: var(--icon-linen) !important;
}
.hero-subline,
.shoot-hero p,
.apply-hero p,
.section-sub,
.apply-inline-link {
  color: var(--icon-linen-muted) !important;
}
.apply-hero .accent,
.gradient-text {
  background: var(--icon-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.hero-badge,
.shoot-hero-eyebrow,
.section-eyebrow,
.value-card-eyebrow,
.pricing-badge,
.plan-badge,
.city-status,
.badge,
.kicker {
  color: var(--icon-primary) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

/* ── Cards ── */
.apply-card,
.shoot-step,
.wyg-card,
.city-card,
.use-case-card,
.faq-item,
.req-card,
.tier-card,
.waitlist-card,
.article-card,
.resource-card,
.cta-card,
.feature-card,
.value-card-users,
.value-card-photographers,
.status-card,
.verify-card {
  background: #FFFFFF !important;
  border-color: var(--icon-border) !important;
  box-shadow: 0 18px 44px rgba(22, 18, 14, 0.08) !important;
}

/* ── Apply-flow text ── */
.apply-card h2,
.apply-card h3,
.apply-card .review-head,
.apply-card label.lbl,
.field label.lbl {
  color: var(--icon-linen) !important;
}
.apply-card p,
.apply-card label,
.apply-card span,
.apply-card dt,
.apply-card dd,
.apply-card .apply-step-sub,
.apply-progress-title,
.apply-progress-step,
.apply-progress-step strong {
  color: var(--icon-linen-muted) !important;
}
.apply-card .req,
.apply-card dt {
  color: var(--icon-linen) !important;
}
.apply-progress-bar {
  background: var(--icon-border) !important;
}
.apply-progress-fill {
  background: var(--icon-gradient) !important;
}

/* ── Selectable options, pills, info boxes ── */
.opt,
.pill,
.review-section,
.info-box {
  background: var(--icon-surface-elevated) !important;
  border-color: var(--icon-border) !important;
  color: var(--icon-linen) !important;
}
.opt p, .opt span, .pill span {
  color: var(--icon-linen-muted) !important;
}
.opt.selected,
.pill.selected,
.chip.selected,
.opt[aria-pressed="true"],
.pill[aria-pressed="true"],
.chip[aria-pressed="true"] {
  border-color: var(--icon-primary) !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--icon-primary) !important;
}
.chip {
  background: var(--icon-surface-elevated) !important;
  border-color: var(--icon-border) !important;
  color: var(--icon-linen) !important;
}
.critical-banner,
.warn-box {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #8A5A00 !important;
}

/* ── Inputs ── */
input,
select,
textarea,
.inp,
.form-input,
.form-select,
.form-textarea {
  background-color: var(--icon-surface-elevated) !important;
  border-color: var(--icon-border) !important;
  color: var(--icon-linen) !important;
}
input::placeholder,
textarea::placeholder {
  color: #8A8378 !important;
}
input:focus,
select:focus,
textarea:focus,
.inp:focus {
  border-color: var(--icon-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}

/* ── Footer ── */
.footer,
footer.footer {
  background: #FFFFFF !important;
  border-top: 1px solid var(--icon-border) !important;
  color: var(--icon-linen-muted) !important;
}
.footer a,
.footer-links a {
  color: var(--icon-linen-muted) !important;
}
.footer a:hover,
.footer-links a:hover {
  color: var(--icon-linen) !important;
}

/* ── Hero bands: legacy dark hero → white, sized for form pages ── */
.apply-hero {
  background: #FFFFFF !important;
  min-height: 0 !important;
  padding: 132px 0 44px !important;
}

/* ── apply-flow.css counterparts (that file loads AFTER this one, so
   these need !important to win; its dark-glass rules are invisible on
   the white canvas) ── */
.sample-tile {
  border: 1.5px dashed var(--icon-border-strong, #D6D1C9) !important;
  background: var(--icon-surface-elevated) !important;
}
.sample-tile:hover { border-color: var(--icon-primary) !important; background: rgba(37, 99, 235, 0.06) !important; }
.sample-empty-plus, .sample-empty-label { color: var(--icon-linen-muted) !important; }
.sample-tile-filled { border-style: solid !important; border-color: var(--icon-border) !important; }

.btn-back {
  border: 1.5px solid var(--icon-border-strong, #D6D1C9) !important;
  color: var(--icon-linen) !important;
  background: transparent !important;
}
.btn-back:hover { background: var(--icon-surface-elevated) !important; }
.btn-next, .btn-submit {
  background: var(--icon-gradient) !important;
  color: #FFFFFF !important;
}

.condition-card, .review-row, .status-result, .review-photo-tile {
  background: var(--icon-surface-elevated) !important;
  border-color: var(--icon-border) !important;
}
.condition-desc, .condition-status, .field-help, .loading {
  color: var(--icon-linen-muted) !important;
}
.copy-id-btn {
  background: var(--icon-surface-elevated) !important;
  border-color: var(--icon-border-strong, #D6D1C9) !important;
  color: var(--icon-linen) !important;
}
.upload-progress { background: var(--icon-border) !important; }

/* ── Progress strip: no band, just the bar. The legacy bright-era rule
   painted a full-width surface behind Step X of 3, which reads as a
   random background flip on the white canvas. ── */
.apply-progress {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

/* ── Logo scale (1.75x, matches golden.css nav-logo) ── */
.nav-logo { height: 49px !important; }

/* ── Mobile nav drawer fix (reported by an ICON 2026-07-06) ──
   The golden styles.css hides `.nav-links a:not(.btn)` at ≤768px
   because golden pages use a different mobile nav (.nav-burger
   toggling .nav-links directly). Bridge pages still use the legacy
   .nav-hamburger/.nav-menu drawer, so tapping the hamburger opened an
   EMPTY white sheet — the links were display:none inside it. Re-show
   them, and normalize the drawer into the full-width dropdown
   apply-flow.css intends (its left/right:0 was losing to the legacy
   fixed-drawer width:280px/height:100vh from styles.css). */
@media (max-width: 768px) {
  .nav-menu {
    width: auto !important;
    height: auto !important;
    border-bottom: 1px solid var(--icon-border) !important;
    box-shadow: 0 24px 48px rgba(22, 18, 14, 0.14) !important;
  }
  .nav-menu .nav-links a:not(.btn) {
    display: block !important;
  }
}