/* ── Topbar Wrapper — full-width, relative (scrolls with page) ── */
.davv-topbar {
    background-color: var(--primary-color);
    color: var(--davv-white-90);
    border-bottom: 1px solid var(--davv-white-10);
    position: relative;
    width: 100%;               /* edge-to-edge full width */
    z-index: 50;
    user-select: none;
    transition: background-color 0.3s ease;
}

/* Inner: full-width with responsive horizontal padding */
.davv-topbar-inner {
    width: 100%;
    padding: 0.375rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

@media (min-width: 640px) {
    .davv-topbar-inner { padding: 0.5rem 2rem; }
}

@media (min-width: 1024px) {
    .davv-topbar-inner { padding: 0.5rem 3rem; }
}

/* ── Left: NAAC Badge ─────────────────────────────────────── */
.davv-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.davv-topbar-naac {
    font-size: 0.625rem;
    color: var(--davv-white-70);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    display: none;
}

@media (min-width: 640px) {
    .davv-topbar-naac { display: inline; }
}

/* ── Right: Links + Controls ──────────────────────────────── */
.davv-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    cursor: grab;
}

.davv-topbar-right.davv-topbar-grabbing,
.davv-topbar-right.davv-topbar-grabbing * {
    cursor: grabbing !important;
    user-select: none !important;
}

.davv-topbar-right::-webkit-scrollbar {
    display: none;            /* Chrome, Safari, Edge */
}

/* ── Quick Links List ─────────────────────────────────────── */
.davv-topbar-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .davv-topbar-links { gap: 1.25rem; }
}

.davv-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--davv-white-90);
    text-decoration: none;
    font-size: 0.5625rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.125rem 0;
    transition: color 0.15s ease;
}

@media (min-width: 640px) {
    .davv-topbar-link { font-size: 0.6875rem; }
}

@media (min-width: 768px) {
    .davv-topbar-link { font-size: 0.75rem; }
}

.davv-topbar-link:hover {
    color: var(--davv-amber-light);
    text-decoration: underline;
}

/* ── Student hover dropdown ───────────────────────────────── */
.davv-topbar-dropdown-wrap {
    position: relative;
}

/* Invisible hover bridge — covers the gap between the link and the menu
   so moving the mouse down doesn't end :hover and dismiss the dropdown. */
.davv-topbar-dropdown-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.davv-topbar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    min-width: 11rem;
    list-style: none;
    margin: 0;
    padding: 0.375rem;
    background: var(--davv-white);
    border: 1px solid var(--davv-slate-200);
    border-radius: var(--davv-radius-md);
    box-shadow: var(--davv-shadow-xl);
    z-index: 100;
}

.davv-topbar-dropdown-wrap:hover .davv-topbar-dropdown,
.davv-topbar-dropdown-wrap:focus-within .davv-topbar-dropdown {
    display: block;
}

.davv-topbar-dropdown a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--davv-radius-sm);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.davv-topbar-dropdown a:hover {
    background: var(--davv-slate-100);
    color: var(--primary-color-dark);
}

/* The right rail scrolls horizontally on small screens, which clips the
   dropdown — let it escape once the links fit without scrolling. */
@media (min-width: 640px) {
    .davv-topbar-right {
        overflow: visible;
    }
}

/* ── Divider ──────────────────────────────────────────────── */
.davv-topbar-divider {
    width: 1px;
    height: 1rem;
    background-color: var(--davv-white-20);
    flex-shrink: 0;
}

/* ── Controls Wrapper ─────────────────────────────────────── */
.davv-topbar-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .davv-topbar-controls { gap: 1rem; }
}

/* ── Font Size Buttons ────────────────────────────────────── */
.davv-font-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--davv-white-20);
    margin-right: 0;
}

.davv-font-btn {
    background: none;
    border: none;
    color: var(--davv-white-90);
    font-weight: 600;
    font-size: 0.5625rem;
    padding: 0.125rem;
    cursor: pointer;
    transition: color 0.15s ease;
    line-height: 1;
}

@media (min-width: 640px) {
    .davv-font-btn { font-size: 0.6875rem; }
}

@media (min-width: 768px) {
    .davv-font-btn { font-size: 0.75rem; }
}

.davv-font-btn:hover,
.davv-font-btn--active {
    color: var(--davv-amber-light);
    font-weight: 700;
}

/* ── Language Toggle Button ───────────────────────────────── */
.davv-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--davv-white-90);
    background: var(--davv-white-5);
    border: 1px solid var(--davv-white-10);
    border-radius: var(--davv-radius-sm);
    padding: 0.125rem 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--davv-transition-fast);
}

@media (min-width: 640px) {
    .davv-lang-btn { font-size: 0.6875rem; }
}

@media (min-width: 768px) {
    .davv-lang-btn { font-size: 0.75rem; }
}

.davv-lang-btn:hover {
    color: var(--davv-amber-light);
    background: var(--davv-white-10);
}

.davv-lang-icon {
    color: var(--davv-amber-light);
}