/* ==========================
   COLOR UTILITIES
=========================== */
.text-yellow { color: #d5b647; }
.text-dark   { color: #181818; }
.text-light  { color: #E0F2F1; }

.bg-light    { background-color: #E0F2F1; }
.bg-dark     { background-color: #032a24; }
.bg-default  { background-color: #0c311c; }

/* ==========================
   ROOT VARIABLES
=========================== */
:root {
    --navbar-height: 56px;
}

/* ==========================
   GLOBAL STYLES
=========================== */
body {
    margin: 0;
    padding-top: var(--navbar-height);   /* offset for fixed navbar */
    min-height: 100vh;
    background: url('../../images/BPC_campus.png') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
}

.navbar {
    height: var(--navbar-height);
}

/* ==========================
   HERO & FULL-HEIGHT SECTIONS
=========================== */
.hero,
#signin-wrapper {
    min-height: calc(100vh - var(--navbar-height));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero {
    text-align: center;
}

/* ==========================
   SIGNIN CARD
=========================== */
.signin-card {
    width: 24rem;
    max-width: 92%;
    margin: 1rem;
    position: relative; /* so the close button can sit inside */
}

.signin-card .card-body,
.signin-card .card-title {
    text-align: left;
}

.signin-card .card-title {
    font-weight: 600;
}

.signin-card .btn-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

/* ==========================
   DROPDOWN BEHAVIOR
=========================== */
/* Show dropdown on hover for desktop */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* remove spacing */
    }
}

/* ==========================
   RESPONSIVE ADJUSTMENTS
=========================== */
/* --------------------------
   Navbar Brand Text
-------------------------- */
@media (max-width: 991.98px) {
    .navbar-brand .brand-text { font-size: 0.9rem; }
}

@media (max-width: 575.98px) {
    .navbar-brand .brand-text { font-size: 0.85rem; }
}

/* --------------------------
   Mobile Nav Links
   Shrink text and reduce padding
-------------------------- */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        font-size: 0.85rem;   /* tablets */
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .navbar-nav .nav-link {
        font-size: 0.8rem;    /* phones */
    }
}

/* --------------------------
   Hero Text Scaling
-------------------------- */
@media (max-width: 991.98px) {
    .hero h1 { font-size: 2rem; }
    .hero h2 { font-size: 1.25rem; }
    .hero p.lead { font-size: 0.95rem; }
}

@media (max-width: 575.98px) {
    .hero h1 { font-size: 1.5rem; }
    .hero h2 { font-size: 1rem; }
    .hero p.lead { font-size: 0.85rem; }
}

/* --------------------------
   Signin Card Responsiveness
-------------------------- */
@media (max-width: 991.98px) {
    .signin-card { width: 20rem; margin: 0.5rem; }
    .signin-card .card-title { font-size: 1.1rem; }
    .signin-card .form-label,
    .signin-card .form-control { font-size: 0.9rem; }
    .signin-card button.btn { font-size: 0.95rem; }
}

@media (max-width: 575.98px) {
    .signin-card { width: 18rem; margin: 0.25rem; }
    .signin-card .card-title { font-size: 1rem; }
    .signin-card .form-label,
    .signin-card .form-control,
    .signin-card button.btn { font-size: 0.85rem; }
}