/* MP Site Code — snippet #7503710. Edited in wp-admin; do not edit this file. */
/* ============================================================
   Menstrual Portal — Ask a Doctor page styles
============================================================ */

.mp-ask-page{
  --mp-paper:#FBF6F3;--mp-card:#FFFFFF;
  --mp-blush:#F5E4E8;--mp-blush-soft:#F9EEF1;--mp-blush-deep:#EDD3DA;
  --mp-berry:#8E2C4E;--mp-berry-deep:#6E2140;--mp-plum:#2E1420;
  --mp-ink:#3A2530;--mp-muted:#7C6871;
  --mp-line:#EBD8DD;--mp-line-soft:#F3E6EA;
  --mp-light-pink:#F8D5DF;--mp-lav:#E6DFF4;
  --mp-shadow-md:0 16px 44px rgba(46,20,32,.10);
  --mp-shadow-lg:0 32px 80px rgba(46,20,32,.18);
  --mp-r:16px;--mp-r-lg:22px;--mp-arch:180px 180px 22px 22px;--mp-maxw:1140px;
  font-family:inherit;
  color:var(--mp-ink);background:#fff;line-height:1.62;
  -webkit-font-smoothing:antialiased;

  /* Full-bleed: Twenty Twenty-Five constrains post content to a
     narrow column; this breaks the page out to the viewport edges
     so tinted sections run edge-to-edge. */
  width:100vw;position:relative;left:50%;margin-left:-50vw;
  overflow-x:hidden;
}
/* kill the theme's default flow spacing (margin-block-start) that lands on
   .mp-ask-page as a flow child of the content column AND on its first child —
   this is the white gap above the page */
.mp-ask-page{margin-block-start:0 !important;margin-top:0 !important}
.mp-ask-page > *:first-child{margin-block-start:0;margin-top:0}
/* The remaining white gap comes from the THEME's own containers above the
   wrapper (<main>, the post-content block, and any Group the template wraps
   it in) — spacing the wrapper can't undo from the inside. :has() limits
   these rules to the one page that actually contains .mp-ask-page, so the
   rest of the site keeps its normal spacing. */
body:has(.mp-ask-page) main,
body:has(.mp-ask-page) .wp-block-post-content,
body:has(.mp-ask-page) .entry-content{margin-block-start:0 !important;padding-block-start:0 !important}
body:has(.mp-ask-page) .wp-block-group:has(.mp-ask-page){margin-block-start:0 !important;padding-block-start:0 !important}
/* Resets are scoped to the page-built sections ONLY, so shortcode
   output ([mp_ask_our_doctors], [mp_reviews], [mp_featured_answers])
   keeps its own plugin styles untouched. */
.mp-wrap,.mp-hero-grid *,.mp-how-grid *,.mp-sec-head *,.mp-faq *{box-sizing:border-box}
.mp-hero h1,.mp-sec-head h2,.mp-how-card h3{color:var(--mp-plum);line-height:1.16;letter-spacing:-.02em;font-weight:800;margin:0;font-family:inherit}
.mp-faq-q:focus-visible,.mp-team-foot a:focus-visible,.mp-faq-a a:focus-visible{outline:3px solid var(--mp-berry);outline-offset:2px;border-radius:6px}
/* links: no decoration at rest, underline on hover (page-wide, incl. shortcode
   links — decoration only, so it can't disturb plugin layout) */
.mp-ask-page a{text-decoration:none}
.mp-ask-page a:hover{text-decoration:underline}
/* arrow links: the arrow slides forward on hover (arrow must be in .mp-arr).
   Arrow links use the motion as the hover cue, so they get NO underline. */
.mp-arr{display:inline-block;transition:transform .2s ease}
.mp-ask-page a:hover .mp-arr{transform:translateX(5px)}
.mp-ask-page a:has(.mp-arr):hover{text-decoration:none}
.mp-wrap{max-width:var(--mp-maxw);margin:0 auto;padding:0 24px 30px}
.mp-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-berry);display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.mp-eyebrow::before{content:"";width:20px;height:2px;background:var(--mp-berry);border-radius:2px}
.mp-sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.mp-sec-head .mp-eyebrow{justify-content:center}
.mp-sec-head h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0 0 12px}
.mp-sec-head p{color:var(--mp-muted);font-size:1.03rem;margin:0}
.mp-sec-head p.mp-ink{color:#000;font-size:inherit}
.mp-section{padding:84px 0}
.mp-section.mp-tint{background:var(--mp-blush-soft)}

/* HERO */
.mp-hero{position:relative;padding:88px 0 0;overflow:hidden}
/* soft colour glow at the top — same treatment as the Editorial Process page */
.mp-hero::before{content:"";position:absolute;width:520px;height:520px;background:radial-gradient(circle,var(--mp-light-pink) 0%,transparent 70%);top:-220px;right:-160px;opacity:.7;z-index:0;pointer-events:none}
/* lavender glow is anchored to the intro grid (not the section), so it sits
   beside the headline/image block and never drops down behind the form */
.mp-hero-grid::after{content:"";position:absolute;width:340px;height:340px;background:radial-gradient(circle,var(--mp-lav) 0%,transparent 70%);bottom:-120px;left:-160px;opacity:.6;z-index:-1;pointer-events:none}
.mp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.mp-hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);margin-bottom:18px}
.mp-hero h1 em{font-style:italic;font-weight:700;color:var(--mp-berry)}
.mp-hero .mp-dek{font-style:italic;font-size:1.18rem;color:var(--mp-berry);margin:0 0 14px;font-weight:600}
.mp-hero .mp-lead{font-size:inherit;color:#000;margin:0 0 26px;max-width:56ch}
.mp-trust-row{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 28px;margin:0;padding:0}
.mp-trust-row li{list-style:none;display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--mp-ink);white-space:nowrap}
.mp-trust-row svg{flex:0 0 auto;color:var(--mp-berry)}
.mp-hero-art{position:relative;background:rgba(252,248,245,.9);border-radius:var(--mp-arch);height:440px;width:100%;max-width:400px;margin-left:auto;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.mp-hero-art img{width:84%;max-width:330px;height:100%;display:block;object-fit:cover;object-position:top;padding-top:34px;transform:translateX(14px)}

/* SHORTCODE CONTAINERS — padding-free; the shortcodes bring their own */
.mp-ask-form{margin:0;padding:0;position:relative;z-index:1}

/* FORM SPOTLIGHT — subtle dim + blur behind the page while the form is in
   the prominent zone of the viewport. The overlay ignores clicks entirely,
   and the form is lifted above it so it stays crisp and fully usable. */
.mp-form-overlay{position:fixed;inset:0;z-index:40;background:rgba(46,20,32,.14);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);opacity:0;pointer-events:none;transition:opacity .45s ease}
.mp-form-overlay.on{opacity:1}
.mp-ask-form.mp-spot{z-index:41}
/* while the spotlight is on, page borders deepen from the default #EBD8DD
   to #DABBC4 — the body gets .mp-spot-on from the JS at the same moment
   the overlay fades in, and the swap is transitioned so it doesn't pop */
body.mp-spot-on .mp-ask-page{--mp-line:#CBA3AF}
/* the form plugin defines its OWN --mp-line inside .mp-aod (#E4C9D2), which
   overrides the page token — so the spotlight override must target .mp-aod
   directly. Its card, input, and chip borders all read this one variable. */
body.mp-spot-on .mp-aod{--mp-line:#CBA3AF}
.mp-ask-page .mp-aod-card{transition:border-color .45s ease}
.mp-how-card,.mp-how-card .mp-num,.mp-faq-item{transition:border-color .45s ease}
@media(prefers-reduced-motion:reduce){.mp-form-overlay{display:none}}
.mp-shortcode-section{padding:0}
.mp-shortcode-section.mp-tint{background:var(--mp-blush-soft)}

/* HOW IT WORKS */
.mp-how{padding:64px 0 84px}
.mp-how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mp-how-card{background:var(--mp-card);border:1px solid var(--mp-line);border-radius:var(--mp-r-lg);padding:26px 24px;position:relative}
.mp-how-card .mp-num{font-size:1.15rem;font-weight:800;color:var(--mp-berry);display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--mp-blush-soft);border:1px solid var(--mp-line);margin-bottom:14px}
.mp-how-card h3{font-size:1.08rem;margin:0 0 6px}
.mp-how-card p{font-size:.88rem;color:var(--mp-muted);margin:0}

/* VIDEO — rendered by the [mp_video] facade plugin; the wrap only sizes
   and centres it on the page */
.mp-video-wrap{max-width:760px;margin:0 auto;position:relative}

/* TEAM — doctor cards come from [mp_doctors_desc]; only the section
   heading and the footer link are styled here */
.mp-doctors-sc{margin:0;padding:0}
.mp-team-foot{text-align:center;margin:32px 0 0}
.mp-team-foot a{font-size:.95rem;font-weight:700;color:var(--mp-berry)}

/* FAQ */
.mp-faq{max-width:800px;margin:0 auto}
.mp-faq-item{background:var(--mp-card);border:1px solid var(--mp-line);border-radius:var(--mp-r);margin-bottom:12px;overflow:hidden;transition:border-color .45s ease}
.mp-faq-item.open{border-color:var(--mp-blush-deep)}
.mp-faq-q{width:100%;text-align:left;background:none;border:none;padding:18px 20px;font-family:inherit;font-size:1rem;font-weight:700;color:var(--mp-plum);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.mp-faq-q .mp-pm{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--mp-blush);display:flex;align-items:center;justify-content:center;color:var(--mp-berry);font-weight:800;transition:transform .25s}
.mp-faq-item.open .mp-pm{transform:rotate(45deg);background:var(--mp-berry);color:#fff}
.mp-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mp-faq-a p{margin:0;padding:14px 20px 18px;color:var(--mp-muted);font-size:.9rem;line-height:1.65;border-top:1px dashed var(--mp-line)}
.mp-faq-a p a{color:var(--mp-berry)}

/* RESPONSIVE */
@media(max-width:1020px){
  .mp-hero-grid{grid-template-columns:1fr .9fr;gap:36px}
}
@media(max-width:960px){
  .mp-hero{padding:52px 0 0}
  .mp-hero-grid{grid-template-columns:1fr}
  .mp-hero-art{height:320px;max-width:100%;margin:8px auto 0}
  .mp-how-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .mp-wrap{padding:0 18px 30px}
  /* extra side gutter for the two content shortcodes on phones
     (plugin wrap adds its own 18px inside -> 30px total per side) */
  .mp-shortcode-section{padding:0 13px}
  .mp-trust-row{grid-template-columns:1fr}
  .mp-trust-row li{white-space:normal}
  .mp-section{padding:56px 0}
}
@media(prefers-reduced-motion:reduce){
  .mp-ask-page *{animation:none!important;transition:none!important}
}