/* MMI brand typefaces — self-hosted.
   Default (headings + body) = Aeonik.
   Gilroy is kept defined as a fallback/swap option for body (e.g. on the portal)
   — to swap body to Gilroy, change --font-body below to 'Gilroy'. */

:root {
  --font-heading: 'Aeonik', 'Gilroy', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Aeonik', 'Gilroy', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Aeonik — primary (headings + body) */
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Regular.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Bold.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* Gilroy — kept as body swap option (not applied by default) */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* MMI logo (header + mobile menu) — matches the LMS portal logo */
.logo{gap:0 !important;}
.logo-img{height:36px;width:auto;display:block;}
@media(max-width:560px){ .logo-img{height:30px;} }

/* Header currency switcher — custom dropdown (code in header, full names in list) */
.curr-dd{position:relative;display:inline-block;font-family:var(--font-body);}
.curr-dd-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid var(--gray-300,#e9edf3);border-radius:9px;background:#fff;color:var(--navy,#0b1b3f);font-size:13px;font-weight:700;cursor:pointer;line-height:1;}
.curr-dd-btn:hover{border-color:var(--navy,#0b1b3f);}
.curr-dd-caret{font-size:10px;opacity:.7;}
.curr-dd-list{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--gray-300,#e9edf3);border-radius:10px;box-shadow:0 10px 30px rgba(11,27,63,.14);padding:6px;margin:0;list-style:none;z-index:1000;display:none;}
.curr-dd.open .curr-dd-list{display:block;}
.curr-dd-list li{padding:8px 10px;border-radius:7px;font-size:13.5px;color:var(--ink,#1c2437);cursor:pointer;white-space:nowrap;}
.curr-dd-list li:hover{background:var(--section-bg,#eaf0f3);}
.curr-dd-list li.active{background:var(--navy,#0b1b3f);color:#fff;font-weight:700;}

/* Responsive header/utility-bar hardening — ports the fixes made on index.html
   to all pages (prevents horizontal overflow + allows wrapping on mobile).
   These add properties the stale inline rules don't set, so no !important needed. */
.wrap{width:100%;}
.logo{min-width:0;}
.nav-links{flex-wrap:wrap;}
.nav-links a{white-space:nowrap;}
.nav-right{flex-shrink:0;}
.utility-bar{overflow-x:hidden;}
.utility-bar .wrap{max-width:100%;}
.utility-bar .promo{min-width:0;overflow-wrap:break-word;word-wrap:break-word;}
.utility-bar .promo i{flex-shrink:0;}
.utility-links a{white-space:nowrap;}
@media(max-width:560px){
  .utility-bar .promo span{font-size:11px;}
}

/* Frontend header — glassmorphism (sticky is already set inline via header{position:sticky}) */
#site-header{
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(16,24,38,0.06);
  transition:background .3s ease, box-shadow .3s ease;
}
#site-header.scrolled{
  background:rgba(255,255,255,0.85);
  box-shadow:0 6px 24px rgba(16,24,38,0.08);
}

/* Fix sticky header: html/body had overflow-x:hidden which BREAKS position:sticky.
   overflow-x:clip prevents horizontal scroll WITHOUT creating a scroll container. */
html, body { overflow-x: clip !important; }
#site-header { position: sticky !important; top: 0 !important; }

/* Currency dropdown: must overlay OUT of the header (header's overflow-x:hidden was
   trapping it, forcing overflow-y:auto). And keep it inside the viewport on mobile. */
#site-header{ overflow:visible !important; }
.curr-dd-list{ min-width:200px; }
@media(max-width:560px){
  .curr-dd-list{ min-width:0; max-width:calc(100vw - 24px); right:0; }
  .curr-dd-btn{ padding:6px 8px; font-size:12px; }
}