/* The Flower Cart - style.css
   Responsive, modern, accessible styles for multi-page site
   Drop into /css/style.css
*/

/* Reset / base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #f6fffa 0%, #ffffff 40%, #fff7f6 100%);
  color:#1f2937;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Container */
.container { max-width:1200px; margin:0 auto; padding:24px; }

/* NAV */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; background:rgba(255,255,255,0.96); backdrop-filter: blur(6px);
  box-shadow:0 3px 12px rgba(16,24,40,0.06); position:sticky; top:0; z-index:60;
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:#064e3b; font-weight:700; font-size:20px; }
.logo img { width:48px; height:48px; border-radius:10px; object-fit:cover; box-shadow:0 6px 18px rgba(6,95,70,0.12); }
.nav-links { display:flex; gap:12px; list-style:none; margin:0; padding:0; align-items:center; }
.nav-links a { text-decoration:none; color:#065f46; padding:8px 12px; border-radius:8px; font-weight:600; font-size:14px; }
.nav-links a:hover, .nav-links a.active { background:#ecfdf5; box-shadow:inset 0 -2px 0 rgba(6,95,70,0.06); }

/* Mobile nav */
.menu-toggle { display:none; background:none; border:0; font-size:20px; }

/* Hero */
.hero { display:flex; gap:28px; align-items:center; padding:36px 0; }
.hero .hero-text { flex:1; }
.hero h1 { font-size:40px; line-height:1.02; margin:0 0 12px; color:#064e3b; }
.hero p.lead { margin:0 0 18px; color:#475569; font-size:18px; }
.btn { display:inline-block; padding:12px 18px; background:#059669; color:white; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 8px 24px rgba(5,150,105,0.12); }
.btn.secondary { background:transparent; color:#065f46; border:1px solid #e6f6ef; }

/* Hero image */
.hero-img { width:520px; height:360px; object-fit:cover; border-radius:18px; box-shadow:0 18px 40px rgba(6,95,70,0.08); }

/* Features grid */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.feature-box { background:linear-gradient(180deg,#ffffff,#f7fffa); padding:20px; border-radius:12px; box-shadow:0 6px 18px rgba(6,95,70,0.04); }
.feature-box h3 { margin:0 0 8px; color:#065f46; font-size:18px; }
.feature-box p { margin:0; color:#475569; font-size:14px; }

/* Section titles */
.section-title { display:flex; align-items:center; justify-content:space-between; margin:36px 0 18px; }
.section-title h2 { margin:0; font-size:22px; color:#044e3a; }

/* Testimonials */
.testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.testimonial { background:#fff; padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,0.04); }

/* Team */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px; }
.team-card { background:#fff; padding:14px; border-radius:12px; text-align:center; }
.team-card img { width:100%; height:200px; object-fit:cover; border-radius:10px; }

/* Gallery */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.gallery figure { margin:0; background:white; border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:0 8px 30px rgba(15,23,42,0.04); }
.gallery img { width:100%; height:260px; object-fit:cover; display:block; transition:transform .25s ease; }
.gallery figure:hover img { transform:scale(1.03); }
.gallery figcaption { padding:12px; font-size:13px; color:#475569; }

/* Gallery controls */
.gallery-controls { display:flex; gap:12px; align-items:center; margin-bottom:10px; }

/* Lightbox */
.lightbox { display:none; position:fixed; inset:0; background:rgba(2,6,23,0.78); z-index:120; align-items:center; justify-content:center; padding:26px; }
.lightbox.open { display:flex; }
.lightbox-content { position:relative; max-width:1100px; width:100%; }
.lightbox img { width:100%; height:70vh; object-fit:contain; border-radius:10px; }
.lightbox .controls { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; }
.lightbox button { background:transparent; border:0; font-size:36px; color:white; pointer-events:auto; padding:8px 18px; }

/* Footer */
footer { margin-top:48px; padding:28px 24px; background:rgba(255,255,255,0.9); border-top:1px solid rgba(6,95,70,0.05); }
.footer-links { margin-top:8px; color:#475569; }

/* Forms */
input[type="text"], input[type="email"], textarea, select {
  width:100%; padding:12px; border-radius:8px; border:1px solid #e6eef0; font-size:14px; color:#0f1724;
  background:white;
}
label { display:block; font-size:14px; margin-bottom:6px; color:#0f1724; }

/* FAQ / small */
.faq { background:#fff; padding:16px; border-radius:10px; margin-top:12px; }
.faq h4 { margin:0 0 8px; font-size:16px; }

/* Utilities */
.grid-2 { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
.center { text-align:center; }
.kicker { font-size:13px; color:#10b981; font-weight:700; letter-spacing:1px; text-transform:uppercase; }

/* Responsive */
@media (max-width: 980px) {
  .features, .testimonials, .team-grid, .gallery { grid-template-columns: repeat(2,1fr); }
  .hero { flex-direction:column; }
  .hero-img { width:100%; height:360px; }
  .grid-2 { grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .menu-toggle{ display:block; }
}
@media (max-width: 600px) {
  .features, .testimonials, .team-grid, .gallery { grid-template-columns: 1fr; }
  .hero h1 { font-size:28px; }
  .hero p.lead { font-size:15px; }
}