/* ============================================================
   Site 2.0, the contact globe

   Layout for the globe and the location card beside it. The card is
   never hidden behind the interaction: the globe brings it forward,
   it does not gate it. A care provider's phone number must not
   depend on a hover, a script, or a pointer that exists.
   ============================================================ */

.contact-stage{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;
  margin-bottom:clamp(2.5rem,6vh,4.5rem);
}

@media (min-width:900px){
  .contact-stage{ grid-template-columns:minmax(280px,44%) 1fr; }
}

/* ---------- the globe ---------- */

.globe-hold{
  position:relative;
  aspect-ratio:1;
  width:100%;
  max-width:min(440px, 78vw);
  margin-inline:auto;
  border-radius:50%;
}

.globe-canvas{
  display:block; width:100%; height:100%;
  /* The planet sits on the paper on its own shadow. No dish behind it: a
     backing plate reads as a smudge on a light ground. */
  filter:drop-shadow(0 18px 34px rgba(10,26,47,.28));
}

/* The mark, positioned by globe.js from the real coordinates. It is an SVG
   overlay rather than shader work so it stays crisp at any size, and so its
   position is arithmetic rather than a guess. */
.globe-mark{
  position:absolute; left:0; top:0;
  width:52px; height:60px;
  transform-origin:26px 34px;
  pointer-events:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
.gm-halo{ fill:rgba(242,167,45,.20); stroke:rgba(242,167,45,.55); stroke-width:1.1; }
.gm-head{ fill:var(--amber); }
.gm-body{ stroke:var(--amber); stroke-width:4.2; stroke-linecap:round; fill:none; }
.gm-rule{ stroke:var(--amber); stroke-width:3; stroke-linecap:round; fill:none; opacity:.9; }

/* A slow pulse so the eye finds the location without it shouting. */
@media (prefers-reduced-motion:no-preference){
  .gm-halo{ animation:gm-pulse 3.4s ease-in-out infinite; transform-origin:20px 21px; }
}
@keyframes gm-pulse{
  0%,100%{ transform:scale(1);   opacity:.85; }
  50%    { transform:scale(1.18); opacity:.45; }
}

/* No WebGL: the details are all still there, the planet simply is not. */
.globe-nowebgl .globe-canvas,
.globe-nowebgl .globe-mark{ display:none; }

/* The real map. It only exists once somebody asks for it: globe.js creates
   the iframe on the first open, so reading the page never announces the
   visitor to a third party. */
.globe-map{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  opacity:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--glass-line);
  transition:opacity .6s linear;
}
.globe-map iframe{ width:100%; height:100%; border:0; display:block; }

/* The whole globe is one control. It is a real button so it is reachable by
   keyboard and announced properly, and it carries the focus ring. */
.globe-hit{
  position:absolute; inset:0;
  border:0; padding:0; margin:0;
  background:none; border-radius:50%;
  cursor:pointer;
}
.globe-hit:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px;
}

/* A quiet invitation, and it goes away once you have accepted it. */
.globe-hold::after{
  content:'Hover to see the map';
  position:absolute; left:50%; bottom:-2.1rem; translate:-50% 0;
  font:500 var(--t-xs)/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.contact-stage.is-open .globe-hold::after{ opacity:0; }

@media (pointer:coarse){
  .globe-hold::after{ content:'Tap to see the map'; }
}

/* ---------- the location card ---------- */

.contact-panel{
  position:relative;
  padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-radius:4px;
  /* Legible from the start. The interaction only lifts it. */
  transition:transform .7s var(--ease), box-shadow .7s var(--ease),
             background-color .7s var(--ease);
}

@media (min-width:900px) and (pointer:fine){
  .contact-stage.globe-ready .contact-panel{ transform:translateX(8px); }
  .contact-stage.is-open .contact-panel{
    transform:translateX(0);
    background:var(--paper);
    box-shadow:0 18px 44px rgba(10,26,47,.12);
  }
}

.contact-panel h3{ margin-bottom:1.2rem; }

/* The card reads as a map pin card: a rule down the left in brand amber,
   which is a fill and so exempt from the text contrast rule. */
.contact-panel::before{
  content:''; position:absolute; left:0; top:clamp(1.4rem,3vw,2.2rem); bottom:clamp(1.4rem,3vw,2.2rem);
  width:3px; background:var(--amber); border-radius:3px;
  opacity:0; transition:opacity .6s var(--ease);
}
.contact-stage.is-open .contact-panel::before{ opacity:1; }

.contact-panel .btn{ margin-top:1.4rem; }

@media (prefers-reduced-motion:reduce){
  .contact-panel,
  .contact-stage.globe-ready .contact-panel{ transform:none; transition:none; }
  .contact-panel::before{ opacity:1; }
  .globe-hold::after{ display:none; }
}