/* ── Menu — Option B (Frosted Glass) ───────────────────────────────
   Navigation bar styles. Linked from header.php.
──────────────────────────────────────────────────────────────────── */

/* Site title — slightly smaller */
#logo_texto .direita {
  font-size: 14px !important;
}

/* ── Phone icon button in the nav bar ───────────────────────────── */
#phone-btn {
  flex-shrink: 0;
  width: 44px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9501;
  transition: opacity .2s;
  position: relative;
}
#phone-btn img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .65;
  transition: opacity .2s, filter .2s;
}
#phone-btn:hover img,
#phone-btn.active img {
  opacity: 1;
  filter: invert(68%) sepia(60%) saturate(600%) hue-rotate(8deg) brightness(1.1);
}

/* ── Phone dropdown panel ────────────────────────────────────────── */
#phone-dropdown {
  position: fixed;
  top: 48px;
  left: 0;
  width: 100%;
  background: rgba(20,18,15,.97);
  border-bottom: 2px solid #b38f00;
  z-index: 9490;
  display: none;
  padding: 12px 24px;
  box-sizing: border-box;
}
#phone-dropdown-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #d9c87e;
  font-family: cinzel, serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .2s;
}
#phone-dropdown-link:hover { color: #fff; }
#phone-dropdown-link img {
  width: 18px;
  height: 18px;
  filter: invert(68%) sepia(60%) saturate(600%) hue-rotate(8deg) brightness(1.1);
}
#phone-dropdown-cost {
  font-family: marcellus, sans-serif;
  font-size: .72rem;
  color: #777;
  letter-spacing: .04em;
  margin-top: 5px;
}

/* Desktop: phone icon absolutely positioned at right of .menu,
   nav ul shifts left to clear it — no changes to .menu layout */
@media only screen and (min-width: 961px) {
  #phone-btn {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    height: 48px !important;
    width: 44px !important;
  }
  /* Shift nav items left to clear the phone icon */
  #nav > ul {
    margin-right: 44px !important;
    margin-left: 0 !important;
    width: calc(100% - 44px) !important;
  }
  /* Dropdown: push content block to the right of the bar
     (display controlled by JS — do NOT set display here) */
  #phone-dropdown {
    justify-content: flex-end;
    padding: 12px 24px;
  }
  /* Inner block: column, items flush-left with each other */
  #phone-dropdown-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile: phone icon at far right of .menu,
   hamburger snaps close to it with a small gap */
@media only screen and (max-width: 960px) {
  #phone-btn {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    width: 40px !important;
    height: 48px !important;
  }
  /* Nav shrinks to just wrap the hamburger, sitting right next to phone icon */
  .menu #nav.item_mobile {
    position: absolute !important;
    right: 44px !important;   /* phone icon (40px) + 4px gap */
    top: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  .botaomenu_mobile {
    width: auto !important;
  }
  /* On touch devices :hover is sticky — neutralise it so only .active
     controls the gold state; removing .active reliably reverts the icon */
  #phone-btn:hover img {
    opacity: .65 !important;
    filter: brightness(0) invert(1) !important;
  }
  #phone-btn.active img {
    opacity: 1 !important;
    filter: invert(68%) sepia(60%) saturate(600%) hue-rotate(8deg) brightness(1.1) !important;
  }
  /* Mobile dropdown: full-width panel with prominent tap-to-call button */
  #phone-dropdown {
    padding: 18px 20px 20px;
    text-align: center;
  }
  #phone-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 14px 24px;
    border: 2px solid #4caf50;
    border-radius: 4px;
    color: #4caf50 !important;
    font-size: 1.25rem;
    box-sizing: border-box;
  }
  #phone-dropdown-link:hover,
  #phone-dropdown-link:active { background: rgba(76,175,80,.12); }
  #phone-dropdown-link img {
    filter: invert(55%) sepia(60%) saturate(500%) hue-rotate(90deg) brightness(1.1);
  }
  #phone-dropdown-cost {
    margin-top: 10px;
    text-align: center;
    font-size: .75rem;
  }
}

/* Bar — all screen sizes */
.menu_wrapper {
  background: rgba(20,18,15,.82) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(179,143,0,.4);
  box-shadow: none !important;
  transition: background .3s !important;
  z-index: 9500 !important;
}
.menu_wrapper:hover,
.menu_wrapper.scroll {
  background: rgba(20,18,15,.95) !important;
}

/* Mobile */
@media only screen and (max-width: 960px) {
  .botaomenu_mobile a {
    font-size: 0 !important;
    line-height: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 4px !important;
  }
  .botaomenu_mobile a::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 3px !important;
    background: #b38f00 !important;
    box-shadow: 0 7px 0 #b38f00, 0 14px 0 #b38f00 !important;
    margin: 0 0 14px !important;
  }
  .menu .item_img {
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .botaomenu_mobile.menu-open,
  .botaomenu_mobile.menu-open a {
    background: #fff !important;
  }
  .botaomenu_mobile.menu-open a::before {
    content: '\2715' !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    color: #b38f00 !important;
    font-family: sans-serif !important;
  }

  .menu_wrapper {
    background: rgba(20,18,15,.97) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Hide arrow images, replace with CSS chevron */
  .menu .item img[src*="setamenu"] {
    display: none !important;
  }
  .menu .item > a[aria-haspopup="true"]::after {
    content: ' \25BE';
    color: #b38f00;
    font-size: 1.1em;
  }
  #submenu_lang .pais_seleccionado > div:last-child::after {
    content: '\25BE';
    display: block;
    color: #b38f00;
    font-size: 1.1em;
    line-height: 1;
  }

  /* Prevent nav container itself from going gold on hover */
  .menu .item_mobile,
  .menu .item_mobile:hover,
  .menu .item_mobile:active {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }

  /* First level items — hover/active state */
  .menu .item:hover,
  .menu .item:active,
  .menu .item:focus,
  #nav > ul > li:hover,
  #nav > ul > li:active,
  #nav > ul > li:focus {
    background: #3a3835 !important;
    color: #fff !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
  }

  /* Remove gap under language item so dropdown stays reachable */
  .ul_paises {
    margin-top: 0 !important;
  }

  /* First level items — white text */
  #nav:target > ul {
    background-color: #1a1817 !important;
    border-bottom: 2px solid #b38f00 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    z-index: 9499 !important;
  }
  .menu_wrapper {
    z-index: 9500 !important;
  }
  #nav > ul > li {
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    color: #fff !important;
    font-family: marcellus, sans-serif !important;
    font-size: 13px !important;
    font-weight: normal !important;
    letter-spacing: .1em !important;
  }
  #nav > ul > li > a {
    color: #fff !important;
    font-family: marcellus, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .1em !important;
  }

  /* Disable hover-based dropdowns on mobile — use JS .open class only */
  #nav li:hover ul {
    display: none !important;
  }
  #nav > ul > li.open > ul {
    display: block !important;
  }

  /* Dropdown — white background, black text, left-aligned, gold dot */
  #nav li ul {
    background: #fff !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 2px solid #b38f00 !important;
    padding: 0 !important;
  }
  #nav li ul li {
    background: #fff !important;
    border-top: 1px solid #f0ebe0 !important;
    color: #2c2c2c !important;
    font-family: marcellus, sans-serif !important;
    font-size: .85rem !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    text-transform: none !important;
    padding-left: 28px !important;
    position: relative !important;
  }
  #nav li ul li::before {
    content: '•';
    color: #b38f00;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  #nav li ul li:hover {
    background: #faf8f3 !important;
    color: #b38f00 !important;
  }
  #nav li ul a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* Desktop only — nav items and dropdowns */
@media only screen and (min-width: 961px) {
  /* Nav used to be 93% to leave room for the house icon; now fills full width */
  #nav { width: 100% !important; }

  /* Rebalance item widths: shorter items (MORE, EN[+]) get less cell width
     so there's less empty space around their short text */
  #submenu_villas      { width: 22% !important; }
  #nav > ul > li:nth-child(2) { width: 20% !important; }
  #submenu_services    { width: 26% !important; }
  #submenu_destinations{ width: 16% !important; }
  #submenu_lang        { width: 16% !important; }

  .menu .item {
    color: #fff !important;
    font-weight: normal !important;
    font-size: 13px !important;
    letter-spacing: .1em !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    transition: color .2s !important;
    position: relative !important;
  }
  .menu .item:hover {
    background: transparent !important;
    color: #d9c87e !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    cursor: pointer !important;
  }
  .menu .item::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: #b38f00;
    transition: left .25s, right .25s;
  }
  .menu .item:hover::before {
    left: 8px;
    right: 8px;
  }
  .menu .item img[src*="setamenu"] {
    display: none !important;
  }
  .menu .item > a[aria-haspopup="true"]::after {
    content: ' \25BE';
    color: #b38f00;
    font-size: 1.1em;
  }
  #submenu_lang .pais_seleccionado > div:last-child::after {
    content: ' \25BE';
    color: #b38f00;
    font-size: 1.1em;
  }
  #nav li ul {
    background: #fff !important;
    border: none !important;
    border-top: 2px solid #b38f00 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
    border-radius: 0 0 3px 3px !important;
    padding: 0 !important;
  }
  /* pais_seleccionado has height:15px hardcoded in style.css.
     The <li> has padding:14px top+bottom (from .item), so max content
     height = 48px bar − 28px padding = 20px.  16px matches the natural
     line-height of text nav items, keeping the dropdown at the same
     vertical position as all other top-level items. */
  #submenu_lang .pais_seleccionado {
    height: 16px !important;
    display: inline-block !important;
    box-sizing: border-box !important;
  }
  #nav li ul li {
    background: #fff !important;
    border-top: 1px solid #f0ebe0 !important;
    color: #2c2c2c !important;
    font-family: marcellus, sans-serif !important;
    font-size: .85rem !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    padding-left: 28px !important;
    position: relative !important;
    text-transform: none !important;
  }
  #nav li ul li:first-child { border-top: none !important; }
  #nav li ul li::before {
    content: '•';
    color: #b38f00;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  #nav li ul li:hover {
    background: #faf8f3 !important;
    color: #b38f00 !important;
  }
  #nav li ul a {
    color: inherit !important;
    text-decoration: none !important;
  }
}