/* =========================================================
   Header search — Astra's header-cover dropdown, restyled to match the
   apple.com/search pattern ("Quick Links" list, live-search results below)
   with the site's brand colors/fonts instead of Astra's defaults.
   ========================================================= */

:root {
	/* The style guide's muted/secondary text color (style.css :root), used
	   here instead of an arbitrary gray so placeholder/label text stays
	   legible and on-brand. */
	--fc-search-muted: var(--fc-warm-gray);
}

/* Search icon button in the nav */
#ast-desktop-header .ast-search-icon,
#ast-mobile-header .ast-search-icon {
	display: flex;
	align-items: center;
}

#ast-desktop-header .ast-search-icon a.astra-search-icon,
#ast-mobile-header .ast-search-icon a.astra-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #000;
	transition: color 0.15s;
}

#ast-desktop-header .ast-search-icon a.astra-search-icon:hover {
	color: var(--fc-green);
}

/* The row's own align-items: flex-end (style.css) bottom-anchors every
   column, including this one — align-self overrides that for just this
   column. Padding values confirmed visually (devtools) to land the icon
   on the nav text's baseline — not derived from the nav's own box model,
   which turned out not to match despite matching numbers on paper. */
#ast-desktop-header .site-header-primary-section-right .ast-header-search {
	display: flex;
	align-items: center;
	align-self: center !important;
	padding: 28px 0 5.5px;
}

#ast-desktop-header .ast-search-icon .ast-icon svg,
#ast-mobile-header .ast-search-icon .ast-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Dropdown panel — Astra's own header-cover CSS positions this with
   `top: 0` so it overlays/covers the header when open. Anchor it to the
   header's own bottom edge instead so it opens below the header row, not
   on top of it. Its positioning context is #ast-desktop-header /
   #ast-mobile-header (Astra sets those `position: relative`), which wrap
   only the header row itself, so `top: 100%` lands exactly at that edge. */
.fc-search-box.header-cover {
	/* Hidden until Astra's JS opens it (it sets an inline display: block,
	   which this non-!important rule yields to). Astra's own display: none
	   lives in its generated astra-addon-*.css bundle; if that file ever
	   404s, the panel would otherwise render open on page load. */
	display: none;
	top: 100% !important;
	height: auto !important;
	max-height: none !important;
	background: var(--fc-white) !important;
	border-bottom: 1px solid var(--fc-slate-300) !important;
	box-shadow: var(--fc-shadow-lg);
}

/* Astra's own CSS absolute-centers this wrapper (`top: 50%; transform:
   translate(-50%, -50%)`) inside a fixed-height box — needed for its
   default centered single-line search bar, but it clips/overlaps anything
   taller (our Quick Links + live results). Let it sit in normal flow
   instead so the box above grows to fit its content. */
.fc-search-box .ast-search-wrapper {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	padding: 28px 0 32px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Deliberately NOT overriding .ast-container's width/margin here — it's the
   same class Astra uses for the header's own inner container
   (.site-primary-header-wrap .ast-builder-grid-row-container
   .site-header-focus-item.ast-container), so leaving it alone makes the
   dropdown's content line up edge-to-edge with the header/logo/nav above
   it instead of floating in its own narrower, centered column. */

.fc-search-box .search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--fc-slate-300);
	padding-bottom: 14px;
}

.fc-search-box .search-field {
	flex: 1;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 400;
	color: var(--fc-slate-900) !important;
	padding: 0 !important;
}

/* The addon's own stylesheet sets these (near-white, for its default dark
   overlay) at higher specificity (.ast-search-box.header-cover .search-field
   vs. our .fc-search-box .search-field) — !important is needed or the
   placeholder text stays invisible against our white panel.
   IMPORTANT: each pseudo-element gets its OWN rule, never combined into one
   comma-separated selector list — a browser that doesn't recognize one of
   these (e.g. Chrome and ::-moz-placeholder) treats the whole selector list
   as invalid and drops the entire rule, not just that one branch. That was
   the actual bug behind every earlier "fix" here silently doing nothing. */
.fc-search-box .search-field::placeholder {
	color: var(--fc-search-muted) !important;
	opacity: 1 !important;
}

.fc-search-box .search-field::-webkit-input-placeholder {
	color: var(--fc-search-muted) !important;
	opacity: 1 !important;
}

.fc-search-box .search-field::-moz-placeholder {
	color: var(--fc-search-muted) !important;
	opacity: 1 !important;
}

.fc-search-box .search-field:-ms-input-placeholder {
	color: var(--fc-search-muted) !important;
	opacity: 1 !important;
}

/* Close (X) button — same black circle + white icon, centered, as the
   amenity cards' toggle/close button (.amenity-card__toggle in home.css). */
.fc-search-box .close {
	position: static !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: #000 !important;
	color: #fff !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease;
}

.fc-search-box .close:hover {
	background: #222 !important;
}

.fc-search-box .close svg {
	display: block;
	width: 14px;
	height: 14px;
	fill: #fff !important;
}

/* Quick Links — a single row of small pills */
.fc-search-quicklinks {
	margin-top: 16px;
}

.fc-search-quicklinks-label {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fc-search-muted);
	margin-bottom: 8px;
}

.fc-search-quicklinks-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
}

.fc-search-quicklinks-list li {
	display: flex;
	flex-shrink: 0;
}

.fc-search-quicklinks-list a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid var(--fc-slate-300);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fc-slate-900);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* Arrow after the label, not before — same treatment reused on the live
   results pills below (.ast-search-item) via `currentColor` so it inherits
   each pill's default/hover text color automatically. */
.fc-search-quicklinks-list a::after,
.fc-search-box .ast-search-item::after {
	content: '\2192';
	font-size: 11px;
	line-height: 1;
}

.fc-search-quicklinks-list a:hover,
.fc-search-quicklinks-list a:focus {
	background: var(--fc-green-pale);
	border-color: var(--fc-green-pale);
	color: var(--fc-green-dark);
}

/* Astra's own live-search results dropdown. Core theme CSS
   (inc/dynamic-css/live-search.php) ships this with an opaque
   background (var(--ast-global-color-primary)), absolute positioning,
   a fixed top offset and its own border/shadow/radius — all overridden
   here so it reads as part of this white panel instead of a separate,
   differently-colored box. Relocated by search.js to sit right after
   Quick Links (it's normally inserted inside .search-form, which would
   nest it above Quick Links and squeeze it into that flex row). */
.fc-search-box .ast-live-search-results {
	position: static !important;
	width: auto !important;
	max-height: none !important;
	margin-top: 20px;
	padding: 0 !important;
	background: var(--fc-white) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Astra's own dynamic CSS sets `.ast-live-search-results > * { display: flex;
   flex-wrap: wrap; }` — meant for its default flat markup (heading, items,
   heading, items as direct siblings). Since search.js wraps each heading +
   its items into a .fc-search-group div, that rule now targets OUR wrapper
   instead, flexing heading and pills into one run-together row. Block it
   back to a plain stack; the pill row below opts back into flex on its own. */
.fc-search-box .fc-search-group {
	display: block !important;
}

.fc-search-box .fc-search-group:first-child {
	margin-top: 0;
}

.fc-search-box .ast-search--posttype-heading {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase !important;
	color: var(--fc-search-muted) !important;
	margin: 16px 0 8px !important;
	padding: 0 !important;
}

.fc-search-box .fc-search-group:first-child .ast-search--posttype-heading {
	margin-top: 0 !important;
}

/* Pill row — search.js nests the .ast-search-item results (everything after
   the heading) inside this wrapper so they lay out exactly like Quick Links,
   independent of the display:block forced on .fc-search-group above. */
.fc-search-box .fc-search-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fc-search-box .ast-search-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px !important;
	margin: 0 !important;
	border-radius: 999px;
	border: 1px solid var(--fc-slate-300);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fc-slate-900);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.fc-search-box .ast-search-item:hover,
.fc-search-box .ast-search-item:focus {
	background: var(--fc-green-pale) !important;
	border-color: var(--fc-green-pale);
	color: var(--fc-green-dark);
}

/* "From Our Blog" (posts) reads as secondary to "Suggested Links" (pages) —
   its own label plus a touch of opacity is enough (search.js always sorts
   pages before posts regardless of which the REST response returns first). */
.fc-search-box .fc-search-group--secondary {
	margin-top: 12px;
}

.fc-search-box .fc-search-group--secondary .fc-search-pill-row {
	opacity: 0.7;
}

.fc-search-box .ast-search--no-results-heading {
	display: block;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--fc-search-muted);
	padding: 8px 0 !important;
}

@media (max-width: 600px) {
	.fc-search-box .search-field {
		font-size: 20px;
	}

	.fc-search-quicklinks-list {
		flex-wrap: wrap;
	}
}

/* Search results page (search.php) styling lives in its own file,
   assets/search-results.css, loaded only on that template — see
   inc/search.php. */