/*
 * DNews base: layout tokens, page container, main/sidebar split, shared card
 * thumbnail, focus and reduced-motion rules. Loaded with the Group block,
 * which every page renders. Mobile-first: min-width queries only.
 */

/* Container steps replace the JNews 750 / 970 / 1170 container (Maya 2.4, 2.5,
 * 2.9). */

/*
 * Metric-matched fallbacks, so text laid out before a web font arrives wraps
 * and measures like the final text (no layout shift on the swap). Each family
 * has a regular and a bold face because Arial Bold is wider than synthesized
 * bold Arial. Widths measured in Chrome with canvas measureText on the
 * rendered site (ratio of the web font to Arial of the same weight, real card
 * titles for Plus Jakarta Sans and the text of post 1124 for Source Sans 3);
 * vertical metrics are the fonts' hhea values (fontTools) divided by
 * size-adjust: Plus Jakarta Sans 1038 / -222 / 0 on 1000 em, Source Sans 3
 * 1024 / -400 / 0 on 1000 em.
 *
 * Plus Jakarta Sans has three faces per weight band, split by unicode-range
 * (capitals, lowercase, everything else). Its capitals are narrower than
 * Arial's (about 98% over long titles, 101% over the all-caps navigation
 * words, which the bold face is tuned to), its lowercase wider (about 105%)
 * and its space and punctuation much narrower (about 79%). One size-adjust
 * could not match both all-caps labels and mixed-case titles (slow-font CLS
 * 0.0001 to 0.0004 with a single 100% face).
 */
@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	font-weight: 200 600;
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	unicode-range: U+0041-005A, U+00C0-00DE;
	size-adjust: 97.2%;
	ascent-override: 106.8%;
	descent-override: 22.8%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	font-weight: 200 600;
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	unicode-range: U+0061-007A, U+00DF-00FF;
	size-adjust: 109.8%;
	ascent-override: 94.5%;
	descent-override: 20.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	font-weight: 200 600;
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	unicode-range: U+0000-0040, U+005B-0060, U+007B-00BF, U+0100-FFFF;
	size-adjust: 73.2%;
	ascent-override: 141.8%;
	descent-override: 30.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	font-weight: 700 800;
	src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
	unicode-range: U+0041-005A, U+00C0-00DE;
	size-adjust: 101%;
	ascent-override: 102.8%;
	descent-override: 22%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	font-weight: 700 800;
	src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
	unicode-range: U+0061-007A, U+00DF-00FF;
	size-adjust: 104.6%;
	ascent-override: 99.2%;
	descent-override: 21.2%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Plus Jakarta Sans Fallback";
	font-weight: 700 800;
	src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
	unicode-range: U+0000-0040, U+005B-0060, U+007B-00BF, U+0100-FFFF;
	size-adjust: 78.9%;
	ascent-override: 131.6%;
	descent-override: 28.1%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Sans 3 Fallback";
	font-weight: 200 600;
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 93%;
	ascent-override: 110.1%;
	descent-override: 43%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Sans 3 Fallback";
	font-weight: 700 900;
	src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
	size-adjust: 91.7%;
	ascent-override: 111.7%;
	descent-override: 43.6%;
	line-gap-override: 0%;
}

/*
 * Native form controls ignore inherited type by default and fall back to the
 * system face (Arial, 13.33px). Inherit it so back-to-top, mega menu arrows,
 * overlay close, submenu toggles, search fields and the YouTube play button
 * use the token stack. Type selectors only, so any class rule still wins.
 */
button,
input,
select,
textarea {
	font: inherit;
}

:root {
	--dnews-gutter: var(--wp--preset--spacing--space-4);
	--dnews-container: 100%;
	--dnews-inner: 100%;
	--dnews-stack: var(--wp--preset--spacing--space-7);
}

@media (min-width: 480px) {

	:root {
		--dnews-gutter: var(--wp--preset--spacing--space-5);
	}
}

@media (min-width: 768px) {

	:root {
		--dnews-gutter: var(--wp--preset--spacing--space-4);
		--dnews-container: 752px;
		--dnews-inner: 720px;
		--wp--style--global--wide-size: 720px;
		--wp--style--global--content-size: 720px;
	}
}

@media (min-width: 992px) {

	:root {
		--dnews-container: 972px;
		--dnews-inner: 940px;
		--wp--style--global--wide-size: 940px;
		--wp--style--global--content-size: 616px;
	}
}

@media (min-width: 1200px) {

	:root {
		--dnews-container: 1172px;
		--dnews-inner: 1140px;
		--wp--style--global--wide-size: 1140px;
		--wp--style--global--content-size: 750px;
	}
}

/* Header, main and footer sit flush against each other. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.dnews-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--dnews-container);
	margin-inline: auto;
	padding-inline: var(--dnews-gutter);
}

.dnews-main {
	padding-block: var(--wp--preset--spacing--space-5) var(--wp--preset--spacing--space-7);
}

@media (min-width: 768px) {

	.dnews-main {
		padding-block: var(--wp--preset--spacing--space-7) var(--wp--preset--spacing--space-8);
	}
}

/* Children of layout wrappers manage their own spacing. */
.dnews-container.dnews-page > *,
.dnews-split .dnews-split__main > * {
	margin-block: 0;
}

.dnews-container.dnews-page > * + *,
.dnews-split .dnews-split__main > * + * {
	margin-block-start: var(--dnews-stack);
}

/*
 * The home carousel (dnews/carousel) sits flush at the top of the page and
 * carries its own 40px gap before the list.
 */
.dnews-container.dnews-page > .dnews-carousel {
	margin-block: 0 var(--wp--preset--spacing--space-9);
}

.dnews-container.dnews-page > .dnews-carousel + .dnews-split {
	margin-block-start: 0;
}

/* Main + sidebar split: home and single from 992px, archives, search, 404 and
 * pages from 767px. */
.dnews-split {
	display: grid;
	gap: var(--wp--preset--spacing--space-8);
}

.dnews-split.dnews-split > * {
	min-width: 0;
	margin-block: 0;
}

@media (min-width: 992px) {

	.dnews-split:not(.dnews-split--archive) {
		grid-template-columns: calc(66.667% - 10px) calc(33.333% - 35px);
		justify-content: space-between;
	}
}

@media (min-width: 767px) {

	.dnews-split--archive {
		grid-template-columns: calc(66.667% - 10px) calc(33.333% - 35px);
		justify-content: space-between;
	}
}

/*
 * Sticky sidebar: sits 20px under the compact header (59px) and moves up to
 * 20px when header.js hides the header (is-header-hidden on <html>). The
 * property switches without a transition: top is a layout property.
 */
:root {
	--dnews-header-offset: 59px;
}

:root.is-header-hidden {
	--dnews-header-offset: 0px;
}

@media (min-width: 992px) {

	.dnews-split__aside {
		--dnews-admin: var(--wp-admin--admin-bar--height, 0px);
		--dnews-aside-base: calc(var(--dnews-header-offset) + var(--dnews-admin));

		position: sticky;
		top: calc(var(--dnews-aside-base) + var(--wp--preset--spacing--space-5));
		align-self: start;
	}
}

/* Anchors and focused elements land below the compact header + 12px. */
html {
	--dnews-scroll-pad: 72px;
	--dnews-admin: var(--wp-admin--admin-bar--height, 0px);

	scroll-padding-top: calc(var(--dnews-scroll-pad) + var(--dnews-admin));
}

/*
 * From 1025px the full bar is 91px until the header turns compact (59px, set
 * by header.js past 120px), so targets near the top need the larger offset.
 */
@media (min-width: 1025px) {

	html {
		--dnews-scroll-pad: 103px;
	}

	html:has(.dnews-header.is-condensed) {
		--dnews-scroll-pad: 71px;
	}
}

/* Sidebar widgets are 40px apart. */
.dnews-sidebar.dnews-sidebar > * {
	margin-block: 0;
}

.dnews-sidebar.dnews-sidebar > .dnews-widget + .dnews-widget {
	margin-block-start: var(--wp--preset--spacing--space-8);
}

/* Empty placeholder groups (trackers, optional fields) take no space. */
.dnews-main .wp-block-group:empty {
	display: none;
}

/* Card thumbnail: skeleton box in the final ratio, image fills it. */
.dnews-thumb {
	position: relative;
	overflow: hidden;
	margin: 0 0 var(--wp--preset--spacing--space-3);
	border-radius: var(--wp--custom--radius--image);
	background: var(--wp--preset--color--skeleton);
}

.dnews-thumb .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

/*
 * Two classes plus the tag: core's `.wp-block-post-featured-image img` sets
 * height: auto at one class, and the image must fill the ratio box, not keep
 * its own ratio (which left a gap or cropped the bottom).
 */
.dnews-thumb .wp-block-post-featured-image img,
.dnews-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Card hover: the image zooms inside its clipped, fixed-ratio box (transform
 * only, no layout change) and the title turns accent. Zoom is off for
 * reduced-motion users.
 */
.dnews-card__title a {
	transition: color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.dnews-card:hover .dnews-card__title a {
	color: var(--wp--preset--color--accent-text);
}

@media (prefers-reduced-motion: no-preference) {

	.dnews-thumb img {
		transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
	}

	.dnews-card:hover .dnews-thumb img {
		transform: scale(var(--wp--custom--motion--zoom));
	}
}

/* Buttons fill on hover (theme.json sets the colors). */
.wp-element-button {
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* Visible keyboard focus: JNews removed every outline. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 2px;
}

/* Cards get a wider offset so the ring clears the rounded image. */
.dnews-card :focus-visible {
	outline-offset: 3px;
}

/*
 * The thumbnail box clips overflow, which would cut a ring drawn on the image
 * link. The ring moves to the box itself (outlines are not clipped by the
 * element's own overflow) and follows its rounded corners.
 */
.dnews-thumb a:focus-visible {
	outline: 0;
}

.dnews-thumb:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--heading);
	outline-offset: 3px;
}

/* Skip link: core paints it #eee, which hid the ring and clashed in dark. */
body .skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--surface-muted);
	color: var(--wp--preset--color--heading);
}

/* Pressed state: one step darker than hover. */
.wp-element-button:active,
.wp-block-read-more:active {
	filter: var(--wp--custom--state--active);
}

.dnews-header :focus-visible,
.dnews-footer :focus-visible,
.dnews-overlay :focus-visible {
	outline-color: var(--wp--preset--color--badge);
}

/* The header's dropdown and mega panels are white: the ring stays dark. */
.dnews-header .dnews-mega__panel :focus-visible,
.dnews-header .wp-block-navigation__submenu-container :focus-visible {
	outline-color: var(--wp--preset--color--heading);
}

.dnews-overlay :focus-visible {
	outline-color: var(--wp--preset--color--heading);
}

/* Archive, search, page and 404 headings. */
.dnews-archive__title.dnews-archive__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--title-archive);
	font-weight: var(--wp--custom--type--title-archive--weight);
	line-height: var(--wp--custom--type--title-archive--line-height);
	letter-spacing: var(--wp--custom--type--title-archive--tracking);
	word-spacing: var(--wp--custom--type--title-archive--word-spacing);
}

.dnews-archive__description:empty {
	display: none;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Archive head: title, optional description, then the list 40px below. */
.dnews-split .dnews-split__main > .dnews-archive__description {
	margin-block-start: var(--wp--preset--spacing--space-3);
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--base);
}

.dnews-split .dnews-split__main > .dnews-list {
	margin-block-start: var(--wp--preset--spacing--space-8);
}

.dnews-split .dnews-split__main > .dnews-breadcrumbs,
.dnews-container.dnews-page > .dnews-breadcrumbs {
	margin-block-end: var(--wp--preset--spacing--space-5);
}