/*
Theme Name: Slant 2026
Theme URI: https://www.slantresearch.com
Author: Slant Research
Description: Research-led block theme for slantresearch.com, built from the "The Brief" design direction. Replaces Neve FSE. Access control lives in the slant-access plugin, never in this theme.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slant-2026
Tags: blog, news, full-site-editing, block-patterns, custom-colors, custom-logo
*/

/*
 * Almost all styling lives in theme.json. This file carries only what theme.json cannot
 * express: the sticky translucent nav, card hover transitions, and the decorative
 * gradient blobs from the design.
 */

/* --- Sticky translucent header (backdrop-filter is not a theme.json concept) --------- */
.slant-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(245, 240, 246, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(23, 25, 51, 0.1);
}

/* Core's flex layout supplies display/align-items/justify-content from the block markup;
   these selectors carry one extra class so the theme's gap and measure win over
   `.is-layout-flex`'s defaults regardless of stylesheet order. */
.slant-nav .slant-nav__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 15px 32px;
	align-items: center;
	gap: 28px;
}

/* The logo is a core/image block, so it arrives wrapped in a <figure> with default margins. */
.slant-nav__logo,
.slant-footer__logo {
	margin: 0;
	line-height: 0;
}

.slant-nav__logo img {
	height: 34px;
	width: auto;
	display: block;
}

.slant-nav .slant-nav__links {
	align-items: center;
	gap: 30px;
}

/* core/navigation renders nav > ul.wp-block-navigation__container > li > a.
   The <nav> is itself a flex container; centring its items keeps the link text on the same
   optical line as the Subscribe pill rather than on the pill's box baseline. */
.slant-nav__links .wp-block-navigation,
.slant-nav__links .wp-block-navigation__container {
	align-items: center;
}

.slant-nav__links .wp-block-navigation__container {
	gap: 30px;
}

.slant-nav__links .wp-block-navigation-item__content {
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.slant-nav__links .wp-block-navigation-item__content:hover,
.slant-nav__links .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--myrtle);
	text-decoration: none;
}

/* Log in / Log out / Subscribe sit together on a tighter gap than the nav links, so they
   read as one action cluster rather than three more menu items. */
.slant-nav .slant-nav__actions {
	align-items: center;
	gap: 12px;
}

/*
 * SHOW ONE OF LOG IN / LOG OUT, NEVER BOTH.
 *
 * WordPress puts `logged-in` on <body> for an authenticated visitor, so the swap needs no
 * PHP and no custom block, and every visitor gets identical HTML — which keeps it safe in
 * front of a page cache.
 *
 * These two rules are the whole mechanism. The live Neve site carries the same
 * `hide-logged-in` / `hide-logged-out` class names on its header buttons but nothing in
 * wp-content ever implemented them, so both buttons render for everyone there — a logged-in
 * client is currently offered "Log in" next to "Log out". Same markup contract, now with
 * the rules that make it true.
 */
body.logged-in .hide-logged-in,
body:not(.logged-in) .hide-logged-out {
	display: none;
}

/* Log in / Log out are secondary to Subscribe: outline, not a filled pill, so the maize
   button stays the one obvious primary action. */
.slant-nav__auth .wp-block-button__link {
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	display: block;
	background: transparent;
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(23, 25, 51, 0.28);
	transition: all var(--wp--custom--transition);
}

.slant-nav__auth .wp-block-button__link:hover,
.slant-nav__auth .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

/* The Subscribe pill is a core/button; theme.json already gives it maize + navy + pill,
   so only the smaller nav-scale sizing is needed here. */
.slant-nav__cta .wp-block-button__link {
	padding: 10px 20px;
	font-size: 15px;
	line-height: 1;
	display: block;
}

.slant-nav__cta .wp-block-button__link:hover {
	background: #ffe92e;
}

/* --- Footer ------------------------------------------------------------------------- */
.slant-footer {
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
}

.slant-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 54px 32px 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 36px;
}

.slant-footer a {
	color: #dcdef0;
	text-decoration: none;
	font-size: 14.5px;
}

.slant-footer a:hover {
	color: var(--wp--preset--color--sky);
}

.slant-footer__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6f74a0;
	margin-bottom: 14px;
}

.slant-footer__tagline {
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
	font-size: 15px;
	color: #aeb2d0;
	margin: 0;
	max-width: 30ch;
	line-height: 1.5;
}

/* core/list, so the browser's list styling has to be undone. */
.slant-footer__stack {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14.5px;
	color: #aeb2d0;
}

.slant-footer__logo img {
	height: 38px;
	width: auto;
	display: block;
	margin-bottom: 14px;
}

.slant-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 8px;
}

.slant-footer__bar-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 32px;
	font-size: 12.5px;
	color: #6f74a0;
}

/* --- Shared editorial bits ---------------------------------------------------------- */
.slant-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--myrtle);
}

.slant-eyebrow--on-dark {
	color: var(--wp--preset--color--sky);
}

.slant-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--wp--preset--color--sky);
	border-radius: 50%;
	display: inline-block;
	flex: none;
}

.slant-strap {
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.45;
}

/* --- Shared: tags, buttons -----------------------------------------------------------
 * Every accent-coloured element reads --slant-accent, set inline per post from the lead
 * category's colour. One CSS rule, any number of categories, no generated stylesheet.
 */
.slant-tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--slant-accent, var(--wp--preset--color--myrtle));
	background: color-mix(in srgb, var(--slant-accent, #297373) 12%, transparent);
}

.slant-tag--on-dark {
	font-size: 11.5px;
	letter-spacing: 0.14em;
	padding: 6px 12px;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	background: color-mix(in srgb, var(--slant-accent, #297373) 42%, transparent);
}

.slant-btn {
	display: inline-block;
	padding: 13px 24px;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.slant-btn--accent {
	background: var(--slant-accent, var(--wp--preset--color--sky));
	color: var(--wp--preset--color--navy-deep);
}

.slant-btn--accent:hover {
	filter: brightness(1.08);
	color: var(--wp--preset--color--navy-deep);
}

.slant-btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
	font-weight: 600;
}

.slant-btn--ghost:hover {
	border-color: var(--wp--preset--color--sky);
	color: #fff;
}

/* --- Hero ---------------------------------------------------------------------------- */
.slant-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.slant-hero__blob {
	position: absolute;
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(73, 205, 254, 0.22), transparent 62%);
	pointer-events: none;
}

.slant-hero__inner {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 32px 76px;
}

.slant-hero__kicker {
	color: var(--wp--preset--color--sky);
	margin: 0 0 30px;
}

.slant-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 52px;
	align-items: center;
}

.slant-hero__title {
	margin: 22px 0 18px;
}

.slant-hero__title a {
	color: #fff;
	text-decoration: none;
}

.slant-hero__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.slant-hero__strap {
	font-size: clamp(18px, 2vw, 23px);
	color: var(--wp--preset--color--text-on-dark);
	margin: 0 0 30px;
	max-width: 30ch;
}

.slant-hero__stat {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	padding: 20px 0 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	margin-bottom: 30px;
	max-width: 430px;
}

.slant-hero__stat-figure {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 800;
	font-size: 54px;
	line-height: 0.85;
	letter-spacing: -0.02em;
	/* On the dark hero the bright brand accents have ample contrast, so the category
	   colour is used directly here rather than the darkened tag variant. */
	color: var(--slant-accent, var(--wp--preset--color--sky));
}

.slant-hero__stat-label {
	font-size: 13.5px;
	color: #aeb2d0;
	line-height: 1.45;
	padding-bottom: 5px;
}

.slant-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
}

.slant-hero__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background-color: var(--wp--preset--color--navy-panel);
}

.slant-hero__media--empty {
	background-image: repeating-linear-gradient(135deg, rgba(73, 205, 254, 0.1) 0 13px, transparent 13px 26px);
}

.slant-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Card feed ----------------------------------------------------------------------- */
.slant-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(322px, 1fr));
	gap: 22px;
}

.slant-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(23, 25, 51, 0.1);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.slant-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.slant-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.slant-card__media {
	display: block;
	height: 128px;
	background-color: #ece6ed;
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid rgba(23, 25, 51, 0.08);
}

.slant-card__media--empty {
	background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--slant-accent, #297373) 16%, transparent) 0 11px, transparent 11px 22px);
}

.slant-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 22px 24px;
}

.slant-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.slant-card__date {
	font-size: 12px;
	color: var(--wp--preset--color--text-faint);
}

.slant-card__title {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 9px;
	color: var(--wp--preset--color--text);
}

.slant-card__strap {
	font-size: 15.5px;
	margin-bottom: 16px;
	display: block;
}

.slant-card__stat {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding-top: 14px;
	border-top: 1px solid rgba(23, 25, 51, 0.08);
}

.slant-card__stat-figure {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--slant-accent, var(--wp--preset--color--myrtle));
}

.slant-card__stat-label {
	font-size: 12px;
	color: #6a6c82;
	line-height: 1.35;
}

/* --- Panels (audience, dashboards, subscribe) ---------------------------------------- */
.slant-panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--panel);
	padding: clamp(30px, 5vw, 52px);
}

.slant-panel--light {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(23, 25, 51, 0.1);
}

.slant-panel--dark {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.slant-panel--maize {
	background: var(--wp--preset--color--maize);
	color: var(--wp--preset--color--navy);
}

.slant-panel__blob {
	position: absolute;
	bottom: -140px;
	left: -80px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(41, 115, 115, 0.4), transparent 64%);
	pointer-events: none;
}

.slant-panel__title {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 700;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	position: relative;
}

.slant-panel__lede {
	font-size: 18px;
	margin: 0 0 36px;
	max-width: 56ch;
	position: relative;
}

.slant-panel__lede--on-dark {
	font-family: inherit;
	font-style: normal;
	font-size: 15px;
	color: var(--wp--preset--color--text-on-dark);
	margin-bottom: 0;
	max-width: 46ch;
}

.slant-panel__lede--tight {
	font-family: inherit;
	font-style: normal;
	font-size: 15px;
	color: #3a3c20;
	margin-bottom: 0;
	max-width: 42ch;
}

/* core/columns is flex with fixed widths; the design wants columns that reflow, so the
   grid is reasserted at higher specificity rather than fighting inline widths. */
.wp-block-columns.slant-audience {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-bottom: 0;
}

.wp-block-columns.slant-audience > .wp-block-column {
	flex-basis: auto !important;
}

.slant-audience__col {
	border-top: 3px solid var(--slant-accent, var(--wp--preset--color--sky));
	padding-top: 20px;
}

/* The accent per column is a class rather than an inline style, so it survives editing. */
.slant-audience__col--sky {
	--slant-accent: var(--wp--preset--color--sky);
}

.slant-audience__col--maize {
	--slant-accent: var(--wp--preset--color--maize);
}

.slant-audience__col--myrtle {
	--slant-accent: var(--wp--preset--color--myrtle);
}

.slant-audience__col h3 + p {
	margin-top: 0;
}

.slant-audience__col h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
}

.slant-audience__col p {
	font-size: 14.5px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 16px;
	line-height: 1.55;
}

.wp-block-columns.slant-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	align-items: center;
	position: relative;
	margin-bottom: 0;
}

.wp-block-columns.slant-band > .wp-block-column {
	flex-basis: auto !important;
}

.slant-band__actions {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
}

/* --- Button block styles ------------------------------------------------------------
 * Registered in functions.php so they appear in the editor's Styles panel, rather than
 * being class names an editor has to know to type.
 */
.wp-block-button.is-style-sky .wp-block-button__link {
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--navy-deep);
}

.wp-block-button.is-style-sky .wp-block-button__link:hover {
	filter: brightness(1.08);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
	font-weight: 600;
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--sky);
}

/* --- Research index rows -------------------------------------------------------------- */
.slant-archive__head,
.slant-page__head,
.slant-article__head,
.slant-404 {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}

.slant-archive__lede {
	font-size: clamp(18px, 2vw, 22px);
	max-width: 54ch;
	margin-bottom: 36px;
}

.slant-archive__list {
	padding-bottom: var(--wp--preset--spacing--50);
}

.slant-row {
	display: grid;
	grid-template-columns: 150px 1fr 150px;
	gap: 28px;
	align-items: center;
	padding: 24px 8px;
	border-top: 1px solid rgba(23, 25, 51, 0.13);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background 0.16s ease;
}

.slant-row:hover {
	background: rgba(73, 205, 254, 0.07);
}

.slant-row__meta {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
}

.slant-row__date {
	font-size: 12.5px;
	color: var(--wp--preset--color--text-faint);
}

.slant-row__title {
	display: block;
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 700;
	font-size: clamp(21px, 2.1vw, 27px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	color: var(--wp--preset--color--text);
}

.slant-row__strap {
	display: block;
	font-size: 16.5px;
	margin-bottom: 10px;
	max-width: 54ch;
}

.slant-row__stat {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.slant-row__stat-figure {
	font-family: var(--wp--preset--font-family--rubik);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: var(--slant-accent, var(--wp--preset--color--myrtle));
}

.slant-row__stat-label {
	font-size: 12.5px;
	color: #6a6c82;
}

.slant-row__media {
	height: 96px;
	border-radius: var(--wp--custom--radius--swatch);
	background-color: #ece6ed;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(23, 25, 51, 0.08);
}

.slant-row__media--empty {
	background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--slant-accent, #297373) 16%, transparent) 0 11px, transparent 11px 22px);
}

@media (max-width: 700px) {
	.slant-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.slant-row__media {
		height: 140px;
	}

	/* The nav row is nowrap, so on a narrow screen the logo, the hamburger and the
	   Subscribe pill have to fit on one line — tighten the gaps rather than let it
	   overflow. Below 700px core swaps the links for the overlay menu anyway. */
	.slant-nav .slant-nav__inner {
		padding: 12px 20px;
		gap: 14px;
	}

	.slant-nav .slant-nav__links,
	.slant-nav .slant-nav__actions {
		gap: 10px;
	}

	.slant-nav__cta .wp-block-button__link,
	.slant-nav__auth .wp-block-button__link {
		padding: 8px 13px;
		font-size: 13.5px;
	}
}

/* --- Filter chips --------------------------------------------------------------------- */
.slant-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.slant-chip {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid rgba(23, 25, 51, 0.18);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: all var(--wp--custom--transition);
}

.slant-chip:hover {
	border-color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.slant-chip.is-active {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

/* --- Dashboard pages ------------------------------------------------------------------
   Pages using the "Dashboard (no footer)" template. The Metabase shortcodes ship their own
   unscoped CSS (`iframe { width:100%; height:1100px }` and `.dashboard-wrapper { max-width:
   95vw }`), so the theme's job here is only to keep out of its way: give the embed the full
   1080px container and don't inherit the article measure. */
.slant-dashboard__title {
	margin-bottom: 6px;
}

.slant-dashboard .dashboard-wrapper,
.slant-dashboard iframe {
	max-width: 100%;
}

/* The shortcode's tab buttons are unstyled browser defaults. Nudge them onto the brand
   without changing their behaviour — they are generated by the plugin, not by a block. */
.slant-dashboard .tab-buttons button {
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14px;
	background: transparent;
	border: var(--wp--custom--border--strong);
	color: var(--wp--preset--color--text-muted);
	transition: all var(--wp--custom--transition);
}

.slant-dashboard .tab-buttons button.active {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

/* --- Article + page ------------------------------------------------------------------- */
.slant-article__terms {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--myrtle);
	margin-bottom: 14px;
}

.slant-article__title {
	max-width: 20ch;
}

.slant-article__strap {
	font-size: clamp(18px, 2vw, 23px);
	max-width: 46ch;
	margin-top: 18px;
}

.slant-article__date {
	font-size: 13px;
	color: var(--wp--preset--color--text-faint);
	margin-top: 18px;
}

.slant-article__media img {
	border-radius: var(--wp--custom--radius--card);
	width: 100%;
	height: auto;
}

.slant-article__body {
	padding-block: var(--wp--preset--spacing--40);
}

.slant-article__foot {
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid rgba(23, 25, 51, 0.13);
}

.slant-page__body {
	padding-bottom: var(--wp--preset--spacing--60);
}

.slant-404 {
	padding-bottom: var(--wp--preset--spacing--60);
	text-align: center;
}

.slant-404 .wp-block-buttons {
	justify-content: center;
}

/* --- Coverage chips (core/categories, restyled) -------------------------------------- */
.slant-chips ul,
ul.slant-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.slant-chips li a {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(23, 25, 51, 0.16);
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.slant-chips li a:hover {
	border-color: var(--wp--preset--color--myrtle);
	color: var(--wp--preset--color--myrtle);
	text-decoration: none;
}

/* --- Subscribe form ------------------------------------------------------------------ */
.slant-subscribe {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.slant-subscribe input {
	flex: 1;
	min-width: 200px;
	border: 1px solid rgba(23, 25, 51, 0.22);
	background: #fff;
	border-radius: var(--wp--custom--radius--pill);
	padding: 13px 20px;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--text);
}

.slant-subscribe button {
	background: var(--wp--preset--color--navy);
	color: #fff;
	border: none;
	padding: 13px 26px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

/* Reduced motion: drop the hover lift, keep the shadow cue. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}