/*
 * 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 live INSIDE the nav block (as inner blocks) so the mobile
 * hamburger overlay contains both the menu links and the CTAs. On desktop they
 * sit inline next to the menu; when the overlay is open (mobile) they drop to
 * the bottom, full-width, separated from the links by a divider.
 */
.wp-block-navigation .provatic-header-auth {
	display: flex;
	gap: var(--wp--preset--spacing--20, 0.75rem);
	margin: 0;
}
/*
 * 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.
 */
.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;
	}
}

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

/* 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) — keep aspect ratio, not square. */
.provatic-canvas-logo--full svg {
	width: auto;
	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, #497ae8);
	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. An applied Design template with `layout.shell = "sidebar"` turns
 * the WHOLE site into a dashboard layout: the header template-part becomes a
 * full-height left nav rail, and <main> + <footer> stack in the remaining column.
 * Driven by the `provatic-shell-sidebar` body class (Design addon, option/preview).
 * Topbar (default) adds no class and keeps the sticky-footer column above.
 * The console (page-app) owns its own shell and is excluded.
 */
body.provatic-shell-sidebar:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	min-height: 100vh;
}
body.provatic-shell-sidebar.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.provatic-shell-sidebar .wp-site-blocks > header {
	grid-column: 1;
	grid-row: 1 / 3;
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	overflow-y: auto;
	border-right: 1px solid var(--wp--preset--color--border, #e4e4e7);
}
body.provatic-shell-sidebar.admin-bar .wp-site-blocks > header {
	top: var(--wp-admin--admin-bar--height, 32px);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
body.provatic-shell-sidebar .wp-site-blocks > main { grid-column: 2; grid-row: 1; }
body.provatic-shell-sidebar .wp-site-blocks > footer { grid-column: 2; grid-row: 2; }

/* Reflow the topbar header markup into a vertical rail (logo top, nav below,
   CTAs pinned to the bottom). */
body.provatic-shell-sidebar .wp-site-blocks > header > .wp-block-group {
	flex-direction: column;
	align-items: stretch;
	max-width: none;
	height: 100%;
}
body.provatic-shell-sidebar .wp-site-blocks > header .wp-block-navigation {
	flex: 1 1 auto;
}
body.provatic-shell-sidebar .wp-site-blocks > header .wp-block-navigation,
body.provatic-shell-sidebar .wp-site-blocks > header .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
}
body.provatic-shell-sidebar .wp-site-blocks > header .provatic-header-auth {
	flex-direction: column;
	margin-top: auto;
}

/* Narrow screens: collapse the rail back to a stacked topbar. */
@media (max-width: 782px) {
	body.provatic-shell-sidebar:not(.wp-custom-template-page-app):not(.page-template-page-app) .wp-site-blocks {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	body.provatic-shell-sidebar .wp-site-blocks > header {
		position: static;
		height: auto;
		overflow: visible;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--border, #e4e4e7);
	}
	body.provatic-shell-sidebar .wp-site-blocks > header > .wp-block-group { flex-direction: row; height: auto; }
	body.provatic-shell-sidebar .wp-site-blocks > header .wp-block-navigation { flex: 0 1 auto; }
}