/* MP Site Code — snippet #7503708. Edited in wp-admin; do not edit this file. */
/* ==========================================================================
   Menstrual Portal — Editorial Process page
   ========================================================================== */

.mp-edit{
  /* tokens live on the wrapper, not :root, so they stay on this page */
  --base:#EED4D9; --base-soft:#F7E7EB; --base-wash:#FBF1F3;
  --baby:#FBE1E8; --baby-soft:#FDEEF2; --light-pink:#F8D5DF;
  --lav:#E6DFF4; --lav-soft:#F3EEFB; --lav-mid:#C9BBE8; --peach:#FBE6DC;
  --ivory:#FCF8F5;
  --berry:var(--wp--preset--color--berry,#8E2C4E); --berry-hover:#7A2542;
  --black:#000; --ink:#1A1A1A; --muted:#645A60; --line:#F1E0E6;
  --sage:#8DA79B; --sage-soft:#E7F0EB; --sage-line:#CDE0D6; --sage-ink:#3A5349;
  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --shadow-md:0 14px 40px rgba(0,0,0,.09);
  --shadow-lg:0 30px 70px rgba(0,0,0,.14);
  --r:16px; --r-lg:24px; --maxw:1120px;

  color:var(--ink);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* scoped reset ------------------------------------------------------------ */
.mp-edit, .mp-edit *, .mp-edit *::before, .mp-edit *::after{ box-sizing:border-box; }
.mp-edit h1, .mp-edit h2, .mp-edit h3, .mp-edit h4,
.mp-edit p, .mp-edit ul, .mp-edit li, .mp-edit figure{ margin:0; padding:0; }
.mp-edit ul{ list-style:none; }

.mp-edit h1, .mp-edit h2, .mp-edit h3, .mp-edit h4{
  color:var(--black); line-height:1.2; letter-spacing:-.02em; font-weight:800;
}
.mp-edit a{ color:var(--berry); }
.mp-edit :focus-visible{ outline:3px solid var(--berry); outline-offset:2px; border-radius:6px; }

.mp-edit .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* kill the theme's default flow spacing (margin-block-start:1.2rem).
   It lands on .mp-edit itself (as a flow child of the content column) AND on
   .mp-edit's own first child, so both levels are zeroed. */
.mp-edit{ margin-block-start:0 !important; margin-top:0 !important; }
.mp-edit > *:first-child{ margin-block-start:0; margin-top:0; }

/* shared -------------------------------------------------------------------- */
.mp-edit .eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--berry); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.mp-edit .eyebrow::before{ content:""; width:20px; height:2px; background:var(--berry); border-radius:2px; }

.mp-edit .section{ padding:52px 0; }
.mp-edit .section.tint{ background:var(--base-wash); }
.mp-edit .sec-head{ max-width:700px; margin:0 auto 40px; text-align:center; }
.mp-edit .sec-head h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:12px; }
.mp-edit .sec-head p{ color:var(--muted); }   /* font-size left to the theme */
.mp-edit .sec-head p.ink{ color:var(--ink); }
/* Content-integrity heading now lives inside the hero, above the trust cards */
.mp-edit .trust-head{ margin:64px auto 56px; }

/* HERO ---------------------------------------------------------------------- */
.mp-edit .hero{ padding:52px 0 52px; position:relative; overflow:hidden; }
.mp-edit .hero::before{
  content:""; position:absolute; width:520px; height:520px;
  background:radial-gradient(circle,var(--light-pink) 0%,transparent 70%);
  top:-220px; right:-160px; opacity:.7; z-index:0; pointer-events:none;
}
.mp-edit .hero::after{
  content:""; position:absolute; width:340px; height:340px;
  background:radial-gradient(circle,var(--lav) 0%,transparent 70%);
  bottom:-180px; left:-140px; opacity:.6; z-index:0; pointer-events:none;
}
.mp-edit .hero-dot{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--sage); opacity:.5; top:80px; left:14%; animation:mpEditFloaty 6s ease-in-out infinite;
}
.mp-edit .hero-dot.d2{
  width:9px; height:9px; background:var(--berry); opacity:.4; top:160px; left:8%; animation-delay:1.2s;
}
@keyframes mpEditFloaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.mp-edit .hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr;
  gap:50px; align-items:center; margin-top:18px;
}
/* on desktop .hero-copy is a single grid item (column 1); on mobile it dissolves
   so head / art / body become siblings and the image can sit between them */
.mp-edit .hero-copy{ min-width:0; }
.mp-edit .hero h1{ font-size:clamp(2.2rem,4.4vw,3.2rem); margin-bottom:18px; }
.mp-edit .hero p.lead{ color:var(--ink); max-width:560px; }   /* font-size left to the theme */
.mp-edit .hero-art{ display:flex; justify-content:center; }
.mp-edit .hero-img-frame{
  position:relative; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,var(--baby-soft) 0%,var(--light-pink) 62%,transparent 100%);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.mp-edit .hero-img-frame img{ width:100%; height:100%; object-fit:contain; }
.mp-edit .updated-line{ font-size:.82rem; color:var(--muted); margin-top:16px; }

/* TRUST STRIP — static cards, height driven by content -----------------------
   No fixed aspect-ratio and no absolutely-positioned faces, so a card can
   never clip its own text no matter how long the sentence gets.            */
.mp-edit .trust-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:0;
}
.mp-edit .trust-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 20px; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.mp-edit .trust-card:hover{
  border-color:var(--lav-mid); box-shadow:var(--shadow-md); transform:translateY(-3px);
}
.mp-edit .trust-chip-img{
  width:106px; height:106px; flex:0 0 auto; border-radius:24px; background:var(--base-wash);
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0 0 16px; overflow:hidden;
}
.mp-edit .trust-chip-img img{
  /* width/height:100% forces the artwork to scale UP to fill the tile.
     `auto` would only ever render at the file's intrinsic size and shrink.
     object-fit:contain keeps the aspect ratio, so nothing distorts.       */
  width:100%; height:100%; object-fit:contain; display:block;
}
.mp-edit .trust-copy{ min-width:0; }
.mp-edit .trust-card .lbl{
  display:block; font-size:.95rem; font-weight:700; color:var(--ink);
  line-height:1.35; margin-bottom:8px;
}
.mp-edit .trust-card .txt{
  font-size:.84rem; line-height:1.6; color:var(--muted);
}

/* ANATOMY OF AN ARTICLE ----------------------------------------------------- */
.mp-edit .anatomy-wrap{ max-width:520px; margin:0 auto; }
.mp-edit .anatomy-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow-md);
}
.mp-edit .an-tag{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--berry); background:var(--baby-soft);
  padding:5px 10px; border-radius:8px; margin-bottom:14px;
}
.mp-edit .an-title{
  font-size:1.15rem; margin-bottom:16px; font-weight:800;
  color:var(--black); line-height:1.2; letter-spacing:-.02em;
}
.mp-edit .an-byline,
.mp-edit .an-body,
.mp-edit .an-refs{
  position:relative; border-radius:12px; padding:10px 40px 10px 10px;
  margin:0 -10px 10px; transition:background .3s ease;
}
/* the highlight that used to be the .hl class — now driven by :has() */
.mp-edit .an-byline:has(.an-hot[open]),
.mp-edit .an-body:has(.an-hot[open]),
.mp-edit .an-refs:has(.an-hot[open]),
.mp-edit .an-history:has(.an-hot[open]){ background:var(--base-wash); }

/* byline — lifted from the live article template so the mockup matches reality */
.mp-edit .an-byline{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mp-edit .an-byline .avs{ display:flex; flex:0 0 auto; }
.mp-edit .an-byline .av{
  width:42px; height:42px; border-radius:50%; border:2px solid #fff; flex:0 0 auto;
  object-fit:cover; display:block;
}
.mp-edit .an-byline .av + .av{ margin-left:-10px; }
.mp-edit .an-byline .av-rf{ background:var(--baby); }
.mp-edit .an-byline .av-si{ background:var(--lav); }
.mp-edit .an-byline .who{ flex:1 1 auto; min-width:0; font-size:.86rem; color:var(--muted); line-height:1.4; }
.mp-edit .an-byline .wline{ display:block; }
.mp-edit .an-byline .who b{ color:var(--black); font-weight:700; white-space:nowrap; }
.mp-edit .an-byline .meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%;
  font-size:.8rem; color:var(--muted); font-weight:600;
}
.mp-edit .an-byline .obgyn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:800; color:var(--sage-ink);
  background:var(--sage-soft); border:1px solid var(--sage-line);
  padding:5px 10px; border-radius:8px;
}
.mp-edit .an-byline .obgyn svg{ width:12px; height:12px; flex:0 0 auto; }
.mp-edit .an-line{ display:block; height:8px; border-radius:5px; background:var(--line); margin-bottom:7px; }
.mp-edit .an-line.w-100{width:100%}
.mp-edit .an-line.w-95{width:95%}
.mp-edit .an-line.w-80{width:80%}
.mp-edit .an-line.w-70{width:70%}
.mp-edit .an-line.w-65{width:65%}
.mp-edit .an-line.w-60{width:60%}
.mp-edit .an-refs > b{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--berry); margin-bottom:8px;
}

/* the hotspot: a native <details> disclosure, no script -------------------- */
.mp-edit .an-hot{ position:absolute; top:6px; right:6px; width:24px; height:24px; z-index:3; }
.mp-edit .an-hot .an-dot{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--berry); color:#fff; font-size:.72rem; font-weight:800; line-height:1;
  border:2px solid #fff; box-shadow:0 0 0 1.5px var(--berry);
  cursor:pointer; user-select:none; transition:transform .2s ease, background .2s ease;
}
/* kill the default disclosure triangle in every engine */
.mp-edit .an-hot .an-dot{ list-style:none; }
.mp-edit .an-hot .an-dot::-webkit-details-marker{ display:none; }
.mp-edit .an-hot .an-dot::marker{ content:""; }
.mp-edit .an-hot .an-dot:hover{ transform:scale(1.12); }
.mp-edit .an-hot[open] .an-dot{ background:var(--sage); box-shadow:0 0 0 1.5px var(--sage); }

.mp-edit .an-hot .an-popup{
  display:block; position:absolute; top:calc(100% + 8px); right:-6px;
  width:min(260px,72vw); background:var(--berry); border-radius:12px;
  padding:12px 14px; box-shadow:var(--shadow-lg); z-index:4;
  font-size:.78rem; color:#fff; line-height:1.5; text-align:left; font-weight:400;
  letter-spacing:normal; text-transform:none;
  animation:mpEditPop .18s ease both;
}
.mp-edit .an-hot .an-popup::before{
  content:""; position:absolute; top:-5px; right:13px;
  width:10px; height:10px; background:var(--berry); border-radius:2px; transform:rotate(45deg);
}
/* markers 3 and 4 open upward so the popup never falls off the card */
.mp-edit .an-hot.up .an-popup{ top:auto; bottom:calc(100% + 8px); }
.mp-edit .an-hot.up .an-popup::before{ top:auto; bottom:-5px; }
@keyframes mpEditPop{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }

.mp-edit .anatomy-hint{ text-align:center; font-size:.8rem; color:var(--muted); margin-top:16px; }

.mp-edit .an-takeaways{ background:var(--sage-soft); border-radius:10px; padding:12px 12px 4px; }
.mp-edit .an-takeaways b{
  display:block; font-size:.64rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sage-ink); margin-bottom:9px;
}
.mp-edit .an-ref-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mp-edit .an-ref-row .an-line{ margin:0; flex:1; }
.mp-edit .an-ref-num{ font-size:.66rem; font-weight:800; color:var(--berry); flex:0 0 auto; }
.mp-edit .an-history{
  margin:0 -10px; padding:12px 40px 0 10px; border-top:1px dashed var(--line);
  position:relative; border-radius:12px; transition:background .3s ease;
}
.mp-edit .an-history > b{
  display:block; font-size:.62rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--berry); margin-bottom:4px;
}
.mp-edit .an-history > span{ font-size:.72rem; color:var(--muted); }
.mp-edit .an-history .an-hot{ top:10px; }

/* INFO CARD DUO ------------------------------------------------------------- */
.mp-edit .duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mp-edit .info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease;
}
.mp-edit .info-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.mp-edit .info-card .ic-badge{
  width:106px; height:106px; border-radius:24px; background:var(--baby-soft); color:var(--berry);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; padding:0;
  overflow:hidden;
}
.mp-edit .info-card .ic-badge img{ width:100%; height:100%; object-fit:contain; }
.mp-edit .info-card h3{ font-size:1.2rem; margin-bottom:10px; }
.mp-edit .info-card p{ color:var(--muted); font-size:.96rem; margin-bottom:10px; }
.mp-edit .info-card p:last-child{ margin-bottom:0; }
.mp-edit .info-card a{ font-weight:700; }

/* AFFILIATE / BALANCE ------------------------------------------------------- */
.mp-edit .aff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.mp-edit .aff-copy h2{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:12px; }
.mp-edit .aff-copy p{ color:var(--ink); margin-bottom:16px; }   /* font-size left to the theme */
.mp-edit .aff-copy p:last-child{ margin-bottom:0; }
.mp-edit .aff-art{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.mp-edit .scale-img-frame{ width:100%; max-width:400px; }
.mp-edit .scale-img-frame img{ width:100%; height:auto; display:block; }
.mp-edit .scale-caption{ text-align:center; font-size:.82rem; color:var(--muted); }

/* RESPONSIVE ---------------------------------------------------------------- */
@media(max-width:900px){
  .mp-edit .hero-grid{ grid-template-columns:1fr; row-gap:0; text-align:center; }
  .mp-edit .hero .lead{ margin:0 auto; }
  /* dissolve the copy wrapper so the image can be ordered between h1 and lead */
  .mp-edit .hero-copy{ display:contents; }
  .mp-edit .hero-head{ order:1; }
  .mp-edit .hero-art { order:2; margin:30px 0 26px; }
  .mp-edit .hero-body{ order:3; }
  .mp-edit .hero-head h1{ margin-bottom:0; }
  .mp-edit .duo-grid{ grid-template-columns:1fr; }
  /* the 50px desktop gap becomes a 50px ROW gap once this stacks — reset it */
  .mp-edit .aff-grid{ grid-template-columns:1fr; row-gap:0; }
  .mp-edit .aff-art{ margin-top:18px; gap:10px; }   /* image sits below the copy on mobile */
  .mp-edit .scale-img-frame{ max-width:300px; }
  .mp-edit .hero-img-frame{ width:clamp(260px,62vw,340px); height:auto; aspect-ratio:1; }
}
/* trust strip: 2-up on tablet */
@media(max-width:960px){
  .mp-edit .trust-strip{ grid-template-columns:repeat(2,1fr); }
}
/* trust strip: icon-left rows on phones — far more compact than tall stacks */
@media(max-width:620px){
  /* avatars sit above the names rather than beside them */
  .mp-edit .an-byline{ flex-direction:column; align-items:flex-start; gap:10px; padding-right:10px; }
  .mp-edit .an-byline .who{ flex:none; width:100%; }
  .mp-edit .an-byline .avs{ padding-right:34px; }   /* keeps the avatars clear of the marker */

  .mp-edit .trust-strip{ grid-template-columns:1fr; gap:14px; margin-top:0; }
  .mp-edit .trust-head{ margin-top:44px; }
  .mp-edit .trust-card{
    display:grid; grid-template-columns:auto 1fr; align-items:start;
    gap:16px; text-align:left; padding:18px 16px;
  }
  .mp-edit .trust-card:hover{ transform:none; }
  .mp-edit .trust-chip-img{ width:76px; height:76px; border-radius:18px; padding:0; margin:0; }
  .mp-edit .trust-card .lbl{ font-size:.92rem; margin-bottom:5px; }
  .mp-edit .trust-card .txt{ font-size:.83rem; line-height:1.55; }
}

@media(max-width:640px){
  .mp-edit .wrap{ padding:0 18px; }
  .mp-edit .section{ padding:38px 0; }
  .mp-edit .hero-img-frame{ width:clamp(220px,66vw,300px); height:auto; aspect-ratio:1; padding:0; }
  .mp-edit .section.tint{ padding-bottom:30px; }
}

@media(prefers-reduced-motion:reduce){
  .mp-edit *{ transition:none!important; animation:none!important; }
}