/* ===================================================== *
 *  ODRY & IVY – PAGINA CONTATTI                         *
 *  versione 1.4 – rinominata classe pulsante per evitare
 *                conflitto con .cta-button della home
 * ===================================================== */

/* --------- PALETTE ----------------------------------- */
:root{
  --oi-black:#000;
  --oi-grey-900:#1e1e1e;
  --oi-grey-700:#2e2e2e;
  --oi-white:#fff;
  --oi-gold:#d4b13f;
}

/* --------- LAYOUT BASE ------------------------------- */
.page.contact-page{
  min-height:100vh;
  color:var(--oi-white);
  font-family:"Inter",sans-serif;
  position:relative;
  overflow-x:hidden;

  /* sfondo + velo */
  background:
    linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),
    url("https://odryeivy.top/wp-content/uploads/2025/04/ChatGPT-Image-22-apr-2025-21_24_33.png")
      center top/cover no-repeat,
    #000;
}

/* --------- DECORAZIONI FOGLIE – DESKTOP -------------- */
.ivy-decoration{
  position:absolute;width:180px;pointer-events:none;
}
.ivy-tl{top:60px;left:60px;}
.ivy-tr{top:60px;right:60px;transform:scaleX(-1);}
.ivy-bl{bottom:100px;left:60px;}
.ivy-br{bottom:100px;right:60px;transform:scaleX(-1);}

/* su mobile le nascondiamo: evitano segnaposto blu */
@media (max-width:767px){
  .ivy-decoration{display:none;}
}

/* --------- WRAPPER ----------------------------------- */
.contact-wrapper{
  display:flex;flex-direction:column;align-items:center;
  padding-top:clamp(7rem,20vh,10rem);
  position:relative;
}

/* flourish decorativo */
.contact-wrapper::before{
  content:"";position:absolute;top:calc(96px + 20px);left:50%;
  width:220px;height:40px;transform:translateX(-50%);
  background:url("../img/flourish.svg") center/contain no-repeat;
  opacity:.8;pointer-events:none;
}

/* --------- TITOLI ------------------------------------ */
.contact-title{
  font:600 clamp(2.2rem,6vw,3.5rem) "Poppins",sans-serif;
  margin:0 0 3rem;text-align:center;
}

/* --------- CARD FORM --------------------------------- */
.contact-card{
  max-width:520px;width:90%;
  background:var(--oi-grey-900);
  border-radius:12px;
  padding:2.5rem;
  box-shadow:0 0 0 1px var(--oi-grey-700);
  margin-bottom:8rem;
}
.contact-form{
  display:flex;flex-direction:column;gap:1.2rem;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  background:var(--oi-black);
  color:var(--oi-white);
  border:none;border-radius:6px;
  padding:.95rem 1.2rem;
  font-size:.95rem;
}
.contact-form textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form ::placeholder{
  color:#838383;
}

/* 
   Rinominato pulsante => .cta-form-button
   per non andare in conflitto con .cta-button
   (usato in home).
*/
.cta-form-button {
  /* ①  assicura che occupi tutta la riga  */
  width:100%;
  /* ②  evita che venga centrato e ristretto dal flex‑box */
  align-self:stretch;

  background:var(--oi-grey-700);
  color:var(--oi-white);
  border:none;
  border-radius:6px;
  padding:.9rem 0;
  font-size:1rem;
  cursor:pointer;
  transition:background .25s,transform .25s,box-shadow .25s;
}
.cta-form-button:hover{
  background:var(--oi-gold);
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 15px rgba(212,177,63,.35);
}
.cta-form-button:active{
  transform:translateY(0) scale(.97);
  box-shadow:none;
}

/* --------- FOOTER ------------------------------------ */
.contact-footer{
  padding:3.2rem clamp(1rem,6vw,4rem);
  background:var(--oi-black);
  border-top:1px solid var(--oi-grey-700);
  font-size:.95rem;
}

/* social row (SVG inline: niente icone mancanti) */
.footer-social{
  display:flex;justify-content:center;gap:1.3rem;
  margin-bottom:2.5rem;flex-wrap:wrap;
}
.footer-social a{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--oi-white);border-radius:50%;
  color:var(--oi-white);text-decoration:none;transition:.25s;
}
.footer-social a svg{width:18px;height:18px;}
.footer-social a:hover{
  background:var(--oi-gold);
  border-color:var(--oi-gold);
  color:#1e1e1e;
}

/* colonne adattive */
.footer-columns{
  display:grid;gap:2.2rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  align-items:flex-start;text-align:center;
}
.footer-columns h3{
  font:600 1rem "Poppins",sans-serif;
  margin-bottom:1rem;
}
.footer-links ul{
  list-style:none;margin:0;padding:0;
}
.footer-links a{
  color:var(--oi-white);
  text-decoration:none;
  transition:color .2s;
}
.footer-links a:hover{
  color:var(--oi-gold);
}

/* logo (solo desktop) */
@media (min-width:768px){
  .footer-logo img{width:72px;height:auto;margin-bottom:.8rem;}
}
@media (max-width:767px){
  .footer-logo{display:none;}
  .footer-columns{text-align:left;}
}

/* -------------------------------------------------- */
/*  Mobile: alleggerisco il velo nero di copertura    */
/* -------------------------------------------------- */
@media (max-width:640px){
  .page.contact-page{
    background:
      linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), /* era .60 -> .45 */
      url("https://odryeivy.top/wp-content/uploads/2025/04/ChatGPT-Image-22-apr-2025-21_24_33.png")
        center/cover no-repeat,
      #000;
  }
}

/* --------- fine file --------------------------------- */