/* ==========================================================================
   Margin — Single Lesson template styles
   --------------------------------------------------------------------------
   Restores the original Margin article typography, spacing, formula and table
   design for the Gutenberg prose that Elementor's Post Content widget outputs.

   SCOPE: everything is prefixed with `body.single-lesson` (the body class
   WordPress adds on a single `lesson` post) and the Post Content wrapper, so
   NOTHING here touches the homepage, Blog library, WooCommerce or other pages,
   and it does not restyle the interactive component plugins (those target their
   own .mbh-/.mrs-/.mlq-/.mld-/.mlc-/.mln- roots, which are nested divs and are
   never matched by the ">" child selectors used for prose below).

   It targets Gutenberg block classes (.wp-block-heading, .wp-block-table,
   .wp-block-list) and the content container's direct child paragraphs, plus
   two optional helper classes you add in the editor:
     • .margin-formula  — on the big "Break-even ROAS = 1 ÷ gross margin" heading
     • .margin-accent   — on an inline span to colour it orange (the "1", etc.)
     • .margin-num      — on an inline span for a section number ("01", "02"…)

   If your template's content isn't inside `.elementor-widget-theme-post-content`,
   change that one selector token below (--MLS content wrapper--) to match.
   ========================================================================== */

:root{
  --mls-ink:#242424;
  --mls-cream:#F7F5EF;
  --mls-rust:#A84400;
  --mls-accent:#FF6A00;
  --mls-rule:#D8D3C6;
  --mls-muted:#5C5852;
  --mls-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mls-sans:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mls-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Content wrapper shorthand (--MLS content wrapper--). */
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container{
  color:var(--mls-ink);
}

/* --- Reading column + vertical rhythm ----------------------------------- */
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > *{
  max-width:680px;           /* the original body measure */
  margin-left:0;
  margin-right:0;
}
/* Interactive components and wide blocks keep their own full width. */
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mbh-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > [class*="mrs-"],
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mlq-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mld-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mlc-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mln-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-table,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .margin-wide{
  max-width:none;
}
/* Rhythm between blocks (reads like the original section spacing). */
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > * + *{
  margin-top:28px;
}
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-heading{
  margin-top:72px;
}
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mlc-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mbh-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .mld-root,
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > [class*="mrs-"]{
  margin-top:40px;
}

/* --- Body paragraphs (serif) -------------------------------------------- */
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > p{
  font-family:var(--mls-serif);
  font-size:21px;
  line-height:1.62;
  color:var(--mls-ink);
}
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > p a{
  color:var(--mls-ink);
  text-decoration:underline;
  text-decoration-color:var(--mls-accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}

/* --- Headings (sans, bold — overrides a theme that sets serif headings) -- */
.single-lesson .elementor-widget-theme-post-content .wp-block-heading{
  font-family:var(--mls-sans) !important;   /* beats theme `h2{font-family:serif}` */
  color:var(--mls-ink);
  letter-spacing:-0.025em;
  line-height:1.1;
}
.single-lesson .elementor-widget-theme-post-content h2.wp-block-heading{
  font-weight:800;
  font-size:34px;
}
.single-lesson .elementor-widget-theme-post-content h3.wp-block-heading{
  font-weight:800;
  font-size:26px;
}
/* Inline section number, e.g. <span class="margin-num">01</span> The setup */
.single-lesson .elementor-widget-theme-post-content .margin-num{
  font-family:var(--mls-mono);
  font-size:0.44em;
  font-weight:500;
  color:var(--mls-rust);
  margin-right:12px;
  vertical-align:baseline;
}

/* --- Formula display heading -------------------------------------------- */
/* Add the class `margin-formula` to the "Break-even ROAS = 1 ÷ gross margin"
   heading block, and wrap the orange "1" in <span class="margin-accent">1</span>. */
.single-lesson .elementor-widget-theme-post-content .wp-block-heading.margin-formula,
.single-lesson .elementor-widget-theme-post-content .margin-formula{
  font-family:var(--mls-sans) !important;
  font-weight:900;
  font-size:clamp(36px,5vw,68px);
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--mls-ink);
  max-width:none;
  margin-top:36px;
  margin-bottom:36px;
  padding:32px 0;
  border-top:2px solid var(--mls-ink);
  border-bottom:2px solid var(--mls-ink);
}
.single-lesson .elementor-widget-theme-post-content .margin-accent{
  color:var(--mls-accent);
}

/* --- Tables (match the Margin table; removes theme cell borders) -------- */
.single-lesson .elementor-widget-theme-post-content .wp-block-table{
  max-width:680px;
  font-family:var(--mls-sans);
}
.single-lesson .elementor-widget-theme-post-content .wp-block-table table{
  width:100%;
  border-collapse:collapse;
  border:0;
  font-size:16px;
}
.single-lesson .elementor-widget-theme-post-content .wp-block-table th,
.single-lesson .elementor-widget-theme-post-content .wp-block-table td{
  border:0;                         /* kill the theme's full cell borders */
  border-bottom:1px solid var(--mls-rule);
  padding:12px 0;
  text-align:left;
  background:transparent;
}
.single-lesson .elementor-widget-theme-post-content .wp-block-table thead th{
  border-bottom:2px solid var(--mls-ink);
  font-weight:700;
}
/* First two columns read as data (mono), last column as sans label. */
.single-lesson .elementor-widget-theme-post-content .wp-block-table tbody td:nth-child(1),
.single-lesson .elementor-widget-theme-post-content .wp-block-table tbody td:nth-child(2){
  font-family:var(--mls-mono);
  font-size:15px;
}
.single-lesson .elementor-widget-theme-post-content .wp-block-table tbody td:nth-child(3){
  color:var(--mls-muted);
}

/* --- Lists in prose ----------------------------------------------------- */
.single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-list{
  font-family:var(--mls-serif);
  font-size:21px;
  line-height:1.62;
  padding-left:1.1em;
}

/* --- Mono eyebrow helper (optional) ------------------------------------- */
.single-lesson .elementor-widget-theme-post-content .margin-eyebrow{
  font-family:var(--mls-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mls-rust);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:782px){
  .single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-heading{
    margin-top:56px;
  }
  .single-lesson .elementor-widget-theme-post-content h2.wp-block-heading{font-size:28px;}
  .single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > p,
  .single-lesson .elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-list{
    font-size:19px;
  }
}


/* v1.0.1: specific post-content Gutenberg rhythm fixes.
   Keep plugin component interiors untouched. */
body.single-lesson .elementor-widget-theme-post-content :is(h2.wp-block-heading,h2.margin-section-heading) {
  font-family:var(--mls-sans)!important;
  font-weight:800;
  font-size:clamp(26px,2.5vw,34px);
  line-height:1.15;
  letter-spacing:-.03em;
  margin-block:58px 20px;
  padding:0;
}
body.single-lesson .elementor-widget-theme-post-content .elementor-widget-container > :is(p,.wp-block-paragraph) {
  font-family:var(--mls-serif)!important;
  font-size:clamp(17px,1.6vw,21px);
  line-height:1.62;
  letter-spacing:normal;
  margin-block:0 22px;
  max-width:680px;
}
body.single-lesson .elementor-widget-theme-post-content :is(figure.wp-block-table,.wp-block-table) {
  max-width:680px;
  width:100%;
  margin-block:26px 38px;
  overflow-x:auto;
}
body.single-lesson .elementor-widget-theme-post-content .wp-block-table table {
  border:0!important;
  border-collapse:collapse;
  width:100%;
}
body.single-lesson .elementor-widget-theme-post-content .wp-block-table :is(th,td) {
  border:0!important;
  border-bottom:1px solid var(--mls-rule)!important;
  background:transparent;
  text-align:left;
  padding:12px 9px;
}
body.single-lesson .elementor-widget-theme-post-content .wp-block-table thead th {
  border-bottom:2px solid var(--mls-ink)!important;
}
body.single-lesson .elementor-widget-theme-post-content .wp-block-heading.margin-formula {
  font-size:clamp(32px,4.8vw,64px);
  margin-block:32px;
}
@media(max-width:767px){
 body.single-lesson .elementor-widget-theme-post-content :is(h2.wp-block-heading,h2.margin-section-heading){margin-block:42px 16px;}
 body.single-lesson .elementor-widget-theme-post-content .elementor-widget-container > :is(p,.wp-block-paragraph){font-size:18px;line-height:1.55;}
}