/* ═══════════════════════════════════════════════════════════════════════════
   css/contact.css — Contact page stylesheet for MR. DUVAL
   Imports base style.css and implements a functional form layout.
   ═══════════════════════════════════════════════════════════════════════════ */

@import "style.css";

/* ── Contact Details and Form Section ───────────────────────────────────── */
.contact-page-content {
  padding: calc(var(--space-3xl) + var(--header-h)) 0 var(--space-3xl);
  background: var(--color-offwhite);
}

/* Custom Hours styling */
.info-hours-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  margin-top: var(--space-lg);
  border-left: 3px solid var(--color-black);
}

.info-hours-card h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-gray-light);
}

.hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
}

.hours-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.hours-row .days {
  color: var(--color-gray);
}

/* ── Leaflet Interactive Map Full Width ─────────────────────────────────── */
.full-width-map-section {
  background: var(--color-white);
  padding-top: var(--space-2xl);
}

.full-width-map-section .section-header {
  margin-bottom: var(--space-xl);
}

.full-width-map-section .map-wrapper {
  height: 480px;
  width: 100%;
  border-top: 4px solid var(--color-red);
  position: relative;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .contact-page-content {
    padding-top: calc(var(--space-xl) + var(--header-h));
  }

  .full-width-map-section .map-wrapper {
    height: 360px;
  }
}