/* Fonts and Icons */
@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: normal;
	src:
        url('../fonts/CommitMonoNerdFontPropo-Regular.otf')
        format('opentype');
}

@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: bold;
	src:
        url('../fonts/CommitMonoNerdFontPropo-Bold.otf')
        format('opentype');
}

@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: normal;
	font-style: italic;
	src:
        url('../fonts/CommitMonoNerdFontPropo-Italic.otf')
        format('opentype');
}

@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: bold;
	font-style: italic;
	src:
        url('../fonts/CommitMonoNerdFontPropo-BoldItalic.otf')
        format('opentype');
}

/* Root Styles and Variables */
:root {
	font-family: 'CommitMono Nerd Font';
    --size-0: clamp(15px, 0.875rem + 0.4vw, 18px);
    /* Fluid heading sizes */
    --size-h1: clamp(1.35rem, 1.1rem + 1vw, 2rem);
    --size-h2: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
    --size-h3: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --size-h4: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    --size-h5: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    --size-h6: clamp(0.98rem, 0.92rem + 0.1vw, 1.05rem);
    --bg-primary: #FBF1C7;
    --bg-secondary: #EBDBB2;
    --text-primary: #282828;
    --text-secondary: #504945;
    --accent-red: #CC241D;
    --accent-blue: #458588;
    --accent-green: #98971A;
    --accent-yellow: #D79921;
    --accent-purple: #B16286;
    --accent-aqua: #689D6A;
    --accent-orange: #D65D0E;
    --accent-gray: #928374;
    --content-max: 50rem;
    --gutter: 1rem;
}

/* Dark Mode Variable overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #282828;
        --bg-secondary: #3C3836;
        --text-primary: #FBF1C7;
        --text-secondary: #D5C4A1;
        --accent-red: #FB4934;
    }
}

a {
    color: var(--text-primary);
}

a:hover {
    color: var(--accent-blue)
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
    font-size: var(--size-0);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
}

.container {
    width: min(100% - calc(var(--gutter) * 2), var(--content-max));
    margin-inline: auto;
}

img,video,svg {
    max-width: 100%;
    width: auto;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}

/* Heading scale */
h1 { font-size: var(--size-h1); line-height: 1.2; }
h2 { font-size: var(--size-h2); line-height: 1.25; }
h3 { font-size: var(--size-h3); line-height: 1.3; }
h4 { font-size: var(--size-h4); line-height: 1.35; }
h5 { font-size: var(--size-h5); line-height: 1.4; }
h6 { font-size: var(--size-h6); line-height: 1.45; }

header {
    display: flex;
    padding: 2rem 0;

    .site-header-left {
        flex-grow: 1;
    }
    .site-header-right {
        flex-shrink: 1;
    }

    .site-title {
        color: var(--accent-yellow);
        text-decoration: none;
    }

    ul.nav {
        flex: shrink;
        padding: 0;
        margin: 0;
        li {
            display: inline-block;
            list-style: none;
        }
        a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 0.5rem;

        }

        a:hover {
            color: var(--accent-blue);
        }
    }
}

main {
    padding: 2rem 0;
}

.latest-post {
    cursor: pointer;

    .latest-post-title {
        font-size: 1.5rem;
        font-weight: bold;
        padding: 0;
        margin: 0;
        a {
            text-decoration: none;
        }
    }

    .latest-post-meta {
        color: var(--text-secondary);
    }
    .latest-post-excerpt {
        color: var(--text-secondary);
    }
}

.latest-post:hover > .latest-post-title {
    color: var(--accent-blue);
}

.post-index {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            padding: 0.5rem 0;
        }
    }
}

.home-template {
    h2,h3,h4,h5,h6 {
        color: var(--text-secondary);
        font-size: inherit;
        font-weight: normal;
    }

    section {
        padding: 1rem 0;
    }

    .links {
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li {
            vertical-align: center;
        }
    }
}

a.post-index-title {
    color: var(--text-primary);
}

/* Post and Page Styling */
article {
    line-height: 1.6em;
    .post-date {
        color: var(--text-secondary);
    }

    hr {
        border: none;
        height: 1px;
        background-color: var(--accent-gray);
        margin: 1rem 0;
    }

    h1,h2,h3,h4,h5,h6 {
        font-weight: bold;
        color: var(--accent-red);
    }

    h1::before {
        content: "# ";
    }

    h2::before {
        content: "## ";
    }

    h3::before {
        content: "### ";
    }

    h4::before {
        content: "#### ";
    }

    h5::before {
        content: "##### ";
    }

    h6::before {
        content: "###### ";
    }
}

.breadcrumb {
    color: var(--text-secondary);
}

/* Utility Classes */
.blue {
    color: var(--accent-blue);
}
.green {
    color: var(--accent-green);
}
.yellow {
    color: var(--accent-yellow);
}
.purple {
    color: var(--accent-purple);
}
.aqua {
    color: var(--accent-aqua);
}
.orange {
    color: var(--accent-orange);
}