/* Restaurant Equipment SOS - Light Theme Override
 * Loaded conditionally on restaurant pages only
 * Overrides dark theme from site.css
 */

:root {
  /* Light theme color palette */
  --bg: #F8FAFC;            /* Soft gray-blue background for warmth */
  --card: #FFFFFF;          /* Pure white cards for contrast */
  --text: #111827;
  --muted: #6B7280;
  --mint: #006CFF;          /* Primary blue for restaurant brand */
  --mint-pressed: #0052CC;
  --stroke: #E5E7EB;
}

/* Body and main backgrounds */
html,
body {
  background: var(--bg);
  color: var(--text);
}

/* Header overrides */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--stroke);
}

.site-header a {
  color: var(--text);
}

.site-header a:hover {
  color: var(--mint);
}

/* Main content area */
.site-main {
  background: var(--bg);
  color: var(--text);
}

/* Hero section - keep gradient, fix text */
.hero {
  color: var(--text);
}

.hero h1 {
  color: var(--text);
}

.hero .lead {
  color: var(--muted);
}

/* Cards and panels */
.card,
.panel {
  background: var(--card);
  border-color: var(--stroke);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* Navigation links */
.navlink {
  color: var(--text);
  border-color: var(--stroke);
}

.navlink:hover {
  background: #F9FAFB;
  border-color: var(--mint);
}

/* Buttons */
.btn.primary {
  background: var(--mint);
  color: #FFFFFF;
  border-color: var(--mint);
}

.btn.primary:hover {
  background: var(--mint-pressed);
  box-shadow: 0 0 12px rgba(0, 108, 255, 0.3);
}

.btn.secondary {
  background: #F3F4F6;
  color: var(--text);
  border-color: var(--stroke);
}

.btn.outline {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke);
}

.btn.outline:hover {
  background: #F9FAFB;
  border-color: var(--mint);
}

/* Chips and pills */
.chip,
.pill {
  border-color: var(--stroke);
  background: #F9FAFB;
  color: var(--muted);
}

/* Footer */
.site-footer {
  background: #F9FAFB;
  border-top: 1px solid var(--stroke);
  color: var(--text);
}

/* Details/FAQ sections */
details {
  color: var(--text);
}

details summary {
  color: var(--text);
}

details p {
  color: var(--muted);
}

/* Forms */
form {
  background: var(--card);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--stroke);
}

form input,
form textarea,
form select {
  background: var(--card);
  color: var(--text);
  border-color: var(--stroke);
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--mint);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 108, 255, 0.1);
}

/* Muted text elements */
.muted,
.note {
  color: var(--muted);
}

/* Links */
a {
  color: var(--mint);
}

a:hover {
  color: var(--mint-pressed);
}

/* Service cards */
.service-card {
  background: var(--card);
  border-color: var(--stroke);
}

.service-card:hover {
  border-color: var(--mint);
  box-shadow: 0 4px 16px rgba(0, 108, 255, 0.1);
}

.service-card h3 {
  color: var(--mint);
}

/* City links and service area cards */
.city-link {
  background: var(--card);
  border-color: var(--stroke);
  color: var(--text);
}

.city-link:hover {
  border-color: var(--mint);
  background: #F9FAFB;
}

.sa-card {
  background: var(--card);
  border-color: var(--stroke);
}

.sa-card:hover {
  border-color: var(--mint);
  box-shadow: 0 0 16px rgba(0, 108, 255, 0.12);
}

/* Internal links */
.internal-links a {
  color: var(--mint);
}

/* Trust badges and assurance boxes */
.trust-badges,
.assurance-box {
  background: #F9FAFB;
  border-color: var(--stroke);
  color: var(--text);
}

.assurance-box h3 {
  color: var(--mint);
}

/* Ensure high contrast for accessibility */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}

h1 {
  font-weight: 700;
}

p {
  color: var(--text);
}

/* Lists */
ul, ol {
  color: var(--text);
}

li {
  color: var(--text);
}

/* Section dividers for better visual hierarchy */
section + section {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--stroke);
}

/* Exception: don't add divider to hero or form sections */
.hero + section,
section#quote-form {
  border-top: none;
  padding-top: 2rem;
}

/* ========================================
   CARD-STYLE SECTIONS FOR VISUAL DEPTH
   ======================================== */

/* Main content sections get white card treatment */
.site-main section.hero,
.site-main section.why,
.site-main section.how,
.site-main section.timing,
.site-main section.trust,
.site-main section.faq,
.site-main section.service-areas,
.site-main section.city-specific-content,
.site-main section#quote-form {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.5rem;
}

/* Remove conflicting borders/padding from section dividers when cards are used */
.site-main section + section {
  border-top: none;
  padding-top: 0;
  margin-top: 1.5rem;
}

/* Trust badges section keeps its gray background for variety */
.site-main section.trust-badges {
  background: #F9FAFB;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Adjust hero padding for better breathing room */
.site-main section.hero {
  padding: 3rem 2rem;
}

/* Form section - extra visual weight */
.site-main section#quote-form {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 2.5rem 2rem;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
  .site-main section.hero,
  .site-main section.why,
  .site-main section.how,
  .site-main section.timing,
  .site-main section.trust,
  .site-main section.faq,
  .site-main section.service-areas,
  .site-main section.city-specific-content,
  .site-main section#quote-form {
    padding: 1.5rem;
    border-radius: 8px;
  }

  .site-main section.hero {
    padding: 2rem 1.5rem;
  }

  .site-main section#quote-form {
    padding: 2rem 1.5rem;
  }
}