/* =====================================================================
 * Faragiri - page hero (archive H1 + description)
 * Loaded site-wide by mu-plugin faragiri-page-hero.php.
 *
 * Replaces the stock MAS Videos archive header, which was a 22px title
 * with a hard 1px border-bottom (#2a2e3c) and a centred grey paragraph
 * under it. Two problems it had: the border was a fixed navy hairline
 * that survived every colour scheme, and the title's fixed
 * purple→blue→green gradient (from blog.css) meant Light mode had to
 * blank the gradient out entirely to stay readable.
 *
 * Everything below paints from the theme-switcher tokens instead, so the
 * same block works in all eight modes without a per-mode override.
 * Selectors are html[data-fgri-theme]-prefixed so they outrank both
 * masvideos-rtl.css and the child theme's own !important rules.
 * ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1) The header block
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .content-area > .page-header,
html[data-fgri-theme] .site-main .page-header,
html[data-fgri-theme] body.archive .archive__header,
html[data-fgri-theme] body.archive .page__header {
	position: relative;
	isolation: isolate;
	text-align: center;
	border: 0 !important;
	background: transparent !important;
	/* .site-content already contributes 37px above this block, so the hero's
	 * own top padding only has to finish the job -- at the old 51px the
	 * title floated in an empty band. Bottom is deliberately tight: the
	 * filter/sort bar belongs to the heading, not to a separate section. */
	padding: clamp(.4rem, 1.4vw, .9rem) 1.25rem clamp(.5rem, 1.4vw, .9rem) !important;
	margin: 0 0 clamp(.4rem, 1.2vw, .7rem) !important;
}

/* Ambient bloom behind the title - the only "colour" in the block, and it
 * is a wash rather than a line. Sits below the text on its own layer.
 *
 * Both radials use `closest-side` on purpose. A background is painted only
 * inside its own element box, so a percentage-sized radial placed off
 * centre (the previous `42% 48% at 78% 10%`) ran past the box and got
 * chopped, drawing a visible rectangle with hard right and bottom edges.
 * `closest-side` sizes each ellipse to the nearest edge, so it always ends
 * inside the box and there is nothing left to clip. */
html[data-fgri-theme] .content-area > .page-header::before,
html[data-fgri-theme] .site-main .page-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* full width of the header, no transform. The old
	 * inset-inline-start + translateX pair pushed the box off to one side
	 * under RTL, which is why the clipped rectangle sat where it did. */
	inset-inline: 0;
	inset-block-start: -35%;
	block-size: max(180%, 20rem);
	background:
		radial-gradient(closest-side at 50% 52%, var(--fg-glow, rgba(36, 186, 239, .13)), transparent),
		radial-gradient(closest-side at 72% 34%, var(--fg-glow-2, rgba(83, 145, 228, .12)), transparent);
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * 2) The H1
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .page-header h1.page-title,
html[data-fgri-theme] .page-header .page__title,
html[data-fgri-theme] body.archive .archive__header .page__title,
html[data-fgri-theme] body.archive .page__header .page__title {
	display: block !important;
	max-inline-size: 22ch;
	margin: 0 auto !important;
	padding: 0 0 .1em !important;
	border: 0 !important;
	font-size: clamp(1.75rem, 4.2vw, 2.7rem) !important;
	font-weight: 900 !important;
	line-height: 1.32 !important;
	letter-spacing: -.02em;
	text-wrap: balance;
	text-align: center !important;
	/* ink → accent, both token driven: legible in Light (dark ink into a
	 * dark teal) and luminous in the seven dark modes. */
	color: var(--fg-text) !important;
	background-image: linear-gradient(100deg, var(--fg-text) 30%, var(--fg-accent) 120%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* short, centred rule under the heading. Fades to nothing at both ends so
 * it reads as punctuation, not as a border across the page. */
html[data-fgri-theme] .page-header h1.page-title::after,
html[data-fgri-theme] .page-header .page__title::after {
	content: "";
	display: block;
	inline-size: 4.2rem;
	block-size: 2px;
	margin: .7rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--fg-accent), transparent);
	opacity: .65;
}

/* ------------------------------------------------------------------ *
 * 3) The paragraph under it
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .page-header .taxonomy-description,
html[data-fgri-theme] .page-header .page__subtitle,
html[data-fgri-theme] body.archive .taxonomy-description,
html[data-fgri-theme] body.archive .page__subtitle {
	/* 46ch, not 58: these descriptions are one or two sentences, and at the
	 * wider measure the second line came out as a two-word orphan. Paired
	 * with balance so the two lines end up roughly equal. */
	max-inline-size: 46ch !important;
	margin: .8rem auto 0 !important;
	color: var(--fg-text-2) !important;
	font-size: clamp(.98rem, 1.4vw, 1.06rem) !important;
	line-height: 1.9 !important;
	font-weight: 400 !important;
	text-align: center !important;
	text-wrap: balance;
}
html[data-fgri-theme] .page-header .taxonomy-description p {
	margin: 0 0 .7rem;
	color: inherit !important;
	font-size: inherit;
	line-height: inherit;
}
html[data-fgri-theme] .page-header .taxonomy-description p:last-child { margin-block-end: 0; }
html[data-fgri-theme] .page-header .taxonomy-description strong,
html[data-fgri-theme] .page-header .taxonomy-description b { color: var(--fg-text) !important; font-weight: 700; }
html[data-fgri-theme] .page-header .taxonomy-description a { color: var(--fg-accent) !important; }

/* the child theme had a hover trick that repainted the description white
 * when the title was hovered - pointless now that the colour is a token,
 * and in Light it flashed white-on-white. */
html[data-fgri-theme] .page-title:hover ~ .taxonomy-description { color: var(--fg-text-2) !important; }

/* ------------------------------------------------------------------ *
 * 4) Small screens
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
	html[data-fgri-theme] .page-header h1.page-title { max-inline-size: none; }
	html[data-fgri-theme] .page-header .taxonomy-description { font-size: .95rem !important; line-height: 1.85 !important; }
}

/* ------------------------------------------------------------------ *
 * 5) The eyebrow chips, removed site-wide
 *    Every hero on the site opened with the same little pill: a dot (or
 *    a small icon) plus two or three words in a rounded outline. Five
 *    different components grew their own copy of it. It carried no
 *    information the H1 underneath didn't already carry, and repeated
 *    that hard on a site where the visitor sees three or four heroes in
 *    a session. Hidden here in one place rather than cut out of five
 *    templates, so restoring it is a one-line change.
 * ------------------------------------------------------------------ */
html[data-fgri-theme] .fab__eyebrow,
html[data-fgri-theme] .fgff-cta__eyebrow,
html[data-fgri-theme] .fgri-blog-hero__eyebrow,
html[data-fgri-theme] .fgri-seo__eyebrow {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 6) Motion safety
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html[data-fgri-theme] .page-header *,
	html[data-fgri-theme] .page-header *::before,
	html[data-fgri-theme] .page-header *::after { transition: none !important; animation: none !important; }
}