/**
 * Caldera — components.
 *
 * Every surface is flat. Hierarchy comes from colour steps (Pumice → Limestone →
 * Ember) and the triple-radius shape system (100px inputs / 40px cards / 800px
 * pills). No element in this file may cast a shadow.
 */

/* =========================================================== Buttons */

.caldera-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	padding: var(--spacing-12) var(--spacing-24);
	border: var(--border-hairline) solid transparent;
	border-radius: var(--radius-pills);
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-out),
		color var(--duration-base) var(--ease-out),
		border-color var(--duration-base) var(--ease-out);
}

.caldera-btn--primary {
	background: var(--color-ember);
	border-color: var(--color-ember);
	color: var(--color-obsidian);
}

.caldera-btn--primary:hover,
.caldera-btn--primary:focus-visible {
	background: var(--color-ember-hover);
	border-color: var(--color-ember-hover);
	color: var(--color-obsidian);
}

.caldera-btn--secondary {
	padding: var(--spacing-16);
	border-radius: var(--radius-buttons);
	border-color: var(--color-obsidian);
	color: var(--color-obsidian);
}

.caldera-btn--secondary:hover,
.caldera-btn--secondary:focus-visible {
	background: var(--color-obsidian);
	color: var(--color-chalk);
}

.caldera-btn--ghost {
	padding: 0 var(--spacing-12);
	border-color: transparent;
}

.caldera-btn--ghost:hover,
.caldera-btn--ghost:focus-visible {
	color: var(--color-ember);
}

.caldera-btn--inverse {
	border-color: var(--color-chalk);
	color: var(--color-chalk);
}

.caldera-btn--inverse:hover,
.caldera-btn--inverse:focus-visible {
	background: var(--color-chalk);
	color: var(--color-obsidian);
}

.caldera-btn[aria-disabled='true'],
.caldera-btn:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.caldera-btn__icon {
	width: 1em;
	height: 1em;
	flex: none;
}

/* =========================================================== Tag badge */

.caldera-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--spacing-4) var(--spacing-10);
	border-radius: var(--radius-pills);
	background: var(--color-sulfur);
	color: var(--color-obsidian);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-caption);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

a.caldera-tag:hover,
a.caldera-tag:focus-visible {
	background: var(--color-ember);
	color: var(--color-obsidian);
}

.caldera-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	padding: 0;
	margin: 0;
	list-style: none;
}

/* =========================================================== Cards */

.caldera-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	padding: var(--card-padding);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
	color: var(--text-primary);
	overflow: hidden;
}

.caldera-card--flush {
	padding: 0;
}

.caldera-card--flush .caldera-card__body {
	padding: var(--card-padding);
}

.caldera-card--news .caldera-card__body {
	padding: var(--card-padding-compact);
}

.caldera-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0;
	background: var(--color-ember);
	overflow: hidden;
}

.caldera-card--flush .caldera-card__media {
	margin: 0;
}

.caldera-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--duration-base) var(--ease-out);
}

.caldera-card:hover .caldera-card__media img {
	transform: scale(1.03);
}

.caldera-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	flex: 1 0 auto;
}

.caldera-card__title {
	margin: 0;
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
}

.caldera-card__title a {
	text-decoration: none;
}

.caldera-card__excerpt {
	margin: 0;
	color: var(--text-muted);
}

.caldera-card__meta {
	margin-top: auto;
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	color: var(--text-muted);
}

.caldera-card__meta > * + *::before {
	content: '·';
	margin: 0 var(--spacing-8);
}

/* Subheader ---------------------------------------------------------------- */

/*
 * The quiet rank below a section title: small, letterspaced, uppercase body
 * type. Used where a heading has to name a block without competing with the
 * numbers inside it — the display face at heading sizes would.
 */
.caldera-subheader {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-caption);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.caldera-subheader--strong {
	color: var(--text-primary);
}

/* Market breadth bar ------------------------------------------------------- */

/*
 * A two-class part-to-whole bar: how much of the tracked set rose against how
 * much fell. The palette gives rises Ember and falls muted Obsidian rather than
 * the usual red/green pair, which is the site-wide convention for direction —
 * so both segments are labelled with their own count and share below the bar and
 * nothing here depends on telling the two fills apart.
 */
.caldera-breadth {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	margin: 0;
}

.caldera-breadth__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-8);
}

.caldera-breadth__total {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.caldera-breadth__bar {
	display: flex;
	/* The gap is surface showing through, not a border on the marks. */
	gap: 2px;
	height: 10px;
	overflow: hidden;
}

/* No grow: the inline flex-basis is the measurement, and letting a segment take
   leftover space would redistribute it evenly and quietly misreport the split. */
.caldera-breadth__seg {
	flex: 0 1 auto;
	min-width: 2px;
}

/* Square where the segments meet, rounded at the two outer data-ends. */
.caldera-breadth__seg:first-child {
	border-start-start-radius: 4px;
	border-end-start-radius: 4px;
}

.caldera-breadth__seg:last-child {
	border-start-end-radius: 4px;
	border-end-end-radius: 4px;
}

.caldera-breadth__seg--up {
	background: var(--color-ember);
}

.caldera-breadth__seg--flat {
	background: var(--color-obsidian-15);
}

.caldera-breadth__seg--down {
	background: var(--color-obsidian-55);
}

.caldera-breadth__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: var(--text-caption);
	font-variant-numeric: tabular-nums;
}

.caldera-breadth__key {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-4);
}

.caldera-breadth__swatch {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: none;
}

.caldera-breadth__key--up .caldera-breadth__swatch {
	background: var(--color-ember);
}

.caldera-breadth__key--flat .caldera-breadth__swatch {
	background: var(--color-obsidian-15);
}

.caldera-breadth__key--down .caldera-breadth__swatch {
	background: var(--color-obsidian-55);
}

/* Text stays in ink; the swatch and the arrow carry direction. */
.caldera-breadth__key--up .caldera-icon {
	color: var(--color-ember);
}

.caldera-breadth__key--down .caldera-icon {
	color: var(--text-muted);
}

.caldera-breadth__figure {
	font-weight: 700;
	color: var(--text-primary);
}

.caldera-breadth__share,
.caldera-breadth__name {
	color: var(--text-muted);
}

/* Ember feature / stat card ------------------------------------------------ */

.caldera-stat {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
	padding: var(--card-padding);
	border-radius: var(--radius-cards);
	background: var(--surface-feature);
	color: var(--text-on-feature);
}

.caldera-stat--violet {
	background: var(--surface-hero);
}

.caldera-stat--limestone {
	background: var(--surface-raised);
	color: var(--text-primary);
}

.caldera-stat__label {
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-body-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.caldera-stat__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-heading-2xl);
	font-weight: var(--font-weight-regular);
	font-feature-settings: 'ss06', 'ss10';
	line-height: var(--leading-heading-2xl);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.caldera-stat__note {
	margin: 0;
	font-size: var(--text-body-sm);
	opacity: 0.85;
}

/*
 * Compact stat row.
 *
 * The full-size card gives one figure a whole screen of Ember, which is right
 * for a landing page and wrong for a data strip: a snapshot wants to answer
 * several questions at once. This variant trades the display-scale value for
 * more tiles across, and lets the row hold as many as fit rather than fixing a
 * column count, so the same markup densifies on a wide screen instead of
 * stretching four cards to fill it.
 */
.caldera-stat-row {
	display: grid;
	gap: var(--spacing-12);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Two across on a phone rather than one: six full-width tiles turned the strip
   into six screens of scrolling, which is the opposite of a snapshot. */
@media (max-width: 599px) {
	.caldera-stat-row--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.caldera-stat-row--compact .caldera-stat {
		padding: var(--spacing-16);
	}

	.caldera-stat-row--compact .caldera-stat__value {
		font-size: var(--text-heading);
	}
}

.caldera-stat-row--compact .caldera-stat {
	gap: var(--spacing-4);
	padding: var(--spacing-20);
	border-radius: var(--radius-medium);
}

/* Full opacity: chalk on Ember is already close to the contrast floor at this
   size, and fading it pushed the label under. */
.caldera-stat-row--compact .caldera-stat__label {
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	letter-spacing: 0.08em;
}

.caldera-stat-row--compact .caldera-stat__value {
	font-size: var(--text-heading-sm);
	line-height: 1.1;
}

.caldera-stat-row--compact .caldera-stat__note {
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
}

@media (min-width: 1024px) {
	.caldera-stat-row--compact {
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	}
}

.caldera-stat__delta--up {
	font-weight: 700;
}

.caldera-stat__delta--down {
	font-weight: 700;
}

/* =========================================================== Halftone */

/*
 * The signature motif: an orange dot grid over a violet→ember gradient that
 * dissolves into solid Ember at the top right. Built entirely from gradients so
 * it costs no HTTP request and scales to any box.
 */
.caldera-halftone {
	position: relative;
	border-radius: var(--radius-cards);
	background-color: var(--color-plasma-violet);
	background-image:
		radial-gradient(circle at 78% 18%, var(--color-ember) 0%, rgba(252, 80, 0, 0.85) 22%, rgba(252, 80, 0, 0) 62%),
		linear-gradient(135deg, var(--color-plasma-violet) 0%, var(--color-halftone-mid) 55%, var(--color-ember) 100%);
	overflow: hidden;
	isolation: isolate;
}

.caldera-halftone::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--color-ember) 42%, transparent 43%);
	background-size: 12px 12px;
	background-position: 0 0;
	/* Dots are dense at the lower left and fade out as the field turns solid. Only
	   the alpha channel of a mask is read, so these colours are opacity stops
	   rather than palette values. */
	-webkit-mask-image: linear-gradient(300deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.65) 45%, transparent 78%);
	mask-image: linear-gradient(300deg, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 0.65) 45%, transparent 78%);
	opacity: 0.9;
	z-index: 1;
}

.caldera-halftone > * {
	position: relative;
	z-index: 2;
}

.caldera-halftone--fine::before {
	background-size: 7px 7px;
}

.caldera-halftone--violet {
	background-image: radial-gradient(circle at 80% 15%, rgba(252, 80, 0, 0.55) 0%, rgba(82, 74, 233, 0) 60%);
}

.caldera-halftone--violet::before {
	background-image: radial-gradient(var(--color-chalk) 38%, transparent 39%);
	opacity: 0.35;
}

/* =========================================================== Dotted divider */

.caldera-divider {
	height: 0;
	margin: var(--spacing-48) 0;
	border: 0;
	border-top: var(--border-hairline) dotted var(--border-color);
}

.caldera-divider--vertical {
	width: 0;
	height: auto;
	align-self: stretch;
	margin: 0;
	border: 0;
	border-left: var(--border-hairline) dotted var(--border-color);
}

.caldera-section--inverse .caldera-divider {
	border-color: var(--color-chalk-30);
}

/* =========================================================== Site header */

.caldera-site-header {
	padding-block: var(--spacing-20);
	background: var(--surface-canvas);
}

.caldera-nav-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	padding: var(--spacing-12) var(--spacing-20);
	border-radius: var(--radius-pills);
	background: var(--surface-raised);
}

.caldera-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-10);
	/* Allowed to shrink, never to push the header wider than the viewport. */
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
	color: var(--color-obsidian);
}

/*
 * The wordmark is an 8.3:1 lockup, so it is sized by width and left to derive its
 * own height — driving it from a height instead makes the width explode off the
 * side of a phone. The upper bound keeps it near the 28px tall lockup the header
 * pill was built around; max-width lets it shrink further rather than overflow,
 * because .caldera-brand is allowed to shrink and the footer column bottoms out
 * at 200px.
 */
.caldera-brand__wordmark {
	display: block;
	width: clamp(160px, 18vw, 232px);
	/* A floor, so that adding a nav item degrades to a visibly tight header rather
	   than silently shrinking the logo to an illegible smear. */
	min-width: 132px;
	max-width: 100%;
	height: auto;
	color: inherit;
}

.caldera-wordmark__accent {
	fill: var(--color-ember);
}

/*
 * A Customizer logo takes the wordmark's slot via the_custom_logo(), so it has to
 * obey the same bounds — without this it renders at its natural size and prises the
 * header pill apart. Never caught in QA because the default brand is the inline SVG
 * wordmark and only a site that sets a logo ever reaches this path.
 *
 * Bounded by height rather than width, the opposite of .caldera-brand__wordmark: that
 * lockup has a known 8.3:1 ratio, an uploaded logo has none, and a height cap is what
 * keeps the header row the same depth whatever shape the file turns out to be.
 */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	text-decoration: none;
}

.custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: min(232px, 100%);
	max-height: 44px;
	object-fit: contain;
}

.caldera-brand__tagline {
	display: none;
}

.caldera-nav {
	display: none;
}

/*
 * The header swaps to the drawer below 1200px, not the 1024px used everywhere
 * else. The nav's seven items are 611px of nowrap text and the actions another
 * 244px, which at 1024 left the brand 49px to live in — the old text wordmark
 * quietly ellipsised to "NFT S…", and the logo lockup squashed outright.
 * The three header queries below (nav, toggle, drawer) must move together.
 */
@media (min-width: 1200px) {
	.caldera-nav {
		display: block;
	}
}

.caldera-nav ul {
	display: flex;
	align-items: center;
	gap: var(--spacing-9);
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-nav li {
	position: relative;
}

.caldera-nav a {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--spacing-12);
	border-radius: var(--radius-pills);
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.caldera-nav .current-menu-item > a,
.caldera-nav .current_page_item > a,
.caldera-nav .current-menu-ancestor > a {
	color: var(--color-ember);
}

/* Sub-menus */
.caldera-nav .sub-menu {
	position: absolute;
	top: calc(100% + var(--spacing-12));
	left: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 220px;
	padding: var(--spacing-12);
	border-radius: var(--radius-medium);
	background: var(--surface-raised);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--ease-out);
}

.caldera-nav li:hover > .sub-menu,
.caldera-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.caldera-nav .sub-menu a {
	padding: var(--spacing-8) var(--spacing-12);
	border-radius: var(--radius-small);
}

.caldera-nav .sub-menu a:hover {
	background: var(--surface-canvas);
}

.caldera-header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-9);
	flex: none;
}

.caldera-social {
	display: none;
	align-items: center;
	gap: var(--spacing-9);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.caldera-social {
		display: flex;
	}
}

.caldera-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pills);
	color: var(--color-obsidian);
}

.caldera-social a:hover {
	background: var(--surface-canvas);
	color: var(--color-ember);
}

.caldera-social svg {
	width: 18px;
	height: 18px;
}

/* Mobile toggle + drawer --------------------------------------------------- */

.caldera-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	padding: var(--spacing-8) var(--spacing-16);
	border: var(--border-hairline) solid var(--color-obsidian);
	border-radius: var(--radius-pills);
	background: transparent;
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

@media (min-width: 1200px) {
	.caldera-nav-toggle {
		display: none;
	}
}

.caldera-nav-toggle__bars {
	display: grid;
	gap: 3px;
	width: 16px;
}

.caldera-nav-toggle__bars span {
	display: block;
	height: 1.5px;
	background: currentColor;
}

.caldera-drawer {
	display: none;
	margin-top: var(--spacing-12);
	padding: var(--spacing-24);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

.caldera-drawer.is-open {
	display: block;
}

@media (min-width: 1200px) {
	.caldera-drawer,
	.caldera-drawer.is-open {
		display: none;
	}
}

.caldera-drawer ul {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-drawer .sub-menu {
	padding-left: var(--spacing-16);
	margin-top: var(--spacing-4);
}

.caldera-drawer a {
	display: block;
	padding: var(--spacing-10) var(--spacing-12);
	border-radius: var(--radius-small);
	text-decoration: none;
}

.caldera-drawer a:hover {
	background: var(--surface-canvas);
}

/* =========================================================== Footer */

.caldera-site-footer {
	flex: none;
	padding-block: var(--spacing-64) var(--spacing-32);
	background: var(--surface-inverse);
	color: var(--text-on-inverse);
}

.caldera-site-footer a {
	text-decoration: none;
}

.caldera-site-footer a:hover {
	color: var(--color-ember);
}

.caldera-footer-grid {
	display: grid;
	gap: var(--spacing-40);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: var(--spacing-48);
}

.caldera-footer-col__title {
	margin: 0 0 var(--spacing-16);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-body-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-chalk-85);
}

.caldera-footer-col ul {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
	padding: 0;
	margin: 0;
	list-style: none;
}

/* The social row is a list too, and the column rule above was standing its
   icons on top of each other down the left edge of the brand block. */
.caldera-footer-col .caldera-social {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	margin-top: var(--spacing-20);
}

/* Legal links sit outside .caldera-footer-col, so they were the one list in the
   footer still carrying its markers and stacking one per line. */
.caldera-footer-legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-20);
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-footer-col a {
	color: var(--color-chalk);
}

/*
 * Widgets keep their light card surface everywhere except here. The footer band
 * is Obsidian and sets chalk type on it, so a raised limestone panel inside it
 * renders white text on light grey — the one place the card treatment inverts
 * into an unreadable combination. In the footer a widget is just a column.
 */
.caldera-site-footer .caldera-widget {
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
}

.caldera-site-footer .caldera-widget__title,
.caldera-site-footer .caldera-widget .widget-title,
.caldera-site-footer .caldera-widget h2,
.caldera-site-footer .caldera-widget h3 {
	margin: 0 0 var(--spacing-16);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--leading-body-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-chalk-85);
}

.caldera-site-footer .caldera-widget ul {
	gap: var(--spacing-10);
}

.caldera-site-footer .caldera-widget a {
	color: var(--color-chalk);
}

.caldera-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	padding-top: var(--spacing-24);
	border-top: var(--border-hairline) dotted var(--color-chalk-30);
	font-size: var(--text-body-sm);
	color: var(--color-chalk-85);
}

.caldera-footer-bottom a {
	color: var(--color-chalk);
}

/* Without this the paragraph keeps its document bottom margin, and centring the
   taller box sits the copyright a line above the legal links beside it. */
.caldera-footer-copyright {
	margin: 0;
}

.caldera-site-footer .caldera-social a {
	color: var(--color-chalk);
}

.caldera-site-footer .caldera-social a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-ember);
}

/* =========================================================== Forms */

.caldera-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	margin-bottom: var(--spacing-16);
}

.caldera-input,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
select,
textarea {
	width: 100%;
	padding: var(--spacing-16) var(--spacing-24);
	border: var(--border-hairline) solid var(--color-obsidian);
	border-radius: var(--radius-inputs);
	background: transparent;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
}

textarea {
	border-radius: var(--radius-medium);
}

::placeholder {
	color: var(--color-obsidian-55);
	opacity: 1;
}

.caldera-section--inverse .caldera-input,
.caldera-section--inverse input[type='text'],
.caldera-section--inverse input[type='email'],
.caldera-section--inverse input[type='search'],
.caldera-section--inverse textarea,
.caldera-section--inverse select,
.caldera-site-footer input[type='email'],
.caldera-site-footer input[type='text'] {
	border-color: var(--color-chalk);
	color: var(--color-chalk);
}

.caldera-section--inverse ::placeholder,
.caldera-site-footer ::placeholder {
	color: var(--color-chalk-70);
}

/* Search form -------------------------------------------------------------- */

.caldera-search-form {
	display: flex;
	gap: var(--spacing-8);
	align-items: center;
}

.caldera-search-form .caldera-input {
	flex: 1 1 auto;
	min-width: 0;
}

.caldera-search-form .caldera-btn {
	flex: none;
}

/* Newsletter / inline CTA form -------------------------------------------- */

.caldera-inline-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-12);
	align-items: center;
	max-width: 620px;
}

.caldera-inline-form .caldera-input {
	flex: 1 1 260px;
	padding: var(--spacing-24) var(--spacing-64) var(--spacing-24) var(--spacing-32);
}

/* =========================================================== Pagination */

.caldera-pagination {
	margin-top: var(--spacing-56);
}

.caldera-pagination .nav-links,
.caldera-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-pagination a.page-numbers,
.caldera-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--spacing-12);
	border: var(--border-hairline) solid transparent;
	border-radius: var(--radius-pills);
	background: var(--surface-raised);
	font-size: var(--text-body-sm);
	text-decoration: none;
}

.caldera-pagination a.page-numbers:hover {
	border-color: var(--color-obsidian);
}

.caldera-pagination .page-numbers.current {
	background: var(--color-ember);
	color: var(--color-obsidian);
}

.caldera-pagination .page-numbers.dots {
	background: transparent;
}

/* Post-to-post navigation -------------------------------------------------- */

.caldera-post-nav {
	display: grid;
	gap: var(--spacing-16);
	margin-top: var(--spacing-56);
}

@media (min-width: 768px) {
	.caldera-post-nav {
		grid-template-columns: 1fr 1fr;
	}
}

.caldera-post-nav a {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: var(--spacing-24);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
	text-decoration: none;
}

.caldera-post-nav a:hover {
	background: var(--color-ember);
	color: var(--color-obsidian);
}

.caldera-post-nav__label {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.caldera-post-nav a:hover .caldera-post-nav__label {
	color: var(--color-obsidian);
}

.caldera-post-nav__title {
	font-family: var(--font-display);
	font-size: var(--text-subheading);
	font-feature-settings: 'ss06', 'ss10';
	line-height: var(--leading-subheading);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}

.caldera-post-nav--next {
	text-align: right;
}

/* =========================================================== Breadcrumbs */

.caldera-breadcrumbs {
	margin-bottom: var(--spacing-16);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	color: var(--text-muted);
}

/*
 * A crumb row is header furniture, not content, so it wants to sit close to the
 * nav bar above it. Pages that open with a title instead keep the fuller opening
 * measure, which is why this narrows the main padding rather than the crumbs.
 * Both header components can carry crumbs — page templates use one, single
 * entries the other — so the test is simply whether the view has them at all.
 */
.caldera-site-main:has(.caldera-breadcrumbs) {
	padding-top: var(--spacing-24);
}

.caldera-breadcrumbs a {
	text-decoration: none;
}

.caldera-breadcrumbs a:hover {
	color: var(--color-ember);
}

/* =========================================================== Widgets */

.caldera-widget {
	padding: var(--spacing-32);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

/*
 * Block widgets emit a bare <h2>, which the document scale renders at up to
 * 80px — several times the width of a 320px sidebar column. Every heading a
 * widget can produce is pinned to the widget-title size instead, so the column
 * keeps one typographic rank no matter which block an editor drops into it.
 */
.caldera-widget__title,
.caldera-widget .widget-title,
.caldera-widget h2,
.caldera-widget h3,
.caldera-widget h4 {
	margin: 0 0 var(--spacing-16);
	font-family: var(--font-display);
	font-size: var(--text-subheading);
	font-weight: var(--font-weight-regular);
	font-feature-settings: 'ss06', 'ss10';
	line-height: var(--leading-subheading);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* A block widget wraps its heading and list in a group; the group must not add
   a second helping of vertical rhythm on top of the widget's own padding. */
.caldera-widget .wp-block-group {
	margin: 0;
}

.caldera-widget .wp-block-group + .wp-block-group {
	margin-top: var(--spacing-24);
}

.caldera-widget ul {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: var(--text-body-sm);
}

.caldera-widget a {
	text-decoration: none;
}

/* =========================================================== Notices */

.caldera-notice {
	padding: var(--spacing-16) var(--spacing-24);
	border-radius: var(--radius-medium);
	background: var(--surface-raised);
	font-size: var(--text-body-sm);
	color: var(--text-muted);
}

.caldera-notice--stale {
	background: var(--color-sulfur);
	color: var(--color-obsidian);
}

/* =========================================================== Author box */

/*
 * The box is rendered after the article element, and every other block on a
 * single post owns its own opening measure. Without one here the share row —
 * whose 36px buttons sit at the very bottom of the article footer — landed flush
 * on this card's top edge, so the icons read as overlapping it.
 */
.caldera-author-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-24);
	align-items: flex-start;
	padding: var(--card-padding);
	margin-top: var(--spacing-40);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

.caldera-author-box__avatar img {
	display: block;
	border-radius: var(--radius-pills);
}

.caldera-author-box__body {
	flex: 1 1 260px;
}

.caldera-author-box__name {
	margin: 0 0 var(--spacing-8);
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
}

.caldera-author-box__bio {
	margin: 0 0 var(--spacing-16);
	color: var(--text-muted);
}

.caldera-author-box__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-12);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: var(--text-body-sm);
}

/* =========================================================== Comments */

.caldera-comments {
	margin-top: var(--spacing-64);
}

.caldera-comments .comment-list {
	padding: 0;
	margin: 0 0 var(--spacing-40);
	list-style: none;
}

.caldera-comments .comment-list ol.children {
	padding-left: var(--spacing-24);
	margin: var(--spacing-16) 0 0;
	list-style: none;
	border-left: var(--border-hairline) dotted var(--border-color);
}

.caldera-comments .comment-body {
	padding: var(--spacing-24);
	margin-bottom: var(--spacing-16);
	border-radius: var(--radius-medium);
	background: var(--surface-raised);
}

.caldera-comments .comment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	align-items: center;
	margin-bottom: var(--spacing-12);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.caldera-comments .comment-author img {
	border-radius: var(--radius-pills);
	margin-right: var(--spacing-8);
	vertical-align: middle;
}

.caldera-comments .bypostauthor > .comment-body {
	border: var(--border-hairline) solid var(--color-ember);
}

.caldera-comments .comment-reply-link {
	font-size: var(--text-body-sm);
}

.caldera-comments .comment-respond {
	padding: var(--card-padding);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

.caldera-comments .comment-form-cookies-consent {
	display: flex;
	gap: var(--spacing-8);
	align-items: flex-start;
	font-size: var(--text-body-sm);
}

.caldera-comments .comment-form-cookies-consent input {
	width: auto;
	margin-top: 5px;
}

.caldera-comments input[type='submit'] {
	width: auto;
	padding: var(--spacing-12) var(--spacing-24);
	border: 0;
	border-radius: var(--radius-pills);
	background: var(--color-ember);
	color: var(--color-obsidian);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

/* =========================================================== Skip target */

#caldera-content:focus {
	outline: none;
}