/* ==========================================================================
   CONTACT US PAGE — styles used only by contact.html
   Contents: layout · info card · open/closed badge · hours · map · areas
   ========================================================================== */

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
.contact__aside { display: grid; gap: 20px; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ==========================================================================
   INFO CARD
   ========================================================================== */

/* Not a card — a hairline-ruled block, so it doesn't compete with the form
   sitting next to it. */
.info-card { background: none; border: none; border-top: 2px solid var(--ink); border-radius: 0; padding: 26px 0 0; box-shadow: none; }
.info-card > h3 { font-size: 1.15rem; margin-bottom: 18px; }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.info-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.info-list li:last-child { border-bottom: none; }
.info-list .ico {
  flex: none; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.1rem;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.info-list strong {
  display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 3px; font-weight: 700;
}
.info-list a, .info-list span:not(.ico):not(strong) { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.info-list a:hover { color: var(--brand); }

/* ==========================================================================
   OPEN / CLOSED BADGE — filled in live by js/pages/contact.js
   ========================================================================== */

.status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .86rem; font-weight: 700; padding: 8px 16px;
  border-radius: var(--radius-pill); margin-bottom: 22px;
  background: var(--line); color: var(--ink-soft);
}
.status::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; flex: none;
}
.status.is-open {
  background: color-mix(in srgb, var(--accent-3) 18%, transparent);
  color: #16795F;
}
.status.is-open::before { animation: pulse 2s ease-in-out infinite; }
.status.is-closed {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand-dark);
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ==========================================================================
   HOURS TABLE
   ========================================================================== */

.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 12px; border-radius: 10px; font-size: .95rem;
}
.hours li:nth-child(odd) { background: var(--cream); }
.hours__day { color: var(--ink-soft); }
.hours__time { font-weight: 600; color: var(--ink); }
.hours li.is-today { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.hours li.is-today .hours__day,
.hours li.is-today .hours__time { color: var(--brand-dark); font-weight: 700; }
.hours li.is-closed .hours__time { color: var(--ink-soft); font-weight: 500; }

/* ==========================================================================
   MAP
   ========================================================================== */

.map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map iframe { width: 100%; height: 300px; border: 0; }

/* ==========================================================================
   AREAS WE SERVE
   ========================================================================== */

.areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.areas li { list-style: none; }
.areas span {
  display: inline-block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 10px 20px;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  transition: border-color .2s, transform .2s, color .2s;
}
.areas span:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }