/**
 * Parallax landing page — Breakfasty
 *
 * All rules are scoped under .brutalist-page so nothing leaks sitewide.
 */

.brutalist-page {
	--ink: #000;
	--mint: rgba(173, 223, 200, .8);
	--paper: #fff;
	--off: #fafafa;
	--rule: rgba(0, 0, 0, 0.16);

	/* Pattern inks. Overridden per element. */
	--p1: #fff;
	--p2: #000;

	/* Scroll-driven horizontal offset, set by brutalist-parallax.js */
	--bp-sx: 0px;

	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-weight: 300;
	color: var(--ink);
	overflow-x: clip;
}

/* Fold the site header and page-title bar into the hero. */
.has-brutalist-page .ct-header,
.has-brutalist-page .hero-section,
.has-brutalist-page .entry-header .page-title {
	display: none !important;
}
.has-brutalist-page .site-main > [data-vertical-spacing] {
	padding-top: 0 !important;
}

/* Full-bleed sections butt directly against each other. */
.brutalist-page > * {
	margin-block: 0 !important;
}

/* ================================================================ patterns */

/* Triangles & chevrons. */
.brutalist-page .bp-chevrons {
	--p1: #e0e4cc;
	--p2: #69d2e7;
	--s: 40px;
	background-image:
		conic-gradient(from 135deg, var(--p1) 90deg, #0000),
		conic-gradient(from 135deg, var(--p2) 90deg, #0000),
		conic-gradient(from 135deg at 50% 0, var(--p1) 90deg, #0000);
	background-size: calc(2 * var(--s)) var(--s);
	background-position: var(--s) calc(var(--s) / 2), 0 0, 0 0;
	background-color: var(--p2);
}

/* Retro circles. */
.brutalist-page .bp-circles {
	--p1: #655643;
	--p2: #80bca3;
	--s: 70px;
	background-image:
		radial-gradient(
			var(--p1) 15%, #0000 17% 20%, var(--p1) 22% 25%, #0000 27% 30%,
			var(--p1) 32% 35%, #0000 37% 40%, var(--p1) 42% 45%, #0000 47% 50%,
			var(--p1) 52% 55%, var(--p2) 57%
		),
		repeating-conic-gradient(var(--p1) 0 25%, var(--p2) 0 50%);
	background-size: var(--s) var(--s), calc(2 * var(--s)) calc(2 * var(--s));
	background-position: calc(var(--s) / 2) 0, 0 0;
}

/* Pill shapes. */
.brutalist-page .bp-pills {
	--p1: #ecbe13;
	--p2: #309292;
	--s: 13px;
	background-image:
		radial-gradient(var(--s), var(--p1) 97%, #0000),
		radial-gradient(var(--s), var(--p1) 97%, #0000),
		repeating-conic-gradient(from 45deg, #0000 0 25%, var(--p2) 0 50%),
		repeating-linear-gradient(
			135deg,
			var(--p1) calc(-1 * var(--s)), var(--p1) var(--s),
			var(--p2) 0, var(--p2) calc(var(--s) * 4.656)
		);
	background-size: calc(8 * var(--s)) calc(8 * var(--s));
	background-position:
		0 0,
		calc(4 * var(--s)) calc(4 * var(--s)),
		calc(-1.41421 * var(--s)) calc(-1.41421 * var(--s)),
		0 0;
}

/* Waves. */
.brutalist-page .bp-waves {
	--p1: #ffb67f;
	--p2: #df9c94;
	--w: 110px;
	--h: 330px;
	background-image:
		radial-gradient(37.5% 12.5% at 62.5% 100%, #0000 32%, var(--p1) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 0, #0000 32%, var(--p1) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 100%, #0000 32%, var(--p2) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 0, #0000 32%, var(--p2) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 100%, #0000 32%, var(--p1) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 0, #0000 32%, var(--p1) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 100%, #0000 32%, var(--p2) 34% 99%, #0000 101%),
		radial-gradient(37.5% 12.5% at 62.5% 0, #0000 32%, var(--p2) 34% 99%, #0000 101%),
		repeating-linear-gradient(var(--p1) 0 25%, var(--p2) 0 50%);
	background-size: var(--w) var(--h);
	background-position:
		0 0,
		0 calc(var(--h) / 4),
		calc(var(--w) / 4) calc(var(--h) / 4),
		calc(var(--w) / 4) calc(var(--h) / 2),
		calc(var(--w) / 2) calc(var(--h) / 2),
		calc(var(--w) / 2) calc(3 * var(--h) / 4),
		calc(3 * var(--w) / 4) calc(3 * var(--h) / 4),
		calc(3 * var(--w) / 4) 0,
		0 0;
}


/* ============================================================== typography */

.brutalist-page h1,
.brutalist-page h2,
.brutalist-page h3 {
	font-weight: 600;
	text-transform: none;
	line-height: 1;
	margin: 0 0 0.3em;
	text-wrap: balance;
	color: var(--ink);
}
.brutalist-page h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.brutalist-page h2 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); }
.brutalist-page h3 { font-size: clamp(1.6rem, 3.2vw, 2.45rem); }

/* Mint highlighter.
 *
 * This has to be display:inline for the gradient to hug the words and follow
 * line breaks. That is also why it is opt-in: inline elements ignore
 * max-width and margin-inline:auto, so a heading with this treatment drops
 * out of the centred 820px column and sits against the left padding edge.
 *
 * Apply it deliberately — the hero heading, or add "bp-mark" to a heading's
 * Additional CSS Classes in the editor. box-decoration-break keeps the
 * highlight intact on every line of a heading that wraps.
 */
.brutalist-page .bp-logo h1,
.brutalist-page .bp-mark {
	display: inline;
	padding: 16px 0.34em 0;
	margin-left: -0.34em;
	background: linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(75, 19, 112, 0.8) 30%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	line-height: 1.2;
  	border-radius: 8px;
  	padding-bottom: .05em;
	letter-spacing: -3px;
}
@media screen and (max-width: 480px) {
	.brutalist-page .bp-logo h1 {
		line-height: 1.3;
	}
}

.brutalist-page p {
	font-weight: 300;
	font-size: clamp(1.05rem, 1.5vw, 1.32rem);
	line-height: 1.8;
	margin: 0 0 1.2em;
}
.brutalist-page p.has-x-large-font-size{
	line-height: 1.2;
}
.brutalist-page .bp-lead {
	font-size: clamp(1.2rem, 2.1vw, 1.72rem);
	line-height: 1.5;
	font-weight: 300;
}

/* Don't inherit the theme's global link colour. */
.brutalist-page a { color: inherit; }

/* Links added by hand in the editor get the same underline treatment as
   .bp-arrow, so they match without needing a class. The theme's global
   `a { text-decoration: underline }` sits at a different height and skips
   descenders, so the two mechanisms never line up — use one of them only.
   Excludes the nav (its own style), the logo image, and buttons. */
.brutalist-page .bp-logo p a,
.brutalist-page .bp-sec p a,
.brutalist-page .bp-sec li a,
.brutalist-page .bp-arrow {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	/* currentColor so the rule matches the text on light and dark sections. */
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	line-height: 1.2;
}
.brutalist-page .bp-arrow { font-weight: 400; }

/* Gold wavy hover — hero/logo block only.
 *
 * `border-bottom: none` would remove a real 1px from the box and nudge
 * everything below by a pixel on every hover. The border is kept and only
 * made transparent, so the box height never changes and nothing shifts.
 * text-decoration is ink-only and does not affect layout, so the wavy line
 * can come and go freely.
 */
.brutalist-page .bp-logo p a:hover {
	color: gold;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: gold;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	border-bottom-color: transparent;
}

/* Everywhere else on the page: no colour change, and no geometry change. */
.brutalist-page .bp-sec p a:hover,
.brutalist-page .bp-sec li a:hover {
	opacity: 0.55;
}


.bp-logo p span{
	background: rgba(0,0,0,.8);
	padding: 0 .4em;
	border-radius: 10px;
	transform: skew(-12deg);
	transform-origin: left center;
	display: inline-block;
	margin-left: .5em;
	margin-bottom: .25em;
	/* The number is a single SVG and cannot break, so a wrap between the word
	   and the number always reads as a mistake. Keep the pill on one line. */
	white-space: nowrap;
}

/* nowrap alone would push the pill past the viewport on a phone: at the
 * x-large preset's 30px floor the pill needs ~9.8em ≈ 293px, which does not
 * fit a 360px screen once the hero's 24px side padding is taken off.
 * Scale the whole line down instead of just the SVG — shrinking the artwork
 * alone would leave it out of step with the word beside it. The 30px cap
 * matches the preset's own floor, so nothing jumps at the breakpoint. */
@media (max-width: 600px) {
	.brutalist-page .bp-logo .contacts {
		font-size: min(7.2vw, 30px);
	}
}

/* =================================================================== hero */

.brutalist-page .bp-hero-cover { color: var(--paper); }
.brutalist-page .bp-hero-cover .contacts {
	margin-top: 1em;
}
/* Hero fills the fold, but never grows past the collage's own pixel height
   (parallax-collage-1 is 3200x1297) so the artwork is never upscaled.
 *
 * min() rather than max-height: when min-height and max-height conflict,
 * min-height wins — so `min-height:100vh; max-height:1297px` would still
 * overflow 1297 on a screen taller than that. min() resolves it up front.
 *
 * !important beats the block's inline min-height, which is what the Cover
 * block's "Minimum height" control writes.
 *
 * No aspect-ratio here: it would size the hero from its width and shrink it
 * well below the fold on narrow windows, which is the opposite of the intent.
 */
/* 1038px, not 1297px: the original upload is 3200x1297, but it exceeded
 * WordPress's 2560px big-image threshold, so the block references
 * parallax-collage-1-scaled.avif at 2560x1038. Capping at the original's
 * height let the box grow 25% taller than the image actually served, and
 * `cover` then enlarged it — which is what softened the collage.
 * Capping at the served height keeps the cover scale at or below 1:1.
 */
.brutalist-page .bp-hero-cover {
	min-height: min(100vh, 1038px) !important;
	max-height: 1038px;
}

/* The hero slides sideways (see .bp-sidescroll below) rather than pinning in
   place, so the block's "Fixed background" must be switched off here.
   hasParallax stays true in the block itself: turning it off would make
   WordPress save an <img> instead of this background div, invalidating the
   saved markup. Overriding the attachment in CSS keeps the block valid.
   A transform on the element also makes background-attachment:fixed behave
   inconsistently between browsers, so this is pinned explicitly. */
.brutalist-page .bp-hero-cover .wp-block-cover__image-background.has-parallax {
	background-attachment: scroll;
}
/* alternative: tile the collage instead of scaling it to fit
.brutalist-page .bp-hero-cover .wp-block-cover__image-background {
	background-size: 400px auto;
	background-repeat: repeat;
}
*/
.brutalist-page .bp-logo {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4rem);
	max-width: 980px;
}
.brutalist-page .bp-logo h1,
.brutalist-page .bp-logo p { color: var(--paper); }
.brutalist-page .bp-logo .bp-arrow {
	color: var(--paper);
	border-bottom-color: var(--paper);
}
.brutalist-page .bp-logo__mark {
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	text-align: center;
}
.brutalist-page .bp-logo__mark img {
	display: block;
	width: 104px;
	height: auto;
	aspect-ratio: 1;
	margin-inline: auto;
}

/* ================================================== decorative strips */

/* Pattern at full strength.
 *
 * min-height, not height: a fixed height cannot grow, so any block added
 * inside is clipped and the container refuses to expand in the editor.
 * This keeps the decorative band its full size while empty, and lets it
 * grow normally once it carries content. */
.brutalist-page .bp-strip {
	min-height: clamp(56px, 8vw, 92px);
}

/* ============================================================ label bands */

/* Large lowercase section title over a full-colour pattern. */
.brutalist-page .bp-band {
	padding: clamp(3.5rem, 6vw, 4.5rem) 1.5rem;
	background-color: var(--paper);
}
/* Title treatment for a band.
 *
 * Headings only — plus anything opted in with .bp-mark. This used to hit
 * every <p> in a band, from back when a band held one title and nothing
 * else. Once bands started carrying real content that was wrong twice over:
 * inline-block made sibling paragraphs sit side by side instead of stacking,
 * and the title font-size overrode whatever size was chosen in the editor.
 *
 * Paragraphs in a band are now ordinary content and keep their own size,
 * spacing and block layout. */
.brutalist-page .bp-band h2,
.brutalist-page .bp-band h3,
.brutalist-page .bp-band .bp-mark {
	display: block;
	padding: 0.12em 0.1em;
	margin: 0;
	font-weight: 500;
	text-transform: none;
	font-size: clamp(2.3rem, 6.2vw, 4.4rem);
	color: var(--ink);
}
.brutalist-page .bp-band--dark { background-color: var(--ink); }
.brutalist-page .bp-band--dark h2,
.brutalist-page .bp-band--dark p { color: var(--paper); }

/* Navigation — sized up, lowercase, no tracking. */
.brutalist-page .bp-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 2rem;
	justify-content: center;
	align-items: baseline;
	margin: 0;
	font-size: clamp(1.3rem, 2.6vw, 2.15rem);
	font-weight: 400;
	text-transform: none;
	line-height: 1.3;
}

.brutalist-page .bp-nav a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}
.brutalist-page .bp-nav a:hover { border-bottom-color: var(--ink); }

/* =============================================================== sections */

.brutalist-page .bp-sec {
	padding: clamp(3.5rem, 9vw, 7.5rem) 1.5rem;
	background-color: var(--paper);
}
.brutalist-page .bp-sec--off { background-color: var(--off); }
.brutalist-page .bp-sec--dark { background-color: var(--ink); }
.brutalist-page .bp-sec--dark h2,
.brutalist-page .bp-sec--dark h3 { color: var(--paper); }
.brutalist-page .bp-sec--dark p { color: rgba(255, 255, 255, 0.88); }
.brutalist-page .bp-sec--dark .bp-item { border-top-color: rgba(255, 255, 255, 0.2); }
.brutalist-page .bp-sec--dark .bp-arrow {
	color: var(--paper);
	border-bottom-color: var(--paper);
}
.brutalist-page .bp-sec > * {
	max-width: 820px;
	margin-inline: auto;
}

/* Service / product entries: typographic rows divided by hairlines. */
.brutalist-page .bp-list { max-width: 820px; margin-inline: auto; }
.brutalist-page .bp-item {
	padding: clamp(1.75rem, 4vw, 2.75rem) 0;
	border-top: 1px solid var(--rule);
}
.brutalist-page .bp-item:first-child { border-top: 0; padding-top: 0; }
.brutalist-page .bp-item h3 { margin-bottom: 0.25em; }
.brutalist-page .bp-item p  { margin-bottom: 0.5em; max-width: 62ch; }

/* ==================================================== side-to-side parallax */

/* The photo pans by moving its background-position, never by scaling the
 * element. `background-size: cover` only ever shrinks these sources
 * (the collage is 3200x1297), so the image is never enlarged past 1:1 and
 * never softens.
 *
 * There is room to pan because a cover-fitted image is wider than its box:
 * the script measures that overhang from the file's intrinsic size and
 * clamps the travel to it, so no edge is ever exposed.
 *
 * !important is required to beat the background-position the Cover block
 * writes inline on this element.
 */
.brutalist-page .bp-sidescroll { overflow: hidden; }
.brutalist-page .bp-sidescroll .wp-block-cover__image-background {
	background-position: calc(50% + var(--bp-sx)) center !important;
	will-change: background-position;
}
.brutalist-page .bp-sidescroll h2,
.brutalist-page .bp-sidescroll p { color: var(--paper); }

/* ============================================================ contact form */

.brutalist-page .gform_wrapper .gfield_label {
	font-weight: 400 !important;
	font-size: 1rem;
	text-transform: none;
	color: var(--ink);
}
.brutalist-page .gform_wrapper input[type="text"],
.brutalist-page .gform_wrapper input[type="email"],
.brutalist-page .gform_wrapper input[type="tel"],
.brutalist-page .gform_wrapper textarea,
.brutalist-page .gform_wrapper select {
	border: 1px solid var(--rule) !important;
	border-radius: 0 !important;
	padding: 0.75em !important;
	font-family: inherit;
	font-weight: 300;
	font-size: 1rem;
	background: var(--paper);
}
.brutalist-page .gform_wrapper input:focus,
.brutalist-page .gform_wrapper textarea:focus {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
}
/* Buttons deliberately inherit the sitewide style from style.css — the
 * gradient pill used by "Buy Now" on the product pages. This page used to
 * override background, colour, radius, weight and text-transform with
 * !important, which is why that style never reached it.
 *
 * Nothing is redefined here on purpose: keeping one button definition means
 * a change in style.css reaches this page too. Only cursor is set, for the
 * Gravity Forms <input>, which is not a link.
 */
.brutalist-page .gform_wrapper .gform_button {
	cursor: pointer;
}

/* ==================================================== mobile & motion a11y */

@media (max-width: 768px) {
	/* iOS Safari stutters or drops fixed backgrounds entirely. */
	.brutalist-page .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll !important;
	}
	.brutalist-page .bp-sidescroll .wp-block-cover__image-background {
		background-position: center !important;
	}
	.brutalist-page .bp-nav { gap: 0.3rem 1.2rem; }
	.brutalist-page .bp-chevrons { --s: 26px; }
	.brutalist-page .bp-circles  { --s: 46px; }
	.brutalist-page .bp-pills    { --s: 9px; }
	.brutalist-page .bp-waves    { --w: 74px; --h: 222px; }
}

@media (prefers-reduced-motion: reduce) {
	.brutalist-page .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
	}
	.brutalist-page .bp-sidescroll .wp-block-cover__image-background {
		background-position: center !important;
	}
}