/* #################### VARS #################### */

:root {
    /* Layout: */
    --width-container: 80rem;

    /* Colors: */
    --color-bright: hsl(210, 100%, 100%);
    --color-dark: hsl(0, 0%, 18%);
    --color-accent-light: hsl(44, 74%, 74%);
    --color-accent-medium: hsl(44, 100%, 50%);
    --color-accent-dark: hsl(44, 100%, 30%);
    --color-contrast-medium: hsl(210, 65%, 40%);

    --bg-color-default: hsl(44, 0%, 98%);
    --bg-color-default-accent: hsl(44, 0%, 96%);
    --bg-color-darker: hsl(44, 0%, 87%);
    --bg-color-contrast: hsl(210, 65%, 40%);
    
    /* Font/text values */
    --font-family-default: 'Avenir Next', 'Prompt', sans-serif;
    --font-color-default: var(--color-dark);
    --font-color-highlight: var(--color-accent-dark);
    --font-weight-default: 400;
    --font-line-height-default: 1.5;
    --unnamed-text-transform-uppercase: uppercase;
}

/* #################### RESET #################### */

/* Source: https://www.joshwcomeau.com/css/custom-css-reset/ */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
* {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Add accessible line-height */
    line-height: var(--font-line-height-default);
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

img {
    max-width: unset;
    max-height: unset;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* 10. link coloration (custom addition) */
a:not([class]) {
    text-decoration: none;
    color: currentColor;

    &:hover {
        color: var(--font-color-highlight);
        text-decoration: underline;
    }
}

/* #################### IMPORT #################### */

/* https://fonts.google.com/specimen/Prompt */
/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 100; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_7XJnvUD7dzB2KZeJ8fkoLfq0k.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 100; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_7XJnvUD7dzB2KZeJ8fkQLfg.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_9XJnvUD7dzB2KZeoRTkYTeg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_9XJnvUD7dzB2KZeofTkY.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_6XJnvUD7dzB2KZeLAalMiW5Addw.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_6XJnvUD7dzB2KZeLAalMsW5A.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_6XJnvUD7dzB2KZeKka1MiW5Addw.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_6XJnvUD7dzB2KZeKka1MsW5A.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_9XJnvUD7dzB2CA-oRTkYTeg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_9XJnvUD7dzB2CA-ofTkY.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/style2025/prompt/-W__XJnvUD7dzB2KbtodVkI.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/style2025/prompt/-W__XJnvUD7dzB2KYNod.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_8XJnvUD7dzB2Cv_4IZ2MuQ5Q.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_8XJnvUD7dzB2Cv_4IaWMu.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_8XJnvUD7dzB2C2_8IZ2MuQ5Q.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Prompt'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/style2025/prompt/-W_8XJnvUD7dzB2C2_8IaWMu.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* #################### GENERICS #################### */

html {
    background-color: var(--bg-color-default);
    font-family: var(--font-family-default);
    font-weight: var(--font-weight-default);
    line-height: var(--font-line-height-default);
    font-size: 12pt;
    min-width: 32rem;
}

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

p.spaced {
    margin-top: 1.5rem;
}

a.button {
    color: var(--color-bright);
    background-color: var(--bg-color-contrast);
    display: inline-block;
    padding: 0.6em 1.2rem 0.7rem 1.2rem;
    border-radius: 10rem;
    text-decoration: none;
}

.container {
    display: grid;
    grid-template-columns: 1fr min(var(--width-container), 100%) 1fr;

    > * {
        grid-column: 2;
    }

    > .full-bleed {
        width: 100%;
        grid-column: 1 / 4;
    }
}

.carousel {
    position: relative;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
        "slides"
        "navigation";

    > div.nav {
        grid-area: navigation;
        margin: 0 0.2rem 0.2rem 0.2rem;
        padding: 0 2rem 2rem 2rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        background-color: var(--bg-color-default);
        justify-self: stretch;

        svg {
            /* https://heroicons.com/ */
            height: 3rem;
            width: auto;
        }
    }

    > .slide {
        grid-area: slides;
    }
}

.hero {
    container-name: hero-banner;
    container-type: inline-size;
    background: radial-gradient(circle var(--width-container) at center, hsla(0, 0%, 100%, 0.75) 0%, transparent 100%) no-repeat center var(--color-accent-light);
}

.hero-feature {
    position: relative;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "image"    
        "infobox";
    justify-items: center;
    align-items: center;

    > div.infobox {
        grid-area: infobox;
        margin: 0 0.2rem;
    }

    > div.image {
        grid-area: image;
        margin: 0 0.2rem;
    }
}

@container hero-banner (width > 70rem) {
    .carousel {
        grid-template-columns: 1fr minmax(45rem, 85rem) 1fr;
        grid-template-rows: auto;
        grid-template-areas: ". slides .";

        div.nav {
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 2;
            pointer-events: none;
            color: var(--color-dark);
            background-color: transparent;
            justify-content: space-between;
            height: 100%;
            margin: 0;
            padding: 0;

            div.prev, div.next {
                transition: opacity 0.5s ease-in-out;
                opacity: 0;
                display: flex;
                align-items: center;

                a {
                    pointer-events: all;
                    
                    &:hover {
                        color: var(--color-accent-dark);
                    }
                }
            }

            div.prev {
                background-image: linear-gradient(to right, var(--bg-color-default), transparent);
            }

            div.next {
                background-image: linear-gradient(to left, var(--bg-color-default), transparent);
            }

            svg {
                height: 5rem;
                width: auto;
            }
        }

        &:hover div.nav {
            div.prev, div.next {
                opacity: 0.5;
            }

            div.prev:has(a:hover), div.next:has(a:hover) {
                opacity: 1;
            }
        }    
    }

    .hero-feature {
        grid-template-columns: minmax(25rem, 40rem) minmax(20rem, auto);
        grid-template-rows: auto;
        grid-template-areas: "infobox image";

        > div.infobox {
            margin-block: 4rem;
            margin-inline-start: 2rem;
            justify-self: end;
            border-radius: 1.25rem;
        }

        > div.image {
            margin-block: 4rem;
            margin-inline-end: 2rem;
            padding-inline-start: 2rem;
            justify-self: start;
        }
    }
}

div.infobox {
    background-color: var(--bg-color-default);
    padding: 2rem;

    h1 {
        text-transform: uppercase;
        margin-block-end: 2rem;
    }

    h4 {
        margin-block-end: 1rem;
    }

    .button {
        font-weight: 100;
    }
}

div.image img {
    max-width: 100%;
    height: auto;
}


.infobar {
    background-color: var(--bg-color-default-accent);
}

.cardstack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
    gap: 0 1rem;

    > div {
        padding: 1.25rem;
    }

    h4 {
        padding: 0.25rem 0;
    }
}

.centered {
    text-align: center;
}

/* #################### HEADER & MENU #################### */

#header {
    padding: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background-color: var(--bg-color-default-accent);

    > .branding {
        flex: 15rem 0 0;

        img {
            display: inline-block;
            width: 100%;
            height: auto;
        }
    }

    > .menu {
        container-type: inline-size;
        container-name: main-menu;
        position: relative;
        flex: auto 1 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 2rem;

        a {
            text-decoration: none;
            color: var(--font-color-default);
            text-decoration-color: var(--font-color-highlight);
            text-decoration-thickness: 0.2rem;

            &:hover {
                text-decoration: underline;
            }
        }

        .more-menu ~ .more-menu-dropdown {
            position: absolute;
            z-index: 999;
            background-color: var(--bg-color-default);
            transform: scaleX(0) scaleY(0);
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
            transition-duration: 75ms;
            opacity: 0;
            top: 2rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 0.75rem;
            padding: 1rem;
            filter: drop-shadow(0.3rem 0.3rem 0.4rem hsla(0, 0%, 0%, 0.33));
        }

        .more-menu ~ .more-menu-dropdown:focus-within,
        .more-menu:focus ~ .more-menu-dropdown {
            transform: scaleX(1) scaleY(1);
            transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
            transition-duration: 100ms;
            opacity: 1;
        }

        .more-menu-dropdown > .drop-1,
        .more-menu-dropdown > .drop-2,
        .more-menu-dropdown > .drop-3 {
            display: none;
        }

        @container (max-width: 36rem) {
            > .drop-1 { display: none; }
            .more-menu-dropdown > .drop-1 { display: initial; }
        }

        @container (max-width: 30rem) {
            > .drop-2 { display: none; }
            .more-menu-dropdown > .drop-2 { display: initial; }
        }

        @container (max-width: 15rem) {
            > .drop-3 { display: none; }
            .more-menu-dropdown > .drop-3 { display: initial; }
        }
    }
}