/* WebAshes — small bits reused across multiple templates
   (breadcrumb, eyebrow label, section label). Loaded globally. */

/* Twenty Twenty-Four clips horizontal overflow on the site wrapper so
   full-bleed (alignfull) sections don't cause a horizontal scrollbar.
   Per the CSS overflow spec, setting overflow-x without an explicit
   overflow-y forces the browser to also make the y-axis a scroll
   container — which breaks position:sticky on the header and the blog's
   category nav. Restating overflow-y as visible here keeps the
   horizontal clip intact while letting sticky positioning work again. */
html, body, .wp-site-blocks, .wp-block-template-part {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.wa-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
	font-size: 13px;
	color: #6B6B6B;
}
.wa-breadcrumb a,
.wa-breadcrumb span {
	display: inline;
}
.wa-breadcrumb a {
	color: #6B6B6B;
	text-decoration: none;
}
.wa-breadcrumb a:hover {
	color: #D4380D;
}
.wa-breadcrumb-current {
	color: #111111;
	font-weight: 600;
}

.wa-cat-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #D4380D;
}

.wa-section-label {
	font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #D4380D;
	margin: 0;
}

/* ---- Fluent Forms on a dark background (single-post sidebar card) ----
   Fluent Forms' own field labels/help text render in a dark gray by
   default, which disappears against a dark background — the field
   looked "empty" because only the input box (white) and the tooltip
   icon (its own accent color) were visible. */
.wa-sidebar-newsletter form label,
.wa-sidebar-newsletter .fluentform label,
.wa-sidebar-newsletter .ff-el-input--label label {
	color: #FFFFFF !important;
}
.wa-sidebar-newsletter .ff-el-description,
.wa-sidebar-newsletter .ff_msg {
	color: #C4C0B8 !important;
}
.wa-sidebar-newsletter .ff-el-form-control {
	background: #1A1A1A;
	border: 1px solid #3A3A3A;
	color: #FFFFFF;
}
.wa-sidebar-newsletter .ff-el-form-control::placeholder {
	color: #9A9690;
}
.wa-sidebar-newsletter .ff-btn,
.wa-sidebar-newsletter button[type="submit"],
.wa-sidebar-newsletter input[type="submit"] {
	background: #D4380D !important;
	border-color: #D4380D !important;
	color: #FFFFFF !important;
}
.wa-sidebar-newsletter .ff-btn:hover {
	background: #B8300B !important;
}

/* ---- Newsletter band pattern (light, black top border) ----
   Used on the homepage, blog listing, category, and single post
   templates via patterns/newsletter-band.php. Fluent Forms' default
   styling is already dark-on-light (fine here), this just makes the
   input/button match the brand and centers/sizes the form to match
   the homepage's original hand-built version. */
.wa-light-newsletter .fluentform,
.wa-light-newsletter form {
	max-width: 400px;
	margin: 0 auto;
}
.wa-light-newsletter .ff-el-group {
	margin-bottom: 10px;
}
.wa-light-newsletter .ff-el-form-control {
	background: #FFFFFF;
	border: 1px solid #C4C0B8;
	border-radius: 4px;
	padding: 11px 16px;
	font-size: 13.5px;
	color: #111111;
	width: 100%;
	box-sizing: border-box;
}
.wa-light-newsletter .ff-btn,
.wa-light-newsletter button[type="submit"],
.wa-light-newsletter input[type="submit"] {
	background: #D4380D !important;
	border-color: #D4380D !important;
	color: #FFFFFF !important;
	border-radius: 4px;
	padding: 11px 22px;
	font-size: 13.5px;
	font-weight: 700;
	width: 100%;
}
.wa-light-newsletter .ff-btn:hover {
	background: #B8300B !important;
}