/*
 * Local AI Visibility — plugin chrome.
 *
 * Only the wrapper the plugin renders: the two-column layout, the tinted panel,
 * the image and the admin notice. The widget styles itself.
 *
 * Written against corpblob-roots' Tailwind token names, every one with a
 * fallback. Where the tokens exist the tool matches the theme automatically;
 * where they do not — the plugin dev site has no tokens.css, and other themes
 * will not either — the fallback applies and nothing looks broken.
 *
 * Deliberately minimal: font family and size are inherited rather than set, so
 * the tool reads as part of whatever page it sits on.
 */

.bl-laiv {
	--bl-laiv-fg: var(--color-fg-primary-900, currentColor);
	--bl-laiv-fg-muted: var(--color-fg-secondary-700, #555);
	--bl-laiv-surface: var(--color-bg-secondary, #f4f4f4);
	--bl-laiv-border: var(--color-border-primary, #d8d8d8);
	--bl-laiv-radius: var(--radius-lg, 8px);
	--bl-laiv-gap: var(--spacing-4, 1rem);
	/* The tinted panel behind the form. corpblob-roots' palest green. */
	--bl-laiv-panel-bg: var(--bl-color-green-50, #f0fdf4);
	/*
	 * Panel padding, stepped like the theme's own panelled blocks — split-layout
	 * wraps its content in `px-xl py-xl md:px-3xl md:py-3xl lg:px-4xl lg:py-4xl`,
	 * i.e. 16 → 24 → 32px. This was a flat 32px, which is right on a desktop and
	 * far too much on a phone: 32px of panel inside 24px of gutter left the form
	 * squeezed into the middle of the screen. Stepped at the breakpoints below.
	 */
	--bl-laiv-panel-pad: var(--spacing-xl, 16px);
	--bl-laiv-col-gap: var(--spacing-10, 2.5rem);
	/*
	 * Container width and gutter, matching the site's other layout blocks.
	 *
	 * Both values are corpblob-roots' `components/block-wrapper.blade.php`, which is
	 * the single wrapper every theme block renders through: `max-w-[1400px] mx-auto
	 * px-6`. Matching it is the whole point — a block 40px wider than its neighbours
	 * reads as misaligned even though nothing about it is broken.
	 *
	 * Overridable per site without touching this file:
	 *
	 *   .bl-laiv { --bl-laiv-container: 1200px; --bl-laiv-gutter: 1rem; }
	 */
	--bl-laiv-container: 1400px;
	--bl-laiv-gutter: 1.5rem;

	color: var(--bl-laiv-fg);

	/*
	 * Contained, not full-bleed. The block supports wide and full alignment, which
	 * lets the wrapper span the viewport — without this the two columns stretched
	 * edge to edge while every other layout block on the page stayed contained.
	 *
	 * The horizontal gutter is this block's own, because nothing above it supplies
	 * one. corpblob-roots renders `the_content()` with no container — `main` and its
	 * inner div take their classes from `config/layout.php`, which is empty — so each
	 * block is responsible for its own inset, and every theme block gets one from
	 * block-wrapper. Inheriting a gutter that does not exist left the tool flush
	 * against both screen edges on a phone.
	 *
	 * Vertical padding is still deliberately zero: block-wrapper's `py` would stack
	 * on top of the spacing the surrounding blocks already contribute. The panel
	 * around the form is the only other padding this block introduces.
	 *
	 * box-sizing stays explicit — and now load-bearing, since this element has
	 * padding. The widget's stylesheet is scoped to .bl-laiv-scope, so its
	 * border-box reset does not reach here; under content-box the gutter would widen
	 * the block past the max-width instead of insetting within it, which is exactly
	 * the misalignment against block-wrapper this is meant to match.
	 */
	box-sizing: border-box;
	max-width: var(--bl-laiv-container);
	margin: 0 auto;
	padding: 0 var(--bl-laiv-gutter);
}

/*
 * Heading and intro are host-page content, so they inherit the theme's
 * typography scale. Only the rhythm between them is set here.
 */
.bl-laiv__heading {
	margin: 0 0 0.5em;
}

.bl-laiv__intro {
	margin: 0 0 var(--bl-laiv-gap);
	color: var(--bl-laiv-fg-muted);
	max-width: 60ch; /* readable measure regardless of container width */
}

/* The widget's mount point. No visual styling — the widget owns its own box. */
.bl-laiv__app {
	margin: 0;
}

.bl-laiv__attribution {
	margin: var(--bl-laiv-gap) 0 0;
	font-size: var(--text-xs, 0.75rem);
	color: var(--bl-laiv-fg-muted);
}

/*
 * Admin-only notice shown in place of the tool when it cannot render (no API
 * URL, or no build). Visitors never see this.
 */
.bl-laiv--notice {
	padding: var(--bl-laiv-gap);
	border: 1px dashed var(--bl-laiv-border);
	border-radius: var(--bl-laiv-radius);
	background: var(--bl-laiv-surface);
}

.bl-laiv--notice p {
	margin: 0;
	font-size: var(--text-sm, 0.875rem);
	color: var(--bl-laiv-fg-muted);
}

/*
 * Two-column layout — the form beside an image.
 *
 * Only applied when the block has media; without it the wrapper stays a single
 * column and existing pages are untouched.
 */
.bl-laiv--layout {
	display: grid;
	gap: var(--bl-laiv-col-gap);
	/*
	 * Top-aligned, and each column takes its natural height.
	 *
	 * Equal-height columns were tried and reverted: the widget's height changes with the
	 * step it is on, and after submission the confirmation screen is far shorter than the
	 * form was — so a stretched image column either towered over it or cropped hard to
	 * match. Letting the picture keep its own aspect ratio is steadier across the steps
	 * than making it track a container that resizes underneath it.
	 */
	align-items: start;
}

/*
 * Two columns when there is room for them, one when there is not — decided by the
 * width of the CONTAINER, not the viewport.
 *
 * A viewport media query is wrong here: the block also renders inside the editor's
 * iframed canvas, which is narrower than the window, so the query reported "wide"
 * while the canvas was not and the editor stacked the columns when the published
 * page did not.
 *
 * `min(100%, 20rem)` is the smallest a column may be before the grid drops to one:
 * the `min(100%, …)` guard keeps a narrow container from overflowing, and 1fr caps
 * each track so a wide image cannot push the grid past its container — a grid item's
 * default minimum is its content size, which would otherwise squeeze the form.
 */
.bl-laiv--layout {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/*
 * The form column is always first in the DOM. `media-left` swaps the columns
 * visually so the reading order — and the stacked order on narrow screens — keeps
 * the form first. The form is the point of the page; it should never sit below a
 * decorative image on a phone.
 */
.bl-laiv--media-left .bl-laiv__col--form {
	order: 2;
}

.bl-laiv--media-left .bl-laiv__col--media {
	order: 1;
}

/*
 * No image on a phone.
 *
 * Stacked, the image is decorative furniture between the form and whatever follows
 * it — a full-width picture the reader scrolls past on the way out. Dropping it
 * gives the form the whole screen, which is the only thing on this block that has a
 * job to do.
 *
 * This is the one place a viewport query is right: it is about the device, not the
 * container width the columns themselves are decided on. 47.99em pairs with the
 * theme's `md` (48em / 768px), so the image appears at exactly the width the rest of
 * the page changes at.
 *
 * This supersedes the ordering fix that used to live here — with the media column
 * hidden below this breakpoint, the form is first by default whatever
 * `mediaPosition` says, so there is nothing left to reorder.
 *
 * Hidden, not unrendered: the server has no viewport to branch on. `loading="lazy"`
 * on the image means a display:none image that is never laid out is not fetched in
 * practice, so this costs a phone nothing — but it is a browser behaviour, not a
 * guarantee. If the image ever needs to be provably absent on mobile it has to come
 * out of the markup, which means a client-side render decision.
 */
@media (max-width: 47.99em) {
	.bl-laiv__col--media {
		display: none;
	}
}

/*
 * The markup also carries the host theme's `rounded-2xl` utility. This rule is the
 * fallback for a site without it, and resolves to the same 16px on corpblob-roots.
 */
.bl-laiv__panel {
	padding: var(--bl-laiv-panel-pad);
	border-radius: var(--radius-2xl, 16px);
	background: var(--bl-laiv-panel-bg);
}

/*
 * The two steps up, at the theme's `md` and `lg`. Set on the custom property rather
 * than re-declaring `padding`, so a site that overrides --bl-laiv-panel-pad at the
 * root still gets its value on mobile and only loses the steps.
 */
@media (min-width: 48em) {
	.bl-laiv {
		--bl-laiv-panel-pad: var(--spacing-3xl, 24px);
	}
}

@media (min-width: 64em) {
	.bl-laiv {
		--bl-laiv-panel-pad: var(--spacing-4xl, 32px);
	}
}

/* min-width: 0 lets the column shrink below the widget's intrinsic width. */
.bl-laiv__col {
	min-width: 0;
}

/*
 * The image sizes itself: full width of its column, height from its own aspect ratio.
 *
 * Deliberately NOT stretched to match the form column — see .bl-laiv--layout. The widget
 * changes height between steps, and an image tracking it looked wrong on the
 * confirmation screen.
 *
 * `max-width: 100%` as well as `width: 100%`: the widget's border-box reset is scoped
 * away from this element, and a theme or the editor can set `max-width: none` on images,
 * which would let a large file overflow its column.
 */
.bl-laiv__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--bl-laiv-radius);
}

/*
 * Typeface — Inter, from the host theme.
 *
 * The widget cannot simply inherit it. Its bundled stylesheet carries the design
 * system's own `--font-sans` and applies it at the scope root, which overrides
 * whatever the page set on `html`, so the tool rendered in the design system's font
 * while everything around it was Inter.
 *
 * Overriding the variable rather than every `font-family` is what makes this work:
 * the design system's components all resolve `var(--font-sans)`, and a custom
 * property set here inherits to all of them.
 *
 * `.bl-laiv .bl-laiv-scope` is deliberately two classes. The bundle's own rule is a
 * single class and this stylesheet is enqueued BEFORE it, so an equally specific
 * selector would lose. The scope element is always inside `.bl-laiv`, so the extra
 * class costs nothing.
 *
 * corpblob-roots defines --font-inter; the literal stack is the fallback for a site
 * that does not, per the convention at the top of this file.
 */
.bl-laiv,
.bl-laiv .bl-laiv-scope {
	--font-sans: var(--font-inter, "Inter Variable", "Inter", system-ui, sans-serif);

	font-family: var(--font-sans);
}

/*
 * Primary call-to-action — the host theme's button, not the design system's.
 *
 * Transcribed from the single source of truth for BrightLocal buttons:
 * brightlocal-storybook `stories/prototypes/atoms/ButtonEdit.jsx`, the standard
 * (non-large) Primary variant. That is:
 *
 *   inline-flex items-center justify-center
 *   px-2xl py-md md:py-lg text-sm md:text-md gap-md
 *   font-inter rounded-full border-none
 *   transition-colors duration-200 ease-in-out
 *   bg-btn-primary-bg text-btn-primary-fg
 *   hover:bg-btn-primary-bg_hover hover:text-btn-primary-fg_hover
 *   focus:ring-2 focus:ring-utility-green-400 focus:ring-offset-2
 *   disabled: opacity-50 cursor-not-allowed
 *
 * Written as CSS against the theme's tokens rather than by putting those utility
 * classes in the markup. The utilities live in the host theme's stylesheet, while the
 * widget's own bundle is a separate stylesheet at equal specificity — which of them
 * won would come down to load order, and on a site without the theme the button would
 * have no styling at all. Tokens with literal fallbacks give the same result and
 * degrade predictably.
 *
 * Targeted by `data-hook`, not by element or by the design system's class names: those
 * are build output and change without notice, and a bare `button` selector would also
 * catch the secondary and text buttons, which keep their design-system treatment.
 *
 * Two selectors deep (class + attribute) on purpose — the design system's own styling
 * comes from single-class utilities in a stylesheet loaded AFTER this one, so an
 * equally specific rule would lose on source order.
 */
.bl-laiv [data-hook="submit"],
.bl-laiv [data-hook="view-report"],
.bl-laiv [data-hook="claimed-trial"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md, 8px);

	padding: var(--spacing-md, 8px) var(--spacing-2xl, 20px);
	border: none;
	border-radius: var(--radius-full, 9999px);

	font-family: var(--font-inter, "Inter Variable", "Inter", system-ui, sans-serif);
	font-size: var(--text-sm, 14px);
	line-height: var(--leading-sm, 24px);

	background: var(--color-btn-primary-bg, #2ae855);
	color: var(--color-btn-primary-fg, #111412);
	cursor: pointer;
	transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

/* The standard button steps up a size from the `md` breakpoint. */
@media (min-width: 48em) {
	.bl-laiv [data-hook="submit"],
	.bl-laiv [data-hook="view-report"],
	.bl-laiv [data-hook="claimed-trial"] {
		padding: var(--spacing-lg, 12px) var(--spacing-2xl, 20px);
		font-size: var(--text-md, 16px);
		line-height: var(--leading-md, 28px);
	}
}

.bl-laiv [data-hook="submit"]:hover,
.bl-laiv [data-hook="view-report"]:hover,
.bl-laiv [data-hook="claimed-trial"]:hover {
	background: var(--color-btn-primary-bg_hover, #59f77d);
	color: var(--color-btn-primary-fg_hover, #111412);
}

/*
 * `focus-visible` rather than `focus`, so the ring appears for keyboard users and not
 * on a mouse click. Drawn with `outline` rather than a box-shadow ring: it needs no
 * background colour behind it to look right, which matters on the tinted panel.
 */
.bl-laiv [data-hook="submit"]:focus-visible,
.bl-laiv [data-hook="view-report"]:focus-visible,
.bl-laiv [data-hook="claimed-trial"]:focus-visible {
	outline: 2px solid var(--color-utility-green-400, #2ae855);
	outline-offset: 2px;
}

.bl-laiv [data-hook="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}