/*
 * OISTE content components on core blocks (Checkpoint 3, homepage).
 * Maps the PoC component classes (components.css) onto core block markup.
 * No new values: everything uses the token aliases from components.css.
 */

/* ---------- Buttons (PoC .btn--primary / .btn--ghost / .arrow) ---------- */
.wp-block-buttons.btn-row {
	gap: var(--s-3);
}

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	border: 1px solid transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--navy-600);
	border-color: currentcolor;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--navy-050);
}

.wp-block-button.arrow .wp-block-button__link::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-top: 1.5px solid currentcolor;
	border-right: 1.5px solid currentcolor;
	transform: rotate(45deg);
	margin-left: 0.1em;
	flex: none;
}

/* The arrow is on the wrapper <div>; the PoC rule would draw a second one there. */
.wp-block-button.arrow::after {
	content: none;
}

/* ---------- Text links (PoC .textlink on a paragraph wrapping a link) ---------- */
p.textlink a {
	color: inherit;
	text-decoration: none;
}

/* .section-head p (ink-2) must not recolour the PoC .textlink (navy-600). */
.section-head p.textlink {
	color: var(--navy-600);
}

p.textlink a:hover {
	text-decoration: underline;
}

/* ---------- Section head with a link on the right (PoC inline style) ---------- */

/* Constrained layout would centre the 46rem section head (PoC: left-aligned at the
   wrap edge). The block spans the wrap and its children carry the PoC limit. */
.is-layout-constrained > .section-head {
	max-width: var(--wrap) !important;
}

.section-head > * {
	max-width: 46rem;
}

.section-head.section-head--split {
	gap: var(--s-4);
}

/* ---------- Cards built from core blocks (PoC uses <span> for tag and foot) ---------- */
.card p.card__tag {
	font-size: var(--wp--preset--font-size--2-xs);
	color: var(--ink-3);
}

.card p.card__foot {
	margin-top: auto;
	font-size: var(--fs-sm);
	color: var(--navy-600);
}

.section-head > * {
	margin-block: 0;
}

/* ---------- Home hero ---------- */
.home-hero__grid > * {
	margin-block: 0;
}

.home-hero__img {
	margin: 0;
}

.home-hero__img img {
	width: 100%;
	height: auto;
}

.home-hero__img figcaption {
	margin: 0;
}

.home-hero .wp-block-buttons {
	margin-block-start: var(--s-3);
}

/* ---------- News cards (PoC .news-card is a single link) ---------- */
.news-card {
	position: relative;
}

.news-card > *,
.news-card figure {
	margin: 0;
}

.news-card h3 a {
	color: inherit;
	text-decoration: none;
}

.news-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.news-card:hover h3 {
	color: var(--navy-600);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.news-card:focus-within {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--radius);
}

.news-card h3 a:focus-visible {
	outline: none;
}

.news-card p.news-card__date {
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	color: var(--ink-3);
}

/* Emblem placeholder tile (PoC: emblem at 34% width on navy). */
.news-card__ph .news-card__emblem {
	width: 34%;
	margin: 0;
}

.news-card__ph .news-card__emblem img {
	aspect-ratio: 1;
	border-radius: 0;
	background: none;
}

/* ---------- Newsletter section ---------- */
.newsletter > *,
.newsletter .stack > * {
	margin-block: 0;
}

.newsletter .stack > * + * {
	margin-top: var(--s-4);
}

/* ---------- Certificate fingerprint on small screens (Phase 4) ---------- */

/* PoC keeps the fingerprint on one line (nowrap + horizontal scroll), which hides
   part of the value at tablet and phone widths. At or below the PoC's 62rem
   breakpoint it wraps so the full value stays readable; desktop is unchanged. */
@media (max-width: 62rem) {

	.cert__fp {
		flex-wrap: wrap;
	}

	.cert__fp code {
		white-space: normal;
		overflow-wrap: anywhere;
		flex: 1 1 100%;
	}
}

/* Buttons on dark backgrounds (dark hero): mockup .btn--on-dark / .btn--ghost-dark. */
.wp-block-button.btn--on-dark,
.wp-block-button.btn--ghost-dark {
	background: none;
	border: 0;
}

.wp-block-button.btn--on-dark .wp-block-button__link {
	background: #fff;
	color: var(--navy-900);
}

.wp-block-button.btn--on-dark .wp-block-button__link:hover {
	background: var(--gold-100);
}

.wp-block-button.btn--ghost-dark .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.wp-block-button.btn--ghost-dark .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* Mockup grid/flex components space their children with `gap`. WordPress's flow layout adds a
   top margin to every sibling block, which shifted cards and widened spacing (e.g. the second Board
   card started 16px lower). Inside these components that margin is removed. */
main :is(
	.articles, .callout, .card, .cert, .cred, .creds__grid, .deadline, .deadlines,
	.grid, .grid-2, .grid-3, .grid-4, .hero__grid, .home-hero__grid, .news, .news-card,
	.page-hero__inner, .people, .person, .pillar, .pillars, .rail, .section-head,
	.sidebar-layout, .split, .tl__body
) > * {
	margin-block-start: 0;
}

/* Advocacy "Positions the foundation has signed": the PoC sets
   display:grid; gap:.5rem; color:var(--ink-2) inline on this list (core/list keeps no inline style). */
.stack > ul.wp-block-list.small {
	display: grid;
	gap: 0.5rem;
	color: var(--ink-2);
}

/* PoC sections are stacked full-width bands with no gap between them, and a section's content
   starts directly after .section-head (which carries its own bottom margin). Core's block gap
   added 16px in both places, showing a white strip between coloured bands. */
.wp-block-post-content > .alignfull,
.section > .section-head + * {
	margin-block-start: 0;
}