/* wgf-forever-travel.css - skin for /wow-forever/travel/.
 *
 * ONE home for this section's appearance (CONTRIBUTING.md: a shared helper has exactly one
 * home). The site shell owns body type, header, footer and page width; everything here is
 * scoped to .ft-* so it cannot leak into another family. tools/forever_travel_preview.py
 * reads THIS file rather than carrying a copy, so a ready-check shows the shipping skin.
 *
 * Colours come from static/css/_tokens.css where one exists, with a local fallback so the
 * preview renders standalone. Forever's seal accent is new-growth green (#9bd17b), set in
 * wgf_version.py.
 */
.ft-section{
  --ft-panel:#151922; --ft-panel2:#1b2130; --ft-line:#2a3245;
  --ft-dim:#8b95ab; --ft-gold:#c8aa6e; --ft-green:#9bd17b;
  --ft-ally:#4a7ec7; --ft-horde:#b23a3a;
}

.ft-lead{font-size:16.5px;line-height:1.65}

.ft-note{margin-top:32px;padding:11px 14px;background:var(--ft-panel);
  border-left:3px solid var(--ft-line);color:var(--ft-dim);font-size:13px;
  border-radius:0 4px 4px 0}

/* Provenance tags: a reader must be able to tell an exact datamined value from our advice. */
.ft-source{font-size:12px;color:var(--ft-dim);margin:.5em 0 1.4em;font-style:italic}
.ft-source-mined::before{content:"\25C6 ";color:var(--ft-green);font-style:normal}
.ft-source-editorial::before{content:"\25C7 ";color:var(--ft-gold);font-style:normal}

.ft-table{width:100%;border-collapse:collapse;margin:.6em 0 1em;font-size:14px;
  background:var(--ft-panel);border-radius:5px;overflow:hidden}
.ft-table th{text-align:left;background:var(--ft-panel2);color:var(--ft-gold);
  font-weight:600;padding:9px 11px;border-bottom:1px solid var(--ft-line);
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.ft-table td{padding:8px 11px;border-bottom:1px solid rgba(42,50,69,.55);vertical-align:top}
.ft-table tr:last-child td{border-bottom:none}
.ft-table tr:hover td{background:rgba(155,209,123,.045)}

.ft-name{font-weight:600;color:#fff}
.ft-zone{display:block;font-weight:400;color:var(--ft-dim);font-size:12.5px}
.ft-num{text-align:center;color:var(--ft-gold);font-weight:600}
.ft-cost{color:var(--ft-green);white-space:nowrap;font-variant-numeric:tabular-nums}
.ft-via{color:var(--ft-dim);font-size:13px}

.ft-pill{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11.5px;
  font-weight:600;letter-spacing:.03em}
.ft-alliance{background:rgba(74,126,199,.17);color:#7fb0ef;
  border:1px solid rgba(74,126,199,.4)}
.ft-horde{background:rgba(178,58,58,.17);color:#e08383;
  border:1px solid rgba(178,58,58,.42)}
.ft-neutral{background:rgba(200,170,110,.15);color:var(--ft-gold);
  border:1px solid rgba(200,170,110,.35)}

.ft-new{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:3px;
  background:rgba(155,209,123,.16);color:var(--ft-green);font-size:10.5px;
  font-weight:700;letter-spacing:.06em;border:1px solid rgba(155,209,123,.35)}

.ft-stat-row{display:flex;gap:12px;flex-wrap:wrap;margin:1.4em 0}
.ft-stat{flex:1 1 140px;background:var(--ft-panel);border:1px solid var(--ft-line);
  border-radius:6px;padding:13px 15px}
.ft-stat b{display:block;font-size:26px;color:var(--ft-green);line-height:1.1}
.ft-stat span{color:var(--ft-dim);font-size:12.5px}

.ft-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:11px;margin:1em 0}
.ft-card{display:block;background:var(--ft-panel);border:1px solid var(--ft-line);
  border-radius:6px;padding:13px 15px;transition:border-color .15s,transform .15s}
.ft-card:hover{border-color:var(--ft-green);text-decoration:none;transform:translateY(-1px)}
.ft-card-q{display:block;color:#fff;font-weight:600;font-size:14.5px;margin-bottom:3px}
.ft-card-t{display:block;color:var(--ft-dim);font-size:12.5px}

.ft-steps{padding-left:22px}
.ft-steps li{margin:.55em 0}

.ft-empty{color:var(--ft-dim);background:var(--ft-panel);padding:11px 14px;border-radius:5px}

@media (max-width:640px){
  .ft-table{font-size:13px}
  .ft-table th,.ft-table td{padding:7px 8px}
  .ft-via{display:none}
  .ft-table th:nth-child(4){width:1%}
}

/* Heading block. _wgf_seo_shell renders <title> but no <h1>, so the section supplies its
 * own: exactly one H1 per page, with the question it answers directly beneath it. */
.ft-h1{margin:.1em 0 .1em;line-height:1.25}
.ft-question{color:var(--ft-dim);font-size:15px;margin:.1em 0 1.4em}