/* Mobile Header, Drawer, and Category Navigation.
   Its own intentional layout — not a shrunk desktop header. */

.dp-hf-mobile-header {
	display: block;
	background: var(--dp-hf-bg);
	border-bottom: 1px solid var(--dp-hf-border);
	position: sticky;
	top: 0;
	z-index: 500;
	padding: 0.625rem 1rem;
}

@media (min-width: 1025px) {
	.dp-hf-mobile-header, .dp-hf-drawer { display: none !important; }
}

.dp-hf-mobile-row-1 {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 0.5rem;
}

.dp-hf-mobile-menu-btn, .dp-hf-hansis-mobile {
	width: 44px;
	height: 44px;
	/* !important on the box model: this is a grid cell (see
	   .dp-hf-mobile-row-1 above) sized to exactly 44px, so any inherited
	   or theme padding landing on this button — on top of box-sizing:
	   border-box — eats directly into that fixed width and squeezes the
	   flex content area down toward zero, taking the icon with it. */
	padding: 0 !important;
	box-sizing: border-box !important;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--dp-hf-ink);
	cursor: pointer;
	border-radius: var(--dp-hf-radius);
	transition: background-color 0.15s ease;
}
.dp-hf-mobile-menu-btn:hover, .dp-hf-mobile-menu-btn:active,
.dp-hf-hansis-mobile:hover, .dp-hf-hansis-mobile:active { background: var(--dp-hf-soft); }
.dp-hf-mobile-menu-btn .dp-hf-icon {
	width: 24px !important;
	height: 24px !important;
	stroke-width: 2;
	/* The icon is a flex item of the button above; without this it
	   inherits the default flex-shrink:1 and gets compressed along the
	   row axis the moment the button's own content box is squeezed by
	   anything (see the padding note above) — which visually reads as
	   the whole glyph collapsing to a thin sliver, since a shrunk-width
	   SVG still scales its viewBox uniformly to fit (default
	   preserveAspectRatio). This removes that failure mode outright. */
	flex: 0 0 auto !important;
}
.dp-hf-hansis-mobile { color: var(--dp-hf-purple); justify-self: end; text-decoration: none; }
.dp-hf-mobile-menu-btn:focus-visible, .dp-hf-hansis-mobile:focus-visible { outline: 2px solid var(--dp-hf-cyan); outline-offset: 2px; background: var(--dp-hf-soft); }
.dp-hf-hansis-mobile .dp-hf-hansis-mark { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) {
	.dp-hf-mobile-menu-btn, .dp-hf-hansis-mobile { transition: none; }
}

.dp-hf-mobile-row-1 .dp-hf-logo { justify-self: center; }
.dp-hf-mobile-row-1 .dp-hf-logo img { max-height: 30px; }
.dp-hf-mobile-row-1 .dp-hf-logo--text a { font-size: 1.15rem; }

.dp-hf-mobile-row-2 { margin-top: 0.625rem; }
.dp-hf-mobile-row-2 .dp-hf-search-input { padding-top: 0.65rem; padding-bottom: 0.65rem; min-height: 44px; }
.dp-hf-mobile-row-2 .dp-hf-search-submit { background: var(--dp-hf-teal); }
.dp-hf-mobile-row-2 .dp-hf-search-submit:hover,
.dp-hf-mobile-row-2 .dp-hf-search-submit:focus-visible { background: var(--dp-hf-teal-hover); }
/* Search System Phase H2 — Autocomplete on the mobile field: fits the
   viewport (never causes horizontal overflow), touch-sized rows,
   above the mobile header row but capped below the drawer layer
   (700+) since it should always close if the drawer opens. */
.dp-hf-mobile-row-2 .dp-hf-search-autocomplete {
	left: 0;
	right: 0;
	max-height: min(60vh, 420px);
	z-index: 60;
}
.dp-hf-mobile-row-2 .dp-hf-ac-option { padding: 0.65rem 1rem; min-height: 44px; }

/* Search System Phase H3 — type-switcher tabs on the mobile search
   field: horizontally scrollable so they never force page-level
   overflow, with touch-friendly (~36px+) tap targets. */
.dp-hf-mobile-row-2 .dp-hf-ac-tabs {
	padding-left: 0.875rem;
	padding-right: 0.875rem;
	-webkit-overflow-scrolling: touch;
}
.dp-hf-mobile-row-2 .dp-hf-ac-tab {
	min-height: 36px;
	padding: 0.4rem 0.9rem;
}

.dp-hf-mobile-row-2 .dp-hf-search-submit .dp-hf-icon {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 2.2;
	color: #fff;
	flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------
   Drawer shell
--------------------------------------------------------------- */

.dp-hf-drawer[hidden] { display: none !important; }

.dp-hf-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.45);
	z-index: 700;
}

.dp-hf-drawer-panel, .dp-hf-cat-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(85vw, 360px);
	background: var(--dp-hf-bg);
	z-index: 701;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.dp-hf-cat-drawer[hidden] { display: none !important; }
.dp-hf-cat-drawer { z-index: 702; }

.dp-hf-drawer-header, .dp-hf-cat-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid var(--dp-hf-border);
	font-weight: 700;
}
.dp-hf-cat-drawer-header { gap: 0.5rem; }

.dp-hf-drawer-close, .dp-hf-cat-drawer-close-all {
	width: 44px;
	height: 44px;
	/* !important, same reasoning as .dp-hf-mobile-menu-btn above: locks
	   the box model so no inherited/theme padding can eat into this
	   fixed-size button and squeeze its flex content area. */
	padding: 0 !important;
	box-sizing: border-box !important;
	flex-shrink: 0;
	border: 0;
	border-radius: var(--dp-hf-radius);
	background: none;
	color: var(--dp-hf-ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}
.dp-hf-drawer-close .dp-hf-icon, .dp-hf-cat-drawer-close-all .dp-hf-icon {
	width: 22px !important;
	height: 22px !important;
	stroke-width: 2;
	/* Same flex-shrink lockdown as the other two controls — see
	   .dp-hf-mobile-menu-btn .dp-hf-icon above for why this matters. */
	flex: 0 0 auto !important;
}
.dp-hf-drawer-close:hover, .dp-hf-cat-drawer-close-all:hover { background: var(--dp-hf-soft); }
.dp-hf-drawer-close:focus-visible, .dp-hf-cat-drawer-close-all:focus-visible { outline: 2px solid var(--dp-hf-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.dp-hf-drawer-close, .dp-hf-cat-drawer-close-all { transition: none; }
}

.dp-hf-drawer-nav ul { list-style: none; margin: 0; padding: 0.25rem 0; }
.dp-hf-drawer-nav a, .dp-hf-drawer-nav button {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	padding: 1rem;
	min-height: 52px;
	color: var(--dp-hf-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--dp-hf-border);
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.dp-hf-drawer-nav li:last-child > a, .dp-hf-drawer-nav li:last-child > button { border-bottom: 0; }
.dp-hf-drawer-nav a:hover, .dp-hf-drawer-nav button:hover { background: var(--dp-hf-soft); }
.dp-hf-drawer-nav .dp-hf-icon, .dp-hf-drawer-nav .dp-hf-hansis-mark { width: 18px; height: 18px; color: var(--dp-hf-purple); flex-shrink: 0; }
.dp-hf-drawer-nav a:focus-visible, .dp-hf-drawer-nav button:focus-visible { outline: 2px solid var(--dp-hf-cyan); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
	.dp-hf-drawer-nav a, .dp-hf-drawer-nav button { transition: none; }
}

.dp-hf-drawer-cat-open span:first-of-type, .dp-hf-cat-drill span:first-of-type { flex: 1; }
.dp-hf-cat-chevron { width: 16px; height: 16px; transform: rotate(-90deg); color: var(--dp-hf-muted); }

.dp-hf-drawer-divider { height: 1px; background: var(--dp-hf-border); margin: 0.5rem 1rem; list-style: none; }

/* ---------------------------------------------------------------
   Mobile Category Navigation — progressive disclosure panels
--------------------------------------------------------------- */

.dp-hf-cat-panel { display: none; flex-direction: column; }
.dp-hf-cat-panel.is-active { display: flex; }

.dp-hf-cat-list { list-style: none; margin: 0; padding: 0.5rem 0; flex: 1; }
.dp-hf-cat-list li a, .dp-hf-cat-drill {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	min-height: 44px;
	padding: 0.85rem 1rem;
	color: var(--dp-hf-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	background: none;
	border: 0;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}
.dp-hf-cat-list .dp-hf-icon { width: 18px; height: 18px; color: var(--dp-hf-purple); flex-shrink: 0; }
.dp-hf-cat-list a:focus-visible, .dp-hf-cat-drill:focus-visible { outline: 2px solid var(--dp-hf-cyan); outline-offset: -2px; }

.dp-hf-cat-back {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border: 0;
	background: none;
	color: var(--dp-hf-ink);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	font-family: inherit;
}
.dp-hf-cat-back .dp-hf-icon { width: 18px; height: 18px; }
.dp-hf-cat-back:focus-visible { outline: 2px solid var(--dp-hf-cyan); outline-offset: 2px; }

.dp-hf-cat-viewall-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 1rem 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--dp-hf-purple);
	text-decoration: none;
}

.dp-hf-cat-viewall {
	display: block;
	text-align: center;
	padding: 1rem;
	margin-top: auto;
	border-top: 1px solid var(--dp-hf-border);
	color: var(--dp-hf-purple);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
	.dp-hf-drawer-panel, .dp-hf-cat-drawer { transition: transform 0.2s ease; }
}