/* legal.css - the shared skin for the four STATIC pages in client/public:
   privacy.html, terms.html, support.html, inquiries.html.

   WHY this file exists: those four pages each carried their own copy of this whole block
   inline. The copies were byte-identical, so every accessibility fix (the skip link, the
   #c1121f link colour, the main landmark ring, the .cta contrast fix below) had to be made
   four times and would drift the first time someone edited only the page they were looking
   at. One stylesheet, four <link>s, one place to fix.

   WHY a plain absolute href and not a Vite import: Cloudflare Pages serves these files as-is
   from client/public. Nothing bundles them, there is no hashed asset name to import, and the
   pages are reachable at both /privacy and /privacy.html, so the link has to be the
   root-absolute "/legal.css" to resolve the same from every URL shape.

   Page-specific rules stay in each page's own <style> AFTER this link, so they win on
   equal specificity. Only rules that more than one page shares belong here. */

/* Bangers, self-hosted (see /fonts + client/src/index.css). An @import here blocked the
   page render on two cross-origin round trips, so the face is declared locally. It now
   costs one same-origin stylesheet hop before the font is discovered; font-display: swap
   means text paints in the fallback stack immediately either way. */
@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/bangers-v25-latin.woff2') format('woff2'); }
* { box-sizing: border-box; }
body { margin: 0; background: #07070d; color: #f4f4f4;
  font: 16px/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.6px);
  background-size: 18px 18px; }
.wrap { max-width: 800px; margin: 0 auto; padding: 26px 16px 64px; }
/* Skip link: parked off-screen with the clip technique, never display:none or
   visibility:hidden, so it stays in the accessibility tree and reachable by Tab. */
.skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 999; width: auto; height: auto;
  margin: 0; padding: 10px 16px; overflow: visible; clip: auto; clip-path: none;
  font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  text-decoration: none; color: #07070d; background: #ffd23f; border: 2.5px solid #07070d;
  border-radius: 9px; box-shadow: 3px 3px 0 #07070d; outline: 3px solid #fff;
  outline-offset: 2px; }
main { display: block; }
#lac-main:focus { outline: 3px solid #ffd23f; outline-offset: 4px; }
.topnav { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 26px; }
.wordmark { font-family: 'Bangers', Impact, 'Arial Narrow', sans-serif; font-weight: 400;
  font-size: 34px; letter-spacing: 1.5px; transform: skewX(-6deg); color: #ffd23f;
  -webkit-text-stroke: 2px #07070d; text-shadow: 3px 3px 0 #e63946, 5px 5px 0 rgba(0,0,0,0.35);
  margin: 0; line-height: 1; text-decoration: none; display: inline-block; }
.topnav nav a { color: #ffd23f; font-weight: 800; font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase; text-decoration: none; margin-left: 16px; }
.topnav nav a:hover { text-decoration: underline; }
.panel { background: #fff; color: #111; border: 3px solid #07070d; border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.55); padding: 30px 32px 36px; }
/* "Effective <date>" chip. Used by privacy.html and terms.html only, but shared by both,
   so it lives here rather than being pasted into each. */
.pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: #0a0a12; background: #ffd23f;
  padding: 5px 11px; border-radius: 999px; border: 2px solid #07070d;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4); margin-bottom: 14px; }
h1 { font-family: 'Bangers', Impact, sans-serif; font-weight: 400; font-size: 38px;
  letter-spacing: 1px; color: #e63946; margin: 0 0 6px; line-height: 1.05; }
h2 { font-family: 'Bangers', Impact, sans-serif; font-weight: 400; font-size: 23px;
  letter-spacing: 0.8px; color: #07070d; margin: 34px 0 10px; display: table;
  border-bottom: 4px solid #ffd23f; padding-bottom: 2px; }
p, li { color: #222; }
ul { padding-left: 22px; margin: 10px 0; }
li { margin: 6px 0; }
a { color: #c1121f; font-weight: 700; }
.panel strong { color: #07070d; }
/* Contact button (support.html and inquiries.html).

   CONTRAST: the label is 20px Bangers at weight 400, which is NORMAL text under WCAG (large
   text starts at 24px for non-bold faces), so it owes 4.5:1 against every part of its
   background, and on a gradient the WORST stop is the one that counts. The old
   #ff5566 -> #e63946 ramp put white at 3.11:1 on the top stop and 4.17:1 on the bottom, so
   the button failed over its whole height. axe never flagged it because it reports a
   gradient background as "incomplete" rather than a violation.

   The ramp is now #d21b28 -> #b3121f: white measures 5.35:1 and 6.95:1 by the WCAG relative
   luminance formula, so the worst stop clears 4.5:1 with room to spare. Both stops sit in
   the same brand-red family as the #c1121f link colour these pages already use (6.22:1), so
   the button still reads as the pop-art red, just a shade deeper. The drop glow follows the
   new bottom stop; the #7c1620 lip is unchanged and still darker than either stop. */
.cta { display: inline-block; font-family: 'Bangers', Impact, sans-serif; font-weight: 400;
  letter-spacing: 1px; font-size: 20px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #d21b28, #b3121f); border: 2.5px solid #07070d;
  border-radius: 10px; padding: 10px 22px; margin: 10px 0 4px;
  box-shadow: 0 4px 0 #7c1620, 0 8px 16px rgba(179,18,31,0.32); }
.cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #7c1620; }
/* click-to-copy address */
.copyrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px 0 2px; }
.copy { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; background: #fff7d6;
  border: 2.5px solid #07070d; border-radius: 9px; padding: 9px 15px; font: inherit; font-weight: 800;
  color: #07070d; letter-spacing: .2px; box-shadow: 3px 3px 0 #07070d; word-break: break-all; }
.copy:hover { background: #ffe066; }
.copy:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #07070d; }
.copy svg { width: 15px; height: 15px; opacity: .7; flex: none; }
.copied { color: #1f7a3d; font-weight: 800; margin-left: 12px; opacity: 0; transition: opacity .15s; }
.copied.show { opacity: 1; }
.copyhint { display: block; color: #667; font-size: 12.5px; margin-top: 6px; }
footer { text-align: center; color: #99a; font-size: 13px; margin-top: 30px; }
footer a { color: #ffd23f; font-weight: 700; text-decoration: none; margin: 0 8px; }
footer a:hover { text-decoration: underline; }
@media (max-width: 520px) { .panel { padding: 22px 18px 28px; } h1 { font-size: 32px; } }