/**
 * Solomon component surfaces.
 *
 * Only the presentation core blocks cannot express through theme.json lives
 * here. Mobile-first: every rule is written for the small screen, with
 * min-width queries adding complexity upward.
 */

/* ---------------------------------------------------------------------------
 * Eyebrow labels — the gold, letterspaced kickers above every section heading
 * ------------------------------------------------------------------------ */

.is-style-solomon-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	line-height: 1.4;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------------
 * Full-bleed template parts
 * ------------------------------------------------------------------------ */

/*
 * WordPress wraps every template part in a plain <div class="wp-block-template-part">.
 * That wrapper is not a layout container, so core's
 * `.is-layout-constrained > .alignfull` rule cannot reach a full-bleed section
 * nested inside it — the section stays pinned to the 760px content width while
 * sections inserted as patterns (which are inlined, with no wrapper) go full
 * width correctly. This lets a full-bleed part out of the wrapper.
 */
.wp-block-template-part > .alignfull {
	max-width: none;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

/* ---------------------------------------------------------------------------
 * Card surface
 * ------------------------------------------------------------------------ */

.is-style-solomon-card {
	background-color: var(--wp--preset--color--paper-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

.is-style-solomon-card.has-navy-background-color,
.is-style-solomon-card.has-forest-background-color {
	border-color: transparent;
}

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

/*
 * Header rhythm. The inset is set here rather than as block padding so it can
 * scale: the mockup sits the logo about 4.4% in from the edge at 1440px, which
 * is what the vw term tracks, with a floor that keeps it comfortable on phones
 * and a ceiling so it does not drift absurdly wide on a 27" display. The row
 * itself is a flex group, so the hamburger mirrors the logo's inset exactly.
 */
.solomon-header {
	padding-block: 1.25rem;
	padding-inline: clamp( 1.5rem, 4vw, 4.5rem );
}

.solomon-header .wp-block-site-logo img {
	display: block;
}

.solomon-header .wp-block-site-title a {
	color: inherit;
}

/* The overlay navigation: core Navigation block set to "always" overlay.
 * These rules restyle the built-in overlay to the full-bleed navy panel in
 * the mockup, so no third-party mega-menu plugin is needed. */
.solomon-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--paper) !important;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	animation: solomon-overlay-in 420ms var(--solomon-ease, ease) both;
}

@keyframes solomon-overlay-in {
	from {
		opacity: 0;
		transform: translate3d( 0, -1.5rem, 0 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.solomon-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
	justify-content: flex-start;
}

.solomon-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp( 1.75rem, 8vw, 3rem );
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	opacity: 0;
	animation: solomon-nav-item-in 520ms var(--solomon-ease, ease) both;
}

.solomon-header .is-menu-open .wp-block-navigation__container > :nth-child(1) .wp-block-navigation-item__content { animation-delay: 90ms; }
.solomon-header .is-menu-open .wp-block-navigation__container > :nth-child(2) .wp-block-navigation-item__content { animation-delay: 160ms; }
.solomon-header .is-menu-open .wp-block-navigation__container > :nth-child(3) .wp-block-navigation-item__content { animation-delay: 230ms; }
.solomon-header .is-menu-open .wp-block-navigation__container > :nth-child(4) .wp-block-navigation-item__content { animation-delay: 300ms; }
.solomon-header .is-menu-open .wp-block-navigation__container > :nth-child(5) .wp-block-navigation-item__content { animation-delay: 370ms; }

@keyframes solomon-nav-item-in {
	from {
		opacity: 0;
		transform: translate3d( 0, 1rem, 0 );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.solomon-header .wp-block-navigation__responsive-container-close,
.solomon-header .wp-block-navigation__responsive-container-open {
	color: currentColor;
}

/* ---------------------------------------------------------------------------
 * Top-level section flow
 *
 * WordPress puts `margin-block-start: <global block gap>` between every
 * top-level block, which leaves a 24px stripe of page background between the
 * last section and the footer. Every section here carries its own padding, so
 * that gap is never wanted — full-bleed bands should butt together.
 * ------------------------------------------------------------------------ */

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

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

/*
 * Logo left, navigation dead centre, social icons right — an even three-up as
 * drawn. A grid rather than space-between, so the middle column is centred on
 * the page regardless of how wide the logo and icons happen to be.
 */
.solomon-footer-row {
	align-items: center;
}

.solomon-footer-row > :nth-child( 1 ) {
	justify-self: start;
}

.solomon-footer-row > :nth-child( 2 ) {
	justify-self: center;
}

.solomon-footer-row > :nth-child( 3 ) {
	justify-self: end;
}

/*
 * The site logo is a navy mark, which is invisible on the navy footer. Knock
 * it back to the paper colour rather than maintaining a second attachment.
 */
.solomon-footer-logo img {
	filter: brightness( 0 ) invert( 1 );
}

/*
 * The hairline above the footer's legal row. The colour lives here rather than
 * as an inline style on the block: WordPress does not serialise a custom
 * separator colour into the markup, so hand-writing `style="color:…"` made the
 * block fail validation and the editor refused to open the page.
 */
.solomon-footer-rule {
	margin-block: var(--wp--preset--spacing--50);
	border-top-color: #33414f;
	color: #33414f;
}

@media ( max-width: 781px ) {

	.solomon-footer-row {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.solomon-footer-row > :nth-child( 1 ),
	.solomon-footer-row > :nth-child( 2 ),
	.solomon-footer-row > :nth-child( 3 ) {
		justify-self: center;
	}
}

/* ---------------------------------------------------------------------------
 * Stats band
 * ------------------------------------------------------------------------ */

/*
 * Per the mockup the figure sits beside a three-line stacked label, not above
 * it, with the supporting note centred underneath the pair.
 */
.solomon-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

/*
 * Labels wrap to two or three lines depending on wording. Without a floor on
 * the height the figures would sit at four different heights across the row;
 * the mockup has them share a baseline, so reserve three lines for every one.
 */
.solomon-stat__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	flex-wrap: nowrap;
	min-height: 3.5rem;
}

.solomon-stat__figure {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
	/*
	 * Colour-agnostic: the stats band appears on navy on the homepage and on
	 * paper-alt on the About page, so the type inherits whatever the band sets
	 * and the secondary lines step back with opacity rather than a fixed grey.
	 */
	color: inherit;
	white-space: nowrap;
}

.solomon-stat__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.55;
	margin: 0;
	text-align: left;
	/*
	 * Sized so the longest word ("MANAGEMENT") fits on one line at this
	 * tracking. Any narrower and that label breaks over four lines instead of
	 * the three the mockup shows, which drops its figure below the others.
	 */
	max-width: 7rem;
	overflow-wrap: normal;
	word-break: keep-all;
	color: inherit;
	opacity: 0.62;
}

.solomon-stat__note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	margin: 0;
	max-width: 32ch;
	color: inherit;
	opacity: 0.78;
}

/* Hairline dividers between stats, inset from the band's top and bottom. */
.solomon-stats-row {
	align-items: flex-start;
}

.solomon-stats-row > .wp-block-column {
	position: relative;
	padding-inline: var(--wp--preset--spacing--40);
}

@media ( min-width: 782px ) {

	.solomon-stats-row > .wp-block-column + .wp-block-column::before {
		content: "";
		position: absolute;
		left: 0;
		top: 6%;
		bottom: 6%;
		width: 1px;
		background-color: currentColor;
		opacity: 0.22;
	}
}

/* ---------------------------------------------------------------------------
 * Service pillars ("What we do")
 *
 * Per the mockup these sit directly on the page background — no card surface,
 * no border, no shadow — separated only by hairline rules, with the partner
 * lockup, title and copy all centred.
 * ------------------------------------------------------------------------ */

.solomon-pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	text-align: center;
	background: none;
	border: 0;
	box-shadow: none;
	height: 100%;
}

.solomon-pillar__media {
	margin: 0 0 var(--wp--preset--spacing--20);
	width: 100%;
}

.solomon-pillar__media img {
	display: block;
	width: 100%;
	height: auto;
}

.solomon-pillar__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

.solomon-pillar__copy {
	color: var(--wp--preset--color--navy);
	max-width: 42ch;
	margin: 0 auto;
}

.solomon-pillars-row > .wp-block-column {
	position: relative;
	/* Generous gutter either side of the rule so the columns breathe. */
	padding-inline: clamp( 1.25rem, 3.2vw, 3rem );
}

/* The second row holds two pillars, centred beneath the three above so the
 * columns stay the same width rather than stretching to fill. */
@media ( min-width: 782px ) {

	/*
	 * Two thirds of the wide width, so these two columns come out exactly the
	 * same width as the three above rather than stretching to fill. Tied to the
	 * layout token, not a percentage of whatever the parent happens to be.
	 * Needs to outrank core's `.is-layout-constrained > .alignwide`.
	 */
	.wp-block-columns.solomon-pillars-row--pair {
		max-width: calc( var(--wp--style--global--wide-size) * 2 / 3 );
		margin-inline: auto;
	}

	.solomon-pillars-row > .wp-block-column + .wp-block-column::before {
		content: "";
		position: absolute;
		left: 0;
		top: 2%;
		bottom: 2%;
		width: 1px;
		background-color: rgba( 26, 43, 59, 0.16 );
	}
}

/* ---------------------------------------------------------------------------
 * Split panels (Why Now, About founder, Guiding principals)
 * ------------------------------------------------------------------------ */

/*
 * WordPress styles the columns *wrapper* as border-box but leaves each column
 * at the CSS default of content-box, so any padding set on a column is added
 * outside its declared width: a 50% column with 9rem of inset measures 66% and
 * overflows the row, shoving the photograph opposite off the page centre.
 * Measured in-browser: content width 864px, offsetWidth 1152px. This one line
 * is what makes the 50/50 split hold.
 */
.wp-block-column {
	box-sizing: border-box;
}

/*
 * The reveal styles park elements 36px to one side before they animate in, and
 * on a full-bleed row that pushes the document 36px wider than the viewport —
 * a horizontal scrollbar on load. `clip` contains it without creating a scroll
 * container, so `position: sticky` elsewhere still works.
 */
.wp-site-blocks {
	overflow-x: clip;
}

/*
 * Full-bleed sections butt straight up against each other — each one carries
 * its own padding, so the global 24px block gap between them only ever shows
 * as a stripe of page colour. `.wp-site-blocks > *` was already zeroed for the
 * template-level parts; this is the same fix one level in, for the sections
 * that live in a page's own content. Scoped to pages so prose posts keep their
 * spacing around any full-width block.
 */
.page .entry-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.solomon-split {
	align-items: stretch;
}

.solomon-split > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * Pin both halves to exactly 50% so the seam between the two rows lands on the
 * page centre and the photographs step cleanly. Without this, a flex item's
 * default `min-width: auto` lets a long unbreakable line in the copy push its
 * column past its 50% basis and squeeze the photograph — which is why the rows
 * drifted to roughly 54/46 at some widths. Scoped above the stacking
 * breakpoint so core's mobile `flex-basis: 100% !important` still wins.
 */
@media ( min-width: 782px ) {

	.solomon-split > .wp-block-column {
		flex: 0 0 50%;
		max-width: 50%;
		min-width: 0;
	}
}

/*
 * Copy sits well inside its half — roughly a fifth of the panel on each side,
 * as drawn — and is centred vertically against the photograph opposite. Set
 * here rather than as block padding so it can scale with the viewport.
 */
.solomon-split > .wp-block-column:not(.solomon-split__media) {
	padding-block: clamp( 3.5rem, 7vw, 6rem );
	padding-inline: clamp( 1.75rem, 10vw, 9rem );
	overflow-wrap: break-word;
}

/*
 * Copy inside a split panel, set to the mockup: bullets breathe rather than
 * sitting as a tight list, and the attribution runs on from the end of the
 * pull quote ("…in a pitch deck." -Ivan) instead of dropping to its own line.
 * The quote paragraph and its cite are both made inline so they share a text
 * flow — they are separate block elements in the markup.
 */
.solomon-split .wp-block-list li + li {
	margin-top: 0.85rem;
}

.solomon-split .wp-block-quote p {
	display: inline;
}

.solomon-split .wp-block-quote cite {
	display: inline;
	margin-left: 0.5em;
	white-space: nowrap;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

.solomon-split .wp-block-image,
.solomon-split figure {
	margin: 0;
	height: 100%;
}

.solomon-split .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The founder and principles rows alternate which side the photograph sits on.
 * For that step to read evenly both rows must be the same height — and left to
 * themselves each row is sized by its own image's aspect ratio, so a portrait
 * and a landscape produce two different heights. Pin both media panels to a
 * square, as drawn, and the rows match whatever the source images are.
 */
.solomon-split__media {
	padding: 0;
}

.solomon-split__media figure {
	aspect-ratio: 1;
	height: 100%;
	margin: 0;
}

.solomon-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The three explainer cards. A grid with `minimumColumnWidth` compiles to
 * `repeat(auto-fill, ...)`, which happily reserves a fourth empty track at
 * wide viewports and leaves the row looking shunted to the left. Three
 * explicit tracks keep it centred; they collapse to one on phones.
 */
.solomon-explainer-grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

@media ( max-width: 781px ) {

	.solomon-explainer-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Platforms row
 * ------------------------------------------------------------------------ */

.solomon-platforms {
	align-items: center;
}

/*
 * The four platform logos sit on their own near-white ground (#F9F9F5) baked
 * into the source files, so the band is set to paper-alt and the artwork
 * backgrounds disappear into it. Equal flex basis keeps the row even; the
 * files already carry matched padding, so no per-logo sizing is needed.
 */
.solomon-platforms__logos {
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--40);
}

.solomon-platforms__logos .wp-block-image {
	flex: 1 1 140px;
	margin: 0;
}

.solomon-platforms__logos .wp-block-image img {
	width: 100%;
	max-width: 220px;
	height: auto;
	display: block;
	margin-inline: auto;
}

.solomon-platforms__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	margin: 0;
	max-width: 9rem;
}

@media ( min-width: 782px ) {

	.solomon-platforms > .wp-block-column:last-child {
		border-left: 1px solid rgba( 26, 43, 59, 0.18 );
		padding-left: var(--wp--preset--spacing--50);
	}
}

/* ---------------------------------------------------------------------------
 * FAQ rows — core/details styled to the mockup's hairline accordion
 * ------------------------------------------------------------------------ */

.is-style-solomon-faq {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40) 0;
}

.is-style-solomon-faq:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.is-style-solomon-faq > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--navy);
}

.is-style-solomon-faq > summary::-webkit-details-marker {
	display: none;
}

.is-style-solomon-faq > summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	transition: transform 320ms var(--solomon-ease, ease);
	flex: 0 0 auto;
}

.is-style-solomon-faq[open] > summary::after {
	transform: rotate( 45deg );
}

.is-style-solomon-faq > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

.is-style-solomon-faq > :not( summary ) {
	padding-top: var(--wp--preset--spacing--30);
	max-width: 68ch;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
 * Separator hairline
 * ------------------------------------------------------------------------ */

.wp-block-separator.is-style-solomon-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Button pair — filled primary next to an outline secondary
 * ------------------------------------------------------------------------ */

.is-style-solomon-outline-pair .wp-block-button:nth-child( even ) .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border-color: currentColor;
}

.is-style-solomon-outline-pair .wp-block-button:nth-child( even ) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

/* On dark sections the filled button inverts. */
.has-navy-background-color .is-style-solomon-outline-pair .wp-block-button:first-child .wp-block-button__link,
.has-forest-background-color .is-style-solomon-outline-pair .wp-block-button:first-child .wp-block-button__link {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
}

/* ---------------------------------------------------------------------------
 * Dark section defaults
 * ------------------------------------------------------------------------ */

.has-navy-background-color,
.has-forest-background-color,
.has-navy-soft-background-color {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color :where( h1, h2, h3, h4, h5 ),
.has-forest-background-color :where( h1, h2, h3, h4, h5 ),
.has-navy-soft-background-color :where( h1, h2, h3, h4, h5 ) {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color a:where( :not( .wp-element-button ) ),
.has-forest-background-color a:where( :not( .wp-element-button ) ) {
	color: var(--wp--preset--color--paper);
}

.has-navy-background-color a:where( :not( .wp-element-button ) ):hover,
.has-forest-background-color a:where( :not( .wp-element-button ) ):hover {
	color: var(--wp--preset--color--gold);
}

/* ---------------------------------------------------------------------------
 * Page masthead (inner page dark banner)
 * ------------------------------------------------------------------------ */

.solomon-masthead {
	text-align: center;
}

.solomon-masthead h1 {
	font-style: italic;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Query loop card grids
 * ------------------------------------------------------------------------ */

/*
 * Card grids: `minimumColumnWidth` compiles to `repeat(auto-fill, …)`, which
 * keeps empty tracks it has room for — at 1280px that is four 290px columns
 * holding three cards, so the row hangs left with a gap on the right. `auto-fit`
 * collapses the empty track and lets the cards share the full width, so any
 * number of posts stays centred. Same defect as the About explainer row.
 */
/*
 * The "more" link that closes a section sits at the bottom-right corner of the
 * card row above it, so its right edge must line up with the grid's — that is
 * the wide measure, not the narrower content measure it would otherwise inherit
 * from the section. Set in CSS as well as on the block, because WordPress
 * caches theme pattern content against the theme version and a pattern edit
 * does not always take effect on the next request.
 */
.is-layout-constrained > p.solomon-underline-link.has-text-align-right {
	max-width: var(--wp--style--global--wide-size);
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-post-template.solomon-card-grid {
	grid-template-columns: repeat( auto-fit, minmax( min( 280px, 100% ), 1fr ) );
}

.solomon-card-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--paper-alt);
	border: 1px solid var(--wp--preset--color--line);
}

.solomon-card-grid .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.solomon-card-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solomon-card-grid .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Article byline and author card
 *
 * Named authorship is the strongest single signal for being cited by AI
 * assistants, so the author is stated under the headline and again at the foot
 * of the article with a bio and an outbound link to a real profile. Typographic
 * rather than avatar-led, to match the rest of the editorial layout.
 * ------------------------------------------------------------------------ */

.solomon-byline {
	opacity: 0.78;
}

.solomon-byline .wp-block-post-author-name::after {
	content: "·";
	margin-inline-start: var(--wp--preset--spacing--30);
	opacity: 0.5;
}

.solomon-author .wp-block-post-author__byline {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.35rem;
}

.solomon-author .wp-block-post-author__name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}

.solomon-author .wp-block-post-author__bio {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	margin: 0.6rem 0 0;
	max-width: 60ch;
}

/* ---------------------------------------------------------------------------
 * Contact form
 *
 * Styled here rather than in the plugin so it loads in the document head with
 * the rest of the theme CSS. Labels sit above underlined fields, the message
 * is a bordered box, and the action centres beneath — as drawn.
 * ------------------------------------------------------------------------ */

.solomon-form {
	max-width: 760px;
	margin-inline: auto;
}

/* The spam trap. Hidden here and inline on the element itself, so it cannot
 * become a visible "leave this field empty" input if CSS fails to load. */
.solomon-form__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.solomon-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media ( min-width: 600px ) {

	.solomon-form__row {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.solomon-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.solomon-form label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	line-height: 1.4;
}

.solomon-form input[type="text"],
.solomon-form input[type="email"],
.solomon-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--navy);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid rgba( 26, 43, 59, 0.28 );
	border-radius: 0;
	padding: 0.65rem 0;
	transition: border-color 240ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.solomon-form textarea {
	border: 1px solid rgba( 26, 43, 59, 0.28 );
	padding: 1rem;
	min-height: 190px;
	resize: vertical;
	line-height: 1.6;
}

.solomon-form input:focus,
.solomon-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--gold);
}

/* Helper line under the message label, per Ivan's contact-page copy. */
.solomon-form__help {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: -0.2rem 0 0.5rem;
}

.solomon-form__field--message {
	margin-bottom: var(--wp--preset--spacing--40);
}

.solomon-form__actions {
	text-align: center;
	margin: var(--wp--preset--spacing--50) 0 0;
}

.solomon-form__notice {
	padding: 1rem 1.25rem;
	margin-bottom: var(--wp--preset--spacing--40);
	border-left: 3px solid;
	font-size: var(--wp--preset--font-size--small);
}

.solomon-form__notice--error {
	border-color: #B3261E;
	background-color: rgba( 179, 38, 30, 0.06 );
}

.solomon-form__notice--success {
	border-color: var(--wp--preset--color--gold);
	background-color: rgba( 196, 155, 70, 0.1 );
}

/* ---------------------------------------------------------------------------
 * Accessibility helpers
 * ------------------------------------------------------------------------ */

.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
	padding: 0.75rem 1.25rem;
	clip-path: none;
	width: auto;
	height: auto;
}