/*
  Public site layout: header, hero, sections, footer.
  Loaded together with tokens.css and base.css.
*/

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header nav a {
  font-size: 14px;
  color: var(--text-secondary);
}

.site-header nav a:hover {
  color: var(--text-primary);
}

/* .site-header nav a's color rule otherwise beats .btn-primary's specificity,
   washing out the Sign up button text to muted gray on the teal background. */
.site-header nav a.btn-primary,
.site-header nav a.btn-primary:hover {
  color: var(--on-accent);
}

.site-header .logout-form {
  display: inline-flex;
  margin: 0;
}

.site-header .logout-form .link-button {
  font-size: 14px;
  color: var(--text-secondary);
}

.site-header .logout-form .link-button:hover {
  color: var(--text-primary);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
  padding: 32px 0;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.site-footer .footer-links a:hover {
  color: var(--text-primary);
}

.site-footer .footer-notice {
  max-width: 420px;
  text-align: left;
}

/* Hero */

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-subheadline {
  margin-top: 16px;
  max-width: 480px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.hero-stat-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-heading);
}

.hero-stat-label {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Calculator card */

.calculator-card {
  max-width: 420px;
  width: 100%;
}

.calculator-result {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  margin: 8px 0 20px;
}

.calculator-result-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent-light);
  margin-top: 4px;
}

.calculator-result-monthly {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.calculator-cta {
  width: 100%;
}

.rebate-footnote {
  margin-top: 12px;
  text-align: center;
}

/* How It Works */

.how-it-works {
  background: var(--bg-section);
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.how-it-works-icon {
  width: 108px;
  height: 108px;
  object-fit: contain;
  display: block;
}

.how-it-works-item .how-it-works-title,
.how-it-works-item .text-muted {
  margin-left: 9px;
}

.how-it-works-title {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Step captions are now full sentences instead of short fragments — a small gap
   keeps them from reading as glued to the title above. */
.how-it-works-item .text-muted {
  margin-top: 4px;
}

/* Brokers */

.brokers-grid {
  display: grid;
  /* min(260px, 100%) keeps 3 cards per row at desktop widths (AGENTS.md brokers
     section) while still never forcing a track wider than the viewport itself on
     narrow screens. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
  margin-top: 32px;
}

.broker-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
}

.broker-card.recommended {
  border: 1.5px solid var(--accent);
}

.broker-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.broker-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-heading);
}

.broker-card-brand {
  display: flex;
  align-items: center;
}

.broker-card-logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
}

.broker-card-logo img {
  max-height: 32px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Some official broker marks are colored/dark and designed for light backgrounds —
   a light plate keeps them legible without altering the source artwork. */
.broker-card-logo--plate {
  height: 32px;
  padding: 5px 10px;
  background: var(--text-heading);
  border-radius: 6px;
}

.broker-card-logo--plate img {
  max-height: 22px;
}

.broker-card-rate {
  margin: 12px 0 12px;
  color: var(--accent-light);
  font-weight: 500;
}

/* Compact 2-column mini-grid so 5 short condition lines take ~3 rows instead of 5 —
   keeps the card at 3-per-row desktop widths (~260-360px) from growing tall. The
   last, unpaired item (5 items in a 2-col grid) simply leaves its second cell empty. */
.broker-card-conditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.broker-card-conditions li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.broker-card-conditions li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* FAQ */

.faq-list {
  margin-top: 32px;
}

.faq-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.faq-row:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.faq-question::after {
  content: "+";
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
}

.faq-question[aria-expanded="true"]::after {
  content: "\2212";
}

.faq-question[aria-expanded="true"] {
  color: var(--text-heading);
}

.faq-answer {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 8px;
}

/* Transfer an existing account */

.transfer-request-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}

.transfer-request-form .field:last-child {
  margin-bottom: 0;
}

.transfer-request-output label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.transfer-request-output textarea {
  min-height: 380px;
  resize: vertical;
  white-space: pre-wrap;
}

.transfer-request-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.transfer-copy-status {
  font-size: 13px;
  color: var(--accent-light);
  min-height: 1em;
}

.transfer-request-note {
  margin-top: 20px;
  max-width: 480px;
}

.transfer-request-cta {
  margin-top: 16px;
  display: inline-flex;
}

@media (max-width: 768px) {
  .transfer-request-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-header nav {
    gap: 14px;
  }

  .site-footer .container {
    flex-direction: column;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .calculator-card {
    max-width: none;
  }

  .how-it-works-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reserve an internal rail for the fixed support widget (static/css/support-widget.css)
   at the width band where the hero-grid above stacks the calculator card full-width
   below the hero copy. The card itself stays full-width (max-width: none, same as the
   768px-and-below rule above) — only its right padding grows, so the extra 100px is empty
   space *inside* the card's own background/border rather than a shortened card with dead
   space beside it. The widget's launcher then sits over that padding: it's still
   position:fixed and can visually sit on the card's background, but every real control
   (broker/lots fields, estimated-rebate label, monthly/annual result, CTA, disclaimer) is
   pushed left of the rail by the padding, so none of them ever sit under the launcher at
   any scroll position or card height. 100px covers the widget's widest footprint in this
   band (66px launcher + 24px offset) with a ~30px safety margin either side of that width
   range. Verified zero bounding-box intersection with every calculator child via Playwright
   at 481x800, 600x800, 700x900, 768x800 and 768x900. Scoped to >=481px because <=480px
   already uses the smaller 60px launcher with a 20px offset and has never shown an overlap
   at any tested height. */
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-card {
    max-width: none;
    padding-right: calc(var(--card-padding) + 100px);
  }
}

@media (max-width: 480px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
  }

  .transfer-request-cta {
    width: 100%;
    justify-content: center;
  }

  /* At full-width single-column rows, the icon's fixed 108px block (left-aligned by
     default so it lines up with its 4-column desktop layout) reads as shifted off to
     the left. Center the icon and caption together instead. The desktop title/caption
     margin-left:9px nudge (to line up under the icon in the narrow desktop columns)
     is reset here since text-align:center already aligns them under the icon. */
  .how-it-works-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .how-it-works-item .how-it-works-title,
  .how-it-works-item .text-muted {
    margin-left: 0;
  }

  /* Logo + 3 nav links don't reliably fit one row at very narrow widths (e.g. 380px).
     Wrap instead of risking horizontal overflow. */
  .site-header .container {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .site-header nav {
    gap: 10px;
  }
}