/*
 * DNews header, desktop dropdown and mobile drawer. Loaded with the Navigation
 * block. One markup serves both layouts: a 60px black bar with hamburger, logo
 * and search below 1025px; a 91px ink bar with logo, menu, search and social
 * from 1025px. Scrolling: header.js turns the bar compact (is-condensed,
 * 59px charcoal) past 120px and slides the whole header away on the way down
 * and back on the way up (is-hidden). The wrapper keeps a constant height so
 * nothing below it ever moves.
 */

/*
 * Sticky applies to the template-part wrapper, whose parent is the whole
 * page.
 */
.dnews-header-wrap {
	--dnews-header-h: 60px;

	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 100;

	/* Constant height: compact and hidden states never reflow the page. */
	height: var(--dnews-header-h);

	/* Only the bar takes clicks, not the clear strip under the compact bar. */
	pointer-events: none;
	transition-property: transform;
	transition-duration: var(--wp--custom--motion--reveal);
	transition-timing-function: var(--wp--custom--motion--ease-reveal);
}

@media (min-width: 1025px) {

	.dnews-header-wrap {
		--dnews-header-h: 91px;
	}
}

/*
 * Hidden: translate (compositor only) past the top, including the admin bar.
 * No will-change: a transformed or will-change ancestor would become the
 * containing block of the fixed drawer overlay.
 */
.dnews-header-wrap.is-hidden {
	--dnews-hide: calc(-100% - var(--wp-admin--admin-bar--height, 0px));

	transform: translateY(var(--dnews-hide));
	transition-duration: var(--wp--custom--motion--hide);
	transition-timing-function: var(--wp--custom--motion--ease-hide);
}

@media (prefers-reduced-motion: reduce) {

	.dnews-header-wrap {
		transition: none;
	}
}

.dnews-header {
	--dnews-bar-h: 60px;

	color: var(--wp--preset--color--on-chrome);
}

@media (min-width: 1025px) {

	/*
	 * The bar keeps its 91px layout in every state. "Compact" is drawn with
	 * transforms only (background layer scaled to 59px, contents lifted 16px,
	 * logo scaled), so scrolling never changes layout and cannot shift
	 * anything: --dnews-lift is (91 - 59) / 2.
	 */
	.dnews-header {
		--dnews-bar-h: 91px;
		--dnews-lift: -16px;
		--dnews-bar-scale: calc(59 / 91);
	}
}

.dnews-header__bar {
	pointer-events: auto;
	background: var(--wp--preset--color--black);
	box-shadow: inset 0 -1px 0 var(--wp--custom--header-hairline), 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

@media (min-width: 1025px) {

	.dnews-header__bar {
		position: relative;
		isolation: isolate;
		background: none;
		box-shadow: none;
	}

	/*
	 * The bar box stays 91px, so only the parts that are really on screen take
	 * the pointer: the scaled background layer, the logo image, the item
	 * layers below, the actions and any open panel.
	 */
	.dnews-header__bar,
	.dnews-header ul.dnews-header__nav > .wp-block-navigation-item,
	.dnews-header__logo {
		pointer-events: none;
	}

	.dnews-header__bar::before,
	.dnews-header__logo img,
	.dnews-header__actions,
	.dnews-header ul.dnews-header__nav .wp-block-navigation__submenu-icon,
	.dnews-header ul.dnews-header__nav .wp-block-navigation__submenu-container,
	.dnews-header .dnews-mega__panel {
		pointer-events: auto;
	}

	/* The bar's paint is a layer: the compact bar is a scale, not a resize. */
	.dnews-header__bar::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--wp--preset--color--ink);
		box-shadow: inset 0 -1px 0 var(--wp--custom--header-hairline);
		transform-origin: 50% 0;
		transition:
			transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
			background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}

	/* Compact bar: soft shadow only while it floats over the content. */
	.dnews-header.is-condensed .dnews-header__bar::before {
		background: var(--wp--preset--color--charcoal);
		box-shadow:
			inset 0 -1px 0 var(--wp--custom--header-hairline),
			var(--wp--preset--shadow--header);
		transform: scaleY(var(--dnews-bar-scale));
	}
}

/* Mobile: three columns (hamburger, logo, search). Desktop: logo, menu,
 * actions. */
.dnews-header .dnews-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--dnews-bar-h);
	padding-block: 0;
}

.dnews-header .dnews-header__inner > * {
	margin: 0;
}

@media (min-width: 1025px) {

	.dnews-header .dnews-header__inner {
		display: flex;
		gap: 0;
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}

	.dnews-header.is-condensed .dnews-header__inner {
		transform: translateY(var(--dnews-lift));
	}
}

.dnews-header__logo {
	grid-column: 2;
	line-height: 0;
}

.dnews-header__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 40px;
}

@media (min-width: 1025px) {

	.dnews-header__logo {
		order: 1;
		margin-inline-end: var(--wp--preset--spacing--space-7);
	}

	.dnews-header__logo img {
		width: 230px;
		max-height: none;
		margin-top: 15px; /* Exempt from the spacing scale: logo geometry: the compact-bar transform assumes it. */
		transform-origin: 0 50%;
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}

	/* 150 / 230 = .652; the 7.4px lift centers the 37px logo in the 59px bar. */
	.dnews-header.is-condensed .dnews-header__logo img {
		transform: translateY(-7.4px) scale(0.652);
	}
}

.dnews-header__nav {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}

.dnews-header__actions {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-2);
}

@media (min-width: 1025px) {

	.dnews-header__nav {
		order: 2;
		flex: 1 1 auto;
		transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
	}

	/* Follows the logo's visual shrink (230 - 150), no layout box moves. */
	.dnews-header.is-condensed nav.dnews-header__nav {
		transform: translateX(-80px);
	}

	.dnews-header__actions {
		order: 3;
		gap: var(--wp--preset--spacing--space-4);
	}
}

.dnews-header .dnews-header__social {
	display: none;
}

/* The header toggle shows from 1025px; below that it lives in the drawer. */
.dnews-header .dnews-header__theme {
	display: none;
}

@media (min-width: 1025px) {

	.dnews-header .dnews-header__social {
		display: flex;
	}

	.dnews-header .dnews-header__theme {
		display: inline-flex;
	}
}

/* Below 1025px the menu always collapses into the hamburger; core only does so
 * under 600px. */
.dnews-header .dnews-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none;
}

.dnews-header .dnews-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: flex;
	padding: 10px; /* Exempt from the spacing scale: hit-area pair with the -10px margin. */
	margin-inline-start: -10px; /* Exempt from the spacing scale: hit-area pair with the padding. */
	color: var(--wp--preset--color--on-chrome);
}

@media (min-width: 1025px) {

	.dnews-header .dnews-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		position: relative;
		z-index: auto;
		width: 100%;
		background-color: transparent;
	}

	.dnews-header .dnews-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* Desktop menu items: bold uppercase, full bar height, soft hover fill. */
ul.dnews-header__nav.wp-block-navigation__container {
	gap: 0;
}

ul.dnews-header__nav .wp-block-navigation-item {
	box-sizing: border-box;
	height: var(--dnews-bar-h);
}

ul.dnews-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	height: auto;
}

ul.dnews-header__nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 var(--wp--preset--spacing--space-4);
	color: var(--wp--preset--color--on-chrome);
	line-height: var(--wp--custom--type--label--line-height);
	transition: background-color 0.2s;
}

ul.dnews-header__nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
ul.dnews-header__nav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
ul.dnews-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-chrome);
}

/*
 * Top-level items keep a 91px box in every state, so their tint, current-page
 * underline, focus ring and hit area are drawn on pseudo layers that scale
 * with the compact bar. The link itself ignores the pointer; its ::before is
 * the target.
 */
ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	isolation: isolate;
	pointer-events: none;
}

ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content::before,
ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	pointer-events: auto;
}

ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	inset: 0;
	z-index: -1;
	transform-origin: 0 0;
	transition:
		background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

ul.dnews-header__nav > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::before,
ul.dnews-header__nav > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::before,
ul.dnews-header__nav > .current-menu-item > .wp-block-navigation-item__content::before,
ul.dnews-header__nav > .dnews-mega.is-open > .wp-block-navigation-item__content::before {
	background: rgba(255, 255, 255, 0.05);
}

ul.dnews-header__nav > .dnews-mega.is-open > .dnews-mega__link {
	background: none;
}

/* Current page: the 3px accent bar sits on the bar's bottom edge. */
ul.dnews-header__nav > .current-menu-item {
	border-bottom: 0;
}

ul.dnews-header__nav > .current-menu-item > .wp-block-navigation-item__content::after {
	inset: auto 0 0;
	height: 3px;
	background: var(--wp--preset--color--accent);
	pointer-events: none;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* Keyboard ring on the scaled layer, not on the 91px box. */
ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	outline: 0;
}

ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::before {
	outline: 2px solid var(--wp--preset--color--badge);
	outline-offset: -2px;
}

.dnews-header.is-condensed ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	transform: translateY(16px) scaleY(var(--dnews-bar-scale));
}

.dnews-header.is-condensed ul.dnews-header__nav > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::before {
	outline-width: 3px;
}

.dnews-header.is-condensed ul.dnews-header__nav > .current-menu-item > .wp-block-navigation-item__content::after {
	transform: translateY(var(--dnews-lift));
}

/* Dropdown and mega panels hang from the compact bar's bottom edge. */
.dnews-header.is-condensed ul.dnews-header__nav .wp-block-navigation__submenu-container,
.dnews-header.is-condensed .dnews-mega__panel {
	transform: translateY(var(--dnews-lift));
}

ul.dnews-header__nav .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--accent);
}

/* Console dropdown: white panel under the item. */
ul.dnews-header__nav .wp-block-navigation__submenu-container {
	min-width: 15em;
	border: 0;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--menu);
	color: var(--wp--preset--color--text-strong);
}

ul.dnews-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	height: auto;
	padding: var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-4);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--ui);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: var(--wp--custom--type--meta--weight);
	letter-spacing: var(--wp--custom--type--meta--tracking);
	text-transform: none;
}

ul.dnews-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
ul.dnews-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--accent-text);
}

/* Mobile drawer: the open container dims the page, the overlay container is
 * the 320px panel. */
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
	background: rgba(0, 0, 0, 0.72);
	color: var(--wp--preset--color--text-strong);
}

.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-container-content {
	height: 100%;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__overlay-container {
	box-sizing: border-box;
	width: 320px;
	max-width: 100%;
	height: 100%;
	padding: var(--wp--preset--spacing--space-10) var(--wp--preset--spacing--space-5) var(--wp--preset--spacing--space-7);
	overflow-y: auto;
	background: var(--wp--preset--color--surface);
}

@media not (prefers-reduced-motion) {

	.wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__overlay-container {
		animation: dnews-drawer-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
}

@keyframes dnews-drawer-in {

	from {
		transform: translate3d(-100%, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

.dnews-overlay {
	position: relative;
}

.dnews-overlay .wp-block-navigation-overlay-close {
	position: absolute;
	top: -46px; /* Exempt from the spacing scale: close button position on the drawer panel. */
	right: -6px; /* Exempt from the spacing scale: close button position on the drawer panel. */
	display: flex;
	padding: 10px; /* Exempt from the spacing scale: hit-area pair with the -10px margin. */
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text-strong);
	cursor: pointer;
}

.dnews-overlay > * {
	margin-block: 0;
}

.dnews-overlay > * + * {
	margin-block-start: var(--wp--preset--spacing--space-5);
}

.dnews-overlay__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.dnews-overlay__nav .wp-block-navigation-item {
	flex-wrap: wrap;
	width: 100%;
}

.dnews-overlay__nav .wp-block-navigation-item__content {
	flex: 1;
	height: auto;
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--space-4);
	background: transparent;
	color: var(--wp--preset--color--text-strong);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: var(--wp--custom--type--label--weight);
	letter-spacing: var(--wp--custom--type--base--tracking);
	word-spacing: var(--wp--custom--type--heading--word-spacing);
	text-align: left;
	text-transform: none;
}

.dnews-overlay__nav .wp-block-navigation-item__content:hover,
.dnews-overlay__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-text);
}

.dnews-overlay__nav .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 0 var(--wp--preset--spacing--space-4);
	color: var(--wp--preset--color--text-strong);
}

.dnews-overlay__nav .wp-block-navigation__submenu-icon svg {
	transition: transform 0.2s;
}

.dnews-overlay__nav [aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

.dnews-overlay__nav .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	margin: 0 0 var(--wp--preset--spacing--space-3);
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.dnews-overlay__nav .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0 0 var(--wp--preset--spacing--space-3);
	margin: 0 0 var(--wp--preset--spacing--space-3);
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--type--base--weight);
	letter-spacing: var(--wp--custom--type--base--tracking);
}

.dnews-overlay__social {
	margin-block-start: var(--wp--preset--spacing--space-7);
}

/* Drawer polish: no underline on the current item, flat sub-list. */
.dnews-overlay__nav .wp-block-navigation__container .current-menu-item {
	border: 0;
}

.dnews-overlay__nav .wp-block-navigation__container .wp-block-navigation__submenu-container {
	border: 0;
}