/* NeedAHost production polish layer */

:root {
  --ink: #15201d;
  --ink-2: #263b35;
  --sand: #f7f8f5;
  --warm: #e9efea;
  --amber: #d45d3f;
  --amber-light: #fff0ea;
  --muted: #61716b;
  --card-bg: #ffffff;
  --border: rgba(21, 32, 29, 0.11);
  --border-strong: rgba(21, 32, 29, 0.20);
  --success: #16875d;
  --danger: #b43f35;
  --accent-blue: #2f6f88;
  --accent-teal: #1f8a83;
  --accent-sun: #f2b84b;
  --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(21, 32, 29, 0.06);
  --shadow-md: 0 12px 28px rgba(21, 32, 29, 0.10);
  --shadow-lg: 0 22px 52px rgba(21, 32, 29, 0.16);
  --max-w: 1180px;
}

html { scroll-padding-top: 88px; }

body {
  background:
    linear-gradient(180deg, rgba(247, 248, 245, 0.96), rgba(247, 248, 245, 1) 34rem),
    #f7f8f5;
  color: var(--ink);
}

h1, h2, h3, h4 { letter-spacing: 0; }
h1 { font-size: clamp(2.35rem, 5vw, 5rem); line-height: 0.98; }
h2 { font-size: clamp(1.85rem, 3.4vw, 3.2rem); }
h3 { font-size: 1.05rem; font-weight: 700; }
h4 { font-size: 0.98rem; font-weight: 700; }

:focus-visible {
  outline: 3px solid rgba(47, 111, 136, 0.35);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.section,
.board-section,
.post-section,
.who-section {
  max-width: none;
  padding: 5rem max(1.25rem, calc((100vw - var(--max-w)) / 2));
}

.section-label {
  color: var(--accent-blue);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 800;
}

.section-sub {
  color: var(--muted);
  max-width: 680px;
  font-size: 1rem;
}

.nav {
  min-height: var(--nav-h);
  padding: 0.85rem max(1.25rem, calc((100vw - var(--max-w)) / 2));
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(21, 32, 29, 0.10);
}

.logo,
.footer-logo {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: 0;
}

.logo span,
.footer-logo span { color: var(--accent-blue); }

.nav-links { gap: 1.1rem; }
.nav-links a { color: #44534e; font-weight: 700; }
.nav-links a:not(.btn):hover { color: var(--accent-blue); }

.btn {
  border-radius: var(--r-md);
  min-height: 42px;
  padding: 0.66rem 1rem;
  font-weight: 800;
  box-shadow: none;
}

.btn-primary { background: var(--ink); color: white; border-color: var(--ink); }
.btn-primary:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
.btn-outline { background: white; color: var(--ink); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--ink); color: white; border-color: var(--ink); }
.btn-soft { background: var(--warm); color: var(--ink); border-color: transparent; }
.btn-soft:hover { background: #dce7e0; }

.chip,
.chip-toggle,
.rc-badge {
  border-radius: var(--r-md);
  font-weight: 800;
}

.chip[aria-pressed="true"],
.chip-toggle[aria-pressed="true"] {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.hero {
  min-height: 92vh;
  padding: 7.5rem max(1.25rem, calc((100vw - var(--max-w)) / 2)) 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 3rem;
  align-items: end;
  background:
    linear-gradient(90deg, rgba(10, 18, 16, 0.82) 0%, rgba(10, 18, 16, 0.58) 46%, rgba(10, 18, 16, 0.18) 100%),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=78') center/cover;
  color: white;
}

.hero::before { display: none; }
.hero-content { max-width: 690px; color: white; }
.hero h1,
.hero h1 em { color: white; }
.hero h1 { margin-bottom: 1.15rem; }
.hero-sub { color: rgba(255, 255, 255, 0.86); font-size: 1.12rem; max-width: 600px; }
.hero-note { color: rgba(255, 255, 255, 0.78); }
.hero .eyebrow { background: rgba(255, 255, 255, 0.12); color: white; border-color: rgba(255, 255, 255, 0.24); }
.hero .eyebrow::before { background: var(--accent-sun); }
.hero .btn-outline { background: rgba(255, 255, 255, 0.12); color: white; border-color: rgba(255, 255, 255, 0.36); }
.hero .btn-outline:hover { background: white; color: var(--ink); }
.hero .btn-primary { background: white; color: var(--ink); border-color: white; }
.hero .btn-primary:hover { background: var(--accent-sun); border-color: var(--accent-sun); }

.hero-cards {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  align-self: stretch;
  justify-content: end;
}

.float-card,
.hero-panel,
.stat-card,
.request-card,
.board-card,
.wizard,
.post-form,
.req-detail,
.empty,
.filter-bar,
.host-card,
.feature-card,
.account-card,
.panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.hero-panel {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  padding: 1.25rem;
  backdrop-filter: blur(12px);
}

.hero-panel h3 { margin-bottom: 0.35rem; }
.hero-panel p { color: var(--muted); font-size: 0.92rem; }
.hero-panel-grid { display: grid; gap: 0.75rem; margin-top: 1rem; }
.hero-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.8rem;
}
.hero-panel-row strong { display: block; font-size: 0.9rem; }
.hero-panel-row span { color: var(--muted); font-size: 0.78rem; }
.hero-panel-footer { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-top: 1rem; }

.float-card {
  animation: none;
  min-width: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
}
.float-card:nth-child(2),
.float-card:nth-child(3) { margin-left: 0; }

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.metric {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  padding: 0.85rem;
}
.metric strong { display: block; font-size: 1.45rem; color: white; line-height: 1; }
.metric span { color: rgba(255, 255, 255, 0.76); font-size: 0.78rem; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.section-head .section-sub { margin-bottom: 0; }

.steps { gap: 1rem; }
.step {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.step-num { color: var(--accent-blue); font-size: 2.5rem; }

.board-section { background: #eef4f1; }
.board-grid { gap: 1rem; margin-top: 1.5rem; }

.request-card,
.board-card {
  background: white;
  min-height: 100%;
}
.request-card:hover,
.board-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.rc-top { gap: 1rem; }
.rc-flag-country,
.card-meta { color: var(--muted); font-weight: 700; }
.rc-badge { background: #e8f2f5; color: var(--accent-blue); }
.rc-title,
.card-title { font-weight: 900; font-size: 1rem; line-height: 1.35; }
.rc-detail { min-height: 2.75rem; }
.rc-responses,
.card-responses { color: var(--accent-teal); font-weight: 900; }

.post-section {
  background: white;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
}

.post-form,
.wizard,
.req-detail,
.filter-bar,
.empty {
  background: white;
}

.form-field,
.filter-bar select,
.filter-bar input {
  background: #f4f7f5;
  border-color: transparent;
  border-radius: var(--r-md);
}

.form-field:focus,
.filter-bar select:focus,
.filter-bar input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(47, 111, 136, 0.12);
}

.form-label { color: #53625d; font-weight: 900; }
.form-submit { background: var(--ink); color: white; border-radius: var(--r-md); }
.form-submit:hover { background: var(--accent-blue); }

.who-section { background: #14231f; }
.who-section .section-sub { color: rgba(255, 255, 255, 0.68); }
.host-card { background: rgba(255, 255, 255, 0.07); }
.host-card p { color: rgba(255, 255, 255, 0.64); }

.page-wrap {
  padding: calc(var(--nav-h) + 2.8rem) max(1.25rem, calc((100vw - var(--max-w)) / 2)) 5rem;
}
.page-title { font-size: clamp(2rem, 4vw, 3.65rem); max-width: 840px; }
.page-sub { max-width: 760px; }

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 2rem;
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.65rem;
  background: #e8f2f5;
  color: var(--accent-blue);
  border-radius: var(--r-md);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.page-side-note,
.side-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.page-side-note strong,
.side-panel strong { display: block; margin-bottom: 0.25rem; }
.page-side-note p,
.side-panel p { color: var(--muted); font-size: 0.88rem; }

.wizard-shell {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(260px, 340px);
  gap: 1.25rem;
  align-items: start;
}

.wizard { max-width: none; padding: 1.4rem; }
.wizard-progress .dot { height: 6px; background: #dfe8e3; }
.wizard-progress .dot.active { background: var(--accent-blue); }
.wizard-progress .dot.done { background: var(--accent-teal); }
.choice { background: #f4f7f5; border-radius: var(--r-md); }
.choice:hover { border-color: var(--accent-blue); }
.choice[aria-selected="true"] { border-color: var(--accent-blue); background: #e8f2f5; }

.summary-list { display: grid; gap: 0.65rem; margin-top: 1rem; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.summary-row span { color: var(--muted); }
.summary-row strong { text-align: right; }

.filter-bar { align-items: end; }
.filter-field { display: grid; gap: 0.35rem; flex: 1; min-width: 180px; }
.filter-field label { font-size: 0.72rem; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; color: var(--muted); font-size: 0.9rem; }

.req-detail { padding: 1.5rem; }
.req-detail .meta { gap: 0.5rem; }
.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  background: #f1f5f3;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}
.req-detail h1 { max-width: 900px; }
.req-detail .body { color: #283631; }

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.25rem;
  align-items: start;
}
.account-stack { display: grid; gap: 1rem; }
.account-card { background: white; padding: 1.2rem; }

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 2rem;
  align-items: center;
}

.footer {
  padding: 2rem max(1.25rem, calc((100vw - var(--max-w)) / 2));
  background: white;
}

@media (max-width: 960px) {
  .hero,
  .page-hero,
  .wizard-shell,
  .account-grid,
  .login-shell,
  .post-section {
    grid-template-columns: 1fr;
  }
  .metrics-strip { grid-template-columns: repeat(2, 1fr); }
  .section-head { display: block; }
  .hero { min-height: auto; align-items: start; }
  .hero-cards { margin-top: 0; }
  .nav-links.is-open { background: white; }
}

@media (max-width: 620px) {
  h1 { font-size: 2.35rem; }
  .hero { padding-top: 6.25rem; }
  .metrics-strip { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .wizard-actions { gap: 0.75rem; flex-wrap: wrap; }
  .wizard-actions .btn { flex: 1 1 auto; }
  .footer { align-items: flex-start; text-align: left; }
}