/* ==========================================================================
   ERA Coach — public site
   Every colour is a token in :root. These are the design template's
   placeholders; the mark itself is a red roof over a navy wordmark, so swap
   these for the official ERA values when the brand pack arrives and nothing
   else needs touching.
   ========================================================================== */

:root {
  --era-primary: #0b3d91;
  --era-primary-dark: #082c6b;
  --era-primary-tint: #eef2fa;
  --era-accent: #d6001c;
  --era-ink: #1a1a1a;
  --era-muted: #5c6470;
  --era-surface: #ffffff;
  --era-surface-alt: #f5f6f8;
  --era-border: #e2e5ea;
  --era-radius: 8px;

  /* Every stack ends in a Cyrillic-capable family: the site names Bulgarian and
     the RFI form accepts Cyrillic and Czech input. */
  --era-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans", sans-serif;
}

body {
  font-family: var(--era-font);
  color: var(--era-ink);
  background: var(--era-surface);
  -webkit-font-smoothing: antialiased;
}

/* Anchor links must not slide content under the sticky header. */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.era-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--era-border);
}

.era-brandmark { display: flex; flex-direction: column; line-height: 1.15; }

.era-eyebrow {
  color: var(--era-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The attribution now sits beside the ERA mark rather than under it, since it
   is its own link and cannot be nested inside the logo's anchor. Kept well below
   the product name in weight: an attribution that competes with the client's own
   name is not co-branding, it is a second logo. */
.era-poweredby-link {
  color: var(--era-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-left: 1px solid var(--era-border);
  padding-left: 0.625rem;
  white-space: nowrap;
}

.era-poweredby-link:hover,
.era-poweredby-link:focus-visible {
  color: var(--era-primary-dark);
  text-decoration: underline;
}

/* In the footer it is inline in a sentence, so the divider would be wrong. */
.era-footer .era-poweredby-link {
  border-left: 0;
  padding-left: 0;
}

/* On a narrow screen the divider and the attribution crowd the mark; the ERA
   name alone still identifies the page, and the footer link remains. */
@media (max-width: 575.98px) {
  .era-nav .era-poweredby-link { display: none; }
}

.era-navlink {
  color: var(--era-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.era-navlink:hover { color: var(--era-primary-dark); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.era-btn-primary {
  background: var(--era-primary);
  border: 1px solid var(--era-primary);
  color: #fff;
  font-weight: 500;
  border-radius: var(--era-radius);
  padding: 0.5rem 1.25rem;
}
.era-btn-primary:hover,
.era-btn-primary:focus { background: var(--era-primary-dark); border-color: var(--era-primary-dark); color: #fff; }

.era-btn-lg { padding: 0.75rem 2rem; font-size: 1.0625rem; }
.era-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; }

/* Outlined rather than filled. Two solid buttons side by side read as two equal
   choices, and they are not: almost everyone arriving here needs to ask for
   access, not sign in. */
.era-btn-secondary {
  background: transparent;
  border: 1px solid var(--era-border);
  color: var(--era-ink);
  font-weight: 500;
  border-radius: var(--era-radius);
  padding: 0.5rem 1.25rem;
}
.era-btn-secondary:hover,
.era-btn-secondary:focus {
  background: var(--era-surface-alt);
  border-color: var(--era-primary);
  color: var(--era-primary-dark);
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.era-hero { padding: 5rem 0 4rem; background: linear-gradient(180deg, var(--era-primary-tint), var(--era-surface)); }
.era-section { padding: 5rem 0; }
.era-section-alt { background: var(--era-surface-alt); }

.era-h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 1.25rem;
}

.era-h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 1rem;
}

.era-h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }
.era-h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.5rem; }

.era-lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--era-muted);
  text-wrap: pretty;
  margin-bottom: 1rem;
}
.era-lede-sub { font-size: 1rem; color: var(--era-muted); margin-bottom: 2rem; }

.era-body { line-height: 1.7; color: var(--era-muted); text-wrap: pretty; }
.era-body-sm { font-size: 0.9375rem; line-height: 1.6; color: var(--era-muted); margin-bottom: 0; }

.era-eyebrow-lg {
  color: var(--era-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* ── Cards, steps, lists ────────────────────────────────────────────────── */
.era-card {
  background: var(--era-surface);
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius);
  padding: 2rem;
}

.era-list { padding-left: 1.15rem; margin: 0; color: var(--era-muted); line-height: 1.8; }
.era-list li::marker { color: var(--era-primary); }

.era-step { height: 100%; }

.era-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--era-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--era-primary);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.18);
}

.era-optional { color: var(--era-muted); font-weight: 400; }
.era-fineprint { font-size: 0.8125rem; color: var(--era-muted); }

/* Honeypot. Off-screen rather than display:none — some bots skip anything
   hidden outright, and this needs to look fillable to them. Never to a person:
   aria-hidden on the wrapper and tabindex="-1" keep it out of the a11y tree and
   out of the tab order. */
.era-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.era-done { text-align: center; padding: 1rem 0; }

.era-alert {
  margin-top: 1rem;
  border: 1px solid var(--era-border);
  border-left: 3px solid var(--era-accent);
  border-radius: var(--era-radius);
  background: var(--era-surface);
  color: var(--era-ink);
  padding: 0.75rem 1rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.era-footer { border-top: 1px solid var(--era-border); background: var(--era-surface); }