/* =====================================================================
   Metaphors in My Attic — homepage kit  v2
   Scoped to the homepage (body.page-id-5). Deactivate plugin to revert.
   ===================================================================== */

body.page-id-5 {
  --ink:    #1b252f;
  --ink-2:  #2b3a49;
  --gold:   #c5a059;
  --gold-d: #a8843b;
  --cream:  #fbf8f2;
  --line:   #e8e3d9;
  --text:   #414a54;
  --muted:  #6b7681;
  --serif:  Georgia, "Iowan Old Style", "Times New Roman", serif;
  background: #fff;
}

body.page-id-5 .mom-page   { color: var(--text); padding-bottom: 120px; }
body.page-id-5 .mom-page p { font-size: 16px; line-height: 1.75; }

/* Anchor targets clear the sticky jump-nav */
body.page-id-5 [id^="mima-"] { scroll-margin-top: 86px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Banner ---------------------------------------------------
   v2: focal point raised so the sloping roof and ladder read as an attic
   again, instead of centring on the desk.                              */
body.page-id-5 .bottom-header-wrapper { position: relative; max-height: 330px; overflow: hidden; }
body.page-id-5 .bottom-header-wrapper img {
  width: 100% !important; height: 330px !important;
  object-fit: cover; object-position: center 30%; display: block;
}
body.page-id-5 .bottom-header-wrapper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,37,47,0) 55%, rgba(27,37,47,.42) 100%);
}

/* ---------- Sticky section nav (added by homepage.js) --------------- */
/* A floating centred pill rather than a full-width band: the content column is
   narrower than the viewport, so a bar-shaped nav let the page scroll past on
   either side of it and read as broken. */
body.page-id-5 .mima-jumpnav {
  position: sticky; top: 12px; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center;
  width: fit-content; max-width: 100%;
  margin: 0 auto 26px; padding: 7px 8px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(27,37,47,.12);
}
body.admin-bar.page-id-5 .mima-jumpnav { top: 44px; }
body.page-id-5 .mima-jumpnav a {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: #55606b !important; text-decoration: none !important;
  padding: 7px 13px; border-radius: 7px; line-height: 1;
}
body.page-id-5 .mima-jumpnav a:hover,
body.page-id-5 .mima-jumpnav a:focus-visible { background: var(--cream); color: var(--ink) !important; }
body.page-id-5 .mima-jumpnav a.mima-cta {
  background: var(--ink); color: #fff !important; padding: 8px 16px;
}
body.page-id-5 .mima-jumpnav a.mima-cta:hover { background: var(--ink-2); color: #fff !important; }
@media (max-width: 640px) {
  body.page-id-5 .mima-jumpnav { gap: 2px; padding: 7px 8px; border-radius: 16px; width: auto; }
  body.page-id-5 .mima-jumpnav a { font-size: 12px; padding: 6px 9px; }
}

/* ---------- Page title ---------------------------------------------- */
body.page-id-5 .mom-page > h1:first-of-type,
body.page-id-5 .entry-title {
  font-family: var(--serif); color: var(--ink); letter-spacing: -.2px;
}

/* ---------- Offer band ----------------------------------------------
   v2: the small gold eyebrow repeated the page title word for word,
   so it is hidden rather than deleted (reversible).                    */
body.page-id-5 .mom-header {
  background: linear-gradient(160deg, #1b252f 0%, #26333f 100%) !important;
  border-radius: 18px 18px 0 0; padding: 46px 46px 42px !important;
  max-width: 820px; margin: 22px auto 0 !important; text-align: center;
  box-shadow: 0 24px 60px rgba(27,37,47,.20);
}
body.page-id-5 .mom-header h2:not(.mom-offer-title) { display: none !important; }
/* .mom-offer-title lets the offer headline become an H2 (one H1 per page)
   without losing its appearance — see the content pack. */
body.page-id-5 .mom-header h1,
body.page-id-5 .mom-header .mom-offer-title {
  color: #fff !important; font-size: 34px !important; line-height: 1.26 !important;
  font-weight: 700; margin: 0 !important; letter-spacing: -.3px;
}
body.page-id-5 .mom-header h1 strong,
body.page-id-5 .mom-header .mom-offer-title strong { color: var(--gold) !important; }

/* Copy layer: supporting lines in the offer panel */
body.page-id-5 .mima-sub {
  color: rgba(255,255,255,.82) !important; font-size: 16px !important;
  line-height: 1.6 !important; max-width: 640px; margin: 16px auto 0 !important;
}
body.page-id-5 .mima-price {
  color: #fff !important; font-size: 15px !important; letter-spacing: .02em;
  margin: 18px 0 0 !important;
}
body.page-id-5 .mima-price strong { color: var(--gold) !important; font-size: 21px; }

/* ---------- Purchase card (tightened) -------------------------------- */
body.page-id-5 .mom-purchase-box {
  background: #fff !important; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 18px 18px; max-width: 820px; margin: 0 auto !important;
  padding: 24px 40px 20px !important; box-shadow: 0 18px 40px rgba(27,37,47,.08);
}
body.page-id-5 .mom-purchase-box form { text-align: center; margin: 0; }
body.page-id-5 .mom-purchase-box .mom-warning { margin-bottom: 4px !important; }

/* Copy layer: audience line + payment note */
body.page-id-5 .mima-audience {
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; margin: 16px auto 0; max-width: 700px;
  font-size: 14.5px !important; line-height: 1.65 !important; color: #55606b !important;
  text-align: left;
}
body.page-id-5 .mima-audience strong { color: var(--ink); }
body.page-id-5 .mima-paynote {
  margin: 8px 0 0 !important; font-size: 12.5px !important; color: var(--muted) !important;
}
body.page-id-5 .mima-quiet-head { font-size: 27px !important; }
body.page-id-5 .mima-feedback-note {
  text-align: center; color: var(--muted) !important;
  font-size: 15px !important; margin: 6px 0 18px !important;
}

/* ---------- Hardware note -------------------------------------------- */
body.page-id-5 .mom-warning {
  background: var(--cream) !important; border: 1px solid var(--line) !important;
  border-left: 4px solid var(--gold) !important; border-radius: 10px;
  padding: 16px 20px !important; color: #5f574a !important;
  font-size: 14px; line-height: 1.6; max-width: 820px; margin: 18px auto !important;
}
body.page-id-5 .mom-warning strong { color: var(--gold-d) !important; }

/* ---------- Subscriber pill ------------------------------------------ */
body.page-id-5 .mom-stats-bar {
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 24px !important; max-width: 620px; margin: 26px auto !important;
  text-align: center; font-weight: 600; font-size: 14.5px; color: var(--ink) !important;
}

/* ---------- Login ----------------------------------------------------- */
body.page-id-5 .mom-login-section {
  background: #f5f7f8; border: 1px solid #e6eaed; border-radius: 14px;
  max-width: 820px; margin: 26px auto !important; padding: 26px !important; text-align: center;
}
body.page-id-5 .mom-login-section h2 { font-size: 19px !important; color: var(--ink) !important; margin: 0 0 14px !important; }
body.page-id-5 a.mom-login-link {
  display: inline-block; background: var(--ink); color: #fff !important;
  padding: 12px 30px; border-radius: 8px; font-weight: 600;
  text-decoration: none !important; font-size: 15px;
}
body.page-id-5 a.mom-login-link:hover { background: var(--ink-2); }

/* ---------- Body content --------------------------------------------- */
/* .mom-title keeps the look when these become H2s in the baked-in content. */
body.page-id-5 .mom-content-padding h1,
body.page-id-5 .mom-content-padding .mom-title {
  font-family: var(--serif); color: var(--ink) !important;
  font-size: 36px !important; line-height: 1.24 !important; letter-spacing: -.3px;
}
body.page-id-5 .mom-content-padding h3 { color: var(--gold-d) !important; }
body.page-id-5 .mom-content-padding a { color: var(--gold-d); }

/* ---------- Testimonials --------------------------------------------- */
body.page-id-5 .mom-testimonial {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: 12px;
  padding: 26px 30px 24px !important; box-shadow: 0 8px 22px rgba(27,37,47,.05);
  margin: 18px auto !important; max-width: 820px;
}
body.page-id-5 .mom-testimonial::before {
  content: "\201C"; position: absolute; top: 2px; right: 18px;
  font-family: var(--serif); font-size: 68px; line-height: 1;
  color: var(--gold); opacity: .18;
}

/* ---------- Curriculum (collapsible via homepage.js) ------------------ */
body.page-id-5 .mom-section-title {
  color: var(--ink) !important; font-size: 22px !important; font-family: var(--serif);
  border-bottom: 2px solid var(--line); padding-bottom: 10px !important;
  margin-top: 34px !important;
}
body.page-id-5 .mom-section-title.mima-toggle {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
body.page-id-5 .mom-section-title.mima-toggle:hover { color: var(--gold-d) !important; }
body.page-id-5 .mima-chevron {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  position: relative; transition: transform .22s ease;
}
body.page-id-5 .mima-chevron::before,
body.page-id-5 .mima-chevron::after {
  content: ""; position: absolute; background: var(--gold-d); border-radius: 2px;
}
body.page-id-5 .mima-chevron::before { top: 11px; left: 6px; width: 10px; height: 2px; }
body.page-id-5 .mima-chevron::after  { top: 6px; left: 10px; width: 2px; height: 12px; transition: opacity .2s ease; }
body.page-id-5 .mima-open .mima-chevron::after { opacity: 0; }
body.page-id-5 .mima-panel { overflow: hidden; }
body.page-id-5 .mima-panel[hidden] { display: none; }
body.page-id-5 .mom-curriculum-list { font-size: 15px; line-height: 1.8; }
body.page-id-5 .mom-update-badge {
  background: var(--gold); color: #fff !important; border-radius: 4px;
  padding: 2px 8px !important; font-size: 11px !important;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
body.page-id-5 .mima-expand-all {
  display: inline-block; margin: 6px 0 0; background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: #55606b; cursor: pointer;
}
body.page-id-5 .mima-expand-all:hover { background: var(--cream); color: var(--ink); }

/* ---------- Sidebar --------------------------------------------------- */
body.page-id-5 #secondary { font-size: 13.5px; }
body.page-id-5 #secondary .widget_nav_menu ul { max-height: 430px; overflow-y: auto; padding-right: 8px; }
body.page-id-5 #secondary .widget_nav_menu a { color: #59636e !important; }
body.page-id-5 #secondary .widget_nav_menu a:hover { color: var(--gold-d) !important; }
/* Promo logos (Business & Money, HI3, Metaphors Mastery, Time Portal) removed
   from the homepage sidebar — they competed with the offer and pushed the
   members list down. Hidden rather than deleted, so it is reversible; to remove
   them site-wide instead, delete the widgets under Appearance -> Widgets. */
body.page-id-5 #secondary .widget_media_image { display: none !important; }

/* Members-list filter box (added by homepage.js) */
body.page-id-5 .mima-filter {
  width: 100%; box-sizing: border-box; margin: 0 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--ink); background: #fff;
}
body.page-id-5 .mima-filter:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
body.page-id-5 .mima-nores { color: var(--muted); font-size: 12.5px; padding: 6px 0; display: none; }

/* ---------- Sticky purchase bar --------------------------------------- */
body.page-id-5 .mom-sticky-bar {
  background: rgba(23,32,41,.97) !important; border-top: 2px solid var(--gold);
  box-shadow: 0 -8px 26px rgba(0,0,0,.20); padding: 12px 0 !important;
}
body.page-id-5 .mom-sticky-bar, body.page-id-5 .mom-sticky-bar * { color: #fff !important; }

/* ---------- Back to top (added by homepage.js) ------------------------ */
body.page-id-5 .mima-top {
  position: fixed; right: 22px; bottom: 96px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); cursor: pointer; font-size: 17px; line-height: 1;
  box-shadow: 0 8px 22px rgba(27,37,47,.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
body.page-id-5 .mima-top.mima-show { opacity: 1; visibility: visible; transform: none; }
body.page-id-5 .mima-top:hover { background: var(--cream); }

/* ---------- Footer ----------------------------------------------------- */
body.page-id-5 .mom-footer { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 30px !important; }

/* ---------- Mobile ----------------------------------------------------- */
@media (max-width: 782px) {
  body.page-id-5 .bottom-header-wrapper,
  body.page-id-5 .bottom-header-wrapper img { max-height: 200px; height: 200px !important; }
  body.page-id-5 .mom-header    { padding: 32px 22px !important; border-radius: 14px 14px 0 0; }
  body.page-id-5 .mom-header h1 { font-size: 25px !important; }
  body.page-id-5 .mom-purchase-box { padding: 20px 22px 18px !important; border-radius: 0 0 14px 14px; }
  body.page-id-5 .mom-content-padding h1 { font-size: 27px !important; }
  body.page-id-5 .mom-testimonial { padding: 22px 20px !important; }
  body.page-id-5 .mima-top { right: 14px; bottom: 88px; }
}