/* ********************************* *
     * *         G L O B A L           * *
     * ********************************* */

@import url("../assets/fonts/Roboto/font.css");
@import url("../assets/fonts/Poppins/font.css");
/*
@import url("../assets/fonts/Lato/font.css");
@import url("../assets/fonts/Roboto Condensed/font.css");
@import url("../assets/fonts/Barlow Condensed/font.css");
@import url("../assets/fonts/Barlow/font.css");
@import url("../assets/fonts/Barlow Semi Condensed/font.css");
@import url("../assets/fonts/DIN/font.css");
@import url("../assets/fonts/Solomon Sans/font.css");
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,400,700');
@import url('https://unpkg.com/open-props');

    --font-family-OpenSans      : 'Open Sans',          system-ui,sans-serif;
    --font-family-OpenSans-Cond : 'Open Sans Condensed',system-ui,sans-serif;
*/
:root {

    /* ********************************** *
     * *         C O L O U R S          * *
     * ********************************** */

    --blue                       : #007bff;
    --indigo                     : #6610f2;
    --purple                     : #6f42c1;
    --pink                       : #e83e8c;
    --red                        : #dc3545;
    --orange                     : #fd7e14;
    --yellow                     : #ffc107;
    --green                      : #28a745;
    --teal                       : #20c997;
    --cyan                       : #17a2b8;
    --white                      : #ffffff;
    --light                      : #f8f9fa;
    --grey                       : #6c757d;
    --dark                       : #343a40;
    --black                      : #000000;

    --primary                    : #007bff;
    --secondary                  : #6c757d;

    --success                    : #28a745;
    --info                       : #17a2b8;
    --warning                    : #ffc107;
    --danger                     : #dc3545;

    --green1                     : #00FF007F;
    --yellow1                    : #F1EF8A;
    --teal1                      : #9AD6CC;
    --pink1                      : #F9A0B6;
    --pink2                      : #CD6078;
    --pink3                      : #DF4D5B;

    --color-primary-300          : hsl(219, 76%, 55%);
    --color-primary-400          : hsl(219, 76%, 40%);
    --color-primary-500          : hsl(219, 76%, 25%);
    --color-secondary-300        : hsl(269, 75%, 55%);
    --color-secondary-400        : hsl(269, 75%, 40%);
    --color-secondary-500        : hsl(269, 75%, 25%);
    --color-accent-200           : hsl(358, 85%, 80%);
    --color-accent-300           : hsl(358, 72%, 65%);
    --color-accent-400           : hsl(358, 72%, 50%);
    --color-accent-500           : hsl(358, 72%, 35%);

    /* ********************************* *
     * *    S I T E   C O L O U R S    * *
     * ********************************* */

    --site__color-dark           : #000000;
    --site__color-dark           : #011D35;
    --site__color-light          : #FFFFFF;
    --site__color-alert          : #D2232A;
    --site__color-body           : #C1D6E9;
    --site__color-page           : #C1D6E9;
    --site__color-neutral        : hsl(from var(--site__color-page) h s calc(l - 15));
    --site__color-main           : #EEEEEE;
    --site__color-accent         : #0871B3;
    --site__color-hilite         : #E32845;
    --site__color-hilite         : hsl(from var(--site__color-accent) h s calc(l + 30));

    /* ********************************* *
     * *      P A G E  W I D T H       * *
     * ********************************* */

    --min-width                  : 280px;
    --sml-width                  : 576px;
    --mid-width                  : 768px;
    --lrg-width                  : 880px;
    --xlr-width                  : 992px;
    --std-width                  : 1200px;
    --wide-width                 : 1440px;
    --max-width                  : 2000px;

    /* ********************************* *
     * *         F O N T S             * *
     * ********************************* */

    --fs-300                     : clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400                     : clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500                     : clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600                     : clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700                     : clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800                     : clamp(2.33rem, calc(1.70rem + 3.15vw), 4.14rem);
    --fs-900                     : clamp(2.80rem, calc(1.85rem + 4.74vw), 5.52rem);

    --ff-regular                 : var(--font-family-Poppins);

    --fs-regular                 : 1.3rem;
    --lh-regular                 : 1.3;
    --fw-regular                 : 400;
    --fw-bold                    : 600;

    --ff-option                  : var(--font-family-Roboto);

    --ff-heading                 : var(--font-family-Poppins);
    --lh-heading                 : 1.3;
 
    --ff-base                    : system-ui;
    --lh-base                    : 1.3;

    --ff-code                    : monospace;
    --text-max-width             : 200ch;
}

@view-transition { navigation: auto; }

@layer reset, layout, header, footer;

@layer reset {

    /* ********************************************************************************** */
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css -- minified */
    /* ********************************************************************************** */
    /*                                                                                    */
    *,*.before,*.after {
        box-sizing:border-box;
        /* DEBUGGING BITS */
        /* outline: 2px solid #32cd32;  */
        /* background-color: #32cd321f; */
    }

    html {line-height:1.15;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;
        font-family:var(--ff-base);color-scheme:light dark;interpolate-size:allow-keywords;}
    body {margin:0;width:100%;height:100%;min-height:100svh;line-height:var(--lh-base);}
    main {display:block;}
    h1,h2,h3,h4,h5,h6 {text-wrap:balance;font-family:var(--ff-heading);line-height:var(--lh-heading);margin-block-end:0;}
    p,figure,blockquote,dl,dd {margin-block-end:0;}
    hr {box-sizing:content-box;height:0;overflow:visible;}
    pre {font-family:monospace,monospace;font-size:1em;}
    a {background-color:transparent;}
    abbr[title] {border-bottom:none;text-decoration:underline;}
    b,strong {font-weight:bolder;}
    code,kbd,samp {font-family:var(--ff-code);}
    small {font-size:80%;}
    sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
    sub {bottom:-0.25em;}
    sup {top:-0.5em;font-size:0.4em;vertical-align:super;}
    img,picture {border-style:none;display:block;width:100%;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;}
    button,input,label {line-height:var(--lh-heading);}
    button,input,optgroup,select,textarea {font-family:inherit;font-size:inherit;line-height:1.15;margin:0;}
    button,input {overflow:visible;}
    button,select {text-transform:none;}
    button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}
    button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}
    button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
    fieldset {padding:0.35em 0.75em 0.625em;}
    legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
    progress {vertical-align:baseline;}
    textarea {overflow:auto;}
    textarea:not([rows]){min-height:10em;}
    [type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}
    [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}
    [type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}
    [type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
    ::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}
    details {display:block;}
    summary {display:list-item;}
    template {display:none;}
    [hidden] {display:none;}
    /*                                                                                    */
    /* ********************************************************************************** */
    /* some additions (thanks Kevin Powell et al)                                         */
    /* ********************************************************************************** */
    /*                                                                                    */
    :is(ul, ol)[class] {list-style:"";margin:0;padding:0;}
    p,li,figcaption {max-width:var(--text-max-width);text-wrap:pretty;}
    :first-child {margin-block-start:0;}
    td,math,time[datetime*=":"] {font-variant-numeric: tabular-nums lining-nums;}
    table {border-collapse:collapse;}
    :target {scroll-margin-block:32px;scroll-margin-block:5rlh;}
    @media(prefers-reduced-motion:no-preference) {html{scroll-behavior:smooth;}}
    /*                                                                                    */
    /* * {overscroll-behavior: contain;}                                                  */
    /* ********************************************************************************** */
}

/* ********************************* **
** *        G E N E R A L          * **
** ********************************* */

@layer layout {    

    html {
        font                         : var(--fw-regular) 0.825em/var(--lh-regular) var(--ff-regular);
    }

    body {
	    color                        : var(--site__color-dark);
	    background-color             : var(--site__color-body);
        font-size                    : var(--fs-regular);
        /* force vertical scroll bars for cross-fade betterment :) */
        scrollbar-gutter             : stable;
    }

    img {
	    max-width                    : var(--max-width);
    }

    .nouser {
        user-select                  : none;
    }
    .nopointer {
        pointer-events               : none;
    }
    .noselect {
        user-select                   : none;
        pointer-events                : none;
    }

   /* ********************************* *
    * *    M A I N   C O N T E N T    * *
    * ********************************* */

    .content {

        color                        : var(--site__color-light);
        background-color             : var(--site__color-page);

        position                     : relative;
        width                        : 100%;
        max-width                    : var(--max-width);
        padding                      : 1rem;
        margin                       : 0 auto;

        .r {
            text-align               : right;
            padding-inline           : 2rem;
        }

        b {
            font-weight              : var(--fw-bold);
        }

        ol {
            list-style               : decimal outside;
        }

        ul {
            list-style               : disc outside;
            padding-left             : 2rem;
        }
    }

    /* ********************************* *
    * *           L I N K S           * *
    * ********************************* */

    main {
    
        a {
            position                     : relative;
            text-decoration              : none;
            font-weight                  : var(--fw-bold);
            color                        : inherit;
            font-size                    : 1.0em;

            &:hover {
                color                    : var(--site__color-hilite);
            }
        }

        a[data-tooltip]::after {
            position                     : absolute;
            content                      : attr(data-tooltip);
            font-size                    : 0.8em;
            padding                      : 4px 8px;
            color                        : #333;
            left                         : 0; 
            bottom                       : 0;
            z-index                      : 20;
            border-radius                : 5px;   
            box-shadow                   : 0px 0px 4px #222;  
            background-image             : linear-gradient(#eeeeee, #cccccc);  
            white-space                  : nowrap; 
            transform                    : scale(0);
            transition                   : transform ease-out 150ms, 
                                           bottom ease-out 150ms;
        }

        a[data-tooltip]:hover::after {
            transform                    : scale(1);
            bottom                       : 100%;
        }
    }

    hr {
        width                        : 100%;
        text-align                   : center;
        border                       : none;
        border                       : 1px solid var(--site__color-dark);
        margin                       : 2rem 0 0.5rem 0;
    }
    
   /* ********************************* *
    * *       H E A D L I N E S       * *
    * ********************************* */

    h1, h2, h3, h4, h5, h6 {
        font-family                  : var(--ff-regular);
        line-height                  : 1.3;
	    font-weight                  : var(--fw-regular);
        text-wrap                    : balance;
        color                        : var(--site__color-accent);
        text-transform               : none;
        margin                       : 0 auto;
    }

    h1 {
        font-weight                   : var(--fw-bold);
        font-size                     : var(--fs-700);
        text-transform                : uppercase;
    }

    h2 { font-size                    : var(--fs-600); }
    h3 { font-size                    : var(--fs-500); }
    h4 { font-size                    : var(--fs-400); }
    h5 { font-size                    : var(--fs-300); }
    h6 { font-size                    : var(--fs-300); }

}

/*---------------------------------------------------------------------------*/
/*--  HEADER                                                               --*/
/*---------------------------------------------------------------------------*/

@layer header {

    /*-----------------------------------------------------------------------*/
    /*--  MENU NAVIGATION                                                  --*/
    /*-----------------------------------------------------------------------*/

    header {
        --menu__color                     : var(--site__color-light);
        --menu__selected-color            : var(--site__color-accent);
        --menu__hover-color               : var(--site__color-hilite);
        --menu__background-color          : var(--site__color-dark); 

        --menu__menubar-height            : 50px;

        position                          : relative;
        top                               : 0;
        width                             : 100%;
        max-width                         : var(--std-width);
        margin-inline                     : auto;

        background-color                  : var(--menu__background-color);

        display                           : grid;
        grid-template-rows                : var(--menu__menubar-height);
        align-items                       : center;
        justify-content                   : start;

        nav {
            z-index                       : 1;
            color                         : var(--menu__color);
            background-color              : var(--site__color-dark);

            position                      : absolute;
            text-align                    : left;
            top                           : 100%; 
            right                         : 0; 
            opacity                       : 1;
            transform                     : scale(1, 0);
            transform-origin              : top;
            transition                    : transform 200ms ease-in-out;

            margin-inline                 : auto;
            max-width                     : var(--mid-width);

            menu {
                margin                    : 0;
                padding                   : 0;
                list-style                : none;

                li {
                    position              : relative;
                    color                 : var(--menu__color);
                    background-color      : transparent;
                    text-transform        : uppercase;
                    font                  : var(--fw-regular) 1.3rem/1.2 var(--ff-regular);
                    margin                : 1em;

                    border                : 2px solid transparent;
                    border-radius         : 100svh;

                    a {
                        color             : inherit;
                        text-decoration   : none;
                        opacity           : 0;
                        transition        : opacity 150ms ease-in-out;
                        padding           : 0.5em;

                        &:hover {
                            color         : var(--menu__hover-color);
                        }
                    }
                }
            }
        }

        .nav-checkbox {
            display                       : none;
            &:checked ~ nav {
                transform                 : scale(1, 1);
                padding                   : 1rem;
                a {
                    opacity               : 1;
                    transition            : opacity 250ms ease-in-out 100ms;
                }
            }
        }

        .nav-hamburger {
            color                         : var(--menu__color);

            display                       : flex;
            height                        : calc(var(--menu__menubar-height) - 4px);
            position                      : absolute;
            top                           : 0;
            right                         : 10px;
            margin-left                   : 1em;
            height                        : 100%;
            align-items                   : center;
            cursor                        : pointer;

            span,
            span::before,
            span::after {
                display                   : block;
                background                : var(--site__color-light);
                height                    : 2px;
                width                     : 1.6em;
                border-radius             : 2px;
                position                  : relative;   
            }

            span::before,
            span::after {
                content                   : '';
                position                  : absolute;
                width                     : 1.9em;
                left                      : -0.3em;
            }

            span::before { bottom         : 7px; }
            span::after  { top            : 7px; }
        }
    }

    /****************************************/
    /****************  WIDE  ****************/
    /****************************************/

    @media screen and (width > 768px) {

        header {
            justify-content               : center;
            justify-items                 : center;

            --menu__selected-color        : var(--site__color-accent);
            --menu__hover-color           : var(--site__color-hilite);
        }

        header .nav-hamburger {
            display                       : none;
        }

        header nav {
            text-align                    : unset;
            top                           : unset;
            left                          : unset;
            right                         : unset; 
        
            transform                     : unset;
            transform-origin              : unset;

            display                       : flex;
            justify-content               : center;
            align-self                    : center;

            background-color              : var(--menu__background-color);

            & menu {
                display                   : flex;
                justify-content           : start;

                & li {
                    margin                : 0;
                    padding               : 0;

                    & a {
                        opacity           : 1;
                    }
                }
            }
        }
    }       

        /*header nav li:not(:last-child)::after {
            position                      : absolute;
            top                           : 0.05em;
            content                       : "";
            height                        : 1em;
            background-color              : var(--menu__color); 

            --width                       : 2px;
            width                         : var(--width);*/
            /* margin-inline              : calc(1em - var(--width) / 2); */
        /*}*/
}

/*---------------------------------------------------------------------------*/
/*--  FOOTER                                                               --*/
/*---------------------------------------------------------------------------*/

@layer footer {

    footer {

        position                          : relative; 
        color                             : var(--site__color-light);
        background-color                  : var(--site__color-dark);
        z-index                           : 2;

        width                             : 100%;
        max-width                         : var(--std-width);
        margin-inline                     : auto;
        padding-inline                    : 1rem;

        .short-terms {
            max-width                     : var(--mid-width);
            margin-inline                 : auto;
            text-align                    : center;
            font                          : normal 0.8rem/1.5 var(--ff-regular);
    
            a {
                color                     : inherit;
                font-weight               : var(--fw-bold);
                text-decoration           : none;
            }
        }
    }
}