/**
 * Global Sections front-end styles.
 */

 :root {

	/* Global Section: Base */
	--ftm-dialog-close-background: rgba(0, 0, 0, 0.55);
	--ftm-dialog-close-color: #fff;
	--ftm-dialog-close-background-hover: rgba(0, 0, 0, 0.8);
	--ftm-dialog-close-background-hover-outline: 0 solid currentcolor;
	--ftm-dialog-close-background-hover-outline-offset: 2px;
	--ftm-dialog-close-background-light: rgba(255, 255, 255, 0.7);
	--ftm-dialog-close-color-light: #fff;
	--ftm-dialog-close-background-hover-light: #fff;
	--ftm-dialog-close-color-hover-light: #000;
	--ftm-dialog-backdrop-color: rgba(0, 0, 0, 0.72);

 }

.ftm-global-section {
	position: relative;
}

.ftm-global-section .ftm-global-section-inner {
	position: relative;
}

.ftm-global-section.hidden {
	display: none;
}

/* Grid interstitial — structural only; visual styles belong to section blocks */
li.ftm-interstitial-section {
	grid-column: 1 / -1;
	list-style: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ---- Modal (<dialog>) defaults ---- */
.ftm-global-section dialog,
dialog.ftm-global-section {
	padding: 0;
	border: 0;
	max-width: min(960px, 94vw);
	background: transparent; /* Let block content provide its own background; avoids blank white header */
	max-height: 90dvh; /* Constrain height on tall viewports and allow scrolling */
	overflow-y: auto;
	overflow-x: hidden;
}

dialog.ftm-global-section[open] {
	display: block;
}

/* Inner wrapper needs position:relative so the close button can be anchored.
 * width:100% here (not on dialog) ensures the dialog shrinks to content width,
 * so the dialog bounds match the block's background area. */
dialog.ftm-global-section .ftm-global-section-inner {
	position: relative;
	width: 100%;
}

/* Close button: top-right corner, floating over the content */
dialog.ftm-global-section .ftm-dialog-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 10;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--ftm-dialog-close-background);
	color: var(--ftm-dialog-close-color);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1;
}

dialog.ftm-global-section .ftm-dialog-close:hover,
dialog.ftm-global-section .ftm-dialog-close:focus-visible {
	background: var(--ftm-dialog-close-background-hover);
	outline: var(--ftm-dialog-close-background-hover-outline);
	outline-offset: var(--ftm-dialog-close-background-hover-outline-offset);
}

/* Light close button variant — use when content has a dark or coloured background */
dialog.ftm-global-section .ftm-dialog-close[data-close-style="light"] {
	background: var(--ftm-dialog-close-background-light);
	color: var(--ftm-dialog-close-color-light);
}

dialog.ftm-global-section .ftm-dialog-close[data-close-style="light"]:hover,
dialog.ftm-global-section .ftm-dialog-close[data-close-style="light"]:focus-visible {
	background: var(--ftm-dialog-close-background-hover-light);
	color: var(--ftm-dialog-close-color-hover-light);
}

.ftm-global-section::backdrop,
dialog.ftm-global-section::backdrop {
	background: var(--ftm-dialog-backdrop-color);
}