/**
 * Astra Theme - The Mirror Chiang Mai Header & Hamburger Menu Overwrite
 * Perfectly matches mockup:
 * - Animated underline sits directly beneath menu item words (not at bottom of header)
 * - Only the actual active page (Home) has active underline by default; anchor links (#map, #contact) do not show lines until hovered
 * - Smooth hover slide animation on all items
 * - Floating rounded dropdown card for Room submenus
 * - Mobile hamburger button & slide-down clean drawer
 */

/* ==========================================================================
   1. DESKTOP HEADER BAR & NAVIGATION
   ========================================================================== */
.site-header,
.main-header-bar,
.ast-primary-header-bar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.25s ease !important;
}

.site-header.ast-header-sticky-active,
.site-header.scrolled,
.main-header-bar.ast-sticky-active {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Ensure menu items align vertically centered in the header */
.ast-desktop .main-header-menu,
.ast-desktop #ast-hf-menu-1 {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.ast-desktop .main-header-menu>.menu-item,
.ast-desktop #ast-hf-menu-1>.menu-item {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Menu Link styling - height auto so underline sits right under the text */
.ast-desktop .main-header-menu>.menu-item>.menu-link,
.ast-desktop #ast-hf-menu-1>.menu-item>.menu-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 6px 0 !important;
  margin: 0 16px !important;
  color: #2c3545 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
  transition: color 0.25s ease !important;
}

/* Anchor links default text color */
.ast-desktop .main-header-menu>.menu-item>.menu-link[href*="#"],
.ast-desktop #ast-hf-menu-1>.menu-item>.menu-link[href*="#"] {
  color: #2c3545 !important;
}

/* Base animated underline (default width: 0) */
.ast-desktop .main-header-menu>.menu-item>.menu-link::after,
.ast-desktop #ast-hf-menu-1>.menu-item>.menu-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background-color: #0072bc !important;
  border-radius: 2px !important;
  transition: width 0.3s ease !important;
  pointer-events: none !important;
}

/* ONLY genuine current page (NO hash '#' in href) shows active underline by default */
.ast-desktop .main-header-menu>.menu-item.current-menu-item>.menu-link:not([href*="#"])::after,
.ast-desktop .main-header-menu>.menu-item.current_page_item>.menu-link:not([href*="#"])::after,
.ast-desktop #ast-hf-menu-1>.menu-item.current-menu-item>.menu-link:not([href*="#"])::after,
.ast-desktop #ast-hf-menu-1>.menu-item.current_page_item>.menu-link:not([href*="#"])::after {
  width: 100% !important;
}

.ast-desktop .main-header-menu>.menu-item.current-menu-item>.menu-link:not([href*="#"]),
.ast-desktop .main-header-menu>.menu-item.current_page_item>.menu-link:not([href*="#"]),
.ast-desktop #ast-hf-menu-1>.menu-item.current-menu-item>.menu-link:not([href*="#"]),
.ast-desktop #ast-hf-menu-1>.menu-item.current_page_item>.menu-link:not([href*="#"]) {
  color: #0072bc !important;
}

/* Prevent anchor links (#map, #contact) from showing active line on page load */
.ast-desktop .main-header-menu>.menu-item>.menu-link[href*="#"]::after,
.ast-desktop #ast-hf-menu-1>.menu-item>.menu-link[href*="#"]::after {
  width: 0 !important;
}

/* Hover: expand underline smoothly to 100% on ANY hovered item */
.ast-desktop .main-header-menu>.menu-item:hover>.menu-link::after,
.ast-desktop #ast-hf-menu-1>.menu-item:hover>.menu-link::after {
  width: 100% !important;
}

.ast-desktop .main-header-menu>.menu-item:hover>.menu-link,
.ast-desktop #ast-hf-menu-1>.menu-item:hover>.menu-link {
  color: #0072bc !important;
}

/* Dropdown chevron arrow rotation & color */
.ast-desktop .main-header-menu .ast-arrow-svg,
.ast-desktop #ast-hf-menu-1 .ast-arrow-svg {
  transition: transform 0.25s ease, fill 0.25s ease !important;
  fill: #64748b !important;
  width: 14px !important;
  height: 14px !important;
}

.ast-desktop .main-header-menu .menu-item-has-children:hover .ast-arrow-svg,
.ast-desktop #ast-hf-menu-1 .menu-item-has-children:hover .ast-arrow-svg {
  transform: rotate(180deg) !important;
  fill: #0072bc !important;
}

/* ==========================================================================
   2. DESKTOP SUBMENU DROPDOWN (ROOM TYPES)
   ========================================================================== */
.ast-desktop .main-header-menu .sub-menu,
.ast-desktop #ast-hf-menu-1 .sub-menu {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid #e2e8f0 !important;
  padding: 8px 0 !important;
  min-width: 170px !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.ast-desktop .main-header-menu .sub-menu .ast-icon.icon-arrow,
.ast-desktop #ast-hf-menu-1 .sub-menu .ast-icon.icon-arrow {
  display: none !important;
}

.ast-desktop .main-header-menu .sub-menu .menu-link,
.ast-desktop #ast-hf-menu-1 .sub-menu .menu-link {
  display: block !important;
  padding: 10px 20px !important;
  color: #1e293b !important;
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  height: auto !important;
  transition: all 0.25s ease !important;
  background: transparent !important;
  border: none !important;
}

.ast-desktop .main-header-menu .sub-menu .menu-link::after,
.ast-desktop #ast-hf-menu-1 .sub-menu .menu-link::after {
  display: none !important;
}

.ast-desktop .main-header-menu .sub-menu .menu-item:hover>.menu-link,
.ast-desktop #ast-hf-menu-1 .sub-menu .menu-item:hover>.menu-link {
  background-color: #f0f7fc !important;
  color: #0072bc !important;
  padding-left: 24px !important;
}

/* ==========================================================================
   3. MOBILE HAMBURGER BUTTON
   ========================================================================== */
.ast-header-break-point .main-header-menu-toggle,
.ast-header-break-point .ast-mobile-menu-trigger-fill,
.ast-header-break-point .menu-toggle {
  background: transparent !important;
  border: none !important;
  color: #2c3545 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

.ast-header-break-point .main-header-menu-toggle:hover,
.ast-header-break-point .main-header-menu-toggle:focus,
.ast-header-break-point .menu-toggle:hover {
  background-color: #f0f7fc !important;
}

.ast-header-break-point .main-header-menu-toggle svg,
.ast-header-break-point .menu-toggle svg {
  fill: #2c3545 !important;
  transition: fill 0.25s ease !important;
}

.ast-header-break-point .main-header-menu-toggle:hover svg,
.ast-header-break-point .menu-toggle:hover svg {
  fill: #0072bc !important;
}

/* ==========================================================================
   4. MOBILE DROPDOWN MENU
   ========================================================================== */
.ast-header-break-point .ast-mobile-header-content {
  background-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 16px 20px !important;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item {
  width: 100% !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item:last-child {
  border-bottom: none !important;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item .menu-link {
  color: #1e293b !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  padding: 12px 8px !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  height: auto !important;
  margin: 0 !important;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item .menu-link::after {
  display: none !important;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item:hover>.menu-link,
.ast-header-break-point #ast-hf-mobile-menu .menu-item.current-menu-item>.menu-link:not([href*="#"]) {
  color: #0072bc !important;
}

.ast-header-break-point #ast-hf-mobile-menu .sub-menu {
  background-color: #faf9f6 !important;
  padding: 4px 0 4px 16px !important;
  border: none !important;
  box-shadow: none !important;
}

.ast-header-break-point #ast-hf-mobile-menu .sub-menu .menu-link {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
}