/**
 * Cassiopeia Prinz - child template styles
 *
 * Recreates the look of the former "prospect2" site: Sarina headline in
 * orange-red, Open Sans body copy, light header on a subtle tiled background.
 *
 * Fonts: Open Sans and Sarina, SIL Open Font License 1.1, self-hosted.
 */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/open-sans-italic-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Sarina";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/sarina-latin.woff2") format("woff2");
}

/* Doubled :root beats the inline :root block Cassiopeia adds after this file */
:root:root {
    --prinz-accent: #eb4224;
    --prinz-accent-dark: #c42f13;
    --prinz-text: #333;
    --prinz-muted: #6b6b6b;
    --prinz-footer: #2f2f2f;

    --cassiopeia-color-primary: var(--prinz-footer);
    --cassiopeia-color-link: var(--prinz-accent-dark);
    --cassiopeia-color-hover: #8f2210;
    --link-color: var(--prinz-accent-dark);
    --link-color-rgb: 196, 47, 19;
    --link-hover-color: #8f2210;
    --link-hover-color-rgb: 143, 34, 16;
    --template-link-color: var(--prinz-accent-dark);
    --template-special-color: var(--prinz-footer);
    --cassiopeia-font-family-body: "Open Sans", system-ui, sans-serif;
    --cassiopeia-font-family-headings: "Open Sans", system-ui, sans-serif;
    --cassiopeia-font-weight-normal: 400;
    --cassiopeia-font-weight-headings: 600;
}

body.site {
    color: var(--prinz-text);
    background: #fff url("../images/background.jpg") repeat fixed top left;
}

/* Header: light instead of Cassiopeia's coloured gradient */
.container-header {
    background: rgb(255 255 255 / .85);
    box-shadow: 0 1px 0 rgb(0 0 0 / .06);
}

.container-header .navbar-brand {
    padding-block: 1rem .25rem;
    white-space: normal;
}

.container-header .navbar-brand,
.container-header .navbar-brand a {
    color: var(--prinz-accent);
    font-family: "Sarina", "Times New Roman", serif;
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1.3;
    text-decoration: none;
}

.container-header .navbar-brand:hover,
.container-header .navbar-brand:focus,
.container-header .navbar-brand a:hover,
.container-header .navbar-brand a:focus {
    color: var(--prinz-accent-dark);
}

.container-header .site-description {
    color: var(--prinz-muted);
    font-family: var(--cassiopeia-font-family-body);
    font-size: .8125rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.container-header .mod-menu {
    color: var(--prinz-text);
}

.container-header .mod-menu > li.active:after,
.container-header .mod-menu > li:hover:after {
    background: var(--prinz-accent);
}

.container-header .navbar-toggler {
    color: var(--prinz-text);
    border-color: var(--prinz-text);
}

/* Full-width hero carousel directly below the header */
.container-banner {
    margin-bottom: 1.5rem;
}

.site-grid {
    padding-block-start: .5rem;
}