/*
 * Font faces
 */

/* Source Sans Pro */

@font-face{
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-Regular.otf");
    font-weight: 400;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-Bold.otf");
    font-weight: 700;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-Semibold.otf");
    font-weight: 600;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-It.otf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Source Sans Pro";
    src: url("/fonts/SourceSansPro-Light.otf");
    font-weight: 300;
}

/* Libertinus */

@font-face{
    font-family: "Libertinus Sans";
    src: url("/fonts/LibertinusSans-Regular.otf");
    font-weight: 400;
}
@font-face {
    font-family: "Libertinus Sans";
    src: url("/fonts/LibertinusSans-Bold.otf");
    font-weight: 700;
}
@font-face {
    font-family: "Libertinus Sans";
    src: url("/fonts/LibertinusSans-Italic.otf");
    font-weight: 400;
    font-style: italic;
}

/*
 * Variables
 */

:root {
    /* Colours */

    /* Contact data */
    --clr-contact: #78385c;
    --clr-contact-hl: #a26887;
    /* Tables */
    --clr-table-shade: #fbfbfb;
    --clr-table-header: #d7eab1;
    --clr-table-border: #ddd;
    --emph-color-1: #efffd0;
    --emph-color-2: #567b0c;
    /* Text */
    --clr-link: #2d9246;
    --clr-link-hl: #1ac43e;
    --clr-heading: #719b1f;
    --clr-nav-text: #fbfbfb;
    --clr-nav-text-hl: #41753f;
    --clr-text: #202020;
    --clr-text-em: #83316a;
    --clr-text-embanner: #4f4d34;
    --clr-text-fade: #b9b9b9;
    /* Website */
    --clr-banner-bg: #ffffe6;
    --clr-banner-border: #d0d05e;
    --clr-body-bg: #fff;
    --clr-nav-bg: #7cae7c;
    --clr-nav-bg-hl: lightgreen;
    --clr-title-bg: #fafff0;

    /* Dimensions */

    --dim-page-paragraph-width: 670px;
    --dim-page-max-width: 900px;
    --dim-page-ultrawidth: 1200px;
    --dim-headerbar-height: 46px;
    --dim-drop-menu-width: 140px;
    --dim-nav-button-horizontal-padding: 13px;
}

/*
 * Animation keyframes
 */

@keyframes fade-in {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

/*
 * General adjustment classes
 */

.no-margin {
    margin: 0;
}
.no-margin-top {
    margin-top: 0;
}
.no-margin-bottom {
    margin-bottom: 0;
}

.center {
    text-align: center;
}
.center p {
    /* Override paragraph defaults */
    text-align: center;
}

.horizontal-center {
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
}

/*
 * Text styles
 */

html {
    font-family: "Source Sans Pro", "sans-serif";
    font-size: 17px;
    font-weight: normal;
    color: var(--clr-text);
    background-color: var(--clr-title-bg);
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: 'Libertinus Sans', 'sans-serif';
    font-weight: 600;
    color: var(--clr-heading);
    padding: 0;
    margin: 2.0rem 0 0.9rem;
    line-height: 1.24em;
}
h1 {
    font-size: 2.441rem;
}
h2 {
    font-size: 1.953rem;
}
h3 {
    font-size: 1.563rem;
}
h4 {
    font-size: 1.25rem;
}
h5 {
    font-size: 1rem;
}

p, li, td {
    line-height: 1.5em;
}

p {
    margin: 10px 0 10px 0;
    padding: 0;
    text-align: left;
    text-justify: inter-word;
}

a {
    text-decoration: underline;
    color: var(--clr-link);
    transition: color 160ms ease;
}
a:hover {
    color: var(--clr-link-hl);
}
a:visited {
    color: var(--clr-link);
}

em {
    font-weight: 600; /* semibold */
    font-style: normal;
}

ul {
    margin: 0.6em 0;
    padding-left: 35px;
}
ul li {
    margin: 4px 0;
}

ul.small-padding {
    padding-left: 25px;
}

small {
    font-size: 0.8rem;
}

/*
 * Page
 */

body {
    margin: 0px;
    padding: 0;
    background-color: var(--clr-body-bg);
}

div#wrap {
    background-color: var(--clr-body-bg);
    margin: 0 auto;
    padding: 10px;
    max-width: var(--dim-page-paragraph-width);
    width: calc(100vw - 40px);
}

/* Section without div#wrap */
body > section {
    max-width: var(--dim-page-paragraph-width);
    width: calc(100vw - 40px);
    display: block;
    margin: 0 auto;
}

section.wide {
	max-width: var(--dim-page-max-width);
}

section.ultrawide {
	max-width: var(--dim-page-ultrawidth);
}

/*
 * Header
 */

header {
    margin: 0;
    padding: 0;
    background-color: var(--clr-nav-bg);
    height: var(--dim-headerbar-height);
}

div#header-wrap {
    width: calc(100vw - 12px);
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Header: site title */

div#site-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    max-width: 120px;
    font-size: 20pt;
    font-weight: 600;
    text-align: center;
}

div#site-title img#site-logo {
    max-height: calc(var(--dim-headerbar-height) - 2*3px);
    display: block;
    padding: 3px;
}

/* Header: navigation */

div#navbar {
    display: flex;
    flex-direction: row;
    justify-content: right;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--clr-nav-bg);
}

nav#navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 670px;
    margin: 0;
}
nav#navigation ul {
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 10;
}
nav#navigation > ul {
    height: var(--dim-headerbar-height);
}
nav#navigation ul li {
    display: block;
    float: left;
    position: relative;
    padding: 0;
    margin: 0;
    height: var(--dim-headerbar-height);
}
nav#navigation a {
    display: flex;
    padding: 0 var(--dim-nav-button-horizontal-padding);
    align-items: center;
    color: var(--clr-nav-text);
    height: var(--dim-headerbar-height);
    text-align: center;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease;
}
nav#navigation a:hover {
    background-color: var(--clr-nav-bg-hl);
    color: var(--clr-nav-text-hl);
}
/* Second level menus */
nav#navigation ul ul {
    display: none;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 100%;
    width: var(--dim-drop-menu-width);
    padding: 0;
    margin: 0;
    background-color: var(--clr-title-bg);
}
nav#navigation ul ul a {
    color: var(--clr-text);
    width: calc(var(--dim-drop-menu-width) - 2*var(--dim-nav-button-horizontal-padding));
}
/* Reveal submenu on hover */
nav#navigation ul li:hover ul {
    display: block;
    opacity: 1;
    animation: fade-in 150ms ease-out;
}

nav#navigation ul li.narrow a {
    padding: 0 calc(0.5 * var(--dim-nav-button-horizontal-padding));
}
nav#navigation ul li img {
    display: inline;
    height: calc(0.7 * var(--dim-headerbar-height));
    object-fit: cover;
}

/* Header: mobile menu button */

div#nav-menu-button {
    display: none;
    height: 38px;
    padding: 0 0.6em 0 1em;
    margin: auto 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: right;
    align-items: center;
    color: var(--clr-nav-text);
}

div#nav-menu-button > img {
    cursor: pointer;
    height: 20px;
    max-width: 28px;
    object-fit: cover;
}

/* Header: language flags */

div#lang-flags {
    height: var(--dim-headerbar-height);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 0.4em;
    margin-right: 0.1em;
}

div#lang-flags img {
    display: inline;
    height: calc(0.6 * var(--dim-headerbar-height));
    object-fit: cover;
    margin-top: 0.25em
}

/* Header: hide navigation on small screens and display menu instead */
@media screen and not (min-width: 800px), screen and ((pointer: none) or (hover: none)) {
    /* Reserve space for "floating" header */
    /* Do not do this if the header is transparent */
    body:not(.transparent-header) {
        margin-top: 46px;
    }

    /* Header always visible at the top of the viewport */
    header {
        position: fixed;
        width: 100%;
        top: 0;
    }

    nav#navigation {
        display: none;
    }

    div#nav-menu-button {
        display: flex;
    }
}

/*
 * Transparent header
 */

header.transparent {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    transition: background-color 200ms;
}
header.transparent:hover {
    background-color: var(--clr-nav-bg);
}

header.transparent div#navbar {
    background-color: inherit;
}

/*
 * Mobile navigation menu
 */

div#nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-nav-bg);
    color: var(--clr-nav-text);
    animation: fade-in 150ms ease-out;
    z-index: 99;
}

div#nav-menu div.menu-buttons {
    display: flex;
    width: calc(100% - 10px);
    padding: 5px;
    flex-direction: row;
    justify-content: right;
}
div#nav-menu div.menu-buttons img {
    max-height: 30px;
    max-width: 30px;
    margin: 10px;
    cursor: pointer;
}

div#nav-menu > a.logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

div#nav-menu > a.logo > img {
    max-height: 50px;
    max-width: 80%;
}

nav#mobile-navigation {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 10px 24px;
    overflow-y: scroll;
    max-height: calc(100vh - 100px - 2*16px);
}

nav#mobile-navigation ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

nav#mobile-navigation li {
    margin-bottom: 10px;
}

nav#mobile-navigation ul ul {
    margin-left: 26px;
}

nav#mobile-navigation a {
    font-size: 18pt;
    color: inherit;
}

nav#mobile-navigation a.no-link {
    text-decoration: none;
    margin-left: 6px;
    cursor: default;
}

nav#mobile-navigation ul li img {
    display: inline-block;
    height: 1.2em;
    object-fit: cover;
}

/*
 * Page content
 */

article, section {
    margin: 0;
    padding: 0;
}

/*
 * Figures and quotes
 */

figure {
    text-align: center;
    margin: 18px 40px;
}
@media only screen and (max-width: 400px) {
    figure {
        margin: 18px 2px;
    }
}

figure img {
    max-width: 100%;
}

@media (width > 520px) {
    /* Narrow figure (image) */
    figure.narrow img {
        max-width: 400px;
    }
}

/* Multiple smaller figures (images) */
figure.small-images {
    margin-left: 10px;
    margin-right: 10px;
}
figure.small-images img {
    max-width: 48%;
    max-height: 420px;
    margin: 3px;
}
@media only screen and (max-width: 400px) {
    figure.small-images img {
        margin: 1px;
    }
}

/*
 * Quotes
 */

blockquote {
    line-height: 1.5em;
    margin: 28px auto 24px;
    width: 500px;
    max-width: 75vw;
    min-width: 50%;
}

blockquote cite {
    display: block;
    text-align: right;
    margin-right: 50px;
    margin-top: -5px;
    font-style: italic;
}

/*
 * Tables
 */

table {
    border-collapse: collapse;
    margin: 18px;
}

td {
    padding: 6px 10px;
    border: 1px solid var(--clr-table-border);
}

th {
    padding: 6px 10px;
    background-color: var(--clr-table-header);
    border: 1px solid #ddd;
    font-weight: 600;
}

tr:nth-child(even){
    background-color: var(--clr-table-shade);
}

table.center2 td:nth-child(2) {
    text-align: center;
}

/* Nutrient comparison table */

table.nutrient-comparison,
table.nutrient-comparison th,
table.nutrient-comparison td {
    text-align: center;
}

table.nutrient-comparison th,
table.nutrient-comparison td {
    padding: 6px;
}

table.nutrient-comparison th > img {
    max-width: 40px;
    max-height: 40px;
    margin-bottom: 2px;
}

table.nutrient-comparison td.l1 {
    background-color: var(--emph-color-1);
}
table.nutrient-comparison td.l2 {
    background-color: var(--emph-color-2);
    color: var(--clr-nav-text);
}

table.nutrient-comparison td:nth-of-type(1) {
    text-align: left;
    background-color: var(--block-background-color);
}

/* Container for vertical-scroll-enabled table */

div.vertical-scroll {
    overflow-x: auto;
}

/* First column emphasis table */

table.first-column-emph td:nth-of-type(1) {
    background-color: var(--emph-color-1);
}

/* First column centered table */

table.first-column-centered td:nth-of-type(1) {
    text-align: center;
}

/*
 * Buttons
 */

div.buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px auto;
}

a.button {
    display: inline-block;
    border-radius: 40px;
    background-color: var(--clr-nav-bg);
    color: var(--clr-nav-text);
    padding: 0.6em 1.4em;
    text-decoration: none;
    margin: 5px 9px;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
    font-weight: 600;
}
a.button:hover {
    background-color: var(--clr-nav-bg-hl);
    color: var(--clr-nav-text-hl);
}

a.button-light {
    border: 2px solid var(--clr-nav-bg);
    background-color: white;
    color: var(--clr-text);
    color: var(--clr-nav-bg);
}
a.button-light:hover {
    border-color: var(--clr-nav-bg-hl);
    background-color: var(--clr-nav-bg-hl);
    color: var(--clr-nav-text-hl);
}

div.button a {
    display: block;
    text-decoration: none;
}

/* Additional button styles */

a.button.pink {
	background-color: #c80c7e;
    color: var(--clr-nav-text);
	border: 0.2em solid #c80c7e;
}
a.button.pink:hover {
	background-color: #fbc93573;
	border-color: #ecc700;
	color: #a8555e;
}
a.button-light.pink {
	border-color: #c80c7e;
    background-color: #ffffff7d;
    color: #aa073d;
}
a.button-light.pink:hover {
	background-color: #c80c7e;
	border-color: #c80c7e;
    color: var(--clr-nav-text);
}

a.button.gold {
	background-color: #ffe34c;
    color: var(--clr-text);
}
a.button.gold:hover {
	background-color: #ffad56;
    color: var(--clr-text);
}

/*
 * Additional styles
 */

/* Address */

ul.address {
    margin: 18px 20px;
    padding: 0;
    /* color: var(--clr-contact); */
}
ul.address li {
    list-style-type: none;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Plain list */

ul.plain {
    list-style-type: none;
    padding: 0;
}

ul.plain li {
    margin-bottom: 4px;
}

/* Title page hero banner */

div.hero-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

div.hero-banner img.banner-background {
    display: block;
    width: 100vw;
    height: 690px;
    object-fit: cover;
    box-shadow: 0 0 10px #090102;
}

div.hero-banner div.banner-content {
    position: absolute;
    top: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
}

div.hero-banner div.banner-content div.column-right {
    width: calc(100vw - 20px);
    max-width: 440px;
    margin-left: auto;
    margin-right: 15px;
    margin-top: 115px;
    text-align: right;
}

div.hero-banner div.banner-content h1 {
    /* color: var(--clr-text-embanner); */
    color: #640c0c;
    font-style: normal;
    font-family: 'Libertinus Sans';
    font-size: 2.7rem;
    text-shadow: 3px -3px 8px #de908e;
    margin-left: auto;
    margin-right: 0;
    /* Linear width adjustment to avoid collision with the dark figure */
    max-width: calc(40vw + 122px);
}

div.hero-banner div.banner-content p {
    font-size: 1.05rem;
    margin-left: auto;
    margin-right: 0;
}

div.hero-banner div.banner-content div.column-right p {
    text-align: right;
    /* Linear width adjustment to avoid collision with the dark figure */
    max-width: calc(40vw + 135px);
}

div.hero-banner div.banner-content div.buttons {
    margin-top: 16px;
}
div.hero-banner div.banner-content div.column-right div.buttons {
    justify-content: right;
}

.hero-banner .platforms {
    display: flex;
    justify-content: right;
    margin-top: 1em;
    margin-right: 1em;
    font-size: 1.2em;
}
.hero-banner .platforms img {
    height: 2em;
    margin-right: 0.3em;
}
.hero-banner .platforms a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--clr-nav-text);
}
.hero-banner .platforms a:hover {
    color: red;
}
.hero-banner .platforms a:visited {
    color: var(--clr-nav-text);
}
@media screen and (max-width: 420px) {
    .hero-banner .platforms {
        margin-top: 0.5em;
    }
}

/* Photo credit for the banners */

div.hero-banner cite {
    position: absolute;
    bottom: -1.9em;
    width: 100%;
    padding-right: 1.1em;
    color: #828282;
    text-align: right;
    font-style: normal;
    font-size: 0.8rem;
    z-index: 3;
}

/* Title page programme options */

.programme-options {
	margin: 0.5em auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center
}

.programme-options .option {
	display: flex;
	flex-direction: column;
    flex-wrap: nowrap;
	border: 1px solid var(--clr-table-border);
	border-radius: 1em;
	padding: 1em;
	min-width: 220px;
	max-width: 250px;
	margin: 0.4em;
}
.programme-options .option.emph {
    background-color: #fdfff1;
}

.programme-options .header {
	text-align: center;
}
.programme-options .header h3 {
	margin-top: 0;
	margin-bottom: 0.4em;
}
.programme-options .header .price {
	font-size: 1.2em;
}

.programme-options hr {
	border: none;
	border-top: 1px solid var(--clr-table-border);
	margin: 1.2em auto;
	width: 30%;
}

.programme-options .body ul {
	padding-left: 18px;
}

.programme-options .strikeout {
    color: grey;
    text-decoration: line-through;
}

.programme-options .action {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
    flex-wrap: nowrap;
	justify-content: end;
    text-align: center;
}

/* Text banner */

div.banner {
    width: 80%;
    margin: 14px auto;
    padding: 18px;
    background-color: var(--clr-banner-bg);
    border: 3px solid var(--clr-banner-border);
}

div.banner h1,
div.banner h2,
div.banner h3 {
    text-align: center;
    margin-top: 0px;
}

/* Contact options */

div.contact-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 30px;
}

div.contact-option {
    min-width: 150px;
    max-width: 300px;   
    margin: 20px;
    text-align: center;
}

div.contact-option img.contact-icon {
    display: block;
    height: 48px;
    margin: 0 auto;
}

div.contact-option h3 {
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0.6em 0 0.2em;
}

div.contact-option div.contact {
    font-size: 1.15rem;
    margin: 10px;
}
div.contact-option div.contact a {
    color: var(--clr-contact);
}
div.contact-option div.contact a:hover {
    color: var(--clr-contact-hl);
}

div.contact-option div.info {
    margin: 5px;
}

/* Last modified text */

div.last-modified {
    font-style: italic;
    font-size: 12pt;
    font-weight: lighter;
    color: var(--clr-text-fade);
}

/* Inline icon */

img.icon {
    display: inline;
    vertical-align: middle;
    max-height: 0.98em;
    margin-bottom: 0.15em;
    margin-right: 0.07em;
}

/* GPG key */

div#gpg-key {
    margin: 16px auto;
    max-width: 450px;
    text-align: center;
}

div#gpg-key a {
    display: block;
    margin-top: 4px;
}

div#gpg-key small {
    display: block;
    margin-top: 8px;
}

/* Footer */

footer {
    margin: 20px 0 0;
    padding: 12px 6px 8px;
    text-align: center;
    background-color: var(--clr-title-bg);
    border: 2px var(--clr-nav-bg);
    border-style: solid none none;
}

footer p {
    font-size: 0.8rem;
    text-align: inherit;
    margin: 4px 0;
}

img#footer-logo {
    display: block;
    margin: 18px auto 8px;
    height: 80px;
}

/* Footer: navigation */

nav#footer-nav {
    margin-bottom: 0.6em;
}

/* Features */

div.features-heading {
    text-align: center;
    max-width: 800px;
    margin: 2.6em auto 1.2em;
}
div.features-heading > h2 {
    text-align: inherit;
    margin-bottom: 0.4em;
}
div.features-heading > p {
    text-align: inherit;
    font-size: 12pt;
}

div.features {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    margin: 10px auto;
}

div.features > div.feature {
    border: 2px solid #f4f4f4;
    border-radius: 1em;
    padding: 15px;
    width: 230px;
    margin: 9px;
    text-align: center;
}

div.features > div.feature > img {
    display: block;
    max-width: 150px;
    max-height: 45px;
    margin: 0 auto 15px;
}

div.features > div.feature > h5 {
    font-size: 13pt;
    font-weight: 600;
    margin: 9px 0;
    text-align: inherit;
}

div.features > div.feature > p {
    font-size: 12pt;
    text-align: inherit;
}

/* Prevent text very near screen edges on small screens */
@media screen and not (min-width: 500px) {
    div.features-heading {
        max-width: 92%;
    }
}

/* Programme details headings */

div.programme-headings {
    margin: 0 auto;
    text-align: center;
    width: calc(100vw - 40px);
}
div.programme-headings h1 {
    margin-bottom: 0;
}
div.programme-headings h3 {
    margin-top: 0.45em;
}

/* Newsletter subscribe */

div.newsletter-subscribe {
    text-align: center;
    max-width: 600px;
    margin: 30px auto 16px;
}
div.newsletter-subscribe h2 {
    text-align: inherit;
    margin-bottom: 10px;
}
div.newsletter-subscribe p {
    text-align: inherit;
}

/* Icon-text rows */

ul.icon-text-rows {
    list-style: none;
    max-width: 640px;
    margin: 2.3em auto;
    padding: 0;
}

ul.icon-text-rows > li {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 1.5em 0;
}
ul.icon-text-rows > li:nth-child(odd) {
    flex-direction: row;
    text-align: left;
}
ul.icon-text-rows > li:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}

ul.icon-text-rows > li > img {
    height: 3.4em;
    width: 3.4em;
    margin: 0 1.7em;
    object-fit: contain;
    flex-shrink: 0;
}

ul.icon-text-rows > li > span {
    max-width: 360px;
}

/*
 * Bibliography sources
 */

/* Source citations */

sup.citation {
    color: var(--clr-text-fade);
    font-size: 0.7em;
    vertical-align: top;
    position: relative;
    top: -0.4em;
}

sup.citation > a {
    text-decoration: none;
    color: var(--clr-text-fade);
}

/* Sources list */

ol.sources {
    list-style: none;
    padding-left: 12px;
}

ol.sources > li {
    margin: 6px 0;
    line-height: 1.25em;
}

/*
 * Index blocks
 */

div.index-blocks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

div.index-block {
    width: 250px;
    max-width: calc(100vw - 2*10px);
    min-width: 150px;
    border: 3px solid var(--clr-table-border);
    border-radius: 12px;
    padding: 10px 15px;
    margin: 10px;
    background-color: var(--clr-body-bg);
}

div.index-block img {
    height: 60px;
    max-width: 70px;
    object-fit: contain;
    display: block;
    margin: 8px auto;
    text-align: center;
}
div.index-block img.small {
    height: 50px;
    width: 50px;
    padding: 5px;
}
div.index-block img.medium {
    height: 54px;
    width: 54px;
    padding: 3px;
}

div.index-block h3 {
    font-size: 20px;
    margin: 10px 0;
    text-align: center;
}

div.index-block ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

div.index-block ul li {
    margin: 7px 0;
}

/*
 * Table of contents
 */

div#kazalo {
    display: table;
    border-left: 2px solid var(--clr-heading);
    padding: 6px 0;
    padding-left: 18px;
}

div#kazalo > h3 {
    margin: 0;
    margin-bottom: 0.2em;
}

div#kazalo ul {
    list-style: none;
    padding-left: 22px;
    padding-right: 0px;
    margin: 0;
}
div#kazalo ul.h1 {
    padding-left: 0;
    padding-right: 10px;
    margin: 7px 0 5px;
}
div#kazalo ul.h2 {
    padding-left: 18px;
}

div#kazalo ul li {
    margin: 5px 0;
}

/*
 * Site search box
 */

form.site-search {
    text-align: center;
    margin: 14px auto;
}

form.site-search > img {
    height: 36px;
    width: 36px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 3px;
}

form.site-search > input.site-search {
    font-family: inherit;
    font-size: inherit;
    max-width: 200px;
    height: 32px;
}

/*
 * Specials lists
 */

ul.special {
    list-style-type: none;
    padding-left: 0.7em;
}

ul.special > li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
    margin: 0.6em 0;
}

ul.special > li > div.mark {
    height: 1.4em;
    width: 1.4em;
    margin-right: 0.7em;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    /* Show bright colour when someone forgets to define mark type */
    background-color: red;
}

/* Tick marks */

ul.special.mark-tick > li > div.mark {
    margin-top: 0.03em;
    background-image: url('/img/icons/tick.svg');
    background-color: unset;
}

/* Cross marks */

ul.special.mark-cross > li > div.mark {
    height: 0.85em;
    /* width: 0.85em; */
    margin-top: 0.33em;
    background-image: url('/img/icons/cross.svg');
    background-color: unset;
}

/* Star marks */

ul.special.mark-star > li > div.mark {
    height: 0.85em;
    margin-top: 0.30em;
    background-image: url('/img/icons/star.svg');
    background-color: unset;
}

/*
 * Recipe box
 */

div.recipe-box {
    border: 2px solid var(--clr-table-border);
    border-radius: 15px;
    max-width: 80%;
    padding: 0.8em;
    margin: 2em 0.4em;
}
@media (max-width: 600px) {
    div.recipe-box {
        max-width: 100%;
    }
}

div.recipe-box h2 {
    /* Major second type scale */
    font-size: 1.266rem;
    margin: 0;
}

div.recipe-box h3 {
    /* Major second type scale */
    font-size: 1.125rem;
    margin: 0.3em 0 0;
}

div.recipe-box div.basic-data {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

div.recipe-box div.basic-data > div {
    margin: 0.4em 1.2em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

div.recipe-box div.basic-data img {
    display: block;
    width: 3em;
    height: 3em;
    object-fit: contain;
    margin: 0.6em;
}

div.recipe-box div.basic-data span.title {
    font-weight: 600;
    margin-bottom: 0.17em;
}

div.recipe-box ul {
    margin: 0.3em 0;
    padding-left: 1.3em;
}
div.recipe-box ul li {
    line-height: 1.4em;
}

/*
 * Blog
 */

#blog-list ul {
    list-style: none;
    padding-left: 1em;
}

#blog-list li {
    margin: 0.6em 0;
}
#blog-list li > a {
    font-size: 1.25em;
}

#blog-list div-desc {
    display: block;
    font-style: italic;
    margin-top: 0.1em;
}

/*
 * Players
 */

audio {
    display: block;
    margin: 1.2em 0.6em;
}
audio.wide {
    width: 450px;
    max-width: 85%;
}

/*
 * Forms
 */

form, textarea, input {
    font-family: "Source Sans Pro", "sans-serif";
    font-size: 1rem;
    color: var(--clr-text);
}

form input, form textarea {
	padding: 0.5em 0.8em;
	margin: 0.25em;
	border-radius: 20px;
	border: solid var(--clr-table-header);
	background-color: #fdfffb;
}

form input[type='submit'], form button {
    background-color: var(--clr-nav-bg);
    border-color: var(--clr-nav-bg);
    color: var(--clr-nav-text);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
    font-weight: 600;
    cursor: pointer;
    padding-left:  2em;
    padding-right: 2em;
    border-radius: 50px;
}

form input[type='submit']:hover, form button:hover {
    background-color: var(--clr-nav-bg-hl);
    color: var(--clr-nav-text-hl);
}

form img.label-icon {
    display: inline-block;
    height: 1.6em;
    width: 1.6em;
    object-fit: contain;
    margin-right: 0.3em;
}

/* Spam honeypot */

form .kozarec-medu {
    display: none;
}

/* Contact request form */

form.contact-request {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5em auto 3em;
}

form.contact-request .grid {
    display: grid;
    grid-template-columns: 2.2em 1fr;
    row-gap: 0.1em;
    align-items: center;
    justify-items: right;
    margin: 0.1em 0.5em;
}

form.contact-request input {
    max-width: 13em;
}
form.contact-request .grid input[type='submit'] {
    grid-column: 1/-1;
    justify-self: center;
}

/* Contact request form send result */

img.send-result {
    display: block;
    height: 5em;
    object-fit: contain;
    margin: 3em auto 3em;
}

/* Contact form heading */

div.form-heading {
    text-align: center;
    max-width: 800px;
    margin: 2.6em auto 1.2em;
}
div.form-heading > h2 {
    text-align: inherit;
    margin-bottom: 0.4em;
}
div.form-heading > p {
    text-align: inherit;
    width: 600px;
    max-width: calc(100vw - 20px);
    margin-left: auto;
    margin-right: auto;
}