/* ==========================================================================
   My Spectacles – Content Page templates (classic editor + shortcodes)
   Templates: page-templates/template-content*.php  Loader: inc/content-pages.php
   ========================================================================== */

.msc {
	--ms-navy: #333974;
	--ms-purple: #575d9b;
	--ms-purple-dark: #454a85;
	--ms-ink: #1d1f2b;
	--ms-text: #3a3a3a;
	--ms-muted: #5f6470;
	--ms-grey: #f2f2f2;
	--ms-soft: #f1f2fa;
	--ms-line: #e2e4ea;
	--ms-head: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--ms-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--ms-body);
	color: var(--ms-text);
	font-size: 16px;
	line-height: 1.7;
}
.msc *, .msc *::before, .msc *::after { box-sizing: border-box; }
.msc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* Edge to edge inside Astra (header and footer stay as they are). */
body.ms-content-page .site-content > .ast-container { max-width: 100%; padding: 0; display: block; }
body.ms-content-page #primary { width: 100%; margin: 0; padding: 0; }

.msc-container { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: 20px; }
.msc-container--narrow { max-width: 860px; }

/* ---------- Hero ---------- */
.msc-hero {
	padding: clamp(28px, 4vw, 52px) 0 clamp(30px, 4.4vw, 58px);
	text-align: center;
	background: linear-gradient(313deg, #d1e3e3 38%, #ecebd7 57%);
}
.msc-hero__title {
	margin: 0 0 10px; font-family: var(--ms-head); font-weight: 700; color: var(--ms-navy);
	font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.15; text-transform: uppercase; text-wrap: balance;
	display: block !important; border: 0 !important;
}
.msc-hero__text { margin: 0 auto; max-width: 62ch; font-size: 1.08rem; color: var(--ms-text); text-wrap: pretty; }
.msc-crumbs { margin: 0 0 12px; font-size: .86rem; color: var(--ms-muted); }
.msc-crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.msc-crumbs li { margin: 0; padding: 0; }
.msc-crumbs li + li::before { content: "/"; margin: 0 8px; color: #9aa0b4; }
.msc-crumbs a { color: var(--ms-muted); text-decoration: none; }
.msc-crumbs a:hover { color: var(--ms-purple); text-decoration: underline; }
.msc-crumbs [aria-current] { color: var(--ms-ink); font-weight: 500; }

/* ---------- Body ---------- */
.msc-body { padding: clamp(28px, 4.5vw, 60px) 0 clamp(40px, 6vw, 84px); }
.msc-full { width: 100%; }
.msc-edit { margin: 24px 0 0; font-size: .85rem; }
.msc-edit a { color: var(--ms-muted); }
.msc-pages { margin: 24px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Content typography (what the classic editor produces) ---------- */
.msc-prose > :first-child { margin-top: 0; }
.msc-prose > :last-child { margin-bottom: 0; }
.msc-prose h1, .msc-prose h2, .msc-prose h3, .msc-prose h4, .msc-prose h5, .msc-prose h6 {
	margin: 1.7em 0 .55em; font-family: var(--ms-head); font-weight: 600; color: var(--ms-navy); line-height: 1.25; text-transform: none; letter-spacing: 0;
	border: 0; text-decoration: none; text-wrap: balance;
}
.msc-prose h1 { font-size: 2rem; }
.msc-prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
.msc-prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.msc-prose h4 { font-size: 1.15rem; color: var(--ms-ink); }
.msc-prose h5, .msc-prose h6 { font-size: 1rem; color: var(--ms-ink); }
.msc-prose p { margin: 0 0 1.1em; }
.msc-prose a { color: var(--ms-purple); text-decoration: underline; text-underline-offset: 3px; }
.msc-prose a:hover { color: var(--ms-navy); }
.msc-prose strong, .msc-prose b { color: var(--ms-ink); }
.msc-prose ul, .msc-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.msc-prose ul { list-style: disc; }
.msc-prose ol { list-style: decimal; }
.msc-prose li { margin: 0 0 .45em; }
.msc-prose li > ul, .msc-prose li > ol { margin-top: .45em; margin-bottom: 0; }
.msc-prose blockquote {
	margin: 1.6em 0; padding: 16px 22px; border-left: 4px solid var(--ms-purple); border-radius: 0 12px 12px 0; background: var(--ms-soft); color: var(--ms-ink); font-size: 1.05rem;
}
.msc-prose blockquote > :last-child { margin-bottom: 0; }
.msc-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--ms-line); height: 0; background: none; }
.msc-prose img, .msc-prose video { max-width: 100%; height: auto; border-radius: 12px; }
.msc-prose figure { margin: 1.4em 0; }
.msc-prose figcaption, .msc-prose .wp-caption-text { margin-top: 8px; font-size: .86rem; color: var(--ms-muted); text-align: center; }
.msc-prose .wp-caption { max-width: 100%; margin-bottom: 1.2em; }
.msc-prose .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.msc-prose .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.msc-prose .aligncenter { display: block; margin-inline: auto; }
.msc-prose::after { content: ""; display: table; clear: both; }
.msc-prose code { padding: 2px 6px; border-radius: 6px; background: var(--ms-soft); font-size: .92em; }
.msc-prose pre { overflow-x: auto; padding: 16px; border-radius: 12px; background: #1d1f2b; color: #f1f2fa; font-size: .9rem; }
.msc-prose pre code { padding: 0; background: none; }

/* Tables (scroll sideways on phones) */
.msc-prose table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .96rem; }
.msc-prose th, .msc-prose td { padding: 11px 14px; border: 1px solid var(--ms-line); text-align: left; vertical-align: top; }
.msc-prose th { background: var(--ms-soft); color: var(--ms-ink); font-weight: 600; }
.msc-prose tbody tr:nth-child(even) td { background: #fafafd; }

/* Embeds (YouTube / Vimeo / maps) stay responsive */
.msc-prose iframe, .msc-prose embed, .msc-prose object { max-width: 100%; border: 0; border-radius: 12px; }
.msc-prose .wp-video, .msc-prose .wp-block-embed__wrapper, .msc-prose .fluid-width-video-wrapper { max-width: 100%; }
.msc-prose iframe[src*="youtube"], .msc-prose iframe[src*="youtu.be"], .msc-prose iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Galleries */
.msc-prose .gallery { display: grid; gap: 12px; margin: 0 0 1.4em; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msc-prose .gallery.gallery-columns-1 { grid-template-columns: 1fr; }
.msc-prose .gallery.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msc-prose .gallery.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.msc-prose .gallery.gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.msc-prose .gallery .gallery-item { width: auto !important; margin: 0; float: none; }
.msc-prose .gallery .gallery-icon img { width: 100%; }
.msc-prose .gallery br { display: none; }

/* Buttons and forms printed by shortcodes (plugins add .button / .wpcf7 / .woocommerce) */
.msc-prose .button, .msc-prose button[type="submit"], .msc-prose input[type="submit"], .msc-prose .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 26px; border: 0; border-radius: 999px; cursor: pointer;
	background: #2b2b2b; color: #fff; font: 600 .88rem/1.2 var(--ms-head); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
.msc-prose .button:hover, .msc-prose button[type="submit"]:hover, .msc-prose input[type="submit"]:hover, .msc-prose .button:focus, .msc-prose button[type="submit"]:focus, .msc-prose input[type="submit"]:focus {
	background: var(--ms-navy) !important; color: #fff !important;
}
.msc-prose input[type="text"], .msc-prose input[type="email"], .msc-prose input[type="tel"], .msc-prose input[type="url"], .msc-prose input[type="number"],
.msc-prose input[type="password"], .msc-prose input[type="search"], .msc-prose input[type="date"], .msc-prose select, .msc-prose textarea {
	width: 100%; max-width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #c9ccd8; border-radius: 10px; background: #fff; color: var(--ms-ink); font: inherit; box-shadow: none;
}
.msc-prose textarea { min-height: 140px; }
.msc-prose input:focus, .msc-prose select:focus, .msc-prose textarea:focus { border-color: var(--ms-purple); outline: 0; box-shadow: 0 0 0 3px rgba(87,93,155,.2); }
.msc-prose label { display: block; margin: 0 0 6px; font-weight: 600; color: var(--ms-ink); }
.msc-prose input[type="checkbox"], .msc-prose input[type="radio"] { width: auto; min-height: 0; }
.msc-prose .wpcf7 p { margin-bottom: 1em; }

/* Product shortcodes ([products], [product_category], [sale_products] ...) use the shared card grid */
.msc-prose .woocommerce ul.products { margin: 0 0 1.6em; padding: 0; list-style: none; }
.msc-prose ul.products li { margin: 0; }
.msc-prose .ms-product a { text-decoration: none; }

/* ---------- Full width ---------- */
.msc--full .msc-full > :first-child { margin-top: 0; }
.msc--full .msc-full img, .msc--full .msc-full video, .msc--full .msc-full iframe, .msc--full .msc-full embed { max-width: 100%; }
.msc--full .msc-full img { height: auto; }
.msc--full .msc-full table { max-width: 100%; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.msc-container { padding-inline: 16px; }
	.msc { font-size: 15.5px; }
	.msc-prose table, .msc--full .msc-full table { display: block; overflow-x: auto; }
	.msc-prose .alignleft, .msc-prose .alignright { float: none; display: block; margin: 0 auto 1em; max-width: 100%; }
	.msc-prose .gallery, .msc-prose .gallery.gallery-columns-4, .msc-prose .gallery.gallery-columns-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}