/*
 * App layout on top of the CGIAR.org design system (cgiar-ui.css).
 * Colors, radii and spacing come from semantic tokens only, and type from
 * h-typo-* classes in the markup. No literal hex values, no drop shadows.
 */

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
/* Transparent and edge-to-edge: the page is embedded in a CGIAR.org grid
   cell, which supplies the background and the outer spacing. */
html { color-scheme: light; }
html, body { background: transparent; }
body {
  margin: 0;
  color: var(--brand-body-fg);
  font-family: var(--typography-font-families-font-1), Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: .2rem solid var(--body-outline-color-fg); outline-offset: .2rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.explorer { margin: 0; padding: 0; }

/* ---------- Controls (cms-search-filter, as on cgiar.org/publications) ---------- */

.controls { display: grid; gap: var(--s7); }
.controls__search { width: 100%; margin: 0 auto; }
@media (min-width: 768px) { .controls__search { width: 50%; } }
.m-search-field__input { width: 100%; }

.cms-search-filter-group { position: relative; }
.cms-search-filter-link {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.cms-search-filter-link:disabled { cursor: progress; opacity: var(--button-disabled-opacity); }
.filter-dropdown { position: absolute; top: 100%; left: 0; z-index: 1000; }
.cms-search-filter-group__list { margin: 0; padding: 0; list-style: none; }
.cms-search-filter-group__item[hidden] { display: none; }
.cms-search-filter__tags[hidden] { display: none; }

@media (min-width: 1024px) {
  .cms-search-filter__wrapper { padding-right: 12rem; }
}
@media (max-width: 767px) {
  .cms-search-filter__wrapper { grid-template-columns: 1fr; }
}

/* ---------- Count + view tabs ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin: var(--s7) 0 var(--s4);
}
.count { margin: 0; color: var(--color-foreground-subtle); }
.count strong { color: var(--color-foreground-emphasis); }

.tabs { display: inline-flex; gap: var(--s2); }
.tab { gap: var(--s2); }
.tab .a-button__icon { margin: 0; }
.tab[aria-selected="true"] { background: var(--button-primary-default-bg); color: var(--button-primary-default-fg); }
.tab[aria-selected="false"] { background: var(--button-secondary-default-bg); color: var(--button-secondary-default-fg); }
.tab[aria-selected="false"]:hover { background: var(--button-secondary-hover-bg); }

/* ---------- Map (light, matching the CGIAR APAC map) ---------- */

.map-frame {
  position: relative;
  --color-map-water: var(--color-non-brand-placeholder);
  --color-map-land: var(--color-solid-grey-0);
  --color-map-coast: var(--color-solid-grey-40);
  --color-map-shaded: var(--color-dim-30);
  overflow: hidden;
  background: var(--color-map-water);
  border: .1rem solid var(--color-border-default);
  border-radius: var(--dimension-border-radius-card);
}
.map {
  height: 52rem;
  background: var(--color-map-water);
  font-family: var(--typography-font-families-font-1), Arial, sans-serif;
}
.map-foot { margin-top: var(--s3); }
.global-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); margin: 0; }
.map-note { margin: var(--s1) 0 0; color: var(--color-foreground-subtle); }

.leaflet-container .leaflet-control-attribution { font-size: 1rem; }
.leaflet-container .leaflet-control-attribution a { color: var(--color-foreground-solid-accent-default); }
.leaflet-bar { border: .1rem solid var(--color-border-default) !important; border-radius: var(--dimension-border-radius-button-s) !important; box-shadow: none !important; }
.leaflet-bar a {
  width: 3.6rem !important; height: 3.6rem !important; line-height: 3.6rem !important;
  background: var(--color-background-solid-neutral-strong);
  color: var(--color-foreground-emphasis);
  border-bottom-color: var(--color-border-default) !important;
}
.leaflet-bar a:hover { background: var(--color-background-solid-neutral-subtle); }
.leaflet-bar a:first-child { border-radius: var(--dimension-border-radius-button-s) var(--dimension-border-radius-button-s) 0 0 !important; }
.leaflet-bar a:last-child { border-radius: 0 0 var(--dimension-border-radius-button-s) var(--dimension-border-radius-button-s) !important; }

.pin { background: none; border: 0; }
.pin span {
  position: relative;
  display: grid; place-items: center;
  width: 3.8rem; height: 3.8rem;
  background: var(--color-foreground-solid-accent-default);
  border: .3rem solid var(--color-background-solid-neutral-strong);
  border-radius: 50%;
  color: var(--color-solid-grey-0);
  font-size: 1.4rem; font-weight: 700;
  transition: background-color .16s, transform .16s;
}
.leaflet-marker-icon.pin:hover span,
.leaflet-marker-icon.pin:focus-visible span,
.pin.is-active span { background: var(--color-foreground-solid-accent-strong); transform: scale(1.14); }
.leaflet-marker-icon.pin:focus-visible { outline: none; }
.leaflet-marker-icon.pin:focus-visible span { outline: .2rem solid var(--body-outline-color-fg); outline-offset: .2rem; }
.pin.is-active span::after {
  content: ""; position: absolute; inset: -.8rem; border-radius: 50%;
  border: .2rem solid var(--color-foreground-solid-accent-default);
  animation: pin-pulse 1.7s ease-out infinite;
}
@keyframes pin-pulse { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.leaflet-popup-content-wrapper {
  background: var(--color-background-solid-neutral-strong);
  color: var(--color-foreground-default);
  border: .1rem solid var(--color-border-default);
  border-radius: var(--dimension-border-radius-card);
  box-shadow: none;
}
.leaflet-popup-tip { background: var(--color-background-solid-neutral-strong); box-shadow: none; border: .1rem solid var(--color-border-default); }
.leaflet-popup-content { margin: var(--s4) var(--s5) var(--s3); }
.leaflet-container a.leaflet-popup-close-button { top: var(--s2); right: var(--s2); color: var(--color-foreground-subtle); }
.popup__place { margin: 0; }
.popup__count { margin: 0 0 var(--s2); color: var(--color-foreground-subtle); }
.popup__list { margin: 0; padding: 0; list-style: none; max-height: 28rem; overflow: auto; }
.popup__list li { padding: var(--s3) 0 var(--s1); border-top: 1px solid var(--color-border-default); }
.popup__type { display: block; margin-bottom: var(--s1); color: var(--color-foreground-solid-accent-default); text-transform: uppercase; }
.popup__title { margin: 0; }

/* ---------- Detail links ("View details") ---------- */

.link-button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------- List view ---------- */

.group + .group { margin-top: var(--s7); }
.group__title { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); color: var(--color-foreground-emphasis); }
.group__count { color: var(--color-foreground-subtle); }
.group__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-default); }
.group__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem 15rem auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.group__row-title { color: var(--color-foreground-emphasis); }
.group__row-meta { color: var(--color-foreground-subtle); }

/* ---------- Result cards (m-result, as on cgiar.org/governance) ---------- */

.results { margin-top: var(--s8); }
.results__title { margin: 0 0 var(--s6); color: var(--color-foreground-emphasis); }
.cms-search-result__items { margin: 0; padding: 0; list-style: none; }

.m-result { scroll-margin: var(--s6); }
.m-result:focus { outline: none; }
.m-result__meta { color: var(--tile-card-fg-overline); }
.m-result:hover .m-result__meta { color: inherit; }
.m-result__headline h3 { margin: 0; }
.m-result__text p { margin: 0; max-width: 90rem; }
.m-result__captions { flex-wrap: wrap; gap: var(--s1) var(--s4); }

/* The title link stretches over the whole card, so the card opens the
   primary link while the second link stays separately clickable. */
.m-result__primary { color: inherit; text-decoration: none; outline: none; }
.m-result__primary::after { content: ""; position: absolute; inset: 0; border-radius: var(--tile-card-border-radius); }
.m-result:has(.m-result__primary:focus-visible) .m-result__link { border-color: var(--body-outline-color-fg); outline: 1px solid var(--body-outline-color-fg); }
.m-result__tags { flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.m-result__second { position: relative; z-index: 1; margin-inline: 0; }
.m-result:hover .m-result__second { color: inherit; }
.m-result:hover .m-result__second:hover { color: var(--tile-card-hover-fg-link-hover); }
.m-result__icon { color: var(--tile-card-fg-icon); }
.m-result:hover .m-result__icon { color: inherit; }

.m-result.is-target .m-result__link { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 40% { border-color: var(--color-foreground-solid-accent-default); box-shadow: inset 0 0 0 .1rem var(--color-foreground-solid-accent-default); } 100% { border-color: var(--tile-card-stroke); box-shadow: none; } }

/* ---------- Loading state ---------- */

/* Spinner shaped like cgiar.org's cms-loader, colored with tokens. */
.cms-loader {
  display: block;
  width: 2.8rem; height: 2.8rem;
  border: .3rem solid var(--color-background-dim-neutral-default);
  border-top-color: var(--color-foreground-solid-accent-default);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.map-loading {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  background: var(--color-dim-white-60);
  color: var(--color-foreground-emphasis);
}
.map-loading[hidden] { display: none; }
.map-loading p { margin: 0; }

.m-result--skeleton .m-result__link { pointer-events: none; }
.skeleton {
  display: block;
  height: 1.2rem;
  background: var(--color-background-dim-neutral-default);
  border-radius: .4rem;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton--meta { width: 14rem; }
.skeleton--title { width: 60%; height: 2.2rem; }
.skeleton--caption { width: 24rem; }
.skeleton--text { width: 90%; }
.skeleton--text-short { width: 70%; margin-top: var(--s2); }
.skeleton--tag { width: 8rem; height: 2.4rem; }
@keyframes skeleton-pulse { 50% { opacity: .45; } }

/* ---------- Notices ---------- */

.notice { padding: var(--s7) 0; color: var(--color-foreground-subtle); }
.notice p { margin: 0 0 var(--s3); }

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
  .group__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); }
  .group__row > :not(.link-button) { grid-column: 1; }
  .group__row .link-button { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 767px) {
  .bar { flex-wrap: wrap; }
  .map { height: 38rem; }
  .group__row { display: block; padding: var(--s3) 0; }
  .group__row > * { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}