/* MP Site Code — snippet #7503983. Edited in wp-admin; do not edit this file. */
/* ============================================================
   Menstrual Portal — Evaluate Your Menstrual Hygiene page
   ============================================================ */

.mp-hyg-page {
  --mp-berry: #8E2C4E;
  --mp-berry-dark: #7A2542;
  --mp-ink: #1A1A1A;
  --mp-muted: #6E646A;
  --mp-blush: #FBE1E8;
  --mp-blush-soft: #FDF4F6;
  --mp-lavender: #E6DFF4;
  --mp-sage: #E7F0EB;
  --mp-sage-ink: #3F5A4E;
  --mp-sage-border: #CDE0D6;
  --mp-border: #F1E0E6;

  /* Full-bleed out of the theme's constrained content column */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;

  background: #fff;
  color: var(--mp-ink);
  font-family: inherit;
  line-height: 1.62;
  overflow-x: hidden;
}

/* Kill the block theme's flow gap above/below the page */
.wp-block-post-content > .mp-hyg-page,
.entry-content > .mp-hyg-page {
  margin-block-start: 0;
  margin-block-end: 0;
}

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

.mp-hyg-page a { color: var(--mp-berry); text-decoration: none; }
.mp-hyg-page a:hover { color: var(--mp-berry-dark); text-decoration: underline; }
.mp-hyg-page a:focus-visible,
.mp-hyg-page summary:focus-visible { outline: 3px solid var(--mp-berry); outline-offset: 3px; border-radius: 4px; }

.mp-hyg-wrap { max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* ---------- Type ---------- */
.mp-hyg-page h1 {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
  color: #000; margin: 14px 0 16px;
}
.mp-hyg-page h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
  color: #000; margin: 0 0 14px;
}
.mp-hyg-page h3 {
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em;
  color: #000; margin: 26px 0 8px;
}
.mp-hyg-page p { margin: 0 0 16px; color: var(--mp-ink); }

.mp-hyg-hl { position: relative; white-space: nowrap; color: var(--mp-berry); }
.mp-hyg-hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 12px;
  background: #F8D5DF; z-index: -1; border-radius: 8px;
}

/* Eyebrow — line-dash style */
.mp-hyg-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mp-berry);
}
.mp-hyg-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--mp-berry); border-radius: 2px;
}

.mp-hyg-lede { font-size: 1.1rem; color: var(--mp-muted); max-width: 620px; margin-left: auto !important; margin-right: auto !important; margin-top: 0; margin-bottom: 30px; text-align: center; text-wrap: pretty; }
/* MP Article Meta byline shortcode output, centered under the H1
   (positioning matched to the Period Calculator page) */
.mp-hyg-byline-wrap { display: flex; justify-content: center; margin: 0 0 14px; }
.mp-hyg-byline-wrap > * { margin: 0 auto; text-align: center; }
/* Byline links: colour shift only on hover, no underline */
.mp-hyg-page .mp-hyg-byline-wrap a:hover { text-decoration: none; }
/* 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-hyg-byline-wrap .byline {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 8px;
  }
  .mp-hyg-byline-wrap .avs { display: flex; justify-content: center; }
  .mp-hyg-byline-wrap .mp-badges { display: flex; flex-wrap: wrap; justify-content: center; }
}

/* ---------- Hero (matches the evaluator design) ---------- */
.mp-hyg-hero {
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 8vw, 76px) 0 clamp(40px, 7vw, 64px);
  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%),
    #FCF8F5;
}
.mp-hyg-hero-in { position: relative; z-index: 1; }
.mp-hyg-hero::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;
}

/* Floating pastel bubbles (decorative, glossy — matches the evaluator design) */
.mp-hyg-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mp-hyg-bubbles span { position: absolute; border-radius: 50%; }

/* Category cards (static, crawlable) */
.mp-hyg-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  max-width: 680px; margin: 0 auto 34px; text-align: left;
}
.mp-hyg-card {
  background: #fff; border: 1px solid var(--mp-border); border-radius: 18px; padding: 16px 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mp-hyg-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, .08); }
.mp-hyg-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.mp-hyg-card b { display: block; font-size: .9rem; color: #000; }
.mp-hyg-card > span:last-child { font-size: .78rem; color: var(--mp-muted); }

/* Icon animations (matching the tool) */
.mp-hyg-anim-drop { transform-origin: 40px 40px; animation: mp-hyg-drop 2.6s ease-in-out infinite; }
.mp-hyg-anim-wave { animation: mp-hyg-wave 2.4s linear infinite; }
.mp-hyg-anim-beat { transform-origin: 40px 42px; animation: mp-hyg-beat 1.9s ease-in-out infinite; }
.mp-hyg-anim-sway { transform-origin: 40px 60px; animation: mp-hyg-sway 3.2s ease-in-out infinite; }

/* ---------- Tool (renders only the Start button) ---------- */
.mp-hyg-tool { margin: 0; padding: 0; }
.mp-hyg-privacy { font-size: .8rem; color: var(--mp-muted); margin: 0; padding-top: 26px; text-align: center; }

/* ---------- Sections ---------- */
.mp-hyg-section { padding: clamp(28px, 5vw, 46px) 0; }

/* Category headers in the guide */
.mp-hyg-cat {
  display: flex; align-items: center; gap: 12px;
  margin: clamp(34px, 6vw, 52px) 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--mp-border);
}
.mp-hyg-cat h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
.mp-hyg-cat-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.mp-hyg-cat-1 { background: #9C2E50; }
.mp-hyg-cat-2 { background: #8F4E20; }
.mp-hyg-cat-3 { background: #6A54A6; }
.mp-hyg-cat-4 { background: #3A6147; }

/* ---------- TSS callout ---------- */
.mp-hyg-tss {
  background: var(--mp-sage);
  border: 1px solid var(--mp-sage-border);
  border-radius: 24px;
  padding: clamp(22px, 5vw, 34px) clamp(18px, 4.5vw, 32px);
}
.mp-hyg-tss h2 { color: var(--mp-sage-ink); font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
.mp-hyg-tss p { color: #2F473C; }
.mp-hyg-tss p:last-child { margin-bottom: 0; }

/* ---------- FAQ (details/summary — no JS) ---------- */
.mp-hyg-faq {
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 16px;
  margin: 0 0 12px;
  overflow: hidden;
}
.mp-hyg-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  font-weight: 700; color: #000;
  transition: background .16s ease;
}
.mp-hyg-faq summary::-webkit-details-marker { display: none; }
.mp-hyg-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-blush); color: var(--mp-berry);
  font-weight: 800; font-size: 1rem; line-height: 1;
  transition: transform .2s ease;
}
.mp-hyg-faq summary:hover { background: var(--mp-blush-soft); }
.mp-hyg-faq[open] summary::after { transform: rotate(45deg); }
.mp-hyg-faq p { padding: 0 20px 16px; margin: 0; color: var(--mp-muted); }

/* ---------- CTA band ---------- */
.mp-hyg-cta {
  background: linear-gradient(135deg, #8E2C4E 0%, #6e1f39 120%);
  border-radius: 28px;
  padding: clamp(28px, 6vw, 42px) clamp(18px, 4.5vw, 36px);
  text-align: center; color: #fff;
}
.mp-hyg-cta h2 { color: #fff; margin-bottom: 8px; font-size: clamp(1.35rem, 2.8vw, 1.75rem); }
.mp-hyg-cta p { color: rgba(255, 255, 255, .85); max-width: 480px; margin: 0 auto 22px; }
.mp-hyg-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.mp-hyg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .95rem; padding: 14px 28px; border-radius: 100px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mp-hyg-btn:hover { text-decoration: none; transform: translateY(-2px); }
.mp-hyg-btn-light { background: #fff; color: #000; }
.mp-hyg-btn-light:hover { color: #000; box-shadow: 0 14px 40px rgba(0, 0, 0, .2); }
.mp-hyg-btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .55); }
.mp-hyg-btn-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- References ---------- */
.mp-hyg-refs-section { padding-bottom: clamp(48px, 8vw, 72px); }
.mp-hyg-refs-h { font-size: 1.15rem; }
.mp-hyg-refs { list-style: none; margin: 0 0 20px; padding: 0; }
.mp-hyg-refs li {
  font-size: .9rem; color: var(--mp-muted);
  padding: 8px 0 8px 18px; position: relative;
  border-bottom: 1px dashed var(--mp-border);
}
.mp-hyg-refs li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--mp-berry);
}
.mp-hyg-note { font-size: .8rem; color: var(--mp-muted); max-width: 560px; }

/* ---------- Animations ---------- */
@keyframes mp-hyg-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes mp-hyg-drop { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.06); } }
@keyframes mp-hyg-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes mp-hyg-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.14); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 56% { transform: scale(1); } }
@keyframes mp-hyg-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .mp-hyg-cta-btns .mp-hyg-btn { flex: 1 1 100%; }
}

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


/* ============================================================
   YOUR GUTENBERG CONTENT — constrain to the page width (this page only)

   Your page/template sets blocks to FULL WIDTH. These rules pull your
   content back to the page column (max 800px, 24px gutters) identically
   on mobile and desktop — without affecting any other page.

   Pick ONE of the two methods below.
   ============================================================ */

/* -----------------------------------------------------------------
   METHOD A (recommended, no page ID needed)
   Select all your blocks in the editor → Group → give the Group the
   Additional CSS class:  mp-hyg-guide
   The class is unique to this page, so this only affects this page.

   WIDTH ONLY — all text styling (headings, paragraphs, links, lists)
   comes from your theme. This just holds the content to the page column.
   ----------------------------------------------------------------- */
.mp-hyg-guide,
.mp-hyg-guide.alignfull,
.mp-hyg-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-hyg-guide > * { max-width: 100% !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.mp-hyg-guide > .alignfull,
.mp-hyg-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-hyg-page) {
  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-hyg-page) {
  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; }