/* MP Site Code — snippet #7504429. Edited in wp-admin; do not edit this file. */
/* Menstrual Portal — Period Calculator PAGE  */

/* page canvas: white — the section wash below ends on white, so it merges seamlessly (page-scoped snippet, so body is safe) */
body { background: #fff; }

.mp-pcalcpage {
  /* tokens live on the wrapper, not :root */
  --mp-berry: #8E2C4E;
  --mp-berry-dark: #7A2542;
  --mp-blush: #FBE1E8;
  --mp-blush-band: #F8D5DF;
  --mp-line: #F1E0E6;
  --mp-sage: #E7F0EB;
  --mp-sage-line: #CDE0D6;
  --mp-muted: #6E646A;
  --mp-ivory: #FCF8F5;

  margin-block-start: 0 !important;
  position: relative;
  z-index: 2;
  color: #1A1A1A;
  line-height: 1.6;
  padding-bottom: 60px; /* keeps a breathing zone below the form for the fade overlay */
  overflow: hidden;
  /* exact wash from the Menstrual Hygiene page hero: blush top-left, lavender top-right, flat ivory base */
  background:
    radial-gradient(700px 420px at 10% 0%, rgba(251, 225, 232, .6), transparent 70%),
    radial-gradient(700px 420px at 92% 6%, rgba(230, 223, 244, .55), transparent 70%),
    var(--mp-ivory);
}

/* The blend, exactly as on the hygiene page: a white fade overlay pinned to the section's
   bottom edge. It fades everything -- ivory, glows AND bubbles -- into the white article. */
.mp-pcalcpage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.mp-pcalcpage *, .mp-pcalcpage *::before, .mp-pcalcpage *::after { box-sizing: border-box; }

/* ---------- hero ---------- */
/* Floating pastel bubbles (decorative, glossy — byte-matched to .mp-hyg-bubbles) */
.mp-pcalcpage-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* byte-matched to .mp-hyg-bubbles: the field spans the whole section, so bottom-anchored
   bubbles are clipped at the section's true bottom edge (as designed) instead of mid-air.
   Safe now that results open in the overlay and the section height is stable. */
.mp-pcalcpage-bubbles span { position: absolute; border-radius: 50%; }
@keyframes mp-pcalcpage-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

.mp-pcalcpage-hero {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 800px; margin: 0 auto;
  padding: 52px clamp(12px, 3vw, 24px) 0;
}
/* MP Article Meta byline shortcode output, centered under the H1 */
.mp-pcalcpage-byline { display: flex; justify-content: center; margin: 0 0 14px; }
.mp-pcalcpage-byline > * { margin: 0 auto; text-align: center; }
/* Mobile: stack the byline with the doctor photo centered above the text.
   Scoped to this hero only — bylines on posts keep Article Meta's own layout. */
@media (max-width: 640px) {
  .mp-pcalcpage-byline .byline {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 8px;
  }
  .mp-pcalcpage-byline .avs { display: flex; justify-content: center; }
  .mp-pcalcpage-byline .mp-badges { display: flex; flex-wrap: wrap; justify-content: center; }
}
.mp-pcalcpage-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mp-berry);
}
.mp-pcalcpage-h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.12; color: #000; margin: 18px 0 12px;
}
.mp-pcalcpage-hl { position: relative; white-space: nowrap; color: var(--mp-berry); }
.mp-pcalcpage-hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 12px;
  background: var(--mp-blush-band); z-index: -1; border-radius: 8px;
}
.mp-pcalcpage-sub {
  color: #1A1A1A; /* black, theme font size (no size override) */
  max-width: 520px; margin: 0 auto; text-wrap: pretty;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .mp-pcalcpage-hero { padding-top: 36px; }
}

/* ---------- reduced motion (matches the hygiene page) ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-pcalcpage *,
  .mp-pcalcpage *::before,
  .mp-pcalcpage *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .mp-pcalcpage { background: #fff; }
  .mp-pcalcpage-bubbles { display: none !important; }
}

/* ============================================================
   YOUR GUTENBERG CONTENT — constrain to the page column (this page only)
   Same mechanism as the Menstrual Hygiene page.

   Select all your blocks below the calculator in the editor → Group →
   give the Group the Additional CSS class:  mp-pcalc-guide
   ============================================================ */
.mp-pcalc-guide,
.mp-pcalc-guide.alignfull,
.mp-pcalc-guide.alignwide {
  max-width: 900px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-inline: 18px;
  box-sizing: border-box;
}
/* Neutralise the theme's inner sizing so blocks fill the column,
   and re-center any full/wide block the user drops inside. */
.mp-pcalc-guide > * { max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.mp-pcalc-guide > .alignfull,
.mp-pcalc-guide > .alignwide {
  margin-left: auto !important; margin-right: auto !important;
  left: auto !important; right: auto !important;
}
/* -----------------------------------------------------------------
   METHOD B (no grouping needed — constrains EVERY block on this page)
   1. In wp-admin, open this page; the URL ends in post=NNN — that NNN
      is the page ID (or hover the page in the Pages list to see it).
   2. Replace 0000 below with that number and uncomment this block.
   Only this page's ID is targeted, so no other page is affected.
   ----------------------------------------------------------------- */
/*
.page-id-0000 .wp-block-post-content > *:not(.mp-pcalcpage) {
  max-width: 900px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-inline: 18px;
  box-sizing: border-box;
}
.page-id-0000 .wp-block-post-content > .alignfull:not(.mp-pcalcpage) {
  left: auto !important; right: auto !important;
}
*/


.mp-article-append {
  max-width: 850px;
  margin: 0 auto;
padding:0px 18px 18px 18px;
}

.page [id] { scroll-margin-top: 90px; }