/*! © 2026 UTM Big Data Centre (UTM BDC), Universiti Teknologi Malaysia. All rights reserved.
    Unauthorised copying, modification or redistribution of this file is prohibited. */
/* UTM BDC — EN | BM language switch (header). Uses the front page's tokens. */
.lang-switch {
  display: inline-flex; align-items: center; flex: none; gap: 2px; padding: 3px;
  margin-left: .7rem; border: 1px solid var(--border-soft, #E8DED3); border-radius: 999px;
  background: var(--cream-light, #FCF9F4);
}
.lang-switch button {
  min-width: 38px; min-height: 30px; padding: .25rem .6rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-secondary, #6C6460);
  font: 700 .72rem/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .06em; cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-switch button:hover { color: var(--utm-maroon, #5C001F); }
.lang-switch button[aria-pressed="true"] { background: var(--utm-maroon, #5C001F); color: #fff; cursor: default; }
.lang-switch button:focus-visible { outline: 3px solid #B06A00; outline-offset: 2px; }
.lang-switch__sep { width: 1px; height: 14px; background: var(--border-soft, #E8DED3); }
.lang-switch button[aria-pressed="true"] + .lang-switch__sep,
.lang-switch .lang-switch__sep:has(+ button[aria-pressed="true"]) { opacity: 0; }

/* Malay labels run longer: tighten desktop nav so it stays on one line */
@media (min-width: 981px) {
  .lang-ms .header-nav { gap: .8rem; }
  .lang-ms .header-nav a, .lang-ms .header-nav .nav-mega__trigger { font-size: .72rem; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  .lang-ms .header-nav { gap: .55rem; }
  .lang-ms .header-nav a, .lang-ms .header-nav .nav-mega__trigger { font-size: .68rem; }
  .lang-ms .nav-ai-trigger { padding-inline: .55rem; }
}
@media (max-width: 980px) {
  .lang-switch { margin-left: auto; margin-right: .3rem; }
}
@media (max-width: 420px) {
  .lang-switch button { min-width: 34px; padding-inline: .45rem; }
}

/* Fit header row with the switch: wider header on large screens, icon-only AI button when tight */
@media (min-width: 981px) {
  .main-header .container { max-width: 1380px; gap: 16px; }
}
@media (min-width: 981px) and (max-width: 1360px) {
  .nav-ai-trigger { font-size: 0 !important; gap: 0 !important; padding: .5rem .62rem !important; }
  .nav-ai-trigger i { font-size: .82rem; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .header-brand__text--bdc .header-brand__university { display: none; }
}
/* Phones: show only the button for the other language */
@media (max-width: 700px) {
  .main-header .container { gap: 8px; }
  .lang-switch { margin-right: 0; padding: 2px; }
  .lang-switch button[aria-pressed="true"], .lang-switch__sep { display: none; }
  .lang-switch button { min-width: 40px; min-height: 36px; }
}

/* Placement: header switch on wide screens (≥1281px) and phones (≤700px, where the top bar is hidden);
   top-bar switch in between, where the header row is full. Both stay in sync. */
.lang-switch--util { display: none; margin-left: 0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); padding: 2px; }
.lang-switch--util button { min-height: 24px; min-width: 32px; color: rgba(255,255,255,.8); font-size: .66rem; }
.lang-switch--util button:hover { color: var(--utm-gold, #F8BE17); }
.lang-switch--util button[aria-pressed="true"] { background: var(--utm-gold, #F8BE17); color: var(--utm-dark-maroon, #3A0F1E); }
.lang-switch--util .lang-switch__sep { background: rgba(255,255,255,.22); }
@media (min-width: 701px) and (max-width: 1280px) {
  .lang-switch--header { display: none; }
  .lang-switch--util { display: inline-flex; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .lang-ms .header-nav { gap: .42rem; }
  .lang-ms .header-nav a, .lang-ms .header-nav .nav-mega__trigger { font-size: .64rem; letter-spacing: -.005em; }
  .lang-ms .header-nav .nav-cta { padding-inline: .8rem; }
}
@media (max-width: 380px) {
  .main-header .container { gap: 4px; }
  .lang-switch--header button { min-width: 34px; padding-inline: .35rem; }
  .hamburger { padding-inline: .35rem; }
}
/* Narrow laptops (981–1080px): the brand logo already links home, so drop the separate Home link */
@media (min-width: 981px) and (max-width: 1080px) {
  .header-nav > a[href="index.html"], .header-nav > a[href="#home"] { display: none; }
  .header-brand__centre { font-size: .86rem; }
  .lang-ms .header-nav a, .lang-ms .header-nav .nav-mega__trigger { font-size: .62rem; }
  .lang-ms .header-nav .nav-mega__trigger i { display: none; }
}
@media (max-width: 340px) {
  .header-brand__logo--utm img { height: 28px !important; max-width: 110px !important; }
  .header-brand__centre { font-size: .74rem !important; }
  .header-brand__divider { height: 24px !important; }
}