/* MentoroidX Portal Theme — Polished (SASS-quality output)
   Drop-in replacement for assets/css/portal.css
*/

:root{
  --mx-bg: #070A14;
  --mx-surface: #ffffff;
  --mx-ink: #0f172a;
  --mx-muted: #64748b;
  --mx-border: rgba(15,23,42,.10);

  --mx-primary: #111827;
  --mx-accent: #4f46e5;

  --mx-radius-lg: 18px;
  --mx-radius-pill: 999px;

  --mx-shadow-sm: 0 1px 2px rgba(2,6,23,.06), 0 1px 1px rgba(2,6,23,.04);
  --mx-shadow-md: 0 10px 30px rgba(2,6,23,.10);
  --mx-shadow-lg: 0 18px 60px rgba(2,6,23,.14);

  --mx-max: 1200px;
  --mx-gutter: 16px;

  --mx-step-0: 0px;
  --mx-step-1: 6px;
  --mx-step-2: 10px;
  --mx-step-3: 14px;
  --mx-step-4: 18px;
  --mx-step-5: 24px;
  --mx-step-6: 32px;
  --mx-step-7: 44px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(79,70,229,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(17,24,39,.10), transparent 52%),
    var(--mx-bg);
  color:var(--mx-ink);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit}
.mx-shell{max-width:var(--mx-max);margin:0 auto;padding:0 var(--mx-gutter)}

/* Header */
.mx-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(245,247,251,.75);
  border-bottom: 1px solid var(--mx-border);
}
.mx-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--mx-step-4);
  padding: var(--mx-step-4) var(--mx-gutter);
}
.mx-brand{
  display:inline-flex;gap:10px;align-items:center;text-decoration:none;
}
.mx-brand__mark{
  width:34px;height:34px;border-radius:12px;
  background: linear-gradient(135deg, var(--mx-accent), #7c3aed);
  color:#fff;display:grid;place-items:center;
  font-weight:900;
  box-shadow: var(--mx-shadow-sm);
}
.mx-brand__text{font-weight:900;letter-spacing:-.2px}
.mx-nav__list{
  list-style:none;display:flex;gap:14px;padding:0;margin:0;align-items:center;
}
.mx-nav__list a{
  text-decoration:none;
  color: rgba(15,23,42,.82);
  font-weight:700;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
}
.mx-nav__list a:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.95);
}
.mx-header__cta{display:flex;gap:10px;align-items:center}

/* Buttons */
.mx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 10px 14px;
  border-radius: var(--mx-radius-pill);
  font-weight:800;
  font-size:14px;
  letter-spacing:.1px;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  will-change: transform;
}
.mx-btn-primary{
  background: linear-gradient(135deg, var(--mx-primary), #0b1020);
  color:#fff;
  box-shadow: var(--mx-shadow-sm);
}
.mx-btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--mx-shadow-md); }
.mx-btn-ghost{
  background: rgba(255,255,255,.55);
  border-color: var(--mx-border);
  color: rgba(15,23,42,.90);
}
.mx-btn-ghost:hover{ transform: translateY(-1px); background:#fff; box-shadow: var(--mx-shadow-sm); }

.mx-btn:focus{ outline:none; }
.mx-btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(79,70,229,.22), var(--mx-shadow-sm);
}

/* Main spacing */
.mx-main{padding: var(--mx-step-7) 0 var(--mx-step-7)}

/* Typography helpers used by templates */
.mx-h1{font-size: 34px; letter-spacing:-.7px; margin: 0 0 var(--mx-step-3);}
.mx-h2{font-size: 18px; margin: 0 0 var(--mx-step-3);}
.mx-lead{color: var(--mx-muted); max-width: 80ch; margin: 0 0 var(--mx-step-4);}
.mx-muted{color: var(--mx-muted);}
.mx-content{padding:0 var(--mx-gutter)}

/* Hero blocks */
.mx-hero__title{
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -1px;
  margin: 0 0 var(--mx-step-3);
}
.mx-hero__lead{
  color: var(--mx-muted);
  max-width: 78ch;
  margin: 0 0 var(--mx-step-5);
}
.mx-hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* Cards & tiles */
.mx-card{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: var(--mx-step-5);
  box-shadow: var(--mx-shadow-sm);
}
.mx-card--padded{padding: var(--mx-step-6);}
.mx-card:hover{ box-shadow: var(--mx-shadow-md); }

.mx-grid2{display:grid;gap: var(--mx-step-5); grid-template-columns:1fr;}
.mx-grid3{display:grid;gap: var(--mx-step-5); grid-template-columns:1fr;}
@media(min-width: 920px){
  .mx-grid2{grid-template-columns: 1fr 1fr;}
  .mx-grid3{grid-template-columns: 1fr 1fr 1fr;}
}
.mx-tile{
  display:block;
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: var(--mx-step-6);
  box-shadow: var(--mx-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mx-tile:hover{ transform: translateY(-1px); box-shadow: var(--mx-shadow-md); }
.mx-tile__title{ font-weight: 900; }
.mx-tile__text{ color: var(--mx-muted); margin-top: 6px; }

.mx-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
  margin: var(--mx-step-6) 0;
}

/* Footer */
.mx-footer{
  border-top: 1px solid var(--mx-border);
  background: rgba(255,255,255,.75);
}
.mx-footer__inner{
  max-width: var(--mx-max);
  margin: 0 auto;
  padding: var(--mx-step-6) var(--mx-gutter);
  display:grid;
  gap: var(--mx-step-5);
  grid-template-columns: 1fr;
}
@media(min-width: 920px){
  .mx-footer__inner{ grid-template-columns: 1.2fr 1fr 1.6fr; }
}
.mx-footer__brand{ font-weight: 900; letter-spacing:-.2px; }
.mx-footer__title{ font-weight: 900; margin-bottom: 8px; }
.mx-footer__list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.mx-footer__list a{ text-decoration:none; color: rgba(15,23,42,.85); font-weight:700; }
.mx-footer__list a:hover{ text-decoration: underline; }
.mx-footer__muted{ color: var(--mx-muted); }

.mx-footer__bottom{ border-top: 1px solid var(--mx-border); }
.mx-footer__bottom-inner{
  max-width: var(--mx-max);
  margin: 0 auto;
  padding: 14px var(--mx-gutter);
  color: var(--mx-muted);
  font-size: 14px;
}
/* --- OVERRIDE LAYER (wins against PMPro + global styles) --- */
body.wp-theme-mentoroidx-portal-theme {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(79,70,229,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(17,24,39,.10), transparent 52%),
    #f5f7fb !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-header {
  background: rgba(245,247,251,.78) !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-card,
body.wp-theme-mentoroidx-portal-theme .mx-tile,
body.wp-theme-mentoroidx-portal-theme .mxpecb-card,
body.wp-theme-mentoroidx-portal-theme .mxpecb-tile,
body.wp-theme-mentoroidx-portal-theme .mxpecb-faq {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 10px 30px rgba(2,6,23,.10) !important;
}

body.wp-theme-mentoroidx-portal-theme a.mx-btn.mx-btn-primary,
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero a.mx-btn.mx-btn-primary {
  background: linear-gradient(135deg, #111827, #0b1020) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.wp-theme-mentoroidx-portal-theme a.mx-btn.mx-btn-ghost {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: rgba(15,23,42,.92) !important;
}

body.wp-theme-mentoroidx-portal-theme a.mx-btn:hover {
  transform: translateY(-1px) !important;
}

/* ===== FINAL OVERRIDE LAYER (wins against PMPro + WP blocks) ===== */
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero{
  padding: 64px 0 !important;
  color:#fff !important;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(79,70,229,.50), transparent 55%),
    radial-gradient(900px 420px at 80% 0%, rgba(124,58,237,.30), transparent 55%),
    linear-gradient(180deg,#0b1020,#0b1020) !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-hero h1{
  font-size: 44px !important;
  line-height: 1.06 !important;
  letter-spacing: -1px !important;
  margin: 0 0 12px !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-hero p{
  color: rgba(255,255,255,.88) !important;
  max-width: 78ch !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-shell{
  max-width: 1040px !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-card,
body.wp-theme-mentoroidx-portal-theme .mxpecb-tile,
body.wp-theme-mentoroidx-portal-theme .mx-card,
body.wp-theme-mentoroidx-portal-theme .mx-tile{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(2,6,23,.12) !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-btn{
  font-weight: 800 !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}

body.wp-theme-mentoroidx-portal-theme a.mx-btn.mx-btn-primary{
  background: linear-gradient(135deg,#111827,#0b1020) !important;
  color:#fff !important;
  border-color: transparent !important;
}

body.wp-theme-mentoroidx-portal-theme a.mx-btn.mx-btn-ghost{
  background: rgba(255,255,255,.75) !important;
  color: rgba(15,23,42,.95) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-actions{
  gap: 10px !important;
}

body.wp-theme-mentoroidx-portal-theme h2{
  letter-spacing: -0.3px !important;
}

/* ===========================
   PARTNER-GRADE POLISH LAYER
   Paste at VERY BOTTOM
   =========================== */

/* Layout: widen content + real section rhythm */
body.wp-theme-mentoroidx-portal-theme .mx-shell,
body.wp-theme-mentoroidx-portal-theme .mxpecb-shell{
  max-width: 1120px !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-main{
  padding-top: 44px !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-article__title{
  display:none !important; /* hides the extra "PECB" H1 added by WP wrapper */
}

/* HERO: make it full width, premium spacing */
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero{
  padding: 72px 0 !important;
  border-radius: 22px !important;
  margin: 14px auto 26px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 60px rgba(2,6,23,.18) !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-shell{
  padding: 0 22px !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-hero h1{
  font-size: 52px !important;
  line-height: 1.02 !important;
  letter-spacing: -1.4px !important;
  margin: 0 0 14px !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-hero p{
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 82ch !important;
  color: rgba(255,255,255,.88) !important;
  margin: 0 0 18px !important;
}

/* Disclaimer: proper callout */
body.wp-theme-mentoroidx-portal-theme .mxpecb-disclaimer{
  margin-top: 16px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Buttons: tighten, consistent, premium */
body.wp-theme-mentoroidx-portal-theme a.mx-btn{
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row a.mx-btn{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row a.mx-btn:hover{
  background: rgba(255,255,255,.16) !important;
}

/* Section headings: stronger hierarchy */
body.wp-theme-mentoroidx-portal-theme .mx-article__body h2{
  font-size: 18px !important;
  letter-spacing: -0.3px !important;
  margin-top: 22px !important;
  margin-bottom: 10px !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-article__body h3{
  font-size: 16px !important;
  margin: 0 0 6px !important;
}

/* Cards: consistent padding + subtle hover */
body.wp-theme-mentoroidx-portal-theme .mxpecb-card,
body.wp-theme-mentoroidx-portal-theme .mxpecb-tile{
  padding: 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(2,6,23,.12) !important;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-card:hover,
body.wp-theme-mentoroidx-portal-theme .mxpecb-tile:hover{
  transform: translateY(-1px) !important;
}

/* Courses: real 3-column layout */
body.wp-theme-mentoroidx-portal-theme .mxpecb-grid{
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr !important;
}
@media (min-width: 920px){
  body.wp-theme-mentoroidx-portal-theme .mxpecb-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Course tile actions: align buttons neatly */
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions{
  margin-top: 12px !important;
  gap: 10px !important;
}

/* Make “Buy now” stand out in tiles */
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn.mx-btn-primary{
  background: linear-gradient(135deg,#111827,#0b1020) !important;
  color:#fff !important;
  border-color: transparent !important;
}

/* Nav: add a little presence */
body.wp-theme-mentoroidx-portal-theme .mx-header{
  box-shadow: 0 6px 24px rgba(2,6,23,.08) !important;
}

/* ===== Mobile CTA fixes ===== */
@media (max-width: 720px){

  /* Bigger tap targets + no "greyed out" look */
  body.wp-theme-mentoroidx-portal-theme a.mx-btn{
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Safari/Chrome mobile sometimes dims tap highlights */
  body.wp-theme-mentoroidx-portal-theme a.mx-btn{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    appearance: none;
  }

  /* Make hero CTA buttons always visible on dark hero */
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-cta-row a.mx-btn{
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #fff !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-cta-row a.mx-btn:hover,
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-cta-row a.mx-btn:active{
    background: rgba(255,255,255,.22) !important;
  }

  /* Ensure tile buttons are not “washed out” */
  body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn.mx-btn-ghost{
    background: #ffffff !important;
    color: rgba(15,23,42,.95) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    opacity: 1 !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn.mx-btn-primary{
    background: linear-gradient(135deg,#111827,#0b1020) !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  /* Hero spacing + type on small screens */
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero{
    padding: 44px 0 !important;
    border-radius: 18px !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero h1{
    font-size: 34px !important;
    line-height: 1.06 !important;
  }

  /* Make course grid 1-col on mobile with proper spacing */
  body.wp-theme-mentoroidx-portal-theme .mxpecb-grid{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 720px){
  body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn{
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ===========================
   FINAL UI TWEAKS (requested)
   Paste at VERY BOTTOM
   =========================== */

/* (1) Add spacing between hero buttons + prevent edge overlap */
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row{
  gap: 12px !important;
  row-gap: 10px !important;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row a.mx-btn{
  margin: 0 !important;
  white-space: nowrap;
}

/* (1) Give “Package details” + “Official PECB course page” a light filled background */
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn.mx-btn-ghost{
  background: rgba(15,23,42,.04) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.92) !important;
}

/* (2) Fix “grey” look on other pages: force button colors everywhere */
body.wp-theme-mentoroidx-portal-theme a.mx-btn.mx-btn-primary{
  background: linear-gradient(135deg,#111827,#0b1020) !important;
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-text-fill-color: #fff !important;
}
body.wp-theme-mentoroidx-portal-theme a.mx-btn.mx-btn-ghost{
  opacity: 1 !important;
  filter: none !important;
  -webkit-text-fill-color: rgba(15,23,42,.92) !important;
}

/* (3) Mobile: center the menu button titles */
@media (max-width: 720px){
  body.wp-theme-mentoroidx-portal-theme .mx-header__cta{
    width: 100% !important;
    justify-content: center !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn{
    text-align: center !important;
  }
}

/* (4) FAQ: remove white background (make it match page) */
body.wp-theme-mentoroidx-portal-theme .mxpecb-faq{
  background: transparent !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: none !important;
}

/* (5) Top nav active state:
   Highlight based on current page URL.
   - /pecb or /pecb/... => highlight View Courses
   - /trainer => highlight Learner Portal
*/
body.wp-theme-mentoroidx-portal-theme a.mx-btn[href*="/pecb"]{
  background: rgba(255,255,255,.70) !important;
  color: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
}

/* When on /pecb pages, make View Courses look “active” */
body.wp-theme-mentoroidx-portal-theme.page-id-4527 a.mx-btn[href*="/pecb"],
body.wp-theme-mentoroidx-portal-theme a.mx-btn[href*="/pecb"]:focus-visible{
  background: rgba(15,23,42,.08) !important;
  border-color: rgba(15,23,42,.16) !important;
}

/* When on /trainer, make Learner Portal look “active” */
body.wp-theme-mentoroidx-portal-theme a.mx-btn[href*="/trainer"]:focus-visible{
  box-shadow: 0 0 0 4px rgba(79,70,229,.22) !important;
}
body.wp-theme-mentoroidx-portal-theme.page-id-0 a.mx-btn[href*="/trainer"]{
  /* fallback if your trainer page id differs; URL-based below will handle */
}
body.wp-theme-mentoroidx-portal-theme body a.mx-btn[href*="/trainer"]{
  /* no-op */
}
body.wp-theme-mentoroidx-portal-theme a.mx-btn[href*="/trainer"]{
  /* default look */
}

/* URL-based: if path contains /trainer/, highlight Learner Portal */
body.wp-theme-mentoroidx-portal-theme a.mx-btn[href*="/trainer"]{
  /* keep as primary by default */
}
body.wp-theme-mentoroidx-portal-theme :is(body, html) a.mx-btn[href*="/trainer"]{
  /* no-op; left here intentionally */
}

/* (6) Important section red text (no bold)
   Targets the disclaimer box which starts with “Important:”
*/
body.wp-theme-mentoroidx-portal-theme .mxpecb-disclaimer{
  color: #fecaca !important; /* light red on dark hero */
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-disclaimer strong{
  font-weight: 400 !important; /* remove bold */
  color: #fca5a5 !important;    /* red label */
}

/* ===========================
   FINAL POLISH PATCH
   =========================== */

/* 1 & 4) “Important” disclaimer: darker red + bold for readability */
body.wp-theme-mentoroidx-portal-theme .mxpecb-disclaimer{
  color: #fecaca !important;          /* keep body text readable on dark */
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-disclaimer strong{
  font-weight: 800 !important;        /* bold ok */
  color: #ef4444 !important;          /* darker red label */
}

/* On course pages the disclaimer sits on light background; make it darker there too */
body.wp-theme-mentoroidx-portal-theme .mxpecb-course .mxpecb-disclaimer,
body.wp-theme-mentoroidx-portal-theme .mx-article__body .mxpecb-disclaimer{
  color: #b91c1c !important;          /* dark red text on light background */
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-course .mxpecb-disclaimer strong,
body.wp-theme-mentoroidx-portal-theme .mx-article__body .mxpecb-disclaimer strong{
  color: #b91c1c !important;
  font-weight: 800 !important;
}

/* 2) Add spacing between buttons in tiles AND on course pages */
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions,
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row{
  gap: 10px !important;
  row-gap: 10px !important;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn,
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row a.mx-btn{
  margin: 0 !important;
}

/* 3) Dynamic menu highlight based on current page (CSS-only):
   - Highlight View Courses when URL includes /pecb/
   - Highlight Learner Portal when URL includes /trainer/
   (Modern browsers support :has; harmless if not supported.)
*/
body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn{
  background: transparent !important;
  border-color: rgba(15,23,42,.12) !important;
  color: rgba(15,23,42,.92) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn.mx-btn-primary{
  background: linear-gradient(135deg,#111827,#0b1020) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Highlight View Courses when on /pecb/ pages */
@supports selector(body:has(a)) {
  body.wp-theme-mentoroidx-portal-theme:has(a[href*="/pecb/"].mxpecb-hero, a[href*="/pecb/iso-"], a[href*="/pecb/"]){
    /* no-op: this support gate prevents older browsers choking */
  }
}

/* Practical, reliable: based on your page structure:
   if the page contains the PECB hero section, treat as /pecb context
*/
@supports selector(body:has(.mxpecb-hero)) {
  body.wp-theme-mentoroidx-portal-theme:has(.mxpecb-hero) .mx-header__cta a.mx-btn[href*="/pecb"]{
    background: rgba(15,23,42,.08) !important;
    border-color: rgba(15,23,42,.18) !important;
  }
  body.wp-theme-mentoroidx-portal-theme:has(.mxpecb-hero) .mx-header__cta a.mx-btn[href*="/trainer"]{
    background: transparent !important;
    border-color: rgba(15,23,42,.12) !important;
    color: rgba(15,23,42,.92) !important;
  }
}

/* If the page contains “Learner Portal” H1, highlight /trainer */
@supports selector(body:has(h1)) {
  body.wp-theme-mentoroidx-portal-theme:has(h1.mx-h1) .mx-header__cta a.mx-btn[href*="/trainer"]{
    background: rgba(15,23,42,.08) !important;
    border-color: rgba(15,23,42,.18) !important;
  }
}

/* 5) FAQ: remove rectangular border + add spacing between items */
body.wp-theme-mentoroidx-portal-theme .mxpecb-faq{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 14px 0 !important;      /* space between FAQs */
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-faq summary{
  font-weight: 800 !important;
  padding: 8px 0 !important;
  cursor: pointer;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-faq-a{
  padding: 8px 0 0 !important;
  color: rgba(15,23,42,.78) !important;
}

/* ===========================
   HOTFIX PATCH (1–4)
   =========================== */

/* 1) IMPORTANT box: force WHITE background + readable text */
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-disclaimer{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: #111827 !important;                 /* dark text on white */
  box-shadow: 0 10px 26px rgba(2,6,23,.12) !important;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-disclaimer strong{
  color: #b91c1c !important;                 /* darker red label */
  font-weight: 900 !important;
}

/* 2) Buttons still touching: add hard margin between buttons everywhere */
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn,
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row a.mx-btn{
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}
body.wp-theme-mentoroidx-portal-theme .mxpecb-actions a.mx-btn:last-child,
body.wp-theme-mentoroidx-portal-theme .mxpecb-cta-row a.mx-btn:last-child{
  margin-right: 0 !important;
}

/* 3) Top menu non-active state text should be BLACK */
body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn.mx-btn-ghost{
  color: #111827 !important;
  border-color: rgba(15,23,42,.18) !important;
  background: rgba(255,255,255,.70) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn.mx-btn-ghost:hover{
  background: #ffffff !important;
}

/* 4) Hero buttons not visible on desktop: force them visible (white text + pill bg) */
@media (min-width: 721px){
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-cta-row a.mx-btn{
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-cta-row a.mx-btn:hover{
    background: rgba(255,255,255,.20) !important;
  }
}
/* Make the + line smaller in hero */
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero h1 br + .mxpecb-sub,
body.wp-theme-mentoroidx-portal-theme .mxpecb-hero .mxpecb-sub{
  font-size: 0.82em !important;
  font-weight: 800 !important;
  opacity: 0.95 !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn:not(.is-active){
  opacity: 1 !important;
  filter: none !important;
  color: #111827 !important;
}
/* Remove any leftover active-state styling */
body.wp-theme-mentoroidx-portal-theme .mx-header__cta a.mx-btn.is-active{
  background: unset !important;
  box-shadow: unset !important;
}
/* ===== Simple top links (replaces grey pill buttons) ===== */
body.wp-theme-mentoroidx-portal-theme .mx-toplinks{
  display:flex !important;
  align-items:center !important;
  gap: 18px !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-toplink{
  text-decoration:none !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #111827 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-text-fill-color: #111827 !important;
  padding: 8px 2px !important;
  border-bottom: 2px solid transparent !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-toplink:hover{
  border-bottom-color: rgba(79,70,229,.55) !important;
}

@media (max-width: 720px){
  body.wp-theme-mentoroidx-portal-theme .mx-toplinks{
    justify-content:center !important;
    width: 100% !important;
    gap: 14px !important;
  }
}
/* ===== Mobile fix: prevent top links overflow ===== */
@media (max-width: 720px){
  body.wp-theme-mentoroidx-portal-theme .mx-header__inner{
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  body.wp-theme-mentoroidx-portal-theme .mx-toplinks{
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px 14px !important; /* row gap + column gap */
  }

  body.wp-theme-mentoroidx-portal-theme .mx-toplink{
    padding: 8px 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.70) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
  }
}
/* === Mobile tap hijack fix (final) === */
@media (max-width: 900px) {
  /* Prevent any header element from extending invisibly into the page */
  .mx-header,
  .mx-header__inner,
  .mx-shell {
    overflow: clip !important;
  }

  /* Keep brand from becoming a giant invisible link */
  a.mx-brand {
    display: inline-flex !important;
    width: auto !important;
    max-width: 220px !important;
    flex: 0 0 auto !important;
  }

  /* Ensure page content is always above layout quirks */
  .mx-main {
    position: relative;
    z-index: 1;
  }
}

/* === Mobile: ensure provider CTA button receives the tap (prevent card overlay hijack) === */
@media (max-width: 900px) {
  /* The provider card should not steal taps */
  .mxcat-provider {
    pointer-events: none !important;
  }

  /* Only the actual links/buttons inside should be clickable */
  .mxcat-provider a,
  .mxcat-provider button {
    pointer-events: auto !important;
  }
}
/* === iOS MOBILE: stop sticky header stealing taps under it === */
@media (max-width: 900px) {
  /* Header container ignores taps */
  .mx-header,
  .mx-header * {
    pointer-events: none !important;
  }

  /* But the real header links remain tappable */
  .mx-header a,
  .mx-header .mx-toplinks a {
    pointer-events: auto !important;
  }

  /* Give the content a bit more breathing room below sticky header */
  .mx-main {
    padding-top: 18px !important;
  }
}
/* === iOS Safari fix: sticky header can create a ghost tap layer === */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {
    .mx-header {
      position: relative !important; /* disable sticky on iOS only */
      top: auto !important;
    }
  }
}

/* SaaS shell background (surgical): unify canvas behind dark hero/cards */
html, body {
  background-color: #070A14 !important;
  background-image:
    radial-gradient(1400px 820px at 50% 120px, rgba(120, 90, 255, 0.18), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #050712 0%, #070A14 45%, #050712 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

.mx-main {
  background: transparent !important;
}

/* SaaS shell background: make the layout canvas transparent so body bg shows */
.mx-shell.mx-content {
  background: transparent !important;
}

/* SaaS shell background overrides (specificity boost): ensure no wrapper paints light canvas */
body.wp-theme-mentoroidx-portal-theme .mx-main,
body.wp-theme-mentoroidx-portal-theme .mx-shell,
body.wp-theme-mentoroidx-portal-theme .mx-shell.mx-content,
body.wp-theme-mentoroidx-portal-theme #page,
body.wp-theme-mentoroidx-portal-theme .site,
body.wp-theme-mentoroidx-portal-theme .site-content {
  background: transparent !important;
}

/* SaaS gutters (Option A): make outer canvas transparent so body bg shows in areas 1 & 2 */
body.wp-theme-mentoroidx-portal-theme .mx-main,
body.wp-theme-mentoroidx-portal-theme .mx-shell {
  background: transparent !important;
}

/* ===== SaaS canvas polish (QA fix) =====
   Issue observed: page gutters match dark shell, but footer area shows light bands / inconsistent canvas.
   Fix: make footer + common wrappers transparent/dark so the same shell background persists end-to-end.
*/
body.wp-theme-mentoroidx-portal-theme .mx-footer,
body.wp-theme-mentoroidx-portal-theme footer,
body.wp-theme-mentoroidx-portal-theme .site-footer,
body.wp-theme-mentoroidx-portal-theme #colophon {
  background: transparent !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-footer {
  color: rgba(255,255,255,.78) !important;
}

body.wp-theme-mentoroidx-portal-theme .mx-footer a {
  color: rgba(255,255,255,.82) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-footer a:hover {
  color: #ffffff !important;
}

/* Remove light divider bands if any theme/plugin injects them */
body.wp-theme-mentoroidx-portal-theme .mx-footer,
body.wp-theme-mentoroidx-portal-theme .mx-footer * {
  border-color: rgba(255,255,255,.08) !important;
}

/* Ensure the overall page canvas stays dark behind everything */
body.wp-theme-mentoroidx-portal-theme .mx-main {
  background-color:#070A14 !important;
}

/* ===== Header/menu visibility on dark SaaS canvas (surgical) =====
   Scope tightly to .mx-header only (do NOT style all <header> tags).
*/
body.wp-theme-mentoroidx-portal-theme .mx-header{
  background: rgba(7, 10, 20, 0.72) !important;   /* subtle glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Ensure html canvas is not white when WP adds margin-top for admin bar */
html{
  background-color:#070A14 !important;
}

/* Menu links */
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a{
  color: rgba(255,255,255,0.90) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a:focus{
  color:#ffffff !important;
  text-decoration:none;
}

/* Improve legibility on dark */
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a{
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* Menu links */
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a,
body.wp-theme-mentoroidx-portal-theme nav a {
  color: rgba(255,255,255,0.88) !important;
}

/* Hover/focus */
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a:focus,
body.wp-theme-mentoroidx-portal-theme nav a:hover,
body.wp-theme-mentoroidx-portal-theme nav a:focus {
  color: #ffffff !important;
  text-decoration: none;
}

/* Improve legibility on dark */
body.wp-theme-mentoroidx-portal-theme .mx-toplinks a,
body.wp-theme-mentoroidx-portal-theme .mx-toplinks .mx-pill {
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* ===== QA fix: header text contrast + footer readability (contact page) ===== */
/* Header: ensure logo + nav text is readable on the grey/glass header */
body.wp-theme-mentoroidx-portal-theme .mx-header,
body.wp-theme-mentoroidx-portal-theme .mx-header *{
  color: rgba(255,255,255,0.92) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header a{
  color: rgba(255,255,255,0.92) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-header a:focus{
  color: #ffffff !important;
}

/* Footer: contact page shows a light band; force footer to dark so links are readable */
body.wp-theme-mentoroidx-portal-theme .mx-footer{
  background: rgba(7,10,20,0.92) !important;
  color: rgba(255,255,255,0.80) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-footer a{
  color: rgba(255,255,255,0.86) !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-footer a:hover{
  color:#ffffff !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-footer,
body.wp-theme-mentoroidx-portal-theme .mx-footer *{
  border-color: rgba(255,255,255,0.08) !important;
}

/* ===== QA fix: force header nav items white (surgical) ===== */
body.wp-theme-mentoroidx-portal-theme .mx-header nav a,
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a,
body.wp-theme-mentoroidx-portal-theme .mx-header .menu a,
body.wp-theme-mentoroidx-portal-theme .mx-header a{
  color: #ffffff !important;
  opacity: 0.92;
}
body.wp-theme-mentoroidx-portal-theme .mx-header nav a:visited,
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a:visited,
body.wp-theme-mentoroidx-portal-theme .mx-header .menu a:visited{
  color: #ffffff !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header nav a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-header .menu a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-header nav a:focus,
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a:focus,
body.wp-theme-mentoroidx-portal-theme .mx-header .menu a:focus{
  color: #ffffff !important;
  opacity: 1;
}

/* ===== QA fix: mobile header menu button text stays black ===== */
@media (max-width: 720px){
  body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplink{
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
  }
}

/* ===== QA fix (strong): header nav contrast by breakpoint ===== */
/* Desktop/tablet: white nav text */
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks,
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.92 !important;
}
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a:hover,
body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a:focus{
  opacity: 1 !important;
}

/* Mobile: if nav collapses onto a light header/menu surface, keep text black */
@media (max-width: 720px){
  body.wp-theme-mentoroidx-portal-theme .mx-header{
    background: rgba(245,247,251,0.92) !important;
    border-bottom: 1px solid rgba(17,24,39,0.10) !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks,
  body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks *{
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }
  body.wp-theme-mentoroidx-portal-theme .mx-header .mx-toplinks a{
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
}

/* ===== QA fix (mobile): keep header dark; make menu toggle readable ===== */
@media (max-width: 720px){
  /* Keep header consistent with SaaS dark shell (avoid full white header) */
  body.wp-theme-mentoroidx-portal-theme .mx-header{
    background: rgba(7, 10, 20, 0.72) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Mobile menu toggle/button: light pill with black text for contrast */
  body.wp-theme-mentoroidx-portal-theme .mx-header button,
  body.wp-theme-mentoroidx-portal-theme .mx-header .menu-toggle,
  body.wp-theme-mentoroidx-portal-theme .mx-header .mx-menu-toggle,
  body.wp-theme-mentoroidx-portal-theme .mx-header [aria-controls],
  body.wp-theme-mentoroidx-portal-theme .mx-header [data-mx-menu-toggle]{
    background: rgba(245,247,251,0.95) !important;
    border: 1px solid rgba(17,24,39,0.12) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
  }
}

/* ===== QA fix: policy + contact pages readable on dark SaaS canvas ===== */
/* Contact page */
body.page-contact .mx-main,
body.page-contact .mx-main p,
body.page-contact .mx-main label,
body.page-contact .mx-main h1,
body.page-contact .mx-main h2,
body.page-contact .mx-main h3{
  color: rgba(255,255,255,0.92) !important;
}
body.page-contact .mx-main a{ color: rgba(255,255,255,0.92) !important; text-decoration: underline; }

/* Policy pages (slugs/body classes may vary; cover common WP variants) */
body.page-terms-and-conditions .mx-main,
body.page-cookie-policy .mx-main,
body.page-privacy .mx-main,
body.page-privacy-policy .mx-main,
body.page-data-privacy .mx-main{
  color: rgba(255,255,255,0.88) !important;
}
body.page-terms-and-conditions .mx-main h1,
body.page-cookie-policy .mx-main h1,
body.page-privacy .mx-main h1,
body.page-privacy-policy .mx-main h1,
body.page-data-privacy .mx-main h1{
  color: #ffffff !important;
}
body.page-terms-and-conditions .mx-main h2,
body.page-cookie-policy .mx-main h2,
body.page-privacy .mx-main h2,
body.page-privacy-policy .mx-main h2,
body.page-data-privacy .mx-main h2,
body.page-terms-and-conditions .mx-main h3,
body.page-cookie-policy .mx-main h3,
body.page-privacy .mx-main h3,
body.page-privacy-policy .mx-main h3,
body.page-data-privacy .mx-main h3{
  color: rgba(255,255,255,0.92) !important;
}
body.page-terms-and-conditions .mx-main a,
body.page-cookie-policy .mx-main a,
body.page-privacy .mx-main a,
body.page-privacy-policy .mx-main a,
body.page-data-privacy .mx-main a{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: underline;
}

/* ===== QA fix (strong): default WP page content readable on dark canvas =====
   Some policy pages do not use expected body classes; style the standard WP content containers.
   Scope: non-home pages, and avoid touching mxpecb SaaS components (they style themselves).
*/
body.wp-theme-mentoroidx-portal-theme:not(.home) .mx-main :where(.entry-title, .wp-block-post-title, h1){
  color:#ffffff !important;
}
body.wp-theme-mentoroidx-portal-theme:not(.home) .mx-main :where(.entry-content, .wp-block-post-content, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block, article){
  color: rgba(255,255,255,0.90) !important;
}

/* Headings inside WP content */
body.wp-theme-mentoroidx-portal-theme:not(.home) .mx-main :where(.entry-content, .wp-block-post-content) :where(h2,h3,h4){
  color: rgba(255,255,255,0.94) !important;
}

/* Paragraphs, lists */
body.wp-theme-mentoroidx-portal-theme:not(.home) .mx-main :where(.entry-content, .wp-block-post-content) :where(p,li){
  color: rgba(255,255,255,0.88) !important;
}

/* Links */
body.wp-theme-mentoroidx-portal-theme:not(.home) .mx-main :where(.entry-content, .wp-block-post-content) a{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: underline;
}

/* Do NOT override mxpecb styled areas */
body.wp-theme-mentoroidx-portal-theme .mx-main .mxpecb :where(.entry-content, .wp-block-post-content, article){
  color: inherit !important;
}