/* Riae - link-in-bio
   Foglio di stile. Modifica qui colori, spaziature e breakpoint. */

:root{
  --ink:#1C1C1C;
  --primary:#00AFF0;
  --muted:#838383;
  --container-max:1280px;   /* desktop */
  --content-width:500px;    /* colonna contenuti da 768px in su */
  --con-padding:10px;       /* padding di default dei container */
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Montserrat', Sans-serif;
  color:#1D1D1D;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* Container generico: sfondo full-bleed, contenuto boxed e centrato */
.con{
  width:100%;
  padding:var(--con-padding);
  display:flex;
  flex-direction:column;
}
.con > .inner{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
}

/* ---------- COVER ---------- */
.cover{
  position:relative;
  background-color:var(--primary);
  background-image:url('assets/cover.jpg');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.cover::before{
  content:'';
  position:absolute;
  inset:0;
  background-color:var(--ink);
  opacity:.72;
}
.cover .spacer{height:300px;}

/* ---------- AVATAR ---------- */
.avatar-con{margin-top:-180px;}
.avatar{
  display:block;
  width:27%;
  aspect-ratio:1/1;
  margin-inline:auto;
  object-fit:cover;
  border:8px solid #F5F5F5;
  border-radius:500px;
  background:#ddd;
}

/* ---------- NOME + BADGE ---------- */
.name-row{margin-top:20px;padding:0;}
.name-row .inner{
  display:flex;
  flex-direction:row;
}
.col-name{
  width:52%;
  padding:var(--con-padding);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:right;
}
.col-badge{
  width:50%;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
}
h1{
  font-family:'Montserrat', Sans-serif;
  font-size:33px;
  font-weight:600;
  line-height:1;
  color:var(--ink);
}
.badge{width:26px;height:26px;display:inline-block;vertical-align:middle;}

/* ---------- SOTTOTITOLO ---------- */
.subtitle-con{padding:0;}
.subtitle-widget{
  padding:0 0 20px;
  text-align:center;
  font-family:'Montserrat', Sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--ink);
}
.subtitle{
  margin:0 0 14.4px;
  line-height:1.5;
}

/* ---------- BOTTONI ---------- */
.links-con{padding:0;}
.btn-wrap{padding-top:15px;}
.btn-wrap:first-child{padding-top:0;}
/* wrapper animato dall'hover, come il transform di Elementor */
.btn-wrap > .btn-inner{
  transition:transform var(--e-transform-transition-duration, .4s);
  transform:translateY(var(--ty, 0));
}
/* Solo su dispositivi con puntatore reale (mouse/trackpad).
   Su touch iOS lo stato :hover resta attivo dopo il tocco: il bottone
   sarebbe rimasto alzato di 5px, sfalsando le distanze tra i pulsanti. */
@media (hover:hover) and (pointer:fine){
  .btn-wrap:hover > .btn-inner{--ty:-5px;}
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:12px 24px;
  background-color:#FFFFFF;
  font-family:'Montserrat', Sans-serif;
  font-size:18px;
  font-weight:500;
  line-height:1;
  color:var(--ink);
  fill:var(--ink);
  text-decoration:none;
  border-style:solid;
  border-width:2px;
  border-radius:200px;
}
.btn svg{width:1em;height:auto;flex:none;}

.btn--exclusive{border-color:var(--primary);}
.btn--telegram{border-color:#2DAFE6;}
.btn--x{border-color:var(--ink);}
.btn--youtube{border-color:#F00000;}

/* ---------- SOCIAL + CREDIT ---------- */
.social-con{margin-top:80px;}
.social-grid{
  display:inline-grid;
  grid-auto-flow:column;
  grid-column-gap:5px;
  justify-content:center;
  width:100%;
  text-align:center;
}
.social-wrap{text-align:center;}
.social-icon{
  --icon-size:15px;
  --icon-padding:.5em;
  font-size:var(--icon-size);
  width:calc(var(--icon-size) + 2 * var(--icon-padding));
  height:calc(var(--icon-size) + 2 * var(--icon-padding));
  line-height:var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:#FFFFFF;
  border-radius:10%;
  text-decoration:none;
}
.social-icon svg{
  width:1em;
  height:1em;
  fill:var(--ink);
}

.credit{
  margin-top:6px;
  text-align:center;
  font-family:'Montserrat', Sans-serif;
  font-size:10px;
  font-weight:400;
  color:var(--muted);
}
.credit a{color:var(--muted);text-decoration:none;}

/* ---------- ANIMAZIONI D'INGRESSO ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}

.anim{visibility:hidden;}
.anim.animated{
  visibility:visible;
  animation-duration:1.25s;
  animation-fill-mode:both; /* 'both' tiene lo stato iniziale durante il delay */
}
.anim.animated.fadeIn{animation-name:fadeIn;}
.anim.animated.fadeInUp{animation-name:fadeInUp;}

.d200{animation-delay:.2s;}
.d400{animation-delay:.4s;}
.d600{animation-delay:.6s;}
.d800{animation-delay:.8s;}
.d900{animation-delay:.9s;}

@media (prefers-reduced-motion:reduce){
  .anim{visibility:visible;}
  .anim.animated{animation:none !important;}
  html *{transition-delay:0s !important;}
}

/* ---------- DA TABLET IN SU (min 768px) ---------- */
@media (min-width:768px){
  .subtitle-con .inner,
  .links-con .inner,
  .social-con .inner{max-width:var(--content-width);}
}

/* ---------- TABLET (max 1024px) ---------- */
@media (max-width:1024px){
  :root{--container-max:1024px;}
  .avatar{width:41%;}
}

/* ---------- MOBILE (max 767px) ---------- */
@media (max-width:767px){
  :root{--container-max:767px;}
  .cover::before{opacity:.65;}
  .cover .spacer{height:130px;}
  .avatar-con{margin-top:-100px;}
  .avatar{width:60%;border-width:5px;}
  .name-row{margin-top:0;}
  .col-name{width:57%;}
  .col-badge{width:43%;}
  .subtitle-con{padding-left:20px;padding-right:20px;}
  .subtitle-widget{padding-bottom:10px;font-size:14px;}
  .links-con{padding-left:20px;padding-right:20px;}
  .social-con{margin-top:50px;}
}

/* ---------- POPUP "CONTENUTO SENSIBILE" ---------- */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.88);
  align-items:center;justify-content:center;
  z-index:9999;
}
.modal-overlay.open{display:flex;}
.modal{
  position:relative;
  width:640px;
  max-width:100%;
  background:transparent;
  animation:fadeIn 1.2s both;
}
.modal-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:80px 40px;
}

.modal h3{
  font-family:'Montserrat', Sans-serif;
  font-size:28px;
  font-weight:600;
  line-height:1;
  color:#FFFFFF;
  text-align:center;
}
.modal-text{
  padding:0 0 20px;
  text-align:center;
  color:#FFFFFF;
  font-size:16px;
}
.modal-text p{margin:0 0 14.4px;line-height:1.5;}

.modal-actions{
  display:flex;
  flex-direction:row;
  gap:0;
}
.modal-actions > div{width:50%;padding:var(--con-padding);}

.btn-dialog{
  display:block;
  width:100%;
  padding:12px 24px;
  font-family:'Montserrat', Sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-align:center;
  text-decoration:none;
  border:1px solid #FDFDFD;
  border-radius:5px;
  cursor:pointer;
}
.btn-dialog--ghost{background:transparent;color:#FDFDFD;}
.btn-dialog--solid{background:#FDFDFD;color:var(--ink);}

.modal .close{
  position:absolute;
  top:0;right:20px;
  display:flex;
  align-items:center;justify-content:center;
  width:15px;height:15px;
  padding:0;border:none;background:none;
  cursor:pointer;
}
.modal .close svg{width:15px;height:15px;fill:#FDFDFD;}

@media (max-width:767px){
  .modal-inner{padding:60px 10px;}
  .modal-text{padding-bottom:10px;}
  .modal-actions{
    flex-direction:row-reverse;
    flex-wrap:wrap-reverse;
    gap:10px;
    padding:0 10px;
  }
  .modal-actions > div{width:100%;padding:0;}
}

/* ---------- PROTEZIONE CONTENUTI ---------- */
body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input,textarea{-webkit-user-select:text;user-select:text;}
img{-webkit-user-drag:none;user-drag:none;}

#wpcp-error-message{
  position:fixed;
  top:50%;left:50%;
  width:255px;
  margin:-10px 10px 10px -130px;
  padding:10px 36px;
  direction:ltr;
  text-align:center;
  font-family:Tahoma, sans-serif;
  font-size:11px;
  color:#555;
  background:#FFECEC;
  border:1px solid #F5ACA6;
  border-radius:10px;
  box-shadow:0 0 34px 2px #F2BFBF;
  transition:opacity 900ms;
  z-index:99999999;
}
#wpcp-error-message span{font-weight:bold;text-transform:uppercase;}
#wpcp-error-message.hideme{opacity:0;visibility:hidden;}