/**
 * Print styles — landing pages (CPT "landing")
 *
 * Used twice: by browsers when visitors print, and by headless Chrome for the
 * PDF export (plugin landing-pdf, ?pdf=1). Loaded with media="print" from
 * functions.php. Audit: neco-debug/audit-print/audit-print.md
 *
 * Conventions
 * - Bricks writes element styles as unlayered inline CSS, hence the !important.
 * - Bricks layouts are flex/grid. Both Chrome and Firefox fragment those badly
 *   across pages (blocks pushed to the next page, overlaps, sliced images), so
 *   containers become plain blocks and 2-column lists use inline-block.
 * - Each "don't break" rule also has its legacy page-break-* twin (Firefox).
 * - A forced page break is set once, on the section itself: a second one on a
 *   child gives Firefox an extra blank page.
 */

/* ==================================================================
   Page setup
   ================================================================== */
@page {
	size: A4;
	margin: 14mm 12mm;

	/* Page number, bottom right (Chrome 131+, i.e. the PDF export) */
	@bottom-right {
		content: counter(page) " / " counter(pages);
		font-family: Montserrat, sans-serif;
		font-size: 8pt;
		color: #7d879c;
		vertical-align: middle;
	}
}

/* Cover page: full bleed, no page number */
@page :first {
	margin: 0;

	@bottom-right {
		content: none;
	}
}

/* Print type scale: CoreFramework sizes are fluid (vw-based) and get tiny on
   paper, so they are pinned in pt. Shared border for every card/box.
   html:root beats the :root variables Bricks/CF print later in <head>. */
html:root {
	--typography-xs: 8.5pt;
	--typography-s: 9.5pt;
	--typography-m: 10pt;
	--typography-l: 11pt;
	--typography-xl: 15pt;
	--typography-2xl: 15pt;
	--typography-3xl: 16pt;
	--typography-4xl: 22pt;
	--typography-6xl: 24pt;
	--text-s: 8.5pt;
	--text-m: 10pt;
	--print-border: 0.75pt solid #7d879c;
	--print-radius: 2mm;
}

html,
body {
	background: #fff !important;
	color: #000 !important;
}

/* ==================================================================
   1. Hidden on paper
   ================================================================== */
.skip-link,
#cookie-law-info-bar,
#cookie-law-info-again,
#cliSettingsPopup,
.cli-modal-backdrop,
.brx-popup,
.landing-mobile-menu,
.landing-menu,
.language-switcher-wrapper,
.mobile-nav-menu__open,
.brxe-button,
.contact-section__form,
.wpcf7,
.faq__answer-icon,
.footer__container-right,
.brxe-pygudm, /* empty section after the contact block */
/* Precaution for future content: videos, embeds, slider controls */
.brxe-video,
video,
iframe,
.brxe-slider .splide__arrows,
.brxe-slider .splide__pagination,
.brxe-slider-nested .splide__arrows,
.brxe-slider-nested .splide__pagination,
.brxe-carousel .splide__arrows,
.brxe-carousel .splide__pagination {
	display: none !important;
}

/* Sliders/carousels (Splide, none yet): every slide as a 2-column list,
   no clones, no transform offset */
.splide__track {
	overflow: visible !important;
	height: auto !important;
}

.splide__list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 4mm !important;
	transform: none !important;
	height: auto !important;
}

.splide__slide {
	width: auto !important;
	margin: 0 !important;
	break-inside: avoid;
	page-break-inside: avoid;
}

.splide__slide--clone {
	display: none !important;
}

/* ==================================================================
   2. Layout: plain blocks, compact spacing, no decorative backgrounds
   ================================================================== */
#brx-content,
#brx-content .brxe-section,
.hero-96__container.brxe-container,
.content-97__container.brxe-container,
.intro-section__container.brxe-container,
.feature-104__container,
.feature-107__container,
.feature-104__grid.brxe-block,
.feature-107__list.brxe-block {
	display: block !important;
}

.brxe-section,
.basic-section.brxe-section,
.basic-section.brxe-div {
	min-height: 0 !important;
	padding: 8mm 0 !important;
	overflow: visible !important;
}

.hero-96__container > * + *,
.content-97__container > * + *,
.intro-section__container > * + * {
	margin-top: 5mm !important;
}

.margin-top-l {
	margin-top: 4mm !important;
}

.content-97__container-info.brxe-block,
.content-97__counter-list.brxe-block,
.feature-104__grid.brxe-block,
.feature-107__list.brxe-block {
	height: auto !important;
	grid-template-rows: none !important;
}

.bg-image-mountain,
.bg-light-gray,
.bg-light,
.content-97__container-info.brxe-block,
.content-97__counter-element.brxe-block,
.card-feature-107.brxe-block,
.feature-104__list-item.brxe-block {
	background: none !important;
}

/* Colored panels behind card lists */
.feature-104__grid.brxe-block,
.feature-107__list.brxe-block,
.content-97__container.brxe-container {
	background: none !important;
	padding: 0 !important;
}

.color-white {
	color: #000 !important;
}

/* ==================================================================
   3. Page breaks: titles and short blocks
   ================================================================== */
h1, h2, h3, h4,
img,
figure {
	break-inside: avoid;
	page-break-inside: avoid;
}

h1, h2, h3, h4,
.intro-section__tagline,
.hero-96__tagline {
	break-after: avoid;
}

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

/* Rows of inline-block cards are "lines" too: with orphans/widows 3, a 2-row
   grid was pushed whole to the next page, leaving its text alone */
.hero-96__list-media.brxe-block,
.feature-107__list.brxe-block,
.content-97__counter-list.brxe-block {
	orphans: 1;
	widows: 1;
}

/* Section title block (badge + title) */
.intro-section__container-info.brxe-block {
	display: block !important;
	text-align: center;
	margin-bottom: 8mm !important;
	break-inside: avoid;
}

.intro-section__container-info .badge {
	display: inline-flex !important;
	margin-bottom: 2mm !important;
}

/* Title block stays with the content that follows it */
.intro-section__container-info,
.intro-section__container:has(> .intro-section__container-info:only-child) {
	break-after: avoid;
}

/* Firefox ignores break-after: avoid. Reserve 45mm below the title block:
   with break-inside: avoid, a title too close to the page bottom moves to the
   next page with its content. The negative margin cancels the extra space. */
.intro-section__container-info::after {
	content: "";
	display: block;
	height: 45mm;
	margin-bottom: -45mm;
}

/* Followed by an unbreakable text panel (content-97): reserve its height, or
   the panel moves alone to the next page and leaves the title behind */
.intro-section__container:has(+ .content-97__container) .intro-section__container-info::after {
	height: 100mm;
	margin-bottom: -100mm;
}

/* Quote sections (intro-section) reuse the title markup but are not titles:
   tying them to the next section made Chrome cut that section instead
   (e.g. "Vivre à Neuchâtel" text on one page, its pictures on the next) */
.intro-section.brxe-section .intro-section__container,
.intro-section.brxe-section .intro-section__container-info {
	break-after: auto;
	page-break-after: auto;
}

.intro-section.brxe-section .intro-section__container-info::after {
	display: none;
}

/* Quotes keep their light "N" background (printed even with "print
   backgrounds" off in the browser) */
#brx-content .intro-section.bg-image-n.brxe-section {
	padding: 10mm 8mm !important;
	margin: 4mm 0 !important;
	border-radius: var(--print-radius);
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* Text blocks with a list (heading + intro + list) are short: kept whole
   rather than a sentence at the page bottom and its list on the next page */
.content-97__container-info.brxe-block,
.rich-text:has(ul, ol),
.rich-text ul,
.rich-text ol {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* ==================================================================
   4. Cover (service-hero): page 1, full bleed
   ================================================================== */
/* Its picture is an <img>, so it prints even with "print backgrounds" off */
#brx-content .service-hero.brxe-section {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	position: relative !important;
	height: 296mm !important; /* full A4 page (1mm spare against rounding) */
	min-height: 0 !important;
	padding: 0 0 30mm !important;
	overflow: hidden !important;
	break-inside: avoid;
	border-radius: 0 !important;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.service-hero .brxe-image:first-child,
.service-hero .brxe-image:first-child img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	z-index: -1;
}

.service-hero__overlay.brxe-div {
	display: none !important;
}

.service-hero__container.brxe-container {
	align-items: flex-start !important;
	text-align: left !important;
	padding: 0 16mm !important;
}

.service-hero .badge {
	display: inline-flex !important;
	align-self: flex-start !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.service-hero__heading.brxe-heading {
	font-size: 34pt !important;
	line-height: 1.15 !important;
	text-align: left !important;
	margin: 6mm 0 5mm !important;
}

.service-hero__description.brxe-text,
.service-hero__description.brxe-text * {
	width: auto !important;
	text-align: left !important;
	font-size: 14pt !important;
}

/* Logo (Bricks header bar) laid over the cover, top left */
.main-nav__container.brxe-container {
	box-shadow: none !important;
	height: auto !important; /* Bricks fixes the bar height */
	min-height: 0 !important;
}

#brx-content > .main-nav__container.brxe-container {
	position: absolute !important;
	top: 14mm !important;
	left: 16mm !important;
	width: auto !important;
	padding: 0 !important;
	background: none !important;
	z-index: 2;
}

.main-nav__logo.brxe-logo,
.main-nav__logo .bricks-site-logo {
	height: 18mm !important;
	width: auto !important;
}

/* On some landings a script pins the logo with position:absolute + a scroll-based top */
.main-nav__logo.brxe-logo {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	transform: none !important;
}

/* Page break after the cover. The hero sits in a Bricks flex wrapper, where
   Firefox ignores breaks: the wrapper becomes a block and the break goes on
   the next top-level element instead. */
#brx-content > :has(> .service-hero) {
	display: block !important;
}

#brx-content > :has(> .service-hero) + *,
#brx-content > .service-hero + * {
	break-before: page;
	page-break-before: always;
}

/* ==================================================================
   5. Hero image grids (hero-96): intro text + 2×2 pictures with captions
   ================================================================== */
/* Kept whole (fits on one page) */
#brx-content .hero-96.brxe-section {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Same title as the cover: not repeated on page 2 */
h1.hero-96__tagline.brxe-text-basic {
	display: none !important;
}

/* Small uppercase tagline ("Vivre à Neuchâtel"): space before the heading */
p.hero-96__tagline.brxe-text-basic {
	margin-bottom: 3mm !important;
}

/* Flex text column: Chrome would not break after it, leaving page 1 half empty */
.hero-96__container-info.brxe-block,
.hero-96__inner-container-info,
.hero-96__description {
	display: block !important;
	overflow: visible !important;
}

/* 2 per row, inline-block: floats made Firefox ignore forced breaks and
   overlap the next section */
.hero-96__list-media.brxe-block {
	display: block !important;
	margin-top: 6mm !important;
	font-size: 0; /* removes the gap between inline-blocks */
}

.hero-96__img-wrapper {
	display: inline-block !important;
	vertical-align: top;
	width: calc(50% - 2.5mm) !important; /* 1mm slack against sub-pixel rounding */
	margin: 0 0 4mm !important;
	font-size: 10pt;
	break-inside: avoid;
	page-break-inside: avoid;
}

.hero-96__img-wrapper:nth-child(odd) {
	margin-right: 4mm !important;
}

/* Same frame for every picture */
.hero-96__img.brxe-image,
.hero-96__img.brxe-image img {
	aspect-ratio: 16 / 10 !important;
	max-height: 55mm;
	transform: none !important;
}

.hero-96__img {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Caption cards: below the picture instead of floating over it */
.hero-96__list-item-card.brxe-block {
	position: static !important;
	max-width: none !important;
	margin-top: 2mm;
}

/* Bricks gives the caption card a fixed height with its text vertically
   centered: a gap above and below the caption */
.card-hero-96.brxe-div {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* ==================================================================
   6. Content blocks (content-97): text, small picture, figure cards
   ================================================================== */
/* Picture (e.g. Microcity): same width as one figure card below
   (2-column grid: 50% minus the 1mm slack and half the gap) */
.content-97__img.brxe-image {
	width: calc(50% - 2mm) !important;
}

.content-97__img.brxe-image,
.content-97__img.brxe-image img {
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 16 / 10 !important;
	object-fit: cover !important;
}

.content-97__img.brxe-image img {
	width: 100% !important;
}

.content-97__img-wrapper.brxe-block {
	margin: 4mm 0 !important;
}

.content-97__img-wrapper {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Figures: Bricks counters print their final value (span added by print.js) */
.brxe-counter .count {
	display: none !important;
}

.brxe-counter .count-print {
	display: inline !important;
}

/* Figure cards, 2 per row (inline-block: Firefox slices grid rows across pages) */
.content-97__counter-list.brxe-block {
	display: block !important;
	margin-top: 4mm !important;
	font-size: 0; /* removes the gap between inline-blocks */
}

.content-97__counter-list > .content-97__counter-element {
	display: inline-block !important;
	vertical-align: top;
	width: calc(50% - 2mm) !important; /* 1mm slack: sub-pixel rounding clipped the right card */
	margin: 0 0 3mm !important;
	font-size: 10pt;
}

.content-97__counter-list > .content-97__counter-element:nth-child(odd) {
	margin-right: 3mm !important;
}

/* Two lists side by side (Bricks splits 6 figures into 2 lists of 3):
   each list becomes a column, its cards stacked → 2 columns × 3 rows */
.content-97__counter-list.brxe-block:has(+ .content-97__counter-list),
.content-97__counter-list + .content-97__counter-list.brxe-block {
	display: inline-block !important;
	vertical-align: top;
	width: calc(50% - 2mm) !important;
	font-size: 0;
}

.content-97__counter-list.brxe-block:has(+ .content-97__counter-list) {
	margin-right: 3mm !important;
}

.content-97__counter-list:has(+ .content-97__counter-list) > .content-97__counter-element,
.content-97__counter-list + .content-97__counter-list > .content-97__counter-element {
	display: block !important;
	width: auto !important;
	margin-right: 0 !important;
}

.content-97__counter-element.brxe-block {
	min-width: 0 !important;
	min-height: 0 !important; /* Bricks sets 130px: cards twice as tall as their content */
	height: auto !important;
	padding: 3mm !important;
	border: var(--print-border) !important;
	border-radius: var(--print-radius) !important;
	box-shadow: none !important;
}

.content-97__counter-element .brxe-counter,
.content-97__counter-element .content-97__counter {
	font-size: 15pt !important;
	line-height: 1.2 !important;
}

.content-97__counter-info.brxe-text-basic {
	margin-top: 1.5mm !important;
	font-size: 9pt !important;
	line-height: 1.35 !important;
	color: #000 !important;
}

.content-97__counter-list,
.content-97__counter-element {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* ==================================================================
   7. Story items: text only
   Their photos are decorative and made unbreakable blocks too tall to fit
   (half-empty pages): hidden in print.
   ================================================================== */
.brxe-container:has(> .story-item),
.story-item.brxe-block,
.story-item.brxe-block:nth-child(even),
.story-item__col.brxe-block {
	display: block !important;
	min-height: 0 !important;
}

.story-item__col:has(> .story-item__image),
.story-item__col:empty {
	display: none !important;
}

.story-item.brxe-block {
	margin-bottom: 10mm !important;
}

.story-item .rich-text h3 {
	margin-bottom: 4mm !important;
}

.story-item .rich-text p,
.story-item .rich-text li {
	line-height: 1.55 !important;
}

.story-item .rich-text p + p,
.story-item .rich-text p + ul,
.story-item .rich-text ul + p {
	margin-top: 3mm !important;
}

.story-item .rich-text li + li {
	margin-top: 1mm !important;
}

/* Short blocks (text with a list) stay whole */
.story-item.brxe-block:has(.rich-text ul, .rich-text ol) {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* ==================================================================
   8. Actors table (feature-104) and company cards (feature-107)
   ================================================================== */
/* Each alone on its page */
#brx-content > .feature-104.brxe-section,
#brx-content > .feature-107.brxe-section {
	break-before: page;
	page-break-before: always;
	break-after: page;
	page-break-after: always;
	break-inside: avoid;
	page-break-inside: avoid;
}

/* feature-104: one row per item — label column + text, separated by lines */
.feature-104__list-item.brxe-block {
	flex-direction: row !important;
	align-items: flex-start !important;
	column-gap: 5mm !important;
	height: auto !important;
	padding: 2.5mm 0 !important;
	border-bottom: var(--print-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	break-inside: avoid;
}

.feature-104__list-item:first-child {
	border-top: var(--print-border) !important;
}

/* White label on colored background → black bold label */
.feature-104__list-icon-wrapper.brxe-div {
	flex: 0 0 32mm !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

.feature-104__list-icon-wrapper .brxe-text-basic {
	text-align: left !important;
	font-size: 10pt !important;
	font-weight: 700 !important;
}

.feature-104__list-container.brxe-block {
	display: block !important;
	flex: 1 1 auto !important;
	padding: 0 !important;
}

/* Actors, then their description below — both left-aligned */
.feature-104__list-info.brxe-text-basic,
.feature-104__list-count.brxe-text-basic {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
	font-size: 9.5pt !important;
	line-height: 1.4 !important;
}

.feature-104__list-info.brxe-text-basic {
	color: #000 !important;
}

.feature-104__list-count.brxe-text-basic {
	margin-top: 1mm !important;
	font-weight: 600 !important;
}

/* feature-107: 2 cards per row (inline-block, see conventions) */
.feature-107__list.brxe-block {
	font-size: 0; /* removes the gap between inline-blocks */
}

.feature-107__list > * {
	display: inline-block !important;
	vertical-align: top;
	width: calc(50% - 2.5mm) !important; /* 1mm slack against sub-pixel rounding */
	margin: 0 0 4mm !important;
	font-size: 10pt;
	break-inside: avoid;
	page-break-inside: avoid;
}

.feature-107__list > :nth-child(odd) {
	margin-right: 4mm !important;
}

/* One clear box per company (strip nested borders/shadows) */
.feature-107__list *,
.feature-107__list {
	box-shadow: none !important;
}

.feature-107__list-item.brxe-block,
.card-feature-107__container-info.brxe-block {
	border: 0 !important;
	height: auto !important;
	background: none !important;
	padding: 0 !important;
}

.card-feature-107.brxe-block {
	border: var(--print-border) !important;
	border-radius: var(--print-radius) !important;
	padding: 4mm !important;
	break-inside: avoid;
}

.card-feature-107__icon.brxe-image {
	max-height: 10mm !important;
	margin: 0 0 2mm !important;
}

.card-feature-107__heading.brxe-heading {
	font-size: 11pt !important;
}

.card-feature-107__description.brxe-text,
.card-feature-107__description.brxe-text a {
	font-size: 9.5pt !important;
	line-height: 1.4 !important;
	color: #000 !important;
}

/* ==================================================================
   9. FAQ: alone on its page, every answer shown
   ================================================================== */
#brx-content > .brxe-section:has(.faq),
#brx-content > * > .brxe-section:has(.faq) {
	break-before: page;
	page-break-before: always;
	break-after: page;
	page-break-after: always;
	break-inside: avoid;
	page-break-inside: avoid;
}

.faq.brxe-section,
.faq__container.brxe-container,
.faq__accordion.brxe-accordion-nested,
.faq__item.brxe-block,
.faq__question.brxe-block {
	display: block !important;
}

.faq__container.brxe-container {
	padding: 0 !important;
}

.faq__question.brxe-block {
	padding: 3mm 0 2mm !important;
}

.brxe-accordion-nested .accordion-content-wrapper {
	display: block !important;
	height: auto !important;
	overflow: visible !important;
}

.faq__accordion.brxe-accordion-nested .accordion-content-wrapper {
	padding-bottom: 3mm !important;
}

.faq__item {
	break-inside: avoid;
	page-break-inside: avoid;
}

.faq__answer-heading.brxe-heading {
	font-size: 10.5pt !important;
	font-weight: 600 !important;
}

/* Same size as body text, compact spacing: the FAQ fits on one page */
.faq__answer-content.brxe-text,
.faq__answer-content.brxe-text p,
.faq__answer-content.brxe-text a {
	font-size: 9.5pt !important;
	line-height: 1.45 !important;
	margin-top: 1.5mm !important;
}

/* ==================================================================
   10. Footer: contact block only, black on white
   ================================================================== */
#brx-footer,
.footer.brxe-section {
	background: none !important;
	color: #000 !important;
	padding: 6mm 0 0 !important;
	break-inside: avoid;
}

/* Single separator line (on the wrapper only, not on the inner section too) */
#brx-footer {
	border-top: 1px solid #000;
}

#brx-footer *,
.footer__description a {
	color: #000 !important;
}

/* Footer logos are absolutely positioned (overlap the address); the white
   invest logo is already on the cover */
#brx-footer img {
	position: static !important;
	height: 12mm !important;
	width: auto !important;
	margin-top: 4mm;
}

#brx-footer img[src*="white"] {
	display: none !important;
}

.footer__container-left.brxe-block {
	max-width: none !important;
}