/* =========================================================================
   ROCC Magazine — 2026 styleguide (scoped .rmag)
   Self-contained tokens (mirrors rocc-films .rcfv2 + the rocc-2026 system) so the
   article renders correctly even in isolation. Headings Montserrat/blue-deep,
   body DM Sans, real numbers DM Mono. Canvas #F5F4F1, never pure white.
   ========================================================================= */

.rmag {
	--rmag-canvas:    #F5F4F1;
	--rmag-surface:   #FFFFFF;
	--rmag-ink:       #1A2A5C; /* blue-deep — headings, the only blue text */
	--rmag-blue:      #2F4E9E; /* accent — links/hover only */
	--rmag-body:      #2A2A28; /* prose */
	--rmag-muted:     #6B6F76; /* meta, captions */
	--rmag-hairline:  #E4E2DC;
	--rmag-chip:      #ECEFF6; /* topic chip bg */
	--rmag-radius:    16px;
	--rmag-radius-sm: 10px;
	--rmag-shadow:    0 18px 48px -24px rgba(26,42,92,.34);
	--rmag-shadow-sm: 0 10px 28px -18px rgba(26,42,92,.28);
	--rmag-maxw:      800px;   /* prose measure (wider → long reads take less vertical space) */
	--rmag-maxw-wide: 1180px;  /* hero media + card grid */
	--rmag-pad-x:     clamp(20px, 4vw, 40px);
	--rmag-ease:      cubic-bezier(.22,.61,.36,1);

	background: var(--rmag-canvas);
	color: var(--rmag-body);
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.rmag *,
.rmag *::before,
.rmag *::after { box-sizing: border-box; }

.rmag__container       { max-width: var(--rmag-maxw);      margin-inline: auto; padding-inline: var(--rmag-pad-x); }
.rmag__container--wide { max-width: var(--rmag-maxw-wide); margin-inline: auto; padding-inline: var(--rmag-pad-x); }

/* ---- headings (theme-bleed guard: .rmag .rmag-hX = (0,2,0) beats .elementor-kit hX (0,1,1)) ---- */
.rmag .rmag-h1,
.rmag .rmag-h2,
.rmag .rmag-h3 {
	font-family: "Montserrat", system-ui, sans-serif;
	color: var(--rmag-ink);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	margin: 0;
}
.rmag .rmag-h1 { font-size: clamp(30px, 4.6vw, 50px); }
.rmag .rmag-h2 { font-size: clamp(24px, 3vw, 33px); }

/* =========================== SINGLE ARTICLE =========================== */

.rmag-article { padding-top: clamp(24px, 4vw, 48px); }

.rmag-hero { text-align: left; }

.rmag-crumbs {
	font-size: 14px;
	color: var(--rmag-muted);
	display: flex; gap: 8px; align-items: center;
	margin-bottom: 18px;
}
.rmag .rmag-crumbs a { color: var(--rmag-muted); text-decoration: none; }
.rmag .rmag-crumbs a:hover { color: var(--rmag-ink); }

.rmag-chip,
.rmag-card-chip {
	display: inline-block;
	font-family: "DM Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rmag-ink);
	background: var(--rmag-chip);
	padding: 6px 12px;
	border-radius: 999px;
}

.rmag-hero .rmag-h1 { margin-top: 16px; }

.rmag-dek {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.55;
	color: var(--rmag-body);
	margin: 18px 0 0;
	max-width: 40ch;
}

.rmag-meta {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin-top: 22px;
	font-size: 14.5px;
	color: var(--rmag-muted);
}
.rmag-meta-author { font-weight: 600; color: var(--rmag-body); }
.rmag-meta time, .rmag-meta-rt { font-family: "DM Mono", monospace; font-size: 13.5px; }
.rmag-meta-sep { color: var(--rmag-hairline); }

.rmag-hero-media {
	margin: clamp(28px, 4vw, 48px) auto 0;
}
.rmag-hero-media img {
	width: 100%; display: block;
	aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--rmag-radius);
	box-shadow: var(--rmag-shadow);
	background: var(--rmag-chip);
}

/* ---- body + TOC layout ---- */
.rmag-body-wrap {
	max-width: 1140px;
	margin: clamp(32px, 5vw, 64px) auto 0;
	padding-inline: var(--rmag-pad-x);
}
@media (min-width: 1080px) {
	/* Default (short/list articles whose TOC is hidden): a single centred prose
	   column — NOT two columns, else the prose falls into the 210px TOC track. */
	.rmag-body-wrap {
		display: grid;
		grid-template-columns: minmax(0, var(--rmag-maxw));
		justify-content: center;
	}
	/* With the TOC sidebar (>=3 h2; .rmag-has-toc added by JS): two columns. */
	.rmag-body-wrap.rmag-has-toc {
		grid-template-columns: 210px minmax(0, var(--rmag-maxw));
		gap: 56px;
	}
}

.rmag-toc {
	position: sticky; top: 96px; align-self: start;
	font-size: 14px;
	border-left: 2px solid var(--rmag-hairline);
	padding-left: 18px;
}
.rmag-toc-title {
	font-family: "DM Sans", sans-serif;
	text-transform: uppercase; letter-spacing: .06em;
	font-size: 12px; font-weight: 700; color: var(--rmag-muted);
	margin: 0 0 12px;
}
.rmag-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rmag .rmag-toc-list a { color: var(--rmag-muted); text-decoration: none; line-height: 1.35; display: block; }
.rmag .rmag-toc-list a:hover,
.rmag .rmag-toc-list a.is-current { color: var(--rmag-ink); }

/* ============================ PROSE ============================ */
.rmag-prose { max-width: var(--rmag-maxw); }
.rmag-prose > *:first-child { margin-top: 0; }

.rmag .rmag-prose h2,
.rmag .rmag-prose h3 {
	font-family: "Montserrat", system-ui, sans-serif;
	color: var(--rmag-ink);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.rmag .rmag-prose h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 1.9em 0 .55em; }
.rmag .rmag-prose h3 { font-size: clamp(19px, 2vw, 23px); margin: 1.6em 0 .45em; font-weight: 700; }
.rmag .rmag-prose h2:first-child,
.rmag .rmag-prose h3:first-child { margin-top: 0; }

.rmag-prose p { margin: 0 0 1.25em; line-height: 1.72; }
.rmag-prose p:last-child { margin-bottom: 0; }

.rmag .rmag-prose a {
	color: var(--rmag-body);
	text-decoration: underline;
	text-decoration-color: rgba(47,78,158,.4);
	text-underline-offset: 3px;
	transition: color .15s, text-decoration-color .15s;
}
.rmag .rmag-prose a:hover { color: var(--rmag-blue); text-decoration-color: var(--rmag-blue); }

.rmag-prose strong { font-weight: 700; color: var(--rmag-ink); }

.rmag-prose ul,
.rmag-prose ol { margin: 0 0 1.35em; padding-left: 1.3em; line-height: 1.7; }
.rmag-prose li { margin: 0 0 .5em; }
.rmag-prose li::marker { color: var(--rmag-blue); }

.rmag-prose blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 26px;
	border-left: 3px solid var(--rmag-blue);
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.4;
	color: var(--rmag-ink);
}
.rmag-prose blockquote p { margin: 0; }

.rmag-prose figure { margin: 1.9em 0; }
.rmag-prose figure img,
.rmag-prose > img {
	width: 100%; height: auto; display: block;
	border-radius: var(--rmag-radius-sm);
	background: var(--rmag-chip);
}
.rmag-prose figcaption {
	margin-top: 10px;
	font-size: 14px; color: var(--rmag-muted); text-align: center;
}

/* responsive embeds (oEmbed / [embed] iframes) */
.rmag-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--rmag-radius-sm); }
.rmag-prose .wp-block-embed { margin: 1.9em 0; }
.rmag-prose .wp-block-embed__wrapper { position: relative; }

/* tables (extractor wraps in .rmag-table; also handle Gutenberg figure.wp-block-table) */
.rmag-table,
.rmag-prose figure.wp-block-table { margin: 1.9em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rmag-prose table {
	width: 100%; border-collapse: collapse;
	font-size: 15.5px; line-height: 1.5;
	border: 1px solid var(--rmag-hairline);
}
.rmag-prose th,
.rmag-prose td { padding: 11px 14px; text-align: left; border: 1px solid var(--rmag-hairline); vertical-align: top; }
.rmag-prose thead th,
.rmag-prose tr:first-child th {
	font-family: "Montserrat", sans-serif; font-weight: 700;
	color: #fff; background: var(--rmag-ink);
}
.rmag-prose tbody tr:nth-child(even) td { background: #FAFAF8; }

.rmag-prose hr { border: 0; border-top: 1px solid var(--rmag-hairline); margin: 2.2em 0; }

/* ============================ CARDS / GRID ============================ */
.rmag-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.4vw, 30px);
}
@media (max-width: 900px) { .rmag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rmag-grid { grid-template-columns: 1fr; } }

.rmag-card {
	display: flex; flex-direction: column;
	background: var(--rmag-surface);
	border-radius: var(--rmag-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--rmag-shadow-sm);
	transition: transform .3s var(--rmag-ease), box-shadow .3s var(--rmag-ease);
}
.rmag-card:hover { transform: translateY(-4px); box-shadow: var(--rmag-shadow); }
.rmag-card-media {
	display: block; aspect-ratio: 16 / 9;
	background: var(--rmag-chip) center/cover no-repeat;
}
.rmag-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; }
.rmag-card-chip { align-self: flex-start; }
.rmag .rmag-card-title {
	font-family: "Montserrat", sans-serif; font-weight: 700;
	color: var(--rmag-ink); font-size: 19px; line-height: 1.3;
}
.rmag-card-dek { color: var(--rmag-body); font-size: 15px; line-height: 1.55; }
.rmag-card-meta { margin-top: auto; font-family: "DM Mono", monospace; font-size: 12.5px; color: var(--rmag-muted); }

/* featured lead card (hub) — full-width, image left */
.rmag-card--feature { grid-column: 1 / -1; }
@media (min-width: 720px) {
	.rmag-card--feature { flex-direction: row; align-items: stretch; }
	.rmag-card--feature .rmag-card-media { flex: 0 0 56%; aspect-ratio: auto; min-height: 320px; }
	.rmag-card--feature .rmag-card-body { justify-content: center; gap: 14px; padding: clamp(24px, 3vw, 44px); }
	.rmag-card--feature .rmag-card-title { font-size: clamp(24px, 2.6vw, 32px); }
	.rmag-card--feature .rmag-card-dek { font-size: 16.5px; }
}

/* ============================ RELATED ============================ */
.rmag-related { margin: clamp(56px, 7vw, 96px) auto 0; }
.rmag-related-title { margin-bottom: clamp(22px, 3vw, 34px); }

/* ============================ HUB ============================ */
.rmag-hub { padding-bottom: clamp(40px, 6vw, 80px); }
.rmag-hub-hero { padding-top: clamp(40px, 6vw, 84px); text-align: center; max-width: 760px; }
.rmag-kicker {
	display: inline-block; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; font-size: 13px; color: var(--rmag-muted);
	margin-bottom: 14px;
}
.rmag-hub-hero .rmag-h1 { margin: 0 auto; }
.rmag-lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--rmag-body); margin: 18px auto 0; max-width: 54ch; }

.rmag-hub-filter {
	display: flex; flex-wrap: nowrap; gap: 6px; justify-content: safe center;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	max-width: min(1280px, 92vw); /* a touch wider than the card grid so all chips fit one line */
	margin: clamp(28px, 4vw, 44px) auto clamp(28px, 4vw, 40px);
}
.rmag-hub-filter::-webkit-scrollbar { display: none; } /* keep the row to ONE line; scroll on overflow */
.rmag-fbtn {
	font-family: "DM Sans", sans-serif; font-size: 14.5px; font-weight: 600;
	color: var(--rmag-body); background: var(--rmag-surface);
	border: 1px solid var(--rmag-hairline); border-radius: 999px;
	padding: 9px 13px; cursor: pointer; transition: all .18s var(--rmag-ease);
	white-space: nowrap; flex: 0 0 auto;
}
/* Brand-pinned interactive states — scoped under .rmag so they out-specify the
   Elementor kit's global button:hover/:focus, which otherwise fills the chip with
   its pink accent (#CC3366 -> looked "red"). The selected chip stays navy in every state. */
.rmag .rmag-fbtn:hover  { background: var(--rmag-surface); border-color: var(--rmag-ink); color: var(--rmag-ink); }
.rmag .rmag-fbtn:focus  { background: var(--rmag-surface); border-color: var(--rmag-ink); color: var(--rmag-ink); }
.rmag .rmag-fbtn:focus-visible { outline: 2px solid var(--rmag-ink); outline-offset: 2px; }
.rmag .rmag-fbtn:active { background: var(--rmag-ink); border-color: var(--rmag-ink); color: #fff; }
.rmag .rmag-fbtn.is-active,
.rmag .rmag-fbtn.is-active:hover,
.rmag .rmag-fbtn.is-active:focus { background: var(--rmag-ink); color: #fff; border-color: var(--rmag-ink); }

.rmag-empty { text-align: center; color: var(--rmag-muted); padding: 40px 0; }
.rmag-card[hidden] { display: none !important; }

/* ============================ REVEAL ============================ */
.rmag-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--rmag-ease), transform .6s var(--rmag-ease); }
.rmag-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.rmag-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================ MOBILE ============================ */
@media (max-width: 1079px) {
	.rmag-toc { display: none; }
}
@media (max-width: 600px) {
	.rmag { font-size: 17px; }
	.rmag-hero { text-align: left; }
}