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

/*
    @import url('https://unpkg.com/open-props');
*/

:root {
/* ********************************* *
** *  global general variables     * *
** ********************************* */

    --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;

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

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

/* ********************************* *
** *            S I T E            * *
** ********************************* */

    --site__color-dark        : #000000;
    --site__color-light       : #FFFFFF;
    --site__color-text        : #000000; 
    --site__color-accent      : #ED1C24; 
    --site__color-hilite      : #F1E519; 
    --site__color-hilite      : color-mix(in srgb, var(--site__color-accent) 50%, var(--site__color-light));

    --site__color-alert       : #FFFFFF; 
    --site__color-disabled    : #B1A29F;
    
    --site__color-body        : #52B0D0;
    --site__color-body        : #778899;
    --site__color-page        : #E9322A;
    --site__color-alt         : #00ADEE;

/* ********************************* *
** *         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);
    --lh-regular              : 1.3;

    --ff-heading              : var(--font-family-Poppins);
    --lh-heading              : 1.1;

    --fw-regular              : 400;
    --fw-bold                 : 600;

    --ff-base                 : system-ui;
    --lh-base                 : 1.3;

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

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

@view-transition { navigation : auto; }

@layer reset, layout;

@layer reset {
    /* ********************************************************************************** */
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css -- minified */
    /* ********************************************************************************** */
    /*                                                                                    */
    *,*::before,*::after {box-sizing:border-box;}
    html {line-height:1.15;-moz-text-size-adjust:none;-webkit-text-size-adjust:100%;text-size-adjust:none;
        font-family:var(--ff-base);color-scheme:light dark;interpolate-size:allow-keywords;}
    body {margin:0;min-height:100vh;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;}
    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;transition-behavior:allow-discrete;}}
    /*                                                                                    */
    /* * {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);
        hanging-punctuation      : first last;
        color-scheme             : dark light;
    }

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

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

    header, main, footer { position : relative; }
    header               { z-index  : 3;        }
    main, footer         { z-index  : 2;        }

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

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

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

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

        ol {
            list-style           : decimal outside;
            line-height          : 1.3;
        }

        ul {
            list-style           : disc outside;
            line-height          : 1.3;
            padding-left         : 2rem;
            list-style           : none;

            li {
                margin-bottom    : 0;
            }
        }

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

    }

    /* ********************************* *
    ** *       H E A D L I N E S       * *
    ** ********************************* */

    h1, h2, h3, h4, h5, h6 {
	    font-weight        : var(--fw-regular);
        text-align         : center;
        color              : var(--site__color-light);
        margin             : 0 auto;
    }

    h1 {
        font-size          : var(--fs-900); 
        font-weight        : var(--fw-bold);
    }

    h2 { text-align        : left; }

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

    /* ********************************* *
    ** *  H O R I Z O N A L   L I N E  * *
    ** ********************************* */

    hr {
        width              : 100%;
        text-align         : center;
        border             : none;
        border             : 1px solid var(--site__color-text);
        margin             : 2rem 0 0.5rem 0;
    }

    /***************************************************************************
    **  LABEL AND ALERT
    ***************************************************************************/

    label {
	    display            : inline;
    }

    .alert {
        display            : block;
        font-size          : 1rem;
        font-weight        : bold;
        line-height        : 1.4;
        color              : var(--site__color-alert);
        background-color   : transparent;
        /*text-shadow: 0 0 2px var(--global__color5);*/
    }

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

    header {

        --menu__font                     : 500 1.3rem/1.2 var(--ff-regular);
        --menu__color                    : var(--site__color-dark);
        --menu__color-back               : var(--site__color-light);
        --menu__color-dropdown-back      : var(--site__color-light);
        --menu__color-hamburger          : var(--site__color-accent);
        --menu__color-selected           : var(--site__color-accent);
        --menu__color-hover              : var(--site__color-hilite);
        --menu__color-hover-back         : var(--site__color-accent);
        --menu__case                     : uppercase;

        display                          : grid;
        grid-template-columns            : auto 1fr;
        align-items                      : center;

        color                            : var(--menu-color);
        background-color                 : var(--menu__color-back);

        position                         : relative;

        menu {
            position                     : absolute;
            text-align                   : left;
            top                          : 100%; 
            right                        : 0; 
            background-color             : var(--menu__color-dropdown-back);

            height                       : 0;
            overflow                     : clip;
            visibility                   : hidden;
            transition                   : height 200ms ease, visibility 200ms, padding 200ms;

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

            @media screen and (width > 768px) {
                position                 : relative;
                top                      : unset;
                right                    : unset; 
                text-align               : unset;
                visibility               : unset;
        
                height                   : auto;
                display                  : flex;
                justify-content          : center;
                align-items              : center;

                background-color         : transparent;
            }

            li {
                color                    : var(--menu__color);

                @media screen and (width > 768px) {
                    &:not(:last-child)::after {
                        content          : "";
                        position         : absolute;
                        top              : -0.1em;
                        height           : 1.2em;
                        width            : 2px;
                        background-color : var(--menu__color); 
                    }
                }

                a {
                    color                : inherit;
                    text-transform       : var(--menu__case);
                    text-decoration      : none;
                    display              : inline-block;
                    width                : 100%;

                    padding              : 0.3rem;
                    @media screen and (width > 768px) {
                        padding          : 0 0.8em;
                    }

                    &:hover { 
                        color            : var(--menu__color-hover); 
                        background-color : var(--menu__color-hover-back);

                        @media screen and (width > 768px) {
                            color        : var(--menu__color-hover);
                            background-color : transparent;
                        }
                    }
                }
            }
        }

        .menu-checkbox {
            display                      : none;

            &:checked ~ menu {
                height                   : auto;
                visibility               : visible;
                padding                  : 1rem;
            }
        }
    }

    .menu-hamburger {
        position    : absolute;
        top         : 0;
        right       : 10px;
        height      : 100%;

        display     : flex;
        align-items : center;
        cursor      : pointer;
        color       : var(--menu__color-hamburger);

        @media screen and (width > 768px) {
            display : none;
        }

        span,
        span::before,
        span::after {
            position      : relative;
            display       : block;
            background    : var(--menu__color-hamburger);
            height        : 4px;
            width         : 2em;
            border-radius : 999px;
        }

        span::before,
        span::after {
            content       : '';
            position      : absolute;
        }

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

    /***************************************************************************
    **  FOOTER
    ***************************************************************************/

    footer {

        font                         : var(--fw-regular) 0.7rem/1.2 var(--ff-regular);
        color                        : var(--site__color-text);
        background-color             : var(--site__color-light);

        width                        : 100%;
        margin                       : 0 auto;
        background-repeat            : repeat;

        padding                      : 1rem;
        display                      : grid;
        grid-template-rows           : 1fr;
        align-items                  : center;
        justify-content              : center;
        gap                          : 1rem;

        .short-terms {
            text-align               : center;

            a {
                font-weight          : var(--fw-bold);
                text-decoration      : none;
                color                : inherit;
                &:hover {
                    color            : var(--site__color-accent); 
                }
            }

            @media screen and (width > 768px) {
                max-width            : var(--wid-width);
                font-size            : 0.85rem;
            }
        }

        nav {

            color                    : var(--site__color-text);
            text-align               : center;

            display                  : flex;
            flex-direction           : row;
            gap                      : 1em;
            align-items              : center;
            justify-content          : center;

            column-rule              : 1px inset var(--site__color-text); 

            @media screen and (width > 768px) {
                font-size            : 0.9rem;
                column-rule          : 2px inset var(--site__color-text); 
            }

            a {
                font                 : var(--fw-bold) 0.75rem/1 var(--ff-regular);
                padding-block        : 0.3em 0;
                position             : relative;
                text-decoration      : none;

                color                : inherit;

                @media screen and (width > 768px) {
                    font-size        : 1.1rem; 
                }

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