/*
 * The Draft — styles theme.json cannot express: named block styles,
 * focus and motion handling, and a few newsroom layout details.
 */

/* ---------- Accessibility baseline ---------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Dark (ink) backgrounds: WCAG AA contrast ----------
 * Draft red (3.1:1) and muted grey (2.8:1) fail on ink, so text in those
 * colours switches to its on-dark preset: accent-on-dark (8.2:1) and
 * mist (11:1). Preset colour classes are !important, hence the overrides.
 */

.has-ink-background-color .is-style-kicker,
.has-ink-background-color .wp-block-post-terms,
.has-ink-background-color .has-accent-color {
	color: var(--wp--preset--color--accent-on-dark) !important;
}

.has-ink-background-color .wp-block-post-date,
.has-ink-background-color .wp-element-caption,
.has-ink-background-color .the-draft-meta-sep,
.has-ink-background-color .has-muted-color {
	color: var(--wp--preset--color--mist) !important;
}

/* ---------- Paragraph styles ---------- */

.is-style-kicker {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.is-style-breaking {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	padding: 0.3em 0.6em;
	text-transform: uppercase;
}

.is-style-byline {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.is-style-byline strong {
	color: var(--wp--preset--color--ink);
}

.is-style-standfirst {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

/* ---------- Heading / group styles ---------- */

/* A heading at its correct level (h2 in the footer) with a small label look. */
.wp-block-heading.is-style-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Menu | title | Subscribe: equal outer columns keep the title centred. */
@media (min-width: 782px) {
	.the-draft-masthead > .wp-block-group {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
	}

	.the-draft-masthead > .wp-block-group > .wp-block-buttons {
		justify-self: end;
	}
}

/* ---------- Masthead menu: a "Menu" button that opens a full-screen overlay ---------- */

.is-style-overlay-menu .wp-block-navigation__responsive-container-open {
	align-items: center;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.55em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Three-line glyph ahead of the word. */
.is-style-overlay-menu .wp-block-navigation__responsive-container-open::before {
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	border-block: 2px solid currentColor;
	content: "";
	height: 0.8em;
	width: 1.15em;
}

.is-style-overlay-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.is-style-overlay-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--20);
	margin-inline: auto;
	max-width: 720px;
	padding-top: var(--wp--preset--spacing--60);
	width: 100%;
}

.is-style-overlay-menu .is-menu-open .wp-block-navigation__container {
	gap: 0.15em;
	width: 100%;
}

.is-style-overlay-menu .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-transform: none;
}

.is-style-overlay-menu .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-on-dark);
}

/* The last three links are utility links: smaller, mono, set apart. */
.is-style-overlay-menu .is-menu-open .wp-block-navigation-item:nth-last-child(3) {
	border-top: 1px solid var(--wp--preset--color--stone);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
}

.is-style-overlay-menu .is-menu-open .wp-block-navigation-item:nth-last-child(-n+3) .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.is-style-overlay-menu .is-menu-open .wp-block-search {
	margin-bottom: var(--wp--preset--spacing--40);
	width: 100%;
}

.is-style-overlay-menu .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.is-style-overlay-menu .is-menu-open .wp-block-search__inside-wrapper {
	background: transparent !important; /* Core paints the search wrapper white. */
	border: 2px solid var(--wp--preset--color--paper);
	width: 100% !important;
}

.is-style-overlay-menu .is-menu-open .wp-block-search__input {
	background: transparent !important;
	border: 0;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--medium);
}

.is-style-overlay-menu .is-menu-open .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--mist);
}

.is-style-overlay-menu .is-menu-open .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	/* Menu | nameplate | Subscribe on one row. */
	.the-draft-masthead > .wp-block-group {
		gap: var(--wp--preset--spacing--20);
	}

	.the-draft-masthead .wp-block-button__link {
		padding: 0.55em 0.75em;
	}
}

/* Section headings: big display type over a hairline, not a small-caps label. */
.is-style-section-rule {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	padding-bottom: 0.3em;
}

.is-style-section-rule a {
	text-decoration: none;
}

.is-style-section-rule a:hover {
	color: var(--wp--preset--color--accent);
}

.is-style-card {
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--40);
}

.is-style-rule-top {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-post-terms.is-style-pill a {
	border: 1px solid currentColor;
	border-radius: 999px;
	display: inline-block;
	padding: 0.15em 0.7em;
}

.wp-block-post-terms.is-style-pill {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.wp-block-post-terms.is-style-pill .wp-block-post-terms__separator {
	display: none;
}

/* ---------- Story lists ---------- */

.is-style-story-list .wp-block-post-template > li + li {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-post-featured-image img {
	background: var(--wp--preset--color--surface);
}

.wp-block-post-template .wp-block-post-featured-image img {
	border-radius: 4px;
}

/* ---------- Header ---------- */

/* The nameplate: reversed out of a slightly skewed ink block. */
.the-draft-masthead .wp-block-site-title {
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.5rem);
}

.the-draft-masthead .wp-block-site-title a {
	background: var(--wp--preset--color--ink);
	clip-path: polygon(0 8%, 100% 0, 99% 100%, 1% 92%);
	color: var(--wp--preset--color--white);
	display: inline-block;
	padding: 0.2em 0.45em 0.16em;
}

.the-draft-dateline {
	color: var(--wp--preset--color--mist); /* Sits on the ink top bar: muted grey would be 2.8:1. */
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.the-draft-navbar {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.the-draft-navbar .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Divided columns and grids ---------- */

@media (min-width: 782px) {
	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--rule);
		padding-left: var(--wp--preset--spacing--40);
	}

	/* Grid rules sit in the gap, so every card keeps the same width. */
	.is-style-divided > .wp-block-post-template.is-layout-grid > li {
		position: relative;
	}

	.is-style-divided > .wp-block-post-template.is-layout-grid > li + li::before {
		border-left: 1px solid var(--wp--preset--color--rule);
		bottom: 0;
		content: "";
		left: calc(var(--wp--style--block-gap, 1.5rem) / -2);
		position: absolute;
		top: 0;
	}
}

/* ---------- Front page hero: stack | lead | headlines ---------- */

.wp-block-heading.is-style-list-title {
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-weight: 300;
	letter-spacing: -0.02em;
	margin-bottom: var(--wp--preset--spacing--30);
}

.is-style-front .wp-block-post-title {
	text-wrap: balance;
}

/* The lead shares the row, so it steps down from the full display size. */
.is-style-front > .wp-block-column:nth-child(1) .wp-block-post-title {
	font-size: clamp(2.25rem, 1.25rem + 2.4vw, 3.5rem) !important;
	line-height: 1.02;
}

.is-style-front .wp-block-post-author-name,
.is-style-front .wp-block-post-date {
	font-size: var(--wp--preset--font-size--xx-small);
}

@media (min-width: 782px) {
	/* The lead is first in the markup so it leads on phones. */
	.wp-block-columns.is-style-front > .wp-block-column:nth-child(1) {
		border-inline: 1px solid var(--wp--preset--color--rule);
		order: 2;
		padding-inline: var(--wp--preset--spacing--40);
	}

	.wp-block-columns.is-style-front > .wp-block-column:nth-child(2) {
		order: 1;
	}

	.wp-block-columns.is-style-front > .wp-block-column:nth-child(3) {
		order: 3;
	}
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-front > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--ink);
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ---------- Slanted band ---------- */

.wp-block-group.is-style-slant {
	clip-path: polygon(0 3.5vw, 58% 1.4vw, 100% 0, 100% calc(100% - 2.8vw), 64% 100%, 0 calc(100% - 1.2vw));
}

.wp-block-group.is-style-slant .wp-block-heading {
	letter-spacing: -0.04em;
}

/* Focus rings would vanish into a Draft red band. */
.has-accent-background-color :focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* ---------- Pill buttons ---------- */

.wp-block-button.is-style-pill .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	letter-spacing: -0.02em;
	padding: 0.15em 0.65em 0.2em;
	text-transform: none;
}

.wp-block-button.is-style-pill .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--accent);
}

/* ---------- Photo essay ---------- */

.is-style-full-caption figcaption {
	border-left: 3px solid var(--wp--preset--color--accent);
	margin-top: 0.6em;
	padding-left: 0.75em;
	text-align: left;
}

.single-photo-essay .wp-block-post-content > .wp-block-image {
	margin-block: var(--wp--preset--spacing--60);
}

/* ---------- Section landing: first story leads ---------- */

.the-draft-section .wp-block-post-template > li:first-child {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.the-draft-section .wp-block-post-template > li:first-child > .wp-block-group {
		align-items: center;
		display: grid;
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: 3fr 2fr;
	}

	.the-draft-section .wp-block-post-template > li:first-child .wp-block-post-featured-image {
		grid-row: 1 / span 5;
	}

	.the-draft-section .wp-block-post-template > li:first-child .wp-block-post-title {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 781px) {
	.the-draft-hide-mobile {
		display: none !important;
	}
}

/* ---------- Story meta ---------- */

.the-draft-post-meta {
	padding-block: var(--wp--preset--spacing--20);
}

/* WordPress renders no modified date when a story was never updated; hide the label too. */
.the-draft-updated:not(:has(.wp-block-post-date)) {
	display: none;
}

.the-draft-post-meta .wp-block-co-authors-plus-coauthors a {
	text-decoration: none;
}

.wp-block-co-authors-plus-avatar img {
	border-radius: 50%;
}

/* ---------- Live coverage (Automattic Liveblog) ---------- */

.liveblog-feed {
	margin-top: var(--wp--preset--spacing--40);
}

.liveblog-entry {
	border-left: 3px solid var(--wp--preset--color--rule);
	display: grid;
	gap: 0 var(--wp--preset--spacing--40);
	grid-template-columns: 9rem 1fr;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--30);
}

.liveblog-entry.is-key-event {
	border-left-color: var(--wp--preset--color--live);
}

.liveblog-entry-aside,
.liveblog-meta-time,
.liveblog-meta-time a,
.liveblog-meta-author-name {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
}

.liveblog-meta-time a:first-child,
.liveblog-meta-time > :first-child {
	color: var(--wp--preset--color--live);
	display: block;
	font-weight: 700;
}

.liveblog-meta-author {
	align-items: center;
	display: flex;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.liveblog-meta-author-avatar img {
	border-radius: 50%;
	height: 24px;
	width: 24px;
}

.liveblog-entry-content > :first-child {
	margin-top: 0;
}

.liveblog-pagination {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	gap: 0.5rem;
	justify-content: space-between;
	margin-block: var(--wp--preset--spacing--30);
}

.liveblog-btn {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font: inherit;
	padding: 0.35em 0.9em;
}

.liveblog-btn--hide {
	visibility: hidden;
}

.liveblog-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.liveblog-event {
	border-left: 2px solid var(--wp--preset--color--live);
	margin-bottom: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--30);
}

.liveblog-event-meta {
	color: var(--wp--preset--color--live);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 700;
	text-transform: uppercase;
}

.liveblog-event-content {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

@media (max-width: 781px) {
	.liveblog-entry {
		grid-template-columns: 1fr;
	}
}

/* ---------- Newsroom block lists (the-draft-core) in the theme's type ---------- */

.the-draft-story__title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.the-draft-story__title:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.the-draft-story__section,
.the-draft-ad__label,
.the-draft-house-ad__cta {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.the-draft-stories.is-layout-numbered .the-draft-story::before {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 2rem;
	font-weight: 800;
}