/* Unique World Holidays — Site-wide header (Step 15 migration)
   Every page EXCEPT Home (Home keeps header.css / home-header.php).

   Rebuilds the exact visual spec of the old Elementor header (post 59,
   audited via _elementor_data + its Elementor Kit's global colors before
   this file was written) as plain CSS — Elementor's own generated CSS for
   post 59 is no longer guaranteed to load once astra_header stops calling
   hfe_render_header, same reasoning assets/css/site-footer.css already
   used for the footer.

   .top-bar and .main-header are NOT arbitrary — sticky-header.js
   (assets/js/sticky-header.js) and the Customizer's Additional CSS
   (.main-header / .main-header.sticky-active, global, not theme-file-
   based) both target these exact class names already, live, today. Keep
   them on the matching wrapper elements below or both silently stop
   working. */

#uwh-site-header {
  position: relative;
}

/* ── Top bar (phone / email / social) ───────────────────────────────── */

.top-bar {
  background: #ffffff;
  border-bottom: 1px solid #adadad;
}

.uwh-header-topbar-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.uwh-header-contact {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.uwh-header-contact li {
  margin: 0;
}

.uwh-header-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333333;
  font-size: 0.9rem;
  text-decoration: none;
  line-height: 1;
}

.uwh-header-contact a:hover {
  color: #13294b;
}

.uwh-header-contact svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: #333333;
}

.uwh-header-social {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.uwh-header-social li {
  margin: 0;
}

.uwh-header-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #13294b;
  color: #f4f6ef;
  transition: background 0.2s ease;
}

.uwh-header-social a:hover {
  background: #2f4260;
}

.uwh-header-social svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ── Main header row (logo / nav / Book Now) ────────────────────────── */

.main-header {
  position: relative;
  background-color: #ffffff;
}

.main-header.sticky-active {
  background-color: #ffffff !important;
}

.main-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0.2;
  pointer-events: none;
}

.uwh-header-main-inner {
  position: relative; /* sit above the ::before overlay */
  max-width: 1260px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.uwh-header-logo {
  display: block;
  flex-shrink: 0;
}

.uwh-header-logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.uwh-header-logo-text {
  margin: 0;
  color: #f4f6ef;
  font-weight: 700;
  font-size: 1.3rem;
}

/* Desktop nav */
.uwh-header-nav {
  margin-left: auto;
}

.uwh-header-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.uwh-header-nav-list a {
  position: relative;
  display: inline-block;
  padding: 20px 0;
  color: #233b5e;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.uwh-header-nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 2px;
  background: #feae02;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.uwh-header-nav-list a:hover,
.uwh-header-nav-list li.current-menu-item > a,
.uwh-header-nav-list li.current-menu-ancestor > a {
  color: #13294b;
}

.uwh-header-nav-list a:hover::after,
.uwh-header-nav-list li.current-menu-item > a::after,
.uwh-header-nav-list li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Nav underline colour — orange/gold (#feae02) for BOTH the hover state
   and the persistent current-page indicator, set on the base ::after
   rule above so the two stay consistent. Site-wide header only (every
   page except Home, which uses home-header.php). */

/* Sub-menus (dropdown) */
.uwh-header-nav-list ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 100;
}

.uwh-header-nav-list li {
  position: relative;
}

.uwh-header-nav-list li:hover > ul,
.uwh-header-nav-list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.uwh-header-nav-list ul a {
  display: block;
  padding: 10px 20px;
  color: #333333;
}

.uwh-header-nav-list ul a::after {
  display: none;
}

.uwh-header-nav-list ul a:hover {
  background: #327d81;
  color: #ffffff;
}

/* Mobile hamburger toggle */
.uwh-header-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.uwh-header-nav-toggle-icon,
.uwh-header-nav-toggle-icon::before,
.uwh-header-nav-toggle-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #f4f6ef;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.uwh-header-nav-toggle-icon {
  position: relative;
}

.uwh-header-nav-toggle-icon::before,
.uwh-header-nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.uwh-header-nav-toggle-icon::before {
  top: -7px;
}

.uwh-header-nav-toggle-icon::after {
  top: 7px;
}

.uwh-header-nav-toggle:hover .uwh-header-nav-toggle-icon,
.uwh-header-nav-toggle:hover .uwh-header-nav-toggle-icon::before,
.uwh-header-nav-toggle:hover .uwh-header-nav-toggle-icon::after {
  background: #ffffff;
}

/* Mobile flyout panel */
.uwh-header-nav-flyout {
  display: none;
  background: #13294b;
}

.uwh-header-nav-flyout-list {
  list-style: none;
  margin: 0;
  padding: 10px 20px 20px;
}

.uwh-header-nav-flyout-list ul {
  list-style: none;
  margin: 0;
  padding-left: 16px;
}

.uwh-header-nav-flyout-list a {
  display: block;
  padding: 12px 0;
  color: #f4f6ef;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 246, 239, 0.15);
}

.uwh-header-nav-flyout-list a:hover {
  color: #ffffff;
}

/* ── "Book Now" — fixed floating popup trigger (NOT part of row flow) ──
   Position/animation intentionally match the old header's widget exactly:
   fixed, bottom-left, 30px offset. The slide-bottom keyframe animation and
   the "hide entirely on tour-single pages" rule both already exist
   site-wide (Customizer Additional CSS + functions.php Enqueue Styles
   block) keyed off this same .top-bottom-move class — not redefined here. */
.uwh-header-book-now {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffef18;
  color: #13294b;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 20px;
  padding: 17px 30px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease;
}

.uwh-header-book-now:hover {
  background: #ffe600;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Top bar: matches the old header's own "hidden-mobile" Elementor setting
   exactly (confirmed via DB audit) — hidden below 768px, nothing else. */
@media (max-width: 767px) {
  .top-bar {
    display: none;
  }
}

/* Nav collapse: deliberately a SEPARATE, wider breakpoint than the top
   bar's — 6 menu items + a 220px logo genuinely don't fit in the ~768-1024px
   tablet range without wrapping onto a second line, which the old
   Elementor nav-menu widget's own responsive toggle would never have done
   (Elementor's default toggle breakpoint for this widget is "Tablet", not
   "Mobile"). Keeping the two breakpoints tied together produced exactly
   that wrapping artefact — pushing the nav's own collapse out to 1024px
   avoids it while leaving the top bar's confirmed 767px value untouched. */
@media (max-width: 1024px) {
  .uwh-header-nav {
    display: none;
  }

  .uwh-header-nav-toggle {
    display: inline-flex;
  }

  .uwh-header-nav-flyout.is-open {
    display: block;
  }
}

@media (min-width: 1025px) {
  .uwh-header-nav-flyout {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .uwh-header-logo img {
    width: 170px;
  }

  .uwh-header-book-now {
    left: 16px;
    bottom: 16px;
    padding: 13px 22px;
    font-size: 0.85rem;
  }
}