@import url("../assets/fonts/Roboto Condensed/font.css");

: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;
    --light                      : #f8f9fa;
    --dark                       : #343a40;
    --white                      : #ffffff;
    --grey                       : #6c757d;
    --grey-dark                  : #343a40;
    --black                      : #000000;

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

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

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

	--site__color-light          : #F2F2F2;
	--site__color-disabled       : #CCCCCC;
	--site__color-dark           : #182440; /* dk blue */
	--site__color-accent         : #6dcff6; /* lt blue */
	--site__color-accent         : #003787;
	--site__color-hilite         : #0a8ed3; /* blue */
	--site__color-alert          : #FEDC00; /* orange */
	--site__color-button-back    : #ED1944; /* red */

	--site__color-background     : var(--site__color-hilite); /* rgb(0 169 178 / 0.4); */

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

    --min-width                  : 280px;
    --sml-width                  : 576px;
    --mid-width                  : 768px;
    --wide-mid-width             : 992px;
    --std-width                  : 1200px;
    --wide-std-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);

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

    --ff-regular                 : var(--font-family-Roboto-Cond);
    --ff-dropdown                : var(--font-family-Roboto);

}

@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-background);
        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;
    }

    label {
	    display                      : inline;
    }

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

    .content {
        position                     : relative;
        width                        : 100%;
        max-width                    : var(--std-width);
        padding                      : 2rem;
        margin                       : 0 auto;

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

        ol {
            list-style               : decimal inside;
            line-height              : 1.4;
            padding-inline-start     : 0.5rem;
        }

        ul {
            list-style               : disc inside;
            line-height              : 1.4;
            padding-inline-start     : 0.5rem;
        }

        li {
            -webkit-column-break-inside : avoid; /* Old Chrome, Safari, Opera */
                      page-break-inside : avoid; /* Firefox */
                           break-inside : avoid; 
            margin                      : 0;
            padding                     : 0 1rem 1rem 0;

            &:last-of-type { padding : 0 1rem 0 0; }
        }
    }

    @media screen and (width > 768px) {
        .content {
            gap                      : 2rem; 
            padding                  : 1rem 2rem;

            ol {
                list-style           : decimal outside;
                padding-inline-start : 2rem;
            }
            ul {
                list-style           : disc outside;
                padding-inline-start : 2rem;
            }
        }
    }

    /*
    .content       a[title]:hover::after,
    .content label a[title]:hover::after,
    .content li    a[title]:hover::after {
        content           : attr(title);
        padding           : 4px 8px;
        color             : #333;
        position          : absolute;
        left              : 0; 
        top               : 100%;
        white-space       : nowrap; 
        z-index           : 20;
        border-radius     : 5px;   
        box-shadow        : 0px 0px 4px #222;  
        background-image  : linear-gradient(#eeeeee, #cccccc);  
    }
    */

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

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

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

    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 {
        display           : block;
        font-family       : var(--ff-regular);
        line-height       : var(--lh-regular);
	    font-weight       : var(--fw-bold);
        text-wrap         : balance;
        color             : var(--site__color-light);
        text-transform    : none;
        text-align        : left;
        margin            : 0 auto;
        padding           : 0;
    }
    h1 {
        font-size         : var(--fs-700);
        text-align        : center;
        padding           : 2rem 0 0 0;
    }
    h2 { 
        font-size         : var(--fs-600); 
        text-align        : center;
    }
    h3 { font-size        : var(--fs-500); }
    h4 { font-size        : var(--fs-400); }
    h5 { font-size        : var(--fs-300); }
    h6 { font-size        : var(--fs-300); }

}

@layer header {

    header {
        --menu__color                     : var(--site__color-dark);
        --menu__dropdown-background-color : var(--site__color-background);
        --menu__selected-color            : var(--site__color-light);
        --menu__hover-color               : var(--site__color-hilite);
        --menu__background-color          : transparent;
        --menu__border-color              : transparent;
        --menu__item-background-color     : transparent;
        --menu__case                      : uppercase;
        --menu__font                      : 700 1.3rem/1.2 var(--ff-regular);
        --menu__menubar-height            : 56px;

        position                          : relative;
        top                               : 0;
        background-color                  : var(--menu__background-color);
        display                           : grid;
        grid-template-columns             : 1fr;
        grid-template-rows                : var(--menu__menubar-height);
        align-items                       : center;
        justify-content                   : start;

        img {
            padding-left                  : 2rem;
            justify-self                  : start;
            max-width                     : 150px;
        }

        nav {
            position                      : absolute;
            text-align                    : left;
            top                           : 100%; 
            right                         : 0; 
            color                         : var(--menu__color);
            background-color              : var(--menu__dropdown-background-color);
            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;
                background-color          : var(--menu__item-background-color);
                border                    : 2px solid transparent;
                border-radius             : 9999px;
                text-transform            : var(--menu__case);
                font                      : var(--menu__font);
                margin                    : 1em;
            }

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

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

    header .nav-checkbox {
        display                       : none;

        &:checked ~ nav {
            transform                 : scale(1, 1);

            a {
                opacity               : 1;
                transition            : opacity 250ms ease-in-out 100ms;
            }
        }
    }

    header .nav-hamburger {
        display                       : flex;
        height                        : calc(var(--menu__menubar-height) - 4px);
        position                      : absolute;
        top                           : 0;
        right                         : 10px;
        margin-left                   : 1em;
        color                         : var(--site__color-light);
        height                        : 100%;
        align-items                   : center;

        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 .nav-hamburger {
            display                   : none;
        }

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

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

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

            menu {
                display               : flex;
                justify-content       : center;
                width                 : 100%;
            }

            li {
                margin                : 0;
                padding               : 0;
            }

            a {
                opacity               : 1;
            }

            li:not(:last-child)::after {
                position              : absolute;
                top                   : 0.05em;
                content               : "";
                width                 : 2px;
                height                : 1em;
                background-color      : var(--menu__color); 
            }
        }
    }
}

@layer footer {

     footer {

        --footer__font             : var(--fw-regular) 0.8rem/1.4 var(--ff-regular);
        --footer__color            : var(--site__color-light);
        --footer__background-color : var(--site__color-hilite);

        --footer__nav-font         : var(--fw-bold) 1rem/1.4 var(--ff-regular);
        --footer__nav-color        : var(--site__color-light);
        --footer__nav-hover-color  : var(--site__color-hilite);

        --footer__nav-sep          : 0.5rem 0.3rem;
        --footer__nav-sep-height   : 1em;
        --footer__nav-sep-width    : 2px;

        position                   : relative; 
        font                       : var(--footer__font);
        color                      : var(--footer__color);
        z-index                    : 2;

        width                      : 100%;
        max-width                  : var(--std-width);

        div,
        nav {
            text-align             : center;
            margin                 : 0 auto;
            max-width              : 80%;
        }

        div {
            padding-block    : 1rem 1rem;
        }

        nav {
            padding-block    : 1rem 2rem;
        }

        @media screen and (width > 768px) {
            div,
            nav {
                max-width        : 60%;
            }
        }

        a {
            color                : inherit; 
            text-decoration      : none;

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

        nav a {
            font             : var(--footer__nav-font);
            position         : relative;
            color            : inherit;
            text-decoration  : none;
            margin-inline    : var(--footer__nav-sep);

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

            &:not(:last-child)::after {
                position         : absolute;
                top              : 3px;
                content          : "";
                width            : var(--footer__nav-sep-width);
                height           : var(--footer__nav-sep-height);
                background-color : var(--footer__color); /* same color as text */
                margin-inline    : var(--footer__nav-sep);
                /* transform: rotate(10deg); */
            }
        }

    }




}