/* ================================================================
   RPC — CONTACT PAGE ONLY
   ================================================================ */

/* CONTACT PAGE */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; border-radius: var(--radius-asym); overflow: hidden; box-shadow: var(--shadow-lg); }
.contact-info-panel { background: var(--bg-dark); padding: 56px 48px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.contact-info-panel::before { content: ''; position: absolute; top: -100px; right: -100px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(196,0,79,0.22) 0%, rgba(196,0,79,0) 70%); pointer-events: none; }
.contact-info-panel-head { position: relative; z-index: 1; margin-bottom: 36px; }
.contact-info-panel-head .section-label.light { margin-bottom: 14px; }
.contact-info-panel-head h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; font-style: italic; color: #fff; line-height: 1.3; }
.contact-detail-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; margin-bottom: 36px; }
.contact-detail-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-detail-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 0; display: flex; align-items: center; justify-content: center; color: var(--accent-light); font-size: 18px; flex-shrink: 0; }
.contact-detail-row h6 { font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 5px; }
.contact-detail-row a, .contact-detail-row p { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.92); line-height: 1.5; }
.contact-detail-row .detail-sub { display: block; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.45); margin-top: 2px; }
.contact-info-panel-socials { position: relative; z-index: 1; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; gap: 10px; }
.contact-form-panel { background: var(--bg-white); padding: 56px 48px; }
.contact-form-panel .section-label { margin-bottom: 14px; }
.contact-form-panel h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 600; color: var(--text-dark); margin-bottom: 10px; }
.contact-form-panel .form-intro { font-size: 14.5px; color: var(--text-muted); margin-bottom: 30px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-map-wrap { margin-top: 48px; border-radius: var(--radius-asym); overflow: hidden; height: 380px; }
.contact-map-wrap iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ================================================================
   ADDON v1 — KIDS THEME (contact page)
   ================================================================ */

/* Layered playful glow blobs instead of single pink blob */
.contact-info-panel::before {
  background: radial-gradient(circle, rgba(194,0,58,0.28) 0%, rgba(194,0,58,0) 70%);
}
.contact-info-panel::after {
  content: '';
  position: absolute;
  bottom: -90px;
  left: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(234,179,8,0.16) 0%, rgba(234,179,8,0) 70%);
  pointer-events: none;
}

/* Star sparkle before the info-panel heading — nod to the Occupyhood badge */
.contact-info-panel-head h3::before {
  content: '★';
  display: inline-block;
  color: var(--gold);
  font-size: 0.7em;
  margin-right: 8px;
  transform: translateY(-2px) rotate(-8deg);
}

/* Rounded, colour-cycling detail icons with a friendly wiggle on hover */
.contact-detail-icon {
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, color 0.3s;
}
.contact-detail-row:nth-child(3n+1) .contact-detail-icon { color: var(--accent-light); }
.contact-detail-row:nth-child(3n+2) .contact-detail-icon { color: var(--gold); }
.contact-detail-row:nth-child(3n+3) .contact-detail-icon { color: var(--primary-light); }
.contact-detail-row:hover .contact-detail-icon {
  transform: rotate(-12deg) scale(1.1);
  background: rgba(255,255,255,0.14);
}

/* Bouncy, rounder form fields with playful multi-colour focus ring */
.form-control-rpc {
  border-radius: var(--radius-md);
  border-width: 2px;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.form-control-rpc:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(3,78,146,0.14);
  transform: translateY(-1px);
}
.contact-form-panel .btn-rpc { background: var(--gold); color: var(--text-dark); }
.contact-form-panel .btn-rpc:hover { background: var(--gold-dark); }
.contact-form-panel .btn-rpc .btn-icon { background: rgba(0,0,0,0.08); color: var(--text-dark); }

/* Gold dashed playful frame around the map */
.contact-map-wrap {
  border: 4px dashed var(--gold);
  padding: 6px;
  background: var(--bg-white);
}

/* ================================================================
   ADDON v2 — MORE VISIBLE KIDS ELEMENTS (clouds + stars)
   ================================================================ */

/* Floating clouds + twinkling stars drifting across the dark info panel */
.contact-info-panel {
  background-image:
    radial-gradient(ellipse 50px 22px at 78% 16%, rgba(255,255,255,0.14) 60%, transparent 61%),
    radial-gradient(ellipse 30px 16px at 72% 22%, rgba(255,255,255,0.14) 60%, transparent 61%),
    radial-gradient(ellipse 32px 16px at 86% 22%, rgba(255,255,255,0.14) 60%, transparent 61%),
    radial-gradient(ellipse 40px 18px at 14% 78%, rgba(255,255,255,0.10) 60%, transparent 61%),
    radial-gradient(ellipse 24px 14px at 9% 84%, rgba(255,255,255,0.10) 60%, transparent 61%),
    radial-gradient(circle 3px at 20% 20%, var(--gold) 90%, transparent 91%),
    radial-gradient(circle 2px at 60% 10%, #fff 90%, transparent 91%),
    radial-gradient(circle 2.5px at 92% 55%, var(--gold) 90%, transparent 91%);
  background-repeat: no-repeat;
  animation: contact-sky-drift 18s ease-in-out infinite alternate;
}
@keyframes contact-sky-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: -16px 8px, -16px 8px, -16px 8px, 14px -6px, 14px -6px, 0 4px, 0 -4px, 0 3px; }
}

/* Soft polka-dot texture on the light form panel for a playful paper feel */
.contact-form-panel {
  background-image: radial-gradient(circle 1.5px, rgba(194,0,58,0.08) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ================================================================
   RESPONSIVE — contact page decorative elements (had no breakpoints)
   ================================================================ */
@media (max-width: 768px) {
  .contact-info-panel-head h3 { font-size: 1.4rem; }
  .contact-detail-icon { width: 38px; height: 38px; font-size: 16px; }
  .contact-info-panel {
    background-image:
      radial-gradient(ellipse 34px 15px at 80% 14%, rgba(255,255,255,0.14) 60%, transparent 61%),
      radial-gradient(ellipse 20px 11px at 72% 20%, rgba(255,255,255,0.14) 60%, transparent 61%),
      radial-gradient(circle 3px at 20% 20%, var(--gold) 90%, transparent 91%),
      radial-gradient(circle 2px at 60% 10%, #fff 90%, transparent 91%);
  }
  .contact-map-wrap { border-width: 3px; padding: 4px; }
}

@media (max-width: 480px) {
  .contact-info-panel-head h3::before { display: none; }
  .contact-info-panel { background-image: none; animation: none; }
  .contact-detail-row { gap: 12px; }
  .contact-detail-row a, .contact-detail-row p { font-size: 13.5px; }
  .contact-form-panel { background-image: none; }
  .contact-map-wrap { height: 220px; border-width: 3px; }
}


/* ================================================================
   ABSOLUTE FINAL FIX — .contact-grid MUST stack on mobile.
   contact.css redefines this unconditionally at the top of the file
   (no media query), which was overriding common.css's collapse rule
   since contact.css loads after common.css. Must stay LAST in file.
   ================================================================ */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .contact-form-row { grid-template-columns: 1fr !important; }
}