/* ==========================================================================
   Site header — styles that used to sit inline in
   resources/views/frontend/general/menu.blade.php. Values are unchanged.
   ========================================================================== */

/* Top bar: "OTE Approved Test Centre" badge */
.ox-topbar__brand-logo {
    max-width: 150px;
    height: 70px;
}

/* Search box (navbar.js toggles the spinner / dropdown with style.display) */
.ox-search-form {
    position: relative;
    display: flex;
    gap: 8px;
    width: 100%;
}
.ox-search-field {
    position: relative;
    width: 100%;
}
.ox-search-spinner {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.ox-search-spinner i { color: var(--ox-primary); }
.ox-search-form .ox-ajax-dropdown { display: none; }

/* Mobile drawer */
.ox-drawer__logo { height: 52px; }
.ox-drawer__gates {
    display: flex;
    gap: 10px;
}
.ox-drawer__logout { margin-top: auto; }

/* Very narrow phones: stack the two gate buttons instead of squeezing them */
@media (max-width: 359.98px) {
    .ox-drawer__gates { flex-direction: column; }
}

/* Desktop menu fit — the menu is editable from the admin, so it can grow.
   1) Until the container widens at 1600px (responsive.css) the links get tighter spacing. */
@media (min-width: 1201px) and (max-width: 1599.98px) {
    .ox-brand { margin-inline-end: var(--ox-s-3); }
    .ox-menu > li > a { padding-inline: 8px; gap: 4px; }
}
/* Wide screens: a little tighter than the original 15px so ten links fit the 1360px container. */
@media (min-width: 1600px) {
    .ox-menu > li > a { padding-inline: 12px; }
}
/* 2) If the items still do not fit, site-menu-fit.js adds this class and the
      header switches to the burger + drawer instead of overlapping the icons. */
.ox-header--collapsed .ox-nav { display: none; }
.ox-header--collapsed .ox-burger { display: grid; }