/* East Coast Drones — supplemental styles beyond Tailwind utilities.
   Plain CSS (not @apply) so it works with the Tailwind Play CDN, which
   only scans class names in markup and does not process external
   stylesheets. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Zilla+Slab:wght@400;500;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: #FAF6EF;
  color: #1F2A22;
}

/* Keep anchor-linked sections clear of the sticky header */
section[id] {
  scroll-margin-top: 5.5rem;
}

/* Visually-hidden until focused, for the skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #1E3324;
  color: #FAF6EF;
  padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* Desktop nav underline */
.nav-link {
  position: relative;
  padding-bottom: 3px;
  color: rgba(31, 42, 34, 0.78);
  transition: color .15s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #C1622D;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-link:hover {
  color: #1F2A22;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}
.nav-link.active {
  color: #1F2A22;
  font-weight: 600;
}

/* Mobile nav rows */
.mobile-nav-link {
  display: block;
  padding: .75rem .25rem;
  border-bottom: 1px solid rgba(47, 74, 52, 0.1);
  color: rgba(31, 42, 34, 0.85);
  font-weight: 500;
}
.mobile-nav-link.active {
  color: #C1622D;
  font-weight: 700;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: #C1622D;
  color: #FAF6EF;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  padding: .8rem 1.6rem;
  border-radius: .65rem;
  box-shadow: 0 10px 30px -12px rgba(31, 42, 34, 0.35);
  transition: background-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.btn-primary:hover {
  background-color: #9B4C21;
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: transparent;
  color: #2F4A34;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  padding: .75rem 1.5rem;
  border-radius: .65rem;
  border: 2px solid #2F4A34;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  background-color: #2F4A34;
  color: #FAF6EF;
}

.btn-primary-inverse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: #FAF6EF;
  color: #1E3324;
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.6rem;
  border-radius: .65rem;
  transition: background-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.btn-primary-inverse:hover {
  background-color: #F1EADC;
  transform: translateY(-1px);
}

/* Gradient "photo" placeholder panels — stand in for real photography */
.ph-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ph-hero {
  background: linear-gradient(135deg, #3E7C93 0%, #2F4A34 55%, #1E3324 100%);
}
.ph-sky {
  background: linear-gradient(135deg, #E3F0F4 0%, #C7E2EA 100%);
}
.ph-moss {
  background: linear-gradient(135deg, #E9EFE6 0%, #CBDCC3 100%);
}
.ph-clay {
  background: linear-gradient(135deg, #FBEAE0 0%, #F3CBB2 100%);
}
.ph-dark {
  background: linear-gradient(135deg, #28576A 0%, #1E3324 100%);
}

/* Texture overlays for placeholder panels — grid = paddock rows,
   dots = broadcast/aerial pattern, contour = topographic map lines */
.pattern-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 32px 32px;
}
.pattern-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.4) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.ph-panel > * {
  position: relative;
  z-index: 1;
}

/* Simple fade-up utility used sparingly on section entry */
.card-hover {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -16px rgba(31, 42, 34, 0.3);
}

/* Flagged placeholder callout (equipment page — forestry cargo line) */
.confirm-flag {
  border: 1px dashed #C1622D;
  background-color: #FBEAE0;
  color: #9B4C21;
}