/* langmap.css — language polygon map island (MapLibre GL embed).
   Linked by pages/languages/show.html via the {{$ styles }} block. */

.langmap-wrap {
  margin-top: 1.5rem;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid #e7e5e4;
}
html.dark .langmap-wrap { border-color: #44403c; }

.langmap-container {
  width: 100%;
  height: 320px;
}
@media (min-width: 768px) { .langmap-container { height: 420px; } }

/* Full-page variant used by the standalone world-map page */
.langmap-fullpage {
  /* 4rem nav + 10rem banner + 1rem banner-margin = 15rem above <main> */
  height: calc(100vh - 15rem);
  height: calc(100dvh - 15rem);
  min-height: 400px;
  border-radius: 0;
  /* Break out of <main>'s 1200px max-width constraint for true full-bleed */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.langmap-wrap > .langmap-fullpage { border-radius: 0; }

/* MapLibre attribution — keep compact + styled to match site */
.langmap-container .maplibregl-ctrl-attrib {
  font-size: .65rem;
  background: rgba(255,255,255,.85);
}
html.dark .langmap-container .maplibregl-ctrl-attrib {
  background: rgba(28,25,23,.85);
  color: #e7e5e4;
}
html.dark .langmap-container .maplibregl-ctrl-attrib a { color: #a8a29e; }

/* Nav control (zoom +/-) */
.langmap-container .maplibregl-ctrl-group {
  border-radius: .375rem;
  overflow: hidden;
}
html.dark .langmap-container .maplibregl-ctrl-group {
  background: #1c1917;
  border-color: #44403c;
}
html.dark .langmap-container .maplibregl-ctrl-group button {
  background-color: #1c1917;
  color: #e7e5e4;
}
html.dark .langmap-container .maplibregl-ctrl-group button:hover {
  background-color: #292524;
}

/* ── Full-page world map: language aside ────────────────────────────────────── */

.langmap-section {
  position: relative;
}

.langmap-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  animation: langmap-slide-in .22s ease;
}
.langmap-sidebar[hidden] { display: none; }
@keyframes langmap-slide-in {
  from { transform: translateX(100%); opacity: .5; }
  to   { transform: translateX(0);    opacity: 1; }
}
html.dark .langmap-sidebar {
  background: #1c1917;
  box-shadow: -4px 0 24px rgba(0,0,0,.4);
}

.langmap-sidebar-hero {
  position: relative;
  padding: 2rem 1.5rem 1.25rem;
  flex-shrink: 0;
}
.langmap-sidebar-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.15);
  color: inherit;
  opacity: .8;
  transition: opacity .12s, background .12s;
}
.langmap-sidebar-close:hover { opacity: 1; background: rgba(0,0,0,.25); }

.langmap-sidebar-name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.langmap-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2rem;
}

.langmap-sidebar-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .85rem;
  margin: 0 0 1.5rem;
}
.langmap-sidebar-details dt {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #78716c;
  white-space: nowrap;
  padding-top: .12em;
}
html.dark .langmap-sidebar-details dt { color: #a8a29e; }
.langmap-sidebar-details dd {
  margin: 0;
  font-size: .9rem;
  color: #1c1917;
}
html.dark .langmap-sidebar-details dd { color: #e7e5e4; }
.langmap-sidebar-details code {
  font-family: ui-monospace, monospace;
  font-size: .82em;
}

.langmap-sidebar-cta {
  display: inline-block;
  padding: .55rem 1.1rem;
  border-radius: .4rem;
  background: #2563eb;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s;
}
.langmap-sidebar-cta:hover { background: #1d4ed8; }
html.dark .langmap-sidebar-cta { background: #3b82f6; }
html.dark .langmap-sidebar-cta:hover { background: #2563eb; }

@media (max-width: 600px) {
  .langmap-sidebar {
    width: 100%;
    max-width: 100%;
    top: auto;
    bottom: 0;
    height: 55%;
    box-shadow: 0 -4px 24px rgba(0,0,0,.2);
    animation: langmap-slide-up .22s ease;
  }
  @keyframes langmap-slide-up {
    from { transform: translateY(100%); opacity: .5; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}