/* Contact page.
   Scoped to .rv-page-contact so nothing leaks onto other pages.
   The original loaded Tailwind 2.2.19 from a CDN for ~20 utility classes.
   Those are reproduced at the bottom of this file instead — same look,
   no 300KB download. */

.rv-page-contact {
  --cyan: var(--rv-accent);
  --dark-bg: var(--rv-dark-bg);
  --card-bg: var(--rv-card-bg);
  --card-hover: var(--rv-card-hover);
  --grey-accent: var(--rv-grey-accent);
  --light-text: var(--rv-light-text);
  --grey-text: var(--rv-grey-text);
}

.rv-page-contact .contact-container * { margin: 0; padding: 0; box-sizing: border-box; }

.rv-page-contact .contact-container {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--dark-bg);
  color: var(--light-text);
  font-family: var(--rv-font);
}

.rv-page-contact .contact-section { width: 100%; max-width: 100%; padding: 3rem 1rem; }

@media (min-width: 1536px) { .rv-page-contact .contact-section { padding: 3rem 10%; } }
@media (min-width: 1280px) and (max-width: 1535px) { .rv-page-contact .contact-section { padding: 3.5rem 8%; } }
@media (min-width: 1024px) and (max-width: 1279px) { .rv-page-contact .contact-section { padding: 3rem 5%; } }
@media (min-width: 768px)  and (max-width: 1023px) { .rv-page-contact .contact-section { padding: 2.5rem 3%; } }

.rv-page-contact .cyan-text { color: var(--cyan); }
.rv-page-contact .hero-section {
  text-align: center;
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.rv-page-contact .hero-section h1,
.rv-page-contact h2 { font-family: var(--rv-font); font-weight: 700; }

.rv-page-contact .contact-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) { .rv-page-contact .contact-grid { grid-template-columns: repeat(3, 1fr); } }

.rv-page-contact .contact-card {
  background-color: var(--card-bg);
  border: 1px solid var(--grey-accent);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.rv-page-contact .contact-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rv-page-contact .contact-card:hover::before { opacity: 0.8; }
.rv-page-contact .contact-card:hover {
  background-color: var(--card-hover);
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(var(--rv-accent-rgb), 0.2);
}

.rv-page-contact .contact-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.5rem;
  stroke: var(--cyan);
  fill: none;
  stroke-width: 2;
  transition: all 0.3s ease;
}
.rv-page-contact .contact-card:hover .contact-icon { transform: scale(1.1); stroke: #ffffff; }

.rv-page-contact .contact-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--light-text); }
.rv-page-contact .contact-info  { color: var(--grey-text); margin-bottom: 1rem; font-size: 0.9rem; }

.rv-page-contact .contact-action {
  color: var(--cyan);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.rv-page-contact .contact-action:hover { color: #ffffff; text-decoration: underline; }

.rv-page-contact .calendar-section,
.rv-page-contact .map-section {
  background-color: var(--card-bg);
  border: 1px solid var(--grey-accent);
  border-radius: 0.75rem;
  margin: 3rem auto;
  max-width: 1000px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.rv-page-contact .calendar-section { padding: 3rem 2rem; }
.rv-page-contact .map-section      { padding: 1rem; }

.rv-page-contact .calendar-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.8;
}
.rv-page-contact .calendar-section:hover {
  background-color: var(--card-hover);
  box-shadow: 0 15px 30px rgba(var(--rv-accent-rgb), 0.15);
  transform: translateY(-5px);
}
.rv-page-contact .map-section:hover { box-shadow: 0 10px 25px rgba(var(--rv-accent-rgb), 0.1); }

.rv-page-contact .map-container {
  border-radius: 0.5rem;     /* original was missing the colon here */
  overflow: hidden;
  height: 500px;
  border: 2px solid var(--grey-accent);
}
.rv-page-contact .map-container iframe {
  width: 100%; height: 100%; border: none;
  filter: grayscale(100%) invert(92%) contrast(83%);
}

.rv-page-contact .office-hours {
  background-color: var(--grey-accent);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  margin-top: 1.5rem;
  text-align: center;
}
.rv-page-contact .office-hours h4 { color: var(--cyan); font-weight: 600; margin-bottom: 0.5rem; }
.rv-page-contact .office-hours p  { color: var(--grey-text); font-size: 0.9rem; }

/* ---- responsive. The original had two malformed @media blocks here
        ( "@media (max-width: 768px) .map-section {...} {" ) which meant
        none of these rules ever applied. Rewritten correctly. ---- */
@media (max-width: 768px) {
  .rv-page-contact .contact-grid    { grid-template-columns: 1fr; }
  .rv-page-contact .contact-section { padding: 2rem 0.75rem; }
  .rv-page-contact .calendar-section { padding: 2rem 1.5rem; }
  .rv-page-contact .map-section     { padding: 0 0.5rem; margin: 3rem 0; }
  .rv-page-contact .map-container   { height: 400px; }
  .rv-page-contact h1 { font-size: 2rem; }
  .rv-page-contact h2 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .rv-page-contact .contact-section  { padding: 1.5rem 1rem; }
  .rv-page-contact .contact-card     { padding: 1.5rem 1rem; }
  .rv-page-contact .calendar-section { padding: 1.5rem 1rem; }
  .rv-page-contact .map-section      { padding: 1rem 0.5rem; margin: 3rem 0; }
}

/* ---- the handful of Tailwind utilities the markup uses ---- */
.rv-page-contact .text-5xl { font-size: 3rem; line-height: 1; }
.rv-page-contact .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.rv-page-contact .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.rv-page-contact .text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
.rv-page-contact .text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.rv-page-contact .font-bold { font-weight: 700; }
.rv-page-contact .mb-6 { margin-bottom: 1.5rem; }
.rv-page-contact .mb-4 { margin-bottom: 1rem; }
.rv-page-contact .mt-4 { margin-top: 1rem; }
.rv-page-contact .mt-12 { margin-top: 3rem; }
.rv-page-contact .mr-2 { margin-right: 0.5rem; }
.rv-page-contact .mx-auto { margin-left: auto; margin-right: auto; }
.rv-page-contact .max-w-3xl { max-width: 48rem; }
.rv-page-contact .text-center { text-align: center; }
.rv-page-contact .leading-relaxed { line-height: 1.625; }
.rv-page-contact .text-gray-400 { color: var(--grey-text); }
.rv-page-contact .text-gray-300 { color: #d1d5db; }
.rv-page-contact .text-cyan-400 { color: var(--cyan); }
.rv-page-contact .fill-current { fill: currentColor; }
.rv-page-contact .inline { display: inline; }
.rv-page-contact .w-4 { width: 1rem; }
.rv-page-contact .h-4 { height: 1rem; }
.rv-page-contact .underline { text-decoration: underline; }
.rv-page-contact .transition-colors { transition: color 0.2s ease; }
.rv-page-contact .hover\:text-white:hover { color: #fff; }