/* ═══════════════════════════════════════════════════════════════
   OAKFIELD LIQUOR — CONTACT PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── CONTACT GRID ───────────────────────────────────────────────── */
.contact-wrapper {
  max-width: 1280px; margin: 0 auto;
  padding: 80px 40px;
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start;
}

/* ── INFO CARDS ─────────────────────────────────────────────────── */
.contact-info { display: flex; flex-direction: column; }
.contact-info .eyebrow { margin-bottom: 16px; }
.contact-info h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700; line-height: 1.2; margin-bottom: 16px;
}
.contact-info h2 em { color: var(--red); font-style: italic; }
.contact-info > p {
  font-size: 15px; font-weight: 300;
  line-height: 1.8; color: var(--text-muted); margin-bottom: 40px;
}
.info-card {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 28px 0; border-bottom: 1px solid var(--border-light);
}
.info-card:first-of-type { border-top: 1px solid var(--border-light); }
.info-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.info-icon svg { width: 20px; height: 20px; stroke: var(--white); fill: none; stroke-width: 1.8; }
.info-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.info-value {
  font-size: 15px; font-weight: 400;
  color: var(--black); line-height: 1.6;
}
.info-value a { color: var(--red); transition: color 0.2s; }
.info-value a:hover { color: var(--red-dark); text-decoration: underline; }

/* ── HOURS CARD ─────────────────────────────────────────────────── */
.hours-card {
  margin-top: 40px; background: var(--off-white);
  border: 1px solid var(--border-light); padding: 32px;
}
.hours-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.hours-card-header .eyebrow { margin-bottom: 0; }
.hours-list-contact { list-style: none; }
.hours-list-contact li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
}
.hours-list-contact li:last-child { border-bottom: none; }
.hours-list-contact .day {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.hours-list-contact .time { font-weight: 400; color: var(--black); }
.hours-list-contact li.today .day { color: var(--red); }
.hours-list-contact li.today .time { color: var(--red); font-weight: 700; }
.today-badge {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--red); color: var(--white);
  padding: 2px 8px; margin-left: 8px;
}

/* ── CONTACT FORM ───────────────────────────────────────────────── */
.contact-form-wrap {
  background: var(--off-white); border: 1px solid var(--border-light); padding: 56px;
}
.contact-form-wrap .eyebrow { margin-bottom: 12px; }
.contact-form-wrap h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700; margin-bottom: 8px;
}
.contact-form-wrap h3 em { color: var(--red); font-style: italic; }
.contact-form-wrap > p {
  font-size: 14px; font-weight: 300;
  color: var(--text-muted); line-height: 1.7; margin-bottom: 36px;
}
.form-divider { width: 48px; height: 2px; background: var(--red); margin-bottom: 36px; }
.required-star { color: var(--red); }
.form-note {
  font-size: 11px; color: var(--text-muted);
  margin-top: 16px; text-align: center; line-height: 1.6;
}

/* ── MAP ────────────────────────────────────────────────────────── */
.map-section { background: var(--black); }
.map-header {
  max-width: 1280px; margin: 0 auto;
  padding: 56px 40px 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.map-header-text .eyebrow { margin-bottom: 12px; }
.map-header-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 700; color: var(--white);
}
.map-header-text h2 em { color: var(--gold); font-style: italic; }
.map-address {
  font-size: 14px; font-weight: 300;
  color: rgba(255, 255, 255, 0.5); line-height: 1.7; text-align: right;
}
.map-directions {
  color: var(--gold); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 8px; display: inline-block; transition: opacity 0.2s;
}
.map-directions:hover { opacity: 0.7; }
.map-embed {
  width: 100%; height: 420px;
  display: block; border: none;
  filter: grayscale(20%) contrast(1.05);
}

/* ── CONTACT RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-wrapper { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .contact-wrapper { padding: 48px 20px; }
  .contact-form-wrap { padding: 32px 20px; }
  .map-header { flex-direction: column; padding: 40px 20px 24px; }
  .map-address { text-align: left; }
  .map-embed { height: 300px; }
}