/**
 * Selar theme styles.
 *
 * Tokens live in theme.json; this file covers component styling that
 * block supports can't express. Desktop-first: tablet overrides sit in
 * `@media (max-width: 1099px)` and mobile ones in `@media (max-width: 767px)`,
 * next to the component they change.
 */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Page gutters: 80px (theme.json) on desktop, 40px on tablet, 20px on mobile. */
@media (max-width: 1099px) {
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--40);
		--wp--style--root--padding-right: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 767px) {
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--20);
		--wp--style--root--padding-right: var(--wp--preset--spacing--20);
	}

	/* The blog home, archives, search and 404 sit on a light grey page on mobile. */
	body.home,
	body.archive,
	body.search,
	body.error404 {
		background-color: var(--wp--preset--color--background-secondary);
	}
}

/*
 * Design system letter-spacing is -1% of each element's own font size.
 * An em value set on body is inherited as a fixed px value (computed at 16px),
 * so re-declare it per element. Zero specificity: any explicit letter-spacing
 * (block supports, Site Editor, component rules) still wins, and descendants
 * of an element with custom inline spacing keep inheriting it.
 */
:where(body *) {
	letter-spacing: -0.01em;
}

:where([style*="letter-spacing"] *) {
	letter-spacing: inherit;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.selar-main {
	padding-top: 0;
	padding-bottom: 0;
}

.selar-main > * {
	margin-block-start: 0;
}

.selar-section {
	padding-top: 40px;
	padding-bottom: 40px;
}

.selar-section-title.wp-block-heading {
	margin: 0 0 24px;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 28px;
	color: var(--wp--preset--color--brand);
}

/* Mobile: sections are 24px apart, 16px from the title to the content. */
@media (max-width: 767px) {
	.selar-section {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.selar-section-title.wp-block-heading {
		margin-bottom: 16px;
	}

	/* The 24px block gap would otherwise win the margin collapse. */
	.selar-section-title + * {
		margin-top: 16px !important;
	}

	/* The category bar's 16px bottom padding already separates it from the first section. */
	.selar-category-nav + .selar-main > .selar-section:first-child {
		padding-top: 0;
	}
}

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

.selar-site-header {
	position: relative;
	z-index: 20;
}

.selar-header.wp-block-group {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.selar-header .selar-logo,
.selar-header .selar-logo img {
	margin: 0;
	display: block;
}

.selar-header-actions {
	justify-self: end;
}

.selar-header-actions p {
	margin: 0;
}

.selar-header-actions p a {
	color: var(--wp--preset--color--content-primary);
}

.selar-header-actions .wp-block-button__link {
	padding: 10px 16px;
}

.selar-primary-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--content-tertiary);
}

.selar-primary-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand);
}

/*
 * Active item: brand colour at 15px (inactive items are 14px).
 * "Blog" (2nd item) is active on every page unless another item is the current one
 * (e.g. the Creators Spotlight category). body.blog keeps it working without :has().
 */
.selar-primary-nav .current-menu-item > .wp-block-navigation-item__content,
body.blog .selar-primary-nav .wp-block-navigation-item:nth-child(2) > .wp-block-navigation-item__content,
.selar-primary-nav:not(:has(.current-menu-item)) .wp-block-navigation-item:nth-child(2) > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand);
	font-size: 15px;
}

.selar-menu-toggle {
	display: none;
}

/* Tablet and mobile: hamburger + logo on the left, Start Selling on the right; nav and Login move into the menu sheet. */
@media (max-width: 1099px) {
	.selar-header.has-selar-menu {
		grid-template-columns: auto auto 1fr;
		column-gap: 8px;
	}

	.selar-header.has-selar-menu .selar-primary-nav,
	.selar-header.has-selar-menu .selar-header-actions > p {
		display: none;
	}

	.selar-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--content-primary);
		cursor: pointer;
	}
}

@media (max-width: 767px) {
	/* 56px bar: 40px button + 8px above and below. */
	.selar-site-header > .wp-block-group {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		background: var(--wp--preset--color--white);
	}

	.selar-header .selar-logo img {
		width: 48px !important;
	}
}

/* -------------------------------------------------------------------------
 * Mobile menu sheet (patterns/header.php)
 * ---------------------------------------------------------------------- */

.selar-menu {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: 600px;
	height: auto;
	max-height: calc(100dvh - 56px);
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 24px 24px 0 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--content-primary);
	overflow: hidden;
}

.selar-menu[open] {
	display: flex;
	animation: selar-sheet-in 0.25s ease-out;
}

.selar-menu::backdrop {
	background: rgba(19, 17, 18, 0.6);
}

html:has(.selar-menu[open]) {
	overflow: hidden;
}

@keyframes selar-sheet-in {
	from {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.selar-menu[open] {
		animation: none;
	}
}

/* Fills the dialog, so a click that lands on the dialog itself is a backdrop click. */
.selar-menu__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: min(584px, calc(100dvh - 56px));
	overflow-y: auto;
}

.selar-menu__head {
	display: flex;
	justify-content: flex-end;
	padding: 16px 32px 0;
}

.selar-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--background-secondary);
	color: var(--wp--preset--color--content-primary);
	cursor: pointer;
}

.selar-menu__title.wp-block-heading,
.selar-menu__title {
	margin: 0;
	padding: 0 32px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border-tertiary);
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 28px;
}

.selar-menu__row {
	display: block;
	padding: 24px 32px;
	border-bottom: 1px solid var(--wp--preset--color--border-tertiary);
}

.selar-menu__link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
}

a.selar-menu__link:hover,
.selar-menu__group summary:hover {
	color: var(--wp--preset--color--brand);
}

.selar-menu__group summary {
	list-style: none;
}

.selar-menu__group summary::-webkit-details-marker {
	display: none;
}

.selar-menu__chevron {
	margin-left: auto;
	transition: transform 0.2s ease;
}

.selar-menu__group[open] {
	padding-bottom: 16px;
}

.selar-menu__group[open] .selar-menu__chevron {
	transform: rotate(180deg);
}

.selar-menu__cats {
	margin: 12px 0 0;
	padding: 8px;
	border-radius: 12px;
	background: var(--wp--preset--color--background-secondary);
	list-style: none;
}

.selar-menu__cats a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 6px;
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
}

.selar-menu__cats a::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	margin-inline: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--content-tertiary-inverse);
}

.selar-menu__cats a:hover {
	color: var(--wp--preset--color--brand);
}

.selar-menu__cats a.is-current {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
}

.selar-menu__cats a.is-current::before {
	background: var(--wp--preset--color--brand);
}

.selar-menu__foot {
	margin-top: auto;
	padding: 16px 32px 32px;
	border-top: 1px solid var(--wp--preset--color--border-tertiary);
}

.selar-menu__login {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 999px;
	background: var(--wp--preset--color--background-secondary);
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
}

.selar-menu__login:hover {
	background: var(--wp--preset--color--background-tertiary);
	color: var(--wp--preset--color--content-primary);
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.selar-hero-wrap,
.selar-page-hero {
	padding-top: 0;
	padding-bottom: 0;
}

.selar-hero {
	margin-top: 0 !important;
	text-align: center;
}

.selar-page-hero__inner {
	margin-top: 0 !important;
}

.selar-hero > * {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hero rhythm: kicker → 24px → title → 16px → intro → 24px → search. */
.selar-hero > * {
	margin-top: 0;
	margin-bottom: 0;
}

.selar-hero > * + * {
	margin-top: 24px !important;
}

.selar-hero__text > * {
	margin-top: 0;
	margin-bottom: 0;
}

.selar-hero__text > * + * {
	margin-top: 16px !important;
}

.selar-kicker {
	display: table;
	margin-inline: auto;
	padding: 6px 12px;
	border-radius: 100px;
	background: var(--wp--preset--color--primary-1);
	color: var(--wp--preset--color--white);
	font-weight: 500;
	line-height: 16px;
}

@media (max-width: 1099px) {
	.selar-hero {
		padding-top: 64px !important;
		padding-bottom: 48px !important;
	}
}

/* Mobile hero: 24px top/bottom, 16px between every item, 32/40 title, 14/20 intro. */
@media (max-width: 767px) {
	body.home .selar-hero-wrap.has-background {
		background: var(--wp--preset--color--background-secondary) !important;
	}

	.selar-hero {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.selar-hero > * + * {
		margin-top: 16px !important;
	}

	.selar-hero h1.wp-block-heading {
		font-size: var(--wp--preset--font-size--xxl);
		line-height: 40px;
	}

	.selar-hero__text p {
		font-size: var(--wp--preset--font-size--sm) !important;
		font-weight: 400 !important;
		line-height: 20px;
	}

	.selar-kicker {
		padding: 6px 12px;
		font-size: 10px !important;
		line-height: 14px;
	}
}

/* Search pill (hero, search results, 404) */
.selar-search.wp-block-search {
	margin-inline: auto;
	max-width: 100%;
}

.selar-search .wp-block-search__inside-wrapper {
	margin-inline: auto;
	max-width: 100%;
}

.selar-search .wp-block-search__inside-wrapper {
	flex-direction: row-reverse;
	align-items: center;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	gap: 8px;
}

.selar-search .wp-block-search__input {
	border: 0;
	padding: 0;
	height: 100%;
	background: transparent;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
	color: var(--wp--preset--color--content-primary);
}

.selar-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--content-primary);
	opacity: 1;
}

.selar-search .wp-block-search__input:focus {
	outline: none;
}

.selar-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--brand);
}

.selar-search .wp-block-search__button {
	margin: 0;
	padding: 0;
	width: 24px;
	height: 24px;
	background: transparent;
	color: var(--wp--preset--color--content-primary);
}

.selar-search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	fill: currentColor;
}

/* Page hero (archive / search / index) */
.selar-page-hero__inner {
	padding-top: 64px;
	padding-bottom: 48px;
	text-align: center;
}

.selar-page-hero__inner .wp-block-query-title {
	margin: 0;
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 48px;
}

.selar-page-hero__inner .wp-block-term-description {
	margin-top: 12px;
}

.selar-page-hero__inner .wp-block-term-description p {
	margin: 0;
}

/* "89 BLOG POSTS PUBLISHED" pill under the archive title/description. */
.selar-archive-count {
	display: table;
	margin: 24px auto 0 !important;
	padding: 6px 12px;
	border-radius: 100px;
	background: var(--wp--preset--color--pink-100);
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 16px;
	text-transform: uppercase;
}

/* Mobile archive header: 24px top and bottom, 12px between title, description and count; 32/40 title. */
@media (max-width: 767px) {
	.selar-page-hero__inner {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.selar-page-hero__inner .wp-block-query-title {
		font-size: var(--wp--preset--font-size--xxl);
		line-height: 40px;
	}

	.selar-page-hero__inner .wp-block-term-description {
		font-size: var(--wp--preset--font-size--sm);
		line-height: 20px;
	}

	.selar-archive-count {
		margin-top: 12px !important;
		padding: 6px 12px;
		font-size: 10px;
		line-height: 14px;
	}
}

/* Author page header: avatar, name, role, bio, profile links and post count, centred. */
.selar-author-header {
	gap: 24px;
}

.selar-author-header > * {
	margin: 0 !important;
}

.selar-author-header__avatar img {
	display: block;
	border: 4px solid var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--wp--preset--color--border-tertiary);
}

.selar-author-header__text {
	gap: 8px;
	max-width: 640px;
}

.selar-author-header__text > * {
	margin: 0 !important;
}

.selar-author-header__role {
	color: var(--wp--preset--color--primary-1);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 24px;
}

.selar-author-header__bio {
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
}

.selar-author-header__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
}

.selar-author-header__links a {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.selar-author-header__links a:hover {
	color: var(--wp--preset--color--primary-1);
}

.selar-author-header .selar-archive-count {
	margin: 0 !important;
}

@media (max-width: 767px) {
	.selar-author-header {
		gap: 16px;
	}

	.selar-author-header__avatar img {
		width: 96px;
		height: 96px;
	}

	.selar-author-header__role,
	.selar-author-header__bio {
		font-size: var(--wp--preset--font-size--sm);
		line-height: 20px;
	}
}

/* Author names link to the author page without looking like links. */
.wp-block-post-author-name a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-author-name a:hover {
	text-decoration: underline;
}

.selar-page-hero__inner .selar-search {
	margin-top: 24px;
}

/* Search page: search box first, then "Search results showing for “term”". */
.selar-page-hero__inner > .selar-search:first-child {
	margin-top: 0;
}

.selar-page-hero__inner .selar-search-title.wp-block-query-title {
	margin-top: 40px;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 32px;
	text-align: center;
}

/* 24px from the search title to the results (no category bar in between on search). */
body.search .selar-page-hero__inner {
	padding-bottom: 0;
}

body.search .selar-main > .selar-section:first-child {
	padding-top: 24px;
}

/*
 * Mobile search: the pink header holds only the search box (100px below the nav, 20px above
 * the grey area). The results title sits on the grey page: a full-width grey box-shadow is
 * painted behind it, so the markup can stay shared with desktop.
 */
@media (max-width: 767px) {
	body.search .selar-page-hero__inner {
		padding-top: 100px;
	}

	body.search .selar-page-hero__inner .selar-search-title.wp-block-query-title {
		margin-top: 20px;
		padding-top: 24px;
		background: var(--wp--preset--color--background-secondary);
		box-shadow: 0 0 0 100vmax var(--wp--preset--color--background-secondary);
		clip-path: inset(0 -100vmax);
		font-size: var(--wp--preset--font-size--lg);
		line-height: 28px;
	}

	body.search .selar-main > .selar-section:first-child {
		padding-top: 16px;
	}
}

/* Search empty state (patterns/search-no-results.php). */
.selar-empty {
	gap: 31px;
	width: 100%;
	padding-top: 69px;
	padding-bottom: 69px;
	text-align: center;
}

.selar-empty > *,
.selar-empty__text > * {
	margin: 0;
}

.selar-empty__icon img {
	display: block;
}

.selar-empty__text {
	gap: 4px;
}

.selar-empty__title {
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 24px;
}

.selar-empty__tips {
	padding: 0;
	list-style: disc inside;
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
}

.selar-search-title__label {
	color: var(--wp--preset--color--content-tertiary-inverse);
}

.selar-search-title__term {
	color: var(--wp--preset--color--content-primary);
}

/* -------------------------------------------------------------------------
 * Category bar
 * ---------------------------------------------------------------------- */

.selar-category-nav {
	position: sticky;
	top: 0;
	z-index: 10;
}

.admin-bar .selar-category-nav {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.selar-category-bar {
	position: static !important;
}

.selar-pills .wp-block-navigation__container {
	gap: 8px;
}

.selar-pills .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 999px;
	background: var(--wp--preset--color--background-tertiary);
	font-weight: 400;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Inactive text colour comes from the block's textColor (content-tertiary-inverse). */
.selar-pills .wp-block-navigation-item:not(.current-menu-item) > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand);
}

.selar-pills .current-menu-item > .wp-block-navigation-item__content,
body.blog .selar-pills .selar-pill-all > .wp-block-navigation-item__content,
body.home .selar-pills .selar-pill-all > .wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-weight: 500;
}

/* Tablet and mobile: the pill row scrolls sideways, bleeding to both screen edges. */
@media (max-width: 1099px) {
	.selar-pills.wp-block-navigation {
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		max-width: none;
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.selar-pills.wp-block-navigation::-webkit-scrollbar {
		display: none;
	}

	/* Core lets the list scroll on its own; keep it full width so the nav is the only scroller. */
	.selar-pills .wp-block-navigation__container {
		flex: none;
		overflow: visible;
	}
}

/* Mobile: grey bar without borders, 28px pills at 12px. */
@media (max-width: 767px) {
	.selar-category-bar.has-background {
		padding-top: 24px !important;
		padding-bottom: 16px !important;
		border-width: 0 !important;
		background: var(--wp--preset--color--background-secondary) !important;
	}

	.selar-pills .wp-block-navigation-item__content {
		height: 28px;
		padding: 0 12px;
		font-size: var(--wp--preset--font-size--xs);
		line-height: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Shared: badge, reading time, author row
 * ---------------------------------------------------------------------- */

.selar-card__meta {
	width: 100%;
}

.selar-badge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
}

/* Show only the primary (first) category as the badge. */
.selar-badge .wp-block-post-terms__separator,
.selar-badge a:not(:first-child) {
	display: none;
}

.selar-badge a {
	padding: 4px 8px;
	border-radius: 24px;
	background: var(--wp--preset--color--pink-mid);
	color: var(--wp--preset--color--brand);
	font-weight: 500;
	text-transform: uppercase;
}

.selar-reading-time {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
	color: var(--wp--preset--color--content-tertiary);
	white-space: nowrap;
}

.selar-author {
	gap: 8px;
	width: 100%;
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--border-tertiary);
}

.selar-author__avatar,
.selar-author__avatar img {
	display: block;
	margin: 0;
	border-radius: 50%;
}

.selar-author__meta {
	gap: 0;
	min-width: 0;
}

.selar-author__meta > * {
	margin: 0;
}

.selar-author--lg {
	gap: 12px;
	padding-top: 20px;
}

.selar-author__sub {
	gap: 4px;
}

.selar-author__cat {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
	color: var(--wp--preset--color--content-tertiary);
}

.selar-author__cat a {
	color: inherit;
}

.selar-author__cat .wp-block-post-terms__separator,
.selar-author__cat a:not(:first-of-type) {
	display: none;
}

/* -------------------------------------------------------------------------
 * Blog card
 * ---------------------------------------------------------------------- */

.selar-grid .wp-block-post-template {
	gap: 24px;
}

.selar-card {
	gap: 0;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-card);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
}

.selar-card__image {
	margin: 0;
	width: 100%;
	background: var(--wp--preset--color--pink-mid);
}

.selar-card__image img {
	display: block;
}

.selar-card__body {
	flex: 1;
	gap: 8px;
	padding: 12px 20px;
}

.selar-card__text {
	flex: 1;
	gap: 2px;
}

.selar-card__title.wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 28px;
	letter-spacing: -0.01em;
}

.selar-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--brand);
}

.selar-card__excerpt,
.selar-card__excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.selar-card__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1099px) {
	.selar-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile card: one column, 2:1 image, 16/24 title, 12/16 excerpt and author, 10/14 badge, reading time and date. */
@media (max-width: 767px) {
	.selar-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.selar-card__image img {
		aspect-ratio: 2 / 1 !important;
	}

	.selar-card .selar-badge,
	.selar-card .selar-reading-time,
	.selar-card .wp-block-post-date {
		font-size: 10px;
		line-height: 14px;
	}

	.selar-card__title.wp-block-post-title {
		font-size: var(--wp--preset--font-size--md);
		line-height: 24px;
	}

	.selar-card__excerpt,
	.selar-card__excerpt p {
		font-size: var(--wp--preset--font-size--xs);
		line-height: 16px;
	}

	.selar-card .wp-block-post-author-name {
		font-size: var(--wp--preset--font-size--xs);
		line-height: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Load more / pagination
 * ---------------------------------------------------------------------- */

.selar-load-more {
	margin-top: 24px;
}

/* Font family is inherited from body. */
.selar-load-more .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
	transition: background-color 0.15s ease;
}

.selar-load-more .wp-block-query-pagination-next:hover,
.selar-load-more .wp-block-query-pagination-next:focus-visible {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--white);
}

.selar-pagination a,
.selar-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.selar-load-more .wp-block-query-pagination-next.is-loading {
	opacity: 0.6;
	cursor: progress;
}

/* Mobile: "More articles" is a full-width white band (40px top and bottom) on the grey home page. */
@media (max-width: 767px) {
	.selar-more.alignwide {
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		max-width: none;
		padding: 40px var(--wp--style--root--padding-right) 40px var(--wp--style--root--padding-left);
		background: var(--wp--preset--color--white);
	}

	.selar-load-more .wp-block-query-pagination-next {
		text-transform: uppercase;
	}
}

/* Numbered pagination (patterns/pagination-numbers.php) — kept for later use. */
.selar-pagination {
	margin-top: 40px;
	gap: 8px;
}

.selar-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
 * Featured / Popular slider
 * ---------------------------------------------------------------------- */

.selar-featured {
	padding-top: 32px;
	padding-bottom: 32px;
	background: var(--wp--preset--color--pink-mid);
	overflow-x: clip;
}

.selar-featured > * {
	margin-block-start: 0;
}

.selar-tabs {
	gap: 24px;
	margin-bottom: 20px;
}

.selar-tab.wp-block-heading {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 3px solid transparent;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 28px;
	color: var(--wp--preset--color--content-secondary);
	opacity: 0.2;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.selar-tab:hover,
.selar-tab:focus-visible {
	opacity: 0.6;
}

.selar-tab.is-active {
	border-bottom-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	opacity: 1;
}

.selar-tab-panel {
	display: none;
}

.selar-tab-panel.is-active {
	display: block;
}

/* Horizontal slider track (Featured/Popular and Related Articles). */
.selar-slider .wp-block-post-template {
	display: flex;
	gap: 16px;
	max-width: none;
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.selar-slider .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.selar-slider .wp-block-post-template > li {
	margin: 0;
	scroll-snap-align: start;
}

/* Featured: track starts on the content edge but bleeds to the viewport's right edge. */
.selar-featured .selar-slider .wp-block-post-template {
	margin-right: calc((100% - 100vw) / 2);
}

.selar-featured .selar-slider .wp-block-post-template > li {
	flex: 0 0 min(1000px, 78%);
}

/* Related: three cards visible within the content width. Extra bottom padding keeps card shadows from being clipped. */
.selar-slider--cards .wp-block-post-template {
	gap: 24px;
	padding-bottom: 24px;
	margin-bottom: -20px;
}

.selar-slider--cards .wp-block-post-template > li {
	flex: 0 0 calc((100% - 48px) / 3);
}

.selar-feature {
	gap: 32px;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--featured);
}

.selar-feature__image {
	flex: 0 0 44.75%;
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--pink-mid);
}

.selar-feature__image img {
	display: block;
	border-radius: 20px;
}

.selar-feature__body {
	flex: 1;
	gap: 20px;
	min-width: 0;
}

.selar-feature__body .selar-reading-time {
	color: var(--wp--preset--color--content-primary);
}

.selar-feature__text {
	gap: 12px;
}

.selar-feature__title.wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 40px;
}

.selar-feature__title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--brand);
}

.selar-feature__excerpt,
.selar-feature__excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
	color: var(--wp--preset--color--content-primary);
}

.selar-feature__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Tablet and mobile: stacked feature card (image on top), 16/24 tabs.
 * The next card peeks in from the right edge.
 */
@media (max-width: 1099px) {
	.selar-tab.wp-block-heading {
		font-size: var(--wp--preset--font-size--md);
		line-height: 24px;
	}

	.selar-featured .selar-slider .wp-block-post-template > li {
		flex: 0 0 min(420px, calc(100% - 40px));
	}

	/* 15px + 1px border = Figma's 16px padding with an inside stroke. */
	.selar-feature.wp-block-group {
		flex-direction: column;
		padding: 15px;
	}

	.selar-feature__image {
		flex: none;
		width: 100%;
	}

	.selar-feature__image img {
		aspect-ratio: 332 / 263 !important;
	}

	.selar-feature__body {
		gap: 12px;
		justify-content: flex-start;
	}

	.selar-feature__body .selar-reading-time {
		font-size: 10px;
		line-height: 14px;
	}

	.selar-feature__title.wp-block-post-title {
		font-size: var(--wp--preset--font-size--lg);
		line-height: 28px;
	}

	.selar-feature__excerpt,
	.selar-feature__excerpt p {
		font-size: var(--wp--preset--font-size--sm);
		line-height: 20px;
	}

	.selar-feature__excerpt .wp-block-post-excerpt__excerpt {
		-webkit-line-clamp: 5;
	}

	.selar-feature .selar-author--lg {
		padding-top: 12px;
	}
}

@media (max-width: 767px) {
	.selar-featured .selar-slider .wp-block-post-template > li {
		flex-basis: min(364px, calc(100% - 40px));
	}
}

.selar-slider-progress {
	position: relative;
	width: 340px;
	max-width: 100%;
	height: 5px;
	margin: 20px auto 0;
	border-radius: 14px;
	background: var(--wp--preset--color--brand-mid);
	overflow: hidden;
}

.selar-slider-progress span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 58%;
	border-radius: 14px;
	background: var(--wp--preset--color--content-secondary);
	transition: transform 0.1s linear, width 0.2s ease;
}

/* -------------------------------------------------------------------------
 * Single post
 * ---------------------------------------------------------------------- */

/* Article hero: a card with the featured image (and breadcrumb) on top, then meta, title and author. */
.selar-article {
	padding-top: 0;
}

/* 1300px at desktop: 10px past the wide width on each side. */
.selar-article > .selar-post-hero.alignwide {
	width: calc(100% + 20px);
	max-width: calc(var(--wp--style--global--wide-size) + 20px) !important;
	margin-inline: -10px !important;
}

.selar-post-hero {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 20px;
	background: var(--wp--preset--color--background-secondary);
}

.selar-post-hero > * {
	margin-block: 0;
}

/* The image band covers the card's border, as in the design. */
.selar-post-hero__media {
	position: relative;
	height: 345px;
	margin: -1px -1px 0 !important;
	padding: 62px 80px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--brand); /* Shown when a post has no featured image. */
}

.selar-post-hero__media > * {
	position: relative;
	z-index: 1;
	margin-block: 0;
}

.selar-post-hero__media > .selar-post-hero__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: 100%;
	margin: 0;
}

.selar-post-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.selar-post-hero__media > .selar-breadcrumb {
	display: inline-flex;
	vertical-align: top;
}

.selar-breadcrumb {
	gap: 10px;
	height: 48px;
	padding: 6px 16px;
	border-radius: 100px;
	background: rgba(23, 3, 19, 0.75);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 16px;
	text-transform: uppercase;
}

.selar-breadcrumb > * {
	margin: 0;
}

.selar-breadcrumb__caret {
	display: block;
	flex: none;
}

.selar-breadcrumb__home a {
	color: var(--wp--preset--color--white);
}

.selar-breadcrumb__current,
.selar-breadcrumb__current a {
	color: var(--wp--preset--color--content-disabled);
}

.selar-breadcrumb__current .wp-block-post-terms__separator,
.selar-breadcrumb__current a:not(:first-child) {
	display: none;
}

.selar-breadcrumb a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.selar-post-hero > .selar-post-hero__content {
	gap: 0;
	padding: 20px 80px 19px;
}

.selar-post-hero__meta {
	gap: 12px;
}

/* Yellow variant of the category badge. */
.selar-badge--yellow a {
	padding: 6px 16px;
	border-radius: 100px;
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--brand);
}

.selar-post-hero__stats {
	gap: 4px;
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 20px;
}

.selar-post-hero__stats > *,
.selar-post-hero__stats .wp-block-post-date {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.selar-post-hero__title.wp-block-post-title {
	margin: 0;
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 56px;
}

.selar-post-hero__author {
	gap: 12px;
}

.selar-post-hero__author .wp-block-post-author-name {
	color: var(--wp--preset--color--content-primary);
}

.selar-post-hero__author .wp-block-selar-author-title {
	margin: 0;
	color: var(--wp--preset--color--primary-1);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
	opacity: 0.8;
}

/* Below desktop the card sits inside the page gutters. */
@media (max-width: 1099px) {
	.selar-article > .selar-post-hero.alignwide {
		width: 100%;
		margin-inline: 0 !important;
	}

	.selar-post-hero__media {
		height: 300px;
		padding: 40px;
	}

	.selar-post-hero > .selar-post-hero__content {
		padding: 20px 40px 24px;
	}
}

@media (max-width: 767px) {
	.selar-post-hero__media {
		height: 220px;
		padding: 20px;
	}

	.selar-post-hero > .selar-post-hero__content {
		gap: 8px;
		padding: 16px 20px 20px;
	}

	.selar-post-hero__title.wp-block-post-title {
		font-size: var(--wp--preset--font-size--xl);
		line-height: 32px;
	}
}

/* Page template title/image (page.html). */
.selar-post-title.wp-block-post-title {
	margin-top: 20px;
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 48px;
}

.selar-post-image {
	margin-top: 40px !important;
	overflow: hidden;
	border-radius: 24px;
}

.selar-post-content {
	margin-top: 64px !important;
	font-size: 18px;
	line-height: 30px;
}

.selar-post-content h2 { font-size: var(--wp--preset--font-size--xxl); line-height: 40px; margin-top: 48px; }
.selar-post-content h3 { font-size: var(--wp--preset--font-size--xl); line-height: 32px; margin-top: 40px; }

.selar-post-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.selar-post-content img {
	border-radius: 16px;
}

/*
 * Pull quote: pale pink panel with a brand left border (desktop text size estimated; 20/28 on mobile is from Figma).
 * Only core quotes and bare <blockquote>s: embeds (e.g. blockquote.twitter-tweet) are left to their own script.
 */
.selar-post-content .wp-block-quote,
.selar-post-content blockquote:not([class]) {
	margin-left: 0;
	margin-right: 0;
	padding: 24px;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 0 8px 8px 0;
	background: var(--wp--preset--color--pink-50);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-style: normal;
	font-weight: 600;
	line-height: 32px;
}

.selar-post-content .wp-block-quote > *,
.selar-post-content blockquote:not([class]) > * {
	margin: 0;
}

.selar-post-content .wp-block-quote > * + *,
.selar-post-content blockquote:not([class]) > * + * {
	margin-top: 12px;
}

.selar-post-content .wp-block-quote cite {
	display: block;
	color: var(--wp--preset--color--content-tertiary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}

@media (max-width: 1099px) {
	.selar-post-content {
		margin-top: 48px !important;
	}
}

/* Mobile article body: 18/28 text, 28px between blocks, 24/32 H2, 20/28 H3 and quotes, 16/24 lists. */
@media (max-width: 767px) {
	.selar-post-content {
		margin-top: 40px !important;
		line-height: 28px;
	}

	.selar-post-content > * + * {
		margin-top: 28px;
	}

	.selar-post-content h2 {
		margin-top: 28px;
		font-size: var(--wp--preset--font-size--xl);
		line-height: 32px;
	}

	.selar-post-content h3 {
		margin-top: 28px;
		font-size: var(--wp--preset--font-size--lg);
		line-height: 28px;
	}

	.selar-post-content .wp-block-quote,
	.selar-post-content blockquote:not([class]) {
		font-size: var(--wp--preset--font-size--lg);
		line-height: 28px;
	}

	.selar-post-content ul,
	.selar-post-content ol {
		font-size: var(--wp--preset--font-size--md);
		line-height: 24px;
	}
}

.selar-post-footer {
	margin-top: 40px !important;
}

.selar-tags a {
	display: inline-block;
	margin: 0 4px 8px 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--pink-mid);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 16px;
}

.selar-tags .wp-block-post-terms__separator {
	display: none;
}

/* About the author box (hidden in PHP when the author has no bio). */
.selar-author-box {
	gap: 20px;
	margin-top: 40px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 16px;
	background: var(--wp--preset--color--background-secondary);
}

.selar-author-box__avatar,
.selar-author-box__avatar img {
	display: block;
	flex: none;
	margin: 0;
	border-radius: 50%;
}

.selar-author-box__body {
	flex: 1;
	gap: 12px;
	min-width: 0;
}

.selar-author-box__title {
	gap: 0.3em;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 28px;
}

.selar-author-box__title > *,
.selar-author-box__title .wp-block-post-author-name {
	margin: 0;
	color: inherit;
	font: inherit;
}

.selar-author-box__bio {
	margin: 0;
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.selar-related {
	margin-top: 48px;
}

.selar-related .selar-section-title.wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 32px;
	text-align: center;
}

/* Related Articles: two cards per view on tablet, one with the next peeking in on mobile. */
@media (max-width: 1099px) {
	.selar-slider--cards .wp-block-post-template > li {
		flex-basis: calc((100% - 24px) / 2);
	}
}

@media (max-width: 767px) {
	.selar-related {
		margin-top: 16px;
	}

	.selar-slider--cards .wp-block-post-template {
		gap: 16px;
	}

	.selar-slider--cards .wp-block-post-template > li {
		flex-basis: calc(100% - 48px);
	}
}

/* -------------------------------------------------------------------------
 * Page / 404
 * ---------------------------------------------------------------------- */

.selar-page {
	padding-top: 64px;
	padding-bottom: 64px;
}

/* 404 page (patterns/404-content.php). */
.selar-404-section {
	padding-top: 40px;
	padding-bottom: 24px;
}

.selar-404 {
	gap: 0;
	text-align: center;
}

.selar-404 > * {
	margin: 0;
}

.selar-404__illustration {
	max-width: 100%;
}

.selar-404__illustration img {
	display: block;
	max-width: 100%;
	height: auto;
}

.selar-404__text {
	gap: 8px;
}

/* Parent-qualified to beat core's `body .is-layout-flex > * { margin: 0 }`. */
.selar-404 > .selar-404__text {
	margin-top: 32px;
}

.selar-404__text > * {
	margin: 0;
}

.selar-404__title.wp-block-heading {
	color: var(--wp--preset--color--content-primary);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 32px;
}

.selar-404__lead {
	max-width: 480px;
	color: var(--wp--preset--color--content-tertiary);
	font-size: var(--wp--preset--font-size--md);
	line-height: 24px;
}

.selar-404 > .selar-search {
	width: 100%;
	margin-top: 24px;
}

.selar-404 > .selar-404__actions {
	margin-top: 16px;
}

.selar-404-latest .selar-section-title.wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 32px;
	text-align: center;
}

/* Mobile 404 (no Figma frame; sizes follow the other mobile screens). */
@media (max-width: 767px) {
	.selar-404-section {
		padding-top: 32px;
	}

	.selar-404__lead {
		font-size: var(--wp--preset--font-size--sm);
		line-height: 20px;
	}

	.selar-404-latest .selar-section-title.wp-block-heading {
		font-size: var(--wp--preset--font-size--lg);
		line-height: 28px;
	}
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.selar-site-footer {
	margin-top: 0;
}

.selar-newsletter {
	gap: 0;
}

.selar-newsletter > * {
	flex: 1 1 0;
	min-width: 0;
}

.selar-newsletter h2,
.selar-newsletter p {
	margin: 0;
}

.selar-newsletter__legal {
	opacity: 0.8;
}

.selar-subscribe {
	display: flex;
	gap: 12px;
	width: 100%;
}

.selar-subscribe input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--border-tertiary);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
	color: var(--wp--preset--color--content-primary);
}

.selar-subscribe input[type="email"]::placeholder {
	color: var(--wp--preset--color--content-disabled);
}

.selar-subscribe button {
	height: 40px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	cursor: pointer;
}

.selar-subscribe button:hover {
	background: var(--wp--preset--color--content-primary);
}

/* Newsletter form block: the theme's form, or a plugin's form restyled to match. */
.selar-newsletter-form {
	width: 100%;
}

.selar-subscribe__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Setup hint, shown only to people who can edit the site. */
.selar-newsletter-form__notice {
	padding: 12px 16px;
	border: 1px dashed var(--wp--preset--color--pink-200);
	border-radius: 12px;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.selar-newsletter-form__notice a {
	color: var(--wp--preset--color--yellow);
	font-weight: 500;
	text-decoration: underline;
}

/* Success / error messages from Mailchimp for WP, Contact Form 7 and WPForms. */
.selar-newsletter-form .mc4wp-response:not(:empty),
.selar-newsletter-form .wpcf7 form .wpcf7-response-output,
.selar-newsletter-form .wpforms-confirmation-container-full {
	margin: 12px 0 0 !important;
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12) !important;
	color: var(--wp--preset--color--white) !important;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 20px;
}

.selar-newsletter-form .mc4wp-alert p,
.selar-newsletter-form .wpforms-confirmation-container-full p {
	margin: 0;
	color: inherit;
}

.selar-newsletter-form .wpcf7 form .wpcf7-response-output:empty,
.selar-newsletter-form .wpcf7 form.init .wpcf7-response-output {
	display: none;
}

/* Plugin forms: fields and buttons in the theme's pill style. */
.selar-newsletter-form .wpcf7 form,
.selar-newsletter-form .wpforms-container .wpforms-form,
.selar-newsletter-form--shortcode form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.selar-newsletter-form .wpcf7 form > p,
.selar-newsletter-form .wpcf7 form > .wpcf7-response-output,
.selar-newsletter-form .wpforms-container .wpforms-field-container,
.selar-newsletter-form .wpforms-container .wpforms-field {
	flex: 1 1 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.selar-newsletter-form .wpcf7 form > p:has(input[type="email"]),
.selar-newsletter-form .wpforms-container .wpforms-field-container:has(input[type="email"]) {
	flex: 1 1 240px;
}

.selar-newsletter-form .wpcf7 form > p:has([type="submit"]),
.selar-newsletter-form .wpforms-container .wpforms-submit-container {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
}

.selar-newsletter-form label,
.selar-newsletter-form .wpforms-container .wpforms-field-label,
.selar-newsletter-form .wpforms-container .wpforms-field-description {
	color: var(--wp--preset--color--pink-200) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	font-weight: 500 !important;
	line-height: 16px !important;
}

.selar-newsletter-form :is(.wpcf7, .wpforms-container) :is(input[type="email"], input[type="text"], input[type="tel"], input[type="url"], select),
.selar-newsletter-form--shortcode :is(input[type="email"], input[type="text"], input[type="tel"], input[type="url"], select) {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: 40px !important;
	padding: 8px 12px !important;
	border: 1px solid var(--wp--preset--color--border-tertiary) !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--white) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--content-primary) !important;
	font: inherit !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	line-height: 20px !important;
}

.selar-newsletter-form :is(.wpcf7, .wpforms-container) textarea,
.selar-newsletter-form--shortcode textarea {
	width: 100% !important;
	padding: 8px 12px !important;
	border: 1px solid var(--wp--preset--color--border-tertiary) !important;
	border-radius: 16px !important;
	background: var(--wp--preset--color--white) !important;
	font: inherit !important;
	font-size: var(--wp--preset--font-size--sm) !important;
}

.selar-newsletter-form :is(.wpcf7, .wpforms-container) :is(input, textarea)::placeholder,
.selar-newsletter-form--shortcode :is(input, textarea)::placeholder {
	color: var(--wp--preset--color--content-disabled) !important;
}

.selar-newsletter-form :is(.wpcf7, .wpforms-container) :is(button[type="submit"], input[type="submit"]),
.selar-newsletter-form--shortcode :is(button[type="submit"], input[type="submit"]) {
	height: 40px !important;
	margin: 0 !important;
	padding: 8px 16px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--brand-hover) !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--white) !important;
	font: inherit !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 500 !important;
	line-height: 24px !important;
	cursor: pointer;
}

.selar-newsletter-form :is(.wpcf7, .wpforms-container) :is(button[type="submit"], input[type="submit"]):hover,
.selar-newsletter-form--shortcode :is(button[type="submit"], input[type="submit"]):hover {
	background: var(--wp--preset--color--content-primary) !important;
}

.selar-newsletter-form .wpcf7-not-valid-tip,
.selar-newsletter-form .wpforms-error {
	margin-top: 4px !important;
	color: var(--wp--preset--color--yellow) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
}

.selar-newsletter-form .wpcf7-spinner {
	display: none;
}

.selar-footer-bar .selar-logo,
.selar-footer-bar .selar-logo img {
	display: block;
	margin: 0;
}

.selar-socials {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.selar-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 99px;
	transition: background-color 0.15s ease;
}

.selar-socials a:hover {
	background: var(--wp--preset--color--brand);
}

.selar-socials img {
	display: block;
	width: 18px;
	height: 18px;
}

.selar-copyright {
	margin: 0;
	opacity: 0.6;
}

/*
 * Mobile footer: stacked newsletter box on the page background, then a dark bar with
 * logo and socials on one row and the copyright centred below.
 */
@media (max-width: 767px) {
	.selar-newsletter-section.has-background {
		padding-top: 0 !important;
		padding-bottom: 20px !important;
		background: none !important;
	}

	.selar-newsletter.wp-block-group {
		flex-direction: column;
		gap: 20px;
		padding: 24px !important;
		border-radius: 16px !important;
	}

	.selar-newsletter__info {
		gap: 8px;
	}

	.selar-newsletter h2 {
		font-size: var(--wp--preset--font-size--xl);
		line-height: 30px;
		letter-spacing: 0;
	}

	.selar-newsletter__info p,
	.selar-newsletter__legal {
		font-size: var(--wp--preset--font-size--xs) !important;
		font-weight: 400 !important;
		line-height: 16px !important;
	}

	.selar-footer-bar.has-background {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.selar-footer-bar__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.selar-footer-brand {
		justify-content: space-between;
		align-items: center;
	}

	/* Drop the inline link's line box so the row is 32px (the socials), not 37px. */
	.selar-footer-bar .selar-logo a {
		display: block;
	}

	.selar-socials a {
		width: 32px;
		height: 32px;
	}

	.selar-socials img {
		width: 16px;
		height: 16px;
	}

	.selar-copyright {
		font-size: var(--wp--preset--font-size--xs) !important;
		line-height: 16px;
		text-align: center;
	}
}