body, h1, h2, h3, h4, h5, h6 {
    font-family: "Aldrich", sans-serif;
}

body, html {
    height: 100%;
    scroll-behavior: smooth; /* Smooth scrolling for navbar links */
    width: 100%;
}


/* ----- EXTRA FONT SIZES-----  */
.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.75rem !important; }


/* ----- MAIN CONTAINER WIDTH -----  */
.container-wide {
    max-width: 1700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero Text Shadow */
.text-shadow {
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9);
}

/* ----- NAVBAR STYLING ----- */

/* navbar link color (inactive pages) */
#mainNavbar .navbar-nav .nav-link {
    /* Stronger white to ensure it overrides Bootstrap defaults */
    color: rgba(255, 255, 255, 1) !important; 
    
}

/* decrease link opacity on hover */
#mainNavbar .navbar-nav .nav-link:hover,
#mainNavbar .navbar-nav .nav-link:focus {
opacity: 0.7 !important;
}

/* active navbar link page behavior */
#mainNavbar .navbar-nav .nav-link.active {
    color: #FFFFFF !important;
    font-weight: bold !important; /* Forces the fake bold */
    opacity: 1 !important;
}

/* Logo text */
.brand-text {
    font-size: 2.1rem; /* Adjust to make text bigger or smaller (e.g., 1.5rem, 18px, etc.) */
    margin-left: 10px;  /* Adjust the horizontal space between the logo and the text */
    margin-top: 10px;    /* Nudge text down slightly (use margin-bottom to nudge up) */
}

/* Squeeze navbar items on zoom transition so they don't cut off */
@media (min-width: 1375px) and (max-width: 1600px) {
    
    /* 1. Reduce the gap between links (Bootstrap defaults to 0.5rem) */
    #mainNavbar .navbar-nav .nav-link {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    /* 2. Slightly shrink the gap between the nav items */
    #mainNavbar .navbar-nav {
        gap: 0.25rem !important;
    }
    
}

/* ----- NAVBAR SCROLLING BEHAVIOR ----- */

/* Color transition for the navbar */
#mainNavbar {
    transition: all 0.1s ease-in-out;
    background-color: rgba(0, 0, 0, 1);
    border-bottom: 2px solid #FFC733;
}

.navbar-scrolled {
    /* Change the transition color hex and opacity */
    background-color: rgba(0, 0, 0, 1) !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Adds a slight drop shadow */
    border-bottom: 2px solid #FFC733;
}

/* Scrolling transition for navbar and component size */
#mainNavbar img,
#mainNavbar .brand-text,
#mainNavbar .nav-link {
transition: all 0.2s ease-in-out;
}

/* Shrink the logo height from 45px to 30px */
.navbar-scrolled img {
height: 30px !important;
}

/* Shrink the brand text slightly */
.navbar-scrolled .brand-text {
font-size: 1rem !important;
margin-left: 5px !important;
margin-top: 11px !important;
}

/* Shrink the navigation links */
.navbar-scrolled .nav-link {
font-size: 0.9rem !important;
}

/* set active item text to bold */
.dropdown-menu .dropdown-item.active {
    font-weight: bold !important;
}

/* set dropdown bg color to black */
.dropdown-menu .dropdown-item {
    background-color: rgba(0, 0, 0, 1) !important;
    font-size: 1rem !important;
}

/* Set color and opacity of hovered link (same as navbar links)*/
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(0, 0, 0, 1) !important; /*black background */
    color: rgba(255, 255, 255, 0.7) !important; /*0.7 text opacity */
}


/* remove padding from dropdown */
.dropdown-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* keep active link full opacity on hover */
.dropdown-menu .dropdown-item.active:hover {
    color: #FFFFFF !important;
}

/* Spacer for pages without a hero image */
.nav-spacer {
    /* Adjust this value if your navbar is taller or shorter */
    padding-top: 120px; 
}

/* add indentation on dropdown for bar menu */
@media (max-width: 1400px) {
    #mainNavbar .dropdown-menu .dropdown-item {
    padding-left: 2.5rem !important;
    font-size: 0.8rem !important;
    }
}


/* BUTTONS STYLING */
.btn-custom-outline {
    color: #000000; /* Default dark text */
    border-color: #000000; /* Default dark border */
}
/* Change the background, border, and text color on hover */
.btn-custom-outline:hover, 
.btn-custom-outline:focus, 
.btn-custom-outline:active {
    background-color: #FFC733; /* Your GMU green color */
    border-color: #FFC733;
    color: #000000; /* White text on hover */
}