/**
 * Fitpedia — Divi Mega Pro Editorial Skin
 *
 * Loaded by: functions.php
 *
 * Theme DNA: Ink (#0B0B0B) background · Soft White (#F5F5F5) text ·
 * Gold (#D4AF37) accents · Fraunces serif for editorial titles ·
 * JetBrains Mono for tabular meta · 3-col post grid with image hover.
 *
 * IMPORTANT: tippy.js (used by Mega Pro) MOVES the `.divimegapro` element
 * out of `<div id="divimegapro-container-NNNN">` and into a `.tippy-popper`
 * wrapper at open-time. So scoping styles to `.divimegapro-container` only
 * works for closed-state (invisible). For visible drawer styling we scope
 * to `.divimegapro` itself (which is the same DOM node before/after move).
 *
 * Scope precedence:
 *   `.tippy-popper`            — outer wrapper (shadow, border-radius)
 *   `.tippy-popper .divimegapro` — drawer body (bg, padding, content)
 *   `.divimegapro`             — covers both container & popper states
 */


/* ====================================================================
 *  TOKENS — kept on every possible host so vars are always resolvable
 * ==================================================================== */
.divimegapro,
.tippy-popper,
.divimegapro-container[id^="divimegapro-container-"] {
  --fpmp-ink:        #0B0B0B;
  --fpmp-charcoal:   #2C2C2C;
  --fpmp-paper:      #F5F5F5;
  --fpmp-paper-dim:  rgba(245, 245, 245, 0.62);
  --fpmp-paper-faint:rgba(245, 245, 245, 0.38);
  --fpmp-gold:       #D4AF37;
  --fpmp-rule:       rgba(212, 175, 55, 0.35);
  --fpmp-rule-soft:  rgba(245, 245, 245, 0.10);
  --fpmp-pad-x:      clamp(20px, 4vw, 56px);
  --fpmp-pad-y:      clamp(28px, 3.2vw, 48px);
  --fpmp-wrap:       1320px;
}


/* ====================================================================
 *  TIPPY POPPER WRAPPER — outer shell when drawer is open
 *
 *  Tippy's inline `transform: translate3d(X, 0, 0)` positions the popper
 *  near the trigger (left ~150px on the Training nav-item). Without an
 *  explicit width on the popper, tippy auto-sizes to content (small).
 *  Force full-viewport-width and zero out the X-offset so it spans
 *  edge-to-edge under the header.
 * ==================================================================== */
.tippy-popper:has(.divimegapro) {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  /* X = 0 (defeat tippy's horizontal nudge); Y = 16px (visible gap below
     the header so the dropdown reads as a separate floating panel rather
     than flowing into the header bar). */
  transform: translate3d(0, 16px, 0) !important;
}

.tippy-popper:has(.divimegapro) .tippy-tooltip {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 38px 80px -30px rgba(0, 0, 0, 0.72) !important;
}

.tippy-popper:has(.divimegapro) .tippy-content {
  padding: 0 !important;
  width: 100% !important;
}


/* ====================================================================
 *  DRAWER BODY — `.divimegapro` is the moved element
 * ==================================================================== */
.divimegapro {
  background: var(--fpmp-ink) !important;
  color: var(--fpmp-paper) !important;
  border: 1px solid var(--fpmp-rule-soft) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Subtle noise texture — same DNA as header / footer */
.divimegapro::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='mp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23mp)'/%3E%3C/svg%3E");
}


/* ====================================================================
 *  BODY WRAPPER + SECTION
 *  Strip Divi's section/row defaults so the grid sits flush with our
 *  editorial padding scale.
 * ==================================================================== */
.divimegapro .divimegapro-body {
  position: relative;
  z-index: 2;
  max-width: var(--fpmp-wrap);
  margin: 0 auto;
  padding: var(--fpmp-pad-y) var(--fpmp-pad-x);
}

.divimegapro .et_pb_section.fp-mp-section,
.divimegapro .et_pb_module {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}


/* ====================================================================
 *  TWO-COLUMN ROW — 1/4 head (left) + 3/4 blog grid (right)
 *  Divi's default float/clearfix produces narrow, badly-aligned columns
 *  in this context. Force a clean flex layout with a generous gutter.
 * ==================================================================== */
.divimegapro .et_pb_row.fp-mp-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: start !important;
  gap: clamp(28px, 3vw, 56px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.divimegapro .et_pb_row.fp-mp-row::before,
.divimegapro .et_pb_row.fp-mp-row::after {
  display: none !important;     /* kill Divi's clearfix pseudos */
}

.divimegapro .et_pb_column.fp-mp-head-col {
  flex: 0 0 clamp(240px, 22%, 320px) !important;
  width: auto !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: sticky;
  top: 0;
}

.divimegapro .et_pb_column.fp-mp-grid-col {
  flex: 1 1 0% !important;
  min-width: 0 !important;     /* allow grid children to shrink properly */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ====================================================================
 *  LEFT COLUMN — Vertical head (kicker · title · dek · CTA)
 * ==================================================================== */
.divimegapro .fp-mp-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.divimegapro .fp-mp-head .et_pb_text_inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.divimegapro .fp-mp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--fpmp-gold) !important;
}
.divimegapro .fp-mp-kicker::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--fpmp-gold);
}

.divimegapro .fp-mp-title {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-weight: 900 !important;
  font-size: clamp(48px, 5.4vw, 76px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  color: var(--fpmp-paper) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-feature-settings: "ss01";
}

.divimegapro .fp-mp-dek {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--fpmp-paper-dim) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 38ch;
}

.divimegapro .fp-mp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--fpmp-gold) !important;
  text-decoration: none !important;
  padding: 10px 0 !important;
  margin-top: 4px;
  border-bottom: 1px solid var(--fpmp-rule) !important;
  transition: color 200ms ease, border-color 200ms ease;
  width: fit-content;
}
.divimegapro .fp-mp-cta:hover {
  color: var(--fpmp-paper) !important;
  border-bottom-color: var(--fpmp-paper) !important;
}


/* ====================================================================
 *  POST GRID — 3 columns × 2 rows, hairline gold-tinted gutters
 * ==================================================================== */
.divimegapro .et_pb_blog_grid {
  margin: 0 !important;
  padding: 0 !important;
}

/* The ajax pagination wrapper is a transparent block — articles live one
   level deeper inside `.et_pb_salvattore_content`. Only the salvattore
   container becomes the grid; nesting two grids here was making the
   salvattore container shrink to 1/3 of its parent (one grid cell). */
.divimegapro .et_pb_ajax_pagination_container {
  display: block !important;
  width: 100% !important;
}

.divimegapro .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  /* Generous gutter — hairline 1px gap looked cramped against the
     image-led cards. 16px reads as proper breathing room. */
  gap: 16px !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
}

/* Salvattore JS creates internal `.column` wrappers and distributes
   articles into them. Make the wrappers transparent so articles sit as
   direct grid items. */
.divimegapro .et_pb_salvattore_content > .column {
  display: contents !important;
}


/* ====================================================================
 *  CARD — image-led, ink background, hover lift
 * ==================================================================== */
.divimegapro article.et_pb_post {
  position: relative;
  display: flex !important;
  flex-direction: column;
  background: var(--fpmp-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Hairline gold-tinted border defines the card module against the
     ink-on-ink drawer — without it the cards merged into the bg. */
  border: 1px solid var(--fpmp-rule-soft) !important;
  border-radius: 4px !important;
  overflow: hidden;
  transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}
.divimegapro article.et_pb_post:hover {
  background: var(--fpmp-charcoal) !important;
  border-color: var(--fpmp-rule) !important;
  transform: translateY(-2px);
}


/* Featured image — top of card, 4:3 aspect (more of the photo visible
   than 16:10) and `object-position: center 25%` to favor the top portion
   where faces and product shots typically sit — keeps subjects un-cropped. */
.divimegapro .et_pb_image_container {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fpmp-charcoal);
}
.divimegapro .et_pb_image_container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,11,0) 35%, rgba(11,11,11,0.55) 75%, rgba(11,11,11,0.92) 100%);
  z-index: 1;
}
.divimegapro .et_pb_image_container a,
.divimegapro .et_pb_image_container .entry-featured-image-url {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.divimegapro .et_pb_image_container img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  /* Top-favored crop preserves faces / product shots that typically sit
     in the upper portion of news thumbnails. Pure `center` cropping was
     beheading subjects in the 4:3 viewport. */
  object-position: center 25% !important;
  filter: grayscale(0.4) contrast(1.06) brightness(0.82);
  transform: scale(1.02);
  transition: filter 520ms ease, transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.divimegapro article.et_pb_post:hover .et_pb_image_container img {
  filter: grayscale(0) contrast(1.04) brightness(0.92);
  transform: scale(1.06);
}


/* Card body — title + meta */
.divimegapro article.et_pb_post .entry-title,
.divimegapro article.et_pb_post .post-meta {
  position: relative;
  z-index: 2;
}

.divimegapro article.et_pb_post .entry-title {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
  color: var(--fpmp-paper) !important;
  margin: 0 !important;
  padding: 16px 16px 0 !important;
  font-feature-settings: "ss01";
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}
.divimegapro article.et_pb_post .entry-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.divimegapro article.et_pb_post:hover .entry-title,
.divimegapro article.et_pb_post:hover .entry-title a {
  color: var(--fpmp-gold) !important;
}

.divimegapro article.et_pb_post .post-meta {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fpmp-paper-faint) !important;
  margin: 8px 16px 16px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.divimegapro article.et_pb_post .post-meta a {
  color: inherit !important;
}

/* Hide excerpt body (Divi may still output content even with show_excerpt=off) */
.divimegapro article.et_pb_post .post-content,
.divimegapro article.et_pb_post .more-link,
.divimegapro article.et_pb_post .entry-content {
  display: none !important;
}


/* ====================================================================
 *  CLOSE BUTTON (×) — visible gold-outlined circle, rotates on hover
 *  Sized & positioned to match the editorial drawer's right gutter.
 * ==================================================================== */
.divimegapro .divimegapro-close-container {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 48px !important;
  height: 48px !important;
  z-index: 1000 !important;
  visibility: visible !important;
  display: block !important;
}
.divimegapro .divimegapro-close {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  right: auto !important;
  top: auto !important;
  border: 1px solid var(--fpmp-gold) !important;
  border-radius: 50% !important;
  background: rgba(11, 11, 11, 0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--fpmp-gold) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  cursor: pointer !important;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease !important;
}
/* Hide the Mega Pro template's `<span>×</span>` — its character baseline
   sits the X off-center inside the 48px circle. We draw the cross with
   two perfectly-centered 1px pseudo-elements instead (matches the old
   custom drawer's close-button DNA). */
.divimegapro .divimegapro-close span {
  display: none !important;
}
.divimegapro .divimegapro-close::before,
.divimegapro .divimegapro-close::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* Visible cross — 2px stroke + 22px length reads as a proper "×" at
     the 48px circle scale. 1px hairline disappeared on most displays. */
  width: 22px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  /* The Mega Pro plugin's main.css sets `.divimegapro-close::after` to
     `visibility: hidden; content: ' '; height: 25px; width: 25px;` —
     all of that has to be force-overridden here so both diagonal arms
     of our cross actually render. */
  visibility: visible !important;
  display: block !important;
  z-index: 1 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: background 240ms ease !important;
}
.divimegapro .divimegapro-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.divimegapro .divimegapro-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.divimegapro .divimegapro-close:hover {
  background: var(--fpmp-gold) !important;
  border-color: var(--fpmp-gold) !important;
  color: var(--fpmp-ink) !important;
  transform: rotate(90deg) !important;
}


/* ====================================================================
 *  RESPONSIVE
 * ==================================================================== */
@media (max-width: 1024px) {
  .divimegapro .et_pb_ajax_pagination_container,
  .divimegapro .et_pb_salvattore_content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .divimegapro .et_pb_ajax_pagination_container,
  .divimegapro .et_pb_salvattore_content {
    grid-template-columns: 1fr !important;
  }
  .divimegapro .divimegapro-body {
    padding: 24px 18px !important;
  }
}


/* ====================================================================
 *  REDUCED MOTION
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .divimegapro *,
  .divimegapro *::before,
  .divimegapro *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}