/**
 * tf-ink-header.css
 *
 * Overlaid white header + full-bleed ink hero for the two ink-hero pages that are
 * NOT generated by wp-publish/build-inner-pages.mjs and therefore never received
 * that script's baked DARK_HEADER_CSS:
 *
 *   1. News (the Posts index, rendered by home.php)         -> body.blog
 *   2. Contact (a hand-built page with a Spectra/CF7 form)  -> body:not(.blog)
 *
 * Symptoms this fixes (reported on /news/ and /contact/):
 *   - Header logo + nav were DARK on the dark hero (dark-on-dark). The site-wide
 *     adaptive-contrast script (functions.php) misclassified the background because
 *     the hero's dark look is a background-IMAGE gradient over a transparent
 *     background-COLOR; the luminance probe reads background-color only, walks past
 *     the transparent hero to the light page behind, and picks tf-header-on-light.
 *   - The ink hero did not stretch full width (it was a centred, 22px-rounded box).
 *
 * Enqueued + the `tf-ink-page` body class added in functions.php on
 * is_home() || is_page('contact'). Scoped entirely to `.tf-ink-page`, so it cannot
 * affect the front page or the build-inner-pages.mjs pages (which bake their own).
 */

/* ------------------------------------------------------------ full-bleed hero */

/* News uses Astra's boxed "separate container"; release it to full width and let
   the inner .tf-wrap re-centre the content (the card grid keeps its own margins). */
.tf-ink-page.blog .site-content .ast-container {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}
.tf-ink-page.blog #primary,
.tf-ink-page.blog .content-area {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
}
.tf-ink-page.blog .tf-page {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.tf-ink-page.blog .tf-pagehead {
	border-radius: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

/* Contact uses Astra's "plain container"; the form lives in separate sibling
   blocks, so break ONLY the hero out to the viewport and leave everything else. */
/* v1.0.18: the Contact page's baked content CSS caps its .tf-page wrapper at
   max-width:1200px with overflow-x:clip, which clipped the hero's breakout back
   to 1200px (the header colour fixed in 1.0.17 but the hero stayed inset). On
   Contact this .tf-page wraps ONLY the hero (the form is in sibling blocks), so
   releasing it is safe; body{overflow-x:clip} still prevents any h-scroll. */
.tf-ink-page:not(.blog) .tf-page {
	max-width: none !important;
	overflow: visible !important;
}
.tf-ink-page:not(.blog) .tf-page > .tf-pagehead {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	border-radius: 0 !important;
}

/* -------------------------------------------- overlaid white header (desktop) */
/* Above Astra's 1200px header breakpoint the horizontal bar is used; overlay it
   transparently on the hero and force white logo + nav for contrast. */
@media (min-width: 1201px) {
	.tf-ink-page #masthead,
	.tf-ink-page #masthead .main-header-bar-wrap,
	.tf-ink-page #masthead .main-header-bar,
	.tf-ink-page #masthead .ast-primary-header-bar {
		background: transparent !important;
		box-shadow: none !important;
		border-bottom: 0 !important;
	}
	.tf-ink-page #masthead {
		position: absolute !important;
		left: 0;
		right: 0;
		z-index: 99;
	}
	/* extra top padding so hero content clears the overlaid header */
	.tf-ink-page .tf-pagehead {
		padding-block: clamp(150px, 12vw, 210px) clamp(46px, 6vw, 74px) !important;
	}
	.tf-ink-page #masthead .main-header-menu > .menu-item > .menu-link,
	.tf-ink-page #masthead .main-header-menu > .menu-item > .menu-link:hover,
	.tf-ink-page #masthead .main-header-menu > .menu-item > .menu-link:focus,
	.tf-ink-page #masthead .ast-header-navigation-arrow {
		color: #ffffff !important;
	}
	.tf-ink-page #masthead .custom-logo {
		filter: brightness(0) invert(1) !important;
	}
}

/* --------------------------------------------- readable header (mobile/tablet) */
/* At/below 1200px the transparent overlay is off and the header is the normal
   light bar, so keep a dark, unfiltered logo + nav (Astra's transparent-header
   defaults + the contrast script would otherwise leave them white-on-light). */
@media (max-width: 1200px) {
	.tf-ink-page #masthead .main-header-menu > .menu-item > .menu-link,
	.tf-ink-page #masthead .site-title a {
		color: #0f172a !important;
	}
	.tf-ink-page #masthead .custom-logo,
	.tf-ink-page #masthead img.ast-logo-file {
		filter: none !important;
	}
}