/*******************************************************************************
/* Inspired by
 *   https://bestmotherfucking.website
 * and
 *   https://alanhogan.com/code/modern-html-template
 * and
 *   https://practicaltypography.com
 * and
 *   https://www.joshwcomeau.com/css/custom-css-reset/
 *
 */

* {
    /* Reset margin, since different browsers default this differently. */
    margin: 0;
}

:root {
    --max-width: 36rem;
    --print-max-width: var(--max-width);
    --base-font-size: 1.4rem;
    --font-family: concourse_3, Charter, system-ui;
    --highlight-font-family: concourse_4_caps, Charter, system-ui;  /* Not currently used. */
    color-scheme: light;

    /* Color definitions inspired by coolors.com palette picker. */
    --light-neutral: #EDEAE0;  /* Alabaster: a brown-tinged off-white. */
    --dark-neutral: #111111;   /* Night: a deep black. */
    --primary-blue: #235789;   /* Lapis Lazuli: a medium blue. */
    --dark-blue: #1F305E;      /* Delft Blue: a dark navy blue. */
    --medium-blue: #4682b4;    /* Steel Blue: a grey-blue. */
    --light-blue: #9EB9D4;     /* Powder Blue: a grey-sky blue. */
    --lightest-blue: #F0F8FF;  /* Alice Blue: a white-blue. */
    --purple: #8D3B72;         /* Plum: a blue-purple. */
    --light-purple: #E0B0FF;   /* Mauve: a light purple. */

    /* Basic required colors. */
    --text-color: var(--dark-neutral);
    --page-bg-color: var(--light-neutral);
    --text-highlight-color: var(--primary-blue);
    --text-highlight-hovered-color: var(--light-blue);
    --link-color: var(--primary-blue);
    --link-visited-color: var(--purple);
    --link-hovered-color: var(--medium-blue);

    /* Used on the recipes page. */
    --table-border-color: var(--dark-neutral);
    --table-header-bg-color: var(--light-blue);
    --table-row-odd-bg-color: var(--lightest-blue);
    --toc-link-text-color: var(--light-neutral);
    --toc-link-bg-color: var(--medium-blue);
    --toc-link-hovered-color: var(--primary-blue);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* Basic required styles. */
        --text-color: var(--light-neutral);
        --page-bg-color: var(--dark-neutral);
        --text-highlight-color: var(--light-blue);
        --text-highlight-hovered-color: var(--primary-blue);
        --link-color: var(--light-blue);
        --link-visited-color: var(--light-purple);
        --link-hovered-color: var(--lightest-blue);

        /* Used on the recipes page. */
        --table-border-color: var(--light-neutral);
        --table-header-bg-color: var(--dark-blue);
        --table-row-odd-bg-color: var(--primary-blue);
        --toc-link-text-color: var(--light-neutral);
        --toc-link-bg-color: var(--medium-blue);
        --toc-link-hovered-color: var(--primary-blue);
    }
}

/* TODO: As of April 2024 this media query doesn't seem to have any effect. */
@media print {
    body {
        max-width: var(--print-max-width);
    }
    #toc-link {
        display: none;
    }
}

body {
    color: var(--text-color);
    background: var(--page-bg-color);
    font-size: var(--base-font-size);
    font-family: var(--font-family);
    margin: calc(var(--base-font-size) * 0.8) auto;  /* Top-bottom Left-right */
    padding: 0 calc(var(--base-font-size) * 0.5);  /* Helpful on mobile. */
    max-width: var(--max-width);
    line-height: 1.35;
}

h1 {
    color: var(--text-highlight-color);
    font-size: calc(var(--base-font-size) * 1.8);
    text-align: center;
    margin: 0;
}

h1:hover {
    color: var(--text-highlight-hovered-color);
}

h1, h2, h3, h4 {
    text-wrap: balance;
}

h2 {
    font-size: calc(var(--base-font-size) * 1.25);
    margin-top: calc(var(--base-font-size) * 1.5);
    margin-bottom: calc(var(--base-font-size) * 0.2);
}

h3, h4 {
    font-size: var(--base-font-size);
    margin-top: calc(var(--base-font-size) * 1.0);
    margin-bottom: calc(var(--base-font-size) * 0.2);
}

h4 {
    font-style: italic;
    font-weight: normal;
}

p, h5 {
    margin-top: calc(var(--base-font-size) * 0.8);
    margin-bottom: calc(var(--base-font-size) * 0.2);
}

p {
    text-wrap: pretty;
}

ol, ul {
    margin-top: calc(var(--base-font-size) * 0.4);
    margin-bottom: calc(var(--base-font-size) * 0.2);
}

li, li ol, li ul {
    margin-top: calc(var(--base-font-size) * 0.15);
}

a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited-color);
}

a:hover, a:visited:hover {
    color: var(--link-hovered-color);
}

table {
    border: 2px solid var(--table-border-color);
    border-collapse: collapse;
    margin-top: calc(var(--base-font-size) * 0.6);
}

td, th {
    border: 1px solid var(--table-border-color);
    padding: 0.2em 0.5em;
}

th {
    background-color: var(--table-header-bg-color);
}

tr:nth-child(odd) {
    background-color: var(--table-row-odd-bg-color);
}

.border-bottom-strong {
    border-bottom: 3px solid var(--table-border-color);
}

img {
    max-width: var(--max-width);  /* Required here in addition to on <body>. */
    width: 100%;
    height: auto;
}

footer {
    margin-top: calc(var(--base-font-size) * 2.0);
}

hr {
    margin-top: calc(var(--base-font-size) * 1.0);
}

.salutation {
    margin-top: var(--base-font-size);
}

.caption {
    font-style: italic;
    margin-top: 0;
    margin-bottom: calc(var(--base-font-size) * 1.2);
}

.hidden {
    display: none;
}

.datestamp, .signature {
    font-style: italic;
    text-align: end;
}

.subtitle {
    font-style: italic;
    text-align: center;
}

#toc-link {
    /* Floating 'back to top' button adapted from:
     *   https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
     */
    display: block;
    position: fixed;
    bottom: 0.62em;
    right: 0.62em;
    z-index: 99;  /* Keep the button on top of everything else. */
    color: var(--toc-link-text-color);
    background-color: var(--toc-link-bg-color);
    border-radius: 0.62em;
    padding: 0.4em 1em;
    opacity: 0.95;
}

#toc-link:hover {
    background-color: var(--toc-link-hovered-color);
}

/*******************************************************************************
 * Webmaster's choice font, Charter, lazily loaded on-demand.
 *
 * Font is a suggestion from and packaged by Matthew Butterick of
 * https://practicaltypography.com
 */
@font-face {
    font-family: Charter;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    src: url('fonts/Charter/Charter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: Charter;
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    src: url('fonts/Charter/Charter-Italic.woff2') format('woff2');
}

@font-face {
    font-family: Charter;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    src: url('fonts/Charter/Charter-Bold.woff2') format('woff2');
}

@font-face {
    font-family: Charter;
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    src: url('fonts/Charter/Charter-BoldItalic.woff2') format('woff2');
}


/*******************************************************************************
 * Webmaster's choice font, Concourse, lazily loaded on-demand.
 *
 * Font is the work of the excellent Matthew Butterick (MB Type), and
 * is available for licensing from https://mbtype.com
 *
 * Please do *not* copy this font without acquiring your own license.
 *
 * License at https://kachur.me/fonts/Concourse/MB-Type-Font-License.pdf
 *
 * See also Matthew's educational work: https://practicaltypography.com
 */
@font-face {
    font-family: concourse_4;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_4_regular.woff2') format('woff2');
}

@font-face {
    font-family: concourse_4;
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_4_italic.woff2') format('woff2');
}

@font-face {
    font-family: concourse_4;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_4_bold.woff2') format('woff2');
}

@font-face {
    font-family: concourse_4;
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_4_bold_italic.woff2') format('woff2');
}

@font-face {
    font-family: concourse_4_caps;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_4_caps_regular.woff2') format('woff2');
}

@font-face {
    font-family: concourse_4_caps;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_4_caps_bold.woff2') format('woff2');
}

@font-face {
    font-family: concourse_3;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_3_regular.woff2') format('woff2');
}

@font-face {
    font-family: concourse_3;
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_3_italic.woff2') format('woff2');
}

@font-face {
    font-family: concourse_3;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_3_bold.woff2') format('woff2');
}

@font-face {
    font-family: concourse_3;
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url('fonts/Concourse/concourse_3_bold_italic.woff2') format('woff2');
}