/* =========================================================
   BNHS PUBLIC SITE - BOOTSTRAP THEME OVERRIDES
   Brand palette extracted from the original custom stylesheet.
   ========================================================= */

:root {
    --bnhs-navy: #0b2a4a;
    --bnhs-navy-dark: #071d33;
    --bnhs-gold: #d9a441;
    --bnhs-gold-hover: #e7b54e;
    --bnhs-bg-light: #f5f7fa;

    --bs-primary: var(--bnhs-navy);
    --bs-primary-rgb: 11, 42, 74;
}

body {
    color: #1f2937;
}


/* =========================================================
   GOVERNMENT MASTHEAD
   ========================================================= */

.gov-masthead {
    background-color: #f1f1f1;
    border-bottom: 1px solid #e0e0e0;
    color: #3f3f3f;
    font-size: 0.75rem;
}

.gov-masthead .container {
    padding-top: 5px;
    padding-bottom: 5px;
}

.gov-masthead-flag {
    width: 18px;
    height: auto;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .1);
}

.gov-masthead-sep {
    color: #b5b5b5;
}

@media (max-width: 575.98px) {

    .gov-masthead {
        font-size: 0.68rem;
    }

    .gov-masthead .container {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

a {
    color: var(--bnhs-navy);
}

.btn-primary {
    background-color: var(--bnhs-navy);
    border-color: var(--bnhs-navy);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bnhs-navy-dark) !important;
    border-color: var(--bnhs-navy-dark) !important;
}

.btn-bnhs-gold {
    background-color: var(--bnhs-gold);
    border-color: var(--bnhs-gold);
    color: var(--bnhs-navy);
    font-weight: 600;
}

.btn-bnhs-gold:hover,
.btn-bnhs-gold:focus {
    background-color: var(--bnhs-gold-hover);
    border-color: var(--bnhs-gold-hover);
    color: var(--bnhs-navy);
}

.bg-bnhs-navy { background-color: var(--bnhs-navy) !important; }
.bg-bnhs-navy-dark { background-color: var(--bnhs-navy-dark) !important; }
.bg-bnhs-light { background-color: var(--bnhs-bg-light) !important; }
.bg-bnhs-gold { background-color: var(--bnhs-gold) !important; }
.text-bnhs-navy { color: var(--bnhs-navy) !important; }
.text-bnhs-gold { color: var(--bnhs-gold) !important; }


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar-bnhs {
    background-color: var(--bnhs-navy);
}

.navbar-bnhs .school-logo {
    height: 56px;
    width: 56px;
    object-fit: contain;
}

.navbar-bnhs .school-name strong {
    color: #fff;
    font-size: 0.95rem;
    display: block;
    line-height: 1.2;
}

.navbar-bnhs .school-name span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    display: block;
    line-height: 1.2;
}

.navbar-bnhs .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.navbar-bnhs .nav-link:hover {
    color: #fff;
}

.navbar-bnhs .nav-link.active {
    color: #fff;
    border-bottom-color: var(--bnhs-gold);
}


/* ---------------------------------------------------
   NAVBAR - PHONES / TABLETS (below the hamburger breakpoint)
   ---------------------------------------------------
   Bootstrap keeps .navbar-brand on one line, so the long
   school name pushed the page ~40px wider than a 375px
   phone (sideways scrolling) and dropped the hamburger
   onto its own row. Let the brand shrink and wrap instead,
   and keep the hamburger beside it.
--------------------------------------------------- */

@media (max-width: 991.98px) {

    .navbar-bnhs .navbar-brand {
        flex: 1 1 0;
        min-width: 0;
        margin-right: .5rem;
        white-space: normal;
    }

    .navbar-bnhs .school-logo {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
    }

    .navbar-bnhs .school-name strong {
        font-size: .82rem;
    }

    .navbar-bnhs .school-name span {
        font-size: .7rem;
    }

    .navbar-bnhs .navbar-toggler {
        flex: 0 0 auto;
    }
}


/* ---------------------------------------------------
   NAVBAR - TIGHTER FIT AT THE "LG" BREAKPOINT
   ---------------------------------------------------
   Between 992px and 1199px the brand text ("306112 -
   BARUCBOC NATIONAL HIGH SCHOOL") plus all 7 nav items
   don't fit on one line at their default Bootstrap size,
   and nav-link wraps to 2 lines per item instead of the
   navbar just collapsing. The nav bar itself now runs in
   a fluid (edge-to-edge) container rather than Bootstrap's
   centered .container, which already reclaims most of the
   missing room; this trims padding/gaps/font-size a little
   further in just this range so everything stays on one
   line with room to spare. Below 992px it already collapses
   to the hamburger menu, and above 1199px there's enough
   room at full size.
--------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .navbar-bnhs .nav-link {
        white-space: nowrap;
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .88rem;
    }

    .navbar-bnhs .navbar-nav.gap-lg-2 {
        gap: .15rem !important;
    }

    .navbar-bnhs .nav-item.ms-lg-2 {
        margin-left: .35rem !important;
    }

    .navbar-bnhs .nav-item.ms-lg-2 .btn {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
        font-size: .88rem;
    }

    .navbar-bnhs .school-logo {
        width: 36px;
        height: 36px;
    }

    .navbar-bnhs .navbar-brand {
        gap: .32rem !important;
    }

    .navbar-bnhs .school-name strong {
        font-size: .75rem;
        white-space: nowrap;
    }

    .navbar-bnhs .school-name span {
        font-size: .63rem;
        white-space: nowrap;
    }
}


/* =========================================================
   ADMIN SIDEBAR
   (scoped to body.admin-panel so it never touches the
   public site, which keeps its own top .navbar-bnhs)
   ========================================================= */

:root {
    --admin-topbar-height: 72px;
}

body.admin-panel {
    margin: 0;
    padding-left: 260px;
    padding-top: calc(var(--admin-topbar-height) + 30px);
}


/* ---------------------------------------------------
   TOP BAR - copied from the portal's .portal-navbar
--------------------------------------------------- */

.admin-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--admin-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bnhs-navy);
    padding: 0 24px;
    z-index: 1050;
}

.admin-topbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.admin-topbar-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bnhs-gold);
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.admin-topbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-topbar-title {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: .95rem;
    line-height: 1.3;
}

.admin-topbar-subtitle {
    color: #cbd5e1;
    font-size: .8rem;
    line-height: 1.3;
}

.admin-sidebar-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    line-height: 1;
}

.admin-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bnhs-gold);
    color: var(--bnhs-navy);
    font-weight: 700;
    flex-shrink: 0;
}

.admin-user-name {
    color: #ffffff;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
}

.admin-user-role {
    color: #cbd5e1;
    font-size: .75rem;
    line-height: 1.2;
}


/* ---------------------------------------------------
   SIDEBAR - copied from the portal's .portal-sidebar
--------------------------------------------------- */

.admin-sidebar {
    position: fixed;
    top: var(--admin-topbar-height);
    left: 0;
    bottom: 0;
    width: 260px;
    background-color: var(--bnhs-navy-dark) !important;
    overflow-y: auto;
    z-index: 1040;
    padding: 25px 15px;
}

.admin-sidebar-title {
    margin: 10px 12px;
    color: var(--bnhs-gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    margin-bottom: 4px;
    border-radius: 7px;
    color: #dbe4ee;
    text-decoration: none;
    transition: .2s;
}

.admin-sidebar-link i {
    width: 20px;
    font-size: 1rem;
    text-align: center;
}

.admin-sidebar-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.admin-sidebar-link.active {
    background: var(--bnhs-gold);
    color: var(--bnhs-navy);
    font-weight: 700;
}

.admin-sidebar-link.text-danger {
    color: #f3b0ab !important;
}

@media (max-width: 991.98px) {

    body.admin-panel {
        padding-left: 0;
    }

    .admin-sidebar-toggle {
        display: inline-flex;
    }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 4px 0 16px rgba(0, 0, 0, .25);
    }

    .admin-sidebar.show {
        transform: translateX(0);
    }
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-bnhs {
    background-color: var(--bnhs-navy-dark);
    color: rgba(255, 255, 255, 0.75);
}

.footer-bnhs h3,
.footer-bnhs h4 {
    color: #fff;
}

.footer-bnhs h4 {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.footer-bnhs a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    display: block;
    line-height: 1.3;
    white-space: nowrap;
}

.footer-bnhs a:hover {
    color: var(--bnhs-gold);
}

.footer-bnhs .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.55);
}


/* ---------------------------------------------------
   BACK TO TOP BUTTON
--------------------------------------------------- */

.back-to-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: var(--bnhs-gold);
    color: var(--bnhs-navy);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
    z-index: 1030;
}

.back-to-top-btn:hover {
    background-color: var(--bnhs-gold-hover);
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ---------------------------------------------------
   FOOTER COLUMNS
   ---------------------------------------------------
   Content-sized instead of forced equal thirds, so a
   short list (e.g. "Online Portal") doesn't get stranded
   with a wide gap of dead space in front of it.
--------------------------------------------------- */

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: 2rem;
}

.footer-column.footer-brand {
    max-width: 320px;
    justify-self: start;
}

.footer-column:nth-child(2) {
    justify-self: center;
}

.footer-column:nth-child(3) {
    justify-self: end;
    margin-right: 3rem;
}

@media (max-width: 767.98px) {

    .footer-column:nth-child(3) {
        margin-right: 0;
    }
}

.footer-links-grid {
    columns: 2;
    column-gap: 1.5rem;
    width: 236px;
}

.footer-links-grid a {
    break-inside: avoid;
}

@media (max-width: 767.98px) {

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-column.footer-brand,
    .footer-column:nth-child(2),
    .footer-column:nth-child(3) {
        justify-self: start;
        max-width: none;
    }
}


/* =========================================================
   HERO / SECTION HELPERS
   ========================================================= */

/* Every public-page hero (plain and photo) shares this top padding, so the
   gold section label sits the same distance below the navbar on every page.
   The home page's "DEPARTMENT OF EDUCATION" label is the reference. */
.hero-bnhs,
.hero-bnhs-photo {
    padding-top: 1rem;
}

.hero-bnhs {
    padding-bottom: 3rem;
    background: linear-gradient(135deg, var(--bnhs-navy) 0%, var(--bnhs-navy-dark) 100%);
    color: #fff;
}

.hero-bnhs-photo {
    background:
        linear-gradient(115deg, rgba(11, 42, 74, 0.72) 0%, rgba(7, 29, 51, 0.45) 100%),
        url("../images/bnhs.jpg");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.section-label {
    color: var(--bnhs-navy);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--bnhs-gold);
    display: inline-block;
}

.hero-bnhs .section-label,
.hero-bnhs-photo .section-label {
    color: var(--bnhs-gold);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}


/* ---------------------------------------------------
   HOMEPAGE - IDENTITY CARDS OVERLAPPING THE HERO
   ---------------------------------------------------
   The hero gets extra bottom padding so there's room for
   these cards to sit half inside the photo and half on the
   white background below it (pulled up via negative margin).
   Disabled on small screens, where the cards just stack
   normally beneath the hero instead.
--------------------------------------------------- */

.hero-with-overlap {
    padding-bottom: 4rem;
}

.identity-cards-overlap {
    position: relative;
    z-index: 2;
    margin-top: -3.15rem;
}

.identity-card {
    border-radius: 4px;
    border-left: 3px solid var(--bnhs-gold) !important;
    transition: box-shadow .2s ease;
}

.identity-card:hover {
    box-shadow: 0 .75rem 1.5rem rgba(11, 42, 74, .12) !important;
}

.identity-icon-flat {
    font-size: 1.3rem;
    color: var(--bnhs-gold);
    line-height: 1.4;
    flex-shrink: 0;
}

.program-card {
    border-radius: 4px;
    border-top: 3px solid var(--bnhs-navy) !important;
}

.program-card-icon {
    font-size: 1.6rem;
    color: var(--bnhs-navy);
    display: block;
    margin-bottom: .75rem;
}

/* ---------------------------------------------------
   GRADE PATHWAY (Grade 7 -> 8 -> 9 -> 10 stepper)
   ---------------------------------------------------
   A connected step diagram instead of a repeated card
   grid - shows progression rather than four identical
   boxes with nothing to visually link them.
--------------------------------------------------- */

.grade-pathway {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

.grade-pathway::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 54px;
    right: 54px;
    height: 2px;
    background: var(--bnhs-gold);
}

.grade-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    width: 108px;
}

.grade-step-marker {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: var(--bnhs-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}

.grade-step-label {
    font-weight: 600;
    color: var(--bnhs-navy);
    font-size: .85rem;
    text-align: center;
}

@media (max-width: 575.98px) {

    .grade-pathway {
        flex-wrap: wrap;
        row-gap: 1.5rem;
        justify-content: center;
        gap: 1rem;
    }

    .grade-pathway::before {
        display: none;
    }
}


/* ---------------------------------------------------
   PATHWAY PANEL (Academic / TechPro comparison)
   ---------------------------------------------------
   A bordered document-style panel instead of a shadowed
   Bootstrap card, so the two pathways read as sections
   of one comparison rather than two matching SaaS cards.
--------------------------------------------------- */

.pathway-panel {
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pathway-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid #dfe3e8;
    background: var(--bnhs-bg-light);
}

.pathway-panel-number {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--bnhs-navy);
    opacity: .25;
    line-height: 1;
    flex-shrink: 0;
}

.pathway-panel-body {
    padding: 1.5rem;
    flex: 1 1 auto;
}

@media (max-width: 767.98px) {

    .hero-with-overlap {
        padding-bottom: 3rem;
    }

    .identity-cards-overlap {
        margin-top: 1.5rem;
    }
}


/* =========================================================
   SKIP TO MAIN CONTENT LINK (ACCESSIBILITY)
   =========================================================
   Hidden off-screen until it receives keyboard focus, so
   keyboard/screen-reader users can bypass the masthead and
   nav on every page load instead of tabbing through them.
   ========================================================= */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: #0b2a4a;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}


/* =========================================================
   PASSWORD VISIBILITY TOGGLE
   =========================================================
   The eye button sits inside the input itself (top-right corner)
   rather than beside it, so the field keeps its normal full width.
   ========================================================= */

.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 44px;
}

/* These fields draw their own show/hide button, so hide the one Microsoft Edge
   adds to every password input - otherwise there are two eye icons. */
.password-field input[type="password"]::-ms-reveal,
.password-field input[type="password"]::-ms-clear {
    display: none;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;

    color: #6b7280;
    font-size: 1.05rem;
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: #0b2a4a;
    background: rgba(11, 42, 74, 0.06);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid #0b2a4a;
    outline-offset: 1px;
}


/* =========================================================
   ADMIN LOGIN ACCENT LINE
   =========================================================
   Matches the same navy-to-gold top accent added to the portal
   login card - small brand touch on an otherwise plain white card.
   ========================================================= */

.admin-login-card {
    position: relative;
    overflow: hidden;
}

.admin-login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;

    background: linear-gradient(90deg, var(--bnhs-navy), var(--bnhs-gold));
}