/* wpagent/off-canvas — structural CSS (P03). Non-default prop values arrive
 * as custom properties (--wpab-oc-*) from the style engine (style-rules.php);
 * the fallbacks below are the registry defaults. The front-end modifier
 * classes (--below-*, --from-*) are absent in the editor canvas, so the panel
 * content stays editable there. */
.wpab-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Shown only below its breakpoint. */
@media (min-width: 768px) {
	.wpab-off-canvas--below-md {
		display: none;
	}
}
@media (min-width: 1025px) {
	.wpab-off-canvas--below-lg {
		display: none;
	}
}

/* Toggle ------------------------------------------------------------------- */
.wpab-off-canvas__toggle {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--sm, 6px);
	color: var(--wpab-oc-toggle, inherit);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.wpab-off-canvas__toggle::-webkit-details-marker {
	display: none;
}
.wpab-off-canvas__toggle--outline {
	border-color: currentColor;
}
.wpab-off-canvas__toggle--filled {
	border-color: var(--wpab-oc-toggle-bg, var(--wp--preset--color--accent, currentColor));
	background: var(--wpab-oc-toggle-bg, var(--wp--preset--color--accent, transparent));
	color: var(--wpab-oc-toggle, var(--wp--preset--color--on-accent, #fff));
}
.wpab-off-canvas__toggle--ghost {
	padding-inline: 4px;
}
/* Open state: one class more than the toggle part rules (.wpab.wpab-<uid> .wpab-off-canvas__toggle) so it wins. */
.wpab-off-canvas .wpab-off-canvas__details[open] > .wpab-off-canvas__toggle {
	color: var(--wpab-oc-toggle-active, var(--wpab-oc-toggle, inherit));
	background: var(--wpab-oc-toggle-active-bg, transparent);
}
.wpab-off-canvas .wpab-off-canvas__details[open] > .wpab-off-canvas__toggle--outline {
	border-color: var(--wpab-oc-toggle-active-bg, currentColor);
}
.wpab-off-canvas .wpab-off-canvas__details[open] > .wpab-off-canvas__toggle--filled {
	border-color: var(--wpab-oc-toggle-active-bg, var(--wpab-oc-toggle-active, var(--wpab-oc-toggle-bg, var(--wp--preset--color--accent, currentColor))));
	background: var(--wpab-oc-toggle-active-bg, var(--wpab-oc-toggle-active, var(--wpab-oc-toggle-bg, var(--wp--preset--color--accent, transparent))));
	color: var(--wpab-oc-toggle, var(--wp--preset--color--on-accent, #fff));
}
.wpab-off-canvas__face {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wpab-off-canvas__toggle--icon-after .wpab-off-canvas__face {
	flex-direction: row-reverse;
}
.wpab-off-canvas__face .wpab-icon {
	width: var(--wpab-oc-icon, 20px);
	height: var(--wpab-oc-icon, 20px);
}
.wpab-off-canvas__details[open] .wpab-off-canvas__face--closed,
.wpab-off-canvas__details:not([open]) .wpab-off-canvas__face--open {
	display: none;
}

/* Panel -------------------------------------------------------------------- */
.wpab-off-canvas__panel {
	z-index: 2;
	box-sizing: border-box;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wpab-oc-pad, 24px 16px);
	border-left: var(--wpab-oc-rule-w, 0px) solid var(--wpab-oc-rule, transparent);
	background: var(--wpab-oc-bg, var(--wp--preset--color--surface, #fff));
	color: var(--wpab-oc-text, var(--wp--preset--color--ink, inherit));
	/* Dims the page around the panel (no extra element to click through). */
	box-shadow: 0 0 0 100vmax var(--wpab-oc-overlay, rgba(16, 24, 40, 0.45));
}
.wpab-off-canvas__panel > * + * {
	margin-top: 20px;
}
/* Under the header bar (the bar is the positioned ancestor); the overlay
 * stays below the bar. */
.wpab-off-canvas--from-below-header .wpab-off-canvas__panel {
	position: absolute;
	top: 100%;
	right: 0;
	width: min(var(--wpab-oc-w, 100%), 100%);
	max-height: calc(100vh - var(--wpab-oc-top, 72px));
	max-height: calc(100dvh - var(--wpab-oc-top, 72px));
	clip-path: inset(0 -100vmax -100vmax -100vmax);
}
/* From the top / right edge, under the toggle; content starts below the bar. */
.wpab-off-canvas--from-top .wpab-off-canvas__panel,
.wpab-off-canvas--from-right .wpab-off-canvas__panel {
	position: fixed;
	top: 0;
	right: 0;
	padding-top: calc(var(--wpab-oc-top, 72px) + var(--wpab-oc-top-gap, 16px));
}
.wpab-off-canvas--from-top .wpab-off-canvas__panel {
	left: 0;
	max-height: 100vh;
	max-height: 100dvh;
	clip-path: inset(0 -100vmax -100vmax -100vmax);
}
.wpab-off-canvas--from-right .wpab-off-canvas__panel {
	bottom: 0;
	width: min(var(--wpab-oc-w, 320px), 100%);
}

/* Page scroll lock while open (set by view.js). */
html.wpab-off-canvas-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wpab-off-canvas__toggle {
		transition: none;
	}
}