/**
 * Header - Portugal + US section
 * Matches Netlify shell.css header design. Shared styles apply to both
 * `.residentas-header-portugal` (Portugal pages) and `.residentas-header-us`
 * (US pages) so both regions get the same sticky + branded header.
 */

/* ========== HEADER CONTAINER ========== */
.residentas-header-portugal,
.residentas-header-us {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 48px) !important;
  background: rgba(255, 251, 245, 0.9);
  border-bottom: 1px solid rgba(35, 26, 21, 0.07);
  box-shadow: 0 6px 20px rgba(35, 26, 21, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Scrolled state (added by JS) */
.residentas-header-portugal.scrolled,
.residentas-header-us.scrolled {
  background: rgba(255, 251, 245, 0.96);
  box-shadow: 0 8px 24px rgba(35, 26, 21, 0.07);
  border-bottom-color: rgba(35, 26, 21, 0.09);
}

/* ========== BRAND ("Residentas Portugal") ========== */
.residentas-header-left {
  gap: 0 !important;
}
.residentas-brand {
  gap: 10px !important;
}
.residentas-brand-logo img,
.residentas-brand-logo .wp-block-image img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
  display: block;
  filter: brightness(1.08) saturate(1.06);
}
.residentas-brand-text,
.residentas-brand-text a {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(11px, 0.9vw, 13px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #231a15 !important;
  text-decoration: none !important;
}

/* ========== NAV LINKS ========== */
/* Push the whole nav block to the right */
.residentas-header-portugal .wp-block-navigation,
.residentas-header-us .wp-block-navigation {
  margin-left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.residentas-nav-links {
  gap: 10px !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}
.residentas-nav-links .wp-block-navigation-item a,
.residentas-nav-links .wp-block-navigation__container > .wp-block-navigation-item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 12px 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #3d3029 !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* Hover underline animation */
.residentas-nav-links .wp-block-navigation-item a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 1.5px;
  background: #b95732;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.residentas-nav-links .wp-block-navigation-item a:hover {
  color: #8f3c24 !important;
}
.residentas-nav-links .wp-block-navigation-item a:hover::after {
  transform: scaleX(1);
}

/* Active page underline (stays visible) */
.residentas-nav-links .wp-block-navigation-item.current-menu-item a::after,
.residentas-nav-links .wp-block-navigation-item--active a::after {
  transform: scaleX(1);
  height: 2px;
}

/* ========== "BOOK YOUR STAY" PILL BUTTON ========== */
.residentas-book-direct a,
.residentas-book-direct .wp-block-navigation-item__content {
  margin-left: 18px !important;
  padding: 14px 42px !important;
  border-radius: 999px !important;
  background: #b95732 !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(143, 60, 36, 0.24) !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  min-width: 168px;
  text-align: center !important;
}

/* Remove underline animation on Book button */
.residentas-book-direct a::after {
  display: none !important;
}

/* Hover - darker + lift */
.residentas-book-direct a:hover,
.residentas-book-direct .wp-block-navigation-item__content:hover {
  background: #8f3c24 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(143, 60, 36, 0.3) !important;
}

/* Fix specificity - nav hover rule was overriding button white text */
.residentas-nav-links .residentas-book-direct a,
.residentas-nav-links .residentas-book-direct .wp-block-navigation-item__content {
  color: #fff !important;
}
.residentas-nav-links .residentas-book-direct a:hover,
.residentas-nav-links .residentas-book-direct .wp-block-navigation-item__content:hover {
  background: #8f3c24 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* ========== HEADER RESPONSIVE ========== */
@media (max-width: 980px) {
  .residentas-header-portugal,
  .residentas-header-us {
    padding: 10px clamp(14px, 4vw, 28px) !important;
    gap: 12px !important;
  }

  /* Hide the horizontal desktop nav <ul>; only the hamburger + drawer show on mobile */
  .residentas-header-portugal .wp-block-navigation > .wp-block-navigation__container,
  .residentas-header-us .wp-block-navigation > .wp-block-navigation__container {
    display: none !important;
  }

  /* Hamburger button (matches the static .rs-nav-toggle styling) */
  .residentas-header-portugal .wp-block-navigation__responsive-container-open,
  .residentas-header-us .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin-left: auto;
    background: rgba(185, 87, 50, 0.08);
    border: 1px solid rgba(35, 26, 21, 0.1);
    border-radius: 12px;
    color: #231a15;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .residentas-header-portugal .wp-block-navigation__responsive-container-open:hover,
  .residentas-header-us .wp-block-navigation__responsive-container-open:hover {
    background: rgba(185, 87, 50, 0.16);
    border-color: rgba(35, 26, 21, 0.16);
  }

  /* Drawer hidden when not open */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  /* Drawer overlay = backdrop. Click outside the inner dialog closes it. */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    background: rgba(20, 14, 10, 0.42) !important;
    z-index: 100050 !important;
    animation: rs-drawer-fade 0.25s ease;
  }

  /* Inner dialog = the side panel sliding in from the right */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(320px, 86vw) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    padding: 76px 22px 32px !important;
    background: rgba(255, 251, 245, 0.98) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: -10px 0 30px rgba(35, 26, 21, 0.14);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: rs-drawer-slide 0.3s ease;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    margin: 0 !important;
    padding: 0 !important;
    height: auto;
  }

  /* Close (×) button - same pill style as hamburger.
     Use fixed positioning so it always sits at viewport top-right; the dialog
     element gets `position: relative` from style.css and otherwise becomes
     the absolute container, pushing the X down inside the drawer. */
  .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    background: rgba(185, 87, 50, 0.08) !important;
    border: 1px solid rgba(35, 26, 21, 0.1) !important;
    border-radius: 12px !important;
    color: #231a15 !important;
    cursor: pointer;
    z-index: 100100 !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .wp-block-navigation__responsive-container-close:hover {
    background: rgba(185, 87, 50, 0.16) !important;
    border-color: rgba(35, 26, 21, 0.16) !important;
  }

  /* Stack the nav links vertically inside the drawer */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
  }
  .residentas-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 10px;
  }

  /* Book Direct CTA inside the drawer */
  .wp-block-navigation__responsive-container.is-menu-open .residentas-book-direct a {
    margin-top: 10px !important;
    margin-left: 0 !important;
    justify-content: center !important;
    text-align: center;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(143, 60, 36, 0.22);
  }
}

@keyframes rs-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rs-drawer-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (max-width: 640px) {
  .residentas-brand-logo img {
    width: 28px !important;
    height: 28px !important;
  }
  .residentas-brand-text,
  .residentas-brand-text a {
    font-size: 12px !important;
  }
}