/* #################### 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 #################### */

* {
    box-sizing : border-box;
}

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;
            align-items       : center;
            
            div.prev, div.next {
                transition    : opacity 0.25s ease-in-out;
                opacity       : 0;
                display       : flex;
                align-items   : center;
                align-content : center;
                height        : 100%;
                width         : 50%;
                
                a {
                    pointer-events  : all;
                    display         : flex;
                    align-items     : center;
                    text-decoration : none;
                    color           : rgba(255, 255, 255, 0.9);
                    
                    &:hover {
                        color : #ffffff;
                    }
                }
            }
            
            div.prev {
                justify-content : flex-start;
                text-align      : left;
                /*background      : radial-gradient(circle at left center, #ffffff 0%, transparent 30%);*/
            }
            
            div.next {
                justify-content : flex-end;
                text-align      : right;
                /*background      : radial-gradient(circle at right center, #ffffff 0%, transparent 30%);*/
            }
            
            .outer {
                font-size       : 60px;
                display         : flex;
                align-items     : center;
                justify-content : center;
            }
            
            .inner {
                font-size       : 46px;
                margin-left     : -46px;
                margin-right    : -46px;
                display         : flex;
                align-items     : center;
                justify-content : center;
            }
            
            div.prev .inner {
                margin-right : -0.5rem;
            }
            
            div.next .inner {
                margin-left : -0.5rem;
            }
            
            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;
            }
        }
    }
}