/* =====================================================================
   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       -> grows rightward over the ticker and icons on focus,
                         from its own left edge; 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;

	/* Widest the expanded search is allowed to get. It grows rightward from
	   where the box already sits, so this only ever clamps the right edge. */
	--lw-search-max: 640px;
}


/* =====================================================================
   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 LEFT, at the exact spot the box already occupies, and it grows
   RIGHTWARD from there across the news ticker and the icons.

   The first version of this anchored to the right edge instead, so a
   focused search jumped across the whole topbar to somewhere it had never
   been. Nothing about that is defensible: the box you clicked should not
   move, it should only get longer. The left edge staying put is what makes
   the expansion read as the same control rather than a different one.

   --lw-search-left is measured by lw-topbar.js and written on the element
   just before the class lands, because the resting offset depends on the
   logo, the hamburger and whether the sidebar is collapsed — none of which
   are knowable from a stylesheet.

   --lw-search-right reserves the user avatar, so the one control that is
   not an icon stays reachable while the search is open.
   ===================================================================== */

.navbar-header .app-search.lw-search-expanded {
	position: absolute;
	top: 50%;
	left: var(--lw-search-left, 0px);
	right: var(--lw-search-right, 0.75rem);
	width: auto;
	/* left + right fix both edges; max-width then clamps the RIGHT one,
	   because the left is the anchor. */
	max-width: var(--lw-search-max);
	padding-top: 0;
	padding-bottom: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	z-index: 1006;   /* over .btn-topbar, the ticker and the injected chat button */
}

/* Opaque, and lifted — otherwise the ticker and icons underneath show
   through and the whole thing reads as a rendering fault, not 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;
	}
}