/* Navbar utility widgets: Bhutan Standard Time clock + language switcher.
   Embedded directly inside .navbar (clock in the left cluster next to
   "CONTACT US", translate in the right cluster next to "MENU") - see
   header.php and page-menu-page.php, which both pull in
   partials/nav-clock.php and partials/nav-translate.php. */

.navbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* .navbar-right already is display:flex; align-items:center in index.css -
   give its now-3 children (translate, MENU, hamburger) a little more
   breathing room than the original 2-item 10px gap. */
.navbar-right {
  gap: 16px;
}

/* Shared row metrics so the clock, the translate pill, "CONTACT US" and
   "MENU" all sit on one consistent horizontal centerline instead of being
   centered independently against their own, differently-sized boxes. */
.contact-link,
.menu-text,
.nav-clock,
.nav-translate {
  display: inline-flex;
  align-items: center;
  height: 28px;
  line-height: 1;
}

.nav-clock,
.nav-translate {
  gap: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}

/* .navbar is `display:flex; justify-content:space-between` (index.css),
   so the logo's horizontal position is derived entirely from its
   siblings' rendered widths - it is not independently centered. Jost is
   a proportional font, so "1" and "8" etc. are not the same glyph width;
   as the clock ticks every second, .navbar-left's total width shifted by
   a pixel or two, visibly nudging the logo left/right once a second.
   tabular-nums locks every digit to the same advance width so the
   clock's rendered width - and therefore .navbar-left's total width -
   never changes as the digits change. The explicit min-width is a
   fallback for the rare font/engine that ignores tabular-nums, sized to
   the widest possible string ("12:59:59 PM"). */
#bst-clock-time {
  display: inline-block;
  min-width: 11ch;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.nav-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Wraps the select so a custom caret can be centered over it - removing
   the native arrow (appearance: none, below) would otherwise leave no
   visual hint that this is a dropdown. */
.nav-translate {
  position: relative;
}

.nav-translate::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
  pointer-events: none;
}

.lang-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 26px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 0 24px 0 12px;
  font-size: 13px;
  line-height: 1;
  font-family: 'Jost', sans-serif;
  cursor: pointer;
}

.lang-select:focus {
  outline: 1px solid #ffcc00;
}

.lang-select option {
  color: #000;
}

/* Google's Website Translator engine (loaded async in top-bar.js) is used
   purely as a translation backend - it's driven programmatically from the
   .lang-select pill above, so its own UI must stay fully hidden: the
   widget host div, the top banner iframe it injects, and the yellow
   highlight/tooltip it puts on translated words. */
#google_translate_element.goog-host-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Google renames the banner iframe's own classes to obfuscated hashes
   (e.g. VIpgJd-ZVi9od-ORHb-OEVmcd) that change between widget versions -
   "skiptranslate" is the one stable class it always puts on its own
   injected iframes (banner, balloon/tooltip popups), so target that
   instead of the version-specific class names. */
iframe.skiptranslate {
  display: none !important;
}

body {
  top: 0 !important;
  position: static !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

/* Screen-reader-only label for the language select. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  .navbar-left {
    gap: 14px;
  }
}

/* At this breakpoint the base stylesheet used to hide .navbar-left
   entirely; the clock (and translate) now stay visible, but not in the
   original single navbar row - fitting "CONTACT US" width's worth of
   clock + "MENU"/hamburger width's worth of translate onto one row with
   the logo squeezed the logo down well below its 80px intended size
   (img { max-width:100% } inside a flex item that had shrunk).
   Restructured into two full-width rows instead:
     row 1: clock  |  translate
     row 2: logo (centered)  |  MENU + hamburger
   - i.e. row 2 is pixel-identical in content/sizing to production's
   mobile navbar (logo + hamburger untouched, full size), with the widgets
   promoted to their own row above it rather than fighting it for space.
   .navbar-left/.navbar-right go display:contents so their children
   (nav-clock; nav-translate, menu-text, hamburger-link) become direct
   grid items of .navbar and can be placed independently of their original
   desktop grouping. */
@media (max-width: 768px) {
  .navbar {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    grid-template-areas:
      "clock clock translate translate"
      "logo logo menu hamburger";
    row-gap: 12px;
    align-items: center;
  }

  .navbar-left,
  .navbar-right {
    display: contents;
  }

  .navbar-left .contact-link {
    display: none;
  }

  .nav-clock {
    grid-area: clock;
    justify-self: start;
  }

  .nav-translate {
    grid-area: translate;
    justify-self: end;
  }

  /* justify-self: start (rather than fighting index.css's text-align:center
     / img margin:0 auto) shrinks this grid item down to the logo's own
     width and pins that to the left edge of the "logo" cell - moves the
     logo to the left side of the row instead of sitting centered under the
     clock/translate row above it. */
  .navbar-logo {
    grid-area: logo;
    justify-self: start;
  }

  .menu-text {
    grid-area: menu;
    justify-self: end;
    /* .navbar-right's normal 10px gap (index.css) doesn't apply here -
       .navbar-right is display:contents at this breakpoint, so menu-text
       and hamburger-link are separate grid items with no gap between them
       by default. Margin restores that breathing room. */
    margin-right: 10px;
  }

  .hamburger-link {
    grid-area: hamburger;
  }

  .nav-translate .lang-select {
    max-width: 90px;
  }
}

@media (max-width: 480px) {
  /* "BST" was previously hidden at this width to save space - keeping it
     visible so mobile visitors (the most likely to not already know the
     clock is Bhutan Standard Time, since there's no other context on a
     phone screen) can tell what timezone they're looking at. The 2-row
     navbar grid (clock+translate above logo+menu+hamburger, see the
     768px breakpoint above) already gives the clock its own half-width
     row, so there's room for this without colliding with anything. */

  .lang-select {
    height: 24px;
    padding: 0 20px 0 8px;
    font-size: 11px;
  }

  .nav-translate::after {
    right: 8px;
  }
}