/**
 * WB Listora — Shared CSS Custom Properties & Base Styles
 *
 * All values inherit from theme.json tokens with sensible fallbacks.
 * Themes override by setting --listora-* properties in theme.json or CSS.
 */

/* ─── Design Tokens ─── */

:root {
	/* Card — fixed component spacing (not WP layout presets) */
	--listora-card-radius: var(--wp--custom--border-radius, 8px);
	--listora-card-shadow-hover: var(--listora-shadow-lg);
	--listora-card-bg: var(--wp--preset--color--base, var(--listora-bg-elevated));
	/* Card border + bg + shadow now follow --listora-* tokens so dark mode
	   inverts cleanly. Previously this bound to --wp--preset--contrast-3
	   (theme light grey) which never flipped in dark — that's what made
	   cards look "swimmy" on dark surfaces. */
	--listora-card-border: 1px solid var(--listora-border-default);
	--listora-card-padding: 1rem;
	--listora-card-gap: 0.5rem;
	--listora-card-image-ratio: 16 / 10;

	/* Typography — fixed sizes for consistent card rendering across themes */
	--listora-card-title-size: 1.1rem;
	--listora-card-title-font: var(--wp--preset--font-family--heading, inherit);
	--listora-card-meta-size: 0.85rem;

	--listora-weight-medium: 500;
	--listora-weight-semibold: 600;
	--listora-weight-bold: 700;

	/* Status + brand colors that the v2 layer hasn't fully replicated.
	 * (Tokens v2 ships: --listora-primary/-hover/-fg, --listora-success/-bg/-fg,
	 *  --listora-warning/-bg/-fg, --listora-danger/-bg/-fg, --listora-info/-bg/-fg,
	 *  --listora-premium/-bg/-fg, --listora-favorite, --listora-rating.)
	 * The legacy --listora-success-text/--listora-warning-text aliases below
	 * are kept ONLY for back-compat with any third-party theme that overrides
	 * them via theme.json. Default callers reference --listora-{...}-fg from
	 * src/variables/colors.css. Delete in v1.1 if no public consumers report use. */
	--listora-success-text: var(--listora-success-fg);
	--listora-warning-text: var(--listora-warning-fg);
	--listora-border: var(--wp--preset--color--contrast-3, var(--listora-border-default));

	/* Input + grid + icon-button tokens that v2 doesn't define (yet). */
	--listora-input-bg: var(--wp--preset--color--base, var(--listora-bg-elevated));
	--listora-input-border: 1px solid var(--wp--preset--color--contrast-3, var(--listora-border-strong));
	--listora-input-radius: var(--listora-radius-md);
	--listora-input-padding: 0.65rem 0.85rem;
	--listora-input-focus-border: var(--wp--preset--color--primary, var(--listora-wp-admin-link));
	--listora-icon-btn-size: 44px;
	--listora-grid-columns: 3;
	--listora-grid-gap: var(--wp--preset--spacing--40, 1.5rem);

	/* Page-shell numeric type scale tokens kept for primitives below.
	 * (v2 tokens at src/variables/typography.css define --listora-font-size-*,
	 * but the page-header primitive in this file references --listora-font-size-2xl
	 * — keep that token here until the page-header migrates to --listora-text-size-2xl
	 * in the next Phase 4 follow-up.) */

	/* Page-shell variants — only max-width + outer padding change.
	 * `--single` = listing detail / submission preview (narrower, focused).
	 * `--list` = grid + search (full width, comfortable padding).
	 * `--dashboard` = user dashboard (sidebar + main columns).
	 * `--booking` = single-purpose flow (narrowest, centered). */
	--listora-page-max-single:    1200px; /* detail / submission preview — has sidebar */
	--listora-page-max-list:      1400px; /* archive / search / grid */
	--listora-page-max-dashboard: 1280px; /* user dashboard */
	--listora-page-max-booking:   720px;  /* narrow focused flow */
	--listora-page-padding-x: clamp(1rem, 4vw, 2rem);
	--listora-page-padding-y: clamp(1.5rem, 4vw, 2.5rem);

	/* Tap target floor (mobile + a11y) */
}

/* ─── Dark Mode (theme-agnostic; works on ANY theme) ─────────────
 *
 * Two opt-in triggers, same overrides:
 *   1. [data-listora-dark]        — legacy opt-in scope.
 *   2. [data-theme="dark"]        — Listora-level explicit toggle (root or wrap).
 *
 * BC 9919496983: we intentionally do NOT honor `@media (prefers-color-scheme: dark)`.
 * Forcing dark mode on every OS-dark-mode visitor regardless of the host
 * theme's own dark-mode support broke readability on light-only themes
 * (Twenty Twenty-Five, default WordPress). Dark mode is the host theme's
 * call — BuddyX's bridge re-binds these tokens under body.buddyx-dark-theme;
 * other themes can mark the wrapper with one of the two opt-in attributes.
 *
 * Values picked for WCAG-AA contrast against #121212 / #1e1e1e surfaces.
 * No !important — clean specificity overrides the light :root mappings.
 * ──────────────────────────────────────────────────────────────── */

[data-listora-dark],
[data-theme="dark"] {
	--listora-bg-base:        #121212;
	--listora-bg-elevated:    #1e1e1e;
	--listora-bg-muted:       #1e1e1e;
	--listora-bg-surface:     #252525;
	--listora-fg-default:     #e5e5e5;
	--listora-fg-strong:      #f5f5f5;
	--listora-fg-muted:       #a0a0a0;
	--listora-fg-faint:       #777777;
	--listora-fg-inverse:     #121212;
	--listora-border-default: #333333;
	--listora-border-subtle:  #2a2a2a;
	--listora-border-strong:  #555555;
	--listora-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
	--listora-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
	--listora-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
	--listora-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
	--listora-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}


/* ─── Keyframe Animations ─── */

@keyframes listora-fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes listora-fadeInUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes listora-fadeInScale {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes listora-slideDown {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes listora-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@keyframes listora-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@keyframes listora-countPop {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─── Base ─── */

[data-wp-interactive="listora/directory"] {
	font-family: inherit;
	line-height: inherit;
	color: var(--listora-fg-default);
}

/* ─── Rating ─── */

.listora-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	color: var(--listora-rating);
	font-weight: 600;
}

.listora-rating__star {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.listora-rating__star--empty {
	opacity: 0.3;
}

.listora-rating__count {
	color: var(--listora-fg-faint);
	font-size: 0.85em;
	font-weight: 400;
}

/* ─── Feature Badge ─── */

.listora-feature-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	padding: 0.2em 0.5em;
	font-size: 0.75rem;
	color: var(--listora-fg-muted);
	background: var(--listora-bg-muted);
	border-radius: var(--listora-radius-full);
}

/* ─── Favorite Button ─── */

.listora-favorite-btn {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	backdrop-filter: blur(4px);
	/* Follows --listora-bg-elevated so dark mode renders the right tile. */
	background: color-mix(in srgb, var(--listora-bg-elevated, #fff) 88%, transparent);
	color: var(--listora-fg-faint);
	transition: color var(--listora-transition-base), transform var(--listora-transition-fast);
}

.listora-favorite-btn:hover {
	color: var(--listora-favorite);
	transform: scale(1.1);
}

.listora-favorite-btn.is-favorited {
	color: var(--listora-favorite);
}

.listora-favorite-btn__icon {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.listora-favorite-btn.is-favorited .listora-favorite-btn__icon {
	fill: currentColor;
}

/* ─── Skeleton Loading ─── */

.listora-skeleton {
	background: linear-gradient(90deg, var(--listora-bg-muted) 25%, var(--listora-border) 50%, var(--listora-bg-muted) 75%);
	background-size: 200% 100%;
	animation: listora-shimmer 1.5s infinite;
	border-radius: var(--listora-radius-md);
}

@keyframes listora-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ─── Filter Pill ─── */

.listora-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.25em 0.6em;
	font-size: var(--listora-card-meta-size);
	background: color-mix(in srgb, var(--listora-primary) 10%, transparent);
	color: var(--listora-primary);
	border-radius: 100px;
	white-space: nowrap;
}

.listora-filter-pill__remove {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.listora-filter-pill__remove:hover {
	opacity: 1;
}

/* ─── Input ─── */

.listora-input {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	/* `line-height: 1.5` is harmless on <select> (UA ignores it) but
	 * matters on <input>/<textarea> with descender characters. */
	line-height: 1.5;
	/* Override theme fixed heights on form controls. Twenty Twenty-Five
	 * + many block themes set `select { height: 35px }` which clips
	 * the descender of "y"/"p"/"g" inside our padding. `height: auto`
	 * + `min-height: 2.5rem` (40px) restores the natural text box. */
	height: auto;
	min-height: 2.5rem;
	padding: var(--listora-input-padding);
	border: var(--listora-input-border);
	border-radius: var(--listora-input-radius);
	background: var(--listora-input-bg);
	color: var(--listora-fg-default);
	transition: border-color var(--listora-transition-base), box-shadow var(--listora-transition-base);
}

/* Textareas need their own min-height — keep the existing 120px ish
 * default by letting the textarea rule (or callers) set it. */
textarea.listora-input {
	min-height: 6rem;
}

.listora-input:hover {
	border-color: var(--listora-fg-faint);
}

.listora-input:focus {
	border-color: var(--listora-input-focus-border);
	box-shadow: var(--listora-focus-ring);
}

.listora-input:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-info));
	outline-offset: 2px;
}

.listora-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-inline-end: 2rem;
}

/* ─── Button ─── */

.listora-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.6em 1.2em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: var(--listora-weight-semibold);
	line-height: 1.4;
	border: none;
	border-radius: var(--listora-radius-md);
	cursor: pointer;
	transition: background-color var(--listora-transition-base), filter var(--listora-transition-base), transform var(--listora-transition-fast);
	text-decoration: none;
}

.listora-btn:focus-visible {
	outline: 2px solid var(--listora-primary);
	outline-offset: 2px;
}

.listora-btn:active {
	transform: scale(0.97);
}

.listora-btn--primary,
a.listora-btn--primary,
a.listora-btn--primary:hover,
a.listora-btn--primary:visited,
a.listora-btn--primary:focus {
	background: var(--listora-primary);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	text-decoration: none;
}

.listora-btn--primary:hover,
a.listora-btn--primary:hover {
	filter: brightness(1.05);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-btn--secondary,
a.listora-btn--secondary,
a.listora-btn--secondary:visited {
	background: var(--listora-bg-muted);
	color: var(--listora-fg-default);
	border: 1px solid var(--listora-border);
	text-decoration: none;
}

.listora-btn--secondary:hover,
a.listora-btn--secondary:hover {
	background: var(--listora-border);
	color: var(--listora-fg-default);
}

.listora-btn--text,
a.listora-btn--text,
a.listora-btn--text:visited {
	background: transparent;
	color: var(--listora-primary);
	padding: 0.4em 0.6em;
	text-decoration: none;
}

.listora-btn--text:hover,
a.listora-btn--text:hover {
	text-decoration: underline;
	color: var(--listora-primary);
}

.listora-btn--ghost {
	background: transparent;
	color: var(--listora-fg-muted);
	padding: 0.4em 0.6em;
}

.listora-btn--ghost:hover {
	background: var(--listora-bg-surface);
	color: var(--listora-fg-default);
}

.listora-btn--icon {
	padding: 0;
	width: var(--listora-icon-btn-size);
	height: var(--listora-icon-btn-size);
	border-radius: var(--listora-radius-md);
	background: transparent;
	color: var(--listora-fg-muted);
}

.listora-btn--icon:hover {
	background: var(--listora-bg-surface);
	color: var(--listora-fg-default);
}

.listora-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* ─── Toggle Switch ─── */

.listora-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.listora-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.listora-toggle__track {
	position: relative;
	width: 2.5rem;
	height: 1.4rem;
	background: var(--listora-border);
	border-radius: var(--listora-radius-full);
	transition: background var(--listora-transition-base);
	flex-shrink: 0;
}

.listora-toggle__track::after {
	content: '';
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: calc(1.4rem - 4px);
	height: calc(1.4rem - 4px);
	background: var(--listora-bg-elevated);
	border-radius: 50%;
	transition: transform var(--listora-transition-base);
	box-shadow: var(--listora-shadow-xs);
}

.listora-toggle__input:checked + .listora-toggle__track {
	background: var(--listora-primary);
}

.listora-toggle__input:checked + .listora-toggle__track::after {
	transform: translateX(1.1rem);
}

[dir="rtl"] .listora-toggle__input:checked + .listora-toggle__track::after {
	transform: translateX(-1.1rem);
}

.listora-toggle__input:focus-visible + .listora-toggle__track {
	box-shadow: var(--listora-focus-ring);
}

/* ─── Global Focus Visible ─── */
/* Catch-all for interactive elements within Listora blocks missing explicit :focus-visible */

[data-wp-interactive="listora/directory"] a:focus-visible,
[data-wp-interactive="listora/directory"] [role="tab"]:focus-visible,
[data-wp-interactive="listora/directory"] [role="radio"]:focus-visible,
[data-wp-interactive="listora/directory"] select:focus-visible,
[class^="listora-"] a:focus-visible,
[class^="listora-"] [role="tab"]:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

/* ─── Screen Reader Only ─── */

.listora-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── RTL Support ─── */

[dir="rtl"] .listora-card__location,
[dir="rtl"] .listora-detail__address,
[dir="rtl"] .listora-detail__contact-item,
[dir="rtl"] .listora-search__bar,
[dir="rtl"] .listora-detail__actions,
[dir="rtl"] .listora-card__meta,
[dir="rtl"] .listora-card__features,
[dir="rtl"] .listora-detail__features-list,
[dir="rtl"] .listora-dashboard__listing-meta,
[dir="rtl"] .listora-submission__nav {
	direction: rtl;
}

[dir="rtl"] .listora-card__badge-featured { inset-inline-start: 0.5rem; inset-inline-end: auto; }
[dir="rtl"] .listora-card__favorite { inset-inline-end: 0.5rem; inset-inline-start: auto; }
[dir="rtl"] .listora-card__rating { inset-inline-start: 0.5rem; inset-inline-end: auto; }
[dir="rtl"] .listora-detail__breadcrumb li + li::before { content: '‹'; }
[dir="rtl"] .listora-submission__nav { flex-direction: row-reverse; }

/* ─── Toast Notification ─── */
/* Unified pattern: shared between frontend (shared.css) and admin (shared/toast.css). */

.listora-toast-container {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 100001;
	display: flex;
	flex-direction: column-reverse;
	gap: 0.5rem;
}

.listora-toast {
	padding: 0.7em 1.2em;
	font-family: inherit;
	font-size: var(--listora-text-size-sm, 0.875rem);
	font-weight: var(--listora-weight-medium, 500);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: var(--listora-fg-default, var(--listora-wp-admin-text-strong));
	border-radius: var(--listora-radius-lg, 14px);
	box-shadow: var(--listora-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.08));
	max-width: 360px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
	white-space: nowrap;
}

.listora-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.listora-toast--info { background: var(--listora-primary, var(--listora-wp-admin-link)); }
.listora-toast--success { background: var(--listora-success, var(--listora-success)); }
.listora-toast--error { background: var(--listora-danger, var(--listora-danger)); }
.listora-toast--warning { background: var(--listora-warning, var(--listora-warning)); }

/* Pro upgrade CTA — styles live in assets/css/shared/pro-cta.css (loaded by
 * both admin and frontend) so there's a single source of truth. */

/* ─── Listora Page Templates ─── */

.listora-single-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--30, 1.5rem);
}

.listora-page-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--30, 1.5rem);
}

/* ─── Favorite Count ─── */

.listora-detail__favorite-count,
.listora-favorite-btn__count {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.7;
	margin-inline-start: 0.25rem;
}

.listora-favorite-btn__count {
	position: absolute;
	bottom: -0.25rem;
	right: -0.25rem;
	background: var(--listora-surface, var(--listora-bg-elevated));
	border-radius: 999px;
	padding: 0 0.25rem;
	font-size: 0.65rem;
	line-height: 1.4;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

/* ─── Related Listings ─── */

.listora-detail__related {
	margin-block-start: var(--listora-space-8, 2.5rem);
	padding-block-start: var(--listora-space-6, 1.5rem);
	border-top: 1px solid var(--listora-border, var(--listora-border-default));
}

.listora-detail__related-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-block-end: var(--listora-space-4, 1rem);
}

.listora-detail__related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--listora-space-4, 1rem);
}

.listora-detail__related-card {
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--listora-transition-base, 0.2s ease);
}

.listora-detail__related-card:hover {
	box-shadow: var(--listora-card-shadow-hover);
}

/* ─── Listora Page Layout ─── */
/*
 * Full-width layout for Listora pages.
 * Instead of CSS !important hacks, we remove sidebar body classes at the PHP level
 * (see Plugin::add_listora_body_class). This section only handles minimal layout
 * concerns that apply regardless of theme.
 */

/* Listora page wrapper — full bleed within content area.
 * Top breathing room prevents directory pages from butting up against
 * sticky/fixed theme headers (BuddyX, Reign, Astra). Mobile gets less. */
.listora-page-wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
}

/* When inside a sticky-header layout, give anchor jumps room to breathe so
 * elements aren't hidden under the header on hash-link navigation. */
.listora-block,
.listora-page-wrap > * {
	scroll-margin-top: 6rem;
}

/* First-child block on a Listora page should never start at viewport top.
 * Themes with sticky headers cover ~60-80px; we add a safe min-top to the
 * first block, but only if the theme didn't already provide spacing. */
.listora-page .listora-page-wrap > .listora-block:first-child,
.listora-page .listora-page-wrap > [class*="wp-block-listora"]:first-child {
	margin-block-start: 0;
}

/* Hide page title on directory pages — blocks render their own headings */
.listora-page .entry-title {
	display: none;
}

/* Content area should not be constrained by theme's content-width */
.listora-page .entry-content,
.listora-page .wp-block-post-content {
	max-width: none;
}

/* Break Listora blocks out of WordPress is-layout-constrained containers.
 * Block themes and some classic themes wrap content in .is-layout-constrained
 * which limits child blocks to --wp--style--global--content-size (usually 840px).
 * Listora grid and search blocks need the full available width.                  */
.is-layout-constrained > .listora-grid-wrapper,
.is-layout-constrained > .listora-search,
.is-layout-constrained > [class*="wp-block-listora"] {
	max-width: none;
	margin-inline: 0;
}

/* When the block has alignwide or alignfull, let WordPress handle positioning */
.is-layout-constrained > .alignwide,
.is-layout-constrained > .alignfull {
	/* Default behavior from WordPress — no override needed */
}

/* ════════════════════════════════════════════
   Responsive — two breakpoints only (per design system)
   All mobile/tablet overrides consolidated here.
════════════════════════════════════════════ */

@media (max-width: 640px) {
	/* Mobile touch targets (≥44px per WCAG 2.1) */
	.listora-btn {
		min-height: 2.75rem;
	}

	/* Toast stretches to viewport edges */
	.listora-toast-container {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
	}

	.listora-toast {
		max-width: none;
		text-align: center;
		white-space: normal;
	}
}

/* ─────────────────────────────────────────────────────────────
 * Theme Defenses — Full-width pages
 *
 * `body.wb-listora-fullwidth` is added by Core\Theme_Defenses when a
 * page hosts a Listora layout-owning block (User Dashboard, Search,
 * etc.). On those pages the plugin owns the layout — theme sidebars
 * and narrow content frames must step aside so the block can render
 * its native grid (e.g. dashboard's 260px sidebar + main).
 *
 * Reported on Reign theme (Basecamp 9834124720): theme widget area
 * "Recent Posts" overlapped the dashboard "Saved" stats card. Same
 * class of issue exists on every theme that defaults to a sidebar
 * template (TwentyTwentyFour, Astra w/ sidebar layout, GeneratePress
 * default, OceanWP, Storefront sidebars on archive pages).
 *
 * Selectors target the most common theme sidebar conventions. The
 * `:not(.listora-…)` clauses preserve our own sidebars/grid.
 * ───────────────────────────────────────────────────────────── */

body.wb-listora-fullwidth #secondary,
body.wb-listora-fullwidth .secondary,
body.wb-listora-fullwidth #sidebar,
body.wb-listora-fullwidth aside.widget-area,
body.wb-listora-fullwidth .widget-area:not(.listora-dashboard__sidebar),
body.wb-listora-fullwidth aside.sidebar:not(.listora-dashboard__sidebar),
body.wb-listora-fullwidth .sidebar-primary,
body.wb-listora-fullwidth .sidebar-secondary,
body.wb-listora-fullwidth .left-sidebar,
body.wb-listora-fullwidth .right-sidebar,
body.wb-listora-fullwidth .ast-grid-common-col[class*="ast-sidebar"],
body.wb-listora-fullwidth .site-sidebar-primary,
body.wb-listora-fullwidth .has-sidebar > aside {
	display: none !important;
}

body.wb-listora-fullwidth #primary,
body.wb-listora-fullwidth .site-main,
body.wb-listora-fullwidth main.site-main,
body.wb-listora-fullwidth .content-area,
body.wb-listora-fullwidth .ast-container > .site-content > .content-area,
body.wb-listora-fullwidth .post-content {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin-inline: auto !important;
}

/* Themes that lay the page out as a CSS grid (BuddyX `.site-wrapper`,
 * Reign `#site-content`, Astra `.ast-container`) reserve a column for the
 * sidebar even when the sidebar is `display:none`. Collapse the grid to a
 * single column so the main content actually expands. */
body.wb-listora-fullwidth .site-wrapper,
body.wb-listora-fullwidth .site-content-wrapper,
body.wb-listora-fullwidth #site-content,
body.wb-listora-fullwidth .ast-container,
body.wb-listora-fullwidth .container.has-sidebar {
	display: block !important;
	grid-template-columns: minmax(0, 1fr) !important;
}

/* Block themes (TT4/TT5): the post content is rendered through a
 * constrained group block. Allow our blocks to use the wide-size token
 * even when the theme template doesn't explicitly opt them in. */
body.wb-listora-fullwidth .is-layout-constrained > [class^="wp-block-listora"],
body.wb-listora-fullwidth .entry-content > [class^="wp-block-listora"],
body.wb-listora-fullwidth main > [class^="wp-block-listora"] {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	width: 100%;
}

/* ─── Mobile reset for the page shell ─── */

@media (max-width: 640px) {
	.listora-page-shell,
	.listora-page--single,
	.listora-page--list,
	.listora-page--dashboard,
	.listora-page--booking {
		gap: var(--listora-space-4);
		padding: var(--listora-space-4) var(--listora-space-4);
	}
	.listora-page-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.listora-page-header__actions {
		width: 100%;
	}
	.listora-card__head,
	.listora-card__foot {
		padding-inline: var(--listora-space-4);
	}
}