/**
 * Embedded Frame — fullscreen <dialog> overlay styles.
 *
 * The section itself (background image, play button, heading) reuses the
 * existing .ac-video-intro CSS from front-page.css — no extra section
 * styles are needed here.
 *
 * @package Abilities_Centre
 */

/* ── Fullscreen dialog ────────────────────────────────────────────────────── */

/*
 * z-index: the <dialog> is position:fixed and rendered after the <section>
 * in the DOM. Without an explicit z-index the dialog's stacking order would
 * sit above the trigger button, swallowing clicks when the dialog is visually
 * hidden. Setting z-index:-1 on the closed state keeps it below everything;
 * the open state restores a high z-index so it truly overlays the page.
 *
 * We also keep display:block (not flex) on the closed state so the UA's
 * native dialog:not([open]){display:none} is not fighting our flex rule.
 */
.ac-ef-dialog {
	position:   fixed;
	inset:      0;
	width:      100%;
	max-width:  100%;
	height:     100%;
	max-height: 100%;
	margin:     0;
	padding:    0;
	border:     none;
	border-radius: 0;
	background: transparent;
	overflow:   hidden;
	/* Closed: drop behind everything so clicks pass through */
	z-index: -1;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ac-ef-dialog[open] {
	display:        flex;
	flex-direction: column;
	/* Open: sit above all page content (header is ~200, mega menu ~300) */
	z-index: 9000;
	opacity: 1;
}

/* Native <dialog> backdrop */
.ac-ef-dialog::backdrop {
	background:     rgba( 0, 0, 0, 0.75 );
	backdrop-filter: blur( 2px );
}

/* Header bar */
.ac-ef-dialog__header {
	display:    flex;
	align-items: center;
	justify-content: space-between;
	padding:    0.625rem 1rem;
	background: var(--ac-color-primary, #002F86);
	color:      #fff;
	min-height: 3rem;
	flex-shrink: 0;
	gap:        1rem;
}

.ac-ef-dialog__title {
	font-size:     0.9375rem;
	font-weight:   600;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	flex:          1;
	min-width:     0;
}

.ac-ef-dialog__close {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           2rem;
	height:          2rem;
	border:          none;
	border-radius:   50%;
	background:      rgba( 255, 255, 255, 0.15 );
	color:           #fff;
	cursor:          pointer;
	font-size:       1rem;
	flex-shrink:     0;
	transition:      background 0.15s ease;
}

.ac-ef-dialog__close:hover,
.ac-ef-dialog__close:focus-visible {
	background:    rgba( 255, 255, 255, 0.3 );
	outline:       2px solid #fff;
	outline-offset: 2px;
}

/* External link disclaimer strip */
.ac-ef-dialog__disclaimer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             0.75rem;
	padding:         0.5rem 1rem;
	background:      #fef9c3;
	color:           #713f12;
	border-bottom:   1px solid #fde68a;
	font-size:       0.8125rem;
	flex-shrink:     0;
}

.ac-ef-dialog__disclaimer[hidden] { display: none; }

.ac-ef-dialog__disclaimer-text {
	display:    flex;
	align-items: center;
	gap:         0.5em;
	flex:        1;
	min-width:   0;
}

.ac-ef-dialog__disclaimer-text .fa-triangle-exclamation {
	flex-shrink: 0;
	color:       #d97706;
}

.ac-ef-dialog__disclaimer-dismiss {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           1.75rem;
	height:          1.75rem;
	border:          1px solid #fcd34d;
	border-radius:   50%;
	background:      transparent;
	color:           #92400e;
	cursor:          pointer;
	font-size:       0.75rem;
	flex-shrink:     0;
	transition:      background 0.15s ease;
}

.ac-ef-dialog__disclaimer-dismiss:hover,
.ac-ef-dialog__disclaimer-dismiss:focus-visible {
	background:    #fde68a;
	outline:       2px solid #d97706;
	outline-offset: 1px;
}

/* iframe body */
.ac-ef-dialog__body {
	flex:     1;
	display:  flex;
	overflow: hidden;
}

.ac-ef-dialog__iframe {
	width:      100%;
	height:     100%;
	border:     none;
	background: #fff;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */

html[data-color-scheme="dark"] .ac-ef-dialog__disclaimer {
	background:   #2a1f00;
	color:        #fbbf24;
	border-color: #4a3500;
}

html[data-color-scheme="dark"] .ac-ef-dialog__disclaimer-text .fa-triangle-exclamation {
	color: #fbbf24;
}

html[data-color-scheme="dark"] .ac-ef-dialog__disclaimer-dismiss {
	border-color: #6b4e00;
	color:        #fbbf24;
}

html[data-color-scheme="dark"] .ac-ef-dialog__disclaimer-dismiss:hover,
html[data-color-scheme="dark"] .ac-ef-dialog__disclaimer-dismiss:focus-visible {
	background:    rgba( 251, 191, 36, 0.15 );
	outline-color: #fbbf24;
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-ef-dialog__disclaimer                          { background: #2a1f00; color: #fbbf24; border-color: #4a3500; }
	html:not([data-color-scheme="light"]) .ac-ef-dialog__disclaimer-text .fa-triangle-exclamation { color: #fbbf24; }
	html:not([data-color-scheme="light"]) .ac-ef-dialog__disclaimer-dismiss                  { border-color: #6b4e00; color: #fbbf24; }
	html:not([data-color-scheme="light"]) .ac-ef-dialog__disclaimer-dismiss:hover,
	html:not([data-color-scheme="light"]) .ac-ef-dialog__disclaimer-dismiss:focus-visible    { background: rgba(251,191,36,0.15); outline-color: #fbbf24; }
}