/**
 * DealerPro Elite — Contact page styles
 *
 * Source mockup(s):
 *   - mockups/heavy-equipment/mockup-1G-contact.html
 *   - mockups/cars/mockup-2G-contact.html
 *
 * NOTE: Per project policy (feedback_no_google_maps), no map embed/static-image is used —
 * address is rendered as plain text in the contact-info block only.
 *
 * Loaded conditionally on page-contact.php via wp_enqueue_style.
 *
 * @package DealerPro_Elite
 * @since 2.0.0
 */

/* ─── CONTACT SPLIT (info card left, form card right) ─── */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-7);
  /* `start`, not `stretch`, so the info card stays its natural height and we
     can pin it with position: sticky. Otherwise the trade-in form (much
     taller than the info card) would leave the left side a tall empty box. */
  align-items: start;
}
@media (max-width: 900px) {
  .contact-split {
    grid-template-columns: 1fr;
  }
}

/* ─── CONTACT INFO (left card with phone/email/address) ─ */
.contact-info {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg-1);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  /* Keep the info card visible while the user scrolls the long form on the
     right. Top offset roughly matches the sticky header. Disabled below the
     900px breakpoint where the layout collapses to one column. */
  position: sticky;
  top: calc(var(--header-h, 80px) + var(--s-4));
}
@media (max-width: 900px) {
  .contact-info {
    position: static;
  }
}
.contact-info__title {
  font-size: var(--t-lg);
  margin: var(--s-3) 0 var(--s-2);
}
.contact-info__lead {
  font-size: var(--t-sm);
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: var(--s-6);
}
.contact-info__list {
  display: grid;
  gap: var(--s-3);
}
.contact-info__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: var(--transition);
  text-decoration: none;
}
.contact-info__item:hover {
  border-color: var(--accent-border);
  transform: translateX(4px);
}
.contact-info__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info__icon svg {
  width: 18px;
  height: 18px;
}
.contact-info__lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.contact-info__val {
  display: block;
  font-size: var(--t-sm);
  color: var(--text);
  font-weight: 700;
}
.contact-info__divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-faint);
  margin: var(--s-5) 0 var(--s-3);
}
.contact-info__divider::before,
.contact-info__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.contact-info__trust {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
}
.contact-info__trust li {
  font-size: var(--t-sm);
  color: var(--text-soft);
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.contact-info__trust li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--success-soft);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

/* ─── CONTACT FORM CARD (right side) ───────────────────── */
.contact-form-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
}
.contact-form-card__head {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.contact-form-card__title {
  font-size: var(--t-lg);
  margin: var(--s-2) 0;
}
.contact-form-card__sub {
  font-size: var(--t-sm);
  color: var(--text-muted);
}

/* ─── HOURS TABLE (full weekly schedule) ───────────────── */
.hours-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.hours-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
  padding: var(--s-4) var(--s-6);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}
.hours-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hours-status--open .hours-status__dot {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft), 0 0 12px var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}
.hours-status--closed .hours-status__dot {
  background: var(--cta);
  box-shadow: 0 0 0 3px var(--cta-soft);
}
.hours-status__text {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text);
}
.hours-status__sub {
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-left: var(--s-2);
}
.hours-table {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hours-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.hours-row:last-child { border-bottom: 0; }
/* Zebra striping — every other row gets a slightly darker background. */
.hours-row:nth-child(even) { background: var(--bg-3); }
.hours-row:hover { background: var(--bg-3); filter: brightness(1.15); }
.hours-row--today {
  background:
    linear-gradient(90deg, var(--accent-soft), transparent 80%),
    var(--bg-3);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--s-6) - 3px);
}
.hours-row__day {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.hours-row--today .hours-row__day { color: var(--accent); }
.hours-row__time {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-soft);
  font-weight: 600;
}
.hours-row--today .hours-row__time { color: var(--text); }
.hours-row__time--closed {
  color: var(--text-faint);
  font-style: italic;
}
.hours-row__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  background: var(--success-soft);
  border: 1px solid var(--success);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--success);
  white-space: nowrap;
}
.hours-row__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}
.hours-note {
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
.hours-note strong { color: var(--text-soft); }
@media (max-width: 540px) {
  .hours-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
  }
  .hours-row--today { padding-left: calc(var(--s-5) - 3px); }
}

/* Editorial intro (rendered when the Contact page has page-content text). */
.contact-form-card__intro {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sm);
  color: var(--text-soft);
  line-height: 1.6;
}
.contact-form-card__intro p:last-child {
  margin-bottom: 0;
}