/*
 * Provatic Canvas — front-end base layer.
 *
 * theme.json drives the design. This file only carries a couple of things
 * theme.json can't express, plus spacing wrappers so the Provatic plugin's
 * shortcode output (shop grid, mypage, auth forms) sits comfortably inside
 * post-content. We never restyle the plugin's `.pv-*` / `.provatic-shop-*`
 * internals — the plugin owns those.
 */

html {
	scroll-behavior: smooth;
}

/*
 * No horizontal scroll. Full-bleed sections, 100vw elements, or wide media
 * never push the page sideways. `clip` (not `hidden`) avoids creating a scroll
 * container, so position:sticky keeps working.
 */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/*
 * Sticky footer. Without this, a page shorter than the viewport ends its
 * document above the fold and the browser paints the body background (base,
 * #fff) below the footer (base-2, #fafafa) — a variable empty band whose height
 * is `viewport − content`, so it differs page to page. Making the root block
 * wrapper a full-height flex column and letting <main> grow pins the footer to
 * the bottom on every page. The console (page-app) owns the full viewport with
 * its own shell, so it opts out. `.wp-site-blocks`'s only <main> child is the
 * template's `wp:group {tagName:"main"}`, so the tag selector is reliable.
 */
body:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* Logged-in: html gets margin-top for the admin bar, so subtract its height to
   avoid ~32px of overflow/scroll. */
body.admin-bar:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks > main {
	flex: 1 0 auto;
}

/*
 * Gapless section bands. A Provatic Canvas page is a vertical stack of
 * full-bleed sections (header · hero · features · pricing · … · footer) that
 * must touch with NO empty space between them — each band carries its own
 * internal padding. theme.json's blockGap otherwise inserts a gap between the
 * top-level full-bleed sections inside post-content; kill it so the bands butt
 * together. (Non-full-bleed content like paragraphs keeps its normal blockGap.)
 */
.wp-block-post-content > .alignfull {
	margin-block: 0;
}
/* Header / <main> / footer sit flush against each other too (no gap around the
   content region). */
body:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks > header,
body:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks > main,
body:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks > footer {
	margin-block: 0;
}

/*
 * Header CTA buttons render as a sibling of the nav block (they can't be nav inner
 * blocks — the menu `ref` binding drops inline inner blocks). On desktop they sit
 * inline next to the menu. On mobile, header-nav.js relocates the CTA cluster INTO
 * the open hamburger overlay so the pinned-button rules below apply; the collapsed
 * header row hides it (see the ≤900px block). Real CSS → identical in live + editor.
 */
.wp-block-navigation .provatic-header-auth {
	display: flex;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	margin: 0;
}
/*
 * Header side-width must equal the footer (1120). The header's logo/nav row is an
 * `alignwide` group, so it inherits the theme's 1440 wideSize; the footer is a 1120
 * constrained group → different side margins. Cap the header row to 1120 so both
 * align. No-op where the header is already emitted at 1120 (local writer).
 */
.wp-site-blocks > header .wp-block-group.alignwide {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}
/*
 * Notion-style hamburger overlay (header nav, tablet + mobile). Core renders a
 * plain stacked list; this makes it a clean, spacious vertical menu — roomy tap
 * targets with hover states, submenu children indented as sub-items, and the CTAs
 * pinned to the bottom as full-width buttons. Scoped to .provatic-header-nav so
 * only our header overlay is restyled. Real CSS → identical in live + editor preview.
 */
/* The first selector is this long on purpose. Core ships
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open
   { background-color: #fff }` at 0,4,0, which out-specified the 0,3,0 below — so the
   overlay was a hardcoded white panel whatever the palette said. On a dark template
   that is near-white links on white: Studioflow shipped to the catalogue with an
   unreadable mobile menu and it went unnoticed, because the failure only exists at a
   width nobody opens on a desktop. Measured: overlay background rgb(255,255,255)
   against link colour rgb(242,239,233). Mirroring core's shape plus our own class
   puts this at 0,5,0. */
.wp-block-navigation.provatic-header-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base, #fff);
	/* The header nav is right-justified, and core feeds that justification into
	   align-items on every overlay level (content, ul, AND the li) via this custom
	   property — which right-pins each item. Redefine it to flex-start at the overlay
	   scope so the whole subtree left-aligns (Notion-style), without a specificity war. */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: calc(var(--wp--preset--spacing--50, 1.5rem) + 28px) var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--50, 1.5rem);
	gap: 2px;
	min-height: 100%;
	/* Full-width left-aligned rows. */
	align-items: stretch;
}
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}
/* Close (X) — subtle, top-right. */
.provatic-header-nav .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40, 1rem);
	right: var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--contrast-2, #52525b);
}
/* Top-level menu items = roomy rows with a hover state. */
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 11px 12px;
	border-radius: 10px;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	/* No explicit text-align here: the initial value (start = left) already gives the
	   Notion-style left default, and leaving it unset lets a Menu-level Align control
	   in the editor inherit down to the items and override it. */
	color: var(--wp--preset--color--contrast, #18181b);
}
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--base-3, #f4f4f5);
}
/* Submenu children = indented, lighter (sub-items grouped under their parent). */
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 !important;
}
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 24px;
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2, #52525b);
}
/* CTAs pinned to the bottom as full-width buttons. */
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .provatic-header-auth {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40, 1rem);
	gap: var(--wp--preset--spacing--20, 0.75rem);
	border-top: 1px solid var(--wp--preset--color--border, #e4e4e7);
}
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .provatic-header-auth .wp-block-button {
	width: 100%;
}
.provatic-header-nav .wp-block-navigation__responsive-container.is-menu-open .provatic-header-auth .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: 11px 16px;
}
/* Header CTA visibility by login state (WP adds body.logged-in for signed-in users). */
body:not(.logged-in) .pv-cta--in { display: none; }
body.logged-in .pv-cta--out { display: none; }

/*
 * Collapse the header nav to the hamburger overlay on TABLET too (≤900px), not
 * just phones (<600px, core default). The logo + 6 menu items + CTA sit right at
 * the fit threshold around 768px, so the row's flex-wrap intermittently drops the
 * nav to a second line and leaves a right-side gap (scrollbar / web-font sub-pixel
 * shifts flip it on and off). Collapsing removes that cramped in-between state.
 * `.provatic-header-nav` out-specifies core's `min-width:600px` show/hide rules.
 * The overlay itself (`.is-menu-open`) is untouched — core interactivity handles it.
 */
@media (max-width: 900px) {
	.provatic-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.provatic-header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	/* Hide the CTA cluster while it sits in the collapsed header row — header-nav.js
	   moves it INTO the open overlay, where the pinned-button rules above show it.
	   Gated on .pv-nav-enhanced so that if the script fails to load the CTAs stay
	   visible in the row (graceful fallback) rather than disappearing entirely. */
	.pv-nav-enhanced .provatic-header-auth {
		display: none;
	}
	.pv-nav-enhanced .wp-block-navigation__responsive-container-content .provatic-header-auth {
		display: flex;
	}
}

/* Media never overflows its container. */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/*
 * Scroll reveal (reveal.js). The hiding rule is gated on `.pvc-reveal-ready`, which
 * the script adds only when it will animate — so with no JS or reduced-motion the
 * content is always fully visible (reveal is additive, never destructive).
 */
.pvc-reveal-ready .pvc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--pvc-delay, 0s);
	will-change: opacity, transform;
}
.pvc-reveal-ready .pvc-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.pvc-reveal-ready .pvc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Monochrome feature icon — inherits currentColor, sits in a soft tile. */
.pvc-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--base-3, #f4f4f5);
	border: 1px solid var(--wp--preset--color--border, #e4e4e7);
	color: var(--wp--preset--color--contrast, #18181b);
	margin-bottom: var(--wp--preset--spacing--30, 1rem);
}
.pvc-feature-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}
/* Numbered step marker (how-it-works band). */
.pvc-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast, #18181b);
	color: var(--wp--preset--color--base, #fff);
	font-family: var(--wp--preset--font-family--space-mono, monospace);
	font-size: 0.95rem;
	margin-bottom: var(--wp--preset--spacing--30, 1rem);
}

/*
 * Laptop mockup that opens as it scrolls into view. reveal.js drives --pvc-open
 * (0 = closed / folded back, 1 = open). No JS / reduced-motion → stays open.
 */
.pvc-laptop {
	--pvc-open: 1;
	max-width: 900px;
	margin: var(--wp--preset--spacing--60, 3rem) auto 0;
	perspective: 2200px;
}
/* Screen assembly: aluminium lid + black bezel + the display image. */
.pvc-laptop__lid {
	position: relative;
	transform-origin: center bottom;
	transform: rotateX(calc(-82deg * (1 - var(--pvc-open))));
	will-change: transform;
	padding: 14px 14px 16px;
	background: linear-gradient(160deg, #2d2d32 0%, #201f23 55%, #161619 100%);
	border-radius: 20px 20px 6px 6px;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Camera dot in the top bezel. */
.pvc-laptop__lid::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 5px;
	height: 5px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: #3a3a40;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
/* Glass sheen across the display. */
.pvc-laptop__lid::after {
	content: "";
	position: absolute;
	inset: 14px 14px 16px;
	border-radius: 4px;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 18%, transparent 42%);
	pointer-events: none;
}
.pvc-laptop__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #ffffff;
}
/* Aluminium base / keyboard deck, slightly wider than the lid with a hinge. */
.pvc-laptop__base {
	position: relative;
	width: 108%;
	height: 26px;
	margin: 0 auto;
	transform: translateX(-3.75%);
	background: linear-gradient(180deg, #e0e0e3 0%, #cbcbcf 45%, #b6b6bb 62%, #d4d4d8 100%);
	border-radius: 4px 4px 13px 13px / 4px 4px 26px 26px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 -2px 4px rgba(0, 0, 0, 0.12),
		0 30px 50px rgba(24, 24, 27, 0.22);
	clip-path: polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%);
}
/* Hinge behind the screen. */
.pvc-laptop__base::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 44%;
	height: 5px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #4c4c50, #6c6c71);
	border-radius: 0 0 4px 4px;
}
/* Front opening notch. */
.pvc-laptop__base::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 92px;
	height: 9px;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #a7a7ac, #c9c9cd);
	border-radius: 0 0 8px 8px;
}
@media (prefers-reduced-motion: reduce) {
	.pvc-laptop { --pvc-open: 1; }
	.pvc-laptop__lid { transition: none; }
}

/* Brand mark in the header. */
.provatic-canvas-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.provatic-canvas-logo svg {
	display: block;
	width: 28px;
	height: 28px;
}
/* Full wordmark logo (provatic.com header). The inline SVG carries only a viewBox
   (no width/height attrs), so `width:auto` can collapse to 0 inside the flex header
   — pin an explicit width matching the 200:38.3 viewBox at 26px tall. */
.provatic-canvas-logo--full svg {
	width: 136px;
	height: 26px;
}

/* Give plugin shortcode blocks breathing room when dropped into a page. */
.provatic-shop-products-grid,
.provatic-shop-cart,
.provatic-shop-checkout,
.provatic-mypage,
.provatic-signup,
.provatic-login {
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

/* Keyboard focus uses the accent token. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #52525b);
	outline-offset: 2px;
}
/* No outline flash on pointer (mouse/touch) click — links/buttons/menu items.
   Keyboard users still get the :focus-visible ring above. */
:where(a, button, [role="button"], summary):focus:not(:focus-visible) {
	outline: none;
}

/*
 * App template (templates/page-app.html) — chrome-less full-viewport canvas
 * used by control-plane surfaces (the customer Console). The root <main> must
 * span edge-to-edge and impose no content-width cap so the plugin's app shell
 * can fill the screen. Block themes add a `.wp-custom-template-<slug>` body
 * class; we also list the classic `.page-template-*` form harmlessly.
 */
.provatic-app-template {
	max-width: none;
}
body.wp-custom-template-page-app,
body.page-template-page-app {
	/* The app shell owns the full viewport — drop the shortcode breathing room. */
}
body.wp-custom-template-page-app .provatic-mypage,
body.page-template-page-app .provatic-mypage {
	margin-block: 0;
}

/*
 * Sidebar shell — NOT here any more.
 *
 * An applied Design template with `layout.shell = "sidebar"` gets a left nav rail.
 * The rail is a SEPARATE region from the header (the header stays a normal top bar
 * in the content column and carries the CTAs); it is rendered by the Design addon
 * (Provatic\Addons\Design\Sidebar_Rail) so the applied site, the editor preview,
 * the marketplace preview and a published project all share one markup. Its CSS
 * therefore ships with that renderer, in the plugin's
 * `addons/design/assets/css/components.css` (search "Sidebar shell").
 *
 * The earlier version reflowed THIS theme's header into the rail — removed: the
 * header and the sidebar are two different regions.
 */