/* The single source of truth for all nav styling (layout, link colors,
   the desktop hover mega-menu, and the mobile tap-to-expand accordion)
   for every page that loads shared/header.html -- including home.html,
   which now uses the same shared/header.html + shared/nav.css +
   shared/nav.js as every other page instead of its own inline copy.
   Loads after each page's own stylesheet (verified true for every page
   using shared/header.html), so plain selectors here still win over any
   stale leftover rules a page's own CSS might still carry from before
   this consolidation. */

/* Every page's own stylesheet sets `header .navbar { position: absolute; }`
   (no top), so the nav scrolls away with the page instead of sticking, and
   `.navbar { background-color: transparent !important; }` on wider screens,
   which drops the dark mask behind the link text -- letting it blend into
   a bright hero image. home.css avoids both: pin the nav to the viewport
   and keep a solid-ish dark background at every width. This file loads
   after each page's own stylesheet, so these override without !important
   on position, and with !important (matching cascade order) on background.

   Every rule below targets #navbar / .navbar directly rather than
   `header .navbar`: on the bio profile pages the surrounding <header> tag
   itself is commented out of the markup, so a `header .navbar` selector
   never matches there -- id="navbar" is the one thing every page's nav
   element has in common, with or without a live <header> ancestor. */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* High enough to beat any positioned element a page's own stylesheet
     might declare (e.g. components/downloads had a `.sidebar { z-index:
     10 }`, which briefly out-ranked the old z-index: 5 here and painted
     over the fixed nav while scrolling; several pages' fixed .icon-bar
     social widget also sits at z-index: 1000). */
  z-index: 2000;
}

.navbar {
  background-color: rgba(33, 37, 41, 0.9) !important;
}

.navbar .nav-item .nav-link {
  color: #fafafa;
}

.navbar-nav .nav-item .nav-link {
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: lighter;
}

/* Bootstrap's .navbar > .container-fluid ships with justify-content:
   space-between, which inserts a gap between every direct child --
   including the two logos. Turn that off and position everything
   explicitly with order + margins below. */
#navbar .container-fluid {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#navbar .navbar-brand-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

#navbar .navbar-images + .navbar-images {
  margin-left: 0;
}

/* Mobile / collapsed nav (matches Bootstrap's navbar-expand-lg breakpoint):
   logos left, language switcher centered, hamburger far right. */
@media screen and (max-width: 991.98px) {
  #navbar .container-fluid {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  #navbar .navbar-images img {
    width: 42px;
  }

  #navbar #google_translate_element {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
  }

  #navbar .navbar-toggler {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    border: none;
    padding: 0.25rem 0.4rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  #navbar .navbar-toggler img {
    width: 28px;
    height: 28px;
  }

  #navbar .navbar-collapse {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
}

/* Expanded desktop nav: logos left, nav links next, language
   switcher pushed to the far right after every link. */
@media screen and (min-width: 992px) {
  #navbar #google_translate_element {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    margin-left: 1rem;
  }

  #navbar .navbar-collapse {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

/* Compact Google Translate widget on mobile only: hide the "Powered by
   Google Translate" attribution text/logo and shrink the language dropdown.
   Desktop keeps the widget's normal, fully-worded appearance. */
@media screen and (max-width: 991.98px) {
  #google_translate_element .goog-te-gadget {
    font-size: 0 !important;
    color: transparent !important;
  }

  #google_translate_element .goog-te-gadget .goog-te-combo {
    font-size: 12px !important;
    color: initial !important;
    max-width: 110px;
    padding: 1px 2px;
    margin: 0 !important;
  }

  #google_translate_element .goog-logo-link,
  #google_translate_element .goog-te-gadget-icon {
    display: none !important;
  }
}

/* Desktop mega-menu: "Strategic Themes" / "Eco-Region Research
   Programmes" / "Our Repositories" / "eProcurement" / "eRecruitment"
   reveal their .dropdown-menu1 submenu on :hover instead of a real
   Bootstrap dropdown (their buttons carry no data-bs-toggle -- see
   shared/nav.js). 769px rather than this file's other 992px breakpoint
   is intentional: the mobile accordion rules below are prefixed with
   #navbarNavDropdown, which outranks these plain-class selectors on
   specificity alone, so the two safely overlap between 769-991.98px
   without a real breakpoint gap -- touch-only tablets in that range
   can't trigger :hover anyway, so the accordion click/tap wins there. */
@media screen and (min-width: 769px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }
  .navbar .nav-item:hover .nav-link {
    color: #fff;
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }
  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
  .navbar .nav-item:hover .dropdown-menu1 {
    display: none;
  }
  .navbar .dropend:hover .dropdown-menu1 {
    display: block;
  }
  .navbar .nav-item .dropdown-menu,
  .drop {
    font-size: 0.9rem !important;
  }
  .dropdown-menu1 {
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    -webkit-transform: translate(110px, 0px);
            transform: translate(110px, 0px);
    left: 15%;
    z-index: 2;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 0.9rem !important;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
  }
  .navbar {
    background-color: rgba(33, 37, 41, 0.85) !important;
  }
  .navbar-collapse {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
}

/* Mobile nav content (matches Bootstrap's navbar-expand-lg breakpoint):
   the desktop rules above reveal .dropdown-menu1 on :hover, which mobile
   can't do -- so on phones it rendered as one permanently-open list. On
   top of that, Bootstrap's default .dropdown-item sets white-space:
   nowrap, which clipped any link label longer than the screen instead of
   wrapping it (e.g. "Forest Productivity, Health and Tree Improve..."
   getting cropped at the screen edge). This block makes long labels
   wrap, adds breathing room between tap targets, and turns "Strategic
   Themes" / "Eco-Region Research Programmes" / "Our Repositories" /
   "eProcurement" / "eRecruitment" into real tap-to-expand accordions --
   opened via the .show class that shared/nav.js toggles on their
   .dropend wrapper -- instead of one long list.
   Selectors here are prefixed with #navbarNavDropdown so they outrank
   the desktop :hover rules above on specificity alone -- see the note
   on those rules for why that matters in the 769-991.98px overlap. */
@media screen and (max-width: 991.98px) {
  #navbarNavDropdown .dropdown-item,
  #navbarNavDropdown .drop {
    white-space: normal;
    word-break: break-word;
  }

  #navbarNavDropdown .dropdown-item {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    line-height: 1.35;
  }

  /* Top-level items (About Us, Our Research, E-Resources...) also get
     more room to tap, and their caret pushed to the far edge -- same
     reasoning as .drop below. */
  #navbarNavDropdown > .navbar-nav > .nav-item > .nav-link {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  #navbarNavDropdown > .navbar-nav > .nav-item > .nav-link.dropdown-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  #navbarNavDropdown > .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-left: 0.5rem;
  }

  #navbarNavDropdown > .navbar-nav > .nav-item > .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  /* Sub-menu accordion toggles (Strategic Themes, Our Repositories...):
     text stays left, caret pushed to the far right edge of the row
     instead of sitting right against the label. */
  #navbarNavDropdown .drop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1.5rem;
  }

  #navbarNavDropdown .drop::after {
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-left: 0.5rem;
  }

  #navbarNavDropdown .dropend.show > .drop::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }

  #navbarNavDropdown .dropdown-menu1 {
    display: none;
    position: static;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0 0.5rem 1rem;
    list-style: none;
    background-color: #f0dcc9;
    border: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  #navbarNavDropdown .dropdown-menu1 > li {
    list-style: none;
  }

  #navbarNavDropdown .dropend.show > .dropdown-menu1 {
    display: block;
  }

  /* Depth shading instead of list bullets: level 1 (Home, About Us...)
     keeps the dark navbar background as-is; level 2 (Strategic Themes,
     Our Staff Bio...) gets a bright warm tint in place of Bootstrap's
     plain white dropdown-menu; level 3 (Central Highlands Eco-Region
     Research Programme..., styled above) gets a visibly deeper -- but
     still bright/light -- tint of the same terracotta accent, so nesting
     reads from the shade alone. Both are solid colors, not rgba: this
     stack sits on top of the dark navbar background, so a translucent
     tint here would let that dark color bleed through underneath
     instead of reading as a light shade (text color is untouched). */
  #navbarNavDropdown .dropdown-menu.menu1 {
    background-color: #f8ece4;
  }

  /* Faded, hairline row dividers (0.5px so they read as thin rather than
     a solid rule -- modern mobile browsers render this as a true
     sub-pixel line on Retina-class screens, and just fall back to a full
     1px on lower-density ones). The top-level items (Home, About Us, Our
     Research...) sit on the dark navbar background, so a faint *white*
     line is what's actually visible there -- matching the existing
     border-white utility already used for the navbar's own bottom edge.
     The level 2 items (Strategic Themes, Our Staff Bio...) and level 3
     items (Central Highlands Eco-Region Research Programme...) sit on
     white/near-white backgrounds, so they get a faint terracotta line
     instead, reusing the #c25929 accent used for the footer and
     .news_title on the home page. */
  #navbarNavDropdown > .navbar-nav > .nav-item {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
  }

  #navbarNavDropdown > .navbar-nav > .nav-item:last-child {
    border-bottom: none;
  }

  #navbarNavDropdown .dropdown-menu.menu1 > li,
  #navbarNavDropdown .dropdown-menu.menu1 > .dropend {
    border-bottom: 0.5px solid rgba(194, 89, 41, 0.14);
  }

  #navbarNavDropdown .dropdown-menu.menu1 > li:last-child,
  #navbarNavDropdown .dropdown-menu.menu1 > .dropend:last-child {
    border-bottom: none;
  }

  #navbarNavDropdown .dropdown-menu1 > li {
    border-bottom: 0.5px solid rgba(194, 89, 41, 0.1);
  }

  #navbarNavDropdown .dropdown-menu1 > li:last-child {
    border-bottom: none;
  }

  /* Let the menu scroll internally instead of silently running off the
     bottom of the screen: #navbar is position: fixed (see above), and a
     fixed element that grows taller than the viewport doesn't get a
     scrollbar of its own -- the overflow is just unreachable. 64px
     approximates the logo/hamburger row's own height (42px logo + 2 x
     0.4rem vertical padding + border), so the collapse fills the rest of
     the viewport and scrolls on its own once the accordions push it
     past that. */
  #navbarNavDropdown {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}