/* MedExPrep Help center / FAQ (2026). Builds on mxp-home.css + mxp-why.css. */

.mxf .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* hero */
.mxf-hero { padding: 72px 0 64px; }
.mxf-hero__in { text-align: center; max-width: 760px; }
.mxf-hero .mxw-h1 { font-size: clamp(38px, 5vw, 58px); }
.mxf-search { position: relative; margin: 30px auto 0; max-width: 640px; }
.mxf-search > .mxh-i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted); pointer-events: none; }
.mxf-search input { display: block; width: 100%; height: 60px; margin: 0; padding: 0 52px 0 54px; border: 0; border-radius: 14px; background: #fff; font: 500 16.5px var(--sans); color: var(--ink); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); outline: none; -webkit-appearance: none; appearance: none; transition: box-shadow .15s; }
.mxf-search input::placeholder { color: #8b97a8; }
.mxf-search input:focus { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6), 0 0 0 4px rgba(127, 227, 221, .45); }
.mxf-search input::-webkit-search-cancel-button { display: none; }
.mxf-search__x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f1f4f8; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; font-size: 15px; }
.mxf-search__x[hidden] { display: none; }
.mxf-search__x:hover { background: #e5eaf1; }
.mxf-pop { margin-top: 18px !important; font-size: 14px; color: rgba(255, 255, 255, .55); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
.mxf-pop a { padding: 5px 11px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .88) !important; font-weight: 600; font-size: 13.5px; transition: background .15s, border-color .15s; }
.mxf-pop a:hover { background: rgba(255, 255, 255, .14); border-color: rgba(127, 227, 221, .5); }

/* layout */
.mxf-main { padding: 64px 0 104px; background: #fff; }
.mxf-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; max-width: 1280px; }

/* side nav */
.mxf-nav { position: sticky; top: 96px; display: grid; gap: 14px; align-self: start; }
.mxf-nav__card { padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(11, 27, 51, .04), 0 8px 24px -12px rgba(11, 27, 51, .12); }
.mxf-nav__h { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 10px !important; margin: 0 0 4px !important; border-bottom: 1px solid var(--line); }
.mxf-nav ul { display: grid; gap: 2px; margin: 0 !important; padding: 0 !important; }
.mxf-nav li { margin: 0 !important; padding: 0 !important; }
.mxf-nav a[data-nav] { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text) !important; transition: background .15s, color .15s; }
.mxf-nav a[data-nav]:hover { background: var(--bg); color: var(--ink) !important; }
.mxf-nav a[data-nav].is-on { background: var(--teal-bg); color: var(--teal-d) !important; }
.mxf-nav a[data-nav].is-on::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teal); }
.mxf-nav__i { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; background: var(--bg); color: var(--muted); transition: background .15s, color .15s; }
.mxf-nav a:hover .mxf-nav__i { color: var(--ink); }
.mxf-nav a.is-on .mxf-nav__i { background: #fff; color: var(--teal-d); box-shadow: 0 1px 2px rgba(11, 27, 51, .08); }
.mxf-nav__t { flex: 1; min-width: 0; }
.mxf-nav a[data-nav] i { flex: none; min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--bg); font-style: normal; font-size: 12px; font-weight: 700; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.mxf-nav a.is-on i { background: #fff; color: var(--teal-d); }
.mxf-nav a.is-dim { opacity: .4; }
.mxf-nav__help { padding: 18px; border-radius: 16px; color: #fff; background: radial-gradient(260px 160px at 100% 0%, rgba(59, 198, 194, .32), transparent 70%), linear-gradient(160deg, #0d2147, #0b1b33); }
.mxf-nav__help b { display: block; font-size: 15.5px; font-weight: 750; }
.mxf-nav__help p { margin: 4px 0 14px !important; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.mxf-nav__help .mxh-btn { padding: 11px 14px; font-size: 14px; }

/* categories */
.mxf-body { min-width: 0; }
.mxf-count { margin-bottom: 18px !important; font-size: 14.5px; color: var(--muted); }
.mxf-count b { color: var(--ink); }
.mxf-cat { scroll-margin-top: 96px; }
.mxf-cat + .mxf-cat { margin-top: 48px; }
.mxf-cat[hidden] { display: none; }
.mxf-cat h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px !important; }
.mxf-cat__i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--teal-bg); color: var(--teal-d); font-size: 16px; }

/* accordion: one ruled list per category */
.mxf-list { border-top: 1px solid var(--line); }
.mxf .mxf-qa { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; scroll-margin-top: 110px; }
.mxf .mxf-qa[open] { box-shadow: none; }
.mxf .mxf-qa[hidden] { display: none; }
.mxf .mxf-qa summary { padding: 18px 4px; font-size: 16px; line-height: 1.45; transition: color .15s; }
.mxf .mxf-qa summary:hover { color: var(--teal-d); }
.mxf .mxf-qa .mxh-qa__pm { width: 28px; height: 28px; font-size: 14px; }
.mxf .mxf-qa .mxh-qa__a { padding: 0 48px 20px 4px; }
.mxf-a p, .mxf-a li { font-size: 15.5px; line-height: 1.7; color: var(--text); }
.mxf-a p + p { margin-top: 10px !important; }
.mxf-a ul { list-style: none; display: grid; gap: 6px; margin: 4px 0 0 !important; }
.mxf-a li { position: relative; padding-left: 18px; }
.mxf-a li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-l); }
.mxf-a a { color: var(--teal-d) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(23, 157, 153, .35) !important; }
.mxf-a a:hover { text-decoration-color: var(--teal) !important; }
.mxf-a b { color: var(--ink); }
.mxf mark { background: #fdf3c4; color: inherit; border-radius: 3px; padding: 0 1px; }
.mxf-qa.is-target { animation: mxfHi 1.6s ease; }
@keyframes mxfHi { 0%, 40% { background: var(--teal-bg); } 100% { background: transparent; } }

/* empty + cta */
.mxf-empty { padding: 40px 28px; border-radius: 16px; background: var(--bg); border: 1px dashed #cfd8e3; text-align: center; }
.mxf-empty[hidden] { display: none; }
.mxf-empty b { display: block; font-size: 17px; color: var(--ink); }
.mxf-empty p { margin: 6px 0 18px !important; font-size: 15px; color: var(--muted); }
.mxf-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 30px 32px; border-radius: 20px; color: #fff; background: radial-gradient(500px 240px at 100% 0%, rgba(59, 198, 194, .3), transparent 65%), linear-gradient(160deg, #0d2147, #0b1b33); }
.mxf-cta h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.mxf-cta p { margin-top: 6px !important; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .7); }
.mxf-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

/* responsive */
@media (max-width: 900px) {
  .mxf-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mxf-nav, .mxf-body { min-width: 0; }
  .mxf-nav ul { max-width: 100%; }
  .mxf-nav { display: block; position: sticky; top: 64px; z-index: 5; margin: 0 -24px 28px; padding: 10px 24px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .mxf-nav__h, .mxf-nav__help, .mxf-nav__i, .mxf-nav a[data-nav] i, .mxf-nav a[data-nav].is-on::before { display: none; }
  .mxf-nav__card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .mxf-nav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .mxf-nav ul::-webkit-scrollbar { display: none; }
  .mxf-nav a[data-nav] { white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line); font-size: 13.5px; }
  .mxf-nav a[data-nav].is-on { border-color: var(--teal); }
  .mxf-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .mxf-hero { padding: 44px 0 40px; }
  .mxf-hero .mxw-h1 { font-size: 36px; }
  .mxf-search input { height: 54px; font-size: 16px; }
  .mxf-main { padding: 0 0 72px; }
  .mxf-nav { margin: 0 -24px 24px; }
  .mxf-cat h2 { font-size: 19px; }
  .mxf .mxf-qa summary { font-size: 15.5px; }
  .mxf .mxf-qa .mxh-qa__a { padding-right: 4px; }
  .mxf-cta { padding: 24px 20px; }
  .mxf-cta__btns, .mxf-cta__btns .mxh-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .mxf * { animation: none !important; transition: none !important; } }

/* ===== MPJEReview skin: MPJE navy + royal blue, Inter only, tighter corners ===== */
.mxf--mpje {
  --ink: #0d1b3e;
  --ink-2: #1c2f5a;
  --text: #33415c;
  --muted: #5b6880;
  --line: #e1e7f0;
  --bg: #f5f8fc;
  --teal: #1f5fd6;
  --teal-d: #1a4fb3;
  --teal-l: #8ab8ff;
  --teal-bg: #eaf1fd;
  --navy: #102a5c;
  --serif: var(--sans);
  --r: 12px;
}
.mxf--mpje .mxf-hero { background: radial-gradient(760px 420px at 85% 0%, rgba(59, 130, 246, .32), transparent 62%), radial-gradient(600px 380px at 0% 100%, rgba(37, 99, 235, .14), transparent 60%), linear-gradient(180deg, #0a1631 0%, #0f2350 100%); }
.mxf--mpje .mxh-eyebrow--light { color: #8ab8ff; }
.mxf--mpje .mxf-search input:focus { box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6), 0 0 0 4px rgba(138, 184, 255, .5); }
.mxf--mpje .mxf-pop a:hover { border-color: rgba(138, 184, 255, .6); }
.mxf--mpje .mxh-btn--primary { background: linear-gradient(135deg, #2563eb, #1f5fd6); box-shadow: 0 10px 24px -10px rgba(37, 99, 235, .7), inset 0 1px 0 rgba(255, 255, 255, .2); border-radius: 10px; }
.mxf--mpje .mxh-btn--primary:hover { box-shadow: 0 16px 30px -12px rgba(37, 99, 235, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.mxf--mpje .mxh-btn--glass { border-radius: 10px; }
.mxf--mpje .mxf-a li::before { background: #2563eb; }
.mxf--mpje .mxf-a a { text-decoration-color: rgba(31, 95, 214, .35) !important; }
.mxf--mpje .mxf-cta { border-radius: 14px; background: radial-gradient(500px 240px at 100% 0%, rgba(59, 130, 246, .35), transparent 65%), linear-gradient(160deg, #102a5c, #0a1631); }
.mxf--mpje .mxf-cta__btns .mxh-btn { white-space: nowrap; }
.mxf--mpje .mxf-cat__i, .mxf--mpje .mxf-nav a[data-nav] { border-radius: 8px; }
.mxf--mpje .mxf-nav__card, .mxf--mpje .mxf-nav__help { border-radius: 12px; }
.mxf--mpje .mxf-nav__help { background: radial-gradient(260px 160px at 100% 0%, rgba(59, 130, 246, .38), transparent 70%), linear-gradient(160deg, #102a5c, #0a1631); }
.mxf--mpje .mxf-search input { border-radius: 12px; }
/* MPJE header (top bar + main bar) is taller than MedExPrep's */
.mxf--mpje .mxf-nav { top: 128px; }
.mxf--mpje .mxf-cat { scroll-margin-top: 140px; }
.mxf--mpje .mxf-qa { scroll-margin-top: 150px; }
@media (max-width: 900px) { .mxf--mpje .mxf-nav { top: 70px; } }
/* Reign theme boxes content in a .container: break the page out to full width */
main.site-main.mxf--mpje.mxf { flex: 0 0 auto !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }
/* theme input styles must not win over the search field */
.mxf .mxf-search input[type="search"] { height: 60px !important; padding: 0 52px 0 54px !important; border: 0 !important; border-radius: 14px !important; background: #fff !important; font: 500 16.5px var(--sans) !important; color: var(--ink) !important; line-height: normal !important; }
@media (max-width: 640px) { .mxf .mxf-search input[type="search"] { height: 54px !important; font-size: 16px !important; } }
.mxf .mxf-search > .mxh-i { z-index: 1; }