/*
 * LiveSpecial — Site header
 * Structure and measurements from the LSRD26-15 header.html export.
 * Note: header CTAs use the 0.5rem "nav" radius, not the pill radius.
 */

.ls-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var( --ls-background );
	border-bottom: 1px solid var( --ls-border );
	box-shadow: var( --ls-shadow-sm );
}

.ls-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var( --ls-header-h );
}

/* ── Logo ─────────────────────────────────────────────── */
.ls-header__brand {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding-block: 0.5rem;
}

.ls-header__logo { display: block; width: auto; height: 40px; object-fit: contain; }

/* ── Primary nav ──────────────────────────────────────── */
.ls-nav { display: none; }

@media ( min-width: 1024px ) {
	.ls-nav { display: flex; align-items: center; gap: 0.25rem; }
}

.ls-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ls-nav__item { position: relative; }

.ls-nav__link,
.ls-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	background: none;
	border: 0;
	border-radius: var( --ls-radius-lg );
	color: var( --ls-foreground );
	font-family: inherit;
	font-size: var( --ls-fs-base );
	font-weight: var( --ls-fw-medium );
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: color var( --ls-transition ), background-color var( --ls-transition );
}

.ls-nav__link:hover,
.ls-nav__toggle:hover,
.ls-nav__link:focus-visible,
.ls-nav__toggle:focus-visible {
	background: var( --ls-muted );
	color: var( --ls-primary );
}

.ls-nav__toggle { padding-right: 0.75rem; }

.ls-nav__link[aria-current="page"] {
	background: var( --ls-muted );
	color: var( --ls-primary );
	font-weight: var( --ls-fw-semibold );
}

/* Directory — the one filled pill in the nav. */
.ls-nav__link--feature,
.ls-nav__link--feature[aria-current="page"] {
	gap: 0.375rem;
	background: var( --ls-primary );
	color: var( --ls-white );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
}

.ls-nav__link--feature:hover,
.ls-nav__link--feature:focus-visible {
	background: color-mix( in srgb, var( --ls-primary ) 85%, transparent );
	color: var( --ls-white );
}

/* ── Dropdown ─────────────────────────────────────────── */
.ls-nav__chevron { transition: transform 200ms ease; }

.ls-nav__toggle[aria-expanded="true"] .ls-nav__chevron { transform: rotate( 180deg ); }

.ls-nav__submenu {
	position: absolute;
	top: calc( 100% + 0.5rem );
	left: 0;
	z-index: 60;
	min-width: 13rem;
	margin: 0;
	padding: 0.375rem;
	background: var( --ls-background );
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius );
	box-shadow: var( --ls-shadow-md );
	list-style: none;
}

.ls-nav__submenu[hidden] { display: none; }

.ls-nav__submenu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var( --ls-radius-lg );
	color: var( --ls-foreground );
	font-size: var( --ls-fs-base );
	text-decoration: none;
}

.ls-nav__submenu a:hover,
.ls-nav__submenu a:focus-visible {
	background: var( --ls-muted );
	color: var( --ls-primary );
}

/* ── Right-hand actions ───────────────────────────────── */
.ls-header__actions { display: flex; align-items: center; gap: 0.5rem; }

.ls-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: none;
	border: 0;
	border-radius: var( --ls-radius-lg );
	color: var( --ls-foreground );
	cursor: pointer;
	transition: color var( --ls-transition ), background-color var( --ls-transition );
}

.ls-header__icon-btn:hover { background: var( --ls-muted ); color: var( --ls-primary ); }

.ls-header__cta {
	display: none;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	border: 2px solid currentColor;
	border-radius: var( --ls-radius-lg );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-semibold );
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var( --ls-transition ), color var( --ls-transition );
}

@media ( min-width: 640px ) {
	.ls-header__cta { display: inline-flex; }
}

.ls-header__cta--donate { color: var( --ls-secondary ); }
.ls-header__cta--donate:hover { background: var( --ls-secondary ); color: var( --ls-white ); }

.ls-header__cta--list { color: var( --ls-primary ); }
.ls-header__cta--list:hover { background: var( --ls-primary ); color: var( --ls-white ); }

/* ── Mobile drawer ────────────────────────────────────── */
.ls-header__burger { display: inline-flex; }

@media ( min-width: 1024px ) {
	.ls-header__burger { display: none; }
}

.ls-drawer {
	position: fixed;
	inset: var( --ls-header-h ) 0 0;
	z-index: 40;
	overflow-y: auto;
	padding: 1.5rem var( --ls-gutter ) 3rem;
	background: var( --ls-background );
	border-top: 1px solid var( --ls-border );
}

.ls-drawer[hidden] { display: none; }

@media ( min-width: 1024px ) {
	.ls-drawer { display: none !important; }
}

.ls-drawer__list { margin: 0 0 1.5rem; padding: 0; list-style: none; }

.ls-drawer__list a,
.ls-drawer__list .ls-drawer__sublabel {
	display: block;
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var( --ls-border );
	color: var( --ls-foreground );
	font-size: var( --ls-fs-lg );
	font-weight: var( --ls-fw-medium );
	text-decoration: none;
}

.ls-drawer__sublabel {
	color: var( --ls-muted-foreground );
	font-size: var( --ls-fs-sm );
	font-weight: var( --ls-fw-bold );
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ls-drawer__list ul { margin: 0; padding: 0 0 0 1rem; list-style: none; }

.ls-drawer__actions { display: grid; gap: 0.75rem; }

.ls-drawer__actions .ls-btn { width: 100%; }

/* Search form revealed by the header search toggle. */
.ls-header__search[hidden] { display: none; }

.ls-header__search {
	padding-bottom: 1rem;
	border-top: 1px solid var( --ls-border );
	padding-top: 1rem;
}

.ls-header__search form { display: flex; gap: 0.5rem; }

.ls-header__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.625rem 1rem;
	background: var( --ls-muted );
	border: 1px solid var( --ls-border );
	border-radius: var( --ls-radius-full );
	color: var( --ls-foreground );
	font: inherit;
	font-size: var( --ls-fs-sm );
}

/*
 * Between the nav breakpoint and ~1200px the logo, six nav items and two CTAs
 * are wider than the rail (they need ~1044px inside a 960px content box at
 * 1024). The design only specifies the 1440 case; rather than move the
 * breakpoint and send tablets to the drawer, tighten the spacing in this band.
 */
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.ls-header__inner { gap: 0.75rem; }

	.ls-nav__link,
	.ls-nav__toggle { padding-inline: 0.625rem; }

	.ls-nav__toggle { padding-right: 0.5rem; }

	.ls-header__actions { gap: 0.25rem; }

	.ls-header__cta { padding-inline: 0.75rem; }
}