/* ================================
   StOliva Footer (scoped-only CSS)
   - No global selectors (html/body/*)
   - No layout/flex on the page root
   - Safe to include anywhere
   ================================ */

/* Footer root */
.stoliva-footer {
  --stoliva-footer-bg: #001b3d;
  --stoliva-footer-fg: #fffaee;

  background-color: var(--stoliva-footer-bg);
  color: var(--stoliva-footer-fg);
  padding: 6vh 0;
  font-family: 'Open Sans SemiCondensed', sans-serif;

  /* Local layout only */
  display: flex;
  justify-content: center;

  /* Never fixed/absolute; just sit after content */
  position: relative;
  width: 100%;
}

/* Optional: if you *do* want sticky behavior on some pages,
   wrap main content + footer in an element with this class,
   and make THAT wrapper flex in the page CSS (not here):
   .sticky-footer-context { display:flex; flex-direction:column; min-height:100vh; }
   .sticky-footer-context .stoliva-footer { margin-top:auto; }
*/

/* Inner container */
.stoliva-footer .footer-inner {
  width: min(90vw, 1280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
}

/* Logo */
.stoliva-footer .footer-logo img {
  height: 8vh;
  max-height: 60px;
  width: auto;
  display: block;
  filter: brightness(96%);
}

/* Navigation */
.stoliva-footer .footer-nav {
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1vw;
}

.stoliva-footer .footer-nav a {
  text-decoration: none;
  color: var(--stoliva-footer-fg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, opacity 0.2s;
}

.stoliva-footer .footer-nav a:hover {
  opacity: 0.8;
}

/* Icons row */
.stoliva-footer .footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8vw;
  margin-top: 1.8vh;
}

/* Specific icon sizing (scoped by IDs used inside footer) */
.stoliva-footer #footer-icon-booking { width: 6vw; height: auto; max-height: 7vh; }
.stoliva-footer #footer-icon-airbnb  { width: 5vw; height: auto; max-height: 7vh; }
.stoliva-footer #footer-icon-instagram { width: 1.5vw; height: auto; max-height: 7vh; }

/* Partner + card + security icons (uniform groups) */
.stoliva-footer #footer-icon-nlb,
.stoliva-footer #footer-icon-visa-secure,
.stoliva-footer #footer-icon-mc-idcheck {
  width: 4vw;
  height: auto;
  max-height: 5.5vh;
}

.stoliva-footer #footer-icon-visa,
.stoliva-footer #footer-icon-mastercard,
.stoliva-footer #footer-icon-maestro {
  width: 3vw;
  height: auto;
  max-height: 4.5vh;
}

/* AllSecure slightly larger */
.stoliva-footer #footer-icon-allsecure {
  width: 7vw;
  height: auto;
  max-height: 8vh;
}

/* Shared image behavior */
.stoliva-footer .footer-icons img {
  display: block;
  filter: brightness(96%);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.stoliva-footer .footer-icons a img:hover,
.stoliva-footer .footer-icons img:hover {
  transform: scale(1.05);
  filter: brightness(105%);
}

/* Copyright */
.stoliva-footer .footer-copy {
  font-size: 0.9vw;
  opacity: 0.8;
  text-align: center;
}

/* ------------------ Responsive ------------------ */
@media (max-width: 700px) {
  .stoliva-footer .footer-logo img { height: 40px; }

  .stoliva-footer .footer-nav {
    font-size: 3.6vw;
    gap: 4vw;
  }

  .stoliva-footer #footer-icon-booking { width: 12vw; }
  .stoliva-footer #footer-icon-airbnb  { width: 10vw; }
  .stoliva-footer #footer-icon-instagram { width: 2.5vw; }

  /* Uniform mobile widths for groups */
  .stoliva-footer #footer-icon-nlb,
  .stoliva-footer #footer-icon-visa,
  .stoliva-footer #footer-icon-mastercard,
  .stoliva-footer #footer-icon-maestro,
  .stoliva-footer #footer-icon-visa-secure,
  .stoliva-footer #footer-icon-mc-idcheck {
    width: 8vw;
  }

  .stoliva-footer #footer-icon-allsecure { width: 9.5vw; }

  .stoliva-footer .footer-copy {
    font-size: 3vw;
  }
}