/*
Theme Name: danj.ca
Author: Dan Jacobson
Author URI: https://www.danj.ca

Here goes nothin'
*/

/*
 * Colour palette
 * Derived from https://www.reasonable.work/colors/cerulean/
 */
:root {
    --color-bg: #E8F6FF;
    --color-text: #001D2A;
    --color-title: #00749D;
    --color-subtitle: #003C54;
    --color-header: #633300;
    --color-link: #D57300;
    --color-link-visited: #633300;

    background-color: var(--color-bg);
    color: var(--color-text);
}

/*
 * Typography
 */

/*
 * XCharter (serif)
 */

@font-face {
    font-family: 'XCharter';
    src: url('../fonts/xcharter-bold-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'XCharter';
    src: url('../fonts/xcharter-bolditalic-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'XCharter';
    src: url('../fonts/xcharter-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'XCharter';
    src: url('../fonts/xcharter-roman-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*
 * Space Grotesk (sans?)
 */

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Light.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
    font-weight: bolder;
    font-style: normal;
}

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

body {
    font-family: 'Space Grotesk',sans-serif;
    font-weight: 100;
}


/*
 * Header section layout
 */

#header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}

hgroup {
        flex: 1;
}

#random-quote {
    flex: 0.5; /* shrink at twice the rate of the titles */
    text-align: right;
    margin-left: 2em;
}

nav {
    margin-top: 1em;
}

@media (max-width: 700px) {
    #header-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5em;
    }

    #random-quote {
        text-align: left;
        margin-left: 0;
    }
}

/*
 * Header section stylin'
 */

#site-title {
    font-weight: bold;
    color: var(--color-title);
}

#site-subtitle {
    font-style: italic;
    color: var(--color-subtitle);
}

#random-quote {
    font-size: 0.85em;
    color: var(--color-subtitle);
}

#quote-attribution {
    font-size: 0.8em;
    font-style: normal;
    text-indent: 0.5em;
}

/* Horizontalize the nav links */
nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5em;
}

nav ul li {
    margin: 0;
    padding: 0;
}

nav ul li:not(:last-child)::after {
    content: "//";
    margin-left: 0.5em;
}


/*
 * Link styles
 */

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

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

 a:hover {
    filter: brightness(1.2);
 }

 a:active {
    filter: brightness(1.1);
 }

 
.external-link::after {
    content: url("../svg/fontawesome-arrow-up-right-from-square-cropped.svg");
    display: inline-block;    
    width: 0.8em;
    height: 0.8em;
    padding-left: 0.4em;
}

/*
 * Element styles
 */

 h1, h2, h3, h4, h5, h6 {
    color: var(--color-header);
 }

 footer {
    font-size: 0.85rem;
 }