/* ==================================================================
 * WFP Design System — look & feel for the ADAM docs (Zensical, modern)
 *
 * Faithful token port of the new WFP Design System (designsystem.wfp.org):
 *   - Typeface: Open Sans (self-hosted, variable woff2)
 *   - Light palette: DS semantic tokens (primary #0078b8, etc.)
 *   - Dark palette: derived from the WFP brand blue scale
 *   - Chrome: primary-blue header, navy footer, DS radius
 *   - Semantic icon colors remapped to DS brand scales
 *
 * ================================================================== */

/* ------------------------------------------------------------------
 * Typography — Open Sans (self-hosted)
 * Variable woff2 (wght 300–800), latin + latin-ext, normal + italic.
 * Files in docs/assets/fonts/ (no third-party CDN / no Google call).
 * ------------------------------------------------------------------ */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans-latin.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans-latin-ext.woff2") format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans-latin-italic.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans-latin-ext-italic.woff2") format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
 * WFP Design System tokens — LIGHT (scheme: default)
 * ------------------------------------------------------------------ */
:root {
    /* Typeface */
    --md-text-font: "Open Sans";

    /* Brand / interactive */
    --md-primary-fg-color: #0078b8; /* DS primary (blue-600) */
    --md-primary-fg-color--light: #3f94cc; /* blue-500 */
    --md-primary-fg-color--dark: #005492; /* blue-700 */
    --md-accent-fg-color: #005492; /* link hover/active */
    --md-primary-bg-color: #ffffff;
    --md-typeset-a-color: #0078b8; /* links = primary */

    /* Text & surfaces */
    --md-default-fg-color: #000000e9; /* DS foreground (~rgba 0,0,0,.91) */
    --md-typeset-color: #000000e9;
    --color-foreground: #000000e9;
    --color-background: #ffffff;
    --color-background-subtle: #f8f8f8; /* DS muted / neutral-50 */
}

/* Headings always bold, per WFP DS */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-weight: 700;
}

/* ------------------------------------------------------------------
 * WFP Design System tokens — DARK (derived, scheme: slate)
 * Surfaces from the dark end of the brand blue scale; off-white text;
 * light-blue accents. Verified for WCAG AA on body text and links.
 * ------------------------------------------------------------------ */
[data-md-color-scheme="slate"] {
    /* Brand / interactive */
    --md-primary-fg-color: #3f94cc; /* blue-500 */
    --md-primary-fg-color--light: #7bb5df; /* blue-400 */
    --md-primary-fg-color--dark: #0078b8; /* blue-600 */
    --md-accent-fg-color: #aed1ec; /* link hover (blue-300) */
    --md-typeset-a-color: #7bb5df; /* links (blue-400) */

    /* Surfaces — navy elevation ramp (blue-950 → blue-800) */
    --md-default-bg-color: #001632;
    --md-default-bg-color--light: #00274e;
    --md-default-bg-color--lighter: #002f5a;
    --md-default-bg-color--lightest: #003b6d;
    --color-background: #001632;
    --color-background-subtle: #00274e;

    /* Text */
    --md-default-fg-color: #f1f1f1; /* neutral-100 */
    --md-typeset-color: #f1f1f1;
    --color-foreground: #f1f1f1;
}

/* ------------------------------------------------------------------
 * Header — aligned to the WFP DS navigation bar
 * (designsystem.wfp.org/docs/blocks/navigation): white bar with logo,
 * title and search + toggle. Section navigation stays in the left
 * sidebar (no horizontal tabs). Dark mode keeps a navy surface.
 * ------------------------------------------------------------------ */
.md-header {
    background-color: #ffffff;
    color: #000000e9;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
}

/* Site title — bold, in brand blue (like the DS "App Name") */
.md-header__title,
.md-header .md-header__topic {
    color: #0078b8;
    font-weight: 700;
}

/* Header icons (search, theme toggle, repo) — dark on white */
.md-header .md-icon,
.md-header .md-header__button {
    color: #002f5a;
}

/* Logo size — match the DS navbar emblem (~36px); theme default is 24px */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.8rem;
    width: auto;
}

/* --- Dark mode: navy header, white logo & text -------------------- */
[data-md-color-scheme="slate"] .md-header {
    background-color: #002f5a;
    color: #ffffff;
}

/* White (inverted) logo on the navy dark-mode header */
[data-md-color-scheme="slate"] .md-header .md-logo img,
[data-md-color-scheme="slate"] .md-header .md-logo svg {
    filter: brightness(0) invert(1);
}

[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header .md-header__topic,
[data-md-color-scheme="slate"] .md-header .md-icon,
[data-md-color-scheme="slate"] .md-header .md-header__button {
    color: #ffffff;
}

/* Search field on the navy dark-mode header */
[data-md-color-scheme="slate"] .md-header .md-search__input {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[data-md-color-scheme="slate"] .md-header .md-search__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

[data-md-color-scheme="slate"] .md-header .md-search__icon {
    color: #ffffff;
}

/* ------------------------------------------------------------------
 * Footer — reproduces the WFP Design System footer block
 * (designsystem.wfp.org/docs/blocks/footer): navy band, 4-column grid
 * (3 menu columns + WFP logo), blue-400 headings, white links.
 * Markup: overrides/partials/footer.html
 * ------------------------------------------------------------------ */
.md-footer.wfp-footer {
    background-color: #002f5a; /* WFP navy (bg-wfp-navy) */
    color: #ffffff;
}

.wfp-footer__inner {
    padding-top: 2.5rem; /* py-10 */
    padding-bottom: 2.5rem;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
}

@media screen and (min-width: 40em) {
    .wfp-footer__inner {
        padding-left: 1.5rem; /* sm:px-6 */
        padding-right: 1.5rem;
    }
}

@media screen and (min-width: 64em) {
    .wfp-footer__inner {
        padding-left: 2rem; /* lg:px-8 */
        padding-right: 2rem;
    }
}

.wfp-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* gap-8 */
}

@media screen and (min-width: 48em) {
    .wfp-footer__grid {
        grid-template-columns: repeat(4, 1fr); /* md:grid-cols-4 */
    }
}

.wfp-footer__heading,
[data-md-color-scheme="slate"] .wfp-footer__heading {
    margin: 0 0 0.75rem; /* space-y-3 */
    font-size: 0.8rem;
    font-weight: 600; /* font-semibold */
    color: #7bb5df; /* text-blue-400, same in both schemes: the footer is always navy */
}

.wfp-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wfp-footer__links li {
    margin-bottom: 0.5rem; /* space-y-2 */
}

.wfp-footer__links a {
    color: #ffffff; /* text-background (white) */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    text-decoration: none;
}

.wfp-footer__links a:hover,
.wfp-footer__links a:focus {
    color: #aed1ec; /* blue-300 */
    text-decoration: underline;
}

/* Entries whose destination is not live yet: same size as the links,
   muted and clearly not interactive. */
.wfp-footer__link--disabled {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: default;
}

.wfp-footer__brand {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* logo flush to the right edge of the divider */
}

.wfp-footer__logo {
    height: 4.5rem;
    width: auto;
    filter: brightness(0) invert(1); /* white logo on navy */
}

.wfp-footer__meta {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.wfp-footer__meta .md-copyright {
    color: rgba(255, 255, 255, 0.8);
}

.wfp-footer__meta .md-copyright__highlight {
    color: #ffffff; /* "© World Food Programme" — theme sets this dark by default */
}

.wfp-footer__meta .md-copyright a {
    color: #ffffff;
}

/* ------------------------------------------------------------------
 * Geometry — DS radius (light touch, Phase B)
 * ------------------------------------------------------------------ */
.md-typeset pre > code,
.md-typeset pre {
    border-radius: 0.375rem; /* DS --radius-lg */
}

.md-search__form,
.md-search__input,
.md-typeset .md-button {
    border-radius: 0.25rem; /* DS --radius-md */
}

/* ------------------------------------------------------------------
 * Screenshots — UI captures and product images in the Users section.
 * Attach with `![alt](...){ .screenshot }` (attr_list). Light border and
 * a soft shadow keep white app chrome from bleeding into the page.
 * ------------------------------------------------------------------ */
.md-typeset img.screenshot {
    display: block;
    max-width: 100%;
    border: 1px solid #0000001e; /* DS --border */
    border-radius: 0.375rem; /* DS --radius-lg */
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset img.screenshot {
    border-color: #ffffff1f;
}

/* ------------------------------------------------------------------
 * Nav icons — per-page semantic colors (remapped to WFP brand scales)
 * All nav icons render at full opacity (default is 0.5) so the colors
 * read clearly.
 * ------------------------------------------------------------------ */

/* Intro — Getting Started (green-600) */
.md-nav__link[href*="/getting-started/"] svg {
    fill: #008442;
    opacity: 1;
}

/* Users group (orange-600) — overview + Live Map / Dashboard / Alerts */
.md-nav__link[href$="/users/"] svg,
.md-nav__link[href$="/live-map/"] svg,
.md-nav__link[href$="/dashboard/"] svg,
.md-nav__link[href$="/alerts/"] svg {
    fill: #d23b16;
    opacity: 1;
}

/* Hazards (semantic per-hazard colors, DS scales) */
.md-nav__link[href*="/hazards/earthquakes/"] svg {
    fill: #e4052c; /* red-600 */
    opacity: 1;
}

.md-nav__link[href*="/hazards/tropical-storms/"] svg {
    fill: #007c9e; /* aqua-600 */
    opacity: 1;
}

.md-nav__link[href*="/hazards/floods/"] svg {
    fill: #0078b8; /* blue-600 */
    opacity: 1;
}

/* Developers — overview (purple-700) */
.md-nav__link[href$="/developers/"] svg {
    fill: #a10062;
    opacity: 1;
}

/* Developers / Tutorials (brown-600) */
.md-nav__link[href*="/tutorials/"] svg {
    fill: #af5b2e;
    opacity: 1;
}

/* Developers / How-to Guides (aqua-600) */
.md-nav__link[href*="/how-to-guides/"] svg {
    fill: #007c9e;
    opacity: 1;
}

/* Developers / Reference (blue-700) — catches /reference/ and /reference/api/ */
.md-nav__link[href*="/reference/"] svg {
    fill: #005492;
    opacity: 1;
}

/* Developers / Concepts (warning-600) */
.md-nav__link[href*="/developers/explanation/"] svg {
    fill: #a26400;
    opacity: 1;
}

/* ------------------------------------------------------------------
 * Inline icon colors — semantic per-section palette (WFP brand scales)
 *
 * FontAwesome SVGs shipped with Zensical use fill="currentColor", so
 * setting `color:` on the wrapper span (which attr_list's `{ .class }`
 * syntax attaches to) propagates to the SVG fill. The svg/path rules
 * below are belt-and-suspenders for icons that may ship with hard
 * fills (e.g. parts of the Material set).
 *
 * Palette mirrors the nav colors above so the site reads as one
 * coherent system: section color is the same whether you see it in
 * the sidebar, a heading, or a grid card.
 * ------------------------------------------------------------------ */

/* Base size/alignment tweak: make inline icons in body copy sit on
   the text baseline cleanly and give .lg grid-card icons a subtle
   drop-shadow for depth. */
.grid.cards .twemoji.lg svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

/* --- Hazards ------------------------------------------------------ */
.icon-earthquake,
.icon-earthquake svg {
    color: #e4052c;
    fill: currentColor;
}

.icon-storm,
.icon-storm svg {
    color: #007c9e;
    fill: currentColor;
}

.icon-flood,
.icon-flood svg {
    color: #0078b8;
    fill: currentColor;
}

/* --- Site sections ------------------------------------------------ */
.icon-intro,
.icon-intro svg {
    color: #008442;
    fill: currentColor;
}

.icon-users,
.icon-users svg {
    color: #d23b16;
    fill: currentColor;
}

.icon-dev,
.icon-dev svg {
    color: #a10062;
    fill: currentColor;
}

.icon-tutorial,
.icon-tutorial svg {
    color: #af5b2e;
    fill: currentColor;
}

.icon-howto,
.icon-howto svg {
    color: #007c9e;
    fill: currentColor;
}

.icon-ref,
.icon-ref svg {
    color: #005492;
    fill: currentColor;
}

.icon-concept,
.icon-concept svg {
    color: #a26400;
    fill: currentColor;
}

/* --- Accents for body copy --------------------------------------- */
/* Warning / alert / hazard-overview (orange-600) */
.icon-alert,
.icon-alert svg {
    color: #d23b16;
    fill: currentColor;
}

/* Data sources, databases (neutral-700) */
.icon-data,
.icon-data svg {
    color: #525252;
    fill: currentColor;
}

/* Brand accent (primary blue) — use for generic action/CTA icons */
.icon-brand,
.icon-brand svg {
    color: var(--md-primary-fg-color);
    fill: currentColor;
}

/* Gold/energy accent — for "what it does" / "bolt" / highlights (warning-600) */
.icon-accent,
.icon-accent svg {
    color: #a26400;
    fill: currentColor;
}

/* --- Dark mode (slate): lighter DS shades for icon contrast --------
 * The 700-level values above (purple-700, blue-700, neutral-700) sit
 * at ~2.3:1 on the navy surfaces, below the WCAG 2.1 AA minimum of
 * 3:1 for graphical objects. Swap them for the 500 step of the same
 * DS scale, which passes on every surface of the elevation ramp
 * (#001632 / #00274e / #003b6d). Nav fills and inline icon classes
 * are overridden together so sidebar, headings and cards stay in sync.
 * ------------------------------------------------------------------ */

/* Developers — purple-500 */
[data-md-color-scheme="slate"] .md-nav__link[href$="/developers/"] svg,
[data-md-color-scheme="slate"] .icon-dev,
[data-md-color-scheme="slate"] .icon-dev svg {
    color: #cc6bb9;
    fill: #cc6bb9;
}

/* Reference — blue-500 (matches the dark-mode primary) */
[data-md-color-scheme="slate"] .md-nav__link[href*="/reference/"] svg,
[data-md-color-scheme="slate"] .icon-ref,
[data-md-color-scheme="slate"] .icon-ref svg {
    color: #3f94cc;
    fill: #3f94cc;
}

/* Data sources — neutral-500 */
[data-md-color-scheme="slate"] .icon-data,
[data-md-color-scheme="slate"] .icon-data svg {
    color: #8d8d8d;
    fill: #8d8d8d;
}

/* ------------------------------------------------------------------
 * Hazard badge icons — custom SVG set in docs/assets/icons/
 *
 * These are the three-color stamp-style icons (circle background +
 * stroke + FA glyph) produced by the team. Colors are baked in, so
 * no .icon-* class is needed; we only size and align them here.
 * ------------------------------------------------------------------ */

.hazard-badge {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
}

/* Grid-card size modifier — mirrors how :shortcode:{ .lg } scales
   the twemoji span inside `.grid.cards`. */
.hazard-badge.lg {
    width: 2.5em;
    height: 2.5em;
    vertical-align: middle;
}