/* Page frame for builder pages under another theme (see includes/class-frame.php). */

/* Inside the theme: sections are full-width bands whatever the theme's content width is. */
.mosaic-foreign-theme {
	overflow-x: clip;
}

.mosaic-foreign-theme .mosaic-section {
	inline-size: var(--mosaic-vw, 100vw);
	max-inline-size: var(--mosaic-vw, 100vw);
	/* Block themes centre their content with !important margins; this has to win. */
	margin-inline: calc(50% - var(--mosaic-vw, 100vw) / 2) !important;
}

/* The theme's own page title and header block sit above the design; the page brings its own headings. */
.mosaic-foreign-theme .entry-header,
.mosaic-foreign-theme .page-header,
.mosaic-foreign-theme .wp-block-post-title,
.mosaic-foreign-theme .entry-title {
	display: none;
}

/* Own frame: the base rules that Mosaic Theme would supply. */
.mosaic-own-frame *,
.mosaic-own-frame *::before,
.mosaic-own-frame *::after {
	box-sizing: border-box;
}

.mosaic-own-frame {
	margin: 0;
	color: var(--mosaic-color-text, #1d2330);
	background: var(--mosaic-color-bg, #ffffff);
	font-family: var(--mosaic-font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif);
	font-size: var(--mosaic-fs-body, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
	line-height: var(--mosaic-line-height, 1.7);
	text-align: start;
}

.mosaic-own-frame :where(img, video, iframe) {
	max-inline-size: 100%;
	block-size: auto;
}

:where(.mosaic-own-frame) a {
	color: var(--mosaic-color-link, #2b4acb);
}

:where(.mosaic-own-frame) a:hover {
	color: var(--mosaic-color-link-hover, #1f378f);
}

.mosaic-own-frame :is(a, button, input, select, textarea, summary):focus-visible {
	outline: var(--mosaic-focus-width, 3px) solid var(--mosaic-color-focus, #2b4acb);
	outline-offset: 2px;
}

.mosaic-own-main {
	display: block;
}

/* The text that only screen readers get (themes normally define this). */
.mosaic-own-frame .screen-reader-text,
.mosaic-foreign-theme .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mosaic-own-frame .screen-reader-text:focus {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip-path: none;
}

/* Simple header and footer, used when none is designed in the builder. */
.mosaic-own-header,
.mosaic-own-footer {
	padding-block: 1rem;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.mosaic-own-header {
	border-block-end: 1px solid var(--mosaic-color-border, #d5d9e2);
}

.mosaic-own-footer {
	border-block-start: 1px solid var(--mosaic-color-border, #d5d9e2);
}

.mosaic-own-footer p {
	margin: 0;
}

.mosaic-own-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	max-inline-size: var(--mosaic-content-width, 120rem);
	margin-inline: auto;
}

.mosaic-own-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.mosaic-own-title a {
	color: inherit;
	text-decoration: none;
}

.mosaic-own-header ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Inside the theme: undo the one leak that no setting of ours controls, theme link underlines on buttons (link-style buttons keep theirs). */
.mosaic-foreign-theme .mosaic-section a.mosaic-btn:not(.mosaic-btn--link),
.mosaic-foreign-theme .mosaic-section a.mosaic-btn:not(.mosaic-btn--link):hover,
.mosaic-foreign-theme .mosaic-section a.mosaic-btn:not(.mosaic-btn--link):focus {
	text-decoration: none;
}