/* Student Unions -- full label on desktop, shortened on mobile (see
home_navbar.html's own comment). Span default display is already inline,
so only the mobile-hidden state needs a base rule here. */
.drop-option-short {
  display: none;
}

/* phone-sized screens: five dropdowns don't fit comfortably in one row --
News and Info Articles are hidden here (still reachable via the sidemenu,
see home_sidemenu.html) and Student Unions shortens to "Union". New
Student? is deliberately left untouched at every width -- it's already
short and the "?" is part of its own phrasing, not filler to trim. */
@media (max-width: 480px) {
  .home-navbar .dropdown-menu--news,
  .home-navbar .dropdown-menu--articles {
    display: none;
  }

  .home-navbar .drop-option-full {
    display: none;
  }

  .home-navbar .drop-option-short {
    display: inline;
  }

  /* Panel spans .home-navbar's own width (below) instead of anchoring to
     whichever trigger opened it -- triggers sit at different x positions in
     the row, so a trigger-anchored panel could run off the right edge.
     .home-navbar never extends into the sidemenu's column (home_layout.css
     flex sizing), so this can't overlap it either. */
  .home-navbar {
    position: relative;
  }

  .home-navbar .dropdown-menu {
    position: static;
  }

  .home-navbar .dropdown-menu .drop-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}