/* =========================================================
   APPLICANT-MAP.CSS — InnovateHERs
   The interactive "where our applicants are from" map on
   scholarship.html. Extends scrapbook.css.
   ========================================================= */

/* ── Side-by-side: text left, map right (stacks on small screens) ── */
.amap-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 2.5rem;
  align-items: center;
}
.amap-intro { margin-bottom: 1.4rem; }
.amap-intro strong { color: #c45c78; }

/* ── View buttons (World / United States / ...) ── */
.amap-views { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.amap-view {
  font-family: 'Caveat', cursive;
  font-size: 1.1rem; font-weight: 700;
  color: #c45c78; background: #fff;
  border: 1.5px solid #f9a8c0; border-radius: 999px;
  padding: .3rem 1.1rem; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.amap-view:hover { background: #fce4ec; transform: rotate(-1deg); }
.amap-view[aria-pressed="true"] { background: #e36180; border-color: #e36180; color: #fff; }

/* ── Paper frame with washi tape ── */
.amap-frame {
  position: relative;
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 2px 6px 22px rgba(227,97,128,0.14), 0 1px 3px rgba(0,0,0,0.06);
}
.amap-frame::before, .amap-frame::after {
  content: '';
  position: absolute; top: -10px; z-index: 2;
  width: 64px; height: 20px;
  background: rgba(249,168,192,0.85);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.amap-frame::before { left: 8%;  transform: rotate(-4deg); }
.amap-frame::after  { right: 8%; transform: rotate(3deg); }

.amap-stage {
  position: relative;
  background: #fffafb;
  border: 1px solid #fbe0e8;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.amap-stage svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-x pan-y; }
.amap-stage svg:active { cursor: grabbing; }

.amap-land      { fill: #fce4ec; stroke: #f5bfd0; stroke-width: .6; vector-effect: non-scaling-stroke; }
.amap-land.has  { fill: #f9c6d5; }
.amap-states    { fill: none; stroke: #f3a9bf; stroke-width: .5; stroke-opacity: .7; vector-effect: non-scaling-stroke; }
.amap-dot       { fill: #e36180; stroke: #fff; cursor: pointer; transition: fill .15s; }
.amap-dot:hover, .amap-dot.active { fill: #b8325a; }

.amap-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive; font-size: 1.3rem; color: #c45c78;
}

/* ── Zoom buttons ── */
.amap-zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.amap-zoom button {
  width: 34px; height: 34px;
  font-family: 'Nunito', sans-serif; font-size: 1.2rem; font-weight: 800; line-height: 1;
  color: #e36180; background: #fff;
  border: 1.5px solid #f9a8c0; border-radius: 8px;
  cursor: pointer;
}
.amap-zoom button:hover { background: #fce4ec; }

.amap-hint {
  position: absolute; left: 12px; bottom: 12px;
  font-family: 'Caveat', cursive; font-size: 1rem; color: #b07a8a;
  background: rgba(255,255,255,0.85); border-radius: 6px; padding: .1rem .5rem;
  pointer-events: none; transition: opacity .3s;
}
.amap-hint.flash { color: #e36180; font-weight: 700; }

/* ── Tooltip ── */
.amap-tip {
  position: absolute; z-index: 5;
  pointer-events: none;
  font-family: 'Caveat', cursive; font-size: 1.15rem; font-weight: 700;
  color: #2d2d2d; background: #fffde7;
  border: 1.5px solid #f9e08a; border-radius: 4px;
  padding: .15rem .65rem;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
  transform: translate(-50%, calc(-100% - 12px)) rotate(-1deg);
  white-space: nowrap;
}
.amap-tip[hidden] { display: none; }

@media (max-width: 860px) {
  .amap-section { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 640px) {
  .amap-stage { aspect-ratio: 4 / 3; }
  .amap-hint  { display: none; }
}