/* ============================================================
   parchment.css – Textura de pergamí antic (versió corregida)
   Estratègia: fons fix a l'arrel (html), seccions semi-transparents
   ============================================================ */

/* ========================
   CAPA BASE DE PERGAMÍ
   Aplicada a html (fixed) perquè no quedi tapada per cap fill
   ======================== */
html {
  /* Imatge de pergamí real + gradient de fallback */
  background-color: #EDD08A !important;
  background-image:
    /* Capa d'aclariment: neutralitza imatge massa fosca sense perdre la textura */
    linear-gradient(rgba(255, 248, 225, 0.88), rgba(255, 248, 225, 0.88)),
    url('../assets/Pergami2.webp'),
    /* Taques d'envelliment suposades sobre la imatge */
    radial-gradient(ellipse at 10% 15%, rgba(160, 100, 30, 0.25) 0%, transparent 38%),
    radial-gradient(ellipse at 90% 80%, rgba(120, 70, 10, 0.22) 0%, transparent 33%),
    radial-gradient(ellipse at 50% 95%, rgba(180, 120, 40, 0.20) 0%, transparent 40%),
    radial-gradient(ellipse at 5%  65%, rgba(140, 90, 25, 0.18) 0%, transparent 30%),
    radial-gradient(ellipse at 95% 10%, rgba(190, 140, 50, 0.18) 0%, transparent 28%),
    radial-gradient(ellipse at 35% 35%, rgba(245, 220, 150, 0.40) 0%, transparent 50%),
    /* Fallback linear-gradient per si la imatge no carrega */
    linear-gradient(
      155deg,
      #F5E5B5 0%,
      #E8CE8A 18%,
      #F2E0A8 35%,
      #D8BF70 52%,
      #EFD898 68%,
      #E2C878 82%,
      #F5DCA5 100%
    ) !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  /* Un valor per capa: overlay + png + 6 radial-gradients + 1 linear-gradient */
  background-size: auto, 130% auto, auto, auto, auto, auto, auto, auto, cover !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat !important;
}

/* Capa de noise (fibres de paper) – molt visible */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 1.0;
}

/* ========================
   BODY i PAGE-LAYOUT: transparents
   Perquè el gradient de html es vegi
   ======================== */
body {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

.page-layout {
  background: transparent !important;
  background-color: transparent !important;
}

.page-layout--textured {
  background-image: none !important;
}

/* ========================
   SECCIONS – transparents o semi-transparents
   Cada classe de secció usa rgba sobre el pergamí de fons
   ======================== */

/* Secció estàndard (la majoria): transparent */
.section-wrapper {
  background: transparent;
  position: relative;
}

/* Secció "aged" – lleugera capa bru per simular paper vell */
.section--aged,
.aged {
  background: rgba(220, 190, 130, 0.14) !important;
  position: relative;
}

/* Secció clara – velet ivori sobre el pergamí */
.section--light {
  background: rgba(253, 246, 227, 0.32) !important;
  backdrop-filter: none;
  border-top: 1px solid rgba(196, 168, 130, 0.5);
  border-bottom: 1px solid rgba(196, 168, 130, 0.5);
  position: relative;
}

/* Secció "fosca" → ara usa tons ambre càlid transparent (com aged/light) */
.section--dark {
  background: rgba(196, 155, 70, 0.15) !important;
  position: relative;
}

/* Eliminar l'overlay de noise fosc (ja no hi ha fons negre) */
.section--dark::before {
  display: none !important;
}

.section--dark > * {
  position: relative;
  z-index: 1;
}

/* Text en seccions que eren fosques: forçar tons llegibles sobre parchment clar */
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
header.section--dark span,
header.section--dark p,
.section--dark .section-title__main,
.section--dark .section-title__label,
.section--dark .section-title__desc {
  color: var(--color-primary) !important;
}

/* Subtítols amb color crema → forçar a fosc */
.section--dark p[style*="rgba(253"],
.section--dark p[style*="rgba(245"],
.section--dark span[style*="rgba(253"],
.section--dark span[style*="rgba(245"] {
  color: var(--color-text-light) !important;
}

/* ========================
   CARDS AMB TEXTURA PRÒPIA
   ======================== */
.card--parchment {
  background-color: rgba(250, 238, 208, 0.90);
  background-image:
    radial-gradient(ellipse at 80% 15%, rgba(196, 155, 75, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(160, 115, 45, 0.10) 0%, transparent 45%);
  border: 1px solid rgba(196, 168, 130, 0.75);
  box-shadow: 2px 3px 10px rgba(59, 37, 7, 0.10), inset 0 0 25px rgba(196, 168, 130, 0.08);
  backdrop-filter: none;
  position: relative;
}

/* Microdetall: vora interior molt subtil */
.card--parchment::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(196, 168, 130, 0.20);
  pointer-events: none;
}

/* ========================
   HERO CLAR (parchment clar, com la resta del lloc)
   ======================== */
.hero--parchment {
  background-color: rgba(245, 228, 190, 0.22) !important;
  background-image:
    radial-gradient(ellipse at 40% 20%, rgba(196, 135, 58, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 65% 75%, rgba(160, 100, 30, 0.08) 0%, transparent 48%) !important;
}

/* Overlay del hero: transparent en mode clar */
.hero--parchment .hero__overlay {
  background: radial-gradient(circle, transparent 40%, rgba(210, 185, 130, 0.25) 100%) !important;
}

/* Text fosc per llegibilitat sobre fons clar */
.hero--parchment .hero__title {
  color: var(--color-primary) !important;
  text-shadow: 0 1px 3px rgba(245,228,190,0.8);
}

.hero--parchment .hero__subtitle {
  color: var(--color-accent) !important;
}

.hero--parchment .hero__desc {
  color: var(--color-text-light) !important;
  opacity: 1 !important;
}

/* ========================
   FORMULARIS: fons sobre el pergamí
   ======================== */
.form-adhesio {
  background: rgba(253, 246, 227, 0.88) !important;
}

.form-input,
.form-textarea,
.form-select {
  background-color: rgba(253, 246, 227, 0.85) !important;
}

/* ========================
   NAVBAR: fons pergamí semi-transparent
   ======================== */
.navbar {
  background-color: rgba(240, 223, 176, 0.96) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(196, 168, 130, 0.6) !important;
}

.navbar--scrolled {
  background-color: rgba(233, 215, 160, 0.98) !important;
  box-shadow: 0 2px 16px rgba(59, 37, 7, 0.12) !important;
}

/* ========================
   FOOTER: cuir ambre fosc
   ======================== */
.footer {
  background-color: rgba(70, 38, 8, 0.94) !important;
  border-top: 3px solid var(--color-accent) !important;
}

/* ========================
   CTA BANNER (seccions de crida) → tons parchment
   ======================== */
.cta-banner {
  background-color: rgba(196, 155, 70, 0.18) !important;
  color: var(--color-primary) !important;
}

.cta-banner__title {
  color: var(--color-primary) !important;
}

.cta-banner__desc {
  color: var(--color-text-light) !important;
  opacity: 1 !important;
}

/* ========================
   FINAL CTA → tons parchment
   ======================== */
.final-cta {
  background-color: rgba(196, 155, 70, 0.18) !important;
}

.final-cta__title {
  color: var(--color-primary) !important;
}

/* ========================
   MAPA: vora pergamí
   ======================== */
#mapHome,
#mapFull {
  border: 1px solid rgba(196, 168, 130, 0.7);
}

/* ========================
   SELECCIÓ DE TEXT
   ======================== */
::selection {
  background-color: rgba(196, 135, 58, 0.40);
  color: var(--color-primary);
}

/* ========================
   MÒBIL – pergamí optimitzat
   background-attachment:fixed causa jank en iOS/Android
   ======================== */
@media (max-width: 768px) {
  /* Pseudo-element fix: simula background-attachment:fixed (no funciona a iOS)
     Conté tots els layers visuals: overlay + imatge + taques + fallback */
  html::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255, 248, 225, 0.88), rgba(255, 248, 225, 0.88)),
      url('../assets/Pergami1.webp'),
      radial-gradient(ellipse at 10% 15%, rgba(160, 100, 30, 0.25) 0%, transparent 38%),
      radial-gradient(ellipse at 90% 80%, rgba(120, 70, 10, 0.22) 0%, transparent 33%),
      radial-gradient(ellipse at 50% 95%, rgba(180, 120, 40, 0.20) 0%, transparent 40%),
      radial-gradient(ellipse at 5%  65%, rgba(140, 90, 25, 0.18) 0%, transparent 30%),
      radial-gradient(ellipse at 95% 10%, rgba(190, 140, 50, 0.18) 0%, transparent 28%),
      radial-gradient(ellipse at 35% 35%, rgba(245, 220, 150, 0.40) 0%, transparent 50%),
      linear-gradient(
        155deg,
        #F5E5B5 0%,
        #E8CE8A 18%,
        #F2E0A8 35%,
        #D8BF70 52%,
        #EFD898 68%,
        #E2C878 82%,
        #F5DCA5 100%
      );
    background-size: auto, cover, auto, auto, auto, auto, auto, auto, cover;
    background-position: center 30%;
    background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  }

  html {
    background-attachment: scroll !important;
    background-image: none !important;
  }

  /* El noise overlay: menys intens i sense position:fixed (jank a iOS) */
  html::after {
    position: absolute !important;
    opacity: 0.35;
  }
}