/* =========================================================
   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: cover;
    /* round gold seal with a soft glow, like the portal login */
    border-radius: 50%;
    background: var(--bnhs-gold);
    box-shadow: 0 0 14px rgba(217, 164, 65, 0.55);
}

.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;
    white-space: nowrap; /* a menu item is never split over two lines */
}

.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: 1199.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 - FULL MENU (1200px and wider)
   ---------------------------------------------------
   The menu items never wrap onto two lines. If the screen
   is a little short on room, the school name (not the menu)
   gives way: it wraps onto two lines like on phones, so
   nothing can overlap. 1200-1399px also gets slightly
   tighter spacing so the whole menu fits comfortably.
--------------------------------------------------- */

@media (min-width: 1200px) {

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

    .navbar-bnhs .navbar-nav {
        flex-shrink: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .navbar-bnhs .nav-link {
        font-size: 0.92rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .navbar-bnhs .navbar-nav.gap-xl-2 {
        gap: 0.1rem !important;
    }

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

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


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

/* Plain page banners sit closer to the navbar than the home photo banner */
.hero-bnhs {
    padding-top: 0;
}

.hero-bnhs > .container {
    padding-top: 0.75rem !important;
}

.hero-bnhs {
    padding-bottom: 0.75rem;
    /* light page banner: soft blue-white that sits well under the navy navbar */
    background: linear-gradient(135deg, #f3f7fc 0%, #e3ecf7 100%);
    border-bottom: 1px solid #d3deec;
    color: #475569;
}

.hero-bnhs h1 {
    color: var(--bnhs-navy);
}

.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-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: 0;
    left: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: #0b2a4a;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    /* Fully above the viewport regardless of its height, and invisible so
       iOS overscroll bounce can't reveal it. Still focusable. */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.skip-link:focus {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    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));
}


/* =========================================================
   RESPONSIVE POLISH - phones, tablets and desktops
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 5.5rem; /* anchors stay clear of the sticky navbar */
}

img {
    max-width: 100%;
}

p, h1, h2, h3, h4, h5, h6, li, td, th, dd {
    overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* Government masthead: fewer items on narrow screens so it stays one tidy line */
.gov-masthead .container {
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .gov-hide-sm {
        display: none !important;
    }
}

@media (max-width: 349.98px) {
    .gov-hide-xs {
        display: none !important;
    }
}


/* Home hero: readable intro text on the photo, full-width buttons on phones */
.hero-lead {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

@media (max-width: 575.98px) {
    .hero-actions .btn {
        width: 100%;
    }
}


/* News cards: same picture shape everywhere */
.news-card-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}


/* Comfortable thumb targets */
.navbar-bnhs .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
}

@media (max-width: 1199.98px) {
    .navbar-bnhs .nav-link {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }
}

.footer-bnhs .footer-links-grid a,
.footer-bnhs .footer-column > a {
    padding: 0.3rem 0;
}

.back-to-top-btn {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
}

@media (max-width: 767.98px) {

    .footer-links-grid {
        width: auto;
        max-width: 320px;
    }

    /* room for the back-to-top button so it never covers the copyright line */
    .footer-bnhs .footer-bottom {
        padding-bottom: 3.5rem;
    }
}