/* FPFT Lab responsive navigation, v2.
   Keep Home / Research / Members / Research Outputs / Activities / Contact
   visible at all viewport widths. Wrap the brand title, then move navigation
   to its own line rather than hiding it behind a mobile menu. */
.site-header-inner,
.header-inner {
  min-width:0;
  gap:clamp(12px,2vw,26px);
}
.site-brand {
  min-width:0!important;
  flex:0 1 auto;
}
.site-brand-text {
  min-width:0;
  flex:0 1 auto;
}
.site-brand-text strong {
  max-width:310px;
  white-space:normal!important;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}
.nav {
  display:flex!important;
  flex:0 0 auto;
  align-items:center;
  gap:clamp(11px,1.4vw,26px);
  min-width:0;
}
.nav>a,
.nav-group>button {
  white-space:nowrap;
}
.menu-button {
  display:none!important;
}

/* Compress the brand before sacrificing the full navigation. */
@media (max-width:1260px) and (min-width:1141px) {
  .site-header-inner,.header-inner { gap:14px;min-height:90px; }
  .site-brand { gap:12px; }
  .site-brand-logo {
    width:clamp(130px,13vw,170px);
    height:60px;
  }
  .site-brand-text strong { max-width:225px;font-size:16px;line-height:1.22; }
  .site-brand-text em { font-size:12px; }
  .nav { gap:clamp(9px,1.1vw,15px);font-size:13px; }
  .nav>a,.nav-group>button { padding:26px 0;font-size:13px; }
  .nav-sub { top:64px; }
}

/* At medium and small widths, show all navigation links in a second row. */
@media (max-width:1140px) {
  .site-header-inner,.header-inner {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-content:center;
    min-height:0;
    row-gap:0;
    column-gap:14px;
    padding-top:12px;
    padding-bottom:0;
  }
  .site-brand {
    flex:1 1 100%;
    min-width:0!important;
    gap:12px;
  }
  .site-brand-logo {
    width:clamp(120px,18vw,190px);
    height:58px;
    max-width:40vw;
    flex:none;
  }
  .site-brand-text { min-width:0; }
  .site-brand-text strong {
    max-width:330px;
    font-size:clamp(14px,1.9vw,18px);
    line-height:1.2;
    white-space:normal!important;
    text-wrap:balance;
  }
  .site-brand-text em {font-size:clamp(10px,1.4vw,13px);line-height:1.3}
  .nav {
    position:static!important;
    display:flex!important;
    flex:1 1 100%;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start;
    flex-wrap:wrap;
    width:100%;
    gap:0 clamp(14px,2.6vw,26px);
    padding:6px 0 7px!important;
    margin-top:10px;
    border-top:1px solid var(--line);
    border-bottom:0;
    box-shadow:none;
    background:transparent;
    max-height:none!important;
    overflow:visible!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
  }
  .nav>a,.nav-group>button {
    display:block;
    width:auto!important;
    font-size:14px;
    line-height:1.35;
    text-align:left;
    padding:8px 0!important;
    white-space:nowrap;
  }
  .nav-group { position:relative;width:auto!important; }
  .nav-sub {
    position:absolute!important;
    top:100%!important;
    left:0!important;
    min-width:195px;
    z-index:150;
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    box-shadow:var(--shadow);
    padding:8px!important;
    transform:none;
    opacity:0;
    visibility:hidden;
    display:none;
  }
  .nav-group:hover .nav-sub,
  .nav-group:focus-within .nav-sub,
  .nav-group.open .nav-sub {
    display:block!important;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .nav-sub a {white-space:normal;}
  .menu-button {display:none!important;}
  .home-hero h1 {overflow-wrap:anywhere;}
}

@media (max-width:760px) {
  .site-header-inner,.header-inner{padding-top:9px}
  .site-brand{gap:10px}
  .site-brand-logo{width:clamp(92px,23vw,130px);height:46px}
  .site-brand-text strong{max-width:230px;font-size:clamp(12px,2.8vw,15px);line-height:1.16}
  .site-brand-text em{font-size:10px}
  .nav{gap:0 clamp(10px,2.4vw,18px);padding:5px 0 7px!important;margin-top:9px}
  .nav>a,.nav-group>button{font-size:clamp(12px,2.3vw,14px);padding:7px 0!important}
}

@media (max-width:400px) {
  .site-header-inner,.header-inner {column-gap:8px}
  .site-brand-logo {width:82px;height:40px}
  .site-brand-text strong {font-size:12px;max-width:175px}
  .site-brand-text em {font-size:9px}
  .nav{gap:0 13px}
  .nav>a,.nav-group>button{font-size:12px;padding:7px 0!important}
}