/*
 * EBdT2 — styles that theme.json cannot express.
 * Mobile-first: base rules are for phones (375px); wider screens use min-width.
 *
 * 0. White article sheet
 * 1. Old (classic editor) articles: images, captions, alignments, embeds
 * 2. Article cards (home, categories, search)
 * 3. Header
 * 4. Footer
 * 5. Accessibility helpers
 */

/* ------------------------------------------------- 0. Article sheet --- */

/*
 * Articles and pages sit on a white sheet so photos with a white background
 * blend in. Phones: edge to edge. Wider screens: a rounded sheet on cream.
 */
/* WordPress's layout centres children with !important margins, so these need it too. */
.ebdt2-sheet {
	margin-left: calc(var(--wp--style--root--padding-left, 1rem) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 1rem) * -1) !important;
	padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-left, 1rem);
}

@media (min-width: 48em) {

	.ebdt2-sheet {
		max-width: calc(var(--wp--style--global--content-size, 42rem) + 5rem);
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: var(--wp--preset--spacing--40);
		padding-inline: 2.5rem;
		border-radius: 12px;
		box-shadow: 0 1px 3px var(--ebdt2-shadow);
	}

	.ebdt2-sheet .alignwide {
		max-width: 100%;
	}
}

/* ------------------------------------------------ 1. Classic articles --- */

.entry-content img,
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* Captions written by the old editor: [caption] → .wp-caption */
.wp-block-post-content .wp-caption {
	max-width: 100% !important; /* the old editor writes a fixed pixel width inline */
	width: auto !important;
	margin-block: 1.75rem;
}

.wp-block-post-content .wp-caption img {
	display: block;
	width: 100%;
	border-radius: 6px;
}

.wp-block-post-content .wp-caption-text,
.wp-block-post-content .wp-caption-dd {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.45;
}

/*
 * Photos are always centred (owner's rule), whatever alignment the article
 * was written with. Several photos in one paragraph stay side by side,
 * centred as a group; on a phone they wrap onto separate lines.
 */
.wp-block-post-content .aligncenter,
.wp-block-post-content .alignnone,
.wp-block-post-content .alignleft,
.wp-block-post-content .alignright {
	float: none;
	margin-inline: auto;
}

.wp-block-post-content :is(.wp-caption, figure, img.aligncenter, img.alignnone, img.alignleft, img.alignright),
.wp-block-post-content > img {
	display: block;
	margin-inline: auto;
}

.wp-block-post-content p:has(> img, > a > img) {
	text-align: center !important;
}

.wp-block-post-content p > img,
.wp-block-post-content p > a > img {
	display: inline-block;
	max-width: calc(100% - 0.5rem);
	margin: 0.25rem;
	vertical-align: middle;
	border-radius: 6px;
}

/* A photo alone in its paragraph: full column width, centred. */
.wp-block-post-content p > img:only-child,
.wp-block-post-content p > a:only-child > img {
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

.wp-block-post-content .wp-caption-text,
.wp-block-post-content figcaption {
	text-align: center;
}

/* Videos and podcast players pasted as <iframe> in old articles. */
.wp-block-post-content iframe {
	display: block;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
}

.wp-block-post-content iframe[src*="youtube.com"],
.wp-block-post-content iframe[src*="youtube-nocookie.com"],
.wp-block-post-content iframe[src*="vimeo.com"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
}

.wp-block-post-content iframe[src*="spotify.com"] {
	width: 100%;
}

/* Jetpack wraps some YouTube videos in .video-container */
.wp-block-post-content .video-container,
.wp-block-post-content .embed-youtube {
	position: static;
	height: auto;
	padding: 0;
	margin-block: 1.75rem;
}

/* Wide tables scroll sideways instead of breaking the page on phones. */
.wp-block-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-content th,
.wp-block-post-content td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
}

/*
 * Old articles carry their own formatting typed into the editor, e.g.
 * <p style="font-family: Arial; font-size: 16px; text-align: justify">.
 * The owner's rule: same font and size (>= 18px) for every reader, so the
 * theme overrides those three properties. Centred text, bold and italics stay.
 * Justified text is switched to left-aligned: on narrow phone columns it
 * leaves large gaps between words.
 */
.wp-block-post-content [style*="font-family"] {
	font-family: inherit !important;
}

.wp-block-post-content :is(p, li, span, div, td, th, blockquote, strong, em, a)[style*="font-size"] {
	font-size: inherit !important;
}

.wp-block-post-content .wp-caption-text [style*="font-size"] {
	font-size: inherit !important;
}

.wp-block-post-content [style*="justify"] {
	text-align: left !important;
}

/* Long words and links (URLs) must not push the page wider than the phone. */
.wp-block-post-content :is(p, li, td, th, a) {
	overflow-wrap: break-word;
}

.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ----------------------------------------------------- 2. Card grid --- */

.ebdt2-cards > li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-bottom: 1.25rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
}

.ebdt2-cards > li > :not(.wp-block-post-featured-image) {
	margin: 0;
	padding-inline: 1rem;
}

.ebdt2-cards .wp-block-post-featured-image {
	margin: 0;
}

.ebdt2-cards .wp-block-post-featured-image img {
	border-radius: 0;
}

.ebdt2-cards .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.ebdt2-cards .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.ebdt2-cards .wp-block-post-date {
	margin-top: auto;
}

/* Whole card is clickable through the title link, without extra markup. */
.ebdt2-cards > li {
	position: relative;
}

.ebdt2-cards .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ebdt2-cards .wp-block-post-terms a {
	position: relative;
	z-index: 1;
}

/* One clear outline around the card for keyboard users; none after a tap. */
.ebdt2-cards .wp-block-post-title a:focus {
	outline: none;
}

.ebdt2-cards > li:has(.wp-block-post-title a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Related posts at the end of an article: compact cards (no summary).
 * Phones: photo on the left, title on the right. Wider: 3 small cards. */
.ebdt2-related {
	margin-top: var(--wp--preset--spacing--40);
}

.ebdt2-related > .wp-block-heading {
	margin-bottom: 1rem;
}

.ebdt2-cards--compact .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
}

@media (max-width: 47.99em) {

	.ebdt2-cards--compact > li {
		display: grid;
		grid-template-columns: 7.5rem 1fr;
		grid-template-rows: auto 1fr auto;
		column-gap: 0.85rem;
		row-gap: 0.25rem;
		padding: 0.75rem 0.85rem 0.75rem 0;
	}

	.ebdt2-cards--compact > li > .wp-block-post-featured-image {
		grid-row: 1 / span 3;
		align-self: stretch;
	}

	.ebdt2-cards--compact > li > .wp-block-post-featured-image img {
		height: 100% !important;
	}

	.ebdt2-cards--compact > li > :not(.wp-block-post-featured-image) {
		padding-inline: 0;
	}

	/* Cards without any picture: text uses the full width. */
	.ebdt2-cards--compact > li:not(:has(.wp-block-post-featured-image)) {
		grid-template-columns: 1fr;
		padding-left: 0.85rem;
	}
}

/* Access labels on cards: «Para suscriptores» (paid) and «Registro gratuito» (free). */
.ebdt2-card-labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
}

.ebdt2-card-labels .wp-block-post-terms {
	margin: 0;
	padding: 0 !important;
}

.ebdt2-access {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
}

.ebdt2-access--paid {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

.ebdt2-access--free {
	border: 1px solid var(--wp--preset--color--accent-text);
	color: var(--wp--preset--color--accent-text);
}

.ebdt2-reading-time {
	white-space: nowrap;
}

/*
 * Lead story: on the first page of the home page, the newest post spans the
 * whole width. From 48em: photo on the left, text on the right.
 */
.home:not(.paged) .ebdt2-cards > li:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
}

@media (min-width: 48em) {

	.home:not(.paged) .ebdt2-cards > li:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 3fr 2fr;
		grid-template-rows: auto auto auto 1fr auto;
		column-gap: 1.5rem;
		align-content: start;
		padding-bottom: 0;
	}

	.home:not(.paged) .ebdt2-cards > li:first-child > .wp-block-post-featured-image {
		grid-row: 1 / -1;
		height: 100%;
	}

	.home:not(.paged) .ebdt2-cards > li:first-child > .wp-block-post-featured-image img {
		height: 100% !important;
		aspect-ratio: auto !important;
	}

	.home:not(.paged) .ebdt2-cards > li:first-child > :not(.wp-block-post-featured-image) {
		padding-inline: 0 1.5rem;
	}

	.home:not(.paged) .ebdt2-cards > li:first-child > :nth-child(2) {
		margin-top: 1.5rem;
	}

	.home:not(.paged) .ebdt2-cards > li:first-child > :last-child {
		margin-bottom: 1.5rem;
	}
}

/* --------------------------------------------------------- 3. Header --- */

.ebdt2-header {
	border-bottom: 1px solid rgba(243, 239, 229, 0.15);
}

/* Paid subscribers get the amber frame (the bar above is amber too). */
/* Paid subscribers: the amber band right below the header is the frame. */
.ebdt2-paid .ebdt2-header {
	border-bottom-color: transparent;
}

/*
 * Tablets (600–999px): the menu needs about 775px for one line, so tablets
 * keep the phone layout (logo left, search and ☰ right) instead of a menu
 * wrapping onto two lines. WordPress would show the full menu from 600px.
 */
@media (min-width: 600px) and (max-width: 999.98px) {

	.ebdt2-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ebdt2-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * From 1000px: logo centred on its own row, menu centred on one line below,
 * search at the end of the menu.
 */
@media (min-width: 1000px) {

	.ebdt2-header > .wp-block-group {
		flex-direction: column;
		align-items: center !important;
		gap: 0.5rem;
	}

	.ebdt2-header .ebdt2-tools {
		flex-direction: row-reverse;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.ebdt2-header .ebdt2-logo img {
		max-width: 200px;
	}
}

/* ------------------------------------------------- Account bar (top) --- */

/*
 * Visitors: Acceder + Suscríbete. Free readers: Mi cuenta, Salir, Suscríbete.
 * Paid subscribers: amber band with the badge «Suscriptor». Always visible,
 * also on phones, without opening the menu.
 */
.ebdt2-accountbar {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
	border-bottom: 1px solid rgba(243, 239, 229, 0.15);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.ebdt2-accountbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	max-width: 72rem;
	min-height: 44px;
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1rem);
}

.ebdt2-accountbar__links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ebdt2-accountbar a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.6rem;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.ebdt2-accountbar a:hover {
	text-decoration: underline;
}

.ebdt2-accountbar a.ebdt2-accountbar__cta {
	min-height: 38px;
	margin-left: 0.25rem;
	padding-inline: 0.9rem;
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

.ebdt2-accountbar__badge {
	margin-right: auto;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.ebdt2-accountbar--paid {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	border-bottom-color: transparent;
}

.ebdt2-header .wp-block-site-title a {
	color: inherit;
}

.ebdt2-header .wp-block-navigation__responsive-container-open,
.ebdt2-header .wp-block-search__button {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.ebdt2-header .wp-block-search__button {
	background: transparent;
	color: inherit;
	border: 0;
	padding: 0;
}

.ebdt2-header .wp-block-search__button svg {
	fill: currentColor;
}

.ebdt2-logo img {
	display: block;
	height: auto;
	max-width: min(180px, 48vw);
}

/* Mobile menu (full-screen overlay): left-aligned, big tap targets, submenus indented. */
.ebdt2-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1rem var(--wp--style--root--padding-left, 1rem) 2rem;
}

.ebdt2-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 3.5rem;
}

.ebdt2-header .is-menu-open .wp-block-navigation__container,
.ebdt2-header .is-menu-open .wp-block-navigation-item {
	align-items: stretch !important;
	width: 100%;
	gap: 0 !important;
}

.ebdt2-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.8rem 0 !important;
	border-bottom: 1px solid rgba(243, 239, 229, 0.15);
	font-size: var(--wp--preset--font-size--medium);
	text-align: left;
}

.ebdt2-header .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0 1.25rem !important;
	gap: 0 !important;
}

.ebdt2-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/*
 * Folding groups (only when assets/js/menu.js runs; without it, groups stay open).
 * The arrow button sits at the right of its item, 48px square.
 */
.ebdt2-menu-js .ebdt2-header .is-menu-open .has-child {
	position: relative;
}

.ebdt2-menu-js .ebdt2-header .is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none !important;
}

.ebdt2-menu-js .ebdt2-header .is-menu-open .has-child.ebdt2-open > .wp-block-navigation__submenu-container {
	display: flex !important;
}

.ebdt2-menu-js .ebdt2-header .is-menu-open .has-child > .wp-block-navigation-item__content {
	padding-right: 3.5rem !important;
}

.ebdt2-menu-js .ebdt2-header .is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex !important;
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ebdt2-menu-js .ebdt2-header .is-menu-open .wp-block-navigation-submenu__toggle svg {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.ebdt2-menu-js .ebdt2-header .is-menu-open .ebdt2-open > .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

/* «Desde 2010 · N visitas» under the logo (Jetpack Blog Stats). */
/* Phones: the logo column may shrink; search, ☰ and the mode button never do. */
.ebdt2-brand {
	min-width: 0;
}

.ebdt2-header .ebdt2-tools {
	flex-shrink: 0;
}

.ebdt2-since {
	color: var(--wp--preset--color--cream);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0.9;
}

.ebdt2-since p,
.ebdt2-since .jetpack-blog-stats {
	margin: 0;
}

.ebdt2-since .jetpack-blog-stats p::before {
	content: "· ";
}

/* No number (Jetpack not connected): hide the whole line. */
.ebdt2-since:not(:has(.jetpack-blog-stats)) {
	display: none !important;
}

@media (min-width: 1000px) {

	.ebdt2-brand {
		align-items: center !important;
	}
}

/* Bottom section: email subscription and recent comments, before the footer. */
/* Two cards: stacked on phones, side by side from 48em. */
.ebdt2-prefooter__grid {
	grid-template-columns: 1fr !important;
	gap: 1.25rem;
}

@media (min-width: 48em) {

	.ebdt2-prefooter__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

.ebdt2-box {
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--paper);
}

.ebdt2-box > .wp-block-heading {
	margin-top: 0;
}

.ebdt2-box .wp-block-latest-comments {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.ebdt2-box .wp-block-latest-comments__comment {
	margin: 0 0 0.85rem;
	line-height: 1.45;
}

.ebdt2-box .wp-block-latest-comments__comment-meta {
	color: var(--wp--preset--color--muted);
}

.ebdt2-box .wp-block-latest-comments__comment-link {
	color: var(--ebdt2-link);
	font-weight: 650;
}

/* Jetpack subscribe form: big field and the theme's amber button. */
.wp-block-jetpack-subscriptions__form-elements {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.wp-block-jetpack-subscriptions #subscribe-email,
.wp-block-jetpack-subscriptions #subscribe-submit {
	margin: 0;
}

.wp-block-jetpack-subscriptions #subscribe-email {
	flex: 1 1 14rem;
}

.wp-block-jetpack-subscriptions input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.85rem !important;
	border: 1px solid var(--wp--preset--color--border-strong) !important;
	border-radius: 6px !important;
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-size: 1rem !important;
}

.wp-block-jetpack-subscriptions button[type="submit"] {
	min-height: 48px;
	padding: 0.6rem 1.3rem !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--navy) !important;
	font-size: 1rem !important;
	font-weight: 700;
	cursor: pointer;
}

/* --------------------------------------------------------- 4. Footer --- */

/* On short pages (404, empty search) keep the footer at the bottom of the screen. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.ebdt2-footer a {
	color: inherit;
}

.ebdt2-social .wp-social-link a {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* -------------------------------------------------- 5. Accessibility --- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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

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

/* -------------------------------------------------- 6. Plugin boxes --- */

/*
 * wpDiscuz (comments). Its own CSS breaks the rating title in the middle of a
 * word («artícul / o», word-break: break-all) and writes the comment counter
 * in capitals. Owner's rules: whole words, no all-capitals text.
 */
#wpdcom .wpd-thread-info,
.wpdiscuz-post-rating-wrap,
#wpdcom .wpd-comment-label,
#wpdcom .wpd-thread-filter {
	text-transform: none !important;
	letter-spacing: normal !important;
}

.wpd-rating-title {
	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: manual;
	white-space: normal;
}

/*
 * Owner's ranking snippet: its mobile cards print their labels in capitals.
 * Owner's rule: no all-capitals text.
 */
.ebdt2-table td::before {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ---------------------------------------------------------- 6b. Forms --- */

/*
 * Every form (PMPro login, checkout and account, Fluent Forms, comments):
 * fields at least 48px tall with 16px+ text (phones don't zoom in), clear
 * borders, a visible focus ring, the theme's buttons, dark-mode colours.
 */
.pmpro input[type="text"],
.pmpro input[type="email"],
.pmpro input[type="password"],
.pmpro input[type="tel"],
.pmpro select,
.pmpro textarea,
.fluentform .ff-el-form-control,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form textarea {
	box-sizing: border-box;
	min-height: 48px !important;
	padding: 0.6rem 0.85rem !important;
	border: 1px solid var(--wp--preset--color--border-strong) !important;
	border-radius: 6px !important;
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: inherit;
	font-size: 1rem !important;
	line-height: 1.4;
}

.fluentform .ff-el-form-control::placeholder,
.pmpro input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.pmpro input:focus-visible,
.pmpro select:focus-visible,
.pmpro textarea:focus-visible,
.fluentform .ff-el-form-control:focus-visible {
	outline: 3px solid var(--ebdt2-link) !important;
	outline-offset: 1px;
	box-shadow: none !important;
}

.fluentform .ff-el-input--label label,
.pmpro label {
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 600;
}

/* Main buttons: amber with navy text (7.97:1), 48px tall. */
.fluentform .ff-btn-submit,
.pmpro .pmpro_btn:not(.pmpro_btn-plain):not(.pmpro_btn-cancel),
.pmpro input[type="submit"],
.wp-block-post-comments-form input[type="submit"] {
	min-height: 48px;
	padding: 0.7rem 1.4rem !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--navy) !important;
	font-size: 1rem !important;
	font-weight: 700;
	cursor: pointer;
}

/* Small text buttons («Mostrar contraseña»): at least 44px tall to tap. */
.pmpro .pmpro_btn-plain {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px !important;
	color: var(--ebdt2-link) !important;
}

/* WordPress's own login page (wp-login.php) is styled in assets/css/login.css. */

/*
 * Advanced Ads: placements («Publicidad» regions) get even space around them
 * and never get wider than the reading column. Ads look the same in light and
 * dark mode (dark-mode colour changes skip them). Paid subscribers see the
 * same ads as everyone else (owner's decision).
 */
.wp-block-post-content [class*="-entity-placement"] {
	clear: both;
	max-width: 100%;
	margin-block: 1.75rem;
	overflow: hidden;
	text-align: center;
}

.wp-block-post-content [class*="-entity-placement"] :is(img, iframe) {
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* ---------------------------------------------- 7. Membership boxes --- */

/* PMPro pages and boxes (levels, checkout, account, login) use the theme colours. */
/* On body (not :root): PMPro's own stylesheet sets these on :root and may load later. */
body {
	--pmpro--color--base: var(--wp--preset--color--paper);
	--pmpro--color--base-2: var(--wp--preset--color--surface);
	--pmpro--color--contrast: var(--wp--preset--color--contrast);
	--pmpro--color--accent: var(--wp--preset--color--contrast);
	--pmpro--color--border: var(--wp--preset--color--border);
	--pmpro--base--border-radius: 10px;
}

/*
 * Owner's paywall snippet (.tt-*): teaser that fades out + box with buttons.
 * Its own CSS (green/red, white fade) loads later in the page, so these rules
 * are more specific. The snippet's button labels are typed in capitals; they
 * are shown in sentence case here («Plan mensual», «Registrarme gratis»).
 */
.wp-block-post-content .tt-teaser-fade::after {
	height: 200px;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--paper));
}

.wp-block-post-content .tt-paywall-cta {
	max-width: none;
	margin: -1.5rem 0 2.5rem;
	padding: 1.75rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 4px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 6px 20px -8px rgba(18, 22, 30, 0.18);
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

.wp-block-post-content .tt-porcentaje-badge {
	margin-bottom: 1rem;
	padding: 0.3rem 0.8rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-post-content .tt-cta-title {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 750;
	line-height: 1.2;
}

.wp-block-post-content .tt-cta-text {
	margin: 0 0 1.25rem;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* WordPress adds a line break between the snippet's buttons; the group lays them out. */
.wp-block-post-content .tt-btn-group {
	align-items: center;
	gap: 0.75rem;
}

.wp-block-post-content .tt-btn-group br {
	display: none;
}

.wp-block-post-content .tt-btn {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
	text-transform: lowercase;
	text-decoration: none !important;
}

.wp-block-post-content .tt-btn::first-letter {
	text-transform: uppercase;
}

.wp-block-post-content .tt-btn-main,
.wp-block-post-content .tt-btn-alt {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--navy) !important;
}

/* Second paid plan (annual): navy button. The snippet sets its colour inline. */
.wp-block-post-content .tt-btn-main ~ .tt-btn-main {
	background: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--cream) !important;
}

.wp-block-post-content .tt-btn:hover {
	box-shadow: 0 0 0 2px var(--wp--preset--color--contrast);
}

.wp-block-post-content .tt-btn-login {
	margin-top: 1.25rem;
	color: var(--wp--preset--color--contrast) !important;
	font-size: 1rem;
}

/* ------------------------------------------------------- 8. Dark mode --- */

/*
 * Light mode values of the variables that dark mode changes.
 * Headings and links are navy in light mode, olive green in dark mode.
 */
:root {
	color-scheme: light;
	--ebdt2-heading: var(--wp--preset--color--contrast);
	--ebdt2-link: var(--wp--preset--color--contrast);
	--ebdt2-photo-filter: none;
	--ebdt2-shadow: rgba(18, 22, 30, 0.08);
}

/*
 * Dark mode = the phone's dark setting, unless the reader pressed the button
 * for light; or the button set to dark. The choice is kept only in the
 * reader's browser (localStorage), never on the server. Colours come from
 * theme.json settings.custom.dark (contrast checked by tools/contrast.py).
 * Both blocks below must stay identical.
 */
html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: var(--wp--custom--dark--base);
	--wp--preset--color--paper: var(--wp--custom--dark--paper);
	--wp--preset--color--surface: var(--wp--custom--dark--surface);
	--wp--preset--color--contrast: var(--wp--custom--dark--contrast);
	--wp--preset--color--muted: var(--wp--custom--dark--muted);
	--wp--preset--color--accent-text: var(--wp--custom--dark--green);
	--wp--preset--color--border: var(--wp--custom--dark--border);
	--wp--preset--color--border-strong: var(--wp--custom--dark--border-strong);
	--ebdt2-heading: var(--wp--custom--dark--green);
	--ebdt2-link: var(--wp--custom--dark--green);
	--ebdt2-photo-filter: brightness(0.9);
	--ebdt2-shadow: rgba(0, 0, 0, 0.5);
	/* Article text 1px larger in dark mode (19–21px instead of 18–20px). */
	--wp--preset--font-size--medium: clamp(1.1875rem, 1.1875rem + ((1vw - 0.234rem) * 0.221), 1.3125rem);
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: var(--wp--custom--dark--base);
		--wp--preset--color--paper: var(--wp--custom--dark--paper);
		--wp--preset--color--surface: var(--wp--custom--dark--surface);
		--wp--preset--color--contrast: var(--wp--custom--dark--contrast);
		--wp--preset--color--muted: var(--wp--custom--dark--muted);
		--wp--preset--color--accent-text: var(--wp--custom--dark--green);
		--wp--preset--color--border: var(--wp--custom--dark--border);
		--wp--preset--color--border-strong: var(--wp--custom--dark--border-strong);
		--ebdt2-heading: var(--wp--custom--dark--green);
		--ebdt2-link: var(--wp--custom--dark--green);
		--ebdt2-photo-filter: brightness(0.9);
		--ebdt2-shadow: rgba(0, 0, 0, 0.5);
		/* Article text 1px larger in dark mode (19–21px instead of 18–20px). */
		--wp--preset--font-size--medium: clamp(1.1875rem, 1.1875rem + ((1vw - 0.234rem) * 0.221), 1.3125rem);
	}
}

/* Photos slightly dimmed in dark mode (less glare at night). The logo is not. */
.wp-block-post-content img,
.wp-block-post-featured-image img {
	filter: var(--ebdt2-photo-filter);
}

.wp-block-post-title a {
	color: inherit;
}

/* Category names: dark amber in light mode, green in dark mode. */
.wp-block-post-terms,
.wp-block-post-terms a {
	color: var(--wp--preset--color--accent-text);
}

.wp-block-post-title {
	color: var(--ebdt2-heading);
}

.ebdt2-sheet {
	box-shadow: 0 1px 3px var(--ebdt2-shadow);
}

/*
 * The owner's snippet boxes and old articles carry fixed light colours
 * (white boxes, dark grey text). In dark mode they follow the dark colours.
 * Light mode keeps them exactly as written. Both blocks must stay identical.
 */
html[data-theme="dark"] .ebdt-lang-switch {
	background: var(--wp--preset--color--surface) !important;
	border-color: var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--contrast) !important;
}

html[data-theme="dark"] .ebdt-lang-switch .ebdt-lang-current {
	background: var(--wp--custom--dark--green) !important;
	color: var(--wp--preset--color--navy) !important;
}

html[data-theme="dark"] .ebdt-lang-switch .ebdt-lang-other {
	background: var(--wp--preset--color--paper) !important;
	border-color: var(--wp--preset--color--border-strong) !important;
	color: var(--wp--custom--dark--green) !important;
}

html[data-theme="dark"] .ebdt2-container,
html[data-theme="dark"] .ebdt2-legend li strong,
html[data-theme="dark"] .ebdt2-table td:first-child {
	color: var(--wp--preset--color--contrast) !important;
}

html[data-theme="dark"] .lang-block-en,
html[data-theme="dark"] .lang-en-inline,
html[data-theme="dark"] .ebdt2-table td::before {
	color: var(--wp--preset--color--muted) !important;
}

html[data-theme="dark"] .ebdt2-notice,
html[data-theme="dark"] .ebdt2-legend,
html[data-theme="dark"] .ebdt2-table,
html[data-theme="dark"] .ebdt2-table tr,
html[data-theme="dark"] .ebdt2-table th,
html[data-theme="dark"] .ebdt2-table td:first-child {
	background: var(--wp--preset--color--surface) !important;
	border-color: var(--wp--preset--color--border-strong) !important;
}

html[data-theme="dark"] .ebdt2-table th,
html[data-theme="dark"] .ebdt2-table td,
html[data-theme="dark"] .ebdt2-table-wrapper,
html[data-theme="dark"] .ebdt2-legend h4,
html[data-theme="dark"] .ebdt2-legend-footer {
	border-color: var(--wp--preset--color--border) !important;
}

html[data-theme="dark"] .ebdt2-table tr:hover {
	background: var(--wp--preset--color--paper) !important;
}

html[data-theme="dark"] .wp-block-post-content [style*="background"]:not(img):not(iframe):not(.tt-btn):not([class*="-entity-placement"] *) {
	background-color: transparent !important;
}

html[data-theme="dark"] .wp-block-post-content [style*="color:"]:not(a):not(.tt-btn):not([class*="-entity-placement"] *) {
	color: inherit !important;
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme="light"]) .ebdt-lang-switch {

		background: var(--wp--preset--color--surface) !important;

		border-color: var(--wp--preset--color--border) !important;

		color: var(--wp--preset--color--contrast) !important;

	}



	html:not([data-theme="light"]) .ebdt-lang-switch .ebdt-lang-current {

		background: var(--wp--custom--dark--green) !important;

		color: var(--wp--preset--color--navy) !important;

	}



	html:not([data-theme="light"]) .ebdt-lang-switch .ebdt-lang-other {

		background: var(--wp--preset--color--paper) !important;

		border-color: var(--wp--preset--color--border-strong) !important;

		color: var(--wp--custom--dark--green) !important;

	}



	html:not([data-theme="light"]) .ebdt2-container,

	html:not([data-theme="light"]) .ebdt2-legend li strong,

	html:not([data-theme="light"]) .ebdt2-table td:first-child {

		color: var(--wp--preset--color--contrast) !important;

	}



	html:not([data-theme="light"]) .lang-block-en,

	html:not([data-theme="light"]) .lang-en-inline,

	html:not([data-theme="light"]) .ebdt2-table td::before {

		color: var(--wp--preset--color--muted) !important;

	}



	html:not([data-theme="light"]) .ebdt2-notice,

	html:not([data-theme="light"]) .ebdt2-legend,

	html:not([data-theme="light"]) .ebdt2-table,

	html:not([data-theme="light"]) .ebdt2-table tr,

	html:not([data-theme="light"]) .ebdt2-table th,

	html:not([data-theme="light"]) .ebdt2-table td:first-child {

		background: var(--wp--preset--color--surface) !important;

		border-color: var(--wp--preset--color--border-strong) !important;

	}



	html:not([data-theme="light"]) .ebdt2-table th,

	html:not([data-theme="light"]) .ebdt2-table td,

	html:not([data-theme="light"]) .ebdt2-table-wrapper,

	html:not([data-theme="light"]) .ebdt2-legend h4,

	html:not([data-theme="light"]) .ebdt2-legend-footer {

		border-color: var(--wp--preset--color--border) !important;

	}



	html:not([data-theme="light"]) .ebdt2-table tr:hover {

		background: var(--wp--preset--color--paper) !important;

	}



	html:not([data-theme="light"]) .wp-block-post-content [style*="background"]:not(img):not(iframe):not(.tt-btn):not([class*="-entity-placement"] *) {

		background-color: transparent !important;

	}



	html:not([data-theme="light"]) .wp-block-post-content [style*="color:"]:not(a):not(.tt-btn):not([class*="-entity-placement"] *) {

		color: inherit !important;

	}
}

/* wpDiscuz (comments) in dark mode: white editor box and grey texts. Both blocks identical. */
html[data-theme="dark"] #wpdcom,
html[data-theme="dark"] #wpdcom .wpd-login,
html[data-theme="dark"] #wpdcom .wpd-sbs-toggle,
html[data-theme="dark"] #wpdcom .wpd-thread-info,
html[data-theme="dark"] #wpdcom .wpd-comment-text,
html[data-theme="dark"] .wpd-rating-title {
	color: var(--wp--preset--color--contrast) !important;
}

html[data-theme="dark"] #wpdcom .ql-container,
html[data-theme="dark"] #wpdcom .ql-toolbar,
html[data-theme="dark"] #wpdcom .ql-editor,
html[data-theme="dark"] #wpdcom textarea,
html[data-theme="dark"] #wpdcom input[type="text"],
html[data-theme="dark"] #wpdcom input[type="email"],
html[data-theme="dark"] #wpdcom input[type="url"],
html[data-theme="dark"] .wpd-rating-value {
	background: var(--wp--preset--color--surface) !important;
	border-color: var(--wp--preset--color--border-strong) !important;
	color: var(--wp--preset--color--contrast) !important;
}

html[data-theme="dark"] #wpdcom .ql-editor.ql-blank::before {
	color: var(--wp--preset--color--muted) !important;
}

html[data-theme="dark"] #wpdcom .ql-snow .ql-stroke {
	stroke: var(--wp--preset--color--muted) !important;
}

html[data-theme="dark"] #wpdcom .ql-snow .ql-fill {
	fill: var(--wp--preset--color--muted) !important;
}

@media (prefers-color-scheme: dark) {

	html:not([data-theme="light"]) #wpdcom,
	html:not([data-theme="light"]) #wpdcom .wpd-login,
	html:not([data-theme="light"]) #wpdcom .wpd-sbs-toggle,
	html:not([data-theme="light"]) #wpdcom .wpd-thread-info,
	html:not([data-theme="light"]) #wpdcom .wpd-comment-text,
	html:not([data-theme="light"]) .wpd-rating-title {
		color: var(--wp--preset--color--contrast) !important;
	}

	html:not([data-theme="light"]) #wpdcom .ql-container,
	html:not([data-theme="light"]) #wpdcom .ql-toolbar,
	html:not([data-theme="light"]) #wpdcom .ql-editor,
	html:not([data-theme="light"]) #wpdcom textarea,
	html:not([data-theme="light"]) #wpdcom input[type="text"],
	html:not([data-theme="light"]) #wpdcom input[type="email"],
	html:not([data-theme="light"]) #wpdcom input[type="url"],
	html:not([data-theme="light"]) .wpd-rating-value {
		background: var(--wp--preset--color--surface) !important;
		border-color: var(--wp--preset--color--border-strong) !important;
		color: var(--wp--preset--color--contrast) !important;
	}

	html:not([data-theme="light"]) #wpdcom .ql-editor.ql-blank::before {
		color: var(--wp--preset--color--muted) !important;
	}

	html:not([data-theme="light"]) #wpdcom .ql-snow .ql-stroke {
		stroke: var(--wp--preset--color--muted) !important;
	}

	html:not([data-theme="light"]) #wpdcom .ql-snow .ql-fill {
		fill: var(--wp--preset--color--muted) !important;
	}
}

/* --------------------------------------------- Dark-mode switch button --- */

.ebdt2-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--cream);
	cursor: pointer;
}

.ebdt2-theme-toggle[hidden] {
	display: none;
}

.ebdt2-theme-toggle svg {
	width: 22px;
	height: 22px;
}

.ebdt2-theme-toggle .ebdt2-icon-sun,
.ebdt2-theme-toggle[aria-pressed="true"] .ebdt2-icon-moon {
	display: none;
}

.ebdt2-theme-toggle[aria-pressed="true"] .ebdt2-icon-sun {
	display: block;
}

/* ------------------------------------------------ 9. Article extras --- */

/* Sizes below include padding and border (48px means 48px on screen). */
.ebdt2-toc summary,
.ebdt2-upgrade__button,
.ebdt2-copy,
.ebdt2-sheet .wp-block-post-content .sd-content a.sd-button {
	box-sizing: border-box;
}

/* Breadcrumbs «Inicio › Categoría › Título»: one line; a long title ends in «…». */
.ebdt2-breadcrumbs {
	min-width: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.ebdt2-breadcrumbs ol {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ebdt2-breadcrumbs li {
	flex: 0 0 auto;
	white-space: nowrap;
}

.ebdt2-breadcrumbs li + li::before {
	content: "›";
	content: "›" / "";
	margin-right: 0.375rem;
}

.ebdt2-breadcrumbs li:last-child {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ebdt2-breadcrumbs a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--ebdt2-link);
}

/* «En este artículo»: folded list of the article's sections. */
.ebdt2-toc {
	margin-block: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
}

.ebdt2-toc summary {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0.5rem 1rem;
	font-weight: 700;
	color: var(--ebdt2-heading);
	cursor: pointer;
}

.ebdt2-toc ol {
	margin: 0;
	padding: 0 1rem 1rem;
	list-style: none;
}

.ebdt2-toc li {
	margin: 0;
}

.ebdt2-toc li.ebdt2-toc__h3 {
	padding-left: 1.25rem;
}

.ebdt2-toc a {
	display: block;
	padding-block: 0.375rem;
	color: var(--ebdt2-link);
}

.wp-block-post-content :is(h2, h3)[id] {
	scroll-margin-top: 1rem;
}

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

	html {
		scroll-behavior: smooth;
	}
}

/* Jetpack share buttons («¡Compártelo!»): round 44px buttons in the theme colours. */
.wp-block-post-content .sharedaddy {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-post-content div.sharedaddy .sd-title {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ebdt2-heading);
}

.wp-block-post-content div.sharedaddy .sd-title::before {
	display: none;
}

.wp-block-post-content .sd-content ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wp-block-post-content .sd-content ul li {
	margin: 0 !important;
}

.wp-block-post-content .sd-content ul li.share-end {
	display: none;
}

.ebdt2-sheet .wp-block-post-content .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	max-width: none;
	height: 44px;
	margin: 0;
	padding: 0;
	top: 0;
	border: 1px solid var(--wp--preset--color--border-strong);
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
}

.ebdt2-sheet .wp-block-post-content .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button::before {
	font-size: 20px;
}

.wp-block-post-content .ebdt2-copy {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 22px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.ebdt2-sheet .wp-block-post-content .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button:hover,
.wp-block-post-content .ebdt2-copy:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--navy) !important;
	opacity: 1;
}

.wp-block-post-content .sd-content a.sd-button:focus-visible,
.wp-block-post-content .ebdt2-copy:focus-visible {
	outline: 3px solid var(--ebdt2-link);
	outline-offset: 2px;
}

/* Copying needs the theme script: without it the button stays hidden. */
html:not(.ebdt2-menu-js) .ebdt2-share-copy {
	display: none !important;
}

/* Invitation to subscribe at the end of the article. */
.ebdt2-upgrade {
	padding: 1.25rem;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.ebdt2-upgrade p {
	margin: 0;
}

.ebdt2-upgrade .ebdt2-upgrade__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ebdt2-heading);
}

.ebdt2-upgrade .ebdt2-upgrade__text {
	margin-top: 0.5rem;
}

.ebdt2-upgrade .ebdt2-upgrade__action {
	margin-top: 1rem;
}

.ebdt2-upgrade__button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0.5rem 1.4rem;
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ebdt2-upgrade__button:hover {
	text-decoration: underline;
}

.ebdt2-upgrade__button:focus-visible {
	outline: 3px solid var(--ebdt2-link);
	outline-offset: 2px;
}

/* «Últimos artículos» on the 404 page and an empty search. */
.ebdt2-latest {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * Reading progress: a thin amber line at the top of the screen that fills
 * while the article text is read (CSS only, no script). Browsers that cannot
 * do it simply show nothing.
 */
@supports (animation-timeline: view()) and (timeline-scope: none) {

	body.single-post {
		timeline-scope: --ebdt2-article;
	}

	body.single-post .wp-block-post-content {
		view-timeline-name: --ebdt2-article;
	}

	body.single-post::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000;
		width: 100%;
		height: 3px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: 0 50%;
		opacity: 0;
		pointer-events: none;
		/* Fill while the text scrolls; show only once its top has passed the
		   top of the screen (a short article that fits shows no half line). */
		animation: ebdt2-progress linear both, ebdt2-progress-show linear both;
		animation-timeline: --ebdt2-article, --ebdt2-article;
		animation-range: contain 0% contain 100%, exit-crossing 0% exit-crossing 1%;
	}

	@keyframes ebdt2-progress {

		to {
			transform: scaleX(1);
		}
	}

	@keyframes ebdt2-progress-show {

		to {
			opacity: 1;
		}
	}
}

/* wpDiscuz texts with light grey on white (3.5:1): theme colours instead (≥ 7:1, both modes). */
.wpd-rating-wrap .wpd-rating-title,
#wpdcom .wpd-rating-title {
	color: var(--wp--preset--color--muted) !important;
}

#wpdcom .wpdiscuz-sort-button {
	color: var(--wp--preset--color--muted) !important;
}

#wpdcom .wpdiscuz-sort-button-active {
	color: var(--wp--preset--color--contrast) !important;
}

#wpdcom .wpd-login a {
	color: var(--ebdt2-link) !important;
	text-decoration: underline !important;
}

/* ----------------------------------------------------------- 10. Print --- */

/* Printing an article: only the article, black on white, link addresses shown. */
@media print {

	.ebdt2-header,
	.ebdt2-accountbar,
	.ebdt2-breadcrumbs,
	.ebdt2-prefooter,
	.ebdt2-footer,
	.ebdt2-related-wrap,
	.ebdt2-related,
	.ebdt2-upgrade,
	.ebdt2-toc,
	.ebdt2-theme-toggle,
	.sharedaddy,
	.wp-block-comments,
	#comments,
	#wpdcom,
	.wpdiscuz_top_clearing,
	[id^="wpdiscuz"],
	[id^="wpd-"],
	[class*="-entity-placement"],
	#wpadminbar,
	.cmplz-cookiebanner,
	#cmplz-cookiebanner-container,
	.pum-overlay,
	.snackbar,
	.wp-block-post-content iframe,
	.wp-block-post-content .video-container {
		display: none !important;
	}

	body.single-post::before {
		display: none !important;
	}

	html,
	body,
	.ebdt2-sheet {
		background: #fff !important;
	}

	body,
	body * {
		color: #000 !important;
		box-shadow: none !important;
	}

	.ebdt2-sheet {
		margin: 0 !important;
		padding: 0 !important;
		max-width: none;
		border-radius: 0;
	}

	.wp-block-post-content img,
	.wp-block-post-featured-image img {
		filter: none;
	}

	.wp-block-post-content a[href^="http"]:not(:has(img))::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	img,
	figure,
	.wp-caption,
	tr {
		break-inside: avoid;
	}

	h1,
	h2,
	h3,
	h4 {
		break-after: avoid;
	}

	@page {
		margin: 2cm;
	}
}