/* ==========================================================================
   The Makeshift Wizard — static rebuild (v2, faithful Divi mirror)
   Every value below was measured off the LIVE themakeshiftwizard.com
   (Divi 4.27 + Bloom optin_1) with a headless browser at 1440x900:
     - body type:      Open Sans 14px / 1.7em / #666 on #fff
     - H1:             30px / 1em / #333, padding-bottom 10px (bold via <strong>)
     - sections:       padding 4% 0  (54px 0 at >=1350px, 50px 0 at <=980px)
     - rows:           width 80%, max-width 1080px, padding 2% 0 (27px / 30px)
     - hero slide:     bg #7EBEC5, padding 0 6%; description padding 16% 8%
     - Bloom card:     100% wide + 6px #b2b2b2 border (content-box, like Bloom),
                       header #363636 (img left 40% / text beside), body #424242,
                       input 68% + button 32% inline, #e57c58 button
     - series columns: 47.25% + 5.5% gutter; titles #fff; flat full-width covers
   Parallax: hero = Divi "CSS parallax" (viewport-fixed bg) done with REAL
   background-attachment:fixed so the compositor drives it (zero JS, zero scroll
   jitter); on touch/coarse-pointer devices (where fixed attachment is broken on
   iOS Safari) the hero is a static, non-parallax background instead.
   Series = Divi TRUE parallax (bg scrolls at 0.7x), driven by script.js
   transforms (fixed attachment cannot express a 0.7x scroll speed).
   2026-07-13 jitter fix. ==================================================== */

/* ---- Base (Divi theme defaults) ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; }   /* was smooth: smooth-eased wheel/keyboard return-to-top over ~0.5-0.9s
                                     read as "won't scroll all the way up". Instant is right here (the only
                                     in-page anchor is the skip link). 2026-07-12 scroll fix */

body {
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  line-height: 1.7em;
  font-weight: 500;               /* Divi default; falls back to 400 like live */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  margin: 0;
  color: #333;
  padding-bottom: 10px;
  line-height: 1em;
  font-weight: 500;
}
h1 { font-size: 30px; }
h2 { font-size: 26px; }
strong { font-weight: 700; }

p { margin: 0; padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }

img { max-width: 100%; height: auto; border: 0; }

a { color: #2ea3f2; text-decoration: none; }

.ta-center { text-align: center; }

/* Skip link (a11y; invisible unless keyboard-focused — live has no header) */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: #e57c58;
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Visually-hidden labels */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: off-screen, must stay empty (never display:none) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #e57c58;
  outline-offset: 2px;
}

/* ---- Sections & rows (Divi grid) ----------------------------------------- */
.tmw-section {
  position: relative;
  background-color: #fff;
  padding: 4% 0;                 /* Divi default desktop */
}
.row {
  width: 80%;
  max-width: 1080px;
  margin: auto;
  position: relative;            /* keeps row content above the parallax layer */
  padding: 2% 0;
}
.row::after {                    /* clearfix for floated columns */
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
@media only screen and (min-width: 1350px) {
  .tmw-section { padding: 54px 0; }
  .row { padding: 27px 0; }
}
@media only screen and (max-width: 980px) {
  .tmw-section { padding: 50px 0; }
  .row { padding: 30px 0; }
}

/* ---- Parallax plumbing (mirrors .et_parallax_bg_wrap / .et_parallax_bg) --- */
.parallax-wrap {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}
.parallax-bg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;   /* Divi: background-position: top */
  background-size: cover;
  display: block;
}
.series-bg {
  background-image: url('https://themakeshiftwizard.com/wp-content/uploads/2025/01/Hexweaver-Book-One-notext-scaled.jpg');
  will-change: transform;            /* only the JS-driven series layer gets a
                                        compositor hint; will-change on the hero
                                        would BREAK background-attachment:fixed */
}

/* HERO — compositor-driven parallax (2026-07-13 jitter fix).
   The old script.js transform emulation lagged the compositor scroll by one
   frame on a fast scroll (visible stutter + dark art edge peeking through the
   overscan). Real background-attachment:fixed hands the effect to the
   compositor: zero JS, zero jitter, and the paint window (the hero section)
   is always fully covered by the viewport-sized art, so no fallback color or
   image edge can ever show. Framing is identical to the old emulation at rest:
   cover + center top against the viewport = the same width-bound crop.
   NOTE: no transform / will-change may ever touch .hero-bg or an ancestor,
   or Chrome silently demotes the fixed attachment to scroll. */
.hero-bg {
  background-image: url('https://themakeshiftwizard.com/wp-content/uploads/2025/01/Death-Magic_notext-scaled.jpg');
  background-attachment: fixed;
}

/* Touch / coarse-pointer devices: background-attachment:fixed is broken or
   janky on iOS Safari (and costly on mobile GPUs) → serve a static,
   non-parallax hero there. Smooth beats parallax on mobile. */
@media (hover: none), (pointer: coarse) {
  .hero-bg { background-attachment: scroll; }
}

/* ==========================================================================
   SECTION 0 — HERO: fullwidth slider, single slide
   ========================================================================== */
.hero-section { padding: 0; background: #fff; }

.slider {
  position: relative;
  overflow: hidden;
  /* Divi's et_animated fade-in of the slider module on load */
  opacity: 0;
  animation: tmwFade 1s ease-in-out 0.1s both;
}
@keyframes tmwFade { to { opacity: 1; } }

.slide {
  position: relative;
  width: 100%;
  padding: 0 6%;                 /* measured on live: 86.4px @1440 */
  text-align: center;
  background-color: #162837;     /* was #7EBEC5 teal — set to dark navy sampled from the hero art's top edge
                                    so any one-frame parallax-lag flash on a hard scroll blends with the art
                                    instead of flashing teal (the reported "blue bar"). 2026-07-12 scroll fix */
  background-position: 50%;
  background-size: cover;
}

/* Divi vertical-centering table (container height is content-driven) */
.slide-container {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.slide-inner {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}
.slide-description {
  padding: 16% 8%;               /* Divi slide description padding */
  word-wrap: break-word;
  text-align: center;
  color: #fff;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);   /* et_pb_bg_layout_dark */
  /* Divi fadeBottom entrance (0.7s, 0.9s delay) */
  animation: tmwFadeBottom 0.7s ease-in-out 0.9s both;
}
@keyframes tmwFadeBottom {
  0%  { opacity: 0; transform: translateY(10%); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ---- Bloom inline opt-in card -------------------------------------------- */
.bloom-optin {                    /* .et_bloom_inline_form */
  clear: both;
  margin: 30px 0;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}
.bloom-card {                     /* .et_bloom_form_container (border_solid) */
  width: 100%;
  box-sizing: content-box;        /* Bloom quirk: 6px border sits OUTSIDE the
                                     100% width, exactly like the live card */
  border: 6px solid #b2b2b2;
  background-color: #dadfe4;
  text-align: center;
}
.bloom-card * { box-sizing: border-box; }

.bloom-header {                   /* .et_bloom_form_header split, #363636 */
  background-color: #363636;
  padding: 15px;
  overflow: hidden;
  position: relative;
}
.bloom-header img {               /* split layout: image floated left, max 40% */
  float: left;
  max-width: 40%;
  width: auto;
  height: auto;
  padding: 15px;
  display: block;
  margin: auto;
}
.bloom-text {                     /* .et_bloom_form_text — table-cell beside img */
  display: table-cell;
  max-width: 100%;
  padding: 15px;
}
.bloom-text h2 {                  /* header_text_light */
  font-size: 24px;
  padding-bottom: 0;
  font-weight: 600;               /* renders as 700 (only 400/700 loaded — same as live) */
  line-height: 1.1em;
  color: #fff;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
}
.bloom-text p {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6em;
  font-size: 18px;                /* live per-page rule: .et_bloom_optin_1 p { font-size: 18px!important } */
  margin-top: 0.5em;
  padding-bottom: 0;              /* Bloom's own container reset zeroes p padding */
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
}
.bloom-card strong {              /* Bloom's reset neutralizes <strong> inside the card
                                     (live computed weight = 400) */
  font-weight: normal;
}

.bloom-content {                  /* .et_bloom_form_content, #424242 */
  background-color: #424242;
  padding: 40px 30px;
  position: relative;
}
.bloom-content::after { content: ""; display: block; clear: both; }

.input-wrap {                     /* p.et_bloom_popup_input — 1-field inline layout */
  float: left;
  width: 68%;
  padding: 0 20px 0 0;
  margin: 0;
}
.bloom-content input[type="email"] {
  background-color: #fff;
  width: 100%;
  display: block;
  border: none;
  border-radius: 3px;             /* et_bloom_rounded */
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;                /* 16px (not the live 14px) to prevent iOS Safari's zoom-on-focus that
                                     jars mobile signups; 2px is imperceptible on desktop. 2026-07-12 mobile fix */
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}
.bloom-content input[type="email"]::placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; }
.bloom-content button {
  width: 32%;
  background-color: #e57c58;      /* live optin_1 accent */
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  border-radius: 3px;
  padding: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  cursor: pointer;
  vertical-align: top;
}

/* ==========================================================================
   SECTION 1 — UNIVERSE INTRO (white; H1 centered, paragraphs left-aligned)
   ========================================================================== */
/* Everything is inherited Divi defaults — nothing extra on purpose. */

/* ==========================================================================
   SECTION 2 — SERIES / COVERS (true-parallax bg, two 1/2 columns)
   ========================================================================== */
.series .col {
  float: left;
  width: 47.25%;                 /* Divi gutters3 half column */
  margin-right: 5.5%;
  min-height: 1px;
  position: relative;
  z-index: 9;                    /* Divi lifts parallax-section columns */
}
.series .col.last { margin-right: 0; }

.series .col-title {
  color: #fff;                   /* live forces #FFFFFF!important on these */
  text-align: center;
  margin: 0 0 5.82%;             /* Divi module bottom margin in a 1/2 column */
}
.series .cover { line-height: 0; }
.series .cover img { width: 100%; height: auto; display: inline-block; }

@media only screen and (max-width: 980px) {
  .series .col { float: none; width: 100%; margin-right: 0; margin-bottom: 30px; }
  .series .col.last { margin-bottom: 0; }
}

/* ---- Bloom responsive (mirrors bloom/css/style.css breakpoints) ----------- */
@media only screen and (max-width: 767px) {
  .bloom-header img {
    float: none;
    max-width: 100%;
    margin: auto;
  }
  .bloom-text { display: block; text-align: center; }
  /* p.input-wrap (not .input-wrap): must out-rank the base p:last-of-type reset */
  p.input-wrap { width: 100%; padding-right: 0; padding-bottom: 10px; }
  .bloom-content button { width: 100%; }
}

/* ==========================================================================
   Footer (added 2026-07-13; the live Divi footer was disabled) — minimal, with
   the Privacy Policy link Micah requested (mirrors MKB's footer link).
   ========================================================================== */
.tmw-footer {
  background: #162837;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 30px 20px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}
.tmw-footer nav a {
  color: #ffffff;
  text-decoration: underline;
  display: inline-block;
  padding: 12px 14px;              /* comfortable tap target */
}
.tmw-footer-copy {
  margin: 6px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Success banner (injected by script.js after the ?subscribed=1 redirect)
   ========================================================================== */
.tmw-banner {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 9999;
  padding: 16px 20px;
  text-align: center;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #2e7d54;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slider, .slide-description { animation: none; opacity: 1; }
  .hero-bg { background-attachment: scroll; }   /* no viewport-glued motion */
}