/**
 * Layout and components.
 *
 * Reads tokens.css for every value. If you find yourself typing a hex
 * colour or a pixel size in this file, it belongs in tokens.css
 * instead — that is the whole point of the split.
 *
 * Structure, top to bottom:
 *   1. Base and reset
 *   2. Typography primitives
 *   3. Layout containers
 *   4. Buttons and links
 *   5. Images: the arch and the circle
 *   6. Site header and navigation
 *   7. Hero
 *   8. Sections and cards
 *   9. Prose (Gutenberg output)
 *  10. Form
 *  11. Footer
 *  12. Accessibility and motion
 */

/* ============================================================
   1. Base and reset
   ============================================================ */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: inherit; }

body {
    margin: 0;
    background: var(--dk-bg);
    color: var(--dk-fg);
    font-family: var(--dk-font-body);
    font-size: var(--dk-size-body);
    line-height: var(--dk-leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ============================================================
   2. Typography primitives
   ============================================================ */

h1, h2, h3, h4 {
    font-family: var(--dk-font-display);
    font-weight: 800;
    line-height: var(--dk-leading-tight);
    /* Playfair sets tight by default at display sizes; a touch of
       negative tracking keeps the big headings from looking loose. */
    letter-spacing: -0.015em;
    margin: 0 0 var(--dk-space-3);
    text-wrap: balance;
}

h1 { font-size: var(--dk-size-h1); }
h2 { font-size: var(--dk-size-h2); }
h3 { font-size: var(--dk-size-h3); font-weight: 700; }

p { margin: 0 0 var(--dk-space-3); }
p:last-child { margin-bottom: 0; }

/* The small letter-spaced label above a heading. Sans, not serif —
   it is a signpost, not a title. */
.dk-eyebrow {
    font-family: var(--dk-font-body);
    font-size: var(--dk-size-eyebrow);
    font-weight: 500;
    letter-spacing: var(--dk-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--dk-fg-muted);
    margin: 0 0 var(--dk-space-2);
}

.dk-lead {
    font-size: var(--dk-size-lead);
    color: var(--dk-fg-muted);
    max-width: var(--dk-max-text);
}

/* ============================================================
   3. Layout containers
   ============================================================ */

.dk-shell {
    width: 100%;
    max-width: var(--dk-max-page);
    margin-inline: auto;
    padding-inline: var(--dk-gutter);
}

.dk-shell--narrow { max-width: var(--dk-max-narrow); }

.dk-section { padding-block: var(--dk-section-y); }

/* Centred column used by the hero and by any section that reads as a
   statement rather than a list. */
.dk-center {
    text-align: center;
    margin-inline: auto;
}
.dk-center .dk-lead { margin-inline: auto; }

/* Image beside text. Collapses to a single column below 860px —
   container queries would be tidier but this is a page-level layout,
   so the viewport is the right thing to ask about. */
.dk-split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* Top-aligned variant. Centring is right when both columns are about
   the same height, and wrong when one is a long form and the other two
   sentences — there the short column floats in the middle of its own
   emptiness with no relationship to anything. */
.dk-split--top { align-items: start; }

@media (min-width: 860px) {
    .dk-split { grid-template-columns: 1fr 1fr; }
    /* Puts the image on the right visually while keeping it first in
       the DOM, so a screen reader meets the heading first. */
    .dk-split--flip > :first-child { order: 2; }
}

/* ============================================================
   4. Buttons and links
   ============================================================ */

a {
    color: inherit;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: opacity var(--dk-transition);
}

a:hover { opacity: 0.7; }

/* The pill button from the Alta Loma template: outline, generous
   padding, fully rounded ends. Outline rather than solid is the
   default because the page is already warm and low-contrast; a solid
   block would shout. */
.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dk-space-1);
    padding: 0.9em 2.2em;
    border: 1.5px solid var(--dk-fg);
    border-radius: var(--dk-radius-pill);
    background: transparent;
    color: var(--dk-fg);
    font-family: var(--dk-font-body);
    font-size: var(--dk-size-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dk-transition), color var(--dk-transition), opacity var(--dk-transition);
}

.dk-btn:hover {
    background: var(--dk-fg);
    color: var(--dk-bg);
    opacity: 1;
}

/* Solid variant — one per page at most, for the single action that
   matters (Kom med!). */
.dk-btn--solid {
    background: var(--dk-fg);
    color: var(--dk-bg);
}
.dk-btn--solid:hover {
    background: transparent;
    color: var(--dk-fg);
}

/* Text link that behaves like a button in the reading flow. */
.dk-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* ============================================================
   5. Images: the arch and the circle
   ============================================================ */

/* Both shapes clip whatever is inside, so a portrait shot and a
   landscape shot end up the same shape. object-fit does the cropping;
   object-position defaults to centre, which suits portraits taken at
   head height. Adjust per-image in the ACF field if a face gets cut. */
.dk-arch,
.dk-round {
    overflow: hidden;
    background: var(--dk-bg-raised);
}

.dk-arch { border-radius: var(--dk-arch); }
.dk-round { border-radius: var(--dk-round); aspect-ratio: 1; }

.dk-arch img,
.dk-round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Portrait arch: tall, the proportion the template uses. */
.dk-arch--portrait { aspect-ratio: 3 / 4; }
/* Wide arch for landscape photography and theme cards. 3:2 rather than
   4:3 — at 4:3 three cards side by side took up most of a laptop screen
   on their own and the titles under them fell below the fold. */
.dk-arch--wide { aspect-ratio: 3 / 2; }

/* ============================================================
   6. Site header and navigation
   ============================================================ */

.dk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--dk-bg);
    border-bottom: 1px solid var(--dk-line);
}

.dk-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dk-space-3);
    min-height: 72px;
}

/* Her name and the party mark, read as one unit at the left end of the
   bar. min-width: 0 so the pair can shrink rather than pushing the
   navigation off a narrow screen. */
.dk-lockup {
    display: flex;
    align-items: center;
    gap: var(--dk-space-2);
    min-width: 0;
}

/* 28px, not less: below that the two-line "Vihreät / De Gröna" under
   the symbol stops being readable and the mark turns into a smudge. */
.dk-partylogo {
    height: 28px;
    width: auto;
    flex: none;
    padding-left: var(--dk-space-2);
    border-left: 1px solid var(--dk-line);
}

@media (max-width: 820px) {
    .dk-partylogo { height: 22px; }
}

/* The wordmark. Serif, because it is the closest thing the site has
   to a logo — the template used the same treatment for "Alta Loma". */
.dk-wordmark {
    font-family: var(--dk-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.dk-nav {
    display: flex;
    align-items: center;
    gap: var(--dk-space-3);
}

.dk-menu {
    display: flex;
    align-items: center;
    gap: var(--dk-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-menu a {
    font-size: var(--dk-size-small);
    font-weight: 500;
    text-decoration: none;
}

/* Current page gets a rule under it rather than a colour change —
   the palette has only one foreground colour to work with. */
.dk-menu .current-menu-item > a,
.dk-menu .current_page_item > a {
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 2px;
}

/* Language switcher. Rendered by Polylang as a plain <ul>; styled
   here as FI / SV separated by a hairline. */
.dk-lang {
    display: flex;
    align-items: center;
    gap: var(--dk-space-1);
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--dk-space-3);
    border-left: 1px solid var(--dk-line);
}

.dk-lang li { display: flex; }

.dk-lang a {
    font-size: var(--dk-size-eyebrow);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.3em 0.5em;
    border-radius: var(--dk-radius-pill);
}

.dk-lang .current-lang a {
    background: var(--dk-fg);
    color: var(--dk-bg);
}

/* Donate. The only solid element in the bar, because it is the only one
   asking for something. Sits after the language switcher: it leaves the
   site, so it does not belong among the navigation. */
.dk-donate {
    display: inline-flex;
    align-items: center;
    padding: 0.6em 1.5em;
    border-radius: var(--dk-radius-pill);
    background: var(--dk-fg);
    color: var(--dk-bg);
    font-size: var(--dk-size-small);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    /* The bar has no room for a second line; a wrapped pill looks broken. */
    white-space: nowrap;
    transition: opacity var(--dk-transition);
}

.dk-donate:hover { opacity: 0.82; }

/* Mobile toggle. Hidden on desktop; the menu is a plain bar there. */
.dk-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.dk-nav-toggle span,
.dk-nav-toggle span::before,
.dk-nav-toggle span::after {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dk-transition), opacity var(--dk-transition);
}

.dk-nav-toggle span {
    margin-inline: auto;
    position: relative;
}
.dk-nav-toggle span::before,
.dk-nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
}
.dk-nav-toggle span::before { top: -6px; }
.dk-nav-toggle span::after { top: 6px; }

.dk-nav-toggle[aria-expanded='true'] span { background: transparent; }
.dk-nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.dk-nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
    .dk-nav-toggle { display: block; }

    .dk-nav {
        position: absolute;
        inset: 100% 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dk-space-2);
        padding: var(--dk-space-3) var(--dk-gutter) var(--dk-space-4);
        background: var(--dk-bg);
        border-bottom: 1px solid var(--dk-line);
    }

    /* [hidden] would be cleaner, but the nav must stay in the layout
       for the toggle animation; visibility keeps it out of the tab
       order and the accessibility tree while closed. */
    .dk-nav[data-open='false'] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .dk-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--dk-space-2);
    }

    .dk-menu a { font-size: 1.25rem; }

    .dk-lang {
        padding: var(--dk-space-2) 0 0;
        border-left: 0;
        border-top: 1px solid var(--dk-line);
        width: 100%;
    }
}

/* ============================================================
   7. Hero — the landing screen
   ============================================================ */

/* The first version stacked everything centred: eyebrow, headline, lead,
   button, then the portrait underneath. On a 1440x900 laptop that put
   the portrait entirely below the fold, so the landing screen was a wall
   of type with nothing else on it — and every section after it repeated
   the same centred rhythm.

   Now it is two columns: words left, portrait right, both inside one
   screen. The whole block lands at roughly 570px tall on a laptop, which
   leaves the next section visible at the bottom edge — the cue that
   there is more page. */

.dk-hero {
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
}

.dk-hero__inner {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.dk-hero__title {
    font-size: var(--dk-size-hero);
    margin-bottom: var(--dk-space-3);
}

.dk-hero__lead {
    margin-bottom: var(--dk-space-4);
    max-width: 46ch;
}

.dk-hero__portrait {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}

@media (min-width: 900px) {
    .dk-hero__inner {
        /* Text column slightly wider than the image: the headline needs
           the room, and an exact half-and-half split reads as a diagram
           rather than a composition. */
        grid-template-columns: 1.15fr 0.85fr;
        align-items: center;
    }

    .dk-hero__portrait {
        max-width: 380px;
        margin-inline: auto 0;
    }
}

/* ============================================================
   8. Sections and cards
   ============================================================ */

.dk-section__head {
    max-width: var(--dk-max-text);
    margin-bottom: var(--dk-space-4);
}

.dk-section__head.dk-center { margin-inline: auto; }

/* Heading on the left, the section's own link on the right, sharing one
   baseline. Gives the themes section a different shape from the hero
   above it and the quote below it, and saves the vertical space a
   centred button underneath the cards used to take. */
.dk-section__head--row { max-width: none; }

@media (min-width: 860px) {
    .dk-section__head--row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: var(--dk-space-4);
    }

    .dk-section__head--row > :first-child { max-width: var(--dk-max-text); }
}

/* About: a small circle beside a wide text column. Deliberately NOT the
   even split the generic .dk-split gives — at 1fr 1fr the circle came
   out around 500px across and swallowed the paragraph next to it. */
.dk-about {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: center;
}

.dk-about__media {
    width: 100%;
    max-width: 300px;
}

@media (min-width: 860px) {
    .dk-about {
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }
}

/* Top of the Om mig page: page title and lead on the left, portrait on
   the right. Same asymmetry as .dk-about and for the same reason — an
   even split turns the portrait into the loudest thing on a page that
   is mostly reading. */
.dk-intro-split {
    display: grid;
    gap: clamp(1.75rem, 3vw, 3rem);
    align-items: start;
}

.dk-intro-split__media {
    width: 100%;
    max-width: 320px;
}

@media (min-width: 860px) {
    .dk-intro-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
        gap: clamp(2.5rem, 5vw, 4.5rem);
    }
}

/* Quick facts: a short list of one-line answers, set as a ruled column
   rather than bullets. Bullets in a display serif page look like a CV
   pasted in; rules read as a caption. */
.dk-facts {
    list-style: none;
    margin: var(--dk-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: 26rem;
}

.dk-facts li {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dk-line);
    font-size: var(--dk-size-small);
}

/* One story section on the Om mig page: heading and body, with an
   optional picture that alternates sides down the page. */
.dk-story {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    /* Centred, not top-aligned. A three-paragraph childhood story next
       to a 420px portrait leaves a lot of empty column whichever way it
       is anchored; centred, the emptiness is split above and below the
       text instead of pooling under it, and the section reads as a pair
       rather than as text with a hole beside it. */
    align-items: center;
}

.dk-story + .dk-story { margin-top: var(--dk-section-y); }

/* The themes page gives every section an id, and the front page's cards
   link to them. Without this the sticky header would sit on top of the
   heading the reader just jumped to. */
.dk-story[id] { scroll-margin-top: calc(72px + var(--dk-space-3)); }

.dk-story__media {
    width: 100%;
    max-width: 320px;
}

@media (min-width: 860px) {
    .dk-story--media { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }

    /* Picture on the right instead. Kept first in the DOM either way,
       so the reading order stays heading-then-text for a screen reader
       and on a narrow screen. */
    .dk-story--right { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
    .dk-story--right .dk-story__media { order: 2; }
}

/* Call to action: a hairline, then text left and button right. The
   fourth different arrangement on the page, which is the point. */
.dk-cta {
    display: grid;
    gap: var(--dk-space-3);
    padding-top: var(--dk-space-4);
    border-top: 1px solid var(--dk-line);
}

@media (min-width: 760px) {
    .dk-cta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--dk-space-5);
    }
}

/* Election themes. auto-fit keeps the row full whether there are two
   themes or six — Denise adds and removes them from wp-admin, and the
   grid must not look broken at any count. */
.dk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1.75rem, 3vw, 3rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-card {
    display: flex;
    flex-direction: column;
    gap: var(--dk-space-2);
}

.dk-card__media { margin-bottom: var(--dk-space-1); }

.dk-card__title {
    font-size: var(--dk-size-h3);
    margin: 0;
}

.dk-card__title a { text-decoration: none; }

.dk-card__text {
    color: var(--dk-fg-muted);
    margin: 0;
}

/* Numbered variant, used when a theme has no photo — the number
   stands in for the image so the grid keeps its rhythm. */
.dk-card__number {
    font-family: var(--dk-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dk-line);
}

/* Full-width statement band. Dark by default via .dk-band--dark. */
.dk-quote {
    font-family: var(--dk-font-display);
    font-size: var(--dk-size-h2);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    max-width: 22ch;
    margin: 0 auto;
    text-wrap: balance;
}

.dk-quote__attrib {
    display: block;
    margin-top: var(--dk-space-3);
    font-family: var(--dk-font-body);
    font-size: var(--dk-size-small);
    font-weight: 400;
    letter-spacing: var(--dk-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--dk-fg-muted);
}

/* Post list on the news page and the archive. */
.dk-posts {
    display: grid;
    gap: var(--dk-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-post-item {
    display: grid;
    gap: var(--dk-space-1);
    padding-bottom: var(--dk-space-4);
    border-bottom: 1px solid var(--dk-line);
}

.dk-post-item:last-child { border-bottom: 0; padding-bottom: 0; }

.dk-post-item__date {
    font-size: var(--dk-size-eyebrow);
    letter-spacing: var(--dk-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--dk-fg-muted);
}

.dk-post-item__title { font-size: var(--dk-size-h3); margin: 0; }
.dk-post-item__title a { text-decoration: none; }

/* ============================================================
   9. Prose — whatever the block editor produces
   ============================================================ */

/* Scoped to .dk-prose so editor output is styled without those rules
   leaking into the hand-built sections above. */
.dk-prose {
    max-width: var(--dk-max-text);
}

.dk-prose > * + * { margin-top: var(--dk-space-3); }

.dk-prose h2 { margin-top: var(--dk-space-5); }
.dk-prose h3 { margin-top: var(--dk-space-4); }

.dk-prose ul, .dk-prose ol {
    padding-left: 1.3em;
    margin-block: 0;
}

.dk-prose li + li { margin-top: var(--dk-space-1); }

.dk-prose a { font-weight: 500; }

.dk-prose blockquote {
    margin: var(--dk-space-4) 0;
    padding-left: var(--dk-space-3);
    border-left: 2px solid var(--dk-line);
    font-family: var(--dk-font-display);
    font-size: var(--dk-size-h3);
    font-style: italic;
}

.dk-prose img { border-radius: var(--dk-radius-card); }

/* WordPress core classes that turn up in editor output. */
.dk-prose .aligncenter { margin-inline: auto; }
.dk-prose figure { margin: var(--dk-space-4) 0; }
.dk-prose figcaption {
    font-size: var(--dk-size-small);
    color: var(--dk-fg-muted);
    margin-top: var(--dk-space-1);
}

/* ============================================================
   10. Kom med: contact details and events
   ============================================================ */

/* This section used to be a volunteer form — name, e-mail, phone,
   checkboxes, message, consent. It asked the visitor for six decisions
   and the campaign for a personal-data register to look after. A
   mailto: and a phone number ask for one decision and collect nothing,
   which is also why the privacy notice is now three paragraphs long. */

/* Yhteystiedot yhdellä rivillä: sähköposti, puhelin ja some-ikonit.
 *
 * Aiemmin tämä oli laatikko, jossa oli vaakaviiva, nimi omalla
 * rivillään, sähköposti sarakemuotoisen otsikon kanssa ja ikonit sen
 * alla — neljä riviä kahdelle yhteystiedolle. Rivi näyttää
 * hallitummalta ja lukee nopeammin.
 *
 * Rivittyy kapealla ruudulla, mutta ikonit pysyvät omana ryhmänään
 * koska .dk-social on itsessään flex-rivi. */
.dk-contact-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dk-space-2) var(--dk-space-3);
    margin-top: var(--dk-space-3);
}

.dk-contact-row__link {
    font-weight: 500;
    text-underline-offset: 0.25em;
}

/* Nimi muotokuvan alla. Kuvateksti, ei otsikko: pienempi kuin h3 ja
   harvennettu, jotta se lukeutuu kuvaan kuuluvaksi eikä uudeksi
   osioksi. */
.dk-portrait-name {
    margin: var(--dk-space-2) 0 0;
    font-size: var(--dk-size-small);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dk-fg-muted);
    text-align: center;
}

/* Events. A row per event: when on the left, what on the right. */
.dk-events {
    list-style: none;
    margin: var(--dk-space-4) 0 0;
    padding: 0;
}

.dk-event {
    display: grid;
    gap: 0.35rem var(--dk-space-4);
    padding: var(--dk-space-3) 0;
    border-bottom: 1px solid var(--dk-line);
}

.dk-event:first-child { border-top: 1px solid var(--dk-line); }

@media (min-width: 640px) {
    .dk-event {
        grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
        align-items: baseline;
    }
}

.dk-event__when {
    margin: 0;
    font-size: var(--dk-size-small);
    color: var(--dk-fg-muted);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dk-event__title {
    font-size: var(--dk-size-h3);
    margin: 0;
}

.dk-event__title a { text-decoration: none; }

.dk-event__place {
    margin: 0.3rem 0 0;
    font-size: var(--dk-size-small);
    color: var(--dk-fg-muted);
}

/* Embedded external calendar, when one is pasted in. */
.dk-embed { margin-top: var(--dk-space-4); }

.dk-embed iframe {
    width: 100%;
    min-height: 520px;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-card);
}

/* ============================================================
   11. Footer
   ============================================================ */

.dk-footer {
    padding-block: var(--dk-space-5);
    /* No top margin. The last section already ends with a full
       --dk-section-y of bottom padding, and adding a margin here stacked
       the two into roughly 10rem of empty ivory above the footer. The
       colour change is separation enough. */
    margin-top: 0;
}

/* Alatunnisteen palstat.
 *
 * Ei enää `repeat(auto-fit, minmax(220px, 1fr))`. Se jakoi leveyden
 * tasan, jolloin yhden sähköpostirivin palsta sai 570 pikseliä ja
 * palstojen väliin jäi ammottava aukko. Flex antaa brändipalstalle sen
 * mitä se tarvitsee ja päästää yhteystiedot oikeaan reunaan, jolloin
 * ne asettuvat samaan linjaan alla olevan lakirivin kanssa. */
.dk-footer__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--dk-space-4) var(--dk-space-5);
}

.dk-footer__brand {
    flex: 1 1 18rem;
    max-width: 30rem;
}

.dk-footer__contact { flex: 0 1 auto; }

.dk-footer__title {
    font-family: var(--dk-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--dk-space-1);
}

.dk-footer__line {
    font-size: var(--dk-size-small);
    color: var(--dk-fg-muted);
    margin: 0 0 var(--dk-space-2);
}

/* Slogan. Kursivoitu display-serif täydellä tekstivärillä, jotta se
   erottuu yllä olevasta harmaasta rivistä.
 *
 * PIENEMPI KUIN NIMI. Aiemmin se oli --dk-size-h3 eli suurempi kuin
 * alatunnisteen nimi, jolloin paikanpitäjäteksti "SLOGAN TÄHÄN" oli
 * koko alatunnisteen äänekkäin elementti. Slogan on nimen määre, ei
 * sen ohi puhuva otsikko. */
.dk-footer__slogan {
    font-family: var(--dk-font-display);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.35;
    color: var(--dk-fg);
    margin: 0;
    max-width: 26ch;
    text-wrap: balance;
}

/* Bigger here than in the header: the footer is where party
   affiliation is formally stated, and there is room for it to be read
   rather than merely recognised. */
.dk-footer__partylogo {
    height: 36px;
    width: auto;
    /* Yksi lähde välille: slogan ei kanna alamarginaalia, vaan logo
       ottaa etäisyytensä itse. Muuten kaksi marginaalia laskettiin
       yhteen ja logo ajautui irralleen muusta palstasta. */
    margin-top: var(--dk-space-4);
}

.dk-footer h2 {
    font-family: var(--dk-font-body);
    font-size: var(--dk-size-eyebrow);
    font-weight: 500;
    letter-spacing: var(--dk-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--dk-fg-muted);
    margin-bottom: var(--dk-space-2);
}

/* Rajattu valikkoon, EI kaikkiin alatunnisteen listoihin.
 *
 * Aiemmin tämä oli `.dk-footer ul`, joka on tarkempi valitsin kuin
 * `.dk-social` — eli se pakotti some-ikonirivin ruudukoksi ja ikonit
 * allekkain juuri alatunnisteessa, vaikka sivulla ne olivat rivissä.
 * Sama sääntö kahdessa paikassa näytti kahdelta eri komponentilta. */
.dk-footer nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    font-size: var(--dk-size-small);
}

.dk-footer a { text-decoration: none; }

.dk-footer__legal {
    margin-top: var(--dk-space-4);
    padding-top: var(--dk-space-3);
    border-top: 1px solid var(--dk-line);
    font-size: var(--dk-size-eyebrow);
    color: var(--dk-fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dk-space-1) var(--dk-space-3);
    justify-content: space-between;
}

/* Social links as a row of round icon buttons. Used both here and on
   the Kom med page, so it lives with the shared components rather than
   with the footer — and it inherits the surrounding text colour, which
   is why one SVG works on ivory and on cocoa. */
.dk-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dk-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dk-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the smallest target a fingertip hits reliably. Icons
       this size need the padding anyway. */
    width: 44px;
    height: 44px;
    border: 1px solid var(--dk-line);
    border-radius: var(--dk-radius-pill);
    color: inherit;
    text-decoration: none;
    transition: background var(--dk-transition), color var(--dk-transition), border-color var(--dk-transition);
}

.dk-social a:hover {
    background: var(--dk-fg);
    color: var(--dk-bg);
    border-color: var(--dk-fg);
    opacity: 1;
}

.dk-icon { display: block; }

/* Larger on the Kom med page, where the row is one of two things the
   page is for rather than a footer afterthought. */
.dk-social--icons {
    margin-top: var(--dk-space-4);
    gap: var(--dk-space-2);
}

.dk-social--icons a { width: 52px; height: 52px; }

/* ============================================================
   12. Accessibility and motion
   ============================================================ */

/* Visible focus everywhere. The default ring is invisible against
   ivory in some browsers, so it is declared explicitly. */
:focus-visible {
    outline: 2px solid var(--dk-fg);
    outline-offset: 3px;
}

.dk-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--dk-space-2) var(--dk-space-3);
    background: var(--dk-cocoa);
    color: var(--dk-ivory);
}

.dk-skip:focus {
    left: var(--dk-gutter);
    top: var(--dk-space-2);
}

/* Screen-reader-only text. Clipped rather than display:none so it
   stays in the accessibility tree. */
.dk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print: the campaign material people actually print is the themes
   page. Drop the chrome, keep the words. */
@media print {
    .dk-header, .dk-footer, .dk-btn, .dk-nav-toggle { display: none !important; }
    body { background: #fff; color: #000; }
}