/*
 * Site-wide foundations: the design tokens every other stylesheet builds on,
 * plus the handful of element defaults the browser gets wrong for us.
 *
 * Loaded before css/site-header.css, css/news.css and css/error.css, all of
 * which consume the custom properties declared here and define no colours,
 * fonts or page metrics of their own.
 */

:root {
    /* ---- Typefaces --------------------------------------------------- */

    /*
     * Inter is vendored in css/inter.css. The fallbacks are the platform UI
     * faces, which are what the site used before Inter and are metrically close
     * enough that a swap is not jarring.
     */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;

    /*
     * Both serifs are vendored in css/serif.css. Headlines are set in Source
     * Serif 4; only the masthead wordmark uses Playfair Display, whose thin
     * strokes need size to survive.
     */
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-display: 'Playfair Display', 'Source Serif 4', Georgia, serif;

    /* ---- Palette ------------------------------------------------------ */

    --gp-ink: #111111;         /* headlines and body copy */
    --gp-muted: #5f5f5f;       /* bylines, dates, supporting copy */
    --gp-rule: #ddd9d1;        /* hairline rules and card edges */
    --gp-paper: #f4f1ea;       /* page background - warm, like newsprint */
    --gp-card: #ffffff;        /* article cards and the article page itself */
    --gp-nav: #0d0d0d;         /* section navigation bar */
    --gp-breaking: #c60c0c;    /* breaking-news ticker */

    /*
     * The house green. Two shades, and which one to reach for is a contrast
     * decision rather than a stylistic one: --gp-accent manages only 4.1:1
     * against white, so it is reserved for large text and non-text furniture
     * (rules, underlines, focus rings). Anything small - kickers, inline links,
     * pagination - uses --gp-accent-dark, which clears WCAG AA at 5.7:1.
     */
    --gp-accent: #00923f;
    --gp-accent-dark: #007733;

    /* ---- Metrics ------------------------------------------------------ */

    --gp-page-width: 1320px;   /* outer container: header, listings, footer */
    --gp-measure: 44rem;       /* reading width for article body copy */
    --gp-gutter: 1.5rem;       /* space between the container and the viewport */
}

html {
    /* Anchors and skip links land below the sticky section nav, not under it. */
    scroll-padding-top: 5rem;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
}

body {
    /* Lets short pages - chiefly the error pages - still fill the viewport. */
    min-height: 100%;
    background-color: var(--gp-paper);
    color: var(--gp-ink);
    line-height: 1.5;
}

/* Form controls do not inherit the page font by default. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/*
 * A visible focus ring is the only way a keyboard user can tell where they are.
 * `:focus-visible` shows it for keyboard navigation while keeping it off mouse
 * clicks, which is what the browser default already does - this rule only
 * restyles it in the house colour so it stays visible on dark surfaces too.
 */
:focus-visible {
    outline: 2px solid var(--gp-accent);
    outline-offset: 2px;
}

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

/*
 * The one horizontal rhythm the whole site is aligned to. Bands that need a
 * full-bleed background (the section nav, the ticker) paint it on themselves
 * and put a .site-container inside, so the colour reaches the viewport edges
 * while the content stays lined up with everything above and below it.
 */
.site-container {
    width: 100%;
    max-width: var(--gp-page-width);
    margin: 0 auto;
    padding: 0 var(--gp-gutter);
    box-sizing: border-box;
}

/*
 * The masthead wordmark. Lives here rather than in css/site-header.css because
 * the standalone 500 page shows it without loading the header's stylesheet.
 */
.masthead-wordmark {
    display: inline-block;
    font-family: var(--font-display);
    /*
     * Scales with the viewport between a legible floor on the narrowest phone
     * and a ceiling that stops the wordmark outgrowing the container on very
     * wide screens.
     */
    font-size: clamp(2.5rem, 9vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.01em;
    /*
     * The wordmark is written "Gaza Post" in the markup and uppercased here, so
     * screen readers announce it as a name instead of spelling out the letters.
     */
    text-transform: uppercase;
    color: var(--gp-ink);
    text-decoration: none;
}

/*
 * Section kicker - the small coloured label above a headline ("SVERIGE").
 * Shared by cards, the hero and the article page.
 */
.kicker {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gp-accent-dark);
    text-decoration: none;
}

a.kicker:hover {
    text-decoration: underline;
}