/* ==========================================================================
   Atlas of Wales — policy page styles

   Shared by pages/privacy.html and pages/contact.html. Standalone editorial
   pages: no framework, no JavaScript, no third-party font, no external request.

   Palette and typography follow the canonical location-page tokens (deep green
   ground, warm gold accent, cream text, serif headings) so a policy page reads
   as part of the Atlas rather than a bolted-on legal document. Tokens are
   declared here rather than inherited, because these pages load no other
   stylesheet.
   ========================================================================== */

:root {
    color-scheme: dark;
    --ink: #1a2c21;
    --night: #20372c;
    --gold: #e3c47e;
    --gold-warm: #edb05a;
    --cream: #f8efd8;
    --muted: rgba(250, 241, 218, 0.82);
    --quiet: rgba(250, 241, 218, 0.56);
    --faint: rgba(250, 241, 218, 0.1);
    --border: rgba(228, 196, 122, 0.28);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: linear-gradient(180deg, #1a2c21 0%, var(--night) 46%, #233c2c 100%);
    background-attachment: fixed;
    color: var(--cream);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-text-size-adjust: 100%;
}

/* ---- skip link ---------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    padding: 10px 16px;
    background: var(--gold);
    color: #22301f;
    border-radius: 6px;
    font-weight: 600;
}

/* ---- header ------------------------------------------------------------- */

.policy-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--faint);
}

.policy-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    width: min(820px, 100%);
    margin: 0 auto;
}

.policy-header__brand {
    color: var(--cream);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.policy-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 0.86rem;
}

.policy-header__nav a { color: var(--quiet); text-decoration: none; }
.policy-header__nav a:hover { color: var(--cream); }
.policy-header__nav a[aria-current="page"] { color: var(--gold); }

/* ---- layout ------------------------------------------------------------- */

.policy-main {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 40px 22px 64px;
}

.policy-masthead { margin-bottom: 34px; }

.policy-masthead__eyebrow {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.9rem, 5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0.005em;
}

.policy-masthead__standfirst {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 1.05rem;
}

.policy-meta {
    margin: 0;
    color: var(--quiet);
    font-size: 0.84rem;
}

.policy-meta__note {
    display: block;
    margin-top: 6px;
}

/* ---- sections ----------------------------------------------------------- */

.policy-section {
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid var(--faint);
}

h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.34rem;
    font-weight: 600;
    line-height: 1.3;
}

h3 {
    margin: 22px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gold-warm);
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }
li:last-child { margin-bottom: 0; }

strong { color: var(--cream); font-weight: 600; }

a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:hover { color: var(--gold-warm); }

a:focus-visible,
.policy-header__nav a:focus-visible,
.policy-footer a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- callout ------------------------------------------------------------ */

.policy-callout {
    margin: 0 0 22px;
    padding: 18px 20px;
    background: rgba(250, 241, 218, 0.035);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.policy-callout__label {
    display: block;
    margin-bottom: 6px;
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* Contact address: one place per page, easy to find and easy to change. */
.policy-contact {
    margin: 0;
    font-size: 1.06rem;
    word-break: break-word;
}

/* ---- definition-style rows ---------------------------------------------- */

.policy-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.policy-list > li {
    padding: 12px 0;
    border-bottom: 1px solid var(--faint);
}

.policy-list > li:last-child { border-bottom: 0; }

.policy-list__term {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
}

.policy-list__detail {
    display: block;
    color: var(--muted);
    font-size: 0.94rem;
}

/* ---- footer ------------------------------------------------------------- */

.policy-footer {
    padding: 26px 22px 34px;
    border-top: 1px solid var(--faint);
}

.policy-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    width: min(820px, 100%);
    margin: 0 auto;
    color: var(--quiet);
    font-size: 0.78rem;
}

.policy-footer__inner > * + *::before {
    content: "·";
    margin-right: 14px;
    color: rgba(250, 241, 218, 0.24);
}

.policy-footer a { color: rgba(250, 241, 218, 0.5); text-decoration: none; }
.policy-footer a:hover { color: rgba(250, 241, 218, 0.85); }

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    a, .policy-header__nav a, .policy-footer a { transition: color 0.2s ease; }
}

/* ---- narrow screens ----------------------------------------------------- */

@media (max-width: 480px) {
    body { font-size: 16px; }
    .policy-main { padding: 30px 18px 52px; }
    .policy-header { padding: 14px 18px; }
    .policy-callout { padding: 16px; }
}