/* ********************************* *
 * *        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/upload3.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          : 45px 45px;
    --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 : color-mix(in srgb, var(--site__color-disabled) 30%, var(--site__color-light));
    --controls__color-placeholder   : color-mix(in srgb, var(--site__color-disabled) 90%, var(--site__color-dark));

    --controls__color-border-hover  : var(--controls__color-back);
    --controls__color-hover-back    : color-mix(in srgb, var(--site__color-page) 20%, var(--site__color-light));
    --controls__border              : 3px solid transparent;
    --controls__border-radius       : 5px;
    --controls__case                : none;
    --controls__height              : 3rem;

    --controls__font                : var(--fw-semibold) 1.3rem/1.3 var(--ff-regular);
    --controls__font-option         : var(--fw-regular)  1.3rem/1.3 var(--ff-option);
    --controls__font-placeholder    : var(--fw-light)    1.3rem/1.3 var(--ff-regular);

    --button-color                  : var(--site__color-light);
    --button-color-back             : var(--site__color-dark);
    --ff-button                     : var(--font-family-Acumin);
}

/** ********************************************* **/
/** 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 {
    font                     : var(--fw-extrabold) 1.8rem/1.2 var(--ff-button);
    font-variation-settings  : "slnt" 0;
    font-style               : normal;
/*    font-synthesis           : none;*/

/*    text-box-trim            : trim-both;
    text-box-edge            : cap alphabetic;*/

    text-transform           : uppercase;
    text-decoration          : none;
    word-break               : unset;

    padding                  : 0.5em 0.75em 0.2em 0.75em;
    border                   : none;
    border-radius            : 0.35em; 
    min-width                : 12ch;
    cursor                   : pointer;

    transition               : background-color 200ms ease-in-out,
                               color             50ms ease-in-out;

    color                    : var(--button-color);
    background-color         : var(--button-color-back);

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

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

input {

    border                   : var(--controls__border);
    border-radius            : var(--controls__border-radius);

    font                     : var(--controls__font);
    font-variation-settings  : "slnt" 0;
    font-style               : normal;

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

    &::placeholder {
        font                 : var(--controls__font-placeholder);
        font-variation-settings : "slnt" 0;
        font-style              : normal;
        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);
        font-variation-settings : "slnt" 0;
        font-style              : normal;
    }

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

}

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

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

    font                     : var(--controls__font);
    font-variation-settings  : "slnt" 0;
    font-style               : normal;

    border                   : var(--controls__border);
    border-radius            : var(--controls__border-radius);

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

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

select {

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

    font                     : var(--controls__font);
    font-variation-settings  : "slnt" 0;
    font-style               : normal;

    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;

    border                   : var(--controls__border);
    border-radius            : var(--controls__border-radius);

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

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

    optgroup {
        font-weight          : var(--fw-bold);
        color                : var(--site__color-hilite);
    }

    option {
        font                 : var(--controls__font-option);
        font-variation-settings : "slnt" 0;
        font-style              : normal;
        color                : var(--site__color-dark);
        background-color     : var(--controls__color-back);

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

        &:hover {
            background-color : red !important;
        }

    }

    &:has(option:first-child:checked),
    &:has(option:disabled:checked) {
        font                 : var(--controls__font-placeholder);
        color                : var(--controls__color-placeholder);
        font-variation-settings : "slnt" 0;
        font-style              : normal;
    }

}

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

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

    position                 : relative;
    color                    : var(--controls__color);
    background-color         : var(--controls__color-back);

    height                   : var(--controls__height);
    width                    : var(--controls__height);
    min-width                : var(--controls__height);

    cursor                   : pointer;
    outline                  : transparent;

    border                   : var(--controls__border);
    border-radius            : var(--controls__border-radius);

    &:hover {
        color                : var(--site__color-light);
        background-color     : var(--controls__color-hover-back);
        border-color         : var(--controls__color-border-hover);
    }

    &:checked::before {
        position             : relative;
        font                 : var(--fw-black) 3rem/1 var(--ff-regular);

        height               : var(--controls__height);
        width                : var(--controls__height);

        display              : block;
        align-content        : center;
        text-align           : center;
        padding-block-start  : 0.0em;
        padding-inline-end   : 0.15em;

        content              : '\02143'; 
        content              : '\02714';
        content              : '\02713';
    }
}

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

.radio {
    -webkit-appearance       : none;
    -moz-appearance          : none;
    appearance               : none;
    display                  : inline-block;
    position                 : relative;
    height                   : var(--controls__height);
    width                    : var(--controls__height);
    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 {

    font                     : var(--controls__font);
    font-variation-settings  : "slnt" 0;
    font-style               : normal;

    border-bottom            : 2px solid var(--site__color-hilite);
    padding                  : 1.5rem 2rem 1.5rem 1rem;
    font-size                : var(--fs-300);
    font-weight              : var(--fw-light);
    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              : 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            : var(--fs-300);
        cursor               : pointer;
        width                : 100%;
        text-transform       : uppercase;

        /* for iOS */
        list-style           : none; 
        &::-webkit-details-marker { display: none; }

        &::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: %23CDA44A;'><g transform='translate(10, 13)'><polygon style='fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' points='0,-6 -10,4 -8,6 0,-2 8,6 10,4'/></g></svg>");
            /* Positions the lines */
            position         : absolute;
            top              : 20%;
            right            : -2rem;
    
            /* Anchor the shape to the summary */
            position-anchor  : --summary;
            position-area    : center right;

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

/** ********************************************* **/
/** BASIC POPOVER ANIMATION                       **/
/** ********************************************* **/

.popover {
    opacity             : 0;
    translate           : 0 40px;

    &::backdrop { 
        backdrop-filter : blur(2px);
    }

    transition          : display, opacity, translate, overlay;
    transition-behavior : allow-discrete;
    transition-duration : 400ms;

    &::backdrop {
        backdrop-filter : blur(4px);
        opacity         : 0;
        transition      : opacity 400ms ease; 
    }

    &:popover-open {
        display         : grid;
        opacity         : 1;
        translate       : 0 0;

        &::backdrop {
            opacity     : 1;
        }

        @starting-style {
            opacity     : 0;
            translate   : 0 -40px;
            &::backdrop {
                opacity : 0;
            }
        }
    }
}

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

.upload-panel {
    display                   : block;
    position                  : relative;
    background-color          : var(--controls__color-back);
    text-align                : center;
    font-size                 : inherit;

    border                    : var(--controls__border);
    border-radius             : var(--controls__border-radius);

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

.upload-button {
    position                  : relative;
    display                   : grid;
    align-content             : start;
    text-align                : center;
    text-transform            : uppercase;
    font                      : 500 1.1rem/1 var(--ff-regular);
    padding                   : 1rem 0;
    outline                   : transparent;
    overflow                  : hidden;
    width                     : 100%;
    min-height                : 8rem;
    color                     : var(--controls__color);
    background                : var(--controls__upload) no-repeat center bottom 1rem;
    background-size           : var(--controls__upload-size);
    transition: 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          : transparent;
    margin                    : auto !important;

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

.upload-label {
    display                   : block;
    text-align                : center;
    font-size                 : 1rem;
    font-weight               : var(--fw-light);
    line-height               : var(--lh-base);
    padding-block-start       : 0.5em;
    color                     : var(--controls__color);
    background-color          : transparent;
    overflow                  : hidden;
}

/** ********************************************* **/
/** 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;
}