/*
Theme Name: Rec.All
Theme URI: https://recall.com.pl
Author: Michał Żelazko
Description: Block theme for REC.ALL — konstrukcje stalowe. Tokens live in theme.json; layout is composed from core blocks.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recall
Tags: block-theme, custom-colors, custom-menu, full-site-editing
*/

/*
 * Deliberately near-empty.
 *
 * Everything expressible as a token belongs in theme.json, and everything
 * scoped to a single block belongs in assets/blocks/{block-name}.css, loaded
 * on demand by wp_enqueue_block_style() (see functions.php).
 *
 * This file is for global rules that fit neither: document-level behaviour and
 * cross-block layout. Roadmap Phase 5 budgets 100–250 lines total across this
 * file and the per-block sheets. Stay under it.
 */

:root {
	scroll-behavior: smooth;
}

/*
 * Sticky footer. The Next.js site did this with flex on <body> plus a .content
 * wrapper; in a block theme the template parts are direct children of
 * .wp-site-blocks, so it applies there instead.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/*
 * Inline SVG icons used inside patterns (currently the why-us values).
 *
 * The 2rem here is the real front-end size and tracks the type scale — CSS
 * wins over the width/height attributes on the SVG. Those attributes exist only
 * so the icons keep a sane size in the block editor, which previews core/html
 * in an isolated iframe this stylesheet never reaches; without them the icons
 * fall back to the SVG default and render as oversized boxes there.
 *
 * flex-shrink is pinned because they sit in a nowrap flex row beside text that
 * would otherwise squash them.
 */
.recall-icon {
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
}

/*
 * Hero. White/green split with a hard stop, carousel on the white side, intro
 * panel overlapping into the green — as on the Next.js site, which did it with
 * a Tailwind gradient using identical colour stops.
 *
 * The gradient lives here rather than in theme.json because gradients are
 * switched off there (customGradient false, empty gradients array) to keep the
 * editor on the locked palette. This is one deliberate exception, not a hole
 * in that policy.
 */
.recall-hero {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--surface) 0 45%,
		var(--wp--preset--color--primary) 45% 100%
	);
}

/*
 * The carousel is explicitly taller than the intro panel. Because the columns
 * are centre-aligned, the surplus height splits evenly, so the image overhangs
 * the panel by the same amount top and bottom.
 *
 * Do NOT give the carousel column display:flex with a flexed child to make it
 * stretch instead. Swiper needs a definite width; as a content-sized flex item
 * it expands to fit every slide side by side — measured at 8736px, with a
 * page-wide horizontal scrollbar.
 */
.recall-hero .wp-block-cb-carousel-v2 {
	box-shadow: var(--wp--preset--shadow--intense);
}

/* Cover, so slides of differing aspect all fill the frame at one height. */
.recall-hero .wp-block-cb-carousel-v2 img {
	width: 100%;
	height: clamp(26rem, 38vw, 40rem);
	object-fit: cover;
	display: block;
}

/*
 * The plugin reserves space BELOW the image for its dots
 * (margin-bottom: bullet-size * 4 = 40px). Our dots sit inside the image via
 * settings.custom.carouselBlock.paginationBottom, so that reservation is dead
 * space — and because it sits inside the carousel column, it pushed the image
 * off-centre against the panel: 70px overhang above, 30px below.
 */
.recall-hero .wp-block-cb-carousel-v2[data-cb-pagination="true"] .swiper-horizontal {
	margin-bottom: 0;
}

/*
 * The carousel plugin (Swiper) gives its pagination dots z-index 10 — the same
 * as the header below. The open mobile menu's overlay is z-index 100000 but
 * fixed inside the header's stacking context, so it is capped at that 10, and
 * the equally-ranked dots painted through it. The dots only need to sit above
 * the image, so drop them under the header's ceiling.
 */
.recall-hero .swiper-pagination {
	z-index: 1;
}

/* Column widths sum to 108% in the pattern; -8% produces the overlap. */
@media (min-width: 782px) {
	.recall-hero .wp-block-columns > .wp-block-column:last-child {
		margin-left: -8%;
		position: relative;
		z-index: 2;
	}
}

/*
 * The header sits above page content, always, and stays pinned to the top as
 * the page scrolls.
 *
 * The hero'''s intro panel carries z-index 2 so it can overlap the carousel.
 * The header has no z-index of its own, so it lost to that panel and the
 * Usługi dropdown was painted behind it — the submenu'''s own z-index is scoped
 * to the header'''s stacking context and cannot help.
 *
 * position: sticky keeps the header in normal flow (so nothing is pushed under
 * it) while pinning it to top:0 once scrolled past. The surface background on
 * the header group is opaque, so scrolled content passes cleanly beneath it.
 *
 * Anything that overlaps within page content must stay below this.
 */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 10;
}

/*
 * Full-width sections butt together — no gaps between them, nor against the
 * header and footer.
 *
 * Each section carries its own vertical padding, so a gap between them shows
 * as a white band separating two backgrounds, which is exactly what the
 * sections are meant to avoid.
 *
 * Deliberately targeted rather than setting blockGap to 0 globally: the root
 * gap is what separates paragraphs, headings and everything else in running
 * content, and zeroing it would collapse all of that. Only adjacency
 * involving a full-width section is neutralised, so ordinary content blocks
 * inside pages keep their spacing.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + *,
.wp-block-post-content > * + .alignfull {
	margin-block-start: 0;
}

/*
 * Services section width.
 *
 * The section is a full-bleed cover. Core gives a full-width GROUP the
 * has-global-padding treatment — the root gutter of clamp(1.5rem, 5vw, 4rem)
 * that insets every other section's content — but it does NOT give a cover the
 * same, so the heading and card grid sat ~85px wider than the why-us section
 * above and below. Zero the cover's own horizontal padding and move the root
 * gutter onto the inner container, so services lines up with everything else.
 *
 * Scoped to .alignfull so it never touches the why-us photo panel, which shares
 * the recall-photo-panel class but lives inside a column, not full-width.
 */
.recall-photo-panel.alignfull {
	padding-left: 0;
	padding-right: 0;
}

.recall-photo-panel.alignfull > .wp-block-cover__inner-container {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/*
 * Services grid columns.
 *
 * Four fixed tracks on wide screens, so a lone service occupies one quarter
 * instead of stretching the whole row. Core's minimumColumnWidth was the
 * culprit: it uses auto-FIT, whose empty tracks collapse to 0 and let a single
 * card fill everything. The pattern now ships columnCount:4, but the base rule
 * is repeated here so the fix also governs pages built before the change
 * without a re-insert — it targets the section's cover, not a per-block class.
 *
 * Scoped through .recall-photo-panel so only the services grid is affected, and
 * the three-part selector beats core's generated .wp-container-* rule on
 * specificity — the same lever the company-info grid below relies on.
 */
.recall-photo-panel .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1280px) {
	.recall-photo-panel .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 880px) {
	.recall-photo-panel .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.recall-photo-panel .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Company info grid (footer + contact page), replacing CompanyInfoGrid.tsx.
 *
 * Six items flow into three content-sized columns — labels on the top row,
 * values below. Content sizing plus nowrap keeps the address on one line and
 * makes its column the widest, rather than the equal tracks WP's grid layout
 * would otherwise generate from minimumColumnWidth. The class beats that
 * generated .wp-container-* rule on specificity (two classes vs one).
 */
.wp-block-group.recall-company-info {
	grid-template-columns: repeat(3, max-content);
	white-space: nowrap;
}

/* Both rows carry the same weight; the top row is set apart by its uppercase. */
.recall-company-info p {
	font-weight: 700;
}

/*
 * In the footer the block sits against the right edge, beside the logo — the
 * justify-between split the Next.js footer used. Text inside each column stays
 * left-aligned; only the tracks move.
 */
footer .recall-company-info {
	justify-content: end;
}

@media (max-width: 600px) {
	.wp-block-group.recall-company-info {
		grid-template-columns: 1fr;
		white-space: normal;
	}

	footer .recall-company-info {
		justify-content: center;
		text-align: center;
	}
}