/**
 * Header dropdown menu (desktop)
 *
 * Loaded after the Flatsome Customizer CSS. Selectors use li.menu-item to
 * outrank the Customizer rules (.nav-dropdown .nav-dropdown-col>ul li a).
 */

/* ---------- Panel ---------- */
.header-nav .nav-dropdown,
.header-nav .nav-dropdown .nav-dropdown-col > ul {
  /* Grow to the longest item (e.g. long Vietnamese labels) so items stay on one line */
  width: max-content;
  min-width: 280px;
  max-width: 440px;
  padding: 10px 0;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 49, 80, 0.14), 0 2px 6px rgba(0, 49, 80, 0.08);
}

.header-nav > li > .nav-dropdown {
  border-top: 3px solid var(--aav-link, #00759a);
  border-radius: 0 0 8px 8px;
  transform: translateY(8px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.header-nav > li.current-dropdown > .nav-dropdown,
.header-nav > li:hover > .nav-dropdown {
  transform: translateY(0);
}

/* Level 3: open beside the parent item, aligned with its top edge */
.header-nav .nav-dropdown .nav-dropdown-col > ul {
  top: -10px;
  left: 100%;
  margin-top: 0;
}

.header-nav .nav-dropdown li.menu-item {
  position: relative;
  background: transparent;
}

/* ---------- Items ---------- */
.header-nav .nav-dropdown li.menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 15px 24px;
  border: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--aav-text, #000);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.header-nav .nav-dropdown li.menu-item.current-menu-item > a,
.header-nav .nav-dropdown li.menu-item.current-menu-ancestor > a {
  color: var(--aav-heading, #003150);
  font-weight: 600 !important;
}

/* Hover: Teal background, Navy accent bar, white text (also for the current item) */
.header-nav .nav-dropdown li.menu-item:hover > a,
.header-nav .nav-dropdown li.menu-item > a:focus-visible,
.header-nav .nav-dropdown li.menu-item:is(.current-menu-item, .current-menu-ancestor):hover > a {
  background-color: var(--aav-link, #00759a);
  color: #fff;
  box-shadow: inset 4px 0 0 var(--aav-heading, #003150);
}

.header-nav .nav-dropdown li.menu-item > a:focus-visible {
  outline: 2px solid var(--aav-heading, #003150);
  outline-offset: -2px;
}

/* Chevron on items that open a level-3 menu */
.header-nav .nav-dropdown li.menu-item-has-children > a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}

.header-nav .nav-dropdown li.menu-item-has-children:hover > a::after {
  opacity: 1;
  transform: translateX(2px) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .header-nav > li > .nav-dropdown,
  .header-nav .nav-dropdown li.menu-item > a,
  .header-nav .nav-dropdown li.menu-item > a::after {
    transition: none;
    transform: none;
  }
}

/* ---------- Header search (desktop) ---------- */
/* Same selectors as the Customizer (180px wide, 27px button), loaded later */
#masthead .flex-col.hide-for-medium.flex-right,
#masthead .header-nav-main.nav.nav-right .header-search-form.search-form {
  width: 280px;
}

#masthead .header-search-form .search-field {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  color: var(--aav-text, #000);
  background-color: #f3f5f7;
  border: 1px solid #dde3e8;
  border-radius: 999px;
  box-shadow: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

#masthead .header-search-form .search-field::placeholder {
  color: #5a6470;
  opacity: 1;
}

#masthead .header-search-form .search-field:focus {
  background-color: #fff;
  border-color: var(--aav-link, #00759a);
  box-shadow: 0 0 0 3px rgba(0, 117, 154, 0.15);
  outline: none;
}

/* Pin the button inside the rounded input (Flatsome uses a negative column margin) */
#masthead .header-search-form .searchform .flex-row > .flex-col:last-child {
  position: absolute;
  top: 50%;
  right: 3px;
  margin: 0;
  transform: translateY(-50%);
}

#masthead .header-search-form .search-field {
  padding-right: 48px;
}

#masthead .ux-search-submit.submit-button.secondary.button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  font-size: 16px;
  transition: background-color 0.15s;
}

#masthead .ux-search-submit.submit-button.secondary.button:hover {
  background: var(--aav-link, #00759a) !important;
}

/* ---------- Main menu alignment ---------- */
/* The menu column already flex-grows between logo and search; align its items right */
#masthead .header-nav-main.nav-left {
  justify-content: flex-end;
  padding-right: 24px;
}

/* ---------- Top bar: language switcher + social icons on one line ---------- */
#top-bar .top-bar-nav {
  align-items: center;
}

#top-bar .top-bar-nav > li {
  display: flex;
  align-items: center;
}

/* Same size for both languages; the current one is marked by colour and weight */
#top-bar .top-bar-nav .lang-item > a,
#top-bar .top-bar-nav .lang-item.current_page_item > a {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 24px;
  color: #5a6470;
}

#top-bar .top-bar-nav .lang-item.current-lang > a {
  color: var(--aav-heading, #003150) !important;
  font-weight: 600;
}

#top-bar .top-bar-nav .lang-item > a:hover {
  color: var(--aav-heading, #003150);
}

#top-bar .socail_topba {
  display: flex;
  align-items: center;
}

#top-bar .socail_topba a {
  display: flex;
}

#top-bar .socail_topba img {
  display: block;
  width: 22px;
  height: 22px;
}

/* ---------- Header shadow ---------- */
/* Replaces the Customizer's wide 25px black shadow with a hairline + soft navy-tinted shadow */
#header {
  box-shadow: 0 1px 0 rgba(0, 49, 80, 0.08), 0 2px 12px rgba(0, 49, 80, 0.05);
}

#header .header-wrapper.stuck {
  box-shadow: 0 1px 0 rgba(0, 49, 80, 0.08), 0 6px 18px rgba(0, 49, 80, 0.08);
}

/* ---------- Mobile off-canvas menu: navy panel ---------- */
.off-canvas .mfp-content:has(#main-menu) {
  background: linear-gradient(180deg, #003a5e 0%, #003150 45%, #00263f 100%);
}

/* Panel colour comes from the wrapper above; painting it twice shows a seam */
#main-menu.mobile-sidebar {
  background: transparent;
}

#main-menu .sidebar-menu {
  padding-top: 24px;
}

/* Top-level items */
#main-menu .nav-sidebar > li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#main-menu .nav-sidebar > li.header-search-form {
  border-top: 0;
  padding: 0 20px 20px;
}

#main-menu .nav-sidebar > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#main-menu .nav-sidebar > li.current-menu-item > a,
#main-menu .nav-sidebar > li.current-menu-ancestor > a,
#main-menu .nav-sidebar > li > a:hover {
  color: #8fdcf0;
  box-shadow: inset 3px 0 0 #19b2d6;
}

/* Expand/collapse arrows */
#main-menu .nav-sidebar .toggle {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* Sub-menus */
#main-menu .nav-sidebar .children {
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.18);
}

#main-menu .nav-sidebar .children li {
  border: 0;
}

#main-menu .nav-sidebar .children a {
  padding-top: 11px;
  padding-bottom: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

#main-menu .nav-sidebar .children li.current-menu-item > a,
#main-menu .nav-sidebar .children a:hover {
  color: #8fdcf0;
}

/* Search */
#main-menu .search-field {
  height: 44px;
  padding: 0 48px 0 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow: none;
}

#main-menu .search-field::placeholder {
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

#main-menu .search-field:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: #19b2d6;
}

#main-menu .searchform .flex-row > .flex-col:last-child {
  position: absolute;
  top: 50%;
  right: 4px;
  margin: 0;
  transform: translateY(-50%);
}

#main-menu .ux-search-submit {
  color: #fff !important;
}

/* Language switcher (template-parts/header/partials/element-languages-sidebar.php) */
#main-menu .aav-lang-switch {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.aav-lang-switch__inner {
  display: flex;
  gap: 10px;
}

.aav-lang-switch__item {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  color: #fff !important;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  transition: background-color 0.15s, border-color 0.15s;
}

.aav-lang-switch__item:hover {
  background: rgba(255, 255, 255, 0.16);
}

.aav-lang-switch__item.is-current {
  color: #003150 !important;
  font-weight: 600;
  background: #fff;
  border-color: #fff;
}

.aav-lang-switch__item img {
  flex: none;
  width: 16px;
  height: 11px;
}

/* ---------- Sticky header: logo fits the 75px bar (was 90px and got cut off) ---------- */
#header #logo img {
  transition: max-height 0.25s ease;
}

#header .header-wrapper.stuck #logo img {
  width: auto;
  max-height: 60px !important;
}

/* ---------- Tablet landscape / small laptop (850-1199px): menu on one line ---------- */
@media (min-width: 850px) and (max-width: 1199px) {
  #logo {
    width: 110px !important;
  }

  #masthead .header-nav-main.nav-left {
    padding-right: 12px;
  }

  #masthead .header-nav-main.nav > li {
    margin: 0 7px;
  }

  #masthead .header-main .nav > li > a,
  .header-main .nav > li > a {
    font-size: 15px;
  }

  #masthead .flex-col.hide-for-medium.flex-right,
  #masthead .header-nav-main.nav.nav-right .header-search-form.search-form {
    width: 190px;
  }

  /* Level 3 opens inside the dropdown (indented) instead of flying out off-screen */
  .header-nav .nav-dropdown .nav-dropdown-col > ul {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 6px;
    background: #f3f8fb;
    border-radius: 0;
    box-shadow: none;
  }

  .header-nav .nav-dropdown .nav-dropdown-col > ul li.menu-item > a {
    padding-left: 40px;
    font-size: 15px;
  }

  /* Chevron points down: the sub-items appear below */
  .header-nav .nav-dropdown li.menu-item-has-children > a::after,
  .header-nav .nav-dropdown li.menu-item-has-children:hover > a::after {
    transform: rotate(135deg);
  }
}

/* Customizer pulls the logo up 5px (.logo a{margin-top:-5px}); centre it in the sticky bar */
#header .header-wrapper.stuck .logo a {
  margin-top: 0;
}

/* 850-1099px: tighter still so both languages fit on one line */
@media (min-width: 850px) and (max-width: 1099px) {
  #logo {
    width: 96px !important;
  }

  #masthead .header-nav-main.nav-left {
    padding-right: 8px;
  }

  #masthead .header-nav-main.nav > li {
    margin: 0 5px;
  }

  #masthead .header-main .nav > li > a,
  .header-main .nav > li > a {
    font-size: 14px;
  }

  #masthead .flex-col.hide-for-medium.flex-right,
  #masthead .header-nav-main.nav.nav-right .header-search-form.search-form {
    width: 150px;
  }
}

/* 850-959px: the search box collapses to its round button; clicking it opens the field
   over the end of the menu (240px), so the menu keeps one line */
@media (min-width: 850px) and (max-width: 959px) {
  #masthead .flex-col.hide-for-medium.flex-right,
  #masthead .header-nav-main.nav.nav-right .header-search-form.search-form {
    width: 44px;
  }

  #masthead .header-search-form .search-field {
    width: 44px;
    padding: 0;
    color: transparent;
    cursor: pointer;
  }

  #masthead .header-search-form .search-field::placeholder {
    color: transparent;
  }

  /* Let the first click reach the field (to open it) instead of submitting an empty search */
  #masthead .header-search-form:not(:focus-within) .ux-search-submit {
    pointer-events: none;
  }

  #masthead .header-search-form:focus-within .searchform-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 30;
    width: 240px;
    transform: translateY(-50%);
  }

  #masthead .header-search-form:focus-within .search-field {
    width: 100%;
    padding: 0 48px 0 18px;
    color: #000;
    cursor: text;
  }

  #masthead .header-search-form:focus-within .search-field::placeholder {
    color: #5a6470;
  }
}

/* ---------- Logo: keep its real proportions (194x145) ---------- */
/* The Customizer forces 134x90 (desktop) and 92x60 (mobile), which flattened it */
#header #logo img {
  width: auto !important;
  max-width: 100%;
  height: 80px; /* 5px breathing room in the 90px bar */
  object-fit: contain;
}

#header .header-wrapper.stuck #logo img {
  height: 60px;
}

@media (max-width: 849px) {
  #header #logo img {
    height: 60px;
  }
}

/* ---------- Search button: a true circle, icon centred, even 3px inset ---------- */
#masthead .ux-search-submit.submit-button.secondary.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 0;
  line-height: 1;
}

#masthead .ux-search-submit i {
  top: 0;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
}

/* Customizer pulls the logo up (.logo a{margin-top:-20px}, -5px on mobile), which pushed its
   top (the star) under the white top bar. Keep it inside the header bar. */
#header .logo a {
  margin-top: 0;
}

/* Desktop: centre the logo on the whole header (35px top bar + 90px bar = 125px),
   not just the lower bar. Raised above the top bar, whose left side is empty. */
@media (min-width: 850px) {
  #header .header-wrapper:not(.stuck) #logo {
    position: relative;
    z-index: 25;
    transform: translateY(-17.5px); /* (35px top bar) / 2 */
  }
}

/* The logo lives in #masthead, which Flatsome stacks below the top bar; lift the bar
   so the raised logo paints over the (empty) left side of the top bar */
@media (min-width: 850px) {
  #header .header-wrapper:not(.stuck) #masthead {
    position: relative;
    z-index: 12;
  }
}

/* Off-canvas search: the menu panel is .dark and the Customizer forces
   `.dark .form-flat input {background:#fff !important}`, so the white text typed here was
   invisible. Use a white field with dark text and a Navy icon. */
#main-menu .search-field,
#main-menu .search-field:focus {
  color: #000 !important;
  background: #fff !important;
  border-color: transparent !important;
}

#main-menu .search-field::placeholder {
  color: #5a6470 !important;
}

#main-menu .ux-search-submit {
  color: #003150 !important;
}

/* Search popup (mobile header search icon) and any other search field: always dark text */
#search-lightbox .search-field,
.searchform .search-field {
  color: #000;
}

/* Mobile search popup (Flatsome lightbox): it is styled "dark", which made the typed
   text white on its white field */
.mfp-content .searchform .search-field,
#search-lightbox .searchform .search-field {
  color: #000 !important;
  background: #fff !important;
}

.mfp-content .searchform .search-field::placeholder,
#search-lightbox .searchform .search-field::placeholder {
  color: #5a6470 !important;
}