/*
 * Legacy compatibility layer for MyWifeQuitHerJobV4.
 * Covers class names that still exist inside old post_content and
 * ported V3 page templates, so that content keeps rendering after
 * the V3 stylesheet (and SiteOrigin) are gone.
 */

/* Bootstrap-era image helpers used across old content.
   No `display:block` here on purpose. Bootstrap's own rule sets it, but
   Bootstrap is not loaded on these pages, and forcing block left every
   logo hugging the left edge of its `text-align:center` parent instead of
   centring. Production leaves them inline; match that. */
.img-responsive,
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Float-free stand-in for the Bootstrap grid. The legacy templates used to
   pull /scripts/bootstrap.css inline, but that also reset body font-family
   and h1 sizing, so those pages rendered smaller and off-brand. Only
   full-width-no-header-no-title-bootstrap.php still loads real Bootstrap,
   because arbitrary page content depends on it there. */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}
.row > [class*="col-"] {
  padding-inline: 12px;
  width: 100%;
  min-height: 1px;
}
/* These must be at least as specific as `.row > [class*="col-"]` above,
   or that 100% width wins and every column stacks full width. */
@media (min-width: 576px) {
  .row > .col-sm-2 { width: 16.6667%; }
  .row > .col-sm-6 { width: 50%; }
}
@media (min-width: 900px) {
  .row > .col-md-3 { width: 25%; }
  .row > .col-md-4 { width: 33.3333%; }
  .row > .col-md-6 { width: 50%; }
  .row > .col-md-8 { width: 66.6667%; }
  .row > .col-md-12 { width: 100%; }
  .row > .order-md-1 { order: 1; }
  .row > .order-md-12 { order: 12; }
}
@media (min-width: 1024px) {
  .row > .col-lg-6 { width: 50%; }
  .row > .col-lg-12 { width: 100%; }
}
.row > .col-6 { width: 50%; }
.row > .col-4 { width: 33.3333%; }
.order-1 { order: 1; }
.order-12 { order: 12; }

/* Below 900px every column is full width and the row stacks in source
   order. These legacy two-column blocks alternate on desktop (text|image,
   image|text, text|image) for a zigzag, but stacked that reads
   text, image, image, text, text, image — the images clump in the middle
   and two text blocks run together. Leading each stacked row with its
   image restores image, text, image, text all the way down.
   Only columns that actually contain an image are promoted, so rows of
   plain text are untouched. */
@media (max-width: 899px) {
  .row { flex-direction: column; }
  .row > [class*="col-"]:has(img) { order: -1; }
}
.row-eq-height { align-items: stretch; }
.img-responsive, .img-fluid { max-width: 100%; height: auto; }
.container,
.container-fluid {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
/* `.video-responsive` is V3's own 16:9 wrapper, used by 44 published
   posts and pages. It was never ported, so those embeds kept the
   iframe's 1920x1080 attributes: the width scaled down but the height
   stayed at 1080 and the video spilled out of its column. */
.embed-responsive,
.video-responsive {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.video-responsive iframe,
.video-responsive .video-js {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Decorative rule used under old section headings */
.linedecoration {
  width: 64px;
  border-top: 3px solid #0d6db8;
  margin-block: 12px 24px;
}

/* Old green CTA button used in posts and landing pages
   (base look now comes from .workshopbutton rules in style.css;
   this preserves the legacy sizing contexts) */
a.workshopbutton {
  color: #fff !important;
  text-decoration: none;
}
/* V3 rendered .workshopbutton as a wide, centred block CTA (70% wide,
   20px type, 20px padding). V4's shared button styling turned it into a
   small inline-block pinned to the left of the column, which is why these
   CTAs stopped matching production. */
.workshopbutton {
  display: block;
  width: 70%;
  max-width: 100%;
  margin-inline: auto;
  padding: 20px;
  font-size: var(--text-lg);
  font-weight: 700;
  text-align: center;
  text-transform: none;
}
@media (max-width: 640px) {
  .workshopbutton { width: 100%; padding: 16px; }
}

/* Legacy opt-in containers referenced by emailformsajax.js */
#sidebar_signup, .sidebar_signup,
#post_signup_bottom, #post_signup,
#frontpageform, #sidebarform, #bottomform, #audiobottomform,
#advlandingform, #fblandingform, #landingpageform,
#dripourstory, #dripstep1 {
  font-family: var(--font-sans, system-ui, sans-serif);
}
/* NEVER put a background/panel behind an opt-in form inside the content.
   These flow with the article. Only the sidebar signup is a panel. */
#bottomform form, #audiobottomform form,
#landingpageform form, #dripourstory form, #dripstep1 form {
  margin-block: 16px;
}
#bottomform input[type="email"], #audiobottomform input[type="email"],
#landingpageform input[type="email"], #dripourstory input[type="email"],
#dripstep1 input[type="email"] {
  margin-block: 8px;
}

/* Old lazy-image pattern: JS swaps data-src -> src; until then keep
   the 1px placeholder from stretching */
img.lazy[src^="data:"] { background: #f0efec; }

/* Misc legacy layout helpers seen in ported templates */
.aligncenter { display: block; margin-inline: auto; }
.text-center { text-align: center; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Book landing page splash sections (ported from V3 style.css —
   book-front-page.php inlines the #booksplash2 hero from the old
   headerBookFrontPage) */
#booksplash {
  background: url('../img/legacy/book/bookfrontbackground.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  background-position: 60% 50% !important;
}
#booksplash2 {
  background: url('../img/legacy/book/bookfrontsplash2.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  background-position: 60% 50% !important;
}
.splashshell { padding-top: 80px; padding-bottom: 40px; }
.splashoverlay { background: rgba(0, 0, 0, 0.5); }
.splashtext,
.booksplashtext {
  text-shadow: 2px 2px black;
  max-width: 450px;
  margin: 1em 0;
  text-align: left;
  color: white;
  font-weight: 400;
  font-size: 20px;
}
#popularposts {
  margin-bottom: 80px;
  background: url('../img/cnbc-band.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  background-position: 60% 50% !important;
}
@media (max-width: 576px) {
  .splashshell { padding-top: 20px; }
}

/* -------------------------------------------------------------
   Overflow guards for legacy post_content
   Old opt-in markup and pasted images carry inline pixel widths
   (style="max-width:1000px", width:500px on Drip/ConvertKit
   inputs) which push the page wider than a phone viewport.
   Inline styles only lose to !important, hence the flags.
   ------------------------------------------------------------- */
.main-content img,
.entry-content img { height: auto; }
#leader_proof img { max-width: 1200px; }

/* The clamp has to be !important to beat an inline style, but forcing
   `max-width:100%` at every size also overrode inline values SMALLER than
   the container: the book page's retailer logos carry max-width:150px and
   blew up to the full 1200px column. Only clamp where it is actually
   needed, i.e. once the viewport is narrower than the pixel widths this
   legacy content hardcodes. Above that, inline widths are honoured. */
@media (max-width: 900px) {
  .main-content img,
  .entry-content img,
  .img-responsive,
  .img-fluid { max-width: 100% !important; }
}

/* An image sitting DIRECTLY in a grid column is that column's content and
   has to fit it, whatever pixel width the markup asks for. The book hero
   requests 350px inside a 297px col-md-3 and ran under the headline beside
   it. Deliberately direct-child only: the retailer logos are nested inside
   their own inline-styled boxes and keep their authored size. */
.row > [class*="col-"] > img,
.row > [class*="col-"] > a > img,
.row > [class*="col-"] > div > img,
.row > [class*="col-"] > div > a > img { max-width: 100% !important; }

.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="submit"],
.main-content button,
.main-content select,
.main-content textarea { max-width: 100% !important; box-sizing: border-box; }

/* The Bootstrap shim's .row carries -12px side margins, so a .row that
   sits directly in a padding-less container hangs 12px past the viewport
   on phones. Give the containers matching padding.
   On desktop use 80px instead, which lands the inner content at 1040px
   inside the 1200px container: the same column width as --measure, so
   legacy container pages line up with everything else. */
.container, .container-fluid { padding-inline: 12px; }
@media (min-width: 1024px) {
  /* Only where the container IS the page's column, i.e. the lander
     templates whose .entry-content is exempt from --measure. Applying it
     everywhere double-inset the pages that already get their 80px from
     .entry-content, pushing container sections out of line with the prose
     around them. */
  .pagebuilder .container,
  .pagebuilder .container-fluid { padding-inline: 80px; }
}

/* A handful of 2015-2016 workshop pages hardcode pixel widths in
   post_content (e.g. a 450px date block). Clip rather than scroll.
   `clip` instead of `hidden` so it does not create a scroll container
   and break the sticky sidebar. */
.main-content { overflow-x: clip; }

/* -------------------------------------------------------------
   Workshop landers (SiteOrigin pages using the Workshop template)
   Production serves these rules from a plugin's inline CSS that
   staging does not have, so the calendar tile and the countdown
   collapsed and overlapped the copy next to them. Values copied
   from the live mywifequitherjob.com/ai-signup/ computed styles.
   ------------------------------------------------------------- */
.entry-content .date {
  width: 130px;
  /* Production pins height:140px, but 80px day + the AUG block is taller
     than that, so the day number got clipped by the tile's top edge.
     Let it size to its content and clip nothing. */
  height: auto;
  overflow: hidden;
  background: linear-gradient(to bottom, #fcfcfc 0%, #dad8d8 100%);
  border: 1px solid #d2d2d2;
  border-radius: 10px;
  box-shadow: 0 0 15px rgb(0 0 0 / 0.1);
}
.entry-content .date p {
  margin: 0;
  padding-top: 8px;
  line-height: 1;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 80px;
  text-align: center;
  color: #9e9e9e;
}
/* The empty <p> the shortcode leaves after the tile would add a stray gap. */
.entry-content .date p:empty { display: none; }
.entry-content .date p span {
  display: block;
  background: linear-gradient(to bottom, #d10000 0%, #7a0909 100%);
  border-top: 3px solid #a13838;
  border-radius: 0 0 10px 10px;
  padding: 6px 0;
  font-size: 45px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

ul.countdown { list-style: none; margin: 0; padding: 0; display: block; text-align: center; }
ul.countdown li { display: inline-block; border: none; }
ul.countdown li span {
  display: inline-block;
  padding: 10px;
  background-color: #333330;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
}
ul.countdown li.seperator { font-size: 40px; line-height: 40px; vertical-align: top; }
ul.countdown li p { margin: 5px 0 0; color: #575b61; font-size: 14px; line-height: 1; }
/* The timer's wrapper carries an inline `margin-bottom:-50px`, tuned years
   ago against a taller block. It now pulls the next heading up over the
   digits, so cancel it and space the block normally. */
.entry-content div:has(> ul.countdown) { margin-bottom: var(--s-5) !important; }

/* The Drip signup markup puts the disclaimer <span> straight after the
   submit button, so it wrapped into the sliver of space beside a 90%-wide
   button instead of sitting under it. */
.textwidget form input[type="submit"] { display: block; margin-inline: auto; }

/* These landers set h5 inline with a font-size but no margin, so the
   bullet list underneath started flush against the heading. */
.entry-content .textwidget h5 { margin-bottom: var(--s-4); }

/* The 2015-2017 workshop pages lay out a two-column panel with a fixed
   pixel height, sized back when the countdown showed small positive
   numbers. Those dates have passed, so the timer now renders wide
   negative values, wraps onto a second row, and the email field and Sign
   Up button spill out of the panel onto the band below. Treat the
   authored height as a floor, not a ceiling.

   Two variants exist: some pages carry #leftblock/#rightblock IDs with the
   heights in an inline <style>, others put the same rules straight on the
   element's style attribute, so both shapes are matched here.
   !important because inline styles outrank this file. */
#leftblock,
#rightblock,
.entry-content > div[style*="float:left"][style*="height:"] {
  height: auto !important;
  min-height: 650px;
  padding-bottom: 20px;
}

/* V3's label span inside those lesson buttons. Ported so the CTA reads as
   a primary action rather than 13px caps, but at the V4 type scale instead
   of V3's raw 28px. */
.lessonbutton { font-size: var(--text-lg); max-width: 100%; }

/* -------------------------------------------------------------
   Per-page layout exceptions
   ------------------------------------------------------------- */
/* Pages whose content is authored as its own edge-to-edge design wrap it
   in a `.lp` block. Let that block span the viewport instead of sitting
   in the template's centred column. */
.entry-content:has(> .lp) { max-width: none; }
/* padding-block too: these designs start with their own hero, so the
   template's standard top padding read as a gap under the header. */
#content.wrap:has(.lp) { max-width: none; padding: 0; }

/* The old workshop pages float a fixed 450px + 440px pair inside a much
   wider column. Floats ignore `margin-inline: auto`, so the pair sat hard
   left with dead space beside it. Offset the first one to centre the set. */
#leftblock { margin-left: max(0px, calc((100% - 890px) / 2)); }

/* On phones the calendar tile floats left while the date lines under it
   stay left-aligned, so the whole group sits off-centre above the photo.
   Stack and centre it. Keyed on the tile itself, so it covers every
   signup/workshop page that uses this block. */
@media (max-width: 767px) {
  .entry-content div:has(> .date) { text-align: center; }
  /* !important: the tile carries an inline `float:left;margin:...` */
  .entry-content .date {
    float: none !important;
    margin: 20px auto 0 !important;
  }
}