/* components/01-visual-styling/01-branding-standards/04-global-header/global-header.scss */
/* BEGIN global-header.scss */
/* Skip Button Functionality */

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use '../../node_modules/@fortawesome/fontawesome-pro/scss/fa' as fa;
a.Skip-btn {
	opacity: 0;
}
a.Skip-btn:focus {
	opacity: 1;
}
#skip-content {
    overflow: hidden;
    left: -100000px;
    position: absolute;
    height: 0;
    width: 0;
}
#skip-content.active {
	position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    overflow: auto !important;
    height: auto !important;
    width: auto !important;
}
a.Skip-btn {
	background-color: $orange-a11y !important;
	border: none;
	color: $white !important;
	padding: 10px 15px;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
}

#header .top-header {
    background-color: $blue;
}

#top-header {
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 4px solid $orange;
	padding-top: 1px;
	padding-bottom: 4px;
	background-color: $blue;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;


    .top-header-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    
    .top-header-left img.logo-full {
        width: 250px!important;
        height: 12px!important;
        max-width: 250px;
    }

    .top-header-left img.logo-short {
        width: 72px!important;
        height: 25px!important;
        max-width: 72px;
    }

    &.affiliate .top-header-left img.logo-full {
        width: 250px!important;
        height: 32px!important;
        max-width: 250px;
    }

    &.affiliate .top-header-left img.logo-short {
        width: 72px!important;
        height: 35px!important;
        max-width: 72px;
    }

    .top-header-left {
        position: relative;
        top: 2px;
    }
    
    .language-select>select {
        font-size: 12px;
        height: 18px;
    }
    
    .language-select {
        padding-right: 15px;
    }
    
    .myutsa-link {
        padding-right: 15px;
    }
    
    .myutsa-link a {
        color: $white;
        font-size: 13px;
        font-weight: 300;
    }
    
    .myutsa-link i,
    .myutsa-link svg {
        vertical-align: middle;
    }
    
    .myutsa-text {
        font-size: 13px;
        font-weight: 300;
    }
    
    .myutsa-link .icon {
        vertical-align: middle;
    }
    
    .search-btn {
        background-color: transparent;
        border: none;
        color: $white;
        font-size: 13px;
        font-weight: 300;
        padding: 0px;
    }

    .search-btn::after {
        display: none;
    }

    .search {
        .dropdown-menu {
            -webkit-transform: none !important;
            -ms-transform: none !important;
            transform: none !important;
            background-color: transparent !important;
            border: none !important;
        }
        
        .dropdown-menu {
            width: 100%;
            max-width: 1200px;
            margin-left: auto !important;
            margin-right: auto !important;
            left: 0 !important;
            right: 0 !important;
            top: 18px !important;
            padding: 0px 15px !important;
        }
        
        .dropdown-menu input {
            width: 100%;
            border: none;
            padding: 10px 50px 10px 15px;
        }
        
        .dropdown-menu .search-input-icon {
            background-color: $orange-a11y;
            color: $white;
            padding: 10px 15px;
            position: absolute;
            right: 15px;
            border: none;
        }
    
        .dropdown-menu.show {
            display: none;
        }
    }

    @include media-breakpoint-down(lg) {
        .myutsa-text {
            display: none;
        }
    }
}

#header.search-bar-active {
    padding-top: 72px;

    .search .dropdown-menu {
        display: block !important;
    }
}

@include media-breakpoint-down(lg) {
	.search .dropdown-menu input {
		padding: 6px 30px 6px 15px;
	}
	.search .dropdown-menu .search-input-icon {
		padding: 6px 15px 6px 15px;
	}
    .language-select>select {
		font-size: 10px;
	}
}

/* BEGIN rebrand stuff */
// + Brand Colors
$midnight: #032044;
$utsa-orange: #F15A22;
$utsa-orange-a11y: #d3430d;
$talavera-blue: #265bf7;
$river-mist: #c8dcff;
$anti-flash: #edeff2;
$platinum: #dce0e6;
$french-gray: #b4bdc7;
// + Colors
$utsa-blue: $midnight;
$orange-a11y: $utsa-orange-a11y;
$white: #fff;
$black: #000;
// + Blues
$blue-highlight: $talavera-blue;
$blue-02: $french-gray;
// + Grays
$gray-00: $anti-flash;
$gray-01: $platinum;
$gray-03: $french-gray;
$gray-05: #232323;
$gray-f6: #f6f6f6;
// ++ Weights
$normal: 400;
// $med: 500;
$bold: 700;
// $black-weight: 900;

.top-bar {
	background-color: $utsa-blue;
	color: $white;
	padding: 0 1.5rem;
	height: 2.4444444444rem;
	// border-bottom: 4px solid $utsa-orange;
	width: 100%;
	align-content: center;
	font-size: rem-calc(15);

    @include media-breakpoint-down(lg) {
        font-size: rem-calc(12.5);
    }

    @include media-breakpoint-down(sm) {
        font-size: rem-calc(11.6667);
    }

	.col-4 {
		line-height: 1;

		a {
			padding-top: rem-calc(3);
		}
	}

	.row {
        // height: 50px;
        height: rem-calc(44);
        @include media-breakpoint-down(lg) {
            height: rem-calc(36);
        }
        @include media-breakpoint-down(sm) {
            height: rem-calc(34.2);
        }
    }

	ul {
		margin: 0;
		padding: 0;
		text-align: right;
		justify-content: flex-end;
		display: flex;
		gap: 1rem;
		white-space: nowrap;

		li {
			margin: 0;
			display: inline-block;
			border-left: 1px solid $blue-light;
			padding-left: 1rem;
			line-height: 1;

			&:first-child {
				border-left-width: 0;
				padding-left: 0;
			}

			a {
				color: $white;
				display: block;
				padding: 0;
				// font-size: rem-calc(15);
				font-weight: $normal;
				text-decoration: none;
				border-bottom: 1px solid transparent;
				outline: none;
				transition: border-color 0.3s ease;

				&:hover {
					color: $grey;
					background-color: transparent;
					border-color: $white;
					text-decoration: none;
				}

				&:focus {
					text-decoration: none;
					background-color: transparent;
					border-color: $orange;
				}

				&.global-search {
					text-decoration: none;

					&:focus {
						text-decoration: none;
						border-color: $orange;
					}
				}
			}
		}
	}
	// Topbar Logo


	.tb-logo {
		display: inline-block;
		&:hover,
		&:focus,
        &:focus-visible {
            outline: 0px solid transparent;
            color: $blue;
            background-color: $grey;
            text-decoration: none;
            border-bottom: 1px solid $orange-a11y;
            >img {
                filter: invert(1);
            }
        }

        img {
            height: 1.25rem;
            width: auto;

            @include media-breakpoint-down(lg) {
                height: rem-calc(16.6625);
            }

        }

	}
}

// Selection
::selection {
    background-color: $orange-a11y;
    color: $white;
}

.global-searchbar {
	background-color: $utsa-blue;
	float: left;
	opacity: 1.0;
	visibility: hidden;
	width: 100%;
	height: 0;

	&.active {
		padding: 2rem 1rem;
		visibility: visible;
		transform: translate(0);
		float: none;
		height: auto;
		opacity: 1;
	}

    input {
        padding: 0.45rem 0.75rem;
        margin: 0rem 1rem 0 0;
    }

    .btn {
        margin: 1.5rem 1rem 0 0;
        font-weight: $bold;
        max-width: 100%;
        min-width: 90%;

        &-search {
            font-size: rem-calc(18);
            width: 100%;
            --bs-btn-border-radius: 0.1875rem;
            &:before {
                content: fa.fa-content(fa.$var-magnifying-glass);
                font-family: fa.$family;
                display: block;
            }
        }
    }
}

//Toggle
.global-search {
	&.active {
		.fas.fa-search:before {
			content: "\f00d";
		}
	}
}

.searchbar {
	.searchfield {
		border: 1px solid $gray-01;
		border-radius: $btn-border-radius;
		width: 100%;
		padding: 0.5rem 1rem;
	}
}


/* END rebrand stuff */

/* END global-header.scss */