/* Clear Sky — site styles
   Layout and colors live inline in index.html (exported from the design canvas).
   This file handles the things inline styles can't: base reset, link colors,
   form fields, focus states, and responsive overrides for phones/tablets. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #0B1726; }
a { color: #3BB4F2; }
a:hover { color: #7FD0F7; }
input, select, textarea, button { font: inherit; }
img { max-width: 100%; }

/* Keyboard focus visible on every control */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #3BB4F2;
  outline-offset: 2px;
}

/* Form fields on the light panel */
form input:focus, form select:focus, form textarea:focus {
  border-color: #2A6B8F !important;
}

/* FAQ disclosure arrow */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "";
  margin-left: auto;
  width: 10px; height: 10px;
  border-right: 2px solid #3BB4F2;
  border-bottom: 2px solid #3BB4F2;
  transform: rotate(45deg);
  transition: transform .2s;
  flex-shrink: 0;
}
details[open] summary::after { transform: rotate(-135deg); }

/* Button hover */
a[href="#quote"]:hover, button[type="submit"]:hover { filter: brightness(1.08); }

/* ---------- Visual polish ---------- */

/* Sticky nav: frosted */
.site-header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* Hero: simulator photo behind a navy fade */
.hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,23,38,0.97) 0%, rgba(11,23,38,0.86) 36%, rgba(11,23,38,0.42) 68%, rgba(11,23,38,0.18) 100%),
    linear-gradient(180deg, rgba(11,23,38,0.35) 0%, rgba(11,23,38,0) 40%, rgba(11,23,38,0.98) 100%),
    url("images/ffs-bay.jpg");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  filter: saturate(0.9);
}
.hero-glow {
  position: absolute; inset: -20% -10% auto auto;
  width: 60%; height: 120%;
  background: radial-gradient(ellipse at 70% 30%, rgba(59,180,242,0.22) 0%, rgba(59,180,242,0.06) 35%, rgba(59,180,242,0) 65%);
  pointer-events: none;
}
h1.wordmark { text-shadow: 0 2px 24px rgba(0,0,0,0.45); }

/* Glass card */
.glass {
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Trust row: plain labels with check marks, deliberately not button-like */
.trust li { line-height: 1.3; }

/* Cards: soft top highlight, lift on hover */
.card {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 45%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.18);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(59,180,242,0.45) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(59,180,242,0.12);
}

/* Alternating bands: faint gradient instead of flat */
.band {
  background: linear-gradient(180deg, #0F1F33 0%, #0E1C2E 100%) !important;
}

/* Why Clear Sky: ambient glow */
.glow-section::before {
  content: "";
  position: absolute; left: -10%; top: 10%;
  width: 55%; height: 80%;
  background: radial-gradient(ellipse at center, rgba(59,180,242,0.14) 0%, rgba(59,180,242,0) 65%);
  pointer-events: none;
}
.glow-section > div { position: relative; }

/* Photos */
.photo { box-shadow: 0 12px 32px rgba(0,0,0,0.35); transition: transform .3s ease; }
.photo:hover { transform: scale(1.02); }

/* Light panels: soft shadow so they float */
.light-panel { box-shadow: 0 30px 70px rgba(0,0,0,0.35); }

/* Primary buttons: subtle gradient + glow */
a[href="#quote"][style*="background: #3BB4F2"] {
  background: linear-gradient(180deg, #52C1F6 0%, #3BB4F2 100%) !important;
  box-shadow: 0 8px 24px rgba(59,180,242,0.28);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  h1.wordmark { font-size: 76px !important; }
  .tagline { font-size: 30px !important; }
  /* Hero stacks: text first, snapshot card below */
  .hero > div[style*="grid-template-columns: repeat(12"] { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .hero [style*="grid-column: span 7"], .hero [style*="grid-column: span 5"] { grid-column: auto !important; }
  .hero-bg { background-position: center 30%; }
  h2 { font-size: 34px !important; }
  /* 4-up grids become 2-up */
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-column: span 3"] { grid-column: span 2 !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(11,23,38,0.55) 0%, rgba(11,23,38,0.92) 45%, rgba(11,23,38,0.99) 100%),
      url("images/ffs-bay.jpg");
    background-position: center 20%;
  }
  .hero-glow { display: none; }
  h1.wordmark { font-size: 56px !important; letter-spacing: 0.03em !important; }
  .tagline { font-size: 26px !important; }
  h2 { font-size: 30px !important; }
  section, header nav, footer { padding-left: 20px !important; padding-right: 20px !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Every grid collapses to one column */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-column"] { grid-column: auto !important; }

  /* Hide secondary nav links; keep phone + CTA */
  header nav a[href="#services"],
  header nav a[href="#evaluation"],
  header nav a[href="#process"],
  header nav a[href="#faq"] { display: none; }
  header nav { padding-top: 12px !important; padding-bottom: 12px !important; }

  /* Light evaluation box and quote panel */
  [style*="background: #F2F6FA"] { padding: 24px !important; }

  /* Photo grid stays 2-up on phones; the images are small anyway */
  #experience [style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .photo { transition: none; }
  .card:hover, .photo:hover { transform: none; }
  details summary::after { transition: none; }
}