/* Copyright 2018 Oliver Smith
   SPDX-License-Identifier: GPL-3.0-or-later */

@font-face {
    font-family: "Josefin Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url(/static/fonts/josefin-sans-variable.ttf) format("truetype");
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/static/fonts/archivo-variable.ttf) format("truetype");
}

@font-face {
    font-family: "Archivo";
    font-style: italic;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url(/static/fonts/archivo-italic-variable.ttf) format("truetype");
}

@font-face {
    font-family: "Ruda";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/static/fonts/ruda-variable.ttf) format("truetype");
}

:root {
    --pmos-accent-colour: #008443;

    --inline-accent-colour: var(--pmos-accent-colour);

    --accent-background-colour: var(--pmos-accent-colour);
    --accent-foreground-colour: #f9f9f9;

    --view-background-colour: #f9f9f9;
    --view-foreground-colour: #000000;
    --view-selectable-colour: #1a1a1a;
    --view-selectable-hover-colour: var(--inline-accent-colour);

    --highlight-background-colour: #eeeeee;

    --secondary-background-colour: #eeeeee;

    --alternating-row-background-colour: color-mix(in srgb, white 20%, var(--view-background-colour));

    color-scheme: light dark;

    font-family: Archivo, sans-serif;
}

/* LINKS */
a {
    color: var(--view-selectable-colour);
}

a:hover {
    color: var(--view-selectable-hover-colour);
}

a svg {
    fill: currentColor;
}

/* GRID: OUTER */
body {
    display: grid;
    grid-template-areas: ". header ."
                         ". main   ."
                         "footer footer footer";
    grid-template-columns: auto minmax(300px, 70rem) auto;
    margin: 0px;

    background: var(--view-background-colour);
    line-height: 1.6;
    color: var(--view-foreground-colour);
}

h1, h1 a,
h2, h2 a,
h3, h3 a,
h4, h4 a,
h5, h5 a,
h6, h6 a {
    font-family: Josefin Sans, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    color: var(--inline-accent-colour);
    text-align: center;
    text-wrap: balance;
    margin: 1em 0 .2em;
}

:where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6) {
    margin-top: .2em !important;
}

h1 { font-size: clamp(2.4rem, 6vw, 3.5rem); font-weight: bold; }
h2 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); }
h3 { font-size: clamp(1.6rem, 5vw, 2.8rem); }
h4 { font-size: clamp(1.4rem, 4.5vw, 2.5rem); }
h5 { font-size: clamp(1.2rem, 4vw, 2.0rem); }
h6 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); }

/* MAIN */
main {
    grid-area: main;
}

.content {
    padding: 10px 30px 40px;
    font-size: 1.2rem;
}

.content.alt {
    background: var(--secondary-background-colour);
}

.codehilite pre,
pre.codehilite {
    font-size: 0.8rem;
    overflow: auto;
}

.separator {
    background: var(--accent-background-colour);
    height: 10px;
}

/* GRID: HEADER */
.header {
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5em 2em;
    margin: 30px;
}

/* GRID: LOGO */
.logo {
    grid-area: logo;
    display: grid;
    align-items: center;
    grid-template-areas: "logo-img logo-span";
    grid-template-columns: 90px 1fr;
    min-height: 90px;

    text-decoration: none;
}

.logo img {
    grid-area: logo-img;

    width: 75px;
    height: 75px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .12));
}

.logo span {
    grid-area: logo-span;
    font-size: 2rem;
    color: var(--inline-accent-colour);
    font-family: Ruda, Archivo, sans-serif;
    font-weight: 750;
}

/* GRID: NAVIGATION */
.nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: auto 0;
}

.nav a,
.start-about-button a {
    font-size: 1.3rem;
    border: 2px solid var(--accent-background-colour);
    color: var(--inline-accent-colour);
    padding: .2em .3em;
    text-decoration: none;
}

.nav a:hover,
.start-about-button a:hover,
.nav a.active {
    background: var(--accent-background-colour);
    color: var(--accent-foreground-colour);
}

/* TITLE RELATED */
.title {
    display: grid;
    grid-template-areas: "title title"
                         "date reading_time";
    margin: 0 1rem;
}

.title h1 {
    grid-area: title;

    text-align: center;
    display: block;
    margin-top: 0;

    /* treat \n like <br> (we replace ":" with ":\n" in post titles) */
    white-space: pre-line;
}

.date {
    grid-area: date;
}

.reading_time {
    grid-area: reading_time;
    text-align: right;
}


/* GRID: FOOTER */
footer {
    grid-area: footer;
    display: grid;
    grid-template-areas: "contribute . nav-bottom"
                         "contribute . copyright";
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background-color: var(--accent-background-colour);
}

.nav-bottom {
    grid-area: nav-bottom;
    margin: 15px 30px 0px;
    text-align: right;
}

/* GRID: ICON BUTTON */
.icon-button {
    display: inline-grid;
    grid-template-areas: "icon-button-icon icon-button-label";
    grid-template-columns: auto auto;
    padding: .3em .5em;
    align-items: center;
    background: white;
    text-decoration: none;
    margin-left: 2px;
}

.icon-button :where(img, svg) {
    grid-area: icon-button-icon;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.icon-button span {
    grid-area: icon-button-label;
    text-decoration: none;
}

.contribute {
    grid-area: contribute;
    font-size: 1.6rem;
    padding: .3em .75em;
    margin: 0px 30px;
    height: calc(100% - 30px);
    box-sizing: border-box;
}
.contribute span {
    text-decoration: none;
}

.contribute svg {
    width: 48px;
    height: 48px;
    margin-right: 10px;
}

.copyright {
    grid-area: copyright;
    color: white;
    margin: .3em 2em 1em;
    font-size: .9rem;
    text-align: right;
}

img.inline {
    height: 1em;
}

.copyright a {
    color: white !important;
}

/* RESPONSIVENESS */
@media screen and (max-width: 50rem) {
    /* FOOTER */
    footer {
        grid-template-areas: "contribute"
                             "nav-bottom"
                             "copyright";
        grid-template-columns: 100%;
    }
    .nav-bottom {
        text-align: center;
    }
    .nav-bottom .icon-button {
        margin: 0px 2px 10px;
    }
    .nav-bottom .icon-button img {
        margin-right: 10px;
    }
    .contribute {
        height: unset;
        margin: 15px auto 0px;
    }
    .copyright {
        text-align: center;
    }
}

blockquote {
	font-style: italic;
	color: var(--inline-accent-colour);
	padding: 1.2em 30px 1.2em 75px;
	border-left: 10px solid var(--accent-background-colour);
	line-height: 1.6;
	position: relative;
	margin: 0;
}

blockquote::before {
	font-family: Helvetica;
	content: "\201C";
	color: var(--inline-accent-colour);
	font-size: 4em;
	position: absolute;
	left: 10px;
	top: -10px;
}

blockquote a {
	color: var(--inline-accent-colour);
}