/* 
	Shared chrome tools — named by what they do.

	Bands, flush rows, bracket links, CTA placard, chips, emblem, cue arrow, flex rule, planes hook.
*/

/* -------------------------------------------------------------------------
	Band — full-bleed section; inner content uses alignwide / content
------------------------------------------------------------------------- */

.nb-band {
	box-sizing: border-box;
	margin-block: 0;
	padding-inline: 0 !important;
	width: 100%;
}

/*
	Fill the band only when the frame isn’t explicitly wide.
	alignwide keeps WP wide max-width (About, etc.).
*/
.nb-band :is(
	.is-style-corner-frame,
	.is-style-thin-corner-frame,
	.is-style-purple-corner-frame
):not(.alignwide) {
	box-sizing: border-box;
	margin-inline: 0;
	max-width: none;
	width: 100%;
}

/* -------------------------------------------------------------------------
	Flush — sections use padding for air. Flush kills the chrome gap.
------------------------------------------------------------------------- */

.nb-flush-start {
	margin-block-start: 0;
	padding-block-start: 0;
}

.nb-flush-end {
	margin-block-end: 0;
	padding-block-end: 0;
}

/*
	First full band / CTA in page content sits under the header.
*/
body:has(.wp-block-post-content > :first-child:is(.nb-band, .nb-flush-start, .next-in-series))
	.wp-site-blocks
	> main,
body:has(.wp-block-post-content > :first-child:is(.nb-band, .nb-flush-start, .next-in-series))
	.site-content,
body:has(.wp-block-post-content > :first-child:is(.nb-band, .nb-flush-start, .next-in-series))
	.wp-block-post-content,
body:has(.wp-block-post-content > :first-child .next-in-series) .wp-site-blocks > main,
body:has(.wp-block-post-content > :first-child .next-in-series) .site-content,
body:has(.wp-block-post-content > :first-child .next-in-series) .wp-block-post-content,
.wp-block-post-content > :first-child:is(.nb-band, .nb-flush-start, .next-in-series),
.wp-block-post-content > :first-child:has(.next-in-series) {
	margin-block-start: 0;
	padding-block-start: 0;
}

/*
	CTA / band flush against the footer — only when it is the last block.
*/
body:has(main > :last-child:is(.nb-flush-end, .next-in-series)) .wp-site-blocks > :is(.site-footer, footer, .wp-block-template-part.site-footer),
body:has(main > :last-child .next-in-series) .wp-site-blocks > :is(.site-footer, footer, .wp-block-template-part.site-footer),
body:has(.wp-block-post-content > :last-child:is(.nb-flush-end, .next-in-series)) .wp-site-blocks > :is(.site-footer, footer, .wp-block-template-part.site-footer),
body:has(.wp-block-post-content > :last-child .next-in-series) .wp-site-blocks > :is(.site-footer, footer, .wp-block-template-part.site-footer),
body:has(main > :last-child:is(.nb-flush-end, .next-in-series)) .wp-site-blocks > .wp-block-template-part:has(footer),
body:has(main > :last-child .next-in-series) .wp-site-blocks > .wp-block-template-part:has(footer),
body:has(.wp-block-post-content > :last-child .next-in-series) .wp-site-blocks > .wp-block-template-part:has(footer) {
	margin-block-start: 0;
}

body:has(main > :last-child:is(.nb-flush-end, .next-in-series)) .wp-site-blocks > main,
body:has(main > :last-child .next-in-series) .wp-site-blocks > main,
body:has(.wp-block-post-content > :last-child .next-in-series) .wp-site-blocks > main {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
	Bracket link — CRT-style [LABEL] cue (secondary standalone action)
	Mono, caps, brackets in the label, never an arrow.
	No underline at rest; underline on hover.
------------------------------------------------------------------------- */

.nb-bracket-link,
.next-in-series__toc a,
.next-in-series__continue,
.series-issue-card__link {
	color: inherit;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small); /* ~14px */
	font-weight: 400;
	letter-spacing: 0.055em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		color var(--net-blog-motion-duration-fast) var(--net-blog-motion-ease-standard),
		text-decoration-color var(--net-blog-motion-duration-fast) var(--net-blog-motion-ease-standard);
}

.nb-bracket-link:hover,
.next-in-series__toc a:hover,
.next-in-series__continue:hover,
.series-issue-card__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.nb-bracket-link:focus-visible,
.next-in-series__toc a:focus-visible,
.next-in-series__continue:focus-visible,
.series-issue-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple, #493597);
	outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.nb-bracket-link,
	.next-in-series__toc a,
	.next-in-series__continue,
	.series-issue-card__link {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
	CTA placard — empty slot where a boxed button will go.
	Same chrome as the boxed button; not a link (no arrow, no brackets).
------------------------------------------------------------------------- */

.cta-placard {
	align-items: center;
	align-self: start;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--primary);
	box-sizing: border-box;
	color: var(--wp--preset--color--primary);
	cursor: default;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	font-weight: 400;
	justify-content: flex-start;
	letter-spacing: 0.045em;
	line-height: 1.2;
	margin: 0;
	max-width: 100%;
	padding: 1.25em 1.5em;
	pointer-events: none;
	text-transform: uppercase;
	user-select: none;
	width: fit-content;
}

/* -------------------------------------------------------------------------
	Mono chip — filled uppercase label (not the unfilled eyebrow)
------------------------------------------------------------------------- */

.nb-chip,
.article-heading-meta,
.article-section__label,
.series-issue-card__issue {
	background: var(--wp--preset--color--primary, #500eee);
	box-sizing: border-box;
	color: var(--wp--preset--color--base, #fff);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.045em;
	line-height: 1.25;
	padding: 0.55rem 0.75rem;
	text-transform: uppercase;
}

.nb-chip--inverse,
.next-in-series__eyebrow {
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
	display: inline-flex;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	gap: 0.45rem;
	letter-spacing: 0.055em;
	line-height: 1;
	padding: 0.65rem 0.75rem;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
	Publication emblem
------------------------------------------------------------------------- */

:root {
	--nb-emblem-size: clamp(8rem, 14vw, 11.25rem);
	--nb-emblem-size-s: clamp(6.5rem, 22vw, 8.5rem);
}

.nb-emblem,
.article-heading__emblem,
.next-in-series__emblem,
.article-divider__emblem {
	aspect-ratio: 1;
	display: block;
	flex: 0 0 auto;
	height: auto;
	max-width: 100%;
	width: var(--nb-emblem-size);
}

.article-heading__emblem {
	background: url("../icons/netbrain-blog-emblem.svg") center / contain no-repeat;
	margin: 0;
}

@media (max-width: 781px) {
	.nb-emblem,
	.next-in-series__emblem,
	.article-divider__emblem {
		width: var(--nb-emblem-size-s);
	}
}

@media (max-width: 480px) {
	.next-in-series__emblem {
		width: 5.5rem;
	}
}

/* -------------------------------------------------------------------------
	Cue arrow (stretchy) + flex hairline rule
------------------------------------------------------------------------- */

.nb-cue-arrow,
.next-in-series__arrow,
.article-divider__arrow {
	display: block;
	flex: 1 1 auto;
	height: 0.5625rem;
	min-width: 1.5rem;
	overflow: visible;
	pointer-events: none;
	width: 100%;
}

.nb-rule,
.nb-footer-meta__rule,
.series-issue-card__meta-rule,
.article-divider__rule {
	align-self: center;
	background: currentColor;
	border: 0;
	box-sizing: border-box;
	flex: 1 1 auto;
	height: 1px;
	justify-self: stretch;
	min-width: 1.25rem;
	opacity: 0.55;
	/* auto — width:100% blows out CSS grid tracks (section TOC rows) */
	width: auto;
}

.nb-footer-meta__rule,
.series-issue-card__meta-rule {
	background: none;
	border-top: 1px solid currentColor;
	height: 0;
}

/* -------------------------------------------------------------------------
	Planes motion markers
------------------------------------------------------------------------- */

.planes-start--hook {
	height: 0;
	margin: 0;
	overflow: visible;
	padding: 0;
}