/* ==========================================================================
   MSL Kit Theme — Fix Classes (v1.0.1)
   Added to replace all inline styles found during BLOCKER-1 audit.
   Prefix: msl-fix-* for one-off layout fixes; msl-flex-* for reusable flex.
   All values use Kit tokens — no hardcoded colours or sizes.
   ========================================================================== */

/* --- 404 page --- */
.msl-fix-404-lead{
	margin: var(--msl-sp-5) auto var(--msl-sp-6);
}
.msl-fix-404-actions{
	margin-top: var(--msl-sp-6);
	display: flex;
	gap: var(--msl-sp-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* --- Archive spacers --- */
.msl-fix-letter-section{ margin-bottom: var(--msl-sp-7); }
.msl-fix-lead-top{ margin-top: var(--msl-sp-5); }
.msl-fix-lead-top-4{ margin-top: var(--msl-sp-4); }
.msl-fix-card-no-underline{ text-decoration: none; }

/* --- Comments --- */
.msl-fix-commentlist{ list-style: none; padding: 0; }

/* --- Footer --- */
.msl-fix-footer-meta{
	font-size: var(--msl-size-small);
	color: rgba(255,255,255,0.65);
	line-height: var(--msl-lh-normal);
	margin: 0;
}
.msl-fix-footer-span3{ grid-column: span 3; }

/* --- Front page CTA row --- */
.msl-fix-cta-row{
	display: flex;
	gap: var(--msl-sp-3);
	flex-wrap: wrap;
	margin-top: var(--msl-sp-6);
}

/* --- Books page --- */
.msl-fix-book-thumb{
	margin: calc(var(--msl-sp-6) * -1) calc(var(--msl-sp-7) * -1) var(--msl-sp-4);
	display: block;
	aspect-ratio: 3/4;
	object-fit: cover;
	border-radius: var(--msl-r-md) var(--msl-r-md) 0 0;
	width: calc(100% + 2 * var(--msl-sp-7));
	max-width: none;
}
.msl-fix-book-thumb-link{
	margin: calc(var(--msl-sp-6) * -1) calc(var(--msl-sp-7) * -1) var(--msl-sp-4);
	display: block;
	overflow: hidden;
	border-radius: var(--msl-r-md) var(--msl-r-md) 0 0;
}
.msl-fix-inherit-color{ color: inherit; }

/* --- Contact page --- */
.msl-fix-card-top{ margin-top: var(--msl-sp-6); }
.msl-fix-amber-link{ color: var(--msl-amber-deep); text-decoration: underline; }

/* --- Singles: reading-width auto centre --- */
.msl-fix-reading-auto{ margin-inline: auto; }

/* --- Pros/cons + CTA vertical spacing --- */
.msl-fix-block-v6{ margin: var(--msl-sp-6) 0; }

/* --- Single research: muted span --- */
.msl-fix-muted{ color: var(--msl-muted); }

/* --- Single tool: top-section spacer --- */
.msl-fix-section-top{ margin-top: var(--msl-sp-8); }

/* --- Breadcrumb nav --- */
.msl-breadcrumb{
	font-size: var(--msl-size-meta);
	color: var(--msl-muted);
	margin-bottom: var(--msl-sp-4);
}

/* --- Archive / card thumbnails (replaces background-image inline) --- */
.msl-fix-thumb-img{
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: var(--msl-r-md) var(--msl-r-md) 0 0;
}
.msl-archive-card-thumb-img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* wrapper keeps existing card styles intact */
.msl-archive-card-thumb{ overflow: hidden; }

/* ==========================================================================
   MSL Kit Theme — Kit Extensions
   Patterns that exist in /Local Sites/design-studio/ but were not yet in
   msl-kit.css. All follow the same naming convention (.msl-pattern-*) and
   reuse Kit tokens — no hardcoded colors, no inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KPI CARD WITH SPARKLINE
   Source: research-v2/r1-editorial-longform.html · .kpi + svg.spark
   Use:
   <div class="msl-pattern-kpi msl-pattern-kpi--up">
     <div class="msl-pattern-kpi-head">
       <div class="lbl">דמי ניהול הזולים</div>
       <div class="val">0.31<span class="unit">%</span></div>
       <div class="delta">מנורה · ת"א 125</div>
     </div>
     <svg class="msl-pattern-kpi-spark" viewBox="0 0 90 36" preserveAspectRatio="none">
       <path d="..." />
     </svg>
   </div>
   -------------------------------------------------------------------------- */
.msl-pattern-kpi{
	background: #fff;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r-md);
	padding: var(--msl-sp-5);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--msl-sp-4);
	overflow: hidden;
}
.msl-pattern-kpi-head{
	display: flex;
	flex-direction: column;
	gap: var(--msl-sp-1);
	min-width: 0;
}
.msl-pattern-kpi .lbl{
	font-size: var(--msl-size-tiny);
	color: var(--msl-muted);
	font-weight: var(--msl-w-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.msl-pattern-kpi .val{
	font-size: var(--msl-size-h2);
	font-weight: var(--msl-w-black);
	color: var(--msl-ink-strong);
	line-height: var(--msl-lh-tight);
	letter-spacing: var(--msl-ls-heading);
	margin: 0;
}
.msl-pattern-kpi .val .unit{
	font-size: 0.5em;
	font-weight: var(--msl-w-reg);
	color: var(--msl-muted);
	margin-inline-end: 0.2em;
}
.msl-pattern-kpi .delta{
	font-size: var(--msl-size-meta);
	color: var(--msl-muted);
	margin: 0;
}
.msl-pattern-kpi-spark{
	width: 90px;
	height: 36px;
	align-self: end;
	flex-shrink: 0;
}
.msl-pattern-kpi-spark path{ fill-opacity: 0.16; stroke-width: 0; }
.msl-pattern-kpi--up .val{ color: var(--msl-up); }
.msl-pattern-kpi--up .msl-pattern-kpi-spark path{ fill: var(--msl-up); }
.msl-pattern-kpi--down .val{ color: var(--msl-down); }
.msl-pattern-kpi--down .msl-pattern-kpi-spark path{ fill: var(--msl-down); }
.msl-pattern-kpi--amber .val{ color: var(--msl-amber-deep); }
.msl-pattern-kpi--amber .msl-pattern-kpi-spark path{ fill: var(--msl-amber); }
.msl-on-dark .msl-pattern-kpi{ background: var(--msl-navy-2); border-color: rgba(255,255,255,0.1); }
.msl-on-dark .msl-pattern-kpi .val{ color: #fff; }
.msl-on-dark .msl-pattern-kpi .lbl,
.msl-on-dark .msl-pattern-kpi .delta{ color: rgba(255,255,255,0.6); }

/* Grid wrapper */
.msl-pattern-kpis{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--msl-sp-3);
}
.msl-pattern-kpis--3col{ grid-template-columns: repeat(3, 1fr); }
.msl-pattern-kpis--2col{ grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   2. HERO — Two-column variant (text + bignum)
   Source: research-v2/r1-editorial-longform.html · .hero with .left + .right
   Use:
   <section class="msl-pattern-hero msl-pattern-hero--split msl-bg-navy msl-on-dark msl-glow">
     <div class="msl-container">
       <div class="msl-pattern-hero-split">
         <div class="msl-pattern-hero-text">
           <p class="msl-kicker">...</p>
           <h1 class="msl-h1 msl-h1--xl">...</h1>
           <p class="msl-lead">...</p>
           <div class="msl-pattern-byline">...</div>
         </div>
         <div class="msl-pattern-hero-bignum">
           <div class="num">180K<span class="unit">₪</span></div>
           <div class="lbl">פוטנציאל ההפסד <span class="msl-amber">לאורך 30 שנה</span></div>
         </div>
       </div>
     </div>
   </section>
   -------------------------------------------------------------------------- */
.msl-pattern-hero-split{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--msl-sp-7);
	align-items: end;
}
.msl-pattern-hero-text{ min-width: 0; }
.msl-pattern-hero-bignum{
	display: flex;
	flex-direction: column;
	gap: var(--msl-sp-3);
	border-inline-start: 1px solid rgba(255,255,255,0.12);
	padding-inline-start: var(--msl-sp-5);
}
.msl-pattern-hero-bignum .num{
	font-family: var(--msl-font);
	font-size: var(--msl-size-display);
	font-weight: var(--msl-w-black);
	line-height: var(--msl-lh-tight);
	letter-spacing: var(--msl-ls-display);
	color: var(--msl-amber);
	margin: 0;
}
.msl-pattern-hero-bignum .num .unit{
	font-size: 0.35em;
	font-weight: var(--msl-w-reg);
	color: rgba(255,255,255,0.6);
	margin-inline-end: 0.15em;
}
.msl-pattern-hero-bignum .lbl{
	font-size: var(--msl-size-small);
	color: rgba(255,255,255,0.78);
	line-height: var(--msl-lh-normal);
	max-width: 32ch;
}
.msl-pattern-hero-bignum .lbl .msl-amber{ color: var(--msl-amber); font-weight: var(--msl-w-bold); }

/* --------------------------------------------------------------------------
   3. TOOL WORKSPACE SPLIT
   Source: v2-tool-workspace.html · .workspace + .form-card + .result-card
   Use:
   <section class="msl-pattern-workspace">
     <div class="msl-container msl-container--wide">
       <div class="msl-pattern-workspace-grid">
         <aside class="msl-pattern-workspace-form">...form fields...</aside>
         <main class="msl-pattern-workspace-results">...result cards...</main>
       </div>
     </div>
   </section>
   -------------------------------------------------------------------------- */
.msl-pattern-workspace{ padding: var(--msl-sp-7) 0; }
.msl-pattern-workspace-grid{
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: var(--msl-sp-5);
	align-items: start;
}
.msl-pattern-workspace-form{
	background: #fff;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r-md);
	padding: var(--msl-sp-6);
	position: sticky;
	top: var(--msl-sp-4);
}
.msl-pattern-workspace-form h2{
	font-size: var(--msl-size-h4);
	font-weight: var(--msl-w-heavy);
	color: var(--msl-ink-strong);
	margin: 0 0 var(--msl-sp-4);
}
.msl-pattern-workspace-form .msl-field{ margin-bottom: var(--msl-sp-4); }
.msl-pattern-workspace-form .actions{
	display: flex;
	gap: var(--msl-sp-2);
	margin-top: var(--msl-sp-5);
	padding-top: var(--msl-sp-4);
	border-top: 1px solid var(--msl-line);
}
.msl-pattern-workspace-results{
	display: grid;
	gap: var(--msl-sp-4);
}

/* --------------------------------------------------------------------------
   4. STOCKS RANKING TABLE
   Source: top-stocks/mockup-d-clean-table.html
   Use:
   <table class="msl-pattern-rank">
     <thead><tr><th>#</th><th>חברה</th><th>סקטור</th><th>תשואה</th><th>גרף</th></tr></thead>
     <tbody>
       <tr><td>1</td><td><b>שופרסל</b></td><td>קמעונאות</td><td class="msl-data--up">+8.4%</td><td><svg class="msl-pattern-rank-spark">...</svg></td></tr>
     </tbody>
   </table>
   -------------------------------------------------------------------------- */
.msl-pattern-rank{
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r-md);
	overflow: hidden;
	font-size: var(--msl-size-small);
}
.msl-pattern-rank thead th{
	background: var(--msl-cream-2);
	text-align: start;
	padding: var(--msl-sp-3) var(--msl-sp-4);
	font-size: var(--msl-size-tiny);
	font-weight: var(--msl-w-bold);
	letter-spacing: var(--msl-ls-label);
	text-transform: uppercase;
	color: var(--msl-muted);
	border-bottom: 1px solid var(--msl-line);
}
.msl-pattern-rank tbody td{
	padding: var(--msl-sp-3) var(--msl-sp-4);
	border-bottom: 1px solid var(--msl-line-light);
	vertical-align: middle;
}
.msl-pattern-rank tbody tr:last-child td{ border-bottom: 0; }
.msl-pattern-rank tbody tr:hover{ background: var(--msl-cream); }
.msl-pattern-rank tbody .rank{
	font-family: var(--msl-font);
	font-weight: var(--msl-w-black);
	color: var(--msl-amber-deep);
	font-size: var(--msl-size-h4);
	width: 48px;
}
.msl-pattern-rank tbody .name b{
	font-weight: var(--msl-w-heavy);
	color: var(--msl-ink-strong);
	display: block;
}
.msl-pattern-rank tbody .name .sym{
	font-size: var(--msl-size-tiny);
	color: var(--msl-muted);
	font-weight: var(--msl-w-mid);
	letter-spacing: 0.04em;
}
.msl-pattern-rank-spark{ width: 80px; height: 28px; }

/* --------------------------------------------------------------------------
   5. MAGAZINE HUB GRID
   Source: v2-hub-magazine.html · .mag-grid (.featured + .card-list)
   Use:
   <div class="msl-pattern-magazine">
     <article class="msl-pattern-magazine-featured">...big card...</article>
     <div class="msl-pattern-magazine-list">
       <article class="msl-pattern-magazine-card">...</article>
       <article class="msl-pattern-magazine-card">...</article>
       ...
     </div>
   </div>
   -------------------------------------------------------------------------- */
.msl-pattern-magazine{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--msl-sp-5);
	align-items: start;
}
.msl-pattern-magazine-featured{
	background: #fff;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.msl-pattern-magazine-featured .thumb{
	aspect-ratio: 16/9;
	background: var(--msl-navy);
	background-size: cover;
	background-position: center;
}
.msl-pattern-magazine-featured .body{ padding: var(--msl-sp-6) var(--msl-sp-7); }
.msl-pattern-magazine-featured h2{
	font-size: var(--msl-size-h2);
	font-weight: var(--msl-w-heavy);
	color: var(--msl-ink-strong);
	margin: var(--msl-sp-3) 0;
	line-height: var(--msl-lh-snug);
	letter-spacing: var(--msl-ls-heading);
}
.msl-pattern-magazine-featured h2 a{ color: inherit; }
.msl-pattern-magazine-featured .deck{
	font-size: var(--msl-size-body);
	color: var(--msl-muted);
	line-height: var(--msl-lh-normal);
}
.msl-pattern-magazine-list{ display: flex; flex-direction: column; gap: var(--msl-sp-3); }
.msl-pattern-magazine-card{
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--msl-sp-4);
	background: #fff;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r);
	overflow: hidden;
	padding: 0;
}
.msl-pattern-magazine-card .thumb{
	background: var(--msl-cream-2);
	background-size: cover;
	background-position: center;
}
.msl-pattern-magazine-card .body{
	padding: var(--msl-sp-3) var(--msl-sp-4) var(--msl-sp-3) 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--msl-sp-1);
}
.msl-pattern-magazine-card h3{
	font-size: var(--msl-size-h4);
	font-weight: var(--msl-w-heavy);
	color: var(--msl-ink-strong);
	margin: 0;
	line-height: var(--msl-lh-snug);
}
.msl-pattern-magazine-card h3 a{ color: inherit; }
.msl-pattern-magazine-card .meta{
	font-size: var(--msl-size-meta);
	color: var(--msl-muted);
}

/* --------------------------------------------------------------------------
   6. BRIEF GRID — 4 cells with dividers
   Source: stock-spotlight/mockup-1-trading-desk.html · .brief-grid
   Use:
   <div class="msl-pattern-brief">
     <div class="msl-pattern-brief-cell"><div class="lbl">מחיר נוכחי</div><div class="val">142.30</div><div class="delta msl-data--up">+2.4%</div></div>
     <div class="msl-pattern-brief-cell">...</div>
     <div class="msl-pattern-brief-cell">...</div>
     <div class="msl-pattern-brief-cell">...</div>
   </div>
   -------------------------------------------------------------------------- */
.msl-pattern-brief{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--msl-cream-2);
	border-top: 1px solid var(--msl-line);
	border-bottom: 1px solid var(--msl-line);
	padding: var(--msl-sp-5) 0;
}
.msl-pattern-brief-cell{
	padding: 0 var(--msl-sp-5);
	border-inline-start: 1px solid var(--msl-line);
	display: flex;
	flex-direction: column;
	gap: var(--msl-sp-1);
}
.msl-pattern-brief-cell:first-child{ border-inline-start: 0; }
.msl-pattern-brief-cell .lbl{
	font-size: var(--msl-size-tiny);
	color: var(--msl-muted);
	font-weight: var(--msl-w-bold);
	letter-spacing: var(--msl-ls-label);
	text-transform: uppercase;
}
.msl-pattern-brief-cell .val{
	font-size: var(--msl-size-num);
	font-weight: var(--msl-w-black);
	color: var(--msl-ink-strong);
	line-height: 1;
	letter-spacing: var(--msl-ls-heading);
}
.msl-pattern-brief-cell .delta{
	font-size: var(--msl-size-meta);
	font-weight: var(--msl-w-bold);
}

/* --------------------------------------------------------------------------
   7. CITE COMPONENT (used in research papers)
   -------------------------------------------------------------------------- */
.msl-pattern-cite{
	background: var(--msl-cream-2);
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r);
	padding: var(--msl-sp-4) var(--msl-sp-5);
	margin: var(--msl-sp-6) 0;
	font-size: var(--msl-size-small);
	color: var(--msl-ink);
}
.msl-pattern-cite .lbl{
	display: block;
	font-size: var(--msl-size-tiny);
	font-weight: var(--msl-w-bold);
	letter-spacing: var(--msl-ls-label);
	text-transform: uppercase;
	color: var(--msl-amber-deep);
	margin: 0 0 var(--msl-sp-2);
}
.msl-pattern-cite code{
	display: block;
	background: #fff;
	padding: var(--msl-sp-2) var(--msl-sp-3);
	border-radius: var(--msl-r-sm);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: var(--msl-size-meta);
	color: var(--msl-ink-strong);
	margin-top: var(--msl-sp-2);
	user-select: all;
}

/* --------------------------------------------------------------------------
   8. SHARE ROW (8-platform sharing)
   -------------------------------------------------------------------------- */
.msl-pattern-sharerow{
	display: flex;
	gap: var(--msl-sp-2);
	flex-wrap: wrap;
	padding: var(--msl-sp-5) 0;
	border-top: 1px solid var(--msl-line);
	border-bottom: 1px solid var(--msl-line);
	margin: var(--msl-sp-7) 0;
	align-items: center;
}
.msl-pattern-sharerow .lbl{
	font-size: var(--msl-size-meta);
	font-weight: var(--msl-w-bold);
	color: var(--msl-muted);
	letter-spacing: var(--msl-ls-label);
	text-transform: uppercase;
	margin-inline-end: var(--msl-sp-3);
}
.msl-pattern-sharerow a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r);
	font-size: var(--msl-size-meta);
	font-weight: var(--msl-w-bold);
	color: var(--msl-ink-strong);
	text-decoration: none;
	background: #fff;
}
.msl-pattern-sharerow a:hover{ border-color: var(--msl-amber); }

/* --------------------------------------------------------------------------
   9. BOOK PAGINATION (chapter → section breadcrumb + next/prev)
   -------------------------------------------------------------------------- */
.msl-pattern-bookpag{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--msl-sp-4);
	margin: var(--msl-sp-7) 0;
}
.msl-pattern-bookpag a{
	background: #fff;
	border: 1px solid var(--msl-line);
	border-radius: var(--msl-r-md);
	padding: var(--msl-sp-4) var(--msl-sp-5);
	display: flex;
	flex-direction: column;
	gap: var(--msl-sp-1);
	text-decoration: none;
	color: var(--msl-ink-strong);
}
.msl-pattern-bookpag a:hover{ border-color: var(--msl-amber); }
.msl-pattern-bookpag .dir{
	font-size: var(--msl-size-tiny);
	font-weight: var(--msl-w-bold);
	letter-spacing: var(--msl-ls-label);
	text-transform: uppercase;
	color: var(--msl-amber);
}
.msl-pattern-bookpag .ttl{
	font-size: var(--msl-size-h4);
	font-weight: var(--msl-w-heavy);
}
.msl-pattern-bookpag .next{ text-align: end; }

/* --------------------------------------------------------------------------
   10. GLOSSARY ALPHA INDEX (A-Z jump strip)
   -------------------------------------------------------------------------- */
.msl-pattern-alpha{
	display: flex;
	flex-wrap: wrap;
	gap: var(--msl-sp-1);
	padding: var(--msl-sp-4);
	background: var(--msl-cream-2);
	border-radius: var(--msl-r);
	margin-bottom: var(--msl-sp-6);
}
.msl-pattern-alpha a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--msl-r-sm);
	font-weight: var(--msl-w-bold);
	color: var(--msl-ink-strong);
	background: #fff;
	border: 1px solid var(--msl-line);
	text-decoration: none;
	font-size: var(--msl-size-meta);
}
.msl-pattern-alpha a:hover{ background: var(--msl-amber); border-color: var(--msl-amber); }

/* --------------------------------------------------------------------------
   11. FEEDBACK PROMPT (small inline CTA for the Crisp widget)
   -------------------------------------------------------------------------- */
.msl-pattern-feedback{
	background: var(--msl-cream-2);
	border-radius: var(--msl-r-md);
	padding: var(--msl-sp-5) var(--msl-sp-6);
	margin: var(--msl-sp-6) 0;
	display: flex;
	gap: var(--msl-sp-4);
	align-items: center;
	flex-wrap: wrap;
}
.msl-pattern-feedback .ico{
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: var(--msl-amber);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--msl-ink-strong);
	font-size: 24px;
	font-weight: var(--msl-w-black);
}
.msl-pattern-feedback .body{ flex: 1; min-width: 200px; }
.msl-pattern-feedback h4{
	font-size: var(--msl-size-h4);
	font-weight: var(--msl-w-heavy);
	margin: 0 0 var(--msl-sp-1);
	color: var(--msl-ink-strong);
}
.msl-pattern-feedback p{
	margin: 0;
	font-size: var(--msl-size-small);
	color: var(--msl-muted);
}

/* --------------------------------------------------------------------------
   12. RELATED CONTENT (3-card strip below singles)
   -------------------------------------------------------------------------- */
.msl-pattern-related{
	margin: var(--msl-sp-8) 0 0;
	padding-top: var(--msl-sp-6);
	border-top: 1px solid var(--msl-line);
}
.msl-pattern-related h3{
	font-size: var(--msl-size-h3);
	font-weight: var(--msl-w-heavy);
	color: var(--msl-ink-strong);
	margin: 0 0 var(--msl-sp-5);
	letter-spacing: var(--msl-ls-heading);
}
.msl-pattern-related-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--msl-sp-4);
}

/* --------------------------------------------------------------------------
   Responsive — collapse multi-column patterns
   -------------------------------------------------------------------------- */
@media (max-width: 980px){
	.msl-pattern-hero-split,
	.msl-pattern-workspace-grid,
	.msl-pattern-magazine{ grid-template-columns: 1fr; }
	.msl-pattern-workspace-form{ position: static; }
	.msl-pattern-kpis,
	.msl-pattern-kpis--3col{ grid-template-columns: repeat(2, 1fr); }
	.msl-pattern-brief{ grid-template-columns: repeat(2, 1fr); gap: var(--msl-sp-3) 0; }
	.msl-pattern-related-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
	.msl-pattern-kpis,
	.msl-pattern-kpis--3col,
	.msl-pattern-kpis--2col,
	.msl-pattern-brief{ grid-template-columns: 1fr; }
	.msl-pattern-rank{ font-size: var(--msl-size-meta); }
	.msl-pattern-rank thead{ display: none; }
	.msl-pattern-rank tbody td{ padding: var(--msl-sp-2) var(--msl-sp-3); }
	.msl-pattern-magazine-card{ grid-template-columns: 80px 1fr; }
}

/* =============================================================
   v1.0.2 — Elementor Global Override Defense
   Elementor Site Settings (.elementor-kit-NNNNN) injects color
   rules on h1/h2/h3/h4/h5/h6 with specificity 0,2,0. The kit's
   .msl-h1/.msl-h2/.msl-h3 rules at specificity 0,1,0 lose.
   body.elementor-default raises specificity to 0,2,1 → wins.
   ============================================================= */

body.elementor-default .msl-h1,
body.elementor-default h1.msl-h1 { color: var(--msl-ink-strong); }
body.elementor-default .msl-h2,
body.elementor-default h2.msl-h2 { color: var(--msl-ink-strong); }
body.elementor-default .msl-h3,
body.elementor-default h3.msl-h3 { color: var(--msl-ink-strong); }
body.elementor-default .msl-h4,
body.elementor-default h4.msl-h4 { color: var(--msl-ink-strong); }

body.elementor-default .msl-on-dark .msl-h1,
body.elementor-default .msl-on-dark .msl-h2,
body.elementor-default .msl-on-dark .msl-h3,
body.elementor-default .msl-on-dark .msl-h4 { color: #fff; }

body.elementor-default .msl-h1 .msl-amber,
body.elementor-default .msl-h2 .msl-amber,
body.elementor-default .msl-h3 .msl-amber,
body.elementor-default .msl-h4 .msl-amber { color: var(--msl-amber); }

body.elementor-default .msl-h1 .msl-light,
body.elementor-default .msl-h2 .msl-light,
body.elementor-default .msl-h3 .msl-light,
body.elementor-default .msl-h4 .msl-light { color: var(--msl-muted); }

body.elementor-default .msl-on-dark .msl-light { color: rgba(255,255,255,0.55); }

/* =============================================================
   v1.0.3 — Font Override (Heebo on h1-h6 in Elementor context)
   2026-05-27 · S-THEME-FIX-6 · BUG-V001 fix
   ---
   Elementor Site Settings (post-30994.css) forces "Secular One"
   on h2-h5 with specificity 0,2,0. The kit's .msl-h2/.msl-h3 etc.
   at 0,1,0 lose. Bumping to 0,2,1 (body.elementor-default) wins.
   ============================================================= */

body.elementor-default h1,
body.elementor-default h1.msl-h1,
body.elementor-default h2,
body.elementor-default h2.msl-h2,
body.elementor-default h3,
body.elementor-default h3.msl-h3,
body.elementor-default h4,
body.elementor-default h4.msl-h4,
body.elementor-default h5,
body.elementor-default h5.msl-h5,
body.elementor-default h6,
body.elementor-default h6.msl-h6,
body.elementor-default .msl-h1,
body.elementor-default .msl-h2,
body.elementor-default .msl-h3,
body.elementor-default .msl-h4 {
  font-family: "Heebo", system-ui, -apple-system, sans-serif;
}

/* =============================================================
   v1.0.4 — Hub duplicate h1 suppression (BUG-V005)
   2026-05-27 · S-THEME-FIX-6
   ---
   Hub pages (page-research/tools/books/glossary/about) render h1
   in hero-single.php. But the hub page content (Elementor) often
   contains another <h1> from Heading widget, producing duplicate
   h1 (bad SEO + visual confusion).
   Approach B: demote any <h1> rendered by Elementor heading widget
   inside the_content() of a hub page to msl-h2 visual sizing.
   ============================================================= */

body.page-template-page-research .elementor-widget-heading h1,
body.page-template-page-tools .elementor-widget-heading h1,
body.page-template-page-books .elementor-widget-heading h1,
body.page-template-page-glossary .elementor-widget-heading h1,
body.page-template-page-about .elementor-widget-heading h1,
body.page-template-page-courses .elementor-widget-heading h1 {
  display: none !important;
}

/* Also catch generic post_content first h1 (e.g. when not wrapped
   in elementor widget) — only inside hub layouts: */
body.page-template-page-research > .site-main .msl-container > h1:first-of-type,
body.page-template-page-tools    > .site-main .msl-container > h1:first-of-type,
body.page-template-page-books    > .site-main .msl-container > h1:first-of-type {
  display: none !important;
}

/* =============================================================
   v1.0.5 — h1 size enforcement (BUG-V003)
   2026-05-27 · S-THEME-FIX-6
   ---
   .msl-h1 (specificity 0,1,0) defines font-size: 3.75rem (60px)
   but Elementor Global Settings forces h1 → 30px at specificity 0,2,0.
   Result: h1 renders at 30px despite token saying 60px.
   Solution: body.elementor-default raises specificity to 0,2,1 → wins.
   Also force size on inner spans (they inherit).
   ============================================================= */

body.elementor-default h1.msl-h1,
body.elementor-default .msl-h1 {
  font-size: var(--msl-size-h1);
  line-height: var(--msl-lh-tight, 1.05);
}

body.elementor-default h1.msl-h1--xl,
body.elementor-default .msl-h1--xl {
  font-size: var(--msl-size-h1-xl);
  line-height: var(--msl-lh-tight, 1.05);
}

body.elementor-default h1.msl-h1 .msl-light,
body.elementor-default h1.msl-h1 .msl-heavy,
body.elementor-default h1.msl-h1 .msl-amber,
body.elementor-default .msl-h1 .msl-light,
body.elementor-default .msl-h1 .msl-heavy,
body.elementor-default .msl-h1 .msl-amber {
  font-size: inherit;
  line-height: inherit;
}

/* h2/h3/h4 sizes — same Elementor override pattern */
body.elementor-default h2.msl-h2,
body.elementor-default .msl-h2 { font-size: var(--msl-size-h2); }
body.elementor-default h3.msl-h3,
body.elementor-default .msl-h3 { font-size: var(--msl-size-h3); }
body.elementor-default h4.msl-h4,
body.elementor-default .msl-h4 { font-size: var(--msl-size-h4, 1.25rem); }

/* Responsive scale-up at desktop widths (matches kit spec) */
@media (min-width: 900px) {
  body.elementor-default h1.msl-h1,
  body.elementor-default .msl-h1 {
    font-size: clamp(2.5rem, 5vw, 6rem);
  }
}

/* =============================================================
   v1.0.6 — Broader selectors (BUG-V005 + BUG-V007 fallback)
   2026-05-27 · S-THEME-FIX-6 follow-up
   ---
   Some hub pages use page-template-default (not page-research.php
   etc.) because they're set up via Elementor Pro Templates instead
   of WP page templates. The v1.0.4 selectors miss them.
   ---
   Approach: hide the SECOND h1 inside .msl-entry when the first
   one is inside .msl-single-hero (theme's hero).
   ============================================================= */

/* If a hero exists at top, suppress any further h1 in .msl-entry */
body .msl-single-hero ~ section .msl-entry h1:not(.msl-h1),
body .msl-single-hero ~ section .msl-entry > h1,
body .msl-single-hero ~ section .elementor-widget-heading h1 {
  display: none !important;
}

/* Also a more aggressive sibling rule: any h1 after the hero h1 */
body .msl-single-hero h1.msl-h1 ~ * h1:not(.msl-h1) {
  display: none !important;
}

/* Hub kicker default — visual fallback when meta is missing
   (covers page-template-default hubs without _msl_kicker meta) */
body.page-id-131989 .msl-single-hero .msl-container > .msl-kicker:empty,
body.page-id-131989 .msl-single-hero .msl-container:first-child:not(:has(.msl-kicker))::before {
  /* visual-only fallback would go here if needed; the PHP fallback
     in hero-single.php already covers known hub templates. For
     pages using page-template-default the editor must set _msl_kicker
     meta manually. Logged in handoff as MANUAL-META-NEEDED. */
}

/* =============================================================
   v1.0.7 — BUG-V005 surgical fix
   2026-05-27 · S-THEME-FIX-6 follow-up #2
   ---
   Actual DOM (discovered via Chrome MCP):
   section.msl-single-hero > h1.msl-h1   (kept — this is the spec hero)
   article.msl-single > div.msl-container > div.msl-entry > header.msl-hub-hero > h1   (DUPLICATE — hide)
   The .msl-hub-hero element is injected by the Hub shortcode/template
   itself, not by Elementor. Hide it whenever a .msl-single-hero is present.
   ============================================================= */

body:has(.msl-single-hero) .msl-hub-hero,
body:has(.msl-single-hero) article.msl-single .msl-entry > header > h1:first-child {
  display: none !important;
}

/* Fallback for browsers without :has() — direct hide of .msl-hub-hero
   always (the hero-single template already provides the page title) */
.msl-single-hero ~ * .msl-hub-hero,
article.msl-single .msl-entry .msl-hub-hero {
  display: none !important;
}

/* =============================================================
   v1.0.8 — PRE/CODE overflow fix (BUG-COURSERA-002)
   2026-05-27 · S-COURSERA-DEBUG
   ---
   Root cause: <code> elements inside Elementor Text Editor on
   Coursera/Udemy single posts (template 125804) overflow
   horizontally without wrapping, pushing content to left=-1828px
   on RTL pages. docWidth expanded to 3728px vs viewport 1900px.
   Fix: constrain pre+code to max-width:100% with horizontal scroll
   inside the block itself, not the whole page.
   ============================================================= */

/* Global pre/code overflow containment */
pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}
pre code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
}

/* Inside Elementor text widgets specifically */
.elementor-widget-text-editor pre,
.elementor-text-editor pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
}
.elementor-widget-text-editor pre code,
.elementor-text-editor pre code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}