/******************************************************************
 * MOVIE RECORDS — RESPONSIVE & ACCESSIBILITY FOUNDATION
 ******************************************************************/

/* Prevent long translated titles, URLs and user content from widening layouts. */
:where(.site, .site-content, main, article, section, aside, header, footer, form, fieldset, div) {
	min-width: 0;
}

:where(p, li, dd, figcaption, .mr-account-content, .mr-entity-modal__content) {
	overflow-wrap: anywhere;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

/* A consistent, high-contrast keyboard focus that does not alter mouse use. */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 5px rgba(31, 111, 235, .82) !important;
}

:where(button, input, select, textarea) {
	font: inherit;
}

:where(button, [role="button"], summary, input, select, textarea) {
	touch-action: manipulation;
}

/* Dialogs remain usable with browser zoom, short screens and mobile safe areas. */
:where(
	.mr-account-modal,
	.mr-member-modal__dialog,
	.mr-entity-modal__dialog,
	.mr-header-catalog__dialog,
	.mr-contact-modal__dialog,
	.mr-trailer-modal__dialog,
	.mr-clip-player__dialog,
	.mr-episode-player__dialog
) {
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	overscroll-behavior: contain;
}

:where(
	.mr-account-content,
	.mr-member-modal__content,
	.mr-entity-modal__content,
	.mr-header-catalog__dialog,
	.mr-contact-modal__dialog
) {
	scrollbar-gutter: stable;
}

/* Preserve a useful target size for compact icon controls. */
:where(
	.mr-account-close,
	.mr-member-modal__close,
	.mr-entity-modal__close,
	.mr-header-catalog__close,
	.mr-contact-modal__close,
	.mr-trailer-modal__close,
	.mr-notification__read
) {
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 760px) {
	html,
	body {
		max-width: 100%;
		overflow-x: clip;
	}

	:where(
		.mr-account-modal,
		.mr-member-modal__dialog,
		.mr-entity-modal__dialog,
		.mr-header-catalog__dialog,
		.mr-contact-modal__dialog
	) {
		width: calc(100vw - 1rem);
		max-width: calc(100vw - 1rem);
		max-height: calc(100dvh - 1rem);
		border-radius: .75rem;
	}

	:where(.mr-account-overlay, .mr-member-modal, .mr-entity-modal, .mr-header-catalog, .mr-contact-modal) {
		padding: .5rem;
	}

	:where(.mr-account-content, .mr-member-modal__content, .mr-entity-detail, .mr-contact-modal__dialog) {
		padding-left: clamp(.9rem, 4vw, 1.25rem);
		padding-right: clamp(.9rem, 4vw, 1.25rem);
	}

	:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
		max-width: 100%;
		font-size: 16px; /* Prevent unwanted form zoom on iOS. */
	}

	:where(.mr-media-header__actions, .mr-user-list__actions, .mr-notifications-toolbar) > * {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	:where(
		.mr-account-modal,
		.mr-member-modal__dialog,
		.mr-entity-modal__dialog,
		.mr-header-catalog__dialog,
		.mr-contact-modal__dialog
	) {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}

	:where(.mr-account-overlay, .mr-member-modal, .mr-entity-modal, .mr-header-catalog, .mr-contact-modal) {
		padding: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*, *::before, *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (forced-colors: active) {
	:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
		outline: 3px solid Highlight !important;
		box-shadow: none !important;
	}
}