/* ==========================================================================
   FONT – Champagne & Limousines
   ========================================================================== */
@font-face {
  font-family: 'Champagne & Limousines';
  src: url('fonts/ChampagneLimousines.woff2') format('woff2'),
       url('fonts/ChampagneLimousines.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Champagne & Limousines';
  src: url('fonts/ChampagneLimousines-Bold.woff2') format('woff2'),
       url('fonts/ChampagneLimousines-Bold.woff')  format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* RESET & BASE */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Champagne & Limousines', sans-serif;
  scroll-behavior: smooth;
  padding-top: env(safe-area-inset-top);
  color: #333; background: #fff;
}

/* NAVBAR */
header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: transparent; transition: background 0.3s;
  z-index: 1000; border: none; box-shadow: none;
}
header.scrolled { background: rgba(255,255,255,0.95) !important; }
nav { max-width: 1200px; margin: auto; padding: 20px; display: flex; justify-content: center; }
nav ul { display: flex; gap: 2rem; list-style: none; }
nav ul li a {
  color: #fff; text-decoration: none; font-weight: 600; transition: color 0.3s;
}
header.scrolled nav ul li a { color: #000 !important; }

/* HERO */
.hero {
  height: 100vh;
  background: url("images/ChatGPT%20Image%205%20giu%202025%2C%2021_27_04.png") center/cover no-repeat;
  display: flex; align-items: flex-end; justify-content: center; position: relative;
}
@media (max-width: 992px) {
  .hero { height: 60vh; background-size: contain; background-position: center top; }
}
.hero .btn { margin-bottom: 20px; }

/* BUTTONS */
.btn {
  display: inline-block; background: #fff; color: #000;
  border: 2px solid #000; border-radius: 6px;
  padding: 10px 20px; font-size: 1rem; font-weight: 600;
  text-decoration: none; transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn:hover { background: #000; color: #fff; transform: translateY(-2px); }

/* SECTIONS */
section { padding: 80px 20px; text-align: center; }
h2 { font-size: 2rem; margin-bottom: 30px; color: #222; }
p, .intro-text, .video-title, .article-text h3, .article-text p {
  font-size: 1.1rem; line-height: 1.6; color: #444; margin-bottom: 20px;
}
.divider { width: 60px; height: 1px; background: #ccc; margin: 40px auto; }
.signature { font-style: italic; color: #888; font-size: 1.2rem; }

/* VIDEO GRID */
.video-grid {
  display: grid; gap: 30px; margin-top: 40px; justify-content: center;
}
@media (max-width: 767px) { .video-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .video-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 992px) { .video-grid { grid-template-columns: repeat(3,1fr); } }
.video-box {
  max-width: 360px; margin: 0 auto; background: transparent; border: none; box-shadow: none;
}
.video-box video, .plyr__video-wrapper {
  background: transparent; border: none; box-shadow: none;
}
video:-webkit-full-screen, video:fullscreen { object-fit: contain !important; }
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
.plyr__play-large { display: none !important; }

/* BLOG */
.article-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.article-cover { width: 100%; max-width: 600px; border-radius: 10px; margin-bottom: 20px; }
.article-text { max-width: 800px; }

/* CONTACTS */
.contacts { padding: 80px 20px; text-align: center; }
.contact-methods { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 20px 0; }
.contact-link {
  display: flex; align-items: center; gap: 8px; font-size: 1.1rem; color: #007bff; text-decoration: none; transition: opacity 0.3s;
}
.contact-link:hover { opacity: 0.8; text-decoration: underline; }
.contact-link img { width: 24px; }
.contact-form { display: flex; flex-direction: column; align-items: center; max-width: 600px; margin: 0 auto; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px; margin-bottom: 15px; font-size: 1rem; color: #333;
  border: 1px solid #ccc; border-radius: 6px;
  font-family: 'Champagne & Limousines', sans-serif;
}
.contact-form button { margin-top: 5px; }

/* PLACEHOLDER STYLE */
::placeholder {
  font-family: 'Champagne & Limousines', sans-serif;
  color: #888;
}

/* FOOTER */
footer { background: #f4f4f4; padding: 30px 20px; text-align: center; }
.footer-logo { max-height: 40px; margin-bottom: 10px; }



/* === EFFETTI ELEGANTI PER PULSANTI === */
.btn {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
  box-shadow: 0 0 0 transparent;
}
.btn:hover {
  transform: scale(1.05);
  background-color: #e6dfcc;
  color: #111;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* === BOTTONE ANIMATO BLOG === */
.blog-animated {
  position: relative;
  overflow: hidden;
  padding-right: 45px;
}
.blog-animated::after {
  content: '➔';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.3s ease;
}
.blog-animated:hover::after {
  right: 10px;
}