/*
Theme Name: PisaDrone OnePage
Theme URI: https://www.pisadrone.it/
Author: Jolie
Description: Tema one-page leggero e moderno per servizi drone a Pisa (no page builder).
Version: 1.0.0
License: GPL v2 or later
Text Domain: pisadrone
*/

:root{
  --primary:#00aaff;
  --dark:#0d0d0d;
  --bg:#f7fbff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Poppins','Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:#222;background:#fff;line-height:1.6;
}

header.site-header{
  position:fixed;inset:0 0 auto 0;height:64px;background:rgba(0,0,0,.35);
  backdrop-filter:saturate(120%) blur(6px);display:flex;align-items:center;justify-content:space-between;
  padding:0 6vw;z-index:50;color:#fff;
}
header .brand{font-weight:700;letter-spacing:.3px}
header nav a{color:#fff;margin-left:16px;text-decoration:none;font-weight:600}
header nav a:hover{text-decoration:underline}

section{padding:80px 6vw}
h1,h2,h3{color:#111;margin:0 0 10px 0}
h2{font-size:2rem;margin-bottom:8px}
.lead{opacity:.9}

#footerlogo{
  max-width:20%;
}
.hero{
  position:relative;height:100vh;color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;background:#000;
}
.hero iframe{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:brightness(.7) contrast(1.1);
}
.hero .overlay{
  position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.55) 60%,rgba(0,0,0,.8));
}
.hero .hero-content{
  position:relative;z-index:2;max-width:900px;padding:24px;border-radius:16px;
}
.hero h1{font-size:clamp(32px,6vw,56px);margin-bottom:12px}
.hero p{font-size:clamp(16px,2.2vw,22px);margin-bottom:24px}
.cta{display:inline-block;background: #0074cc;color:#fff;padding:12px 22px;border-radius:999px;
  font-weight:700;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,170,255,.35)}

.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;
  padding:6px 10px;border-radius:999px;font-size:.9rem}

.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.card{
  background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.08);padding:18px;transition:transform .2s ease;
}
.card:hover{transform:translateY(-4px)}
.card h3{margin-top:6px}

.services{background:var(--bg)}

.portfolio .thumb{width:100%;border-radius:12px;display:block;box-shadow:0 3px 10px rgba(0,0,0,.08)}

.contact{background:#111;color:#fff;text-align:center}
.contact a{color:var(--primary);font-weight:700}

footer{background:var(--dark);color:#aaa;text-align:center;padding:16px;font-size:.95rem}

@media (max-width:720px){
  header nav{display:none}
}

#home-title{
  color:white;
}

/* ======= VIDEO FULL RESPONSIVE (desktop full, mobile box) ======= */
#video-full {
  padding: 0 !important;
  margin: 0 !important;
}

.video-full {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Altezza dinamica corretta anche su browser moderni */
@supports (height: 100dvh) {
  .video-full {
    height: 100dvh;
  }
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* mantiene proporzione 16:9 */
  height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: none;
  background: #000;
}

/* ======= VERSIONE MOBILE ======= */
@media (max-width: 768px) {

  .video-full {
    height: auto;
    background: #000;
    padding: 40px 0;
  }

  .video-container {
    position: relative;
    width: 90%;
    max-width: 480px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
  }

  .video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border: none;
  }

  /* Cursore e effetto clic */
  .video-container {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .video-container:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,.5);
  }
}

/* ===== HERO SECTION (con immagine di default) ===== */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000; /* fallback colore */
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6) 60%, rgba(0,0,0,.8));
}

.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 24px;
  border-radius: 16px;
}

.hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  margin-bottom: 12px;
}

.hero p {
  font-size: clamp(16px, 2.2vw, 22px);
  margin-bottom: 24px;
}

/* ===== HERO RESPONSIVE HEIGHT FIX ===== */
@media (max-width: 768px) {
  .hero {
    height: 70vh; /* riduce l’altezza per migliorare LCP */
    background-position: center top;
  }

  .hero .hero-content {
    padding: 40px 20px;
  }

  .hero h1 {
    font-size: clamp(22px, 6vw, 32px);
    margin-bottom: 10px;
  }

  .hero p {
    font-size: clamp(14px, 4vw, 18px);
    margin-bottom: 18px;
  }

  .cta {
    display: inline-block;
    background: #0074cc; /* blu più scuro per contrasto WCAG */
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .cta:hover {
    background: #005f99; /* hover più scuro ancora */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
  }

  .badges {
    gap: 6px;
  }
}

/* ===== MENU MOBILE MINIMAL ===== */
@media (max-width: 720px) {
  header nav a {
    display: none;
  }
}

/* ======= MOBILE CONTACT BUTTON ======= */
.mobile-contact-btn {
  display: none;
  background: #0074cc; /* blu più scuro, contrasto 5.6:1 con testo bianco */
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 999px;
  position: absolute;
  right: 6vw;
  top: 12px;
  z-index: 60;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: background .2s ease, transform .2s ease;
  line-height: 1;
}

.mobile-contact-btn:hover {
  background: #005fa3; /* hover ancora più contrastato */
  transform: translateY(-2px);
}

/* ===== MENU MOBILE MINIMAL ===== */
@media (max-width: 720px) {
  /* Nasconde completamente il menu di navigazione */
  header nav {
    display: none !important;
  }

  /* Mostra solo il pulsante mobile */
  .mobile-contact-btn {
    display: inline-block;
  }
}