/* ============================================================
 * VIP Services Mallorca — site chrome (header + footer)
 *
 * Native replacement for Elementor templates #404 (header)
 * and #8141 (footer). Everything is scoped under .vip-header
 * or .vip-footer so it cannot leak into Elementor pages while
 * the two systems run side by side.
 *
 * Depends on tokens.css.
 * ============================================================ */

/* ------------------------------------------------------------
   Shared
------------------------------------------------------------ */
.vip-header *,
.vip-footer * { box-sizing: border-box; }

.vip-container {
  max-width: var(--vip-container);
  margin: 0 auto;
  padding: 0 var(--vip-gutter);
}

.vip-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--vip-white);
  color: var(--vip-navy);
  font-family: var(--vip-sans);
  font-size: 14px;
  font-weight: 600;
}
.vip-skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 2px solid var(--vip-accent);
  outline-offset: 2px;
}

/* The parent theme supplies .screen-reader-text, but the chrome
   should not depend on it — a missing rule would dump the language
   names into the header as visible text. */
.vip-header .screen-reader-text,
.vip-footer .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible focus ring everywhere in the chrome — the Elementor
   header had none, which made it unusable by keyboard. */
.vip-header a:focus-visible,
.vip-header button:focus-visible,
.vip-footer a:focus-visible,
.vip-footer button:focus-visible {
  outline: 2px solid var(--vip-accent);
  outline-offset: 3px;
  border-radius: var(--vip-radius);
}

/* ============================================================
   HEADER
============================================================ */
.vip-header {
  background: var(--vip-chrome);
  font-family: var(--vip-sans);
  position: relative;
  z-index: 500;
}

/* --- pinned header ------------------------------------------
   Sticky on mobile and tablet (<=1024px, the same breakpoint that
   swaps the nav for the hamburger): on a small screen the menu is
   the only way to move around, so it has to stay reachable without
   scrolling back up. Desktop keeps the bar in flow, where the whole
   nav is visible anyway — opt in there with the `vip-header--sticky`
   class via the `vip_chrome_sticky` filter.

   `sticky` rather than `fixed` so the header keeps occupying its
   space and nothing needs a compensating top offset.
-------------------------------------------------------------- */
.vip-header--sticky {
  position: sticky;
  top: 0;
}

@media (max-width: 1024px) {
  .vip-header {
    position: sticky;
    top: 0;
  }
}

/* Shadow only once the page has actually moved, so the bar sits
   flat against the hero at rest. Toggled from chrome.js. */
.vip-header[data-stuck="true"] {
  box-shadow: var(--vip-shadow-bar);
}
.vip-header--sticky { transition: box-shadow var(--vip-dur) var(--vip-ease); }

/* The WordPress admin bar is fixed at >=783px and must not overlap
   a pinned header. Below that it scrolls away with the page, so the
   header belongs at top: 0. */
@media (min-width: 783px) {
  .admin-bar .vip-header--sticky,
  .admin-bar .vip-header { top: 32px; }
}
@media (min-width: 1025px) {
  /* Desktop is not sticky unless opted in — reset the offset so an
     unpinned header is not pushed down by the rule above. */
  .admin-bar .vip-header:not(.vip-header--sticky) { top: auto; }
}

.vip-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--vip-header-h);
}

/* --- logo --------------------------------------------------- */
.vip-header__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  /* Reserve the box so the logo cannot shift layout on load. */
  line-height: 0;
}
.vip-header__brand img {
  display: block;
  width: 210px;
  height: auto;
  max-width: 52vw;
}

/* --- primary nav -------------------------------------------- */
/* The nav holds two siblings — the menu and the language switcher.
   It has to be a flex row itself, or the switcher drops onto a
   second line and doubles the bar height. */
.vip-header__nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.vip-menu,
.vip-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vip-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.vip-menu > li { position: relative; }

.vip-menu > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  height: var(--vip-header-h);
  color: var(--vip-on-dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--vip-dur) var(--vip-ease);
}
.vip-menu > li > a:hover { color: var(--vip-white); }

/* Current page — the Elementor header marked this with colour
   only; a rule adds a non-colour cue for the colour-blind. */
.vip-menu > li.current-menu-item > a,
.vip-menu > li.current-menu-ancestor > a,
.vip-menu > li.current-page-ancestor > a {
  color: var(--vip-white);
  box-shadow: inset 0 -2px 0 var(--vip-accent);
}

/* --- submenu ------------------------------------------------ */
.vip-menu__caret {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  transition: transform var(--vip-dur) var(--vip-ease);
}
.vip-menu > li[data-open="true"] > a .vip-menu__caret { transform: rotate(180deg); }

.vip-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 268px;
  padding: 10px 0;
  background: var(--vip-chrome);
  border: 1px solid var(--vip-on-dark-line);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--vip-dur) var(--vip-ease),
              transform var(--vip-dur) var(--vip-ease),
              visibility var(--vip-dur);
}
.vip-menu > li:hover > .sub-menu,
.vip-menu > li:focus-within > .sub-menu,
.vip-menu > li[data-open="true"] > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.vip-menu .sub-menu a {
  display: block;
  padding: 11px 22px;
  color: var(--vip-on-dark-soft);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--vip-dur) var(--vip-ease),
              background var(--vip-dur) var(--vip-ease);
}
.vip-menu .sub-menu a:hover,
.vip-menu .sub-menu a:focus-visible {
  color: var(--vip-white);
  background: rgba(255,255,255,.06);
}
.vip-menu .sub-menu .current-menu-item > a { color: var(--vip-white); }

/* --- language switcher -------------------------------------- */
.vip-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid var(--vip-on-dark-line);
}
.vip-lang a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--vip-on-dark-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--vip-dur) var(--vip-ease);
}
.vip-lang a:hover { color: var(--vip-white); }
.vip-lang a[aria-current="true"] { color: var(--vip-white); }
.vip-lang img {
  display: block;
  width: 18px;
  height: 12px;
  object-fit: cover;
}

/* --- mobile toggle ------------------------------------------ */
.vip-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vip-white);
  cursor: pointer;
}
.vip-header__toggle svg { width: 26px; height: 26px; }
.vip-header__toggle .vip-icon-close,
.vip-header__toggle[aria-expanded="true"] .vip-icon-open { display: none; }
.vip-header__toggle[aria-expanded="true"] .vip-icon-close { display: block; }

/* ------------------------------------------------------------
   Header — mobile
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .vip-header__toggle { display: flex; }

  .vip-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Back to block flow — the drawer stacks menu over switcher. */
    display: none;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100vh - var(--vip-header-h));
    overflow-y: auto;
    padding: 8px 0 20px;
    background: var(--vip-chrome);
    border-top: 1px solid var(--vip-on-dark-line);
    box-shadow: 0 22px 44px rgba(0,0,0,.42);
  }
  .vip-header__nav[data-open="true"] { display: flex; }

  .vip-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--vip-gutter);
  }
  .vip-menu > li > a {
    height: auto;
    padding: 15px 0;
    justify-content: space-between;
    border-bottom: 1px solid var(--vip-on-dark-line);
  }
  .vip-menu > li.current-menu-item > a,
  .vip-menu > li.current-menu-ancestor > a,
  .vip-menu > li.current-page-ancestor > a {
    box-shadow: none;
    color: var(--vip-accent);
  }

  /* Submenus become accordions — hover is not available here. */
  .vip-menu .sub-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 4px 0 10px 14px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .vip-menu > li[data-open="true"] > .sub-menu { display: block; }
  .vip-menu > li:hover > .sub-menu,
  .vip-menu > li:focus-within > .sub-menu { display: none; }
  .vip-menu > li[data-open="true"]:hover > .sub-menu,
  .vip-menu > li[data-open="true"]:focus-within > .sub-menu { display: block; }
  .vip-menu .sub-menu a { padding: 10px 0; }

  .vip-lang {
    justify-content: flex-start;
    padding: 18px var(--vip-gutter) 0;
    margin: 0;
    border-left: 0;
  }
}

/* ============================================================
   FOOTER
============================================================ */
.vip-footer {
  background: var(--vip-chrome);
  color: var(--vip-on-dark-soft);
  font-family: var(--vip-sans);
  font-size: 14px;
  line-height: 1.65;
}
.vip-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--vip-dur) var(--vip-ease);
}
.vip-footer a:hover { color: var(--vip-white); }

.vip-footer__heading {
  margin: 0 0 18px;
  color: var(--vip-white);
  font-family: var(--vip-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* --- trusted-by band ---------------------------------------- */
.vip-footer__trust {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--vip-on-dark-line);
  text-align: center;
}
.vip-footer__trust .vip-footer__heading { font-size: 24px; }
.vip-footer__trust p {
  max-width: 620px;
  margin: 0 auto 34px;
}
/* One line on desktop.
   The English lead needs 623px and the cap was 620px, so it wrapped by
   three pixels - two lines for one word. 860px clears the Spanish lead
   too (757px, and it is the longer of the two) with room for the copy
   to grow. Narrower viewports keep the 620px measure and wrap, which is
   the right behaviour there. */
@media (min-width: 900px) {
  .vip-footer__trust p { max-width: 860px; }
}
.vip-footer__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px 68px;
}
.vip-footer__logos img {
  display: block;
  width: auto;
  height: 60px;
  max-width: 240px;
  object-fit: contain;
  opacity: .62;
  filter: grayscale(1);
  transition: opacity var(--vip-dur) var(--vip-ease),
              filter var(--vip-dur) var(--vip-ease);
}
.vip-footer__logos img:hover { opacity: 1; filter: grayscale(0); }

/* Mandarin Oriental is a stacked lockup (fan over two lines of text),
   near-square, while the others are wide wordmarks. Held to the same
   60px height its text is about 19px tall and hard to read, and the mark
   looks half the size of the rest. Taller here matches them optically. */
.vip-footer__logos img[src*="mandarin"] { height: 94px; max-width: 130px; }

/* --- main columns ------------------------------------------- */
.vip-footer__main {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) repeat(4, minmax(0, 1fr));
  gap: 44px 32px;
  padding: 60px 0 54px;
}

.vip-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vip-footer__col li + li { margin-top: 10px; }

/* --- contact tagline (ES footer only) ----------------------- */
.vip-footer__tagline {
  margin: 0 0 22px;
  max-width: 26ch;
  color: var(--vip-white);
  font-family: var(--vip-serif);
  font-size: 17px;
  line-height: 1.35;
}

/* --- contact block ------------------------------------------ */
.vip-footer__contact-item + .vip-footer__contact-item { margin-top: 22px; }
.vip-footer__label {
  display: block;
  margin-bottom: 4px;
  color: var(--vip-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
/* Same face and size as the column links (14px Inter), kept white and
   bold so they still read as the primary contact details. 600 rather
   than the old 500: at 17px that was clearly heavier than the 400 links
   around it, but at 14px it all but disappears.

   The old 17px also made the email 250px wide, which is what pushes it
   over "Work with us" in the next column. 14px takes it to 213px - 15%
   narrower, which may or may not be enough on its own. If it still
   overlaps, widen the first column rather than shrinking the type. */
.vip-footer__contact-item a {
  color: var(--vip-white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
}
.vip-footer__contact-item a:hover { color: var(--vip-accent); }

.vip-footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 11px 20px;
  border: 1px solid var(--vip-on-dark-line);
  border-radius: var(--vip-radius);
  color: var(--vip-on-dark) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--vip-dur) var(--vip-ease),
              border-color var(--vip-dur) var(--vip-ease);
}
.vip-footer__whatsapp:hover {
  background: var(--vip-accent);
  border-color: var(--vip-accent);
  color: var(--vip-white) !important;
}
.vip-footer__whatsapp svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- legal bar ---------------------------------------------- */
.vip-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--vip-on-dark-line);
  font-size: 12.5px;
}
.vip-footer__legal p { margin: 0; }
.vip-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- footer logo -------------------------------------------- */
/* The wordmark is a 12px-tall image sharing a grid row with the 19px
   serif column headings, whose line box is 24px. Both cells start at the
   same top, so top-aligned the logo sat 6px above the headings' optical
   centre. Match the heading's box and centre the image inside it.

   margin-bottom drops 22 -> 18 to match the headings' own, which also
   brings CALL US into line with About and the other columns' first link
   instead of sitting 11px high. */
.vip-footer__mark {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 18px;
  line-height: 0;
}
.vip-footer__mark img {
  display: block;
  width: 200px;
  height: auto;
  max-width: 100%;
  opacity: .9;
}

/* ------------------------------------------------------------
   Footer — responsive
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .vip-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
  .vip-footer__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .vip-footer__trust { padding: 44px 0 38px; }

  /* Four across on one line rather than a 2x2 block.
     Wrapped, the four marks read as two unrelated pairs; in a single
     row they read as one list of clients, which is the whole point of
     the strip. Sizing has to flip from height-led to width-led to do
     it: each mark gets a quarter of the row and object-fit keeps it
     inside, so the wide wordmarks and the near-square Mandarin lockup
     can share a row without one of them overflowing. */
  .vip-footer__logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 10px;
    align-items: center;
  }
  .vip-footer__logos img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
  }
  /* Still the taller one, for the same reason it is taller on desktop. */
  .vip-footer__logos img[src*="mandarin"] { height: auto; max-height: 52px; }
  .vip-footer__main {
    grid-template-columns: minmax(0, 1fr);
    padding: 46px 0 40px;
  }
  .vip-footer__legal { justify-content: flex-start; }
}