/*
 * css/public.css - the few styles that belong to one public page (public pages A+B, 2026-10-13).
 * Everything reusable (bands, hero, cards, tab bar, accordion, call to action, form fields) lives in
 * css/landing.css under "Components"; use those first. Loaded after landing.css by ld_head($t, $d, array('css/public.css')).
 * Scoped under #ld like the rest of the guest styles.
 */

/* ---- tos.php: the shared Rules & Legal module (includes/legal/legal_page.php, css/legal.css) in the public chrome ----
 * The module is the same markup and the same stylesheet as the in-game page, so it looks the same. It is NOT put
 * inside a .ld-band: those bands recolour links, and the module has its own link colours. */
#ld .pp-legal { max-width: 1060px; margin: 0 auto; padding: 28px 20px 8px; }
#ld #mcl-legal { margin-bottom: 0; }
/* landing.css gives every svg in #ld an 18px outline style; the Rules cards draw their own icons (fill and stroke
 * set on their parts), so hand the svg back to the browser's defaults, as it is in the game. */
#ld #mcl-legal svg { stroke: initial; stroke-width: initial; stroke-linecap: initial; stroke-linejoin: initial; fill: initial; flex: initial; }
#ld .pp-legal-more { max-width: 1060px; margin: 0 auto; padding: 8px 20px 40px; }
#ld .pp-legal-more .ld-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
#ld .pp-legal-more a { color: var(--wire); font-weight: 600; }
#ld .pp-legal-more a:hover { text-decoration: underline; }

/* ---- about.php ---- */
#ld .pp-more { margin-top: 16px; }
#ld .pp-first { align-items: center; }
#ld .pp-vera img { aspect-ratio: 4 / 3; object-fit: contain; background: radial-gradient(70% 90% at 50% 100%, rgba(155,107,255,.18), transparent 75%), var(--ink); }
#ld .pp-narrow > p { color: var(--text); font-size: 16px; }

/* ---- faq.php ---- */
#ld .pp-narrow { max-width: 860px; margin: 0 auto; }
#ld .pp-faq-more { margin-top: 28px; }

/* ---- forgot_password.php, reset_password.php: one narrow form card ---- */
#ld .pp-formcard { padding: 24px; }
#ld .pp-formcard .ld-note { margin-top: 16px; }
#ld .pp-formcard .ld-note a { color: var(--wire); }
#ld .pp-formcard .ld-note a:hover { text-decoration: underline; }

/* ---- contact.php: the form beside a short "before you write" card ---- */
#ld .pp-contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
#ld .pp-contact .ld-card { padding: 24px; }
#ld .pp-contact h2 { margin-bottom: 14px; font: 600 22px/1.15 var(--head); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; }
#ld .pp-contact p { color: var(--muted); font-size: 14.5px; }
#ld .pp-contact p + p { margin-top: 10px; }
#ld .pp-contact a { color: var(--wire); }
#ld .pp-contact a:hover { text-decoration: underline; }
#ld .pp-contact .ld-btn { color: #140c00; }
#ld .pp-side ul + p { margin-top: 12px; }
#ld .pp-side ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
#ld .pp-side li { padding-left: 14px; position: relative; color: var(--text); font-size: 14.5px; }
#ld .pp-side li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

@media (max-width: 900px) {
  #ld .pp-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #ld .pp-legal { padding: 16px 0 4px; }          /* the module goes edge to edge on a phone (legal.css drops its corners) */
  #ld .pp-legal-more { padding: 8px 16px 32px; }
  #ld .pp-contact .ld-card { padding: 18px 16px; }
}