/* Portal navbar R3. Bootstrap 5.3.6 stays local; no CSS framework replacement. */
:root {
    --si-green: #043927;
    --si-emerald: #065f46;
    --si-light-emerald: #10b981;
    --si-gold: #d4af37;
    --si-yellow: #fde047;
    --si-header-height: 118px;
}
html { scroll-padding-top: calc(var(--si-header-height) + 16px); }
/* Existing footer/view utilities retained. */
.bg-si-green { background-color: var(--si-green); }
.text-si-gold { color: var(--si-gold); }
.space-y-2 li { margin-bottom: .4rem; }

.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1020;
    background: #fff;
    box-shadow: 0 2px 12px rgba(4, 57, 39, .07);
}
.site-header .si-header-container {
    width: 100%;
    max-width: 1320px;
    padding: 0 12px;
    margin: 0 auto;
    min-width: 0;
}
.site-header a, .site-header button { -webkit-tap-highlight-color: transparent; }
.site-header a:focus-visible, .site-header button:focus-visible {
    outline: 3px solid var(--si-gold);
    outline-offset: 3px;
}
.site-header .topbar-header {
    background: linear-gradient(100deg, #087b58, #043927);
    color: #fff;
    font-size: 12px;
}
.site-header .si-topbar-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.site-header .si-topbar-links { display: flex; align-items: center; gap: 18px; }
.site-header .si-topbar-links a {
    font-weight: 600;
    color: #f1fcf8;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .si-topbar-links a:hover { color: var(--si-yellow); }
.site-header .btn-daftar-pmb {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 14px;
    min-height: 30px;
    border-radius: 999px;
    background: var(--si-gold);
    color: #13291f;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}
.site-header .btn-daftar-pmb:hover { background: #e1c057; color: #13291f; }
.site-header .si-topbar-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    min-width: 0;
}
.site-header .si-topbar-social { display: flex; align-items: center; gap: 5px; }
.site-header .social-circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(209, 250, 229, .3);
    border-radius: 50%;
    color: #e3f8ee;
    text-decoration: none;
    font-size: 12px;
}
.site-header .social-circle-btn:hover { color: var(--si-yellow); border-color: var(--si-gold); }
.site-header .si-language-switch { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.site-header .si-language-switch a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 28px;
    min-height: 28px;
    color: #d0e5dc;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
}
.site-header .si-language-switch .is-current { color: #fff; background: rgba(255, 255, 255, .13); }
.site-header .si-language-switch a:hover { color: var(--si-yellow); }
.site-header .si-language-switch > span { opacity: .45; }
.site-header .search-pill-box { position: relative; display: flex; align-items: center; margin: 0; }
.site-header .search-pill-box input {
    width: 160px;
    height: 32px;
    border: 1px solid rgba(166, 223, 195, .38);
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    color: #fff;
    padding: 5px 37px 5px 13px;
    font: inherit;
}
.site-header .search-pill-box input::placeholder { color: #bfd7cc; }
.site-header .search-pill-box input:focus { outline: 2px solid var(--si-gold); outline-offset: 1px; }
.site-header .search-pill-btn {
    position: absolute;
    right: 3px;
    top: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--si-gold);
    color: #183828;
}
.site-header .main-navbar { padding: 0; border-bottom: 1px solid #e3ebe7; background: #fff; }
.site-header .si-navbar-row { display: flex; align-items: center; gap: 24px; min-height: 76px; flex-wrap: nowrap; }
.site-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 11px;
    margin: 0;
    padding: 10px 0;
    text-decoration: none;
    white-space: normal;
}
.site-header .brand-emblem-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--si-emerald);
    color: var(--si-yellow);
    border: 2px solid #3dcf97;
    box-shadow: 0 2px 4px rgba(4, 57, 39, .1);
    font-size: 22px;
}
.site-header .brand-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-header .brand-title-main { font-size: 15px; font-weight: 850; line-height: 1.2; color: var(--si-green); letter-spacing: -.25px; white-space: nowrap; }
.site-header .brand-subtitle-univ { font-size: 10px; font-weight: 750; line-height: 1.2; letter-spacing: .55px; color: #9b761b; white-space: nowrap; }
.site-header .navbar-collapse { min-width: 0; justify-content: flex-end; }
.site-header .si-menu-content { min-width: 0; }
.site-header .si-primary-menu { align-items: center; gap: 4px; margin: 0; padding: 0; }
.site-header .si-primary-menu > .nav-item { flex: 0 0 auto; }
.site-header .main-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 10px;
    min-height: 42px;
    margin: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #33463d;
    font-size: 13px;
    font-weight: 650;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.site-header .main-navbar .nav-link:hover { color: var(--si-emerald); background: #ecf6f0; }
.site-header .main-navbar .nav-link.active { background: var(--si-emerald); color: #fff; }
.site-header .main-navbar .nav-link.show:not(.active) { background: #ecf6f0; color: var(--si-emerald); }
.site-header .dropdown-toggle::after { margin-left: 2px; vertical-align: middle; border-width: .25em; }
.site-header .main-navbar .dropdown-menu {
    min-width: 248px;
    max-width: min(330px, calc(100vw - 32px));
    padding: 7px;
    margin-top: 8px;
    border: 1px solid #e0ebe4;
    border-top: 3px solid var(--si-gold);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(4, 57, 39, .15);
}
.site-header .main-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 10px 11px;
    border-radius: 7px;
    color: #34483e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: break-word;
}
.site-header .main-navbar .dropdown-item:hover, .site-header .main-navbar .dropdown-item:focus { background: #ecf6f0; color: var(--si-emerald); }
.site-header .main-navbar .dropdown-item:active { color: #fff; background: var(--si-emerald); }
.site-header .si-dropdown-icon { width: 16px; flex: 0 0 16px; color: #087c53; }
.site-header .si-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    margin-left: auto;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #d7e5dd;
    border-radius: 9px;
    background: #f6faf8;
    color: var(--si-green);
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
}
.site-header .si-menu-toggle:focus { box-shadow: none; }
.site-header .si-menu-toggle:focus-visible { outline: 3px solid var(--si-gold); outline-offset: 3px; }
.site-header .si-menu-symbol { display: flex; flex-direction: column; justify-content: space-between; width: 19px; height: 15px; }
.site-header .si-menu-symbol > span { height: 2px; width: 100%; border-radius: 2px; background: currentColor; transition: transform .15s, opacity .15s; transform-origin: center; }
.site-header .si-menu-toggle[aria-expanded="true"] .si-menu-symbol > span:first-child { transform: translateY(6.5px) rotate(45deg); }
.site-header .si-menu-toggle[aria-expanded="true"] .si-menu-symbol > span:nth-child(2) { opacity: 0; }
.site-header .si-menu-toggle[aria-expanded="true"] .si-menu-symbol > span:last-child { transform: translateY(-6.5px) rotate(-45deg); }
.site-header .si-mobile-search, .site-header .si-mobile-resources { display: none; }

@media (min-width: 1200px) {
    .site-header .si-menu-toggle { display: none; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .si-header-container { max-width: 1140px; padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
    .site-header .si-navbar-row { gap: 16px; }
    .site-header .si-primary-menu { gap: 2px; }
    .site-header .main-navbar .nav-link { padding-left: 8px; padding-right: 8px; }
    .site-header .si-topbar-links { gap: 13px; }
    .site-header .si-topbar-tools { gap: 11px; }
}
@media (max-width: 1199.98px) {
    .site-header .si-header-container { padding-left: 20px; padding-right: 20px; }
    .site-header .si-topbar-links, .site-header .si-topbar-social, .site-header .si-topbar-search { display: none; }
    .site-header .si-topbar-row { gap: 12px; }
    .site-header .si-topbar-tools { gap: 0; }
    .site-header .si-navbar-row { min-height: 72px; }
    .site-header #mainNavbarMenu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        max-height: calc(100vh - var(--si-header-height) - 10px);
        max-height: calc(100dvh - var(--si-header-height) - 10px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        border-bottom: 1px solid #dae8e0;
        box-shadow: 0 15px 22px rgba(4, 57, 39, .14);
    }
    .site-header .si-menu-content { max-width: 760px; margin: 0 auto; padding: 16px 20px 22px; }
    .site-header .si-primary-menu { align-items: stretch; gap: 4px; }
    .site-header .main-navbar .nav-link { width: 100%; justify-content: flex-start; min-height: 46px; padding: 11px 14px; font-size: 14px; }
    .site-header .dropdown-toggle::after { margin-left: auto; }
    .site-header .main-navbar .dropdown-menu {
        position: static;
        min-width: 0;
        max-width: none;
        margin: 5px 0 6px 14px;
        padding: 5px;
        border: 0;
        border-left: 2px solid #d1e9dc;
        border-radius: 0 8px 8px 0;
        background: #f7faf8;
        box-shadow: none;
    }
    .site-header .main-navbar .dropdown-item { min-height: 44px; padding: 10px; }
    .site-header .si-mobile-search {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 14px;
        padding: 4px;
        border: 1px solid #dae6df;
        border-radius: 9px;
        background: #f7faf8;
    }
    .site-header .si-mobile-search input { width: 100%; min-width: 0; height: 36px; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; color: var(--si-green); }
    .site-header .si-mobile-search input:focus { outline: 2px solid var(--si-emerald); outline-offset: 0; }
    .site-header .si-mobile-search button { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 7px; background: var(--si-emerald); color: #fff; }
    .site-header .si-mobile-resources { display: block; margin-top: 17px; padding-top: 17px; border-top: 1px solid #e1ebe5; }
    .site-header .si-resources-heading { margin-bottom: 10px; color: #688174; font-size: 11px; font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase; }
    .site-header .si-mobile-quicklinks { display: flex; flex-wrap: wrap; gap: 8px; }
    .site-header .si-mobile-quicklinks a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid #dfebe3; border-radius: 6px; color: var(--si-emerald); font-size: 12px; font-weight: 550; text-decoration: none; }
    .site-header .si-mobile-quicklinks a:hover { background: #eef7f1; }
    .site-header .si-mobile-quicklinks i, .site-header .si-mobile-quicklinks svg { width: 10px; }
    .site-header .si-mobile-social { display: flex; gap: 9px; margin-top: 17px; }
    .site-header .si-mobile-social .social-circle-btn { width: 36px; height: 36px; color: var(--si-emerald); border-color: #c9dfd2; background: #f6faf8; }
    .site-header .si-mobile-social .social-circle-btn:hover { background: var(--si-emerald); color: #fff; }
}
@media (max-width: 575.98px) {
    .site-header .si-header-container { padding-left: 16px; padding-right: 16px; }
    .site-header .si-navbar-row { gap: 12px; }
    .site-header .brand-emblem-circle { width: 39px; height: 39px; flex-basis: 39px; font-size: 20px; }
    .site-header .navbar-brand { gap: 9px; }
    .site-header .brand-title-main { font-size: 13px; }
    .site-header .brand-subtitle-univ { font-size: 8.5px; letter-spacing: .3px; }
    .site-header .si-menu-toggle { padding: 10px; }
    .site-header .si-menu-content { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 359.98px) {
    .site-header .si-menu-text { display: none; }
    .site-header .si-menu-toggle { min-width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header *, .site-header *::before, .site-header *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Nested navigation: UPM > Survey Kepuasan */
.site-header .dropdown-submenu { position: relative; }
.site-header .submenu-toggle { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.site-header .submenu-toggle .submenu-caret { margin-left: auto; color: #71877b; font-size: 11px; }
.site-header .submenu-menu {
    display: none; position: absolute; top: -7px; left: calc(100% + 5px);
    min-width: 235px; max-width: min(330px, calc(100vw - 32px)); margin: 0;
    padding: 7px; list-style: none; border: 1px solid #e0ebe4; border-top: 3px solid var(--si-gold);
    border-radius: 12px; background: #fff; box-shadow: 0 14px 34px rgba(4,57,39,.15); z-index: 1050;
}
.site-header .dropdown-submenu:hover > .submenu-menu,
.site-header .dropdown-submenu:focus-within > .submenu-menu,
.site-header .dropdown-submenu.is-open > .submenu-menu { display: block; }
@media (max-width: 1199.98px) {
    .site-header .submenu-menu {
        position: static; min-width: 0; max-width: none; margin: 3px 0 6px 14px;
        padding: 4px 5px; border: 0; border-left: 2px solid #c5e1d1;
        border-radius: 0 8px 8px 0; background: #f1f7f3; box-shadow: none;
    }
    .site-header .dropdown-submenu:hover > .submenu-menu { display: none; }
    .site-header .dropdown-submenu.is-open > .submenu-menu,
    .site-header .dropdown-submenu:focus-within > .submenu-menu { display: block; }
    .site-header .submenu-toggle .submenu-caret { transform: rotate(90deg); }
}