/**
 * AMA Global Search — form, live dropdown, and results page.
 * Uses the AMA design tokens defined in style.css :root.
 */

/* ── Search form ──────────────────────────────────────────────────────────── */
.ama-search-form {
	position: relative;
	width: 100%;
	max-width: 640px;
}

.ama-search-form__label {
	display: block;
	font-family: var(--font-mono, var(--font-sans, sans-serif));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft, #4a5474);
	margin-bottom: 8px;
}

.ama-search-form__row {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--blue-deep, #0d2160);
	border-radius: 6px;
	background: var(--white, #fff);
	overflow: hidden;
}

.ama-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	padding: 0 16px;
	font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif);
	font-size: 1rem;            /* ≥16px avoids iOS zoom-on-focus */
	color: var(--ink, #1a1f33);
	background: transparent;
	min-height: 48px;           /* WCAG 2.5.8 target size */
}

.ama-search-form__input:focus {
	outline: none;              /* ring is on the row via :focus-within */
}

.ama-search-form__row:focus-within {
	box-shadow: 0 0 0 4px rgba(13, 33, 96, .18);
}

.ama-search-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	min-height: 48px;
	border: 0;
	background: var(--blue-deep, #0d2160);
	color: var(--cream, #faf6ee);
	cursor: pointer;
}

.ama-search-form__submit:hover { background: var(--red-deep, #a82720); }

/* ── Compact / icon mode ──────────────────────────────────────────────────── */
.ama-search--icon { position: relative; display: inline-flex; }

.ama-search__icon-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	border: 0;
	background: transparent;
	color: var(--blue-deep, #0d2160);
	cursor: pointer;
	border-radius: 6px;
}
.ama-search__icon-toggle:hover { color: var(--red-deep, #a82720); }

.ama-search__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	/* Ladder token, not a local guess — see the z-index scale in style.css.
	   This panel opens from the header and has to clear the mobile menu
	   drawer; at its old value it opened behind it. */
	z-index: var(--z-popover, 400);
	width: min(360px, 86vw);
	padding: 16px;
	background: var(--white, #fff);
	border: 1px solid var(--rule, #d4c8b0);
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(13, 33, 96, .16);
}

/* In the popover the field label is redundant with the icon's aria-label */
.ama-search__panel .ama-search-form__label {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.ama-search__panel .ama-search-form { max-width: 100%; }

@media (max-width: 768px) {
	/*
	 * On a phone the panel spans the VIEWPORT, not the trigger.
	 *
	 * It used to be absolutely positioned with right:0 inside .ama-search--icon,
	 * which anchors its right edge to the search ICON — and the icon is not the
	 * last thing in the bar. With a cart and an account button to its right, the
	 * panel's right edge landed ~120px short of the screen edge, so a 92vw sheet
	 * pushed its left side off-screen and the field was clipped. The only way to
	 * make it look right was a magic negative offset that happened to match the
	 * width of whatever sat beside it — which breaks the moment another icon is
	 * added or removed.
	 *
	 * position:fixed takes the panel out of the trigger's coordinate space
	 * entirely, so left/right gutters are measured against the screen and the
	 * layout of the bar stops mattering. The vertical position is the one thing
	 * that still has to follow the trigger, so ama-search.js writes
	 * --ama-search-top from the toggle's own bounding rect (and keeps it current
	 * on scroll, resize and rotate). The fallback keeps it usable if the script
	 * has not run yet.
	 */
	.ama-search--icon { position: relative; }
	.ama-search__panel {
		position: fixed;
		top: var(--ama-search-top, 64px);
		left: 8px;
		right: 8px;
		width: auto;
		max-width: none;
		z-index: var(--z-popover, 400);
	}
}

/* ── Live dropdown ────────────────────────────────────────────────────────── */
.ama-search-form__live {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	/* Sits inside the panel, so it only has to clear its siblings — but keep it
	   on the ladder so it cannot fall behind the panel's own chrome. */
	z-index: calc(var(--z-popover, 400) + 1);
	background: var(--white, #fff);
	border: 1px solid var(--rule, #d4c8b0);
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(13, 33, 96, .14);
	overflow: hidden;
}

.ama-search-live__list { margin: 0; padding: 0; list-style: none; }

.ama-search-live__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	text-decoration: none;
	color: var(--ink, #1a1f33);
	border-bottom: 1px solid var(--paper, #f1ece0);
}

.ama-search-live__link:hover,
.ama-search-live__link:focus-visible {
	background: var(--blue-soft, #e6ebf7);
}

.ama-search-live__title { font-weight: 600; }

.ama-search-live__type {
	flex: 0 0 auto;
	font-family: var(--font-mono, var(--font-sans, sans-serif));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-soft, #4a5474);
}

.ama-search-live__all {
	display: block;
	padding: 11px 16px;
	font-weight: 700;
	text-decoration: none;
	color: var(--red-deep, #a82720);
	background: var(--cream, #faf6ee);
}

.ama-search-live__all:hover,
.ama-search-live__all:focus-visible { text-decoration: underline; }

.ama-search-live__empty {
	margin: 0;
	padding: 16px;
	color: var(--ink-soft, #4a5474);
	font-style: italic;
}

/* ── Results page (search.php) ────────────────────────────────────────────── */
.ama-search-page { max-width: 860px; margin: 0 auto; padding: 56px 24px; }

.ama-search-page__head { margin-bottom: 32px; }

.ama-search-page__eyebrow {
	font-family: var(--font-mono, var(--font-sans, sans-serif));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--red-deep, #a82720);
	margin: 0 0 8px;
}

.ama-search-page__title {
	font-family: var(--font-serif, var(--font-sans));
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	line-height: 1.1;
	color: var(--blue-deep, #0d2160);
	margin: 0 0 6px;
}

.ama-search-page__count { color: var(--ink-soft, #4a5474); margin: 0; }

/* ── Type filter chips (results page) ──────────────────────────────────── */
.ama-search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }
.ama-search-filter {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 15px; border: 1px solid var(--rule, #d4c8b0); border-radius: 999px;
	background: transparent; color: var(--blue-deep, #0d2160);
	font-family: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1;
	cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ama-search-filter:hover { border-color: var(--blue-deep, #0d2160); }
.ama-search-filter.is-active { background: var(--blue-deep, #0d2160); border-color: var(--blue-deep, #0d2160); color: #fff; }
.ama-search-filter__count { font-weight: 700; font-size: 0.75rem; opacity: .65; }
.ama-search-filter.is-active .ama-search-filter__count { opacity: .85; }

.ama-search-results__none { padding: 24px 0; font-style: italic; color: var(--ink-soft, #4a5474); }

.ama-search-results__group { margin-top: 36px; }

.ama-search-results__group-title {
	font-family: var(--font-mono, var(--font-sans, sans-serif));
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-soft, #4a5474);
	border-bottom: 1px solid var(--rule, #d4c8b0);
	padding-bottom: 8px;
	margin: 0 0 16px;
}
.ama-search-results__group-count { opacity: .6; font-weight: 600; }

.ama-search-results__list { margin: 0; padding: 0; list-style: none; }

.ama-search-result { padding: 18px 0; border-bottom: 1px solid var(--paper, #f1ece0); }
.ama-search-result[hidden] { display: none; }

/* Type tag on each result row */
.ama-search-result__tag {
	display: inline-block; margin: 0 0 8px;
	padding: 3px 9px; border-radius: 3px;
	font-family: var(--font-mono, var(--font-sans, sans-serif));
	font-size: 0.75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	background: var(--paper, #f1ece0); color: var(--ink-soft, #4a5474);
}
.ama-search-result__tag--product { background: #e7f0ea; color: #1d6b3f; }
.ama-search-result__tag--mec-events { background: #e6ebf5; color: #0d2160; }
.ama-search-result__tag--page { background: #f2ece0; color: #6b5a2a; }
.ama-search-result__tag--post { background: #f6e9e6; color: #a82720; }

.ama-search-result__title { font-size: 1.25rem; margin: 0 0 6px; line-height: 1.25; }

.ama-search-result__title a {
	color: var(--blue-deep, #0d2160);
	text-decoration: none;
}
.ama-search-result__title a:hover,
.ama-search-result__title a:focus-visible { color: var(--red-deep, #a82720); text-decoration: underline; }

.ama-search-result__excerpt { color: var(--ink, #1a1f33); margin: 0 0 6px; line-height: 1.6; }

.ama-search-result__meta {
	font-family: var(--font-mono, var(--font-sans, sans-serif));
	font-size: 0.75rem;
	color: var(--ink-soft, #4a5474);
}

.ama-search-results__empty {
	padding: 32px 0;
	font-size: 1.125rem;
	color: var(--ink-soft, #4a5474);
}

/* Reuse the search form at the top of the results page */
.ama-search-page .ama-search-form { max-width: 100%; margin-top: 20px; }

/* Elementor "hide label" option — keep for screen readers, remove visually */
.ama-search--hide-label .ama-search-form__label {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ── Mobile search refinements ────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Form fills its container so it never overflows a narrow header/menu */
	.ama-search-form { max-width: 100%; }

	/* Live results: cap height and scroll so a long list never runs off-screen
	   (common when the search box sits low in the viewport on mobile) */
	.ama-search-form__live {
		max-height: 60vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Results page: lighter gutters on small screens */
	.ama-search-page { padding: 40px 16px; }
	.ama-search-page__head { margin-bottom: 24px; }

	/* Live row: allow long titles to wrap instead of forcing the type chip off */
	.ama-search-live__link { flex-wrap: wrap; gap: 4px 10px; }
}

/* ── 404 page ─────────────────────────────────────────────────────────────── */
.ama-404 { max-width: 720px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.ama-404__code {
	font-family: var(--font-serif, var(--font-sans));
	font-size: clamp(4.5rem, 18vw, 10rem);
	line-height: .9;
	color: var(--blue-deep, #0d2160);
	margin: 0;
}
.ama-404__title {
	font-family: var(--font-serif, var(--font-sans));
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	color: var(--red-deep, #a82720);
	margin: 8px 0 12px;
}
.ama-404__text { color: var(--ink-soft, #4a5474); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 28px; }
.ama-404 .ama-search-form { margin: 0 auto 32px; }
.ama-404__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ama-404__links a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--rule, #d4c8b0);
	border-radius: 6px;
	text-decoration: none;
	color: var(--blue-deep, #0d2160);
	font-weight: 600;
	min-height: 44px;
	line-height: 24px;
}
.ama-404__links a:hover,
.ama-404__links a:focus-visible { background: var(--blue-soft, #e6ebf7); }


/* Search results: notice shown when the tail was trimmed by the display cap. */
.ama-search-results__showall {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}
.ama-search-results__showall:focus-visible {
  outline: 3px solid var(--blue-deep, #0d2160);
  outline-offset: 2px;
}
.ama-search-results__capped {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--blue-deep, #0d2160);
  background: var(--cream, #faf6ee);
  font-size: 0.875rem;
  line-height: 1.5;
}