/**
 * Compatibility.
 *
 * Loaded last. Three features carry the theme's surfaces and would take the
 * backgrounds with them if unsupported:
 *
 *   rgb(from …)     relative colours — Safari 16.4+, Chrome 119+, Firefox 128+
 *   :has()          Safari 15.4+, Chrome 105+, Firefox 121+
 *   backdrop-filter needs the -webkit- prefix on Safari 17 and earlier
 *
 * An unsupported colour function does not degrade — the whole declaration is
 * dropped, so a translucent panel becomes no panel at all and text lands on
 * the page background. The blocks below restate those surfaces in plain
 * colours for anything that cannot parse them.
 *
 * These are opaque rather than translucent. That loses the layered look on
 * old browsers and keeps the site readable, which is the right trade.
 */

/* ==========================================================================
   Relative colours
   ========================================================================== */

@supports not (color: rgb(from red r g b)) {

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

	.wpx-header,
	.wpx-header.is-sticky {
		background: #121212;
		background-image: none;
	}

	.wpx-header__top { background: #0f0f0f; }

	.wpx-header-clean .wpx-header__top { background: transparent; }

	.wpx-header__inner .wpx-menu > li > a::after { background: rgba(231, 76, 60, 0.18); }

	.wpx-header .wpx-search__input { background: #0f0f0f; }

	.wpx-header .wpx-search:focus-within .wpx-search__input {
		box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
	}

	.wpx-header-clean .wpx-slot--right .wpx-social__link::before { background: #e74c3c; }

	.wpx-menu ul { background: #191919; }
	.wpx-menu ul li a:hover { background: rgba(231, 76, 60, 0.16); }

	.wpx-header-clean .wpx-header__inner .wpx-menu > .current-menu-item > a { background: rgba(231, 76, 60, 0.14); }

	/* --- Page background and panels -------------------------------------- */

	.wpx-has-bg::after { background: rgba(15, 15, 15, 0.3); }

	.wpx-has-bg.wpx-boxed .wpx-shell,
	.wpx-has-bg.wpx-boxed .wpx-slider,
	.wpx-has-bg.wpx-boxed .wpx-hero,
	body:not(.wpx-has-bg).wpx-boxed .wpx-shell,
	body:not(.wpx-has-bg).wpx-boxed .wpx-hero,
	body:not(.wpx-has-bg).wpx-boxed .wpx-slider {
		background: #121212;
	}

	body:not(.wpx-has-bg)::before { background: #0f0f0f; }

	/* --- Hero and slider -------------------------------------------------- */

	.wpx-hero__card,
	.wpx-hero:not(.has-image) .wpx-hero__card { background: #191919; }

	.wpx-hero.has-image::after {
		background: linear-gradient(to bottom, rgba(15, 15, 15, 0.35), rgba(15, 15, 15, 0.55));
	}

	.wpx-slide::after {
		background: linear-gradient(to top, rgba(15, 15, 15, 0.95), rgba(15, 15, 15, 0.55) 55%, rgba(15, 15, 15, 0.25));
	}

	.wpx-slider__nav,
	.wpx-slider__pause { background: rgba(15, 15, 15, 0.55); }

	/* --- Strip ------------------------------------------------------------ */

	.wpx-strip { background: #121212; }
	.wpx-strip__nav { background: rgba(15, 15, 15, 0.75); }

	.wpx-strip-wrap.has-overflow::before { background: linear-gradient(to right, #121212, rgba(18, 18, 18, 0)); }
	.wpx-strip-wrap.has-overflow::after { background: linear-gradient(to left, #121212, rgba(18, 18, 18, 0)); }

	/* --- Cards ------------------------------------------------------------ */

	.wpx-card__overlay { background: rgba(15, 15, 15, 0.72); }
	.wpx-badge { background: rgba(15, 15, 15, 0.82); }

	.wpx-cards-ribbon .wpx-card:hover,
	.wpx-cards-ribbon .wpx-card:focus-within {
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 2px #e74c3c;
	}

	.wpx-cards-ribbon .wpx-card:hover .wpx-card__title { background: #e74c3c; }

	.wpx-strip__item:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 2px #e74c3c; }

	/* --- Tabs ------------------------------------------------------------- */

	.wpx-tabs__tab { background: #191919; }

	.wpx-tabs__tab[aria-selected="true"] {
		box-shadow: 0 6px 18px rgba(231, 76, 60, 0.45);
	}

	/* --- Sidebar and footer ----------------------------------------------- */

	.wpx-footer {
		background: #121212;
		background-image: none;
	}

	.wpx-footer::after { background: none; }
	.wpx-footer__bar { background: #0f0f0f; }
	.wpx-footer .wpx-widget li { border-block-end-color: #333333; }
	.wpx-footer .wpx-widget__title::after { text-shadow: 0 0 10px rgba(231, 76, 60, 0.7); }

	.wpx-postlist__item + .wpx-postlist__item { border-block-start-color: #333333; }

	/* --- Prose ------------------------------------------------------------ */

	.wpx-prose tbody tr:nth-child(odd) { background: #191919; }
	.wpx-prose tbody tr:hover { background: #1f1a19; }

	.wpx-prose .wp-block-button__link,
	.wpx-prose a.button,
	.wpx-prose a.btn,
	.wpx-prose a.download-button {
		box-shadow: 0 8px 22px rgba(231, 76, 60, 0.45);
	}

	/* --- Controls --------------------------------------------------------- */

	.wpx-to-top { box-shadow: 0 8px 24px rgba(231, 76, 60, 0.35); }
	.wpx-to-top:hover { box-shadow: 0 12px 30px rgba(231, 76, 60, 0.5); }

	input:focus,
	textarea:focus,
	select:focus { box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); }
}

/* ==========================================================================
   :has()
   ==========================================================================
   Only two things depend on it, and both are cosmetic. Without support the
   callout keeps its plain paragraph styling and the strip keeps its panel,
   which is a smaller loss than a broken layout.
   ========================================================================== */

@supports not selector(:has(*)) {
	.wpx-strip { background: transparent; border: 0; padding: 0; }
}

/* ==========================================================================
   backdrop-filter
   ==========================================================================
   Safari has needed the prefix for a long time and still accepts it, so both
   are declared. Where neither applies, the surface is made opaque instead —
   a translucent bar with nothing blurring behind it is unreadable.
   ========================================================================== */

.wpx-header.is-sticky,
.wpx-menu ul,
.wpx-badge,
.wpx-slider__nav,
.wpx-slider__pause,
.wpx-strip__nav,
.wpx-hero__card {
	-webkit-backdrop-filter: inherit;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wpx-header.is-sticky { background: #121212; }
	.wpx-menu ul { background: #191919; }
	.wpx-badge { background: #242424; }
	.wpx-slider__nav,
	.wpx-slider__pause,
	.wpx-strip__nav { background: #242424; }
	.wpx-hero__card { background: #191919; }
}

/* ==========================================================================
   Older Safari details
   ========================================================================== */

/* Safari renders a summary marker even with list-style:none unless the
   pseudo-element is addressed directly. */
.wpx-prose summary::-webkit-details-marker { display: none; }
.wpx-prose summary { display: flex; }

/* Safari applies gap in flex from 14.1 only; the fallback keeps rows from
   touching on anything older. */
@supports not (gap: 1px) {
	.wpx-menu > li { margin-inline-end: 4px; }
	.wpx-social > li { margin-inline-end: 4px; }
	.wpx-grid > * { margin: 0 var(--wpx-gutter) var(--wpx-gutter) 0; }
}

/* iOS clips a sticky element inside an overflow container; the header is the
   one place that matters. */
@supports (-webkit-touch-callout: none) {
	.wpx-header.is-sticky { position: -webkit-sticky; position: sticky; }
}

/* ==========================================================================
   Reduced transparency
   ==========================================================================
   A system-level accessibility setting, not a browser gap — but the fix is
   the same, so it lives here.
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
	.wpx-header.is-sticky,
	.wpx-hero__card,
	.wpx-menu ul,
	.wpx-badge {
		background: #191919;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ==========================================================================
   Control reset
   ==========================================================================
   base.css used to style every <button> on the page with a rule whose
   specificity no single class could beat, which turned the slider arrows,
   the strip arrows, the tabs and the back-to-top control into full-size
   accent buttons. That rule is gone, but these resets stay: a plugin or a
   future stylesheet doing the same thing should not be able to break the
   controls again.
   ========================================================================== */

.wpx-slider__nav,
.wpx-slider__pause,
.wpx-strip__nav,
.wpx-lead-btn,
.wpx-lead-dot,
.wpx-to-top,
.wpx-tabs__tab,
.wpx-nav-toggle,
.wpx-search__submit,
.wpx-gallery__remove,
.wpx-lightbox__close,
.wpx-lightbox__nav {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

/* The pill and circular controls should never pick up the block padding. */
.wpx-slider__nav,
.wpx-strip__nav,
.wpx-lead-btn,
.wpx-lead-dot,
.wpx-to-top,
.wpx-lightbox__close,
.wpx-lightbox__nav {
	padding: 0;
}

/* ==========================================================================
   Dim text floor
   ==========================================================================
   --wpx-text-dim is derived by hand in each pack, and a pack with a strongly
   tinted palette can leave it too close to the surface behind it. Date lines
   and view counts are small; they need real contrast, not a hint of one.

   This does not override a pack — it only stops the dimmest tier from
   disappearing when the palette is heavily coloured.
   ========================================================================== */

.wpx-article-meta,
.wpx-card__meta,
.wpx-postlist__meta,
.wpx-breadcrumbs ol,
.wpx-comment__date {
	color: var(--wpx-text-dim);
}

@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		/* Halfway between muted text and the page, rather than a fixed grey
		   that fights a tinted palette. */
		--wpx-text-dim: color-mix(in srgb, var(--wpx-text-muted) 68%, var(--wpx-bg));
	}
}