/*
 * efr-legal — the shared legal pages.
 * efr-home's stylesheet, trimmed to what an imprint uses. The token block, the
 * reset, the shell and the .legal rules are the same lines as
 * efr-home/frontend/public/css/style.css, so a page served under someone
 * else's hostname still reads as part of the same system. Everything the
 * directory needed and a legal page does not — sidebar, service tiles, search,
 * buttons, forms, badges — is gone.
 *
 * The token block is kept whole even where a token is unused here, so it stays
 * a straight diff against efr-home's rather than a subset somebody has to
 * reconcile by eye.
 */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Surfaces — pure black/gray, no blue tint */
  --bg:   #0a0a0a;
  --s1:   #111111;   /* sidebar */
  --s2:   #161616;   /* card */
  --s3:   #1c1c1c;   /* elevated / hover */
  --s4:   #222222;   /* input, deepest */

  /* Borders */
  --b1: rgba(255,255,255,0.06);
  --b2: rgba(255,255,255,0.09);
  --b3: rgba(255,255,255,0.15);

  /* Text */
  --t1: #f0f0f0;
  --t2: #888888;
  --t3: #505050;

  /* Accent */
  --orange:     #ff630f;
  --orange-dim: #c44e0b;
  --orange-bg:  rgba(255,99,15,0.08);
  --orange-glow:rgba(255,99,15,0.18);

  /* Semantic */
  --danger: #ef4444;
  --ok:     #22c55e;
  --info:   #3b82f6;
  --warn:   #f59e0b;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  /* Shadows */
  --sh1: 0 1px 3px rgba(0,0,0,.4);
  --sh2: 0 4px 16px rgba(0,0,0,.5);
  --sh3: 0 10px 36px rgba(0,0,0,.6);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--t1);
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--t1);
  line-height: 1.2;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }

/* ─── APP SHELL ──────────────────────────────────────────── */
/* Kept even with nothing beside the content column: it is what puts the same
   padding and the same max width around this page as around efr-home's. */
.app-shell {
  display: flex;
  min-height: 100vh;
  max-width: 100%;
}
.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  min-width: 0;
  padding: 2rem 2.25rem;
  max-width: 1400px;
  width: 100%;
}

/* ─── PAGE HEADER ────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 { line-height: 1.15; }
.page-header h1 .accent { color: var(--orange); }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fade-in 0.2s ease; }

/* ─── LEGAL PAGE ─────────────────────────────────────────── */
/* There is no sidebar here, so the shell's reserved column comes off and the
   single column centres in the window. */
.legal-page .app-shell { justify-content: center; }
/* No prose measure here by choice: the legal text runs the full content column
   and wraps only at the padding, so long clauses stay in as few lines as the
   window allows. The .content 1400px cap comes off too, or the text would stop
   short of the edge on a wide display. */
.legal-page .content { max-width: none; }
.legal { max-width: none; }
.legal-back {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--t2);
  margin-bottom: 1.5rem;
  padding: 0.35rem 0;
  transition: color 0.15s;
}
.legal-back:hover { color: var(--orange); }
.legal-block { margin-bottom: 1.75rem; }
.legal-block:last-child { margin-bottom: 0; }
.legal-block h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
/* Numbered subheadings inside a block (the disclaimer's 1..5). The top margin
   is what separates them — it lands between the previous paragraph and the
   next heading, so each clause reads as its own unit instead of one wall. */
.legal-block h3 {
  font-size: 0.9rem;
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
}
/* …except the first one, which follows its own <h2> and needs a gap, not a gulf. */
.legal-block h2 + h3 { margin-top: 0.9rem; }
.legal-block p {
  color: var(--t2);
  font-size: 0.9rem;
  /* Address blocks are written with <br>, so the line box has to hold up on
     its own without paragraph spacing between the lines. */
  line-height: 1.65;
}
.legal-block p + p { margin-top: 0.75rem; }
.legal-block a { color: var(--t2); text-decoration: underline; text-underline-offset: 2px; }
.legal-block a:hover { color: var(--orange); }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .content { padding: 1.5rem 1.25rem; }
}

@media (max-width: 768px) {
  .content { padding: 1rem 0.85rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; }
}

@media (max-width: 560px) {
  .page-header { margin-bottom: 1rem; }
}

/* iPhones in landscape put the home indicator and the notch inside the
   viewport (viewport-fit=cover in the markup), so the column keeps its own
   clear space rather than running a line of the address under the rounded
   corner. */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 768px) {
    .content {
      padding-left: max(0.85rem, env(safe-area-inset-left));
      padding-right: max(0.85rem, env(safe-area-inset-right));
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
  }
}

/* Somebody who has asked their phone to stop animating things means it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}