/* ATFutures site styles.
   Layered on Quarto's Bootstrap theme plus _brand.yml, which carry the palette.
   Edit colours in _brand.yml; edit layout and components here. */

:root {
  --ink: #1A202C;
  --ink-soft: #354049;
  --muted: #5F7075;
  --line: #D5DEE0;
  --line-soft: #E8EEF0;
  --bg: #FBFCFC;
  --panel: #FFFFFF;
  --accent: #007A87;
  --accent-dark: #00646E;
  --accent-soft: #E4F1F2;
  --warn: #A8560B;
  --radius: 3px;
  --wrap: 70rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#quarto-content { padding-top: 0; }
main.content { padding-bottom: 0; }

/* Pages carry their own hero heading, so suppress Quarto's title block. */
#title-block-header { display: none; }

a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* ---------- Chrome: navbar ---------- */

.navbar {
  background: rgba(251, 252, 252, 0.96) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  padding: 0.3rem 0;
}
.navbar-container { max-width: var(--wrap); }
.navbar-brand { display: flex; align-items: center; gap: 0.5rem; }
.navbar-logo { height: 26px; width: auto; margin-right: 0.35rem; }
.navbar-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.06rem;
  color: var(--ink);
}
.navbar .nav-link {
  color: var(--ink-soft);
  font-size: 0.94rem;
  padding: 0.35rem 0.6rem !important;
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.navbar .nav-link:hover { background: var(--accent-soft); color: var(--accent-dark); }
.navbar .nav-link.active, .navbar .nav-item .nav-link.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--panel);
  border-color: var(--line);
}
/* The last right-hand item is the call to action. */
.navbar ul.ms-auto > li:last-child > .nav-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  margin-left: 0.4rem;
}
.navbar ul.ms-auto > li:last-child > .nav-link:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.navbar-toggler { border-color: var(--line); }

/* ---------- Layout ---------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

.band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.band:last-of-type { border-bottom: 0; }
/* Pandoc wraps a heading-led band either as a div or as a nested level2
   section, so match descendants rather than only direct children. */
.band h2 {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  margin-bottom: 1.1rem;
}

.hero {
  padding: 2.4rem 0 2rem;
  background: linear-gradient(180deg, #F1F7F8 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero h1 { font-size: 2.2rem; max-width: 34rem; }
.hero__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.1rem 0 0.5rem; }

/* ---------- Type ---------- */

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6rem; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.32rem; margin-top: 0; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.85rem; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 46rem; }
.small { font-size: 0.86rem; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 0.9em; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  font-size: 0.95rem;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff !important; }
.btn--ghost { background: transparent; color: var(--accent-dark) !important; }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-dark) !important; }

/* ---------- Grids and cards ---------- */

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.05rem;
}
.card h3 { margin-bottom: 0.35rem; }
.card p:last-child { margin-bottom: 0; }
.card--accent { border-left: 3px solid var(--accent); }

ul, ol { margin: 0 0 0.85rem; padding-left: 1.1rem; }
li { margin-bottom: 0.28rem; }
ul.tight li { margin-bottom: 0.15rem; }
.muted-list li { color: var(--muted); }
li > p { margin-bottom: 0.3rem; }

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin: 0.4rem 0 0; }
.stat { border-left: 3px solid var(--accent); padding-left: 0.7rem; }
.stat__num { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.stat__label { display: block; color: var(--muted); font-size: 0.85rem; }

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin-bottom: 0.6rem; }
caption { text-align: left; color: var(--muted); font-size: 0.85rem; padding-bottom: 0.4rem; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th, table > thead > tr > th {
  border-bottom: 2px solid var(--line);
  background: #F6FAFB;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Bar chart (HTML, no JS) ---------- */

.bar-cell { width: 55%; }
.bar { display: block; height: 0.72rem; background: var(--accent); border-radius: 2px; min-width: 2px; position: relative; }
.bar__credit { display: block; height: 100%; background: var(--accent-dark); border-radius: 2px 0 0 2px; }
.legend { display: flex; gap: 1.1rem; font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.legend span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; border-radius: 2px; background: var(--accent); vertical-align: -1px; }
.legend span.legend--credit::before { background: var(--accent-dark); }

/* ---------- Plan page ---------- */

tr.tier--recommended { background: #F1F9F9; }
tr.tier--recommended th { box-shadow: inset 3px 0 0 var(--accent); }
.tier__price { display: block; font-size: 1.15rem; font-weight: 700; margin-top: 0.25rem; }
.tier__days { display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; }
/* Reserved slot above the tier name so rows line up with or without a badge. */
.tier__flag { display: block; height: 1.1rem; }
/* Two lines reserved for the name so the prices share a baseline in every row. */
.tier__name { display: block; min-height: 2.7rem; }
/* Start the other cells level with the tier name, below the flag slot. */
table.tiers td { padding-top: 1.2rem; vertical-align: top; }
.badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  vertical-align: 2px;
  margin-left: 0.3rem;
  font-weight: 600;
}
.gate {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}
.note { border-left: 3px solid var(--warn); background: #FDF7F0; padding: 0.7rem 0.85rem; border-radius: var(--radius); }
.note p:last-child { margin-bottom: 0; }

/* Internal working block: questions for the owner, not for the client. */
.internal {
  border: 1px dashed var(--ink-soft);
  background: #F7F9FA;
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}
.internal p { margin-bottom: 0.5rem; }
.internal ol { margin-bottom: 0; }
.internal li { margin-bottom: 0.4rem; }
dl.spec { display: grid; grid-template-columns: 12rem 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; font-size: 0.92rem; }
dl.spec dt { font-weight: 600; color: var(--ink-soft); }
dl.spec dd { margin: 0; }

/* ---------- Forms ---------- */

form.contact { display: grid; gap: 0.7rem; max-width: 34rem; }
form.contact label { font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 0.2rem; }
form.contact input, form.contact select, form.contact textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--panel);
  color: var(--ink);
}
form.contact input:focus, form.contact select:focus, form.contact textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.hidden { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */

.nav-footer { border-top: 1px solid var(--line); background: #F5F8F9; margin-top: 0.5rem; }
.nav-footer .nav-footer-center { color: var(--muted); font-size: 0.9rem; }
.nav-footer .nav-footer-left, .nav-footer .nav-footer-right { font-size: 0.9rem; }
.nav-footer p { margin-bottom: 0.35rem; }
.nav-footer ul { list-style: none; padding-left: 0; }
.footer-item { color: var(--muted); }
.gate-note { color: var(--muted); font-size: 0.78rem; }

/* ---------- Responsive and print ---------- */

@media (max-width: 720px) {
  .hero h1 { font-size: 1.7rem; }
  dl.spec { grid-template-columns: 1fr; }
  dl.spec dt { margin-top: 0.5rem; }
  .bar-cell { width: auto; }
  .navbar-logo { height: 22px; }
}

@media print {
  .navbar, .nav-footer { display: none; }
  body { font-size: 11pt; }
  .band { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}