/* ============================================================
   MMUST CU Phase 50.1
   Member Portal Mobile UX + Landscape ID Card + Global Spacing
   ============================================================ */
:root{
  --p501-blue:#0099FF;
  --p501-orange:#FF9900;
  --p501-white:#FFFFFF;
  --p501-ink:#111827;
  --p501-border:#d8e4ee;
  --p501-soft:#f5f9fc;
}

/* ------------------------------------------------------------
   A. GLOBAL PUBLIC SITE RHYTHM
   The older site used 100px bottom + 100px top on adjacent sections.
   This keeps pages generous but removes the large dead bands.
   ------------------------------------------------------------ */
.public-site-body main > .section{
  padding-top:clamp(38px,3.8vw,56px)!important;
  padding-bottom:clamp(38px,3.8vw,56px)!important;
}
.public-site-body main > .section + .section{
  padding-top:clamp(32px,3.2vw,48px)!important;
}
.public-site-body .section-heading{
  margin-bottom:clamp(24px,2.7vw,34px)!important;
}
.public-site-body .split-head{
  margin-bottom:clamp(26px,3vw,38px)!important;
  gap:clamp(28px,4vw,58px)!important;
}
.public-site-body .section-action{margin-top:clamp(20px,2.4vw,28px)!important}
.public-site-body .page-hero{
  padding-top:clamp(70px,7vw,94px)!important;
  padding-bottom:clamp(50px,5vw,68px)!important;
}
.public-site-body .page-hero.compact{
  padding-top:clamp(58px,6vw,76px)!important;
  padding-bottom:clamp(40px,4.2vw,54px)!important;
}
.public-site-body .cta-section,
.public-site-body .final-join-cta{
  padding-top:clamp(46px,5vw,64px)!important;
  padding-bottom:clamp(46px,5vw,64px)!important;
}
/* Specific screenshot case: Media cards -> Member Privacy */
.public-site-body .phase39-media-section{padding-bottom:clamp(30px,3vw,44px)!important}
.public-site-body .phase39-media-section + .section{padding-top:clamp(30px,3vw,44px)!important}

/* ------------------------------------------------------------
   B. SIGNED-IN PUBLIC-SITE -> MEMBER PORTAL SWITCHER
   Visible on mobile/tablet where the desktop Dashboard button collapses.
   ------------------------------------------------------------ */
.phase501-public-portal-switch{display:none}
@media(max-width:1050px){
  .public-site-body .v3-nav-wrap{
    grid-template-columns:minmax(0,1fr) auto auto auto!important;
  }
  .phase501-public-portal-switch{
    display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:4px 9px 4px 5px;
    border:1px solid rgba(0,153,255,.28);border-radius:999px;background:#fff;color:var(--p501-ink);
    text-decoration:none;box-shadow:0 6px 16px rgba(0,153,255,.10);min-width:0;
  }
  .phase501-public-avatar,.phase501-header-avatar{
    position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:visible;
    display:grid;place-items:center;background:linear-gradient(135deg,var(--p501-blue),#0079c8);
    color:#fff;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,153,255,.24);
    font:900 10px/1 "Montserrat",sans-serif;
  }
  .phase501-public-avatar img,.phase501-header-avatar img{
    width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  }
  .phase501-public-avatar i,.phase501-header-avatar i{
    position:absolute;right:-3px;bottom:-2px;width:14px;height:14px;border:2px solid #fff;border-radius:50%;
    display:grid;place-items:center;background:var(--p501-orange);color:#111827;font:900 10px/1 Arial,sans-serif;
  }
  .phase501-public-portal-copy{display:grid;line-height:1.03}
  .phase501-public-portal-copy small{font:900 7px/1 "Montserrat",sans-serif;letter-spacing:.08em;color:#64748b}
  .phase501-public-portal-copy strong{margin-top:3px;font:900 11px/1 "Montserrat",sans-serif;color:#0078c7}
}
@media(max-width:650px){
  .phase501-public-portal-copy{display:none}
  .phase501-public-portal-switch{padding:4px;min-width:42px;justify-content:center}
  .phase501-public-avatar{width:34px;height:34px;flex-basis:34px}
}
@media(max-width:390px){
  .public-site-body .v3-brand strong{font-size:10.8px!important}
}

/* Desktop member profile control now uses the real profile photo/initials. */
.phase501-header-profile{gap:8px!important}
.phase501-header-profile .phase501-header-avatar{
  width:30px;height:30px;flex:0 0 30px;
}

/* ------------------------------------------------------------
   C. MEMBER MOBILE BAR — one Menu, one Profile avatar.
   Alerts remain in the bottom app bar, removing the duplicate bell.
   ------------------------------------------------------------ */
@media(max-width:1050px){
  .member-portal-mobilebar{
    grid-template-columns:auto minmax(0,1fr) 48px!important;
  }
  .phase501-mobile-profile{
    position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
    overflow:visible;text-decoration:none;background:linear-gradient(135deg,var(--p501-blue),#0078c7);
    color:#fff;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,153,255,.24),0 7px 18px rgba(0,153,255,.13);
    font:900 12px/1 "Montserrat",sans-serif;
  }
  .phase501-mobile-profile img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
  .phase501-mobile-profile span{display:block}
  .phase501-mobile-profile i{
    position:absolute;right:-2px;bottom:-1px;width:17px;height:17px;border-radius:50%;
    border:2px solid #fff;background:var(--p501-orange);color:#111827;
    display:grid;place-items:center;font:900 11px/1 Arial,sans-serif;
  }
}
@media(max-width:760px){
  /* Persistent navigation already contains Home; hide redundant dashboard buttons in page heads. */
  .member-portal-body .member-head .head-actions a[href*="/member/index.php"]{display:none!important}
  .member-portal-footer-links{display:none!important}
  .member-portal-footer-inner{justify-content:center!important;text-align:center!important}
}

/* ------------------------------------------------------------
   D. TRUE LANDSCAPE DIGITAL MEMBERSHIP CARD ON PHONES
   Uses ISO/IEC ID-1 visual ratio: 85.60 : 53.98 (1.586)
   ------------------------------------------------------------ */
@media(max-width:700px){
  .digital-card-page .member-head{display:none!important}
  .digital-card-page .digital-card-layout{
    width:min(100% - 16px,620px)!important;margin:10px auto 0!important;display:grid!important;grid-template-columns:1fr!important;
  }
  .digital-card-page .digital-card-column{width:100%!important;min-width:0!important}
  .digital-card-page .mmustcu-digital-card{
    width:100%!important;max-width:none!important;aspect-ratio:85.6/53.98!important;height:auto!important;
    min-height:0!important;margin:0!important;border-radius:18px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 34%!important;
    grid-template-rows:23% 49% 28%!important;
    border:1px solid #cfdde8!important;box-shadow:0 14px 34px rgba(15,23,42,.13)!important;
    background:#fff!important;overflow:hidden!important;
  }
  .digital-card-page .mmustcu-digital-card:before{
    position:absolute!important;left:0!important;right:0!important;top:0!important;height:5px!important;z-index:3!important;
  }
  .digital-card-page .card-brand-row{
    grid-column:1/-1!important;grid-row:1!important;
    display:grid!important;grid-template-columns:40px minmax(0,1fr) auto!important;
    gap:7px!important;align-items:center!important;padding:8px 10px 5px!important;
    border-bottom:1px solid #e1e8ee!important;min-height:0!important;
  }
  .digital-card-page .card-brand-row img{width:34px!important;height:34px!important}
  .digital-card-page .card-brand-row strong{font-size:clamp(7px,2.45vw,10px)!important;line-height:1.08!important}
  .digital-card-page .card-brand-row span{font-size:clamp(5px,1.55vw,7px)!important;margin-top:2px!important}
  .digital-card-page .card-brand-row>b{
    grid-column:auto!important;justify-self:end!important;
    padding:4px 6px!important;font-size:clamp(5px,1.5vw,7px)!important;border-radius:999px!important;
  }

  .digital-card-page .card-identity-row{
    grid-column:1!important;grid-row:2!important;
    display:grid!important;grid-template-columns:clamp(54px,18vw,76px) minmax(0,1fr)!important;
    gap:8px!important;align-items:center!important;padding:7px 7px 4px 10px!important;min-width:0!important;
  }
  .digital-card-page .card-photo{
    width:clamp(54px,18vw,76px)!important;height:clamp(61px,20.5vw,86px)!important;
    border-radius:9px!important;align-self:center!important;
  }
  .digital-card-page .card-photo img{object-fit:cover!important}
  .digital-card-page .card-photo>span{font-size:clamp(22px,8vw,34px)!important}
  .digital-card-page .card-member-copy{min-width:0!important;align-self:center!important}
  .digital-card-page .card-member-copy>small,
  .digital-card-page .card-registration small{font-size:clamp(4.5px,1.4vw,6px)!important;letter-spacing:.03em!important}
  .digital-card-page .card-member-copy h2{
    font-size:clamp(12px,4.25vw,18px)!important;line-height:1.02!important;margin:2px 0 6px!important;
    overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .digital-card-page .card-registration strong{
    font-size:clamp(7px,2.55vw,10px)!important;margin-top:2px!important;white-space:nowrap!important;
  }
  .digital-card-page .card-status-line{gap:4px!important;margin-top:5px!important}
  .digital-card-page .card-status-line i{width:6px!important;height:6px!important}
  .digital-card-page .card-status-line span{font-size:clamp(5px,1.6vw,7px)!important}

  .digital-card-page .card-community-grid{
    grid-column:1!important;grid-row:3!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin:2px 7px 7px 10px!important;border-radius:8px!important;min-width:0!important;
  }
  .digital-card-page .card-community-grid>div{
    padding:5px 5px!important;border-right:1px solid #dde6ed!important;border-bottom:0!important;min-width:0!important;
  }
  .digital-card-page .card-community-grid>div:last-child{border-right:0!important}
  .digital-card-page .card-community-grid small{font-size:clamp(4px,1.18vw,5.5px)!important}
  .digital-card-page .card-community-grid strong{
    font-size:clamp(5px,1.5vw,7px)!important;line-height:1.18!important;margin-top:2px!important;
    display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;
  }

  .digital-card-page .card-verification-row{
    grid-column:2!important;grid-row:2/4!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
    gap:5px!important;min-height:0!important;margin:0!important;padding:7px 6px!important;text-align:center!important;
    background:#050505!important;overflow:hidden!important;
  }
  .digital-card-page .card-qr-wrap{
    position:relative!important;width:clamp(62px,22vw,88px)!important;height:clamp(62px,22vw,88px)!important;
    min-width:0!important;min-height:0!important;padding:5px!important;margin:0 auto!important;justify-self:center!important;border-radius:8px!important;
  }
  .digital-card-page .card-qr-wrap>canvas,
  .digital-card-page .card-qr-wrap>img{
    position:static!important;inset:auto!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
    object-fit:contain!important;margin:0!important;
  }
  .digital-card-page .card-verification-row>div:last-child{min-width:0!important;width:100%!important}
  .digital-card-page .card-verification-row small{font-size:clamp(4px,1.15vw,5.5px)!important}
  .digital-card-page .card-verification-row strong{
    font-size:clamp(5.5px,1.7vw,7.5px)!important;line-height:1.2!important;margin:2px 0!important;
  }
  .digital-card-page .card-verification-row span{font-size:clamp(4px,1.1vw,5.5px)!important}
  .digital-card-page .card-verification-row em{font-size:clamp(4px,1.05vw,5px)!important;margin-top:3px!important;line-height:1.15!important}

  .digital-card-page .card-print-note{
    margin:8px 2px 13px!important;font-size:10px!important;line-height:1.45!important;color:#64748b!important;
  }
  .digital-card-page .digital-card-side{grid-template-columns:1fr!important;gap:10px!important}
  .digital-card-page .digital-card-side .panel{padding:16px!important}

  /* Assist must not sit on top of the actual ID card. */
  .member-portal-body:has(.digital-card-page) .mmustcu-assist{
    bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;
    right:10px!important;
    transform:scale(.84)!important;
    transform-origin:right bottom!important;
  }
}
@media(max-width:390px){
  .digital-card-page .mmustcu-digital-card{border-radius:14px!important}
  .digital-card-page .card-brand-row{grid-template-columns:34px minmax(0,1fr) auto!important;padding-left:8px!important}
  .digital-card-page .card-brand-row img{width:29px!important;height:29px!important}
  .digital-card-page .card-identity-row{padding-left:8px!important}
  .digital-card-page .card-community-grid{margin-left:8px!important}
}

/* Exact physical ID-card print size when browser printing is used. */
@media print{
  .digital-card-page .mmustcu-digital-card{
    width:85.6mm!important;max-width:85.6mm!important;height:53.98mm!important;aspect-ratio:auto!important;
    margin:8mm auto!important;border-radius:3mm!important;box-shadow:none!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 34%!important;grid-template-rows:23% 49% 28%!important;
    print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important;
  }
  .digital-card-page .card-brand-row{grid-column:1/-1!important;grid-row:1!important;padding:2mm 2.5mm 1mm!important;grid-template-columns:10mm minmax(0,1fr) auto!important;gap:1.5mm!important}
  .digital-card-page .card-brand-row img{width:8.5mm!important;height:8.5mm!important}
  .digital-card-page .card-brand-row strong{font-size:5.8pt!important}.digital-card-page .card-brand-row span{font-size:3.6pt!important}.digital-card-page .card-brand-row>b{font-size:3.5pt!important;padding:1mm 1.4mm!important}
  .digital-card-page .card-identity-row{grid-column:1!important;grid-row:2!important;grid-template-columns:17mm minmax(0,1fr)!important;gap:2mm!important;padding:1.5mm 1.5mm 1mm 2.5mm!important}
  .digital-card-page .card-photo{width:17mm!important;height:20mm!important;border-radius:2mm!important}.digital-card-page .card-photo img{object-fit:cover!important}
  .digital-card-page .card-member-copy h2{font-size:9pt!important;margin:1mm 0 1.5mm!important}.digital-card-page .card-member-copy>small,.digital-card-page .card-registration small{font-size:3.5pt!important}.digital-card-page .card-registration strong{font-size:5pt!important}.digital-card-page .card-status-line span{font-size:4pt!important}
  .digital-card-page .card-community-grid{grid-column:1!important;grid-row:3!important;grid-template-columns:repeat(4,1fr)!important;margin:.5mm 1.5mm 1.5mm 2.5mm!important}.digital-card-page .card-community-grid>div{padding:1mm!important;border-bottom:0!important}.digital-card-page .card-community-grid small{font-size:3pt!important}.digital-card-page .card-community-grid strong{font-size:3.5pt!important}
  .digital-card-page .card-verification-row{grid-column:2!important;grid-row:2/4!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:1mm!important;padding:1.5mm!important;margin:0!important;text-align:center!important;min-height:0!important}
  .digital-card-page .card-qr-wrap{position:relative!important;width:19mm!important;height:19mm!important;min-width:19mm!important;min-height:19mm!important;padding:1mm!important;margin:0 auto!important}
  .digital-card-page .card-qr-wrap>canvas,.digital-card-page .card-qr-wrap>img{position:static!important;inset:auto!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}
  .digital-card-page .card-verification-row small{font-size:3pt!important}.digital-card-page .card-verification-row strong{font-size:4pt!important}.digital-card-page .card-verification-row span,.digital-card-page .card-verification-row em{font-size:2.8pt!important;margin-top:.5mm!important}
}

/* ------------------------------------------------------------
   E. MOBILE MEMBER PORTAL DUPLICATE-CONTROL CLEANUP
   ------------------------------------------------------------ */
@media(max-width:760px){
  /* Bottom app bar is the persistent Alerts entry; top bar owns Menu and Profile. */
  .member-portal-footer{padding-top:12px!important;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
  .member-portal-footer-inner{min-height:0!important}
  /* Tighten member pages now that navigation is persistent. */
  .member-portal-content .member-shell{padding-top:12px!important;padding-bottom:54px!important}
  .member-portal-content .member-head{margin-bottom:16px!important}
}

/* ------------------------------------------------------------
   F. MOBILE GLOBAL SPACING
   ------------------------------------------------------------ */
@media(max-width:700px){
  .public-site-body main > .section{
    padding-top:34px!important;padding-bottom:34px!important;
  }
  .public-site-body main > .section + .section{padding-top:30px!important}
  .public-site-body .section-heading{margin-bottom:22px!important}
  .public-site-body .split-head{margin-bottom:24px!important;gap:20px!important}
  .public-site-body .page-hero{padding-top:54px!important;padding-bottom:40px!important}
  .public-site-body .page-hero.compact{padding-top:48px!important;padding-bottom:34px!important}
  .public-site-body .phase39-media-section{padding-bottom:26px!important}
  .public-site-body .phase39-media-section + .section{padding-top:26px!important}
}

@media(prefers-reduced-motion:reduce){
  .phase501-public-portal-switch,.phase501-mobile-profile{transition:none!important}
}


/* ============================================================
   Phase 50.2 — Member profile avatar rendering hotfix
   Keeps uploaded photos circular and prevents rectangular/oval stretching.
   ============================================================ */

/* Shared avatar shell */
.phase501-header-avatar,
.phase501-public-avatar,
.phase501-mobile-profile{
  box-sizing:border-box!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
  padding:0!important;
  line-height:1!important;
}

/* Every member-profile photo must fill a square crop, never inherit button/image dimensions. */
.phase501-header-avatar img,
.phase501-public-avatar img,
.phase501-mobile-profile img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
}

/* Desktop member-header profile chip */
.phase501-header-profile{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:46px!important;
  padding:5px 13px 5px 6px!important;
  border-radius:15px!important;
}
.phase501-header-profile .phase501-header-avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  flex-basis:36px!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 2px rgba(0,153,255,.32)!important;
  background:linear-gradient(135deg,#0099FF,#0079c8)!important;
}
.phase501-header-profile .phase501-header-avatar b{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  color:#fff!important;
  font:900 10px/1 "Montserrat",sans-serif!important;
}

/* Public-site signed-in avatar */
.phase501-public-avatar{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  flex-basis:36px!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 2px rgba(0,153,255,.30)!important;
  background:linear-gradient(135deg,#0099FF,#0079c8)!important;
}

/* Member Portal mobile avatar: force a true circle, not an oval. */
.phase501-mobile-profile{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
  flex-basis:46px!important;
  justify-self:end!important;
  border:2px solid #fff!important;
  box-shadow:0 0 0 3px rgba(0,153,255,.27),0 6px 16px rgba(15,23,42,.12)!important;
  background:#fff!important;
}
.phase501-mobile-profile span{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#0099FF,#0079c8)!important;
  color:#fff!important;
  font:900 12px/1 "Montserrat",sans-serif!important;
}

/* Keep the small orange add-photo badge outside the circular crop. */
.phase501-header-avatar i,
.phase501-public-avatar i,
.phase501-mobile-profile i{
  position:absolute!important;
  right:-3px!important;
  bottom:-3px!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  border-radius:50%!important;
  border:2px solid #fff!important;
  background:#FF9900!important;
  color:#111827!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  font:900 10px/1 Arial,sans-serif!important;
}

/* The mobile profile anchor needs visible overflow only for the + badge.
   The actual image remains clipped by a nested circle rule below. */
.phase501-mobile-profile{
  overflow:visible!important;
}
.phase501-mobile-profile img,
.phase501-mobile-profile span{
  overflow:hidden!important;
  clip-path:circle(50% at 50% 50%)!important;
}

/* Remove any legacy global image height rules from the profile chip. */
.portal-header-profile img,
.member-portal-mobilebar img{
  object-fit:cover!important;
}

/* Responsive sizing: smaller phones stay neat. */
@media(max-width:420px){
  .phase501-mobile-profile{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    flex-basis:42px!important;
  }
  .phase501-public-avatar{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    flex-basis:34px!important;
  }
}