/*
Theme Name: DroneByDro Theme
Theme URI:  https://example.com/dronebydro-theme
Author: Your Name
Description: A theme styled to match DroneByDro (pixel-tuned approximation).
Version: 1.1
Text Domain: dronebydro
*/

/* Typography & root tokens */
:root{
  --container:1200px;
  --primary:#0b2540; /* deep navy-ish */
  --accent:#fce412;  /* bright yellow seen in SVG fills */
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.85);
  --radius:12px;
}

html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--primary);
  background:var(--bg);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Site wrapper */
.wrap{max-width:var(--container); margin:0 auto; padding:0 20px; box-sizing:border-box;}

/* Header */
.site-header{position:sticky; top:0; z-index:60; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); border-bottom:1px solid rgba(11,37,64,0.04); backdrop-filter: blur(4px);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:74px;}
.site-logo img{height:48px; display:block;}
.site-logo .logo-text{font-weight:700; letter-spacing:0.2px; color:var(--primary); font-size:1.05rem; display:inline-block;}

/* Primary nav */
.nav-primary ul{display:flex; gap:24px; list-style:none; margin:0; padding:0; align-items:center;}
.nav-primary li{font-weight:600; text-transform:uppercase; font-size:0.875rem;}
.nav-primary a{color:var(--primary); opacity:0.95; padding:8px 6px; display:inline-block;}
.nav-primary a:hover{color:var(--accent); opacity:1;}

/* Hero */
.hero{display:flex; align-items:center; gap:48px; padding:64px 0; background:linear-gradient(180deg, rgba(11,37,64,0.03), rgba(11,37,64,0.00));}
.hero .hero-copy{flex:1; max-width:720px;}
.hero h1{font-size:3rem; margin:0 0 18px; line-height:1.02; color:var(--primary); font-weight:800;}
.hero p.lead{font-size:1.125rem; color:var(--muted); margin:0 0 22px;}
.hero .hero-media img{width:100%; max-width:520px; border-radius:14px; box-shadow:0 18px 50px rgba(11,37,64,0.08); display:block;}

.btn{display:inline-block; background:var(--primary); color:#fff; padding:12px 18px; border-radius:8px; font-weight:700; text-transform:uppercase; font-size:0.875rem;}
.btn-alt{background:transparent; border:2px solid var(--primary); color:var(--primary)}

/* Services */
.services{padding:64px 0;}
.services h2{font-size:1.8rem; margin:0 0 22px; color:var(--primary);}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.service-card{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:0 10px 30px rgba(11,37,64,0.04); transition:transform .28s ease, box-shadow .28s ease;}
.service-card:hover{transform:translateY(-6px); box-shadow:0 26px 60px rgba(11,37,64,0.08);}
.service-card h3{margin:0 0 8px; font-size:1.15rem;}
.service-card p{margin:0; color:var(--muted); font-size:0.98rem;}

/* Portfolio gallery block */
.portfolio{padding:48px 0;}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.gallery-grid img{width:100%; height:220px; object-fit:cover; border-radius:10px; display:block;}

/* About / Info */
.info-strip{background:linear-gradient(90deg, rgba(11,37,64,0.02), rgba(252,228,18,0.02)); padding:36px 0; border-top:1px solid rgba(11,37,64,0.02); border-bottom:1px solid rgba(11,37,64,0.02);}
.info-strip .wrap{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.info-block{display:flex; gap:14px; align-items:center;}

/* Reviews / badges */
.badge{display:inline-flex; align-items:center; gap:8px; background:#fff; padding:8px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(11,37,64,0.04); font-weight:600;}

/* Contact / CTA footer */
.cta-footer{padding:56px 0; background:linear-gradient(180deg, rgba(11,37,64,0.02), rgba(11,37,64,0.00));}
.contact-card{background:var(--card); padding:28px; border-radius:14px; box-shadow:0 16px 40px rgba(11,37,64,0.05); max-width:720px;}

/* Footer */
.site-footer{background:#0b2540; color:#e6eef6; padding:36px 0; margin-top:48px;}
.site-footer a{color:#f3f7ff; opacity:0.9;}
.site-footer .wrap{display:flex; gap:20px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;}

/* Utilities */
.muted{color:var(--muted);}
.small{font-size:0.875rem;}

/* Responsive */
@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .hero{padding:48px 0; gap:28px;}
  .hero h1{font-size:2.4rem;}
}
@media (max-width:640px){
  .site-header .wrap{height:64px;}
  .nav-primary ul{gap:12px; font-size:0.85rem;}
  .services-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .hero{flex-direction:column-reverse; padding:36px 0; align-items:flex-start;}
  .hero .hero-media img{max-width:100%; height:auto;}
  .wrap{padding:0 16px;}
}

/* Hero Swiper Slider */
.hero-swiper{width:100%; max-width:520px; border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(11,37,64,0.08);}
.hero-swiper img{display:block; width:100%; height:auto;}
.swiper-button-next,.swiper-button-prev{color:var(--accent);}
.swiper-pagination-bullet{background:var(--accent); opacity:0.7;}
.swiper-pagination-bullet-active{opacity:1;}

.slide-caption{
  position:absolute;
  bottom:16px;
  left:16px;
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:0.9rem;
}
.hero-swiper .swiper-slide{position:relative;}