/* RideLink Community Guidelines — shared chrome for the hub and its pages.
   Extracted from the old single-page guidelines.html so six pages can't drift
   apart. Tokens are the site's existing ones, unchanged, so these pages sit
   next to privacy.html and terms.html without looking like a different site.

   Referenced as "guidelines.css" from the root hub and "../guidelines.css"
   from guidelines/*.html. Font and image URLs inside this file resolve
   against the file's own location (the site root), so they work from both. */

@font-face {
    font-family: 'Climate Crisis';
    src: url('ClimateCrisis.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #070708; --text: #e9e9ee; --text-dim: #d3d3da; --text-muted: #9a9aa3;
    --border: #1d1d22; --border2: #18181d; --gold: #F4C430; --head: rgba(7, 7, 8, .85);
    --nav: #cfcfd6; --surface: #121215;
    /* Non-text UI colours. Both clear WCAG 1.4.11 (3:1) against their page
       background, and the text drawn on them clears 1.4.3 (4.5:1). */
    --bad: #FF6B6B; --bad-bg: rgba(255, 107, 107, .09); --bad-line: rgba(255, 107, 107, .32);
    --good: #4ADE80; --good-bg: rgba(74, 222, 128, .08); --good-line: rgba(74, 222, 128, .30);
}
[data-theme="light"] {
    --bg: #f5f3f0; --text: #161616; --text-dim: #33312e; --text-muted: #6a6a6a;
    --border: rgba(0, 0, 0, 0.1); --border2: rgba(0, 0, 0, 0.07); --gold: #b8860b;
    --head: rgba(245, 243, 240, 0.92); --nav: #444; --surface: #ffffff;
    --bad: #B3261E; --bad-bg: rgba(179, 38, 30, .07); --bad-line: rgba(179, 38, 30, .25);
    --good: #15803D; --good-bg: rgba(21, 128, 61, .07); --good-line: rgba(21, 128, 61, .25);
}

body {
    background: var(--bg); color: var(--text);
    font-family: 'Inter', system-ui, sans-serif; line-height: 1.7;
    transition: background .2s, color .2s;
}
a { color: var(--gold); }

/* A visible keyboard focus ring. WCAG 2.2 SC 2.4.11 wants focus never lost,
   and the browser default ring disappears against the near-black page. */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* Skip link — the header is sticky and nav-heavy, so keyboard and screen
   reader users get a way past it. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; }
.skip:focus {
    left: 12px; top: 12px; background: var(--gold); color: #000;
    padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none;
}

header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--head); backdrop-filter: blur(8px); z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.wordmark {
    font-family: 'Climate Crisis', 'Poppins', sans-serif; font-weight: 400;
    color: var(--gold); font-size: 22px; line-height: 1;
}
.nav-wrap { display: flex; align-items: center; }
nav a { margin-left: 18px; color: var(--nav); text-decoration: none; font-weight: 600; font-size: 14px; }
nav a.cta { background: var(--gold); color: #000; padding: 8px 16px; border-radius: 10px; }
.theme-toggle-page {
    margin-left: 16px; width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--border); background: transparent; color: var(--text);
    cursor: pointer; font-size: 15px; line-height: 1;
}

main { max-width: 820px; margin: 0 auto; padding: 36px 22px 80px; }

.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); text-decoration: underline; }
.crumbs span { margin: 0 7px; }

h1 {
    font-family: 'Climate Crisis', 'Poppins', sans-serif; font-weight: 400; letter-spacing: 0;
    font-size: 34px; color: var(--text); line-height: 1.18; margin-bottom: 8px;
}
.sub { color: var(--text-muted); margin-bottom: 36px; font-size: 16px; }

.callout {
    background: rgba(244, 196, 48, 0.08); border: 1px solid rgba(244, 196, 48, 0.28);
    border-radius: 14px; padding: 18px; margin: 28px 0; color: var(--text-dim);
}
.callout strong { color: var(--text); }

article { margin: 42px 0; padding-bottom: 36px; border-bottom: 1px solid var(--border2); }
article:last-of-type { border-bottom: none; }
article h2 {
    font-family: 'Climate Crisis', 'Poppins', sans-serif; font-weight: 400; letter-spacing: 0;
    font-size: 24px; color: var(--text); line-height: 1.25; margin-bottom: 14px;
}
article h3 {
    font-family: 'Climate Crisis', 'Poppins', sans-serif; font-weight: 400; letter-spacing: 0;
    font-size: 18px; line-height: 1.3; color: var(--gold); margin: 24px 0 8px;
}
article p { margin: 12px 0; color: var(--text-dim); }
article ul, article ol { margin: 12px 0 12px 22px; color: var(--text-dim); }
article li { margin: 6px 0; }
article li strong { color: var(--text); }

/* Hub: the cards that lead to each guidelines page. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 26px 0 8px; }
.card {
    display: block; text-decoration: none; background: var(--surface);
    border: 1px solid var(--border); border-radius: 16px; padding: 20px;
    transition: border-color .15s, transform .15s;
}
.card:hover, .card:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.card h3 {
    font-family: 'Climate Crisis', 'Poppins', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 1.3; color: var(--text); margin: 0 0 6px;
}
.card p { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0; }
.card .card-more { display: block; margin-top: 12px; color: var(--gold); font-size: 13px; font-weight: 700; }

/* One rule, stated the way the platforms that do this well state it: what the
   rule is, then what actually happens if you break it. */
.rule { border-left: 3px solid var(--border); padding: 4px 0 4px 16px; margin: 22px 0; }
.rule h3 { margin-top: 0; }
.rule .consequence {
    display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700;
    color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}

.box { border-radius: 14px; padding: 16px 18px; margin: 18px 0; border: 1px solid var(--border); }
.box h4 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; font-weight: 800; }
.box p, .box ul { margin: 8px 0; color: var(--text-dim); }
.box ul { margin-left: 20px; }
.box.no { background: var(--bad-bg); border-color: var(--bad-line); }
.box.no h4 { color: var(--bad); }
.box.yes { background: var(--good-bg); border-color: var(--good-line); }
.box.yes h4 { color: var(--good); }

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
caption { text-align: left; color: var(--text-muted); font-size: 13px; padding-bottom: 8px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-dim); }
th { color: var(--text); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: none; }
.scroll-x { overflow-x: auto; }

/* Listing checklist — the thing a seller is meant to copy. */
.checklist { list-style: none; margin-left: 0; }
.checklist li { position: relative; padding-left: 28px; margin: 10px 0; }
.checklist li::before {
    content: ""; position: absolute; left: 4px; top: 8px;
    width: 9px; height: 9px; border-radius: 2px; border: 2px solid var(--gold);
}

.pagenav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); }
.pagenav a { text-decoration: none; font-weight: 700; font-size: 14px; }

footer { border-top: 1px solid var(--border); padding: 28px 22px; text-align: center; color: var(--text-muted); font-size: 13px; }
footer a { color: var(--text-muted); margin: 0 8px; }

@media (max-width: 640px) {
    header { padding: 14px 16px; }
    nav a { margin-left: 12px; font-size: 13px; }
    main { padding: 28px 16px 64px; }
    h1 { font-size: 27px; }
    article h2 { font-size: 21px; }
}

/* Honour the OS "reduce motion" setting — WCAG 2.3.3 / the same preference the
   app reads through Reanimated. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .card:hover, .card:focus-visible { transform: none; }
}