.topbar {
  position:fixed; top:0; left:0; right:0; z-index:1001;
  height:var(--topbar-h);
  background:var(--color-ink);
  color:#E8E1D6;
  font-family:var(--font-mono);
  font-size:.78rem;
}
.topbar .container { height:100%; display:flex; align-items:center; justify-content:space-between; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:var(--sp-5); }
.topbar a { display:flex; align-items:center; gap:.4em; color:#E8E1D6; transition:color var(--dur-fast); }
.topbar a:hover { color:var(--color-secondary); }
.topbar .divider { width:1px; height:14px; background:rgba(255,255,255,.2); }
.topbar .alert-pill {
  background:rgba(232,106,23,.22); border:1px solid rgba(232,106,23,.5);
  padding:.25em .8em; border-radius:var(--radius-pill); color:#FFD9A8;
}
@media (max-width:860px){
  .topbar .topbar-left span.hide-sm, .topbar .topbar-right a.hide-sm { display:none; }
}
/* =========================================================
   MOBILE TOPBAR - KEEP ALL INFORMATION VISIBLE
========================================================= */

@media (max-width: 768px) {

    .topbar,
    .top-bar,
    .header-topbar {
        width: 100%;
        overflow: hidden;
    }

    /* Main topbar container */
    .topbar .container,
    .top-bar .container,
    .header-topbar .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Don't hide topbar items on mobile */
    .topbar *,
    .top-bar *,
    .header-topbar * {
        visibility: visible;
    }

    /* Topbar rows */
    .topbar .row,
    .top-bar .row,
    .header-topbar .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    /* Links remain visible */
    .topbar a,
    .top-bar a,
    .header-topbar a {
        display: inline-flex !important;
        align-items: center;
        white-space: nowrap;
    }

    /* If there are two sections, allow horizontal scrolling */
    .topbar,
    .top-bar,
    .header-topbar {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .topbar::-webkit-scrollbar,
    .top-bar::-webkit-scrollbar,
    .header-topbar::-webkit-scrollbar {
        display: none;
    }
}
/* =========================================================
   PREMIUM MOBILE TOPBAR
========================================================= */

@media (max-width: 768px) {

    .topbar {
        width: 100%;
        background: #111827;
        color: #fff;
        overflow: hidden;
    }

    .topbar .container {
        width: 100%;
        max-width: 100%;
        padding: 0 12px;
    }

    /* Allow all topbar content to remain visible */
    .topbar .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px;
        padding: 9px 0;
    }

    /* Each section */
    .topbar .left,
    .topbar .right,
    .topbar-left,
    .topbar-right {
        width: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    /* All links */
    .topbar a {
        color: #fff;
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        transition: .25s ease;
    }

    .topbar a:hover {
        color: #ff671f;
    }

    /* Phone / Email */
    .topbar a[href^="tel:"],
    .topbar a[href^="mailto:"] {
        background: rgba(255,255,255,.07);
        padding: 6px 9px;
        border-radius: 7px;
    }

    /* Admission highlight */
    .topbar a[href*="admission"] {
        color: #ffb18c;
        font-weight: 800;
    }

    /* 360 Tour */
    .topbar a[href*="maps"] {
        color: #fff;
    }

    /* Separator */
    .topbar .separator,
    .topbar .divider {
        color: rgba(255,255,255,.3);
    }

}



/* =========================================================
   PREMIUM MOBILE TOPBAR
========================================================= */

@media (max-width: 768px) {

    .topbar {
        width: 100%;
        background: #111827;
        color: #fff;
        overflow: hidden;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .topbar .container {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
    }

    /* Main content */
    .topbar .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px 8px !important;
        padding: 8px 0 !important;
    }

    /* Every item stays visible */
    .topbar a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
    }

    /* -----------------------------------------
       PHONE + EMAIL
    ----------------------------------------- */

    .topbar a[href^="tel:"],
    .topbar a[href^="mailto:"] {
        padding: 7px 9px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 8px;
    }

    /* -----------------------------------------
       ADMISSION
    ----------------------------------------- */

    .topbar a[href*="admission"],
    .topbar .admission {
        color: #fff;
        background: #ff671f;
        padding: 7px 11px;
        border-radius: 8px;
        font-weight: 800;
        box-shadow: 0 4px 12px rgba(255,103,31,.22);
    }

    /* -----------------------------------------
       360 TOUR
    ----------------------------------------- */

    .topbar a[href*="maps"] {
        padding: 7px 10px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 8px;
    }

    /* -----------------------------------------
       ALUMNI / CAREERS / NOTICES
    ----------------------------------------- */

    .topbar a[href*="alumni"],
    .topbar a[href*="careers"],
    .topbar a[href*="notices"] {
        padding: 6px 10px;
        background: rgba(255,255,255,.05);
        border-radius: 7px;
    }

    /* Hover / tap */
    .topbar a:active,
    .topbar a:hover {
        color: #ffb18c;
    }

}