/* ==========================================================================
 * Shared modal component (.lje-modal) — lje-tools utility.
 *
 * The single, canonical native <dialog> modal for the whole site. It replaces
 * the two copies that used to drift apart: the designer skin's copy
 * (modules/wpc-designer-integration/assets/css/lje-skin-v2.css) and the theme's
 * port (themes/letterjacket/src/scss/components/_modal.scss). Consumers opt in
 * to the assets via lje_enqueue_modal_assets() (see modal.php).
 *
 * Depends on the theme design tokens (--lj-*), which the active theme defines
 * on :root — the same assumption both previous copies made.
 *
 * Markup contract (see lje_modal() and assets/js/modal.js):
 *   <dialog class="lje-modal" id="…" aria-labelledby="…-title">
 *     <div class="lje-modal__header">
 *       <h2 class="lje-modal__title" id="…-title">Title</h2>
 *       <button class="lje-icon-btn" data-lje-close aria-label="Close">×</button>
 *     </div>
 *     <div class="lje-modal__body">…</div>
 *   </dialog>
 * Opened by a control carrying data-lje-modal-target="<dialog id>"; closed by
 * any [data-lje-close] inside, a backdrop click, or native Esc.
 * ========================================================================== */

.lje-modal {
	width: min(560px, calc(100vw - 32px));
	border: 0;
	border-radius: var(--lj-radius-sm); /* v2: modal card radius 4 */
	padding: 0;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	color: var(--lj-color-text);
	background: var(--lj-color-bg);
	/* The theme's global margin reset kills the UA's dialog centering
	 * (inset:0 + margin:auto) — re-assert it, biased slightly above
	 * geometric center for optical balance. */
	position: fixed;
	inset: 0;
	margin: auto;
	height: fit-content;
	max-height: calc(100vh - 64px);
	transform: translateY(-3vh);
	z-index: var(--lj-z-modal);
}

.lje-modal--wide { width: min(860px, calc(100vw - 32px)); }

/* ::backdrop can't see :root custom properties in all engines — keep the
 * literal in sync with --lj-color-scrim (v2 scrim, ink-based). */
.lje-modal::backdrop { background: rgba(50, 50, 44, 0.5); }

.lje-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lj-space-3);
	padding: var(--lj-space-4) var(--lj-space-5);
	border-bottom: 1px solid var(--lj-color-border);
}

/* v2: modal headers use the funnel card-title style — uppercase small caps. */
.lje-modal__title {
	margin: 0;
	font-size: var(--lj-text-sm, 0.875rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: var(--lj-leading-tight);
}

.lje-modal__body {
	padding: var(--lj-space-5);
	font-size: var(--lj-text-sm);
	line-height: var(--lj-leading-normal);
	overflow-y: auto;
	max-height: min(70vh, 640px);
}

.lje-modal__body :first-child { margin-top: 0; }
.lje-modal__body :last-child { margin-bottom: 0; }

.lje-modal__body hr {
	border: 0;
	border-top: 1px solid var(--lj-color-border);
	margin: var(--lj-space-4) 0;
}

/* Designer-only helpers kept for parity (save/designs modals): a right-aligned
 * action row and an aria-live status line. Harmless for other consumers. */
.lje-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--lj-space-2);
	margin-top: var(--lj-space-4);
}

.lje-modal__status {
	display: block;
	min-height: 1.2em;
	margin-top: var(--lj-space-2);
	font-size: var(--lj-text-xs);
	color: var(--lj-color-text-muted);
}

/* A primary CTA rendered as an anchor (e.g. the guest "Sign in" hand-off in the
 * designer save modal) loses its white label: the theme's `.lj-btn--primary
 * { color:#fff }` is outranked by the global `a:link` color. Reassert white
 * across link states; #fff mirrors the theme's hardcoded primary text. */
.lje-modal a.lj-btn--primary,
.lje-modal a.lj-btn--primary:link,
.lje-modal a.lj-btn--primary:visited,
.lje-modal a.lj-btn--primary:hover,
.lje-modal a.lj-btn--primary:focus {
	color: var(--lj-color-text-inverse, #fff);
}

/* Square icon button — the modal's close (×) and the base for every
 * .lje-icon-btn on the site. This is the SINGLE base definition: the designer
 * skin's stylesheet depends on this one (wp_enqueue_style deps) and keeps only
 * its own extensions ([aria-pressed] toolbar state, zoom sizing). */
.lje-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--lj-color-border);
	border-radius: var(--lj-radius-sm);
	background: var(--lj-color-bg);
	color: var(--lj-color-text-muted);
	font-size: var(--lj-text-base);
	cursor: pointer;
	transition:
		border-color var(--lj-duration-1) var(--lj-ease),
		color var(--lj-duration-1) var(--lj-ease);
}

/* v2: gray icon glyph darkens to ink on hover — never red (red is reserved
 * for destructive actions). */
.lje-icon-btn:hover,
.lje-icon-btn:focus-visible {
	border-color: var(--lj-color-text, #32322c);
	color: var(--lj-color-text, #32322c);
}

.lje-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Trigger — the [modal_trigger] shortcode button (see LJE_Modal_Trigger). A
 * quiet link-style baseline so the global shortcode never renders as an
 * unstyled OS button on plain pages; consumers may reskin it in context (the
 * theme's promo bar swaps the color to its inverse palette). */
.lje-modal-trigger {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--lj-color-link, #00a5b2);
	text-decoration: underline;
	cursor: pointer;
}