/**
 * Mobile News UI for Elementor
 * All selectors are prefixed .mnui- and hardened with !important so a template
 * kit's global typography/spacing rules cannot reflow the bars.
 */

:root {
	--mnui-accent: #c8102e;
	--mnui-bar-bg: #ffffff;
	--mnui-text: #1a1a1a;
	--mnui-muted: #6b7280;
	--mnui-border: #e5e7eb;
	--mnui-accent-contrast: #ffffff;
	--mnui-z: 999;

	--mnui-top: 0px;              /* set by JS from the sticky header height */
	--mnui-catbar-h: 46px;
	--mnui-chip-gap: 8px;
	--mnui-track-justify: flex-start;
	--mnui-chip-size: 14px;
	--mnui-nav-h: 58px;
	--mnui-tab-size: 11px;
	--mnui-tab-icon: 23px;
	--mnui-safe: env(safe-area-inset-bottom, 0px);
	--mnui-radius: 999px;
	--mnui-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
}

/* Reserve space so fixed chrome never sits on top of the last paragraph. */
body.mnui-on.mnui-has-bottom-nav {
	padding-bottom: calc(var(--mnui-nav-h) + var(--mnui-safe)) !important;
}

/* Scroll lock. position:fixed is the only technique iOS Safari respects. */
body.mnui-panel-open {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------- category bar */

.mnui-catbar {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--mnui-bar-bg) !important;
	border: 0 !important;
	z-index: calc(var(--mnui-z) - 1) !important;
	transition: transform .22s ease !important;
}

.mnui-catbar--sticky {
	position: sticky !important;
	top: var(--mnui-top) !important;
}

.mnui-catbar.is-hidden {
	transform: translate3d(0, -110%, 0) !important;
}

.mnui-catbar__track {
	display: flex !important;
	align-items: center !important;
	justify-content: var(--mnui-track-justify) !important;
	gap: var(--mnui-chip-gap) !important;
	height: var(--mnui-catbar-h) !important;
	padding: 0 12px !important;
	margin: 0 !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior-x: contain !important;
	scroll-behavior: auto !important;
	scroll-snap-type: x proximity;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

.mnui-catbar__track::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.mnui-catbar__fade {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 32px !important;
	height: 100% !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transition: opacity .2s ease !important;
	background: linear-gradient(to right, transparent, var(--mnui-bar-bg)) !important;
}

.mnui-catbar__fade--left {
	left: 0 !important;
	right: auto !important;
	background: linear-gradient(to left, transparent, var(--mnui-bar-bg)) !important;
}

.mnui-catbar.is-scrollable .mnui-catbar__fade--left,
.mnui-catbar.is-scrollable .mnui-catbar__fade--right {
	opacity: 1 !important;
}

.mnui-catbar.is-start .mnui-catbar__fade--left,
.mnui-catbar.is-end .mnui-catbar__fade--right {
	opacity: 0 !important;
}

.mnui-chip {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	height: 32px !important;
	padding: 0 14px !important;
	border-radius: var(--mnui-radius) !important;
	background: transparent !important;
	color: var(--mnui-muted) !important;
	font-size: var(--mnui-chip-size) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: .01em !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	scroll-snap-align: center;
	transition: color .15s ease, background-color .15s ease !important;
}

.mnui-chip:hover,
.mnui-chip:focus {
	color: var(--mnui-text) !important;
	text-decoration: none !important;
}

/* Pill variant */
.mnui-catbar--pill .mnui-chip.is-active {
	background: var(--mnui-accent) !important;
	color: var(--mnui-accent-contrast) !important;
	font-weight: 600 !important;
}

/* Underline variant */
.mnui-catbar--underline .mnui-chip {
	padding: 0 6px !important;
	border-radius: 0 !important;
	height: 100% !important;
	box-shadow: inset 0 -2px 0 transparent !important;
}

.mnui-catbar--underline .mnui-chip.is-active {
	color: var(--mnui-text) !important;
	font-weight: 700 !important;
	box-shadow: inset 0 -3px 0 var(--mnui-accent) !important;
}

/* On a pointer device the chips are dragged or clicked, not swiped. */
@media (hover: hover) and (pointer: fine) {
	.mnui-catbar--all-devices .mnui-catbar__track {
		cursor: grab;
	}

	.mnui-catbar--all-devices .mnui-catbar__track.is-dragging {
		cursor: grabbing;
		scroll-behavior: auto !important;
	}

	.mnui-catbar--all-devices .mnui-catbar__track.is-dragging .mnui-chip {
		pointer-events: none;
	}

}

/* Edge auto-scroll. The class is only added by JS once the feature is live,
   so these need no media query of their own. */
.mnui-catbar.is-edgescroll .mnui-catbar__fade {
	width: var(--mnui-edge-zone, 80px) !important;
}

.mnui-catbar.is-edgescroll {
	cursor: default;
}

/* Snap points fight a continuous pan, dragging the bar back each frame. */
.mnui-catbar.is-panning .mnui-catbar__track {
	scroll-snap-type: none !important;
	scroll-behavior: auto !important;
}

/* ------------------------------------------------------------- bottom tab bar */

.mnui-bottomnav {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: stretch !important;
	justify-content: space-around !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 4px var(--mnui-safe) !important;
	background: var(--mnui-bar-bg) !important;
	border-top: 1px solid var(--mnui-border) !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .06) !important;
	z-index: var(--mnui-z) !important;
	transform: translateZ(0);
}

.mnui-tab {
	flex: 1 1 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	min-width: 0 !important;
	height: var(--mnui-nav-h) !important;
	margin: 0 !important;
	padding: 6px 2px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--mnui-muted) !important;
	font-size: var(--mnui-tab-size) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s ease !important;
}

.mnui-tab:hover,
.mnui-tab:focus {
	color: var(--mnui-text) !important;
	background: none !important;
	text-decoration: none !important;
}

.mnui-tab.is-active {
	color: var(--mnui-accent) !important;
	font-weight: 600 !important;
}

.mnui-tab .mnui-icon {
	width: var(--mnui-tab-icon) !important;
	height: var(--mnui-tab-icon) !important;
	display: block !important;
}

.mnui-tab__label {
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.mnui-tab__iconwrap {
	position: relative !important;
	display: inline-flex !important;
}

.mnui-badge {
	position: absolute !important;
	top: -4px !important;
	right: -8px !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	border-radius: 999px !important;
	background: var(--mnui-accent) !important;
	color: var(--mnui-accent-contrast) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	text-align: center !important;
}

/* ----------------------------------------------------------------- sheet panels */

.mnui-panel {
	position: fixed !important;
	inset: 0 !important;
	z-index: calc(var(--mnui-z) + 5) !important;
}

.mnui-panel[hidden] {
	display: none !important;
}

.mnui-panel__backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 15, 15, .45) !important;
	opacity: 0 !important;
	transition: opacity .22s ease !important;
}

.mnui-panel__sheet {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	max-height: 82vh !important;
	max-height: 82dvh !important;
	padding-bottom: calc(var(--mnui-safe) + 8px) !important;
	background: var(--mnui-bar-bg) !important;
	border-radius: 18px 18px 0 0 !important;
	box-shadow: var(--mnui-shadow) !important;
	transform: translate3d(0, 100%, 0) !important;
	transition: transform .26s cubic-bezier(.22, .8, .3, 1) !important;
}

.mnui-panel.is-open .mnui-panel__backdrop {
	opacity: 1 !important;
}

.mnui-panel.is-open .mnui-panel__sheet {
	transform: translate3d(0, 0, 0) !important;
}

.mnui-panel__head {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 16px 16px 10px !important;
	border-bottom: 1px solid var(--mnui-border) !important;
}

.mnui-panel__grip {
	position: absolute !important;
	top: 7px !important;
	left: 50% !important;
	width: 36px !important;
	height: 4px !important;
	margin-left: -18px !important;
	border-radius: 999px !important;
	background: var(--mnui-border) !important;
}

.mnui-panel__title {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--mnui-text) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .01em !important;
}

.mnui-panel__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, .04) !important;
	color: var(--mnui-text) !important;
	cursor: pointer !important;
}

.mnui-panel__body {
	flex: 1 1 auto !important;
	padding: 8px 16px 16px !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior: contain !important;
}

/* Lists inside panels */

.mnui-list,
.mnui-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mnui-list__item,
.mnui-menu a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 13px 2px !important;
	border-bottom: 1px solid var(--mnui-border) !important;
	color: var(--mnui-text) !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	text-decoration: none !important;
}

.mnui-list__label {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
}

.mnui-list__meta {
	flex: 0 0 auto !important;
	color: var(--mnui-muted) !important;
	font-size: 12px !important;
	font-variant-numeric: tabular-nums !important;
}

.mnui-list .mnui-icon {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	color: var(--mnui-muted) !important;
}

[data-mnui-saved-list] > li {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

[data-mnui-saved-list] > li .mnui-list__item {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.mnui-list__thumb {
	flex: 0 0 auto !important;
	width: 56px !important;
	height: 42px !important;
	border-radius: 6px !important;
	object-fit: cover !important;
	background: var(--mnui-border) !important;
}

.mnui-remove {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--mnui-muted) !important;
	cursor: pointer !important;
}

.mnui-menu .sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 0 0 14px !important;
}

.mnui-eyebrow {
	margin: 18px 0 4px !important;
	color: var(--mnui-muted) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
}

.mnui-empty {
	margin: 24px 0 !important;
	color: var(--mnui-muted) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	text-align: center !important;
}

/* Search */

.mnui-search {
	display: flex !important;
	gap: 8px !important;
	margin: 8px 0 4px !important;
}

.mnui-search__input {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--mnui-border) !important;
	border-radius: 10px !important;
	background: rgba(0, 0, 0, .02) !important;
	color: var(--mnui-text) !important;
	font-size: 16px !important; /* 16px stops iOS zoom-on-focus */
	line-height: 44px !important;
}

.mnui-search__input:focus {
	outline: 2px solid var(--mnui-accent) !important;
	outline-offset: 1px !important;
}

.mnui-search__submit {
	flex: 0 0 auto !important;
	height: 44px !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--mnui-accent) !important;
	color: var(--mnui-accent-contrast) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.mnui-clear {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 14px 16px 0 !important;
	padding: 8px 12px !important;
	border: 1px solid var(--mnui-border) !important;
	border-radius: 8px !important;
	background: none !important;
	color: var(--mnui-muted) !important;
	font-size: 13px !important;
	cursor: pointer !important;
}

.mnui-clear .mnui-icon {
	width: 16px !important;
	height: 16px !important;
}

/* Save toggle for single posts */

.mnui-save {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	border: 1px solid var(--mnui-border) !important;
	border-radius: 999px !important;
	background: none !important;
	color: var(--mnui-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.mnui-save .mnui-icon {
	width: 17px !important;
	height: 17px !important;
}

.mnui-save.is-saved {
	border-color: var(--mnui-accent) !important;
	color: var(--mnui-accent) !important;
}

.mnui-save.is-saved .mnui-icon {
	fill: currentColor !important;
}

/* Focus + motion */

.mnui-chip:focus-visible,
.mnui-tab:focus-visible,
.mnui-list__item:focus-visible,
.mnui-panel__close:focus-visible,
.mnui-save:focus-visible {
	outline: 2px solid var(--mnui-accent) !important;
	outline-offset: 2px !important;
	border-radius: 6px !important;
}

@media (prefers-reduced-motion: reduce) {
	.mnui-catbar,
	.mnui-panel__sheet,
	.mnui-panel__backdrop,
	.mnui-chip,
	.mnui-tab {
		transition: none !important;
	}
}

/* Dark mode inherits from the site if it sets a colour-scheme */
@media (prefers-color-scheme: dark) {
	body.mnui-dark {
		--mnui-bar-bg: #111315;
		--mnui-text: #f5f5f5;
		--mnui-muted: #9aa0a6;
		--mnui-border: #2a2d31;
	}
}