/* ============================================================================
   Hola Holidays — global footer (2026 rebuild)

   Paired with assets/js/footer-2026.js, which mounts the markup into
   #siteFooter on every public page. There is one footer implementation; this
   file is the only stylesheet that owns it.

   Direction: premium boutique travel — light surface, generous but controlled
   whitespace, one accent colour (Rausch coral) reserved for actions, hairline
   separators instead of boxes or shadows.

   The container width matches the header's inner bar so the footer and the
   navigation share the same left and right edge on every page.

   airbnb-2026.css re-asserts the same token names on .ae-footer, so the palette
   lives in one place.
   ============================================================================ */

.ae-footer,
.ae-footer-cta {
  --footer-container: 1280px;
  --footer-bg: #FFFFFF;
  --footer-bg-deep: #F7F7F7;
  --footer-text: #222222;
  --footer-muted: #717171;
  --footer-line: #EBEBEB;
  --footer-line-strong: #DDDDDD;
  --footer-brand: #FF385C;
  --footer-whatsapp: #25D366;
  --footer-radius: 12px;
  --footer-gutter: 24px;
}

.ae-footer {
  position: relative;
  margin-top: 0;
  color: var(--footer-text);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-line);
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ae-footer *,
.ae-footer *::before,
.ae-footer *::after { box-sizing: border-box; }

.ae-footer a { color: inherit; text-decoration: none; }

.ae-footer a:focus-visible,
.ae-footer button:focus-visible,
.ae-footer select:focus-visible,
.ae-footer-cta a:focus-visible {
  outline: 2px solid var(--footer-brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.ae-footer__container {
  width: min(var(--footer-container), calc(100% - (var(--footer-gutter) * 2)));
  margin: 0 auto;
}

/* ---- MAIN GRID ------------------------------------------------------------ */
.ae-footer__grid {
  display: grid;
  /* Brand column is deliberately the widest; the three link columns are sized
     for their labels, not stretched to fill. */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px 48px;
  padding: 60px 0 44px;
}

.ae-footer__brandcol { min-width: 0; }

/* ---- BRAND ---------------------------------------------------------------- */
.ae-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ae-footer__logo {
  width: 72px;
  height: 72px;
  border: 1px solid var(--footer-line);
  border-radius: 16px;
  padding: 3px;
  background: #fff;
  display: block;
  flex: none;
  object-fit: contain;
  box-shadow: 0 4px 14px rgba(20, 45, 55, .09);
}

.ae-footer__brand-name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--footer-text);
}

.ae-footer__about {
  margin: 16px 0 20px;
  max-width: 38ch;
  color: var(--footer-muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.ae-footer__contact {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ae-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--footer-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ae-footer__contact i {
  color: var(--footer-brand);
  font-size: 0.8125rem;
  width: 1.1em;
  margin-top: 4px;
  text-align: center;
  flex: none;
}

.ae-footer__contact a {
  transition: color 130ms ease;
  overflow-wrap: anywhere;
}
.ae-footer__contact a:hover { color: var(--footer-text); }

/* ---- WHATSAPP ACTION ------------------------------------------------------ */
/* A labelled pill, not a lone icon: the number alone does not tell a visitor
   that they can start a conversation. */
.ae-footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--footer-line-strong);
  border-radius: 999px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.ae-footer__whatsapp i {
  color: var(--footer-whatsapp);
  font-size: 1.0625rem;
  flex: none;
}

.ae-footer__whatsapp:hover {
  background: #F1FBF4;
  border-color: #B7E6C6;
}

/* ---- SOCIALS -------------------------------------------------------------- */
.ae-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ae-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--footer-line);
  border-radius: 50%;
  color: var(--footer-muted);
  font-size: 0.9375rem;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.ae-footer__social:hover {
  color: var(--footer-text);
  border-color: var(--footer-line-strong);
  background: var(--footer-bg-deep);
}

/* ---- LINK COLUMNS --------------------------------------------------------- */
.ae-footer__col { min-width: 0; }

.ae-footer .ae-footer__heading {
  margin: 0 0 16px;
  color: var(--footer-text);
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ae-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}

.ae-footer__links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--footer-muted);
  font-size: 0.9rem;
  transition: color 130ms ease;
}

.ae-footer__links a:hover { color: var(--footer-text); }

/* ---- META ROW ------------------------------------------------------------- */
.ae-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px 0;
  border-top: 1px solid var(--footer-line);
}

.ae-footer__language {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--footer-muted);
  font-size: 0.8125rem;
  flex: none;
}

.ae-footer__language label { font-weight: 600; }

.ae-footer__language-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--footer-line-strong);
  border-radius: 10px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 30px 7px 11px;
  cursor: pointer;
  /* Chevron drawn inline so the control needs no icon font and no extra file. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23717171' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
}

.ae-footer__payments {
  margin: 0;
  color: var(--footer-muted);
  font-size: 0.8125rem;
  text-align: right;
}

/* ---- ACCREDITATIONS ------------------------------------------------------- */
.ae-footer__accreditations {
  background: var(--footer-bg-deep);
  border-top: 1px solid var(--footer-line);
  padding: 20px 0;
}

.ae-footer__accreditations-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 44px;
}

.ae-footer__accreditations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 36px;
}

.ae-footer__accreditation {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ae-footer__accreditation img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  flex: none;
}

.ae-footer__accreditation-name {
  color: var(--footer-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ---- BOTTOM BAR ----------------------------------------------------------- */
/* The extra bottom padding is clearance for the floating AI launcher, which is
   fixed to the bottom-left of the viewport. Once the page is scrolled to the
   end the launcher sits over the bottom bar, so the bar is pushed up by the
   launcher's own footprint plus a gap:
     - mobile/tablet (<=620px): 52px tall, 14px from the bottom -> 76px
     - desktop (>=621px):       56px tall, 22px from the bottom -> 84px
   The clearance is needed at every width: below 621px the bar stacks, but the
   credit pill still ends up directly above the launcher, not beside it. */
.ae-footer__bottom { padding: 22px 0 76px; }

@media (min-width: 621px) {
  .ae-footer__bottom { padding: 24px 0 84px; }
}

.ae-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  color: var(--footer-muted);
  font-size: 0.8125rem;
}

.ae-footer__copyright { margin: 0; }

/* Legal navigation deliberately does NOT repeat here — the four policy links
   live once, in the Support & legal column. */
.ae-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--footer-text);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: opacity 140ms ease;
}

.ae-footer__credit:hover { opacity: 0.86; }
.ae-footer__credit img { height: 13px; width: auto; display: block; }

/* ---- PRE-FOOTER CTA ------------------------------------------------------- */
/* Rendered by the footer component as a sibling of <footer>, only on pages
   whose body class is not in cta.exclude_classes. */
.ae-footer-cta {
  background: var(--footer-bg-deep);
  border-top: 1px solid var(--footer-line);
  font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
}

.ae-footer-cta__inner {
  width: min(var(--footer-container), calc(100% - (var(--footer-gutter) * 2)));
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}

.ae-footer-cta__copy { min-width: 0; max-width: 52ch; }

.ae-footer-cta__title {
  margin: 0;
  color: var(--footer-text);
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.ae-footer-cta__text {
  margin: 8px 0 0;
  color: var(--footer-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ae-footer-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex: none;
}

.ae-footer-cta__primary,
.ae-footer-cta__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.ae-footer-cta__primary {
  background: var(--footer-brand);
  color: #FFFFFF;
}
.ae-footer-cta__primary:hover { background: #E00B41; }

.ae-footer-cta__secondary {
  background: var(--footer-bg);
  border: 1px solid var(--footer-line-strong);
  color: var(--footer-text);
}
.ae-footer-cta__secondary:hover { border-color: var(--footer-text); }

/* ---- RESPONSIVE ----------------------------------------------------------- */

/* Tablet landscape — brand takes the full row, link columns share the next. */
@media (max-width: 1080px) {
  .ae-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 40px;
    padding: 52px 0 40px;
  }
  .ae-footer__brandcol { grid-column: 1 / -1; }
  .ae-footer__about { max-width: 56ch; }
}

/* Tablet portrait — link columns pair up, and each list splits so a group that
   ends up alone on its row (Support & legal) still fills the width. */
@media (max-width: 820px) {
  .ae-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 32px;
  }
  .ae-footer__links {
    /* 140px, not 150px: a 375px screen leaves a 319px column, and two 150px
       tracks plus the gap need 320px — one pixel short, which silently fell
       back to a single tall column. "Cancellation Policy" is ~133px at this
       size, so it still fits on one line. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0 20px;
  }
  .ae-footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ae-footer__payments { text-align: left; }
  .ae-footer-cta__inner { padding: 34px 0; }
}

/* Mobile — one column; each link list splits into two where the labels fit, so
   the footer stays compact without hiding anything behind an accordion. */
@media (max-width: 620px) {
  .ae-footer,
  .ae-footer-cta { --footer-gutter: 20px; }

  .ae-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 44px 0 32px;
  }
  .ae-footer .ae-footer__heading { margin-bottom: 10px; }

  .ae-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ae-footer__accreditations-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .ae-footer__accreditations-list {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .ae-footer-cta__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 0;
  }
  .ae-footer-cta__actions { flex-direction: column; align-items: stretch; }
  .ae-footer-cta__primary,
  .ae-footer-cta__secondary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ae-footer *,
  .ae-footer *::before,
  .ae-footer *::after,
  .ae-footer-cta *,
  .ae-footer-cta *::before,
  .ae-footer-cta *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .ae-footer-cta,
  .ae-footer__credit,
  .ae-footer__socials { display: none; }

  /* The launcher clearance is on-screen only. */
  .ae-footer__bottom { padding: 22px 0; }
}