/*
 * FF Hausbruch: fonts, colours and typography.
 * Loaded on every page (asset template.ffhausbruch.base) and in the editor (editor.css).
 * Element selectors only: TinyMCE lists every simple class selector in its style menu.
 */

/* Barlow Condensed and Public Sans: SIL Open Font License 1.1, see ../fonts/LICENSE-*.txt */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-600-normal.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: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-condensed-latin-700-normal.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: "Public Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/public-sans-latin-400-normal.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: "Public Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/public-sans-latin-600-normal.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: "Public Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/public-sans-latin-700-normal.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;
}

:root {
    /* Colours of the coat of arms (spec 4.1) */
    --ff-red: #C8102E;
    --ff-red-dark: #A00D25;
    --ff-navy: #1E2650;
    --ff-muted: #586371;
    --ff-link: #1D4E8F;
    --ff-line: #D4DAE1;
    --ff-surface: #FFFFFF;
    --ff-surface-alt: #F1F3F5;
    /* Darker surface of the prototype (start page header, table heads) */
    --ff-surface-sunk: #E8ECF0;
    --ff-tag-incident-report: #9E221B;
    --ff-tag-incident-report-bg: #FBE9E7;
    --ff-tag-training: #1D4E8F;
    --ff-tag-training-bg: #E6EEF8;
    --ff-tag-event: #2B6A3C;
    --ff-tag-event-bg: #E6F1E9;
    --ff-tag-news: #6B4A00;
    --ff-tag-news-bg: #FBF1D6;
    --ff-tag-minis: #8A1C4A;
    --ff-tag-minis-bg: #FBE8F0;
    /* Areas of the service plan (events), after the colours of the printed plan */
    --ff-tag-equipment: #2F3F57;
    --ff-tag-equipment-bg: #E3E8EF;
    --ff-tag-technical-assistance: #0B5579;
    --ff-tag-technical-assistance-bg: #DDF0FA;
    --ff-tag-fire-protection: #8A3B0C;
    --ff-tag-fire-protection-bg: #FDEBDD;
    --ff-tag-medical: #5B2D86;
    --ff-tag-medical-bg: #EFE7F7;
    --ff-tag-decontamination: #22603A;
    --ff-tag-decontamination-bg: #E3F2E6;

    --ff-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --ff-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-radius: 12px;
    --ff-radius-small: 6px;
    --ff-header-height: 3.75rem;
    /* Width of the content column (prototype: 1000 px, widened for large screens) */
    --ff-content-width: 75rem;
    /* Line length of running text inside the wide column */
    --ff-measure: 70ch;

    /* Cassiopeia and its Bootstrap build (variables without prefix) */
    --cassiopeia-color-primary: var(--ff-navy);
    --cassiopeia-color-link: var(--ff-link);
    --cassiopeia-color-hover: var(--ff-navy);
    --cassiopeia-font-family-body: var(--ff-font-body);
    --cassiopeia-font-family-headings: var(--ff-font-display);
    --cassiopeia-font-weight-normal: 400;
    --cassiopeia-font-weight-headings: 700;
    /* Cassiopeia adds 10rem above every [id] with a sticky header; scroll-padding-top below is enough. */
    --cassiopeia-scroll-margin-top: 0px;
    --body-bg: var(--ff-surface);
    --body-color: var(--ff-navy);
    --body-font-family: var(--ff-font-body);
    --heading-color: var(--ff-navy);
    --link-color: var(--ff-link);
    --link-color-rgb: 29, 78, 143;
    --link-hover-color: var(--ff-navy);
    --link-hover-color-rgb: 30, 38, 80;
}

/* The sticky header must not cover jump targets such as #main-content. */
html {
    scroll-padding-top: calc(var(--ff-header-height) + 1rem);
}

body {
    background: var(--ff-surface);
    color: var(--ff-navy);
    font-family: var(--ff-font-body);
    font-size: 1rem;
    line-height: 1.55;
    /* Long URLs or compound words must not widen the page on narrow screens. */
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--ff-navy);
    font-family: var(--ff-font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
}

h1 {
    margin-bottom: .875rem;
    font-size: 2.125rem;
    line-height: 1;
}

h2 {
    margin-bottom: .75rem;
    font-size: 1.3125rem;
    line-height: 1.1;
    letter-spacing: .02em;
}

/* Third level in the body font, as the titles of posts and vehicles in the prototype. */
h3 {
    margin-bottom: .25rem;
    font-family: var(--ff-font-body);
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

@media (width < 720px) {
    h1 {
        font-size: 1.875rem;
    }
}

h4 {
    font-size: 1.15rem;
    font-weight: 600;
}

p,
ul,
ol,
dl,
table {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: var(--ff-link);
    text-decoration: underline;
    text-underline-offset: .15em;
}

a:hover {
    color: var(--ff-navy);
}

:focus-visible {
    outline: 3px solid var(--ff-link);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

strong,
b {
    font-weight: 700;
}

::selection {
    background: var(--ff-navy);
    color: var(--ff-surface);
}