/* ==============================
   STYLE.CSS
   Sito: Nicole Londino
   Ultimo aggiornamento: 2025-11-06
   Richiede: variables.css, typography.css
   ============================== */

/* ==============================
   UTILITY CLASSES (Flexbox)
   ============================== */

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.items-center {
  align-items: center;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.container-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container-3 {
  display: flex;
  flex-direction: row;
}

.container-4 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.justify-between {
  justify-content: space-between;
}

/* ==============================
   COMPONENTI BASE
   ============================== */

/* 🔘 Pulsante principale */
.btn {
  display: inline-block;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 0.3125rem;
  background: var(--color-secondary);
  color: var(--color-bg);
  padding: 1.25rem 2.25rem 1.25rem 2.25rem;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

.btn:visited {
  color: var(--color-bg);
}

.btn:hover,
.btn:focus {
  background-color: #483d6c;

  transform: scale(1.01);
}

/* ReadMore */
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: 0.25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: "Leggi di più";
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: "Leggi di meno";
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 0 0 0;
  margin: 0 0 3.75rem 0;
  color: var(--color-secondary);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration-line: underline;
  float: right;
}
/* Link acquisto sezione libro */

.box {
  padding: 3rem 4.13rem 3rem 4.13rem;
}

.box li {
  text-decoration-line: underline;
}

.box ol li:hover {
  font-weight: bold;
}

.gradient-border {
  --borderWidth: 3px;
  background: var(--color-bg);
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);

  /* ⭐ tuo gradiente invariato ⭐ */
  background: linear-gradient(180deg, #f8b4c9 0%, #d5c8ff 100%);
  background-size: 100% 300%; /* renderlo molto più lungo verticalmente */

  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;

  /* animazione vera, elegante */
  animation: animatedgradient 4s ease-in-out infinite alternate;
}

@keyframes animatedgradient {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}

/* ALTERNATIVA AL BACKGROUND DI DOVE ACQUISTARE */

/* .gradient-border {
  --borderWidth: 4px;
  background: var(--color-bg);
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);

  
  background: linear-gradient(180deg, #f8b4c9 0%, #d5c8ff 100%);

  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
} */

/* ================= HEADER ================= */

header {
  margin: 3.75rem 0 2.5rem 0;
}

header ul {
  gap: 2.5rem;
}

header li {
  width: 5.3125rem;
}

header li:hover {
  font-weight: bold;
}

.menu-toggle {
  display: none;
}

/* ================= MAIN ================= */

/* 🖥️ DISPLAY */
.display {
  position: relative;

  cursor: pointer;
}

.title-hero {
  white-space: nowrap; /* evita l’a capo su desktop */
}

.subtitle {
  text-align: left;
  margin-top: 0;
  width: 9.875rem;
  position: absolute;
  left: 94%;
}

/* 🌸 HERO */
.hero {
  margin: 11rem 0 3.75rem 0;
  gap: 6.25rem;
  height: 32.5rem;
}

.hero img {
  position: relative;
  bottom: 3.75rem;
  width: 20.0625rem;
  height: 32.5rem;
  border-radius: 0.3125rem;
  box-shadow: 2px 5px 8px 0 rgba(0, 0, 0, 0.25);
}

.hero img:hover {
  box-shadow: 3px 6px 9px 0 rgba(0, 0, 0, 0.25);
}

.hero h3 {
  max-width: 21.625rem;
  margin: 0.88rem 0 0.75rem 0;
  line-height: 1.5rem;
}

.hero p {
  max-width: 21.625rem;
  margin: 0 0 2.5rem 0;
  line-height: 1.5rem;
}

/* 📚 SEZIONE: LIBRI */

.allbooks {
  display: grid;
  grid-template-columns: repeat(3, 13.7875rem); /* = larghezza immagine */
  column-gap: 10rem;
  justify-content: center; /* centra l'intera griglia */
  justify-items: center; /* centra gli elementi dentro */
  margin-top: 3.75rem;
}

.allbooks img {
  width: 13.6875rem;
  height: 22.125rem;
  border-radius: 0.3125rem;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
  box-shadow: 2px 5px 8px 0 rgba(0, 0, 0, 0.25);
}

.allbooks img:hover {
  box-shadow: 3px 6px 9px 0 rgba(0, 0, 0, 0.25);
}

.allbooks h4 {
  margin: 2.5rem 0 0.69rem 0;
}

.ocean-eyes {
  display: block;
}

.ocean-eyes-mobile {
  display: none;
}

/* 🪶 SEZIONE: CHI SONO */

.aboutme {
  margin: 7.5rem 0 7.5rem 0;
  gap: 9.06rem;
}

.aboutme-left div {
  padding: 2.44rem 6.25rem 2.44rem 6.25rem;
}

.aboutme-left p {
  width: 23.125rem;
  margin: 0.87rem 0 1.25rem 0;
  line-height: 1.5rem;
}

.aboutme-left a {
  align-self: flex-end;
}

.my-blog p {
  width: 20.125rem;
  margin: 1rem 0 1.37rem 0;
  line-height: 1.5rem;
}

.my-blog {
  display: none;
  flex-direction: column;
}

/* ================= FOOTER ================= */

.footer-nicole {
  border-radius: 0.3125rem 0.3125rem 0 0;
  background: var(--color-secondary);
  padding: 2.5rem 2.5rem 1.25rem 2.5rem;
}

.gap-f-1 {
  justify-content: space-between;
}

.gap-f-2 {
  gap: 6.25rem;
}

.footer-nicole h3 {
  margin-bottom: 1.25rem;
  width: 7.225rem;
}

.footer-nicole h4 {
  margin-bottom: 1rem;
}

.footer-nicole h4:hover {
  font-weight: bold;
}

a[href="mailto:nicolelondino.books@gmail.com"] h4 {
  width: 14.475rem;
}

.footer-nicole article {
  margin-top: 3.44rem;
}
.footer-nicole img {
  margin-bottom: 0.44rem;
}

.social h3 {
  width: 10rem;
}

.social img {
  margin-right: 2.5rem;
}

/* Seleziono SOLO quel link */
a[href="./pages/chisono.html"] {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem; /* distanza minima dalla freccia, se serve */
  transition: transform 0.25s ease;
  cursor: pointer;
}

/* Hover: micro spinta verso destra */
a[href="./pages/chisono.html"]:hover {
  transform: translateX(3px);
}

/* FINE FOOTER */
/* INIZIO PIMU FOOTER */
.footer-pimu {
  background: linear-gradient(270deg, #e89e47 0%, #817fd1 100%);
}

.footer-pimu a {
  gap: 3.77rem;
  padding: 2.5rem 0 2.5rem 0;
}

.footer-pimu h2 {
  max-width: 27.27463rem;
  margin-bottom: 1rem;
}
/* FINE PIMU FOOTER */