/* Example Courses Block — the trigger button carries its own colors here
   rather than relying on the theme's `is-style-button-brand` variation. On
   this site that variation is a Global Styles override (rendered as
   `is-style-button-brand--6`: accent-blue-dark background, base text,
   uppercase). Its CSS is only emitted on pages where a real core/button
   using it renders, and WordPress only adds the `--6` class to real blocks —
   never to this block's server-rendered markup — so relying on it left the
   button unstyled unless a Brand button happened to share the page. These
   rules reproduce that look directly so it's identical everywhere. */

/* Scoped under .wp-block-button so these win the source-order tie against the
   theme's own `:root :where(.wp-block-button .wp-block-button__link)` rule,
   which has equal (0,0,1) specificity. Radius/padding/font still cascade from
   that base rule. */
.wp-block-button .pmc-example-courses__button {
	cursor: pointer;
	background-color: #007592; /* a11y: 4.5:1 with base text; was accent-blue-dark #008AAD at 3.84:1 */
	color: var( --wp--preset--color--base );
	text-transform: uppercase;
}

/* Chain the link's three classes under .wp-block-button for (0,0,5)
   specificity — the child theme's default-button hover
   (`.wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover`)
   is (0,0,4) and would otherwise win, tinting hover blue-grey. */
.wp-block-button .pmc-example-courses__button.wp-block-button__link.wp-element-button:hover,
.wp-block-button .pmc-example-courses__button.wp-block-button__link.wp-element-button:focus {
	background-color: var( --wp--preset--color--accent-blue ); /* #4BC0D0 */
	color: var( --wp--preset--color--main ); /* #00222D */
}

.pmc-example-courses__button:disabled {
	cursor: default;
	opacity: 0.9;
}

/* Modal dialog */
.pmc-example-courses__dialog {
	width: 90vw;
	height: 90vh;
	max-width: 90vw;
	max-height: 90vh;
	padding: 0;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba( 0, 34, 45, 0.35 );

	/* Fade out (and collapse display/overlay after the fade). */
	opacity: 0;
	transition:
		opacity 0.25s ease,
		display 0.25s ease allow-discrete,
		overlay 0.25s ease allow-discrete;
}

.pmc-example-courses__dialog::backdrop {
	background: rgba( 0, 34, 45, 0 );
	transition:
		background-color 0.25s ease,
		display 0.25s ease allow-discrete,
		overlay 0.25s ease allow-discrete;
}

.pmc-example-courses__dialog[open] {
	display: flex;
	flex-direction: column;
	opacity: 1;
}

.pmc-example-courses__dialog[open]::backdrop {
	background: rgba( 0, 34, 45, 0.6 );
}

/* Fade in from the initial open state. */
@starting-style {
	.pmc-example-courses__dialog[open] {
		opacity: 0;
	}

	.pmc-example-courses__dialog[open]::backdrop {
		background: rgba( 0, 34, 45, 0 );
	}
}

.pmc-example-courses__titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background-color: #00222d;
	color: #fff;
	flex: 0 0 auto;
}

.pmc-example-courses__title {
	font-weight: 600;
	font-size: 1rem;
}

.pmc-example-courses__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 1.5rem;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.pmc-example-courses__close:hover,
.pmc-example-courses__close:focus-visible {
	background: rgba( 255, 255, 255, 0.15 );
}

.pmc-example-courses__iframe {
	flex: 1 1 auto;
	width: 100%;
	border: none;
	display: block;
}