/* ===================================================================
   Vigil28 shared theme — ONE copy for vigil28.eu and app.vigil28.eu.

   This repository (vigil28-web) is the source of truth. vigil28-app
   carries a synced copy (scripts/sync-shared.sh there); after editing any
   file under static/shared/ or templates/shared/, run `make shared-sums`
   and commit shared.sha256 — CI fails on a mismatch in either repository.

   Only what both sites share lives here: design tokens, the header shell
   (logo, nav, mobile toggle), the footer and its trust badges. Each site
   keeps its own base typography and components in its own stylesheet,
   loaded after this one.
   Palette: deep navy (authority), slate (calm), muted gold (prestige).
   =================================================================== */
:root {
  --navy: #0A2540;
  --navy-deep: #071B2F;
  --slate: #3B6EA5;
  --slate-bg: #EAF0F7;
  --gold: #C5A572;
  --gold-light: #D4B985;
  --bg: #F7F8FA;
  --card: #FFFFFF;
  --ink: #1E2A38;
  --ink-soft: #55616E;
  --line: #D9DEE5;
  --green: #1F6F4A;
  --green-bg: #E8F3ED;
  --amber: #B8732A;
  --amber-bg: #FBF3E8;
  --red: #A93A2F;
  --red-bg: #FBEDEB;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 4px;
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.container { width: min(1080px, 92vw); margin: 0 auto; }

/* --- Header ----------------------------------------------------------
   Sized on its own, like the footer, so it is identical under either
   site's base styles. Public: Home · Pricing … Log in, Start free. */
.site-header {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  background: #fff;
  border-bottom: 3px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.brand:hover { color: var(--navy); text-decoration: none; }
.brand em { color: var(--gold); font-style: normal; }

.site-nav { display: flex; align-items: center; gap: 1.4rem; flex: 1; }
.site-nav .spacer { flex: 1; }
.site-nav a { color: var(--ink-soft); font-weight: 500; text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--navy); text-decoration: none; }
.site-nav a[aria-current="page"]:not(.nav-cta) { box-shadow: 0 2px 0 var(--gold); }
.site-nav .nav-cta {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 3px;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-nav .nav-cta:hover { background: var(--gold-light); color: var(--navy-deep); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); }

/* --- Trust badges ----------------------------------------------------- */
.trust-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.trust-badges li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  padding: 0.3rem 0.8rem;
}

/* --- Footer ------------------------------------------------------------
   Sized and reset on its own, so it looks the same under either site's
   base styles. */
.site-footer {
  background: var(--navy-deep);
  color: #A9B7C4;
  padding: 3rem 0 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.site-footer p, .site-footer ul, .site-footer h3 { margin: 0; padding: 0; }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  /* five columns on a desktop */
  padding-bottom: 2rem;
}
.footer-brand { font-family: var(--serif); font-size: 1.3rem; color: #fff; font-weight: 700; }
.footer-brand em { color: var(--gold); font-style: normal; }
.site-footer .footer-tag { margin: 0.5rem 0 1rem; max-width: 22rem; }
.site-footer h3 {
  font-family: var(--serif);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}
.site-footer a { color: #A9B7C4; text-decoration: none; display: block; padding: 0.2rem 0; }
.site-footer a:hover { color: var(--gold); text-decoration: none; }
.site-footer .trust-badges li {
  background: none;
  border-color: rgba(255, 255, 255, 0.25);
  color: #A9B7C4;
}
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 1.2rem 0; font-size: 0.9rem; }

/* --- Mobile: the nav folds behind the toggle ----------------------------- */
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 3px solid var(--gold);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 4vw 1.4rem;
    gap: 1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav .spacer { display: none; }
  .site-nav .nav-cta { margin-top: 0.4rem; }
}