/* Lantern public site.

   Standalone by design: no Tailwind, no build step, no npm. This site is two
   static files served from the lanternportal.com apex, independent of the
   application deploy — that independence is the point (see README.md).

   The palette mirrors the @theme block in src/Lantern.Web/src/index.css. It is
   duplicated rather than imported because there is no build step to import
   through; if the product palette changes, change it here too. */

:root {
  color-scheme: dark;

  --ink: #17231b;
  --ink-raised: #1e2e24;
  --ink-sunken: #131d17;
  --parchment: #f4f0df;
  --flame: #ffc857;
  --sage: #9de0ad;

  --text-muted: rgb(244 240 223 / 0.74);
  --text-faint: rgb(244 240 223 / 0.56);
  --line: rgb(244 240 223 / 0.18);
  --line-strong: rgb(244 240 223 / 0.34);

  --measure: 34rem;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--parchment);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background-color: var(--ink-sunken);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--parchment);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand img {
  width: 28px;
  height: 28px;
  display: block;
}

.header-link {
  color: var(--flame);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.header-link:hover,
.header-link:focus-visible {
  text-decoration: underline;
}

/* ---------- type ---------- */

main {
  padding-block: 3.5rem 4rem;
}

h1 {
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 2.75rem 0 0.75rem;
}

h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

.lede {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

a {
  color: var(--flame);
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

strong {
  color: var(--parchment);
  font-weight: 650;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.5rem;
}

li::marker {
  color: var(--sage);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* ---------- promise list ---------- */

.promise {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.promise li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
}

.promise li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--sage);
}

/* ---------- postal address ---------- */

/* Deliberately quiet. The address has to be here — it is Robardsoft LLC's
   address of record, and A2P 10DLC vetting cross-references it against the IRS
   and Georgia SOS records — but it is a residence, so it is set as small muted
   type in the privacy policy's contact section and nowhere else. The apex page
   names the operator and the city, and links here for the rest. Do not promote
   it back into a bordered card or the homepage. */

.postal {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-faint);
  margin: 0 0 1.25rem;
}

/* ---------- tables ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9375rem;
}

th,
td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--text-muted);
  font-weight: 600;
  border-bottom-color: var(--line-strong);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background-color: var(--ink-sunken);
  color: var(--text-faint);
  font-size: 0.875rem;
}

.site-footer .wrap {
  padding-block: 1.75rem 2.25rem;
}

.site-footer p {
  margin: 0 0 0.4rem;
}

.site-footer a {
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

/* ---------- accessibility ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 0.85rem;
  background-color: var(--flame);
  color: var(--ink);
  border-radius: 0.4rem;
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}
