/* ********************************* *
 * *        C O N T R O L S        * *
 * ********************************* */

:root {

/*
    --controls__upload    : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,-13 10,-4 7,-1 2,-6 2,5 -2,5 -2,-6 -7,-1 -10,-4'/></g></svg>");
    --controls__download  : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23E9322A;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-15,7 -15,15 15,15 15,7 11,7 11,11 -11,11 -11,7' /><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,7 11,-2 7,-5, 2,0 2,-15 -2,-15 -2,0 -7,-5 -11,-2'/></g></svg>");
    --controls__arrowup   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23E9322A;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-1,-8 -10,6 -8,8 0,-4.5 8,8 10,6 1,-8'/></g></svg>");
    --controls__arrowdown : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23E9322A;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8,-8 -10,-6 -1,8 1,8 10,-6 8,-8 0,4.5'/></g></svg>");
    --controls__arrowup   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-1,-8 -10,6 -8.5,8 8.5,8 10,6 1,-8'/></g></svg>");
    --controls__arrowdown : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-8.5,-8 -10,-6 -1,8 1,8 10,-6 8.5,-8'/></g></svg>");
*/
    --controls__upload    : url("../assets/upload2.png");
    --controls__arrowup   : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-10,8 0,-8 10,8'/></g></svg>");
    --controls__arrowdown : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='32' viewBox='0 0 32 32' xml:space='preserve' style='fill: %23000000;'><g transform='matrix(1 0 0 1 16 16)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='-10,-8 0,8 10,-8'/></g></svg>");

    --controls__upload-size               : 48px 48px;
    --controls__arrow-size                : 60px 60px;
    --controls__arrow-position            : bottom 50% right 0;

    --controls__color                     : var(--site__color-text);
    --controls__color-back                : var(--site__color-light);
    --controls__color-label               : var(--site__color-dark);
    --controls__color-disabled-back       : var(--site__color-disabled);
    --controls__color-placeholder         : var(--site__color-disabled);

    --controls__border-radius             : 7px;
    --controls__case                      : none;
    --controls__height                    : 3.5rem;

    --controls__font                      : var(--fw-bold)    1.6rem/1 var(--ff-regular);
    --controls__font-option               : var(--fw-regular) 1.6rem/1 var(--ff-option);
    --controls__font-placeholder          : 300               1.6rem/1 var(--ff-regular);
}

/** ********************************************* **/
/** MISCELLANEOUS                                 **/
/** ********************************************* **/

.no-border {
    border: none;
}

/** ********************************************* **/
/** CONTAINERS                                    **/
/** ********************************************* **/

.grid-row {
    align-self: center;
    justify-self: left;
}

.row,
.row-center,
.button-container {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1rem;
}

.row-center {
    justify-content: center;
}

.button-container {
    padding-top: 2rem;
    justify-content: center;
    gap: 2rem;
}

/** ********************************************* **/
/** LABELS                                        **/
/** ********************************************* **/

.label-text {
    color: var(--controls__color-label);
    font-size: 1.2rem;
    line-height: 1.3;

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

    span:first-child {
        text-transform: var(--controls__case);
    }
}


/** ********************************************* **/
/** LINK BUTTON AND ASP BUTTON                    **/
/** STYLED (PROMO) BUTTON                         **/
/** ********************************************* **/

button,
.promo-button,
.button-container a {

    --button-color       : var(--site__color-light);
    --button-color-back  : var(--site__color-dark);

    font                 : var(--fw-bold) 2.4rem/1.2 var(--ff-regular);
    text-transform       : uppercase;
    text-decoration      : none;
    word-break           : unset;

    color                : var(--button-color);
    background-color     : var(--button-color-back);
    padding              : 0.35em 1em 0.2em 1em;
    outline              : transparent;
    border               : none;
    border-radius        : 0.5em; 
    cursor               : pointer;

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

/** ********************************************* **/
/** GENERIC INPUT FORMATTING                      **/
/** ********************************************* **/

input {

    &::placeholder {
        font                 : var(--controls__font-placeholder);
        color                : var(--controls__color-placeholder);
        text-transform       : var(--controls__case);
    }

    &::selection {
        color                : var(--site__color-light);
        background-color     : var(--site__color-alt);
    }

    &:-webkit-autofill,
    &:-webkit-autofill:hover, 
    &:-webkit-autofill:focus, 
    &:-webkit-autofill:active {
        transition           : background-color 5000s ease-in-out 0s;
        font                 : var(--controls__font);
    }

    &:disabled {
        background-color     : var(--controls__color-disabled-back);
        opacity              : 0.5;
    }

}

/** ********************************************* **/
/** TEXT BOX                                      **/
/** ********************************************* **/

.textbox {
    height                   : var(--controls__height);
    width                    : 100%;
    outline                  : transparent;
    border                   : none;
    border-radius            : var(--controls__border-radius);
    padding                  : 0.2em 0 0em 0.6em;
    color                    : var(--controls__color);
    background-color         : var(--controls__color-back);

    font                     : var(--controls__font);
}

/** ********************************************* **/
/** COMBO BOX                                     **/
/** ********************************************* **/

select {

    -webkit-appearance      : none;
    -moz-appearance         : none;
    appearance              : none;
    
    width                   : 100%;
    height                  : var(--controls__height);
    outline                 : transparent;
    border                  : var(--controls__border);
    border-radius           : var(--controls__border-radius);
    padding                 : 0.2em 3em 0 0.6em;

    font                    : var(--controls__font);
    color                   : var(--controls__color);

    background              : var(--controls__color-back) var(--controls__arrowdown) no-repeat right;
    background-size         : var(--controls__arrow-size);
    background-position     : var(--controls__arrow-position);

    box-shadow              : inset 1px 1px 3px var(--site__color-neutral);

    position                : relative;
    z-index                 : 0;

    text-indent             : 0.01px;
    text-transform          : var(--controls__case); 
    text-overflow           : ellipsis;
    overflow                : hidden;
    white-space             : nowrap;

    &:has(option:first-child:checked) {
        color               : var(--controls__color-placeholder);
        font-weight         : var(--fw-regular);
    }

    &::selection {
        color               : var(--site__color-dark);
        background-color    : var(--site__color-light);
        opacity             : 1;
    }

    &::placeholder {
        color               : var(--controls__color);
        text-transform      : var(--controls__case);
        opacity             : var(--controls__placeholder-opacity);
    }

    &:disabled {
        background-color    : var(--controls__color-disabled-back);
        opacity             : 1;
    }

    &:active, 
    &:focus {
        background          : var(--controls__color-back) var(--controls__arrowup) no-repeat right;
        background-size     : var(--controls__arrow-size);
        background-position : var(--controls__arrow-position);
    }

    option {
        font                : var(--controls__font-option);
        color               : var(--site__color-dark);
        background-color    : var(--controls__color-back);

        &:active {
            font-weight     : 700;
            color           : var(--controls__color);
        }

        &:first-child {
            font-weight     : 700;
            color           : var(--site__color-alt);
        }
    }
}

/** ********************************************* **/
/** NEW APPEARANCE COMBO BOX                      **/
/** ********************************************* **/
/*
@supports(appearance:base-select) {
    select, ::picker(select) {
        appearance               : base-select;
        border                   : 1px solid var(--controls__color-back);
        border-radius            : var(--controls__border-radius);
    }
 
    select {
        width                    : 100%;
        outline                  : transparent;
        padding                  : 0.2em 0.4em 0em 0.6em;

        align-items              : center;

        border                   : none;

        text-indent              : 0.01px;
        white-space              : nowrap;
        overflow                 : hidden;
        text-overflow            : ellipsis;
        max-width                : 100%;

        text-transform           : var(--controls__case); 

        position                 : relative;
        z-index                  : 0;

        font                     : var(--controls__font);
        color                    : var(--controls__color);
        background-color         : var(--controls__color-back);

        &:has(option:first-child:checked) {
            color                : var(--controls__color-placeholder);
            font-weight          : var(--fw-regular);
        }

        &:active, 
        &:focus-visible {
            color                : var(--controls__color);
            outline              : 2px solid var(--controls__color-back);
            outline-offset       : 1px;
        }

        &::picker-icon {
            transition           : rotate 300ms ease;
            color                : var(--site__color-dark);
            content              : "▼";  
            font-size            : 3rem;
            line-height          : 1;
        }

        &:open::picker-icon {
            rotate               : 180deg;
        }

        option {
            font                 : var(--controls__font-option);
            color                : var(--controls__color);
            background-color     : var(--controls__color-back);

            margin-top           : 5px;

            &:checked {
                color            : var(--site__color-alt);
                background-color : lightcyan;
                font-weight      : var(--fw-bold);
            }

            &::checkmark {
                content          : "";
            }

            &:active {
                color            : var(--controls__color);
                font-weight      : var(--fw-bold);
            }

            &:first-child {
                color            : var(--controls__color);
            }
        }
    }
}
*/
/** ********************************************* **/
/** CHECK BOX                                     **/
/** ********************************************* **/

.checkbox {
    -webkit-appearance   : none;
    -moz-appearance      : none;
    appearance           : none;

    display              : inline-block;
    position             : relative;
    color                : var(--controls__color);
    background-color     : var(--controls__color-back);
    height               : var(--controls__height);
    min-width            : var(--controls__height);
    cursor               : pointer;
    outline              : transparent;

    border               : 3px solid var(--site__color-light);
    border-radius        : var(--controls__border-radius);

    &:hover {
        color            : var(--site__color-light);
        background-color : var(--site__color-hilite);
        border-color     : var(--site__color-accent);
    }

    &:checked::before {
        position         : absolute;
        font             : 900 3rem var(--ff-regular);
        left             : 6px;
        top              : -8px;
        content          : '\02713';
    }
}

/** ********************************************* **/
/** RADIO BUTTONS                                 **/
/** ********************************************* **/

.radio {
    -webkit-appearance   : none;
    -moz-appearance      : none;
    appearance           : none;
    display              : inline-block;
    position             : relative;
    height               : 1.6em;
    width                : 1.6em;
    cursor               : pointer;
    outline              : transparent;
    color                : var(--controls__color);
    background-color     : var(--controls__color-back);
    border               : solid 5px var(--controls__color);
    border-radius        : 50%;

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

/** ********************************************* **/
/** DETAILS AND SUMMARY (ACCORDION)               **/
/** ********************************************* **/

details {

    border-bottom            : 2px solid #FFFFFF7F;
    padding                  : 1.5rem 2rem 1.5rem 1rem;
    font-size                : 1.4rem;
    font-weight              : 500;
    margin                   : 0 auto;
    overflow-y               : clip;

    &::details-content {
        transition           : block-size 500ms, padding 500ms, opacity 500ms, 
                               content-visibility 500ms allow-discrete;
        block-size           : 0;
        opacity              : 0;
    }

    &[open]::details-content {
        padding              : 1rem 0 0 0;
        block-size           : auto;
        opacity              : 1;
    }

    &[open] summary::after {
        transform            : rotate(0deg);
    }

    summary {
        position             : relative; 
        anchor-name          : --summary;
        margin               : 0 auto;
        font-weight          : var(--fw-bold);
        font-size            : 1.6rem;
        cursor               : pointer;
        width                : 100%;

        &::marker {
            content          : "";
        }

        &::after {
            content          : url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='20' height='20' viewBox='0 0 20 20' xml:space='preserve' style='fill: %23FFFFFF;'><g transform='translate(10, 13)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,-8 -10,6 -8,8 0,-4 8,8 10,6'/></g></svg>");
            /* Positions the lines */
            position         : absolute;
            top              : 0;
            right            : -2rem;
    
            /* Anchor the shape to the summary */
            position-anchor  : --summary;
            position-area    : center right;

            transition       : transform 500ms;
            transform        : rotate(-180deg);
            transform-origin : center;
        }
    }
}


/** ********************************************* **/
/** UPLOAD CONTROL AND PREVIEW PANEL              **/
/** ********************************************* **/

.upload-panel {
    display                   : block;
    position                  : relative;
    color                     : #959190;
    background-color          : transparent;
    text-align                : center;
    font-size                 : inherit;
    border-radius             : var(--controls__border-radius);
}

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : uppercase;
    font                      : 550 1.1rem/1 var(--ff-regular);
    padding                   : 0;
    outline                   : transparent;
    border                    : 1rem solid var(--controls__color-back);
    border-radius             : var(--controls__border-radius) var(--controls__border-radius) 0 0;
    overflow                  : hidden;
    width                     : 100%;
    min-height                : 8rem;
    color                     : var(--controls__color);
    background                : var(--controls__color-back) var(--controls__upload) no-repeat center bottom;
    background-size           : var(--controls__upload-size);
    transition: color            .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color     .15s ease-in-out,
                box-shadow       .15s ease-in-out;
}

.upload-control {
    opacity                   : 0;
    position                  : absolute;
    top                       : 0;
    left                      : 0;
    width                     : 100%;
    height                    : 100%;
    cursor                    : pointer;
}

.upload-preview-panel {
    display                   : none;
    max-width                 : 100%;
    transition                : height .3s ease-out;
    height                    : 0;
    overflow                  : hidden;
    background-color          : var(--controls__color-back);
    margin                    : auto !important;

    img {
        height                : inherit;
        width                 : 100%;
        margin                : auto;
    }
}

.upload-label {
    display                   : block;
    text-align                : center;
    font-size                 : 1rem;
    font-weight               : var(--fw-bold);
    line-height               : var(--lh-base);
    color                     : var(--controls__color-placeholder);
    background-color          : var(--site__color-light);
    border-radius             : 0 0 var(--controls__border-radius) var(--controls__border-radius);
}

/** ********************************************* **/
/** FOR KEYBOARD NAVIGATION AND ACCESSABILITY     **/
/** ********************************************* **/

      .upload-panel:focus-within,
                  a:focus-visible,
             button:focus-visible,
             select:focus-visible,
             .radio:focus-visible,
           .textbox:focus-visible,
          .checkbox:focus-visible,
      .promo-button:focus-visible,
.button-container a:focus-visible {
    outline                   : 2px solid var(--controls__color-back);
    outline-offset            : 1px;
}