/* =====================================================================
   assets/css/lw-topbar.css — topbar search + icon spacing
   ---------------------------------------------------------------------
   Load AFTER app.css. Pairs with assets/js/lw-topbar.js, which is what
   decides when the search is "cramped" and toggles the classes below.

   TWO PROBLEMS

   1. The search box shares the topbar with a row of icons that has grown
      over time — chat, timer, QR, feed, fullscreen, theme, avatar. Velzon
      gives .app-search a flexible width, so every icon added takes width
      away from it. On a phone it ends up a stub you cannot type into.

      Rather than hide it behind a breakpoint, the width it ACTUALLY has
      is measured (lw-topbar.js) and it reacts:

        comfortable   -> nothing changes, no overlay, no surprise motion
        cramped       -> expands over the icons on focus, collapses on blur
        very cramped  -> collapses to a magnifier button; click to expand

   2. The icons were spaced by hand with ms-1 on most items and ms-sm-3 on
      the avatar, and the chat button is injected by lw-chat-admin.js with
      its own markup. The result is uneven gaps that shift depending on
      which items a given account sees. Spacing is now a single `gap` on
      the containers with the per-item margins zeroed, so it stays even no
      matter what is present or injected.
   ===================================================================== */

:root {
	/* One number controls the whole icon rhythm. */
	--lw-topbar-gap: 0.35rem;

	/* Space kept clear on the left for the logo and hamburger when the
	   search is expanded over the icons. */
	--lw-search-reserve: 7.5rem;

	/* Widest the expanded search is allowed to get. */
	--lw-search-max: 560px;
}


/* =====================================================================
   1. Even icon spacing
   ---------------------------------------------------------------------
   .navbar-header has exactly three children:

     1. .d-flex                            logo, hamburger, search
     2. .d-flex.align-items-center
        .lw-news-ticker-host               the threat-news ticker
     3. .d-flex.align-items-center         the icon group

   Everything below is scoped to (3) with :last-child, and that scoping is
   load-bearing rather than tidiness. The middle group is flex: 1 1 auto so
   it can give the headline window room to grow, and .lw-news-ticker inside
   it carries margin: 0 1rem. A blanket "zero the margins on every child of
   every .d-flex.align-items-center" — which is what this file did on its
   first pass — would have squeezed the ticker.

   Within the icon group the spacing was ms-1 on most items, ms-sm-3 on the
   avatar, and whatever the chat widget gives itself when it injects. One
   `gap` with the per-item margins zeroed keeps it even regardless of which
   items a given account renders or what arrives at runtime.
   ===================================================================== */

.navbar-header > .d-flex.align-items-center:last-child {
	-webkit-column-gap: var(--lw-topbar-gap);
	   -moz-column-gap: var(--lw-topbar-gap);
	        column-gap: var(--lw-topbar-gap);
	/* Keeps a step between the ticker group and the icons on the rare
	   layouts where the ticker collapses to nothing. */
	margin-left: var(--lw-topbar-gap);
}

/* Bootstrap's .ms-1 / .ms-sm-3 are utilities and carry !important, so the
   override has to as well. */
.navbar-header > .d-flex.align-items-center:last-child > *,
.navbar-header > .d-flex.align-items-center:last-child > .header-item,
.navbar-header > .d-flex.align-items-center:last-child > .topbar-user {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The avatar is a different KIND of control rather than another icon, so
   it gets one extra step. Set this to var(--lw-topbar-gap) for strictly
   uniform spacing. */
.navbar-header > .d-flex.align-items-center:last-child > .topbar-user {
	margin-left: calc(var(--lw-topbar-gap) * 2) !important;
}


/* =====================================================================
   2. Search — shared
   ===================================================================== */

/* The expanded form is positioned against the topbar, not its flex group. */
.navbar-header {
	position: relative;
}

.navbar-header .app-search {
	position: relative;
	-webkit-transition: width 0.18s ease-out;
	        transition: width 0.18s ease-out;
}

/* The magnifier button only exists for the very-cramped case. */
.navbar-header .app-search .lw-search-toggle {
	display: none;
}


/* =====================================================================
   3. Cramped — expand over the icons while focused
   ---------------------------------------------------------------------
   Anchored to the RIGHT edge so it grows leftwards across the icons and
   never covers the logo or the hamburger, which stay usable throughout.
   ===================================================================== */

.navbar-header .app-search.lw-search-expanded {
	position: absolute;
	top: 50%;
	left: auto;
	right: 0.75rem;
	width: -webkit-min-content;
	width: min(var(--lw-search-max), calc(100vw - var(--lw-search-reserve)));
	padding-top: 0;
	padding-bottom: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	z-index: 1006;   /* over .btn-topbar and the injected chat button */
}

/* Opaque, and lifted — otherwise the icons underneath show through and
   the whole thing reads as a rendering fault rather than an overlay. */
.navbar-header .app-search.lw-search-expanded .form-control {
	background-color: var(--vz-secondary-bg, #fff);
	-webkit-box-shadow: 0 3px 14px rgba(15, 34, 58, 0.22);
	        box-shadow: 0 3px 14px rgba(15, 34, 58, 0.22);
}

/* The results dropdown is sized for the narrow resting state; let it
   follow the expanded width instead of hanging off one side. */
.navbar-header .app-search.lw-search-expanded #search-dropdown {
	left: 0;
	right: 0;
	width: auto;
	min-width: 0;
	max-width: none;
}


/* =====================================================================
   4. Very cramped — magnifier button only
   ===================================================================== */

.navbar-header .app-search.lw-search-compact:not(.lw-search-expanded) .lw-search-field {
	display: none;
}

.navbar-header .app-search.lw-search-compact .lw-search-toggle {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

/* Once expanded the button has done its job and would only crowd the
   field, so it steps out of the way. */
.navbar-header .app-search.lw-search-compact.lw-search-expanded .lw-search-toggle {
	display: none;
}

.navbar-header .app-search.lw-search-compact:not(.lw-search-expanded) {
	padding-left: 0;
	padding-right: 0;
	width: auto;
}


/* =====================================================================
   5. Motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.navbar-header .app-search {
		-webkit-transition: none;
		        transition: none;
	}
}