/**
 * Lightweight chrome for public Builder Pages Home.
 * Mirrors Tabler navbar + container-xl layout used on /{lang}/courses/
 * so the menu matches 1:1 without loading tabler.css (~614KB).
 */

.bp-page--student-chrome {
    /* Tabler defaults used by /{lang}/courses/ container-xl gutters */
    --tblr-spacer-2: 0.5rem;
    --tblr-spacer-3: 1rem;
    --tblr-page-padding: var(--tblr-spacer-3);
    --tblr-border-width: 1px;
    --tblr-border-color: #e5e7eb;
    --tblr-shadow-border: 0 0 0 1px rgba(31, 41, 51, 0.1);
    --tblr-border-radius: 4px;
}

@media (max-width: 991.98px) {
    .bp-page--student-chrome {
        --tblr-page-padding: var(--tblr-spacer-2);
    }
}

/* Screen-reader-only text (Tabler/Bootstrap not loaded on public BP). */
.bp-page--student-chrome .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Hidden checkbox for CSS-only mobile menu (same visual as Bootstrap collapse). */
.bp-sg-nav-toggle {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    appearance: none !important;
    /* Keep focusable for keyboard; label provides accessible name (no aria-hidden). */
    pointer-events: none;
}

/* Match Tabler .navbar (+ student overrides in navbar.css). */
.bp-page--student-chrome header.navbar.sg-navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    /* Tabler bottom hairline — same as courses */
    box-shadow: inset 0 calc(-1 * var(--tblr-border-width)) 0 0 var(--tblr-border-color);
}

/* Match Tabler .navbar > .container-xl */
.bp-page--student-chrome header.navbar.sg-navbar > .container-xl {
    --tblr-gutter-x: calc(var(--tblr-page-padding) * 2);
    --tblr-gutter-y: 0;
    display: flex;
    flex-wrap: inherit; /* nowrap on md+ via navbar-expand-md */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--tblr-gutter-x) * 0.5);
    padding-left: calc(var(--tblr-gutter-x) * 0.5);
    box-sizing: border-box;
    column-gap: 0;
    row-gap: 0;
}

/* Tabler container-xl breakpoints (same as courses). */
@media (min-width: 1200px) {
    .bp-page--student-chrome header.navbar.sg-navbar > .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .bp-page--student-chrome header.navbar.sg-navbar > .container-xl {
        max-width: 1320px;
    }
}

@media (min-width: 768px) {
    .bp-page--student-chrome header.navbar.sg-navbar.navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}

/*
 * Match student navbar.css on /courses/: brand is margin/padding 0,
 * then only Tabler utilities pe-0 / pe-md-3 (padding-right).
 * Do NOT re-apply Tabler’s default brand margin-end / padding-y — that
 * created an extra gap beside the logo vs courses.
 */
.bp-page--student-chrome header.navbar.sg-navbar .navbar-brand {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.bp-page--student-chrome header.navbar.sg-navbar .navbar-brand.pe-0 {
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    .bp-page--student-chrome header.navbar.sg-navbar .navbar-brand.pe-md-3 {
        padding-right: 1rem !important;
    }
}

/* Logo: don’t reserve a fixed 160×32 box (courses img has no width/height attrs). */
.bp-page--student-chrome header.navbar.sg-navbar .sg-navbar__logo {
    width: auto;
    height: auto;
    max-height: 2rem;
    max-width: 10rem;
}

/* Sign-in: match courses look on Builder Pages only (not global navbar.css). */
.bp-page--student-chrome header.navbar.sg-navbar .sg-navbar__signin.btn-primary,
.bp-page--student-chrome header.navbar.sg-navbar a.sg-navbar__signin {
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

.bp-page--student-chrome header.navbar.sg-navbar .navbar-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 3rem;
}

.bp-page--student-chrome header.navbar.sg-navbar .nav-item {
    list-style: none;
}

.bp-page--student-chrome header.navbar.sg-navbar .nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    min-height: 2.5rem;
}

.bp-page--student-chrome header.navbar.sg-navbar .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    order: -1;
    line-height: 1;
}

.bp-page--student-chrome header.navbar.sg-navbar .navbar-toggler-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831, 41, 55, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 0;
    position: static;
}

/* Kill Tabler animated-bar pseudos that stack on top of the SVG icon. */
.bp-page--student-chrome header.navbar.sg-navbar .navbar-toggler-icon::before,
.bp-page--student-chrome header.navbar.sg-navbar .navbar-toggler-icon::after {
    content: none !important;
    display: none !important;
}

/* Collapsed by default (mobile) — must not occupy a second flex row. */
.bp-page--student-chrome header.navbar.sg-navbar .navbar-collapse {
    display: none;
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center;
    width: 100%;
}

.bp-page--student-chrome header.navbar.sg-navbar .d-none { display: none !important; }
.bp-page--student-chrome header.navbar.sg-navbar .d-flex { display: flex !important; }
.bp-page--student-chrome header.navbar.sg-navbar .align-items-center { align-items: center !important; }
.bp-page--student-chrome header.navbar.sg-navbar .flex-row { flex-direction: row !important; }
.bp-page--student-chrome header.navbar.sg-navbar .flex-nowrap { flex-wrap: nowrap !important; }
.bp-page--student-chrome header.navbar.sg-navbar .order-md-last { order: 0; }
.bp-page--student-chrome .d-none { display: none !important; }

/* CSS-only dropdowns (details/summary) — same open look as Bootstrap dropdown */
.bp-page--student-chrome header.navbar.sg-navbar details.dropdown {
    position: relative;
}

.bp-page--student-chrome header.navbar.sg-navbar details.dropdown > summary {
    list-style: none;
    cursor: pointer;
}

.bp-page--student-chrome header.navbar.sg-navbar details.dropdown > summary::-webkit-details-marker {
    display: none;
}

.bp-page--student-chrome header.navbar.sg-navbar details.dropdown > .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    min-width: 12rem;
}

.bp-page--student-chrome header.navbar.sg-navbar details.dropdown[open] > .dropdown-menu {
    display: block;
}

.bp-page--student-chrome header.navbar.sg-navbar details.dropdown[open] > summary .sg-navbar__user-caret,
.bp-page--student-chrome header.navbar.sg-navbar details.dropdown[open] > summary .sg-navbar__lang-caret {
    transform: rotate(180deg);
}

.bp-page--student-chrome header.navbar.sg-navbar .dropdown-divider {
    height: 0;
    margin: 0.35rem 0;
    border-top: 1px solid rgba(31, 41, 51, 0.1);
}

@media (min-width: 768px) {
    .bp-page--student-chrome header.navbar.sg-navbar .navbar-toggler {
        display: none !important;
    }

    /* Match .navbar-expand-md .navbar-collapse */
    .bp-page--student-chrome header.navbar.sg-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        width: auto;
        align-items: center;
    }

    .bp-page--student-chrome header.navbar.sg-navbar .navbar-collapse .navbar-nav {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    .bp-page--student-chrome header.navbar.sg-navbar .order-md-last {
        order: 3;
        margin-left: auto;
    }

    .bp-page--student-chrome header.navbar.sg-navbar .d-md-inline-flex {
        display: inline-flex !important;
    }

    .bp-page--student-chrome header.navbar.sg-navbar .d-md-none {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .bp-page--student-chrome header.navbar.sg-navbar .d-xl-block {
        display: block !important;
    }
}

@media (max-width: 767.98px) {
    .bp-page--student-chrome header.navbar.sg-navbar {
        position: relative;
    }

    .bp-page--student-chrome header.navbar.sg-navbar > .container-xl {
        flex-wrap: nowrap;
        column-gap: 0.4rem;
    }

    .bp-page--student-chrome header.navbar.sg-navbar .bp-sg-nav-toggle:checked ~ .container-xl .navbar-collapse {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1040;
        width: auto;
        flex-basis: auto;
        max-height: min(70vh, calc(100dvh - 4rem));
        margin: 0;
        padding: 0.65rem 1rem 0.85rem;
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--sg-header-bg, #fff);
        border-top: 1px solid rgba(31, 41, 51, 0.1);
        box-shadow:
            0 14px 32px rgba(31, 41, 51, 0.12),
            0 2px 6px rgba(31, 41, 51, 0.04);
    }
}