/*
 * Site header, using the original template's own classes.
 *
 * main.css positions .header as `fixed` and custom.css gives .header_2 a height
 * of 154px, which only works when every page below carries a matching
 * `header-margin` offset. This site's pages are laid out in normal flow, so the
 * header is returned to the document flow here. Everything else - the topbar,
 * the currency and language buttons, and the .tabs -bookmark-2 module nav -
 * keeps the template styling untouched.
 */

/*
 * Brand blue, matching the hero below so the two read as one block.
 *
 * The header deliberately does NOT carry the template's `bg-dark-3` class:
 * main.css declares it as `background-color: var(--color-dark-3) !important`
 * (#13357B), which no amount of specificity here could override. The class is
 * removed from the markup instead. Do not add it back.
 */
.header.header_2.bh-header {
  background-color: #003b95;
}

.header.header_2 {
  position: static;
  height: auto;
  padding-bottom: 6px;
}

/* Bootstrap's .container (also on this element) centers at its own fixed
   breakpoints - 960px, 1140px, and so on - which land at a different width
   than .bh-shell's smooth min(1300px, 100% - 40px) below it almost everywhere
   in between. That mismatch is what puts the logo out of step with the hero
   heading beneath it: replacing width and the container gutters with the
   exact .bh-shell formula - and its own width tweaks at 1200px, 700px and
   640px in front-home.css - lines the two up at every viewport width instead
   of only where the breakpoints happen to agree. */
.header.header_2 .header__container {
  width: min(1300px, calc(100% - 40px));
  max-width: none;
  padding-top: 18px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .header.header_2 .header__container {
    width: min(1300px, calc(100% - 64px));
  }
}

@media (max-width: 700px) {
  .header.header_2 .header__container {
    width: min(100% - 26px, 1300px);
  }
}

@media (max-width: 640px) {
  .header.header_2 .header__container {
    width: min(100% - 28px, 1300px);
  }
}

/* The template hides these until main.js animates them in; this site does not
   load main.js, so they must start visible. */
.header.header_2 [data-anim],
.header.header_2 [data-anim-child] {
  opacity: 1;
  transform: none;
}

/* Divider pips between the help, currency, and language controls. */
.header.header_2 .bg-white-20 {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Currency and language labels cross-fade when a new value is picked, rather
   than the page reloading. See public/header-menus.js. */
[data-x-label] {
  display: inline-block;
  transition: opacity 0.16s ease;
}

[data-x-label].is-swapping {
  opacity: 0;
}

/* The picker panels animate open via main.css's `.is-hidden` opacity
   transition; this stops a closed panel from swallowing clicks mid-fade. */
.currencyMenu.is-hidden,
.langMenu.is-hidden {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-x-label] {
    transition: none;
  }
}

/* main.css stops at .text-30/.text-40, so the help icon's size class is defined
   here rather than silently inheriting the 14px body size. It sits next to the
   14px currency and language labels, so it stays close to their size. */
.header.header_2 .text-34 {
  font-size: 17px;
  line-height: 1;
}

.header.header_2 .bi {
  display: inline-block;
  vertical-align: middle;
}

/* The language flag ships at full size; the template only ever shows it small. */
.header.header_2 .rounded-full {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
}

.header.header_2 .tabs__button {
  border: 0;
  background: transparent;
}

/*
 * Module nav states.
 *
 * main.css turns the button blue on hover and gives the active one a white
 * wash, both of which disappear against the brand blue this header sits on.
 * Hover and active are yellow instead, straight on the brand colour, so the
 * `!important` here is only matching main.css's own `!important` on `color`.
 */
.header.header_2 .tabs__button {
  position: relative;
}

.header.header_2 .tabs__button:hover,
.header.header_2 .tabs__button:focus-visible {
  color: var(--color-yellow-1) !important;
  background-color: transparent;
}

/*
 * The page you are on, told apart from the tab under the pointer.
 *
 * Colour alone could not do it: hover was yellow and active was yellow, so
 * pointing at Hotels while reading Boarding Houses lit up Hotels and nothing
 * else - the strip looked like it was selecting the wrong module. The current
 * tab now carries a bar and a wash that hover does not, so which page you are
 * on is readable whatever the mouse is doing, and readable without relying on
 * the colour at all.
 */
.header.header_2 .tabs__button.is-tab-el-active {
  color: var(--color-yellow-1) !important;
  background-color: rgba(255, 255, 255, .12);
}

.header.header_2 .tabs__button.is-tab-el-active::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow-1);
}

/*
 * Header type is pinned here on purpose.
 *
 * Neither main.css nor the markup gives `.tabs__button` a font-size, so the
 * module nav inherits whatever the page happens to set - and vendors.css
 * (Bootstrap) and main.css disagree on the base body size. That made the nav
 * render at different sizes from one page to the next. Fixing the values means
 * the header is identical everywhere regardless of what a page stylesheet does.
 */
.header.header_2 .tabs__button {
  font-size: 15px;
  line-height: 1.2;
}

.header.header_2 .tabs__button .text-20 {
  font-size: 19px;
}

.header.header_2 h2 a {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

/* Signed-in customer / owner menu. */
.bh-account-menu {
  position: relative;
  margin-left: 20px;
  font-family: Jost, Arial, sans-serif;
}

.bh-account-menu__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 12px 6px 7px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.bh-account-menu__trigger > img,
.bh-account-menu__summary > img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.bh-account-menu__identity {
  display: flex;
  flex-direction: column;
  min-width: 110px;
  line-height: 1.15;
}

.bh-account-menu__identity strong { font-size: 14px; font-weight: 600; }
/* A span, not <small>: the .noderframe compiler rejects unlisted HTML tags. */
.bh-account-menu__identity .bh-account-menu__role { margin-top: 3px; color: #febb02; font-size: 11px; }
.bh-account-menu__trigger .bi-chevron-down { font-size: 11px; transition: transform .18s ease; }
.bh-account-menu.is-open .bh-account-menu__trigger .bi-chevron-down { transform: rotate(180deg); }

.bh-account-menu__panel {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 10px);
  right: 0;
  width: 245px;
  padding: 10px;
  border: 1px solid #d9e2ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(0, 27, 65, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.bh-account-menu.is-open .bh-account-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bh-account-menu__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e7edf5;
  color: #00224f;
}

.bh-account-menu__summary div { min-width: 0; }
.bh-account-menu__summary strong,
.bh-account-menu__summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-account-menu__summary strong { font-size: 14px; }
.bh-account-menu__summary span { color: #66768c; font-size: 12px; }

.bh-account-menu__panel > a,
.bh-account-menu__panel > form button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #00224f;
  font: 500 14px/1.2 Jost, Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}

.bh-account-menu__panel > a:hover,
.bh-account-menu__panel > form button:hover { background: #eef5ff; color: #006ce4; }
.bh-account-menu__panel > form { margin: 0; border-top: 1px solid #e7edf5; padding-top: 5px; }
.bh-account-menu__panel > form button { color: #c5162e; }

@media (max-width: 767px) {
  .bh-account-menu { margin-left: 8px; }
  .bh-account-menu__identity { display: none; }
  .bh-account-menu__trigger { min-height: 44px; padding: 4px 8px; }
  .bh-account-menu__trigger > img { width: 32px; height: 32px; }
  .bh-account-menu__panel { position: fixed; top: 72px; right: 12px; width: min(280px, calc(100vw - 24px)); }
}

@media (max-width: 991px) {
  .header.header_2 .tabs__button {
    font-size: 14px;
  }

  .header.header_2 h2 a {
    font-size: 22px;
  }
}

@media (max-width: 991px) {
  .header.header_2 {
    height: auto;
  }

  .header.header_2 .header__container {
    padding-top: 12px;
  }
}

/* main.css already scrolls this strip once the tabs stop fitting (nowrap,
   overflow: auto - see .tabs__controls there), but leaves the browser's own
   scrollbar on show and gives the last tab nowhere to sit but flush against
   the edge, where it is clipped. Not a small-screen problem alone - the tabs
   stop fitting anywhere below roughly 1280px, well above the max-width:991px
   this file otherwise treats as "mobile" - so this runs unconditionally
   rather than behind that query. The trailing padding leaves room for the
   last tab to rest fully clear of the edge instead of being cut off by it. */
.header.header_2 .tabs__controls {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-right: 28px;
}

.header.header_2 .tabs__controls::-webkit-scrollbar {
  display: none;
}

@media (max-width: 991px) {
  .header.header_2 .tabs__button {
    white-space: nowrap;
  }
}

/* The currency and language buttons in the top bar - dropdown arrow removed. */
.icon-chevron-sm-down {
  display: none;
}

/* The Sri Lankan flag beside the language button. A flag is a rectangle, not
   a coin - rounded-full cropped it into a circle and lost most of the design. */
.bh-flag-icon {
  display: block;
  width: 40px;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
}

/*
 * Sign In and Register used to be `lg:d-none` - invisible, zero width - on
 * any phone, so the logo and the currency/language/Sign In/Register group
 * never had to share a line at mobile widths. Now that they render as icon
 * buttons on mobile instead of disappearing, that same line is wider than a
 * narrow phone (375px included), and main.css pins every `.row` under
 * `.header` to `flex-wrap: nowrap` - wrapping was one fix, but it read as
 * two stacked lines instead of the single header bar every other page state
 * gets. Shrinking the logo and tightening Sign In/Register keeps everything
 * on that one line instead: the whole group now fits with room to spare on
 * a 375px screen. `.header.header_2 .tabs__button` right below already
 * shrinks the module nav the same way at this width, for the same reason.
 */
@media (max-width: 767px) {
  .header.header_2 h2 a {
    font-size: 16px;
  }

  .header.header_2 a[href="/customer/login"] {
    margin-left: 2px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .header.header_2 .row.x-gap-20 > * {
    padding-left: 6px;
    padding-right: 6px;
  }

  .header.header_2 .bh-flag-icon {
    width: 28px;
  }

  /* The bed glyph in this icon font is drawn smaller within its own em box
     than the other module icons (the airplane included) - same font-size,
     visibly thinner mark. Sized up on its own so Hotels reads at the same
     visual weight as the rest of the strip. */
  .header.header_2 .tabs__button .icon-home {
    font-size: 24px !important;
  }

  /* .tabs__button carries a 20px left padding at this width (the sm:px-20
     utility, meant as a bigger touch target) - fine between tabs, but on
     the first one it pushes the Hotels icon 20px right of where the logo
     above it starts, so the two rows read as misaligned on the left edge. */
  .header.header_2 .tabs__button:first-child {
    padding-left: 0 !important;
  }

  /* This column's own grid-gutter padding-right (15px) sits past its last
     button, invisible to the eye but still counted in the row's layout
     width - at 360px that's exactly what pushed the header past the
     viewport and dragged the whole page into horizontal scroll. The row
     has no width to spare for a gap here, so the gap between Sign In and
     Register is trimmed by the same amount added back as this padding -
     Register ends up in the same place either way, just with breathing
     room before the screen edge instead of sitting flush against it. */
  .header.header_2 .row.justify-between.items-center.mb-3 > .col-auto:last-child {
    padding-right: 10px;
  }

  .header.header_2 .row.justify-between.items-center.mb-3 > .col-auto:last-child a.button + a.button {
    margin-left: 10px !important;
  }
}

/* Room for a genuine edge case - a system font wide enough, or a language
   whose "Sign In"/"Register" text ships translated and longer - to still
   not fit even once shrunk. Wrapping to a second line is still a smaller
   problem than the horizontal scroll `nowrap` caused before either fix. */
@media (max-width: 340px) {
  .header.header_2 .header__container > .row.justify-between {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}