/* Shared by index.html, privacy.html and terms.html (since v0.10.0): the analytics consent box
   and the footer. Linked after each page's own <style>, so these rules win ties. Contrast is
   measured by tests/site/check-pages.mjs. */

/* Consent box. Shown only while <html> has .consent-pending, which js/consent.js sets in the
   head before the body draws, so the box is in place from the first paint and never shifts
   the page later. Accept and Decline look alike on purpose: neither is the "easy" button. */
.consent {
    display: none;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    background: #f5f5f5;
    color: #000;
    font-size: 0.95rem;
    line-height: 1.5;
}
.consent-pending .consent { display: block; }
.consent p { margin: 0 0 12px; }
.consent a { color: #000; text-decoration: underline; }
.consent-gpc-note { display: none; }
.consent-gpc .consent-gpc-note { display: block; }
.consent-gpc #consent-accept { display: none; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.consent-actions button {
    min-width: 110px;
    padding: 8px 22px;
    border: 2px solid #000;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}
.consent-actions button:hover { background: #ffe1cc; }
.consent-actions button:focus-visible,
.consent a:focus-visible { outline: 3px solid #ff6700; outline-offset: 2px; }

/* Footer: links never underline, not even on hover. They stand apart from the footer text by
   contrast (3:1 or more), get a tint on hover and an outline on keyboard focus. */
footer { color: #666; }
footer a,
footer .link-button {
    padding: 1px 3px;
    border-radius: 3px;
    color: #000;
    text-decoration: none;
}
footer a:hover,
footer a:focus,
footer .link-button:hover {
    background: rgba(255, 103, 0, 0.15);
    text-decoration: none;
}
footer a:focus-visible,
footer .link-button:focus-visible { outline: 2px solid #ff6700; outline-offset: 1px; }
footer .link-button {
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}
footer .aws-logo-wrapper a { display: inline-block; padding: 0; }

@media (prefers-color-scheme: dark) {
    .consent { background: #1e1e1e; border-color: #555; color: #fff; }
    .consent a { color: #fff; }
    .consent-actions button { background: #121212; border-color: #fff; color: #fff; }
    .consent-actions button:hover { background: #3a2414; }
    footer { color: #808080; }
    footer a,
    footer .link-button { color: #fff; }
    footer a:hover,
    footer a:focus,
    footer .link-button:hover { background: rgba(255, 103, 0, 0.25); }
}

/* privacy.html: the cookie table, which may wrap on a phone but never scrolls sideways */
.cookie-table { width: 100%; margin: 0 0 15px; border-collapse: collapse; font-size: 0.95em; }
.cookie-table th,
.cookie-table td { padding: 8px 10px; border: 1px solid #c4c4c4; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) {
    .cookie-table th,
    .cookie-table td { border-color: #555; }
}