/* Spartan AI redesign: every page header as on /working-together/.
   Loads after sprt-30/40/50 and overrides their pale title banner.
   The home page is not touched (its hero lives in sprt-70-home-hero.css).

   /working-together/ (page-id-719) is the reference and is not changed: a
   photo turned into a faint grayscale texture on ink, a violet glow over it
   (sprt-30-components.css, section 9), light text, a large serif headline.
   There is no blink: the stock photo glitch is switched off on every page
   but the front page (inc/sprt-no-header-blink.php), and sprt-30 keeps the
   text glitch layers switched off. No canvas animation runs on these pages.

   Headers covered:
   - the theme title banner .firwl-pageheader: content pages, blog, archives,
     categories, authors, dates, search, single posts, testimonials. Its
     photo is already in the markup; it used to be hidden. On single
     posts the script swaps the featured image for the /working-together/ photo;
     Success Stories and the blog get pictures of their own, shown whole.
   - the first content row of Contact us (598), S.O.S. (725), Pre-sale (727).
     S.O.S. and Pre-sale already had the photo row.
   - Contact us and the 404 block have no photo: the script adds one (Contact
     us its own, header-home1.jpg; the 404 block the /working-together/
     photo). Without the script they are still the same ink header, just
     without the photo. */

/* ---------- Title banner (.firwl-pageheader) ---------- */

body.sprt:not(.home) .firwl-master .firwl-pageheader {
	border-bottom: 0;
	background-color: var(--sprt-ink);
	color: var(--sprt-on-ink);
	text-align: center;
}

/* The pale corner glow of the old banner goes */
body.sprt:not(.home) .firwl-master .firwl-pageheader::before {
	display: none;
}

/* The photo comes back, treated exactly as the /working-together/ photo.
   (sprt-30 hid it with display:none !important.) */
body.sprt:not(.home) .firwl-master .firwl-pageheader > .firwl-bgimg {
	display: block !important;
	z-index: 0;
	background-color: var(--sprt-ink);
}

body.sprt:not(.home) .firwl-master .firwl-pageheader > .firwl-bgimg img {
	opacity: 0.22;
	filter: grayscale(1);
	mix-blend-mode: luminosity;
}

/* Stock duotone: the cyan multiply layer goes, the screen layer becomes the violet glow */
body.sprt:not(.home) .firwl-master .firwl-pageheader > .firwl-bgimg::before {
	display: none;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader > .firwl-bgimg::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 1;
	mix-blend-mode: normal;
	pointer-events: none;
	background: radial-gradient(48rem 26rem at 85% 0%, color-mix(in srgb, var(--sprt-violet) 45%, transparent), transparent 70%);
}

body.sprt:not(.home) .firwl-master .firwl-pageheader > :is(.firwl-grad-layer, .firwl-particles) {
	display: none !important;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader__contents {
	padding: clamp(4rem, 8vw, 6.5rem) 0;
	text-align: center;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-pagecaption {
	max-width: 22ch;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	color: var(--sprt-on-ink) !important;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-meta,
body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-meta :is(span, i) {
	text-align: center;
	color: var(--sprt-on-ink-soft) !important;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-meta {
	max-width: 46rem;
	margin: 1.25rem auto 0;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-meta a {
	color: var(--sprt-lilac) !important;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-meta a:hover {
	color: var(--sprt-on-ink) !important;
}

/* Search results: the search box sits centred under the title */
body.sprt:not(.home) .firwl-master .firwl-pageheader .firwl-pageheader__search {
	margin-right: auto;
	margin-left: auto;
}

/* Share button on ink */
body.sprt:not(.home) .firwl-master .firwl-pageheader .ttg-reaktions-shareball__menu-btn {
	border-color: var(--sprt-line-ink);
	background: var(--sprt-ink);
	color: var(--sprt-on-ink);
}

body.sprt:not(.home) .firwl-master .firwl-pageheader .ttg-reaktions-shareball__menu-btn i {
	color: var(--sprt-on-ink);
}

/* ---------- Contact us: an ink row like the photo rows ---------- */

body.sprt.page-id-598 #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:first-child {
	position: relative;
	background-color: var(--sprt-ink);
}

body.sprt.page-id-598#firwlBody #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:first-child > .vc_row {
	position: relative;
	z-index: 2;
	background: transparent !important;   /* the paper band in sprt-50 is !important */
	color: var(--sprt-on-ink);
}

body.sprt.page-id-598 #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:first-child :is(h2, h4, .firwl-caption, .firwl-glitchtxt) {
	color: var(--sprt-on-ink) !important;
}

/* ---------- 404 ---------- */

body.sprt.error404 #firwlMaster > .firwl-section {
	position: relative;
	background-color: var(--sprt-ink) !important;
	color: var(--sprt-on-ink);
}

body.sprt.error404 #firwlMaster > .firwl-section > .firwl-notfound404 {
	position: relative;
	z-index: 2;
}

body.sprt.error404 #firwlMaster > .firwl-section .firwl-notfound404 h2 {
	color: var(--sprt-lilac) !important;
}

body.sprt.error404 #firwlMaster > .firwl-section .firwl-notfound404 h4 {
	color: var(--sprt-on-ink) !important;
}

body.sprt.error404 #firwlMaster > .firwl-section .firwl-notfound404 .firwl-menubar__footer a {
	color: var(--sprt-on-ink) !important;
}

body.sprt.error404 #firwlMaster > .firwl-section .firwl-notfound404 .firwl-menubar__footer a:hover {
	color: var(--sprt-lilac) !important;
}

/* The photo the script adds to Contact us and the 404 block: the same treatment.
   (On Contact us the sprt-30 rules for row photos already apply; repeated here
   so the 404 block, which is not a row, matches.) */
body.sprt:not(.home) #firwlMaster .firwl-bgimg.sprt-header-photo {
	z-index: 0;
	background-color: var(--sprt-ink);
}

body.sprt:not(.home) #firwlMaster .firwl-bgimg.sprt-header-photo img {
	opacity: 0.22;
	filter: grayscale(1);
	mix-blend-mode: luminosity;
}

body.sprt:not(.home) #firwlMaster .firwl-bgimg.sprt-header-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(48rem 26rem at 85% 0%, color-mix(in srgb, var(--sprt-violet) 45%, transparent), transparent 70%);
}

/* Contact us subtitle: its inline-coloured span was pinned to ink-soft by an
   !important rule in sprt-50 written for the old paper band (two ids win here) */
body.sprt.page-id-598#firwlBody #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:first-child :is(h2, h4) span {
	color: var(--sprt-on-ink) !important;
}

/* Contact us: the header takes the shape of its photo (header-home1.jpg,
   1670 x 828) so the whole picture shows, uncropped. The text stays centred
   in it. Where the text needs more height than that shape gives (narrow
   phones), the header grows to fit the text and the photo is cropped. */
body.sprt.page-id-598 #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1670 / 828;
}

body.sprt.page-id-598#firwlBody #firwlMaster .wpb-content-wrapper > .firwl-vc-row-container:first-child > .vc_row {
	width: 100%;
}

/* Pages with a picture of their own in the title banner (Success Stories, the
   blog; listed in inc/sprt-page-header.php): the script adds .sprt-fit-photo
   and the picture's shape as --sprt-photo-ratio, so the header shows the whole
   picture, uncropped, with the title centred in it. The parallax shift is
   dropped there. Where the title needs more height than that shape gives, the
   header grows. */
body.sprt:not(.home) .firwl-master .firwl-pageheader.sprt-fit-photo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: var(--sprt-photo-ratio);
}

body.sprt:not(.home) .firwl-master .firwl-pageheader.sprt-fit-photo > .firwl-pageheader__contents {
	width: 100%;
}

body.sprt:not(.home) .firwl-master .firwl-pageheader.sprt-fit-photo > .firwl-bgimg img {
	top: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	transform: none !important;
	object-fit: cover;
}