.tmi-header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 56px 0;
	background: linear-gradient(180deg, var(--tmi-white) 0%, var(--tmi-dark-200) 100%);
}

.tmi-header-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.tmi-menu-button,
.tmi-search-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	padding: 12px;
	border: 0;
	background: transparent;
	color: var(--tmi-dark);
	cursor: pointer;
}

.tmi-menu-button img,
.tmi-search-button img {
	width: 22px;
	height: 22px;
}

/* The Menu button only toggles the collapsed nav on mobile; the full nav is
   always visible on desktop, so hide it there. With the button gone, pin the
   logo to the centre column and the Arabic line to the right column so
   auto-placement doesn't shift them left. */
@media (min-width: 901px) {
	.tmi-menu-button {
		display: none;
	}

	.tmi-header-top > .tmi-logo {
		grid-column: 2;
		justify-self: center;
	}

	.tmi-header-top > .tmi-header-arabic {
		grid-column: 3;
	}
}

.tmi-header-arabic {
	justify-self: end;
	margin: 0;
}

.tmi-header-divider {
	display: none;
}

.tmi-header-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex-wrap: wrap;
}

.tmi-mobile-menu-head,
.tmi-search-button__label {
	display: none;
}

body.tmi-menu-lock {
	overflow: hidden;
}

.tmi-header-search__suggestions {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 30;
	max-height: min(430px, 62vh);
	overflow-y: auto;
	border: 1px solid var(--tmi-dark-200);
	border-radius: 8px;
	background: var(--tmi-white);
	box-shadow: 0 18px 40px rgba(9, 11, 12, 0.18);
}

.tmi-header-search.has-error .tmi-header-search__bar {
	border-color: var(--tmi-error);
}

.tmi-header-search__suggestions[hidden],
.tmi-header-search__error[hidden] {
	display: none;
}

.tmi-header-search__option {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	width: 100%;
	padding: 14px;
	border: 0;
	border-block-end: 1px solid var(--tmi-dark-100);
	border-radius: 0;
	background: var(--tmi-white);
	color: var(--tmi-dark);
	text-align: start;
	cursor: pointer;
	transition: background-color var(--tmi-dur-hover) var(--ease-out-cubic);
}

.tmi-header-search__option:last-child {
	border-block-end: 0;
}

.tmi-header-search__option:hover,
.tmi-header-search__option.is-active,
.tmi-header-search__option:focus-visible {
	background: var(--tmi-dark-100);
	outline: none;
}

.tmi-header-search__option:focus-visible {
	box-shadow: inset 3px 0 0 var(--tmi-amber);
}

.tmi-header-search__option img {
	width: 56px;
	height: 56px;
	border-radius: 4px;
	object-fit: cover;
}

.tmi-header-search__option-content {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.tmi-header-search__option-meta {
	color: var(--tmi-green);
	letter-spacing: 0.06em;
}

.tmi-header-search__option-title {
	overflow: hidden;
	font: 700 16px/1.3 var(--tmi-font-display);
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tmi-header-search__option-excerpt {
	overflow: hidden;
	color: var(--tmi-dark-500);
	font: 500 13px/1.4 var(--tmi-font-sans);
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tmi-header-search__error {
	margin: 8px 4px 0;
	padding: 9px 12px;
	border-inline-start: 3px solid var(--tmi-error);
	border-radius: 4px;
	background: var(--tmi-error-soft);
	color: var(--tmi-error);
	font: 600 13px/1.4 var(--tmi-font-sans);
	letter-spacing: 0;
}

.tmi-header-search__error.is-status {
	border-inline-start-color: var(--tmi-green);
	background: var(--tmi-dark-50);
	color: var(--tmi-dark-500);
}

.tmi-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 12px 24px;
	border-radius: 8px;
	color: var(--tmi-muted);
	text-decoration: none;
}

.tmi-nav-item.is-active {
	color: var(--tmi-dark);
}

.tmi-nav-dot {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--tmi-dark-300);
}

.tmi-nav-item.is-active .tmi-nav-dot {
	background: var(--tmi-accent-green);
	box-shadow: 0 0 0 3px rgba(0, 214, 111, 0.2);
}

.tmi-nav-group {
	position: relative;
}

.tmi-nav-group__main {
	display: flex;
	align-items: center;
}

.tmi-nav-group__main .tmi-nav-item {
	padding-right: 8px;
}

.tmi-nav-submenu-toggle {
	display: grid;
	width: 34px;
	height: 42px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--tmi-muted);
	cursor: pointer;
	transition: background-color var(--tmi-dur-hover) var(--ease-out-cubic), color var(--tmi-dur-hover) var(--ease-out-cubic);
}

.tmi-nav-submenu-toggle:hover {
	background: var(--tmi-dark-100);
	color: var(--tmi-dark);
}

.tmi-nav-submenu-toggle:focus-visible {
	outline: 3px solid var(--tmi-green);
	outline-offset: 2px;
}

.tmi-nav-submenu-toggle span {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 240ms var(--ease-out-cubic);
}

.tmi-nav-group.is-open .tmi-nav-submenu-toggle span {
	transform: translateY(2px) rotate(225deg);
}

.tmi-nav-submenu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	display: grid;
	min-width: 210px;
	overflow: hidden;
	padding: 8px;
	border: 1px solid var(--tmi-dark-200);
	border-radius: 8px;
	background: var(--tmi-white);
	box-shadow: 0 18px 40px rgba(9, 11, 12, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 180ms ease, transform 240ms var(--ease-out-cubic), visibility 0s linear 240ms;
}

.tmi-nav-subitem {
	padding: 12px 14px;
	border-radius: 5px;
	color: var(--tmi-muted);
	text-decoration: none;
	transition: background-color var(--tmi-dur-hover) var(--ease-out-cubic), color var(--tmi-dur-hover) var(--ease-out-cubic);
}

.tmi-nav-subitem:hover,
.tmi-nav-subitem:focus-visible {
	background: var(--tmi-dark-100);
	color: var(--tmi-dark);
	outline: none;
}

.tmi-nav-subitem.is-active {
	background: var(--tmi-green);
	color: var(--tmi-white);
}

@media (min-width: 901px) {
	.tmi-nav-group:hover .tmi-nav-submenu,
	.tmi-nav-group:focus-within .tmi-nav-submenu,
	.tmi-nav-group.is-open .tmi-nav-submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
}

.tmi-live-bar {
	display: flex;
	align-items: center;
	width: calc(100% + 112px);
	margin-inline: -56px;
	overflow: hidden;
	border-radius: 0;
	background: var(--tmi-dark-50);
	box-shadow: 1px 2px 4px rgba(9, 11, 12, 0.04);
}

.tmi-live-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 40px 12px 24px;
	border-radius: 0;
	background: var(--tmi-dark);
	color: var(--tmi-white);
	white-space: nowrap;
}

.tmi-live-label span {
	width: 8px;
	height: 8px;
	border-radius: 99px;
	background: var(--tmi-accent-green);
}

.tmi-live-items {
	display: flex;
	gap: 24px;
	padding: 12px 24px;
	overflow: hidden;
	white-space: nowrap;
	color: var(--tmi-muted);
	font-size: 14px;
}

.tmi-live-item {
	display: inline-flex;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

a.tmi-live-item:hover span {
	color: var(--tmi-dark);
}

.tmi-live-item strong {
	color: var(--tmi-dark);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.tmi-header {
		gap: 12px;
		padding: 14px 18px 0;
	}

	.tmi-header-top {
		grid-template-columns: 48px minmax(0, 1fr) 48px;
		grid-template-areas:
			"arabic arabic arabic"
			"divider divider divider"
			"menu logo .";
		gap: 8px 10px;
	}

	.tmi-header-top > .tmi-menu-button {
		grid-area: menu;
		align-self: center;
		justify-self: start;
		width: 48px;
		height: 48px;
		justify-content: center;
		padding: 9px;
	}

	.tmi-header-top > .tmi-menu-button span {
		display: none;
	}

	.tmi-header-top > .tmi-menu-button img {
		width: 30px;
		height: 30px;
	}

	.tmi-header-top > .tmi-logo {
		grid-area: logo;
		justify-self: center;
	}

	.tmi-header-top > .tmi-logo .tmi-logo-img {
		width: 160px;
	}

	.tmi-header-arabic {
		grid-area: arabic;
		justify-self: center;
	}

	.tmi-header-divider {
		display: block;
		grid-area: divider;
		justify-self: center;
		width: min(78vw, 420px);
		height: 14px;
		background: var(--tmi-amber);
		-webkit-mask: url("../../assets/images/figma/flourish.svg") center / 100% 100% no-repeat;
		mask: url("../../assets/images/figma/flourish.svg") center / 100% 100% no-repeat;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav {
		position: fixed;
		inset: 0;
		z-index: 99998;
		display: flex;
		height: 100vh;
		height: 100dvh;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		overflow-y: auto;
		padding: max(24px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
		background-color: var(--tmi-dark-50);
		background-image: url("../../assets/images/figma/background-1.webp");
		background-repeat: repeat;
		background-size: 900px auto;
		box-shadow: -18px 0 48px rgba(9, 11, 12, 0.2);
		opacity: 1;
		visibility: hidden;
		pointer-events: none;
		transform: translateX(100%);
		transition: transform 420ms var(--ease-in-out-cubic),
			visibility 0s linear 420ms;
		overscroll-behavior: contain;
	}

	.tmi-header[data-tmi-header].is-menu-open .tmi-header-nav {
		display: flex;
		grid-template-columns: none;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(0);
		animation: none;
		transition-delay: 0s;
	}

	.admin-bar .tmi-header[data-tmi-header] .tmi-header-nav {
		top: 46px;
		height: calc(100dvh - 46px);
	}

	.tmi-mobile-menu-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 2px solid var(--tmi-dark);
	}

	.tmi-mobile-menu-head strong {
		color: var(--tmi-dark);
	}

	.tmi-mobile-menu-close {
		display: grid;
		width: 48px;
		height: 48px;
		place-items: center;
		padding: 0;
		border: 1px solid var(--tmi-dark);
		border-radius: 50%;
		background: var(--tmi-white);
		color: var(--tmi-dark);
		font: 400 30px/1 var(--tmi-font-sans);
		cursor: pointer;
		transition: background-color var(--tmi-dur-hover) var(--ease-out-cubic),
			color var(--tmi-dur-hover) var(--ease-out-cubic),
			transform var(--tmi-dur-press) var(--ease-out-cubic);
	}

	.tmi-mobile-menu-close:hover {
		background: var(--tmi-dark);
		color: var(--tmi-white);
	}

	.tmi-mobile-menu-close:active {
		transform: scale(0.94);
	}

	.tmi-mobile-menu-close:focus-visible {
		outline: 3px solid var(--tmi-amber);
		outline-offset: 3px;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-item {
		justify-content: flex-start;
		width: 100%;
		min-height: 62px;
		padding: 16px 4px;
		border-bottom: 1px solid var(--tmi-dark-200);
		border-radius: 0;
		font-size: 22px;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-group {
		width: 100%;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-group__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 56px;
		border-bottom: 1px solid var(--tmi-dark-200);
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-group__main .tmi-nav-item {
		border-bottom: 0;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-submenu-toggle {
		width: 56px;
		height: 62px;
		border-radius: 0;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-submenu {
		position: static;
		min-width: 0;
		max-height: 0;
		padding: 0 0 0 28px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 0;
		visibility: hidden;
		transform: none;
		transition: max-height 320ms var(--ease-in-out-cubic), opacity 180ms ease, visibility 0s linear 320ms;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-group.is-open .tmi-nav-submenu {
		max-height: 280px;
		padding-bottom: 10px;
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-subitem {
		padding: 13px 16px;
		border-bottom: 1px solid var(--tmi-dark-200);
		border-radius: 0;
		font-size: 18px;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-nav-dot {
		width: 9px;
		height: 9px;
	}

	.tmi-header[data-tmi-header] .tmi-header-nav .tmi-search-button {
		justify-content: flex-start;
		width: 100%;
		min-height: 62px;
		margin-top: 14px;
		padding: 16px 4px;
		border-bottom: 1px solid var(--tmi-dark-200);
		border-radius: 0;
	}

	.tmi-header[data-tmi-header] .tmi-search-button__label {
		display: inline;
	}

	.tmi-live-bar {
		align-items: center;
		flex-direction: row;
		width: calc(100% + 36px);
		margin-inline: -18px;
	}

	.tmi-live-label.tmi-type-h6 {
		flex: 0 0 auto;
		gap: 8px;
		padding: 10px 16px;
		font-size: 13px;
		line-height: 1.3;
	}

	.tmi-live-label span {
		width: 7px;
		height: 7px;
	}

	/* Keep the ticker clipped so the marquee auto-scrolls on mobile too
	   (instead of a manual horizontal scroll). */
	.tmi-live-items {
		min-width: 0;
		padding: 10px 14px;
		overflow: hidden;
		font-size: 12px;
	}
}

@media (min-width: 783px) and (max-width: 900px) {
	.admin-bar .tmi-header[data-tmi-header] .tmi-header-nav {
		top: 32px;
		height: calc(100dvh - 32px);
	}
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.tmi-header[data-tmi-header] .tmi-header-nav {
		transition-duration: 0.001ms;
	}
}

@media (max-width: 700px) {
	.tmi-nav-item {
		justify-content: flex-start;
		padding: 10px 14px;
	}

	.tmi-search-button {
		justify-content: flex-start;
		width: 100%;
		padding-left: 14px;
	}

	.tmi-live-label {
		border-radius: 0;
		padding-right: 16px;
	}
}