/* Decorazioni Neo-Medievali Lombarde */

/* Decorazione superiore della pagina con motivi gotici lombardi */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--red-1) 0%,
    #b8860b 25%,
    var(--red-1) 50%,
    #b8860b 75%,
    var(--red-1) 100%
  );
  background-size: 40px 8px;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Decorazione inferiore della pagina */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--red-1) 0%,
    #b8860b 25%,
    var(--red-1) 50%,
    #b8860b 75%,
    var(--red-1) 100%
  );
  background-size: 40px 8px;
  z-index: 1000;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Decorazioni laterali con pattern gotico */
.medieval-border-left,
.medieval-border-right {
  position: fixed;
  top: 8px;
  bottom: 8px;
  width: 12px;
  z-index: 999;
  background-image: radial-gradient(
      circle at 6px 20px,
      var(--red-1) 2px,
      transparent 2px
    ),
    radial-gradient(circle at 6px 60px, #b8860b 2px, transparent 2px),
    radial-gradient(circle at 6px 100px, var(--red-1) 2px, transparent 2px);
  background-size: 12px 40px;
  background-repeat: repeat-y;
}

.medieval-border-left {
  left: 0;
  background-position: 0 0;
}

.medieval-border-right {
  right: 0;
  background-position: 0 0;
}

/* Aggiunta margini al body per fare spazio alle decorazioni */
body {
  margin: 8px 12px !important;
  min-height: calc(100vh - 16px);
}

/* Decorazione del header con motivo ad arco gotico */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 8px,
    var(--red-1) 8px,
    var(--red-1) 12px,
    #b8860b 12px,
    #b8860b 16px,
    var(--red-1) 16px,
    var(--red-1) 20px,
    transparent 20px,
    transparent 28px
  );
  border-radius: 0 0 100px 100px;
}

/* Decorazione del header con elementi ad arco */
header::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 20px;
  background: radial-gradient(
    ellipse 50px 10px at center top,
    var(--red-1) 0%,
    var(--red-1) 40%,
    transparent 45%,
    transparent 55%,
    #b8860b 60%,
    #b8860b 100%
  );
}

/* Decorazioni per le card con motivi gotici */
.card {
  position: relative;
  border: 2px solid var(--red-1);
  background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
}

/* Angoli decorativi per le card */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--red-1);
}

.card::before {
  top: -2px;
  left: -2px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.card::after {
  top: -2px;
  right: -2px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* Decorazioni aggiuntive per gli angoli inferiori */
.card-content::before,
.card-content::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--red-1);
}

.card-content::before {
  bottom: -2px;
  left: -2px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.card-content::after {
  bottom: -2px;
  right: -2px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Posizionamento relativo per i contenuti delle card */
.card-content {
  position: relative;
}

/* Decorazione del titolo con motivo gotico */
.card-title1::before {
  content: "❦";
  color: var(--red-1);
  font-size: 1.2em;
  margin-right: 0.5rem;
}

.card-title1::after {
  content: "❦";
  color: var(--red-1);
  font-size: 1.2em;
  margin-left: 0.5rem;
}

/* Decorazione per i pulsanti con motivo medievale */
.btn {
  position: relative;
  border: 2px solid #b8860b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  /*background: linear-gradient(
    45deg,
    transparent 40%,
    var(--red-1) 41%,
    var(--red-1) 44%,
    transparent 45%,
    transparent 55%,
    var(--red-1) 56%,
    var(--red-1) 59%,
    transparent 60%
  );*/
  border-radius: 8px;
  z-index: -1;
}

/* Decorazione del footer con motivo a onde gotiche */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 10px,
    var(--red-1) 10px,
    var(--red-1) 15px,
    transparent 15px,
    transparent 25px
  );
  transform: translateY(-100%);
}

/* Decorazione per il nav con texture medievale */
nav {
  position: relative;
  border: 3px solid var(--red-1);
  border-radius: 0;
}

nav::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--red-1) 0deg 5deg,
    #b8860b 5deg 10deg,
    transparent 10deg 15deg
  );
  z-index: -1;
  border-radius: 8px;
}

/* Media queries per dispositivi mobili */
@media (max-width: 768px) {
  .medieval-border-left,
  .medieval-border-right {
    width: 8px;
  }

  body {
    margin: 8px 8px !important;
  }

  header::before {
    width: 150px;
  }

  header::after {
    width: 75px;
    height: 15px;
  }
}

@media (max-width: 480px) {
  .medieval-border-left,
  .medieval-border-right {
    width: 4px;
  }

  body {
    margin: 8px 4px !important;
  }

  header::before {
    width: 100px;
    height: 4px;
  }

  header::after {
    width: 50px;
    height: 10px;
  }
}

/* Aggiunta di elementi decorativi con JavaScript */
.fleuron {
  color: var(--red-1);
  font-size: 1.5em;
  text-align: center;
  margin: 1rem 0;
}

/* Stile per gli elementi decorativi gotici */
.gothic-ornament {
  width: 100%;
  height: 30px;
  background-image: radial-gradient(
      circle at 25% 50%,
      var(--red-1) 2px,
      transparent 2px
    ),
    radial-gradient(circle at 50% 50%, #b8860b 3px, transparent 3px),
    radial-gradient(circle at 75% 50%, var(--red-1) 2px, transparent 2px);
  background-size: 60px 30px;
  background-repeat: repeat-x;
  margin: 2rem 0;
}