/*
 * Print styles for the Lee Abbey London theme.
 *
 * theme.json has no concept of media queries, so print-specific rules live
 * in this dedicated stylesheet. functions.php enqueues it with media="print"
 * (the same approach the bundled WordPress themes use for print.css), so the
 * browser only applies it when a page is printed or saved to PDF.
 *
 * What it does:
 *   - drops the featured-image hero, keeping the page title as dark text on white
 *   - swaps the white site logo for a dark one (set under Appearance > Print)
 *   - removes the breadcrumb / back links
 *   - keeps content within the page width and stops images overflowing
 *   - trims the footer down to just the contact details
 */

@media print {

	/* ---------- Page box ---------- */

	@page {
		margin: 16mm;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
		line-height: 1.4;
	}

	/* Force everything to plain black on white. Images and the SVG icons we
	   want to keep are restored further down. */
	*,
	*::before,
	*::after {
		background: transparent !important;
		background-image: none !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
		filter: none !important;
		animation: none !important;
		transition: none !important;
	}

	/* Scroll-in animations (Twentig's .tw-block-animation) leave elements at
	   opacity:0 until the observer fires. Printing may never trigger it, so
	   force every animated block to its final, visible state. */
	.tw-block-animation {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	/* WordPress preset colour classes set background-color with !important and
	   a class-level selector, so the universal rule above cannot reach them. */
	[class*="-background-color"],
	.has-background,
	.wp-block-cover__inner-container {
		background: none !important;
		background-color: transparent !important;
	}

	/* Boxed content inside the page body (anything that had a background fill,
	   plus quotes, covers and callout paragraphs) loses its fill above, so
	   give it a thin black outline instead so it still reads as a distinct
	   box. Its on-screen padding and rounded corners are left untouched.
	   Scoped to the post content so it does not outline the structural
	   <main> / footer wrappers, which also carry .has-background. */
	.wp-block-post-content .has-background,
	.wp-block-post-content .wp-block-quote,
	.wp-block-post-content .wp-block-pullquote,
	.wp-block-post-content .wp-block-cover,
	.wp-block-post-content details,
	.wp-block-post-content .wp-block-paragraph[class*="is-style-paragraph-"] {
		border: 1px solid #000 !important;
		/* Keep a box on one page; the browser still splits it if it is
		   taller than the page on its own. */
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Tighten box padding for print to about half of the on-screen value,
	   with a floor. Box padding in this theme is always a spacing preset, so
	   redefining the presets on the box itself halves whatever an editor
	   picked - now or on a future page - without hard-coding a value per box.
	   (Callout paragraphs are left out: their padding is in em and the large
	   left inset has to stay clear of the icon.) */
	.wp-block-post-content .has-background,
	.wp-block-post-content .wp-block-quote,
	.wp-block-post-content .wp-block-pullquote,
	.wp-block-post-content .wp-block-cover,
	.wp-block-post-content details {
		--wp--preset--spacing--20: 8px;                       /* 10px  -> 8  (floor) */
		--wp--preset--spacing--30: 10px;                      /* 20px  -> 10 */
		--wp--preset--spacing--40: 15px;                      /* 30px  -> 15 */
		--wp--preset--spacing--50: clamp(15px, 2.5vw, 25px);  /* half of preset 50 */
		--wp--preset--spacing--60: clamp(25px, 3.5vw, 35px);  /* half of preset 60 */
	}

	/* Fallback padding for a content cover that had none of its own (its
	   on-screen / inline padding, if any, still wins over this) */
	.wp-block-post-content .wp-block-cover {
		padding: 0.5em 0.7em;
	}

	/* Keep the callout-paragraph icons visible (they are masked backgrounds
	   that the reset above would blank out) */
	.wp-block-post-content .wp-block-paragraph[class*="is-style-paragraph-"]::before {
		background: #000 !important;
	}

	/* Drop the oversized decorative quotation marks inside the bordered box */
	.wp-block-post-content .wp-block-quote::before,
	.wp-block-post-content .wp-block-quote::after {
		content: none !important;
	}

	/* ---------- Layout / width ---------- */

	/* WordPress sets the root padding custom properties on <body>, so overriding
	   them there (not just :root) zeroes both the side padding on
	   .has-global-padding wrappers AND the negative margins that full-width
	   blocks use to break out of it - which is what was pushing content past
	   the right edge of the sheet. Inline padding on individual blocks (e.g.
	   the card boxes) still wins, so their spacing is unaffected. */
	:root,
	body,
	.wp-site-blocks {
		--wp--style--root--padding-left: 0 !important;
		--wp--style--root--padding-right: 0 !important;
	}

	.wp-site-blocks > *,
	.wp-site-blocks > * > * {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Nothing in the body may be wider than the printable area */
	.wp-site-blocks,
	main,
	.wp-block-post-content,
	.wp-block-post-content > * {
		max-width: 100% !important;
	}

	/* The post content wrapper carries an explicit width + side padding that
	   together overflow its parent; let it simply fill the column. */
	.wp-block-post-content,
	.entry-content {
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.alignfull,
	.alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Let constrained content use the full sheet (within the @page margin)
	   instead of being held to --wp--style--global--content-size. */
	.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
		max-width: none !important;
	}

	/* Print the page as though on a larger tablet rather than a phone: the
	   sheet is only ~180mm wide, so on-screen breakpoints that need ~1024px
	   never fire and multi-column layouts collapse. These rules put the
	   density back.

	   Card grids: on screen they use auto-fill with a ~19rem minimum, which
	   only fits two across an A4 page. Drop the minimum so they pack three
	   (four for small items), with shrinkable children. */
	.wp-block-post-content .is-layout-grid {
		grid-template-columns: repeat( auto-fill, minmax( min( 11rem, 100% ), 1fr ) ) !important;
		gap: 5mm !important;
		container-type: normal !important;
	}

	.wp-block-post-content .is-layout-grid > * {
		min-width: 0 !important;
		max-width: 100% !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Columns blocks: keep them side by side (core only un-stacks them above
	   782px, which the printable area may fall short of). Columns with an
	   explicit width keep it; the rest share the remaining space evenly. */
	.wp-block-columns {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}

	.wp-block-columns > .wp-block-column {
		min-width: 0 !important;
	}

	.wp-block-columns > .wp-block-column:not( [style*="flex-basis"] ) {
		flex: 1 1 0 !important;
	}

	main,
	main > .wp-block-group,
	.wp-block-group[style*="min-height"],
	.wp-block-group[style*="vh"] {
		min-height: 0 !important;
	}

	main > .wp-block-group {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* ---------- Header: keep the logo only ---------- */

	.site-header,
	.site-header .wp-block-group {
		position: static !important;
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.site-header {
		padding-bottom: 8mm !important;
	}

	.site-header::before {
		display: none !important;
	}

	body.logged-in .site-header {
		top: auto !important;
	}

	.site-header .wp-block-navigation,
	.site-header .wp-block-search,
	.site-header .wp-block-boldblocks-svg-block {
		display: none !important;
	}

	/* ---------- Site logo: use the dark print version ---------- */

	/* When a print logo has been set the <body> gets .has-print-logo: hide the
	   normal (white) logo and show the dark one injected after it. With no
	   print logo set, knock the white logo to solid black so it is at least
	   visible on paper. */
	.has-print-logo .custom-logo-link,
	.has-print-logo .wp-block-site-logo > a,
	.has-print-logo img.custom-logo {
		display: none !important;
	}

	.lalondon-print-logo {
		display: block !important;
		width: auto !important;
		max-width: 55mm !important;
		height: auto !important;
	}

	body:not(.has-print-logo) img.custom-logo {
		filter: brightness(0) !important;
	}

	/* ---------- Featured-image hero ---------- */

	/* The selectors mirror those in style.css (which use :not(:has()) and a
	   bare `div` for the no-featured-image case) so they can override the
	   min-height there on specificity as well as cascade order. */
	.wp-block-cover.featured-image-cover,
	.wp-block-cover.featured-image-cover:not( :has( img.wp-block-cover__image-background ) ),
	.wp-block-cover.featured-image-cover div,
	.wp-block-cover.featured-image-cover:not( :has( img.wp-block-cover__image-background ) ) div {
		min-height: 0 !important;
	}

	.wp-block-cover.featured-image-cover {
		padding: 0 !important;
		margin: 6mm 0 4mm !important;
		background: none !important;
		display: block !important;
	}

	.wp-block-cover.featured-image-cover > .wp-block-cover__background,
	.wp-block-cover.featured-image-cover > .wp-block-cover__image-background,
	.wp-block-cover.featured-image-cover .wp-block-cover__video-background,
	.wp-block-cover.featured-image-cover .cover-video-toggle {
		display: none !important;
	}

	.wp-block-cover.featured-image-cover .wp-block-group {
		display: block !important;
	}

	/* ---------- Page / post title ---------- */

	.wp-block-post-title,
	.wp-block-query-title,
	h1,
	.wp-site-blocks h1 {
		background: none !important;
		color: #000 !important;
		padding: 0 !important;
		margin: 0 0 4mm !important;
		font-size: 22pt !important;
		line-height: 1.15 !important;
	}

	/* ---------- Remove navigation aids ---------- */

	.wp-block-breadcrumbs,
	.wp-block-post-navigation-link,
	.wp-block-query-pagination,
	.more-link,
	.wp-block-post-featured-image {
		display: none !important;
	}

	/* ---------- Content: links, images, tables ---------- */

	a {
		color: #000 !important;
		text-decoration: underline !important;
	}

	/* Long URLs / email addresses must break rather than push a narrow
	   (e.g. three-up) column off the sheet. */
	p, li, a, h1, h2, h3, h4, h5, h6,
	td, th, dt, dd, figcaption, .wp-block-verse {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* ...but button-style links read as buttons, not links */
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-file__button,
	.wp-block-button__link:hover {
		text-decoration: none !important;
	}

	/* Drop the external-link arrow and the breadcrumb arrow (masked
	   background images that would not print anyway) */
	a[target="_blank"]::after,
	.wp-block-breadcrumbs a::before {
		content: none !important;
		display: none !important;
	}

	img {
		max-width: 100% !important;
		height: auto !important;
		/* Never let a single image (or a broken one) run taller than the page */
		max-height: 88vh !important;
	}

	figure,
	.wp-block-image,
	.wp-block-gallery,
	.wp-block-table,
	pre,
	blockquote,
	.wp-block-pullquote {
		break-inside: avoid;
		page-break-inside: avoid;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Cover blocks used within the content */
	.wp-block-cover:not(.featured-image-cover) {
		min-height: 0 !important;
		color: #000 !important;
	}

	.wp-block-cover:not(.featured-image-cover) .wp-block-cover__background {
		display: none !important;
	}

	.wp-block-table table,
	.wp-block-table th,
	.wp-block-table td {
		border-color: #000 !important;
	}

	.wp-block-table td,
	.wp-block-table th {
		white-space: normal !important;
	}

	.wp-block-table::before {
		display: none !important;
	}

	/* Expand FAQ <details> so their content prints */
	details:not([open]) > *:not(summary) {
		display: revert !important;
	}

	summary {
		list-style: none;
	}

	summary::before {
		content: none !important;
	}

	/* Keep headings with the text that follows */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		break-after: avoid;
	}

	p, li, blockquote {
		orphans: 3;
		widows: 3;
	}

	/* ---------- Footer: contact details only ---------- */

	/* The .alignfull group keeps its first child (the logo / address / phone /
	   email row) and drops the "Get in touch" button + social icons. The
	   .has-primary-background-color group keeps that block and drops the
	   safeguarding notice, the Lee Abbey Movement bar and the legal small
	   print. */
	footer .wp-block-group.alignfull > :not(:first-child),
	footer .wp-block-group.has-primary-background-color > :not(:first-child) {
		display: none !important;
	}

	footer.wp-block-template-part .wp-block-group {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-top: 0 !important;
	}

	footer.wp-block-template-part {
		margin-top: 8mm !important;
		padding-top: 8mm !important;
		border-top: 1pt solid #000 !important;
	}

	/* Match the gap below the top rule to the gap between the detail rows */
	footer .wp-block-group.alignfull > :first-child {
		row-gap: 8mm !important;
	}

	footer .wp-block-site-logo {
		margin-bottom: 0 !important;
	}

	/* Contact details are not really links on paper */
	footer a {
		text-decoration: none !important;
	}

	/* Print the contact icons in black. The SVG-block plugin paints them from
	   CSS custom properties (with !important), so override those as well as
	   fill directly. */
	footer .wp-block-boldblocks-svg-block,
	footer .wp-block-boldblocks-svg-block__inner {
		--svg--fill-color: #000 !important;
		--bb--fill--color: #000 !important;
	}

	footer.wp-block-template-part .wp-block-boldblocks-svg-block svg,
	footer.wp-block-template-part .wp-block-boldblocks-svg-block svg * {
		fill: #000 !important;
	}
}