/* Xirimiters de la Marina - Public frontend enhancements (progressive enhancement)
 * Loaded AFTER style.min.css. Only adds microinteractions + particle canvas styling.
 * Nothing here is required for the page to work; all motion respects reduced-motion.
 * Palette: navy #1E3A5F · morado #5D3056 · coral #F16D5A · gold #c9a227
 */

/* ---- Hero particle canvas: behind the text content, above the slide images ---- */
.hero-home .hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;            /* slides are z-index:0, content is z-index:2 */
  pointer-events: none;  /* never intercept clicks/scroll */
  display: block;
}

/* ---- Global smooth microinteractions (subtle, brand-coherent) ---- */
/* Buttons: gentle lift + soft shadow on hover. */
.btn {
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s ease,
              background-color .22s ease,
              border-color .22s ease,
              color .22s ease;
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30,58,95,.22);
}
.btn:active { transform: translateY(0); }

/* Cards / tiles: hover lift + softened shadow. Keep it light. */
.feature-box,
.service-card,
.pricing-card,
.help-card,
.event-card,
.instrument-card,
.testimonial-card,
.gallery-item {
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease;
}
.feature-box:hover,
.service-card:hover,
.pricing-card:hover,
.help-card:hover,
.event-card:hover,
.instrument-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(30,58,95,.16);
}
.gallery-item:hover { transform: translateY(-3px); }

/* Feature icons: soft pop + coral/gold warmth on card hover. */
.feature-icon-large,
.feature-icon {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), color .3s ease;
}
.feature-box:hover .feature-icon-large,
.feature-box:hover .feature-icon {
  transform: scale(1.08) translateY(-2px);
}

/* "Read more" style links: arrow nudges on hover. */
.feature-link i,
.btn i.fa-arrow-right {
  transition: transform .25s ease;
}
.feature-box:hover .feature-link i,
.btn:hover i.fa-arrow-right {
  transform: translateX(4px);
}

/* Generic inline links: smooth color transition. */
a {
  transition: color .2s ease;
}

/* Social / footer icon links: subtle scale on hover. */
.footer a i,
.social-link i,
.nav-social a i {
  transition: transform .2s ease, color .2s ease;
  display: inline-block;
}
.footer a:hover i,
.social-link:hover i,
.nav-social a:hover i {
  transform: translateY(-2px) scale(1.1);
}

/* Hero scroll chevron: gentle continuous hint (kept very subtle). */
.hero-scroll i {
  animation: xir-bob 2.2s ease-in-out infinite;
}
@keyframes xir-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Keyboard focus visibility (accessibility, not motion). */
.btn:focus-visible,
.feature-box:focus-visible,
a:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

/* ---- Respect user preference: kill all added motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .feature-box,
  .service-card,
  .pricing-card,
  .help-card,
  .event-card,
  .instrument-card,
  .testimonial-card,
  .gallery-item,
  .feature-icon-large,
  .feature-icon,
  .feature-link i,
  .footer a i,
  .social-link i,
  .nav-social a i,
  a {
    transition: none !important;
  }
  .btn:hover,
  .feature-box:hover,
  .service-card:hover,
  .pricing-card:hover,
  .help-card:hover,
  .event-card:hover,
  .instrument-card:hover,
  .gallery-item:hover {
    transform: none !important;
  }
  .hero-scroll i { animation: none !important; }
}

/* ---- Mobile: lighten hover effects (touch has no hover; avoid jank) ---- */
@media (max-width: 768px) {
  .feature-box:hover,
  .service-card:hover,
  .pricing-card:hover,
  .help-card:hover,
  .event-card:hover,
  .instrument-card:hover,
  .gallery-item:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ---- Mobile fix (375px regression): newsletter form button overflow ---- */
/* Form uses inline display:flex; on narrow screens the email input (flex:1) */
/* pushes the "Subscriu-me" button past the right edge. Wrap + full width.   */
@media (max-width: 560px) {
  #newsletter-form {
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
  }
  #newsletter-form input[type="email"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #newsletter-form button {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ---- Mobile fix (375px regression): kill page horizontal scroll ---- */
/* A decorative absolutely-positioned div (right:-50px) overflows the page. */
/* Clip horizontal overflow at the page level without breaking sticky/fixed. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================
   Mòbil: selector d'idioma al menú + pestanya flotant de menú
   (flora26 2026-06-21, petició Joan)
   ============================================================ */

/* Selector d'idioma CA/ES/EN dins el menú off-canvas.
   En desktop el selector viu a la .top-bar; en mòbil aquesta s'oculta (display:none a 768px),
   així que el dupliquem dins el menú perquè siga accessible.
   Especificitat .nav-menu > li.nav-lang-mobile (0,2,1) per guanyar a
   .nav-menu > li { display:flex } (0,1,1) de style.src.css — si no, es duplica amb la top-bar en desktop. */
.nav-menu > li.nav-lang-mobile { display: none; }

@media (max-width: 768px) {
    .nav-lang-mobile {
        display: flex !important;
        gap: 0.4rem;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 1rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .nav-lang-mobile a {
        color: rgba(255,255,255,0.6);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
        padding: 0.4rem 0.8rem;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 8px;
        transition: color 0.2s, background 0.2s, border-color 0.2s;
    }
    .nav-lang-mobile a.active {
        color: var(--blue-dark, #1D385C);
        background: #fff;
        border-color: #fff;
    }
    .nav-lang-mobile a:hover,
    .nav-lang-mobile a:focus-visible { color: #fff; border-color: #fff; outline: none; }
}

/* Pestanya flotant a l'esquerra per obrir el menú des de qualsevol scroll.
   Sutil i sempre accessible encara que el navbar s'amague en baixar.
   z-index 997 < overlay (999): en obrir el menú, l'overlay la tapa automàticament. */
.nav-fab-menu { display: none; }

@media (max-width: 768px) {
    .nav-fab-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 58px;
        padding: 0;
        border: none;
        border-radius: 0 12px 12px 0;
        background: rgba(29,56,92,0.82);
        color: #fff;
        font-size: 1rem;
        cursor: pointer;
        z-index: 997;
        box-shadow: 2px 2px 12px rgba(0,0,0,0.22);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: background 0.2s ease, width 0.2s ease, transform 0.3s ease, opacity 0.3s ease;
        /* Oculta fins que hi ha scroll (site.js afegeix .show a partir de 80px):
           a dalt el navbar ja es veu i la pestanya només tapava contingut. */
        transform: translateY(-50%) translateX(-110%);
        opacity: 0;
        pointer-events: none;
    }
    .nav-fab-menu.show {
        transform: translateY(-50%);
        opacity: 1;
        pointer-events: auto;
    }
    .nav-fab-menu:hover,
    .nav-fab-menu:focus-visible {
        background: var(--yellow, #c9a227);
        color: var(--blue-dark, #1D385C);
        width: 38px;
        outline: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-fab-menu { transition: none; }
}