/**
 * Style Sheet | Fondazione Piccolo America
 * Author: Lorenzo Raffio
 *
*/

:root {
  --white: white;
  --black: black;
  --white-smoke: #fffff6;
  --accent: #e7b519;
  --pulpcorn: #902626;
}

@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/Lora/Lora-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 700;
  font-display: block;
  font-style: normal;
}


/*     Will be able to use when support for @container rules     */
/*     is more widespread                                        */
/*     https://x.com/diegohaz/status/1759358162086297759         */
/*                                                               */
/*     :root {                                                   */
/*       --themeBackground: var(--black);                        */
/*     }                                                         */
/*                                                               */
/*     @container (style(--themeBackground: var(--black))) {     */
/*       a {                                                     */
/*         color: var(--white);                                  */
/*       }                                                       */
/*     }                                                         */
/*                                                               */
/*     @container (style(--themeBackground: var(--white))) {     */
/*       a {                                                     */
/*         color: var(--black);                                  */
/*       }                                                       */
/*     }                                                         */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

html {
  background-color: var(--white-smoke);
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

body,
html {
  color: var(--black);
  font-size: 1rem;
  line-height: 1.5;
  font-family: 'Lora', serif;
  height: 100%;
  scroll-behavior: smooth;
}

p {
  text-align: justify;
}

strong {
  font-variation-settings: 'wght' 500;
}

.center * {
  text-align: center;
  align-content: center;
}

h1,
h2 {
  text-align: left;
}

h2 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.about h2,
.altri-progetti h2 {
  font-variation-settings: 'wght' 600;
}



h1 {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-variation-settings: 'wght' 500;
}

a {
  color: var(--black);
  text-decoration: none
}


nav {
  text-align: center;
  margin: 0 auto;
}

nav .menu a {
  color: var(--white);
  text-decoration: none;
  line-height: 1.5;
  z-index: 3;
  position: relative;
  display: inline-block;
}

nav .menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

nav .menu a:hover::after {
  width: 100%;
}

.logo {
  width: 350px;
  z-index: 1001;
  margin: 0 auto;
}

.header-top {
  padding: 30px;
  background: var(--pulpcorn);
  border-bottom: 1px solid #6f1416;
}

.header-bottom {
  background: var(--pulpcorn);
  padding: 15px;
  border-bottom: 4px solid #f6d897;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Un valore alto per garantire che stia sopra altri contenuti */
}

.menu {
  grid-column-gap: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger-icon {
  cursor: pointer;
  position: fixed;
  right: 1.5rem;
  z-index: 1001;
  display: none;
  background-color: var(--white);
  height: 3px;
  width: 30px;
  transition: all 0.3s ease;
}

.hamburger-icon:before,
.hamburger-icon:after {
  content: '';
  display: block;
  background-color: var(--white);
  height: 3px;
  width: 30px;
  transition: all 0.3s ease;
  position: absolute;
  left: 0;
}

.hamburger-icon:before {
  top: -10px;
}

.hamburger-icon:after {
  top: 10px;
}

.hamburger-toggle {
  display: none;
}

.container-base {
  padding: 50px;
  margin-left: 20%;
  margin-right: 20%;
}

footer {
  background: var(--black);
  color: var(--white-smoke);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 10pt;
  padding: 5rem 4rem;
}

footer strong {
  font-size: 1rem;
}

footer strong a {
  color: white;
}

footer .social .instagram::before {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.749 8.00576 12.3535 7.05253 11.6505 6.34949C10.9475 5.64645 9.99424 5.25103 9 5.25ZM9 11.5C8.50555 11.5 8.0222 11.3534 7.61107 11.0787C7.19995 10.804 6.87952 10.4135 6.6903 9.95671C6.50108 9.49989 6.45157 8.99723 6.54804 8.51227C6.6445 8.02732 6.8826 7.58186 7.23223 7.23223C7.58186 6.8826 8.02732 6.6445 8.51227 6.54804C8.99723 6.45157 9.49989 6.50108 9.95671 6.6903C10.4135 6.87952 10.804 7.19995 11.0787 7.61107C11.3534 8.0222 11.5 8.50555 11.5 9C11.5 9.66304 11.2366 10.2989 10.7678 10.7678C10.2989 11.2366 9.66304 11.5 9 11.5ZM12.75 0.875H5.25C4.09006 0.876241 2.97798 1.33758 2.15778 2.15778C1.33758 2.97798 0.876241 4.09006 0.875 5.25V12.75C0.876241 13.9099 1.33758 15.022 2.15778 15.8422C2.97798 16.6624 4.09006 17.1238 5.25 17.125H12.75C13.9099 17.1238 15.022 16.6624 15.8422 15.8422C16.6624 15.022 17.1238 13.9099 17.125 12.75V5.25C17.1238 4.09006 16.6624 2.97798 15.8422 2.15778C15.022 1.33758 13.9099 0.876241 12.75 0.875ZM15.875 12.75C15.875 13.5788 15.5458 14.3737 14.9597 14.9597C14.3737 15.5458 13.5788 15.875 12.75 15.875H5.25C4.4212 15.875 3.62634 15.5458 3.04029 14.9597C2.45424 14.3737 2.125 13.5788 2.125 12.75V5.25C2.125 4.4212 2.45424 3.62634 3.04029 3.04029C3.62634 2.45424 4.4212 2.125 5.25 2.125H12.75C13.5788 2.125 14.3737 2.45424 14.9597 3.04029C15.5458 3.62634 15.875 4.4212 15.875 5.25V12.75ZM14 4.9375C14 5.12292 13.945 5.30418 13.842 5.45835C13.739 5.61252 13.5926 5.73268 13.4213 5.80364C13.25 5.87459 13.0615 5.89316 12.8796 5.85699C12.6977 5.82081 12.5307 5.73152 12.3996 5.60041C12.2685 5.4693 12.1792 5.30225 12.143 5.1204C12.1068 4.93854 12.1254 4.75004 12.1964 4.57873C12.2673 4.40743 12.3875 4.26101 12.5417 4.158C12.6958 4.05498 12.8771 4 13.0625 4C13.3111 4 13.5496 4.09877 13.7254 4.27459C13.9012 4.4504 14 4.68886 14 4.9375Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
}

footer .social .youtube::before {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8469 6.47969L8.09688 3.97969C8.00273 3.91688 7.89329 3.88081 7.78024 3.87533C7.6672 3.86985 7.55479 3.89517 7.45501 3.94859C7.35523 4.00201 7.27183 4.08152 7.21371 4.17864C7.15559 4.27575 7.12493 4.38682 7.125 4.5V9.5C7.12493 9.61318 7.15559 9.72426 7.21371 9.82137C7.27183 9.91848 7.35523 9.99799 7.45501 10.0514C7.55479 10.1048 7.6672 10.1302 7.78024 10.1247C7.89329 10.1192 8.00273 10.0831 8.09688 10.0203L11.8469 7.52032C11.9326 7.46326 12.0029 7.38591 12.0515 7.29514C12.1002 7.20436 12.1256 7.10298 12.1256 7C12.1256 6.89702 12.1002 6.79564 12.0515 6.70487C12.0029 6.61409 11.9326 6.53674 11.8469 6.47969ZM8.375 8.33203V5.67188L10.3734 7L8.375 8.33203ZM17.307 2.43125C17.2334 2.14324 17.0924 1.87686 16.8955 1.65409C16.6987 1.43132 16.4517 1.25854 16.175 1.15C13.4969 0.115628 9.23438 0.125003 9 0.125003C8.76562 0.125003 4.50312 0.115628 1.825 1.15C1.54825 1.25854 1.30128 1.43132 1.10445 1.65409C0.907621 1.87686 0.766582 2.14324 0.692969 2.43125C0.490625 3.21094 0.25 4.63594 0.25 7C0.25 9.36407 0.490625 10.7891 0.692969 11.5688C0.766472 11.8569 0.907461 12.1234 1.1043 12.3464C1.30113 12.5693 1.54816 12.7422 1.825 12.8508C4.39062 13.8406 8.40625 13.875 8.94844 13.875H9.05156C9.59375 13.875 13.6117 13.8406 16.175 12.8508C16.4518 12.7422 16.6989 12.5693 16.8957 12.3464C17.0925 12.1234 17.2335 11.8569 17.307 11.5688C17.5094 10.7875 17.75 9.36407 17.75 7C17.75 4.63594 17.5094 3.21094 17.307 2.43125ZM16.0969 11.2594C16.0731 11.3552 16.0269 11.4441 15.9621 11.5186C15.8973 11.5932 15.8158 11.6513 15.7242 11.6883C13.2516 12.643 9.04609 12.6258 9.00547 12.6258H9C8.95781 12.6258 4.75547 12.6414 2.28125 11.6883C2.18966 11.6513 2.10814 11.5932 2.04337 11.5186C1.97859 11.4441 1.9324 11.3552 1.90859 11.2594C1.71875 10.5461 1.5 9.23203 1.5 7C1.5 4.76797 1.71875 3.45391 1.90313 2.74453C1.92649 2.64811 1.97248 2.55864 2.03728 2.48351C2.10208 2.40839 2.18383 2.34977 2.27578 2.3125C4.66016 1.39141 8.65547 1.375 8.98281 1.375H9.00391C9.04609 1.375 13.2523 1.36094 15.7227 2.3125C15.8142 2.34947 15.8958 2.40761 15.9605 2.48216C16.0253 2.55671 16.0715 2.64556 16.0953 2.74141C16.2812 3.45391 16.5 4.76797 16.5 7C16.5 9.23203 16.2812 10.5461 16.0969 11.2555V11.2594Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
}

footer .social .twitter::before {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3277 2.38601C17.2804 2.2718 17.2003 2.17417 17.0976 2.10547C16.9948 2.03678 16.874 2.0001 16.7504 2.00007H14.373C14.0406 1.43459 13.5676 0.964725 12.9999 0.636169C12.4322 0.307612 11.7891 0.131541 11.1332 0.125071C10.6445 0.118662 10.1595 0.210051 9.70669 0.393861C9.25388 0.577671 8.84239 0.85019 8.49646 1.19538C8.14042 1.54478 7.85783 1.96183 7.6653 2.42201C7.47278 2.8822 7.3742 3.37624 7.37537 3.87507V4.35085C4.23005 3.52116 1.6574 0.962571 1.63005 0.935227C1.5462 0.850634 1.43993 0.791763 1.32374 0.765545C1.20755 0.739328 1.08629 0.746856 0.974239 0.787244C0.862187 0.827632 0.764009 0.899198 0.691266 0.993513C0.618523 1.08783 0.574246 1.20097 0.563647 1.3196C0.226928 5.0532 1.3113 7.55163 2.2824 8.98991C2.7559 9.70093 3.33192 10.338 3.99177 10.8805C2.80193 12.2501 0.928491 12.9696 0.908178 12.9774C0.819986 13.0104 0.740398 13.063 0.675363 13.1311C0.610327 13.1992 0.561524 13.2811 0.532601 13.3708C0.503678 13.4604 0.495382 13.5554 0.508334 13.6487C0.521286 13.7419 0.55515 13.8311 0.607397 13.9094C0.665991 13.9969 0.900366 14.304 1.47302 14.5907C2.18083 14.9454 3.11599 15.1251 4.25037 15.1251C9.77146 15.1251 14.3847 10.8735 14.8558 5.4032L17.1926 3.06726C17.2799 2.9798 17.3394 2.8684 17.3635 2.74714C17.3875 2.62587 17.3751 2.5002 17.3277 2.38601ZM13.8121 4.68366C13.7049 4.79108 13.6405 4.93381 13.6308 5.08523C13.3129 10.0141 9.19412 13.8751 4.25037 13.8751C3.42537 13.8751 2.84412 13.7657 2.4363 13.6344C3.33552 13.1462 4.58943 12.3063 5.39568 11.0969C5.443 11.0258 5.47524 10.9458 5.49041 10.8617C5.50558 10.7777 5.50336 10.6914 5.48389 10.6082C5.46442 10.525 5.4281 10.4467 5.37719 10.3782C5.32627 10.3096 5.26184 10.2522 5.18787 10.2094C5.15115 10.1884 1.7574 8.15163 1.75037 2.70945C3.00037 3.72507 5.28552 5.30085 7.89646 5.73991C7.98594 5.755 8.07764 5.75042 8.16517 5.72649C8.25271 5.70256 8.33398 5.65986 8.40335 5.60135C8.47271 5.54284 8.5285 5.46993 8.56684 5.38768C8.60518 5.30543 8.62515 5.21582 8.62537 5.12507V3.87507C8.62466 3.54167 8.69066 3.2115 8.81946 2.90399C8.94826 2.59647 9.13727 2.31783 9.37537 2.08445C9.60361 1.85577 9.87539 1.67518 10.1746 1.55333C10.4739 1.43149 10.7945 1.37088 11.1176 1.37507C12.1066 1.38757 13.0308 1.9907 13.4176 2.87585C13.4663 2.98714 13.5464 3.0818 13.6481 3.14827C13.7498 3.21473 13.8687 3.25011 13.9902 3.25007H15.2402L13.8121 4.68366Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
}

footer .social p::before {
  content: "";
  width: 22px;
  display: inline-block;
  height: 22px;
  filter: invert(1);
  background-repeat: no-repeat;
  background-position: bottom left;
}

#hamburger-toggle:checked+nav {
  mix-blend-mode: normal;
}

p {
  margin-top: 20px;
}

.autore img {
  width: 100px;
  border-radius: 100%;
}

.autore {
  text-align: center;
  padding: 20px;
}

.autore p {
  text-align: center;
}

hr {
  width: 90%;
  margin: 0 auto;
  border-width: 1px;
  border-color: black;
}

body,
html,
main {
  overflow: visible;
}

.img-apertura-sfondo {
  position: relative;
  overflow: hidden;
  height: 500px;
  /* Altezza fissa per vedere l'effetto parallasse */
}

.img-apertura-sfondo img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform 0.3s ease-out;
  /* Per un effetto più fluido */
}

.img-apertura-sfondo h1,
.img-apertura-sfondo h2 {
  position: absolute;
  top: 50%;
  /* Centra verticalmente */
  left: 50%;
  /* Centra orizzontalmente */
  transform: translate(-50%, -50%);
  color: white;
  z-index: 10;
  text-align: center;
}

.review-content .text-image img {
  max-width: 40%;
  margin: 0 20px 10px 0;
  border-radius: 8px;
}

.review-content .text-image.float-right img {
  float: right;
  margin: 0 0 10px 20px;
}

.review-content .text-image.float-left img {
  float: left;
  margin: 0 20px 10px 0;
}

blockquote {
  text-align: center;
  padding: 10%;
  font-style: italic;
}

/* MOBILE */
@media screen and (max-width: 768px) {
  .review-content .text-image img {
    max-width: 100%;
    margin: 0 0 10px 0;
    float: none;
  }

  nav img {
    height: 30px;
  }

  .img-apertura-sfondo {
    height: 164px;
  }

  .stretch {
    height: unset !important
  }

  .img-apertura-sfondo h1,
  .img-apertura-sfondo h2 {
    width: 100%;
  }

  nav .menu a::after {
    display: none
  }

  footer {
    justify-content: flex-start;
    gap: 2rem 0;
  }

  html {
    scroll-snap-type: unset;
  }

  /*
  .hamburger-icon {
    cursor: pointer;
    position: fixed;
    right: 1.5rem;
    z-index: 1001;
    display: block;
    background-color: var(--white);
    width: 30px;
    height: 3px;
    transition: all 0.3s ease;
  }

  .hamburger-icon:before,
  .hamburger-icon:after {
    content: '';
    position: absolute;
    left: 0;
    width: 30px;
    height: 3px;
    background-color: var(--white);
    transition: all 0.3s ease;
  }

  #hamburger-toggle:checked+nav .menu::before {
    background: radial-gradient(circle at bottom right, rgba(231, 181, 25, 0.6), transparent 60%);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(8px);
    scale: 1.5;
  }

  .hamburger-icon:before {
    top: -10px;
  }

  .hamburger-icon:after {
    top: 10px;
  }

  .menu {
    display: none;
    position: fixed;
    background-color: var(--black);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100vh
  }
*/
  #hamburger-toggle:checked+nav .menu {
    display: flex;
  }

  #hamburger-toggle:checked+nav .hamburger-icon:before {
    transform: rotate(45deg);
    top: 0;
  }

  #hamburger-toggle:checked+nav .hamburger-icon:after {
    transform: rotate(-45deg);
    top: 0;
  }

  #hamburger-toggle:checked+nav .hamburger-icon {
    background-color: transparent;
  }

  #hamburger-toggle:checked+nav .menu a {
    color: var(--white);
    font-size: 2rem;
    padding: 0.5rem 1rem;
  }


  footer,
  section.hero {
    padding: 2rem 1.5rem;
  }

  .container-base {
    padding: 10px;
    margin-left: 16px;
    margin-right: 16px;
  }
}