/*
 * bos-header-search.css
 * Dropdown styles for the header search field and homepage hero search.
 * Loaded on every page via header.php.
 */

/* ── Layout wrapper ─────────────────────────────────────────────────────── */
/* Wrap input + dropdown so the dropdown can be positioned absolutely
   relative to the input without the button disrupting the flow. */
.hero-search {
	display: flex;
	align-items: stretch;
	position: relative;
}

.hero-search-inner {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.hero-search-inner input {
	width: 100%;
	box-sizing: border-box;
}

/* ── Dropdown container ─────────────────────────────────────────────────── */
.hero-search-dropdown,
#hdrSearchDropdown {
	/* position, top, left, width are set inline by JS (fixed, anchored to input) */
	display: none;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	max-height: 420px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;
}
.hero-search-dropdown--open,
#hdrSearchDropdown.hero-search-dropdown--open {
	display: block;
}

/* ── Result row ─────────────────────────────────────────────────────────── */
.hsd-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid #f0ede8;
	transition: background 0.08s;
	cursor: pointer;
}
.hsd-row:last-of-type {
	border-bottom: none;
}
.hsd-row:hover,
.hsd-row--active {
	background: #f7f5f0;
}

/* ── Thumbnail ──────────────────────────────────────────────────────────── */
.hsd-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #ede9e2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hsd-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Text block ─────────────────────────────────────────────────────────── */
.hsd-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hsd-name {
	font-size: 14px;
	font-weight: 400;
	color: #1c2b42;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hsd-name i { font-style: italic; }

.hsd-meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hsd-rank {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #7a6f62;
	background: #ede9e2;
	border-radius: 3px;
	padding: 1px 5px;
	white-space: nowrap;
	flex-shrink: 0;
}

.hsd-append {
	font-size: 11px;
	color: #7a6f62;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hsd-append i { font-style: italic; }

/* ── Footer "See all results" ───────────────────────────────────────────── */
.hsd-footer {
	display: block;
	padding: 10px 14px;
	font-size: 13px;
	color: #1c2b42;
	text-decoration: none;
	background: #f7f5f0;
	border-top: 1px solid #e2ddd6;
	text-align: center;
	font-weight: 400;
	transition: background 0.1s;
}
.hsd-footer:hover { background: #ede9e2; }
.hsd-footer strong { font-weight: 600; }

/* ── Literature row variant ─────────────────────────────────────────────── */
.hsd-thumb--lit {
	background: #e8eef8;
	color: #1c2b42;
}

/* ── No-results message ─────────────────────────────────────────────────── */
.hsd-empty {
	padding: 14px 16px;
	font-size: 14px;
	color: #7a6f62;
	font-style: italic;
	text-align: center;
}

/* ── Common name ────────────────────────────────────────────────────────── */
.hsd-common {
	font-size: 11px;
	color: #7a6f62;
	font-weight: 300;
}

/* ── Header search dropdown ─────────────────────────────────────────────── */
/* The sticky navbar must not clip the dropdown. */
.search-container {
	position: relative;
}

/* Smaller input so the whole widget (input + "Advanced search" link right
   below it, .hdr-search-advanced-link) fits inside the navbar's shrunk
   height once main.js adds header.sticky on scroll — otherwise the link
   sits far enough below the input to get clipped by the header once it
   collapses. */
#header-search-input {
	height: 30px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 13px;
}

/* Advanced-search link — sits inside .search-container so main.js's existing
   .show()/.hide() calls on that container (triggered by the header's search/
   close icon buttons) reveal and hide it together with the input, with no
   extra JS needed. */
.hdr-search-advanced-link {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0px;
	font-size: 11px;
	color: #7a6f62;
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
	transition: color 0.15s;
}
.hdr-search-advanced-link:hover {
	color: #0F2340;
}
/* Same right-arrow treatment as the homepage's advanced-search link (.hero-adv, bos-home.css).
   \2192 (CSS unicode escape for →, U+2192) instead of the literal character —
   this file is served as Content-Type: text/css with no charset parameter
   (nginx doesn't add one for static .css), so browsers without other UTF-8
   signals can misread the raw 3-byte UTF-8 arrow as Latin-1/Windows-1252
   and render mojibake. The escape sequence is plain ASCII in the source,
   so it renders correctly regardless of how the file's encoding is guessed. */
.hdr-search-advanced-link::after { content: ' \2192'; }

/* On mobile/tablet the search input takes the row's full width and wraps
   onto its own second line below the logo/menu row — .hdr-search-advanced-
   link (position:absolute, top:100% of .search-container) still sits
   correctly just below the input either way, but being absolutely
   positioned it takes .search-container out of flow and doesn't make the
   container's own box (and so the header's own background behind it) any
   taller to actually contain it. The link ends up rendering past the
   header's coloured background, floating directly over whatever page
   content happens to sit underneath.
   Three earlier attempts at reserving the space all had side effects,
   because each one grew a box that .search-btn/.hide-btn (the magnifying-
   glass and close icon buttons — siblings of .search-container, same
   markup, header.php/header-tabs.php) share a flex row with or measure
   themselves against:
   1. padding-bottom on .search-container: that same padding box is what
      the link's own top:100% resolves against, so it jumped down to sit
      below the reserved gap instead of tight against the input.
   2. margin-bottom on .search-container: avoided that (margin isn't part
      of the containing-block calc), but .search-container, .search-btn and
      .hide-btn are flex children of .col-auto (header .navbar [class*=col-]
      in style.css — an attribute selector, easy to miss, sets display:flex
      there) — align-items' default stretch then stretched the buttons to
      match .search-container's now-taller margin box, so their own
      (self-centred) icons centred against that full height instead of
      just the input.
   3. padding-bottom on .col-auto itself: container padding doesn't feed
      back into how its own children size against each other, so this
      didn't disturb the buttons — but padding-bottom only adds space
      BELOW the content box, and align-items:stretch/center both position
      children within the content box itself (above that padding), not
      against the padded box as a whole. The search row ended up pinned to
      the top of .col-auto's now-taller box instead of centred in it — the
      magnifying glass sat noticeably higher than the header's true middle
      (wherever the logo sits).
   Reserving the space one level up instead — on nav.navbar itself, whose
   own children (the .col-auto columns: logo, search, menu) this padding
   doesn't touch at all — sidesteps all three: the search row keeps
   whatever vertical centring it already had within its own row (nothing
   about .col-auto or its children changed), and the extra room just
   extends the nav's own background past the row, which is all the
   absolutely-positioned link actually needed. Sized to the link's own
   rendered height (11px font, ~1.6 line-height inherited from body ≈
   17.6px) plus a little breathing room.
   !important: matches header .navbar's own specificity (style.css) closely
   enough that relying on source order alone would be fragile if that file
   ever gets a bottom-padding rule of its own later. */
@media (max-width: 991px) {
	header .navbar {
		padding-bottom: 20px !important;
	}
}


/* The hamburger never drops to a second row (phones/tablets, where the
   navbar is collapsed). Two things used to push it down:
   - at ≤360px the fixed-width logo + search icon + hamburger didn't fit one
     row, so the hamburger wrapped;
   - at any width, opening the search wraps the search column onto a second
     line (see above) and the hamburger, next in the row, went with it.
   So the hamburger is taken out of the row and pinned to the top-right of
   the navbar (its menu, #navbarNav, is already absolutely positioned
   against the navbar), the search column keeps clear of it, and the logo
   shrinks instead of forcing a wrap. 28px = the middle of the 56px logo row. */
@media (max-width: 991px) {
	header .navbar > .container-fluid > .col-auto:first-child {
		flex: 0 1 auto;
		min-width: 0;
		max-width: calc(100% - 104px);
	}
	header .navbar .navbar-brand {
		max-width: 100%;
	}
	header .navbar .navbar-brand img {
		max-width: 100%;
		height: auto;
	}
	header .navbar > .container-fluid > .col-auto:nth-child(2) {
		margin-right: 44px;
	}
	header .navbar .navbar-toggler {
		position: absolute;
		top: 28px;
		right: 10px;
		transform: translateY(-50%);
		float: none !important;
		margin: 0;
	}
}