/* Website module additions. The public design itself lives in app.css / theme.css
   (unchanged from the previous site). This file only carries what the content
   engine adds: announcement banner, honeypot, and the whitelisted style tokens
   an editor can choose per section (tone / size / padding / font / colours). */

.wbanner { font-size: var(--fs-sm, .9rem); padding: .55rem 0; text-align: center; }
.wbanner--gold { background: var(--gold-500, #09757a); color: #fff; }
.wbanner--navy { background: var(--navy-950, #0d0d0d); color: #fff; }
.wbanner a { color: inherit; text-decoration: underline; }
.wbanner__inner { display: flex; justify-content: center; }

/* Honeypot: invisible to people, tempting to bots. */
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.form-error { color: #9b1c1c; font-size: var(--fs-sm, .9rem); margin: .35rem 0 0; }
.form-ok { background: #e8f5ee; border: 1px solid #b6dfc7; color: #14532d; border-radius: var(--r-md, 8px); padding: .9rem 1rem; }
.form-fail { background: #fdecec; border: 1px solid #f2b8b8; color: #7f1d1d; border-radius: var(--r-md, 8px); padding: .9rem 1rem; }

/* Section style tokens (values validated server-side; these classes are the only way to apply them). */
.tone-ivory { background: var(--ivory, #f7f8f9) !important; }
.tone-plain { background: #fff !important; }
.tone-navy { background: var(--navy-950, #0d0d0d) !important; color: #e8ebf2; }
.tone-navy h1, .tone-navy h2, .tone-navy h3, .tone-navy h4 { color: #fff; }
.tone-teal { background: var(--gd-teal, #09757a) !important; color: #fff; }
.tone-teal h1, .tone-teal h2, .tone-teal h3, .tone-teal h4 { color: #fff; }
.fs-xl { font-size: 1.25em; } .fs-lg { font-size: 1.12em; } .fs-sm { font-size: .92em; } .fs-xs { font-size: .84em; }
.pad-air { padding-block: calc(var(--section-pad, 4.5rem) * 1.4) !important; }
.pad-tight { padding-block: calc(var(--section-pad, 4.5rem) * .6) !important; }
.ff-display { font-family: var(--font-display, inherit); }
.ff-body { font-family: var(--font-body, inherit); }
.ff-serif { font-family: 'Fraunces', Georgia, serif; }
.ff-amiri { font-family: 'Amiri', Georgia, serif; }
.ff-mono { font-family: ui-monospace, Menlo, monospace; }
[style*="--sec-color"] { color: var(--sec-color); }
[style*="--sec-color"] h1, [style*="--sec-color"] h2, [style*="--sec-color"] h3, [style*="--sec-color"] h4 { color: var(--sec-color); }
[style*="--sec-bg"] { background: var(--sec-bg) !important; }

/* ============================================================ roadmap =======
   The years of a plan: a timeline that carries the target of each year and
   marks the final year as the goal, plus a compact strip of the same years for
   the home page. Works in both writing directions and prints without shadows. */
.rmap-sec__head .lead { max-width: 62ch; }
.rmap-sec__note { margin-top: 1.5rem; color: var(--gd-muted, #767676); font-size: var(--fs-sm, .875rem); }
.rmap-sec__cta { margin-top: 2rem; }

/* ---- detailed timeline ---- */
.rmap { position: relative; margin: 2.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.rmap::before {
  content: ""; position: absolute; top: .55rem; bottom: .55rem; inset-inline-start: 100px; width: 2px;
  background: linear-gradient(to bottom, var(--line-cool, #e6eaee), var(--gold-500, #09757a));
}
.rmap__item { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
.rmap__item::before {
  content: ""; position: absolute; inset-inline-start: 93px; top: 1.15rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-500, #09757a); box-shadow: 0 0 0 4px #fff;
}
.rmap__year {
  font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.15rem; letter-spacing: .04em;
  color: var(--navy-950, #0d0d0d); text-align: start; padding-top: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rmap__card {
  background: #fff; border: 1px solid var(--line, #d4dbe0); border-radius: var(--r-lg, 12px);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-1, 0 1px 2px rgba(17,17,17,.06));
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.rmap__item:hover .rmap__card { box-shadow: var(--shadow-2, 0 2px 8px rgba(17,17,17,.08)); transform: translateY(-2px); border-color: var(--gold-500, #09757a); }
.rmap__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rmap__title { margin: 0; font-size: 1.075rem; }
.rmap__metric { margin: 0; font-size: var(--fs-sm, .875rem); color: var(--gd-muted, #767676); white-space: nowrap; }
.rmap__metric b { color: var(--gold-500, #09757a); font-size: 1.05rem; }
.rmap__body { margin: .5rem 0 0; color: var(--gd-grey, #2b2b2b); }
/* the year the plan is aiming at */
.rmap__item--goal::before { background: var(--navy-950, #0d0d0d); width: 16px; height: 16px; inset-inline-start: 92px; top: 1.05rem; }
.rmap__item--goal .rmap__year {
  color: #fff; background: linear-gradient(135deg, var(--navy-950, #0d0d0d), var(--navy-700, #2b2b2b));
  border-radius: 999px; text-align: center; padding: .32rem .8rem; justify-self: start; align-self: start;
}
.rmap__item--goal .rmap__card {
  border-color: var(--navy-950, #0d0d0d); border-width: 1px;
  background: linear-gradient(135deg, #fff 55%, var(--gd-teal-100, #e4f1ef));
  box-shadow: var(--shadow-3, 0 12px 28px -10px rgba(17,17,17,.18));
}

/* ---- compact strip (home page) ---- */
.rmap-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.rmap-strip__item {
  position: relative; display: flex; flex-direction: column; gap: .25rem;
  background: #fff; border: 1px solid var(--line, #d4dbe0); border-radius: var(--r-lg, 12px);
  padding: .95rem 1.05rem; box-shadow: var(--shadow-1, 0 1px 2px rgba(17,17,17,.06));
}
.rmap-strip__item::after {
  content: ""; position: absolute; inset-inline-start: -1rem; top: 50%; width: 1rem; height: 2px; background: var(--line, #d4dbe0);
}
.rmap-strip__item:first-child::after { display: none; }
.rmap-strip__year { font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.15rem; color: var(--gold-500, #09757a); font-variant-numeric: tabular-nums; }
.rmap-strip__label { font-weight: 600; color: var(--ink, #111); }
.rmap-strip__metric { font-size: var(--fs-sm, .875rem); color: var(--gd-muted, #767676); }
.rmap-strip__metric b { color: var(--ink, #111); }
.rmap-strip__item--goal {
  background: linear-gradient(135deg, var(--navy-950, #0d0d0d), var(--navy-700, #2b2b2b));
  border-color: var(--navy-950, #0d0d0d);
}
.rmap-strip__item--goal .rmap-strip__year { color: var(--gd-teal-400, #1bdbdb); }
.rmap-strip__item--goal .rmap-strip__label { color: #fff; }
.rmap-strip__item--goal .rmap-strip__metric, .rmap-strip__item--goal .rmap-strip__metric b { color: #c7cede; }

/* ---- on a dark background ---- */
.tone-navy .rmap__card,
.tone-navy .rmap-strip__item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.tone-navy .rmap__body, .tone-navy .rmap__metric { color: #c7cede; }
.tone-navy .rmap__year { color: #fff; }
.tone-navy .rmap__item::before { box-shadow: 0 0 0 4px var(--navy-950, #0d0d0d); }
.tone-navy .rmap::before { background: linear-gradient(to bottom, rgba(255,255,255,.18), var(--gold-400, #1bdbdb)); }
.tone-navy .rmap__item--goal .rmap__card { background: rgba(255, 255, 255, .12); border-color: var(--gd-teal-400, #1bdbdb); }
.tone-navy .rmap-strip__item--goal { background: rgba(255, 255, 255, .16); }

/* ---- small screens ---- */
@media (max-width: 640px) {
  .rmap { gap: 1rem; }
  .rmap::before, .rmap__item::before { display: none; }
  .rmap__item { grid-template-columns: 1fr; gap: .4rem; }
  .rmap__year { text-align: start; padding-top: 0; }
  .rmap__item--goal .rmap__year { display: inline-block; padding: .3rem .9rem; }
  .rmap-strip__item::after { display: none; }
}
@media print {
  .rmap__card, .rmap-strip__item { box-shadow: none !important; break-inside: avoid; }
  .rmap__item { break-inside: avoid; }
}