/********************

Sections:
1) Variables
2) Theming/Typography
3) Layout
4) Components
5) Mobile Layout & Theming
6) Light Mode

********************/




/********************
1) Variables
********************/

/* Defining CSS variables at the root level to be used throughout the document. */
:root {
    /* Colors (Default Dark Mode) */
    --background-color-darkmode: rgba(17,17,17,1);
    --background-secondary-color-darkmode: rgba(255,255,255,0.1);
    --text-color-darkmode: #eee;
    --text-secondary-color-darkmode: rgba(255,255,255,0.5);
    --accent-color: #f15403;

    /* Colors (Alternate Light Mode) */
    --background-color-lightmode: #fcf9ee;
    --background-secondary-color-lightmode: rgba(0,0,0,0.1);
    --text-color-lightmode: #222;
    --text-secondary-color-lightmode: rgba(0,0,0,0.6);
    --accent-color-lightmode: #f15403;

    /* Typography */
    --header-font-weight: 500;
    --text-font-family-serif: Georgia, 'Times New Roman', Times, serif;
    --text-font-family-sans: "Helvetica Neue",Helvetica,Arial,sans-serif;
    --text-font-family-mono: Menlo,"Courier New",Courier,monospace;
    --text-font-size-large: 32px;
    --text-font-size: 20px;
    --text-font-size-mobile: 22px;
    --text-font-size-small: 16px;
    --text-font-size-extrasmall: 12px;

    /* Design & Layout */
    --gutter-size: 20px;
    --rounded-corners-large: 20px;
    --rounded-corners-small: 10px;
}




/********************
2) Theming/Typography
********************/

body, html {
    background: var(--background-color-darkmode);
    color: var(--text-color-darkmode);
    font-family: var(--text-font-family-serif);
    font-size: var(--text-font-size);
    line-height: 160%;
    margin: 0;
}

header {
    padding: 50px 15px 35px;
    text-align: center;
}

h1, h2, h3 {
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-family: var(--text-font-family-sans);
    font-size: var(--text-font-size-large);
    font-weight: var(--header-font-weight);
    margin-top: 30px;
}

h2 {
    font-size: var(--text-font-size);
    font-style: italic;
    font-weight: var(--header-font-weight);
    margin-top: 10px;
}

h3 {
    color: var(--text-secondary-color-darkmode);
    font-family: var(--text-font-family-mono);
    font-size: var(--text-font-size-extrasmall);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

h4 {
    text-align: center;

    &::after {
        border-top: 5px solid var(--accent-color);
        content: "";
        display: block;
        margin: var(--gutter-size) auto;
        width: 80px;
    }

}

div + h4 {
    margin-top: 70px; /* Adding 20px to headers that don't come after paragraphs. */
}

p {
    margin-bottom: 0;
}

article {

    & a, & a:visited {
        color: var(--accent-color);
        padding-bottom: 3px;
        text-decoration: none;
    }

    & a:hover {
        color: var(--accent-color);
        border-bottom: 2px solid var(--accent-color);
    }

}

footer {
    background-color: var(--background-secondary-color-darkmode);
    font-size: var(--text-font-size-small);

    & .text-content p {
        font-family: var(--text-font-family-mono);
        font-size: var(--text-font-size-small);
        letter-spacing: -0.5px;
        margin: 5px 0; /* Adjust margins as needed */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    & .text-content p strong {
        font-size: var(--text-font-size);
        letter-spacing: 0;
    }

    & .text-content em {
        font-style: normal;
    }

    & .text-content a {
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0;
    }

}

.credits {
    background: var(--background-color-darkmode);

    &,
    & a,
    & a:visited {
        /* color: var(--text-secondary-color-darkmode); */
        color: rgba(255,255,255,0.2);
        font-family: var(--text-font-family-mono);
        font-size: var(--text-font-size-small);
        font-weight: 900;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    & a,
    & a:visited {
        color: rgba(255,255,255,0.8);
    }

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

    & .copyright {
        color: rgba(255,255,255,0.2);
        font-size: var(--text-font-size-extrasmall);
    }

}




/********************
3) Layout
********************/

article,
header {
    display: grid;
    grid-template-columns:
        var(--gutter-size)
        1fr
        min(55ch, calc(100% - 40px) ) /* Make sure the px is double the gutter size to account for both left and right */
        1fr
        var(--gutter-size)
    ;
}

header img {
    height: auto;
    transition: .2s all ease-in-out; /* Smooth out the animation effect in the hover state below. */
    transform: scale(1);
    width: 69px;
}

header a {
    border-radius: 11px;
    line-height: 0;
    margin: 0 auto;
}

header a:hover {
    cursor: pointer;
    filter: none; /* This is for dark mode to cancel out the changing of the logo later on in the light mode section, otherwise it's black on black and invisible.  */
    margin-bottom: 0;
}

header a:hover img {
    transform: scale(0.9); /* Subtly decrease size of logo. */
}

footer {
    grid-column: 3;
}

header > *,
article > * {
    grid-column: 3;
}

.full-bleed,
.capped-width {
    /* Remove the side gutters, but .capped-width has a max-width modifier later. */
    grid-column: 1 / -1;
}

article img,
article figure,
article figure img,
article > picture,
article picture img {
    display: block;
    width: 100%;
}

.capped-width {
    /* A modifier to be used in conjunction with .full-bleed for images that don't look good stretched too horizontally, like if it crops a subject's face or cuts off the feet of Dudley in the intro post */
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.full-padded {
    /* Almost full bleed, leave the side gutters.  */
    grid-column: 2 / 5;
    /* Why? Because multi-column components like .two-columns will also have a gutter between them. */
}

.two-columns {
    display: grid;
    grid-template-columns:
        calc(50% - 10px) /* The px is half the size of the 20px gutter that goes between the images */
        calc(50% - 10px)
    ;
    gap: var(--gutter-size);   
}

footer {
    align-items: center;
    display: flex;
    padding: var(--gutter-size);

    & .text-content {
        align-items: flex-start; /* Ensure flex items are left-aligned */
        display: flex;
        flex-direction: column;
    }

    & picture {
        margin-right: var(--gutter-size); /* Adjust space between image and text */

        & img {
            display: block; /* Otherwise flex treats this as an inline element by default and you get weird extra padding around an assumed baseline, the kind used by the descenders of g and y characters for example. */
            width: auto;
        }

    }

}




/********************
4) Components
********************/

blockquote {
    border-left: 4px solid var(--accent-color);
}

figure {
    background-color: #000;
    border-radius: var(--rounded-corners-large);
    margin: 0 0 20px;
    position: relative;
}

figure img, article img {
    border-radius: var(--rounded-corners-large);
}

figcaption {
    background: rgba(0,0,0,0.8);
    border-radius: 16px;
    bottom: 10px;
    color: var(--text-color-darkmode);
    font-family: var(--text-font-family-mono);
    font-size: var(--text-font-size-extrasmall);
    font-weight: 900;
    left: 50%; /* Position the left edge in the center */
    letter-spacing: 0.5px;
    line-height: 100%;
    padding: 13px 16px 12px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%); /* Shift the element back by half its width to make it perfectly centered horizontally */
    white-space: nowrap;
}

.full-bleed,
.two-columns figure {
    margin-bottom: 0;
}

figure.full-bleed img,
.full-bleed img, 
.full-bleed {
    border-radius: 0;
    margin: 0;
}

img, .full-bleed img {
    max-height: calc(100vh - 60px);
    object-fit: cover;
}

picture, .yt-embed {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.yt-embed {
    border: 0;
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Horizontal default: 16:9 aspect ratio */
.horizontal-video {
    aspect-ratio: 16 / 9;
    max-width: 1200px; /* optional cap */
}

/* Vertical / Shorts: 9:16 aspect ratio */
.vertical-video {
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 100px); /* tweak padding allowance */
}

hr {
    background-image: url(https://d32mxho067pe0f.cloudfront.net/images/writing/logos/logo-hr-light-mode@3x.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 218px 40px;
    border: none;
    filter: invert(1);
    height: 40px;
    margin: var(--gutter-size) 0 50px;
    padding: 0;
    width: 100%;
}

footer {
    border-radius: var(--rounded-corners-small);
    margin-bottom: 40px;
    text-align: center;

    & img {
        border-radius: var(--rounded-corners-small);
        /* margin-top: 20px;
        max-height: 100px;
        max-width: 100px; */
    }

}

.credits {
    padding: 40px 0;
    text-align: center; 

    & p {
        line-height: 100%;
        margin: 0;

        &:nth-child(1) {
            margin-bottom: var(--gutter-size);
        }

    }

}




/********************
5) Mobile Layout & Theming
********************/

/* Phones & small tablets */
@media only screen and (max-width: 576px) {

    body, html {
        font-size: var(--text-font-size-mobile);
        line-height: 145%;
    }

    .full-padded,
    .yt-embed {
        /* Go full bleed, remove the side gutters. */
        grid-column: 1 / -1;
    }

    .two-columns {
        /* Stack the columns vertically. */
        display: block;
    }

    figure {
        margin: 0;
    }

    figure img, article img {
        border-radius: 0;
    }

    footer {
        display: block;

        & picture {
            display: inline-block;
            margin: 0 auto;
        }
    
        & img {
            border-radius: var(--rounded-corners-large);
        }

    }

}

/* Tablets */
@media only screen and (max-width: 768px ) {
    /* Remove side gutters and go full bleed on mobile */
    article > img,
    article > p:has(img),
    article > figure,
    article > picture {
        grid-column: 1 / -1;
    }
}

/* Specific to the images with a width capped to 1200px */
@media only screen and (max-width: 1200px) {

    .capped-width,
    .capped-width img {
        border-radius: 0; /* Don't round the corners when it goes full bleed */
    }

}

@media only screen and (max-width: 96ch) {

    article > figure img {
        border-radius: 0;
    }

}




/********************
6) Light Mode
********************/

@media (prefers-color-scheme: light) {

    body, html {
        background-color: var(--background-color-lightmode);
        color: var(--text-color-lightmode);
    }

    header a:hover {
        filter: grayscale();
    }

    h3 {
        color: var(--text-secondary-color-lightmode);
    }

    hr {
        filter: invert(0);
    }

    footer {
        background-color: var(--background-color-darkmode);
        color: var(--text-color-darkmode);

        & a, footer a:visited {
            padding-bottom: 0;
        }

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

    }

}