/*
 * Singular content and Gutenberg parity.
 *
 * The structure follows the proven Mechmagic approach: the same article
 * rules are loaded on the public page and inside the block editor.
 */

:where(.a360-entry-content, .prose, .editor-styles-wrapper) {
	--a360-content-ink: #101827;
	--a360-content-muted: #526177;
	--a360-content-line: #dbe5f0;
	--a360-content-blue: #0878ff;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) {
	min-width: 0;
	color: var(--a360-content-ink);
	font-family: Inter, Arial, sans-serif;
}

.editor-styles-wrapper {
	background: #fff;
	color: var(--a360-content-ink);
	font-family: Inter, Arial, sans-serif;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) > * {
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) > .alignwide {
	width: min(100%, 1120px);
	max-width: 1120px;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) > .alignfull,
:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) > .wp-block-a360-panorama-hero {
	width: 100%;
	max-width: none;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) :is(p, li) {
	font-size: 17px;
	line-height: 1.8;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) h2 {
	margin-top: 56px;
	margin-bottom: 18px;
	color: var(--a360-content-ink);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.1;
	letter-spacing: -.03em;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) h3 {
	margin-top: 32px;
	margin-bottom: 14px;
	color: var(--a360-content-ink);
	font-size: 23px;
	line-height: 1.2;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) a:not(.wp-block-button__link) {
	color: var(--a360-content-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) blockquote {
	margin: 30px 0;
	padding: 24px 28px;
	border-left: 4px solid var(--a360-content-blue);
	border-radius: 0 10px 10px 0;
	background: #edf6ff;
	color: #30415a;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 30px auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	background: #fff;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) th,
:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) td {
	padding: 15px;
	border: 1px solid var(--a360-content-line);
	text-align: left;
	vertical-align: top;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) th {
	background: #edf5fd;
	color: #0b5aa8;
	font-weight: 800;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) :is(pre, code) {
	overflow-wrap: anywhere;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) pre {
	max-width: 100%;
	overflow-x: auto;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	background: var(--a360-content-blue);
	color: #fff !important;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-a360-panorama-hero {
	margin-top: 38px;
	margin-bottom: 38px;
}

:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-a360-panorama-hero .a360-panorama-hero__content {
	box-sizing: border-box;
	max-width: 100%;
}

@media (max-width: 700px) {
	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) :is(p, li) {
		font-size: 16px;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) h2 {
		margin-top: 42px;
		font-size: clamp(30px, 10vw, 40px);
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) h3 {
		font-size: 21px;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-table {
		margin-right: 0;
		margin-left: 0;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-buttons {
		width: 100%;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-button {
		max-width: 100%;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link {
		width: 100%;
		max-width: 100%;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-a360-panorama-hero {
		width: 100%;
		max-width: 100%;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-a360-panorama-hero .a360-panorama-hero__content {
		padding: 32px 20px;
	}

	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-a360-panorama-hero h1,
	:where(.a360-entry-content .wp-block-post-content, .prose, .editor-styles-wrapper .is-root-container) .wp-block-a360-panorama-hero h2 {
		font-size: clamp(36px, 11vw, 48px);
	}
}
