/* =========================================================
   Bootstrap Studio - bss-overrides.css
   Overrides personals del projecte
   ========================================================= */

/* ---------- Navbar (Casetes de Magí) ---------- */

/* Consistència general */

.clean-navbar {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* IMPORTANT: perquè el brand absolut s'ancori dins la navbar */

.clean-navbar .container {
  position: relative;
}

/* Brand: layout base (funciona bé en escriptori) */

/* Logo (imatge) */

/* Toggler: a la dreta */

.clean-navbar .navbar-toggler {
  margin-left: auto;
  position: relative;
  z-index: 3;
}

/* ---------- Comportament RESPONSIVE ----------
   Recomanat: canvia a l'HTML navbar-expand-lg -> navbar-expand-xl
   Així el "mode mòbil" és <1200px.
------------------------------------------------ */

/* MÒBIL/TABLET (<1200): centra el brand vertical + horitzontal sense tapar-se */

/* Si el menú col·lapsat et queda molt a dalt o molt a baix, ajusta l'alçada aquí */

@media (max-width: 1199.98px) {
  .clean-navbar {
    min-height: 72px;
  }
}

/* ESCRIPTORI (>=1200): comportament normal dins el flux */

/* ---------- Fi Navbar ---------- */

/* Evita que la navbar fixed-top se sobreposi al contingut */

body {
  padding-top: 72px;
}

/* Si en escriptori la navbar és més alta, ajusta-ho aquí */

@media (min-width: 1200px) {
  body {
    padding-top: 20px;
  }
}

/* Extra útil: ancoratges (si tens links tipus #seccio) */

html {
  scroll-padding-top: 72px;
}

@media (min-width: 1200px) {
  html {
    scroll-padding-top: 72px;
  }
}

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--bs-tertiary-bg, rgba(255, 248, 240, 0.95));
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader::before, #preloader::after {
  content: "";
  position: absolute;
  border: 4px solid #59bec5;
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader::after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }
  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}