@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --navy: #1A2332;
  --navy-light: #243447;
  --gold: #C5A059;
  --gold-hover: #B08A3D;
  --white: #FFFFFF;
  --off-white: #F9F7F5;
  --slate: #4A5568;
  --slate-light: #718096;
  --border: #DDE1E7;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--navy);
  background: var(--off-white);
  line-height: 1.6;
}

/* Service items are designed as border-separated rows, avoiding traditional cards */
.svc-row {
  display: grid;
  grid-template-columns: 1.5fr 2.5fr 1fr;
  align-items: start;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s ease;
}
.svc-row:hover {
  background: var(--gold);
}
.svc-row:last-child {
  border-bottom: none;
}
/* Responsive Grid Spans (Mobile First) */
[class*="span-"] {
  grid-column: span 12; /* Default to full width on mobile */
}

@media(min-width: 768px) {
  .span-1 { grid-column: span 1; }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; }
  .span-10 { grid-column: span 10; }
  .span-11 { grid-column: span 11; }
  .span-12 { grid-column: span 12; }
}

/* Mobile Navigation Core Resets */
.nav-links { display: none !important; }
.nav-cta { display: none !important; }
.nav-hamburger { display: flex !important; }

@media(min-width: 1024px) {
  .nav-links { display: flex !important; }
  .nav-cta { display: inline-flex !important; }
  .nav-hamburger { display: none !important; }
}

.mobile-menu {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
  max-width: 100%;
  margin: 0 auto;
}
.mobile-menu.open {
  display: flex !important;
}