/**
 * Admin Toolbar Layout Fixes
 *
 * Adjusts the custom theme layout when Drupal's admin toolbar is present.
 * The Navigation module sets CSS custom properties on <html>:
 *   --drupal-displace-offset-left: sidebar width (72px collapsed, ~256px expanded)
 *
 * Key DOM notes:
 *   - Page wrapper is <div class="page mm-page"> (mmenu wraps it)
 *   - .header is position:fixed; top:0; left:0; z-index:999 inside .page
 *   - Admin <aside> is position:fixed on the left, outside .mm-page
 *   - Do NOT add margin/padding to .page — it conflicts with mmenu and
 *     shrinks hero images proportionally, breaking the layout.
 */

/**
 * Stacking context: lower .mm-page z-index so admin toolbar (z-index:501)
 * and its flyout panels render above the page content. mmenu sets
 * .mm-page to z-index:9999, which traps the entire page above the sidebar.
 */
html[data-admin-toolbar] .mm-page {
	z-index: 500;
}

/**
 * Fixed header: shift right of admin sidebar.
 * Width is reduced so it doesn't extend behind the sidebar.
 * Do NOT override transition — styles.css uses transition:all 0.2s
 * for scroll effects that must be preserved.
 *
 * Also shift the header down below the Navigation top bar.
 * --admin-toolbar-top-bar-height = calc(4 * 16px) = 64px, but that
 * variable is scoped to [data-drupal-admin-styles] and unavailable here.
 */
html[data-admin-toolbar] .header {
	left: var(--drupal-displace-offset-left, 0);
	width: calc(100% - var(--drupal-displace-offset-left, 0));
	top: 64px;
	z-index: 1;
}

/**
 * Push page content down to account for the header shifting below the top bar.
 * Use margin (not padding) so the page background doesn't show a white bar
 * above full-bleed hero sections.
 */
html[data-admin-toolbar] .mm-page {
	margin-top: 64px;
}

/**
 * Interior pages: increase margin-top to account for admin toolbar + header.
 * Without toolbar, .interior sets margin-top:68px (88px desktop).
 * With toolbar, the header is pushed down 64px, so content must shift too.
 */
html[data-admin-toolbar] .interior .main {
	padding-top: 64px;
}

/**
 * PREVIEW MODE
 *
 * Converts the default node preview bar into a floating toggle button
 * with a popover panel. This avoids z-index and stacking conflicts with
 * the site's fixed header and sticky breadcrumbs while providing a true
 * preview of what visitors will see.
 *
 * JS: admin-preview.js adds .preview-transformed to the container and
 * restructures the DOM into a button + popover.
 */

/* Hide admin toolbar during preview (Navigation module). */
body:has(.node-preview-form-select) .admin-toolbar,
body:has(.node-preview-form-select) .admin-toolbar-control-bar,
body:has(.node-preview-form-select) .admin-toolbar-overlay,
body:has(.node-preview-form-select) .top-bar {
	display: none !important;
}

/* Hide admin toolbar during preview (classic Toolbar module). */
body:has(.node-preview-form-select) .toolbar {
	display: none !important;
}

/* Remove toolbar body padding in preview (classic Toolbar sets this via JS). */
body.toolbar-fixed:has(.node-preview-form-select) {
	padding-top: 0 !important;
}

html:has(.node-preview-form-select) {
	--drupal-displace-offset-left: 0 !important;
	--drupal-displace-offset-top: 0 !important;
}

/* Reset header to true visitor position in preview mode. */
body:has(.node-preview-form-select) .header {
	left: 0 !important;
	width: 100% !important;
	top: 0 !important;
	z-index: 999 !important;
}

/* Remove admin toolbar compensation on page wrapper. */
body:has(.node-preview-form-select) .mm-page {
	margin-top: 0 !important;
}

/* Remove admin toolbar compensation on interior pages. */
body:has(.node-preview-form-select) .interior .main {
	padding-top: 0 !important;
}

/**
 * Preview container: override core's fixed bar. Before JS transforms
 * the DOM, hide the container/form to prevent a flash of the default bar.
 * The base theme's container.html.twig may strip the wrapper div, so we
 * also target the form directly.
 */
.node-preview-container {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	z-index: 1001;
	visibility: hidden;
}

/* Show once JS has transformed the container. */
.node-preview-container.preview-transformed {
	visibility: visible;
}

/**
 * Toggle button — styled to match Gin admin theme.
 */
.preview-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	background: var(--gin-color-primary, #0550e6);
	border: 2px solid var(--gin-color-primary, #0550e6);
	border-radius: 0.5rem;
	padding: 0.4375rem 0.75rem;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 45, 82, 0.08),
		0 3px 6px rgba(20, 45, 82, 0.12);
	transition: background-color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease;
	white-space: nowrap;
}

.preview-toggle-btn:hover {
	background: var(--gin-color-primary-hover, #0444c4);
	border-color: var(--gin-color-primary-hover, #0444c4);
	box-shadow: 0 2px 4px rgba(20, 45, 82, 0.12),
		0 4px 8px rgba(20, 45, 82, 0.16);
}

.preview-toggle-btn:focus-visible {
	outline: 2px solid rgba(0, 125, 250, 0.6);
	outline-offset: 2px;
}

.preview-toggle-btn[aria-expanded="true"] {
	background: var(--gin-color-primary-active, #043cad);
	border-color: var(--gin-color-primary-active, #043cad);
}

.preview-toggle-icon {
	flex-shrink: 0;
}

/**
 * Popover panel — drops below the toggle button.
 */
.preview-popover {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 2px 4px rgba(20, 45, 82, 0.04),
		0 6px 12px rgba(20, 45, 82, 0.08),
		0 12px 24px rgba(20, 45, 82, 0.12);
	padding: 1rem;
	min-width: 16rem;
	white-space: nowrap;
	z-index: 1;
}

.preview-popover[aria-hidden="true"] {
	display: none;
}

/* Style the form inside the popover. */
.preview-popover .node-preview-form-select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	width: auto;
}

.preview-popover .node-preview-backlink {
	display: block;
	width: 100%;
	margin-bottom: 0.25rem;
	color: var(--gin-color-primary, #0550e6);
	font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
}

.preview-popover .node-preview-backlink:hover {
	text-decoration: underline;
}

.preview-popover .form-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
}

.preview-popover label {
	font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #222330;
	margin: 0;
}

.preview-popover select {
	font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.8125rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid #8e929c;
	border-radius: 0.375rem;
	background: #fff;
}

.preview-popover input[type="submit"] {
	font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--gin-color-primary, #0550e6);
	background: transparent;
	border: 2px solid var(--gin-color-primary, #0550e6);
	border-radius: 0.375rem;
	padding: 0.1875rem 0.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.preview-popover input[type="submit"]:hover {
	background: var(--gin-color-primary, #0550e6);
	color: #fff;
}

/* Ensure the Switch button is visible inside the popover. */
.preview-popover .js-hide {
	display: inline-block !important;
}

/**
 * Navigation popover flyouts: ensure they render above the site header.
 * Core sets --admin-toolbar-z-index-popover to -1 at desktop, which places
 * the flyout behind the sidebar. Override so it stacks above .header (z-index
 * capped at 500 via the .mm-page stacking context).
 */
html[data-admin-toolbar] [data-toolbar-popover-wrapper] {
	z-index: 601 !important;
}

/**
 * RTL support.
 */
[dir="rtl"] html[data-admin-toolbar] .header {
	left: 0;
	right: var(--drupal-displace-offset-left, 0);
	width: calc(100% - var(--drupal-displace-offset-left, 0));
}