/* =========================
   CONTACT PAGE — page-specific styles
   Lava-lamp background + multi-stripe underline (matches Classes & Staff)
========================= */

/* Fallback tokens in case styles.css isn't loaded first */
:root{
  --green:#0abe67; --red:#fd2f18; --yellow:#fece00; --purple:#97448c; --blue:#1888de;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:#fff; }

/* ---------- Lava-lamp background (static, page-wide) ---------- */
main::before{
  content:"";
  position:fixed;
  inset:-25vmax;                /* bleed so it fills on scroll */
  z-index:-1;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow)0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple)0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28;
  background-color:#fff;        /* fallback base */
  pointer-events:none;
}

/* ---------- Hero ---------- */
.page-hero{
  position:relative;
  overflow:hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background: transparent !important;    /* clear any previous gradient */
}

/* Kill any old decorative layers so lava lamp shows cleanly */
.page-hero::before,
.page-hero::after,
.page-hero .container::before{
  content:none !important;
}

/* Title + multi-stripe underline (center-grow) */
.page-hero .title{
  font-weight:900; letter-spacing:.2px; text-shadow:0 6px 18px rgba(0,0,0,.08);
}
.page-hero .title::after{
  content:"";
  display:block;
  height:6px;
  width:160px;                   /* grows from center */
  max-width:40vw;
  margin:.55rem auto 0;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  background:
    linear-gradient(90deg,
      var(--green) 0 20%,
      var(--red) 20% 40%,
      var(--yellow) 40% 60%,
      var(--purple) 60% 80%,
      var(--blue) 80% 100%);
  transform: scaleX(0);
  transform-origin: center;
  animation: underlineGrow .7s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes underlineGrow{ to{ transform: scaleX(1); } }

.page-hero .sub{ color:#4b5563; }

/* ---------- Contact grid & cards ---------- */
.contact-wrap{ padding: 2rem 0 3rem; }
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr; /* left | right */
  gap:1.5rem;
}

.card-edge{
  background:#fff;
  border:0;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:1.25rem;
}

/* Left: details + map */
.contact-card{ margin-bottom:1rem; }
.inline-row{
  display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap;
  margin:.2rem 0;
}
.inline-row strong{ min-width:78px; }
.map-link{ text-decoration:none; }
.map-link:hover{ text-decoration:underline; }

.map-wrap{ border-radius:16px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,.08); }
.map-embed{ width:100%; height:360px; border:0; display:block; }

/* Right: form */
.form-title{
  font-weight:800;
  margin:.25rem 0 1rem;
  text-align:center;
}
.contact-form .btn-primary{ background:var(--green); border-color:var(--green); }
.contact-form .btn-primary:hover{ background:#079d55; border-color:#079d55; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .page-hero .title::after{ animation:none!important; transform:none!important; }
}

/* Responsive */
@media (max-width: 991.98px){
  .contact-grid{ grid-template-columns:1fr; }
  .map-embed{ height:300px; }
}
/* --- Bring the Contact header down from the fixed nav --- */

/* Fallbacks if styles.css didn't set this */
:root{ --nav-h: 96px; }                 /* desktop nav height */
@media (max-width: 991.98px){
  :root{ --nav-h: 72px; }               /* tablet/phone nav height */
}

/* Override just the TOP padding on the hero */
.page-hero{
  /* navbar height + extra breathing room */
  padding-top: calc(var(--nav-h, 72px) + clamp(24px, 5.5vw, 48px));
}

/* Phones: a touch more room + respect notches */
@media (max-width: 575.98px){
  .page-hero{
    padding-top: calc(var(--nav-h, 72px) + 32px + env(safe-area-inset-top, 0));
  }
}