/**
 * New green/orange/white look.
 * Currently used for:
 * - Home
 * - Resume
 * Could likely be linked from WPO page as well, if that continues...
 * Eventually, probably shift entire site to this?
 * Still need print section, and what about dark mode?
 * **/
:root {
    --background-dark:   #34a0a4;
    --background-med:    #a1c9c9;
    --background-light:  #f6f7f1;
    --main-color-accent: #f96900;
}
*, *::before, ::after {
    box-sizing: border-box;
}
html {
    background-color: var(--background-dark);
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
    @supports (container-type: scroll-state) {
        container-type: scroll-state;
    }
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    background-color: var(--background-light);
    color: #333;
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    text-rendering: optimizelegibility;
}
.skip-to-content {
    display: block;
    padding: 4px 6px;
    background-color: var(--background-light);
    background-color: rgb(from var(--background-light) r g b / .75);
    &:hover {
        background-color: var(--background-light);
    }
}
.skip-to-main {
    position: absolute;
    transform: translateY(0);
}
.skip-to-main:not(:focus) {
    transform: translateY(-5rem);
    @media (prefers-reduced-motion: no-preference) {
        transition: all 150ms;
    }
}
main {
    padding-block-end: 2rem;
}
hr {
    margin-inline: 10vw;
    color: rgba(0, 0, 0, 0.25);
}
blockquote {
    quotes: none;
    margin: 0;
    font-family: monospace;
    font-size: 1.25em;
    line-height: 1.5;
    &::before {
        content: '"';
        font-size: 3rem;
        font-family: cursive;
        line-height: 1;
    }
    & p {
        display: inline;
    }
}
figcaption {
    margin-block-start: 1rem;
}
img, video {
    display: block;
    max-width: 100%;
    height: auto;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--main-color-accent);
    text-shadow: 1px 1px 1px var(--background-med);
}
a {
    color: var(--background-dark);
    font-weight: bold;
    transition: all 150ms;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
}
a:hover {
    color: var(--main-color-accent);
}
header, footer {
    background-color: var(--background-dark);
    & * {
        color: var(--background-light);
    }
}
header {
    padding-block: 2rem;
    font-size: 2rem;
    text-shadow: 1px 1px 1px var(--background-med);
    & :is(h1, h2) {
        margin: 0;
        font-size: 2rem;
    }
    & .meta {
        display: grid;
        padding-block: 1rem;
    }
    & p {
        margin: 0;
        font-size: 1.5rem;
        &:is([itemprop="jobTitle"], [itemprop="name"]) {
            font-weight: bold;
        }
    }
    & a {
        color: var(--background-light);
    }
}
.main-nav {
    --animation-time: 250ms;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
    border-bottom: 1px solid var(--background-med);
    @supports (container-type: scroll-state) {
        @container scroll-state(scrollable: top) {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        }
    }
    /* Initially hide menu for large screens */
    & > .menu-main-nav-container {
        display: none;
        @media (min-width: 850px) {
            display: flex;
        }
    }
    & .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px 0;
        background-color: #333;
        @media (prefers-reduced-motion: no-preference) {
            transition: var(--animation-time);
        }
    }
    & details {
        interpolate-size: allow-keywords;
        /* Hide small screen menu for large screens */
        @media (min-width: 850px) {
            display: none;
        }
        &::details-content {
            block-size: 0;
            overflow: hidden;
            @media (prefers-reduced-motion: no-preference) {
                transition: all var(--animation-time) ease-in;
                transition-behavior: allow-discrete;
            }
        }
        &[open] {
            &::details-content {
                block-size: auto;
            }
            @media (prefers-reduced-motion: no-preference) {
                .bar1 {
                    transform: translate(0, 8px) rotate(-45deg);
                }
                .bar2 {
                    opacity: 0;
                }
                .bar3 {
                    transform: translate(0, -8px) rotate(45deg);
                }
            }
        }
    }
    & summary {
        display: flex;
        padding: 1rem;
        gap: 1rem;
        align-content: center;
        font-weight: bold;
        cursor: pointer;
        list-style: none;
        &::marker {
            content: none;
        }
    }
    & ul {
        max-width: 800px;
        list-style: none;
        margin-inline: auto;
        margin-block: 0;
        padding: 0;
        @media (min-width: 850px) {
            display: flex;
            flex-wrap: wrap;
            place-content: center;
            gap: 1rem;
        }
    }
    & a {
        display: block;
        padding-block: .5rem;
        padding-inline: 1rem;
        text-decoration: none;
        outline: 8px solid transparent;
        @media (min-width: 850px) {
            padding-inline: 0.5rem;
        }
        &:hover, .current_page_item & {
            background-color: var(--background-light);
            outline-color: var(--background-light);
        }
    }
}
footer {
    padding-block-end: 10rem;
    & :is(section) {
        justify-content: center;
        text-align: center;
        font-size: 1rem;
    }
}
.profile-pic {
    float: left;
    width: auto;
    margin: .35rem 1rem 1rem 0;
}
.container--media-content {
    display: grid;
    grid-template: "media-content";
    place-items: center;
    place-content: start;
    & > * {
        grid-area: media-content;
    }
}
.container--media {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: "media";
    place-items: stretch;
    place-content: stretch;
    & > * {
        grid-area: media;
    }
    & img, video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.container--content {
    position: relative;
    padding: 1rem;
    & > * {
        max-width: 800px;
        margin-inline: auto;
    }
    & div {
        border: 1px solid var(--background-med);
        border-radius: 0;
        background: white;
        padding: 1rem;
    }
}
.container--hero {
    position: relative;
    justify-content: center;
    text-align: center;
    overflow: clip;
    &::before, &::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
    }
    &::before {
        top: 0;
        background: radial-gradient(at 50% 0, rgba(0, 0, 0, 0.25), transparent 70%);
    }
    &::after {
        bottom: 0;
        background: radial-gradient(at 50% 0, rgba(0, 0, 0, 0.25), transparent 70%) bottom;
    }
    & .container--content {
        margin-block: 4rem;
        margin-inline: 1rem;
        padding-block: 6vw;
        padding-inline: 8vw;
        background-color: rgba(255 255 255 / 0.9);
        border: 1px solid rgba(0, 0, 0, 0.15);

    }
    & :is(h1, h2, p) {
        margin-block: .5rem;
    }
}
.container--callout {
    margin-block-end: 1rem;
    padding-block: 1rem;
    padding-inline: 1.5rem;
    background: radial-gradient(at 50% 0, rgb(0 0 0 / .25), transparent 70%), 
                radial-gradient(at 50% 0, rgb(0 0 0 / .25), transparent 70%) bottom;
    background-color: var(--background-med);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    border-inline-start: 4px solid var(--background-dark);
    & a {
        color: inherit;
    }
}
.container--logos {
    ul {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        place-content: center;
    }
    li {
        list-style: none;
        aspect-ratio: 120/50;
        place-content: center;
    }
    img {
        filter: grayscale(100%);
        max-width: 120px;
        max-height: 50px;
    }
}
.tags {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    & li {
        list-style: none;
        font-size: .8em;
        border: 1px solid var(--background-med);
        border-radius: 4px;
        padding-block: 2px;
        padding-inline: 4px;
        background-color: var(--background-light);
        color: var(--background-dark);
    }
}
.cards {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    & li {
        list-style: none;
        position: relative;
        flex: 1 0 300px;
        background-color: var(--background-light);
        border: 1px solid;
        border-radius: 1rem;
        padding: 1rem;
        cursor: zoom-in;
        @media (prefers-reduced-motion: no-preference) {
            will-change: opacity, filter, scale;
            transition: all 250ms;
        }
    }
    &:has(:hover) > li:not(:hover) {
        opacity: .5;
        filter: blur(2px);
    }
    & li:hover {
        scale: 1.1;
        z-index: 1;
    }
}
.social-links {
    padding-inline-start: 0;
    & li {
        list-style: none;
        padding-block: .5rem;
    }
    & a {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: var(--background-dark);
        &:hover {
            color: var(--main-color-accent);
            transition: all 150ms;
        }
    }
    & svg {
        inline-size: 40px;
        block-size: 40px;
        fill: currentColor;
    }
}
.social-share {
    display: flex;
    place-content: center;
    gap: 1rem;
    &::before {
        content: "Share via:";
        color: white;
        place-content: center;
    }
    & li:hover * {
        color: var(--main-color-accent);
        fill: var(--main-color-accent);
        transition: all 150ms;
    }
}
a[href="#top"] {
    position: fixed;
    inset-inline-start: 1rem;
    inset-block-end: 1rem;
    z-index: 1;
    display: flex;
    place-content: center;
    fill: var(--background-dark);
    & svg {
        inline-size: 50px;
        block-size: 50px;
        fill: currentColor;
    }
    @media (prefers-reduced-motion: no-preference) {
        @supports (container-type: scroll-state) {
            translate: -100vw;
            transition: all 150ms;
            @container scroll-state(scrollable: top) {
                translate: 0;
            }
        }
        @supports not (container-type: scroll-state) {
            @supports (animation-timeline: scroll()) {
                translate: -100vw;
                animation: slideIn ease-in both;
                animation-timeline: scroll();
                animation-range: 0 25vh;
            }
        }
    }
}
@keyframes slideIn {
    to {
        translate: 0;
    }
}

@media print {
    @page {
        size: letter;
        padding: .5cm;
    }
    html, body * {
        position: static !important;
        background: 0 0 !important;
        border-color: #000 !important;
        color: #000 !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    html, body {
        background: white;
        font-size: 12pt;
    }
    a, a:visited {
        color: var(--color-primary) !important;
        text-decoration: none;
    }
    header {
        margin: 0;
        padding: 0;
    }
    header .container--content {
        margin: 0 !important;
    }
    header[role="banner"] {
        border-block-end: 1px solid;
    }
    h1 {
        font-size: 18pt !important;
    }
    h2 {
        font-size: 16pt !important;
    }
    header p {
        font-size: 14pt !important;
    }
    section {
        margin-block-start: 0;
    }
    section :is(h1, h2, h3, h4, p) {
        padding: 0;
    }
    section > h1 {
        border-block-end: 1px solid var(--color-primary);
    }
    section > ol > li {
        list-style: none;
    }
    .container--content header {
        padding: 0 !important;
    }
    .tags {
        margin-block-end: 0!important;
        padding-block-end: 2rem;
    }
    ul {
        margin: 0;
        padding: 0;
        margin-inline-start: 2rem;
    }
    section > ol > li:last-child {
        .tags {
            padding-block-end: 0;
        }
    }
    #additional li,
    section div li {
        list-style: disc;
        padding: 0;
        text-align: match-parent;
    }
    #additional a::after{
        content: attr(href);
        font-weight: normal;
    }
    .profile-pic,
    #toc,
    .skip-to-content,
    .container--fine-print,
    #portfolio,
    hr,
    #additional svg,
    a[href="#top"],
    footer {
        display: none;
    }
}