/* Europe Expat Livability Framework — widget styles (v1.1.1)
   Self-contained palette that works on light AND dark WordPress themes
   without relying on prefers-color-scheme. Supports explicit
   data-elf-theme="dark" or data-elf-theme="light" override. */

.elf-widget {
  /* Defaults: auto-detect via prefers-color-scheme but force readability
     by using semi-transparent panels inside the widget. */
  --elf-bg: #ffffff;
  --elf-panel: #f8f9fa;
  --elf-fg: #111418;
  --elf-fg-strong: #000;
  --elf-muted: #5a6471;
  --elf-border: #d1d5db;
  --elf-accent: #0d7a3d;
  --elf-accent-fg: #ffffff;
  --elf-danger: #b91c1c;
  --elf-radius: 8px;
  --elf-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

  color: var(--elf-fg);
  background: var(--elf-bg);
  border: 1px solid var(--elf-border);
  border-radius: var(--elf-radius);
  box-shadow: var(--elf-shadow);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  /* Always render in the widget's own typography stack — don't inherit
     site fonts that may have low-contrast colors baked in via :root. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark theme — applies via shortcode override OR via auto-detection of dark site. */
.elf-widget[data-elf-theme="dark"],
.elf-widget--dark {
  --elf-bg: #0f1419;
  --elf-panel: #161b22;
  --elf-fg: #e6edf3;
  --elf-fg-strong: #ffffff;
  --elf-muted: #8b949e;
  --elf-border: #30363d;
  --elf-accent: #3aa64a;
  --elf-accent-fg: #ffffff;
  --elf-danger: #f85149;
  --elf-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Auto dark mode based on OS — only applies if no explicit theme is set. */
@media (prefers-color-scheme: dark) {
  .elf-widget:not([data-elf-theme="light"]) {
    --elf-bg: #0f1419;
    --elf-panel: #161b22;
    --elf-fg: #e6edf3;
    --elf-fg-strong: #ffffff;
    --elf-muted: #8b949e;
    --elf-border: #30363d;
    --elf-accent: #3aa64a;
    --elf-accent-fg: #ffffff;
    --elf-danger: #f85149;
  }
}

.elf-widget *,
.elf-widget *::before,
.elf-widget *::after { box-sizing: border-box; }

/* All text inside the widget inherits widget colors (defends against
   page CSS forcing dark text on dark widget backgrounds). */
.elf-widget,
.elf-widget h1, .elf-widget h2, .elf-widget h3, .elf-widget h4,
.elf-widget p, .elf-widget li, .elf-widget td, .elf-widget th,
.elf-widget label, .elf-widget span, .elf-widget div,
.elf-widget button, .elf-widget select, .elf-widget input {
  color: var(--elf-fg);
}

/* Header / filters --------------------------------------------------- */
.elf-widget__header {
  padding: 16px;
  border-bottom: 1px solid var(--elf-border);
  background: var(--elf-panel);
}

.elf-widget__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.elf-widget__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--elf-fg-strong) !important;
}

.elf-widget__updated {
  color: var(--elf-muted);
  font-size: 12px;
}

.elf-widget__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.elf-widget__filter-group { display: flex; flex-direction: column; gap: 6px; }
.elf-widget__filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--elf-muted);
  font-weight: 600;
}

.elf-widget__select {
  padding: 6px 10px;
  border: 1px solid var(--elf-border);
  border-radius: 6px;
  background: var(--elf-bg);
  color: var(--elf-fg);
  font-size: 13px;
  min-width: 160px;
  font-family: inherit;
}

.elf-widget__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.elf-widget .elf-chip {
  padding: 6px 12px !important;
  border: 1px solid var(--elf-border) !important;
  background: var(--elf-bg) !important;
  color: var(--elf-fg) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  font-family: inherit !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
.elf-widget .elf-chip:hover {
  background: var(--elf-panel) !important;
  border-color: var(--elf-accent) !important;
}
.elf-widget .elf-chip.elf-chip--active,
.elf-widget .elf-chip--active {
  background: var(--elf-accent) !important;
  color: #ffffff !important;
  border-color: var(--elf-accent) !important;
}
.elf-chip:focus-visible {
  outline: 2px solid var(--elf-accent);
  outline-offset: 2px;
}

.elf-widget__view-toggle {
  margin-left: auto;
  display: flex;
  border: 1px solid var(--elf-border);
  border-radius: 6px;
  overflow: hidden;
}
.elf-widget .elf-view-btn {
  background: var(--elf-bg) !important;
  color: var(--elf-fg) !important;
  border: 0 !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  font-family: inherit !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.elf-widget .elf-view-btn + .elf-view-btn { border-left: 1px solid var(--elf-border) !important; }
.elf-widget .elf-view-btn:hover { background: var(--elf-panel) !important; }
.elf-widget .elf-view-btn.elf-view-btn--active,
.elf-widget .elf-view-btn--active {
  background: var(--elf-accent) !important;
  color: #ffffff !important;
}

/* Body --------------------------------------------------------------- */
.elf-widget__body { position: relative; background: var(--elf-bg); }

.elf-widget__map {
  width: 100% !important;
  min-height: 400px;
  background: var(--elf-panel);
  position: relative;
}

/* Leaflet container hardening — prevent WordPress themes from collapsing the map. */
.elf-widget .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 400px !important;
  background: var(--elf-panel) !important;
  font-family: inherit !important;
  outline: none;
  position: relative !important;
  overflow: hidden !important;
}
/* Tile pane visibility — defeats theme rules like img { max-width: 100% }.
   Note: SVG marker paths need pointer-events:auto so clicks work — do NOT
   pin position:absolute on the SVG itself or markers can't be clicked. */
.elf-widget .leaflet-tile,
.elf-widget .leaflet-tile img,
.elf-widget .leaflet-marker-icon,
.elf-widget .leaflet-marker-shadow,
.elf-widget .leaflet-tile-container,
.elf-widget .leaflet-zoom-box,
.elf-widget .leaflet-image-layer {
  max-width: none !important;
  max-height: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Ensure SVG marker overlay accepts clicks. */
.elf-widget .leaflet-overlay-pane svg,
.elf-widget .leaflet-overlay-pane path.leaflet-interactive,
.elf-widget .leaflet-overlay-pane circle.leaflet-interactive {
  pointer-events: auto !important;
  cursor: pointer;
}
/* v1.1.8 fix that prevents WordPress theme img { max-width: 100% } from
   collapsing Leaflet panes to 0 width. v1.1.9 refinement: do NOT force
   width/height on .leaflet-overlay-pane or .leaflet-marker-pane — that breaks
   SVG marker click hit-testing. Just defeat the max-width constraint. */
.elf-widget .leaflet-map-pane,
.elf-widget .leaflet-tile-pane,
.elf-widget .leaflet-shadow-pane,
.elf-widget .leaflet-tooltip-pane,
.elf-widget .leaflet-popup-pane,
.elf-widget .leaflet-layer,
.elf-widget .leaflet-tile-container {
  max-width: none !important;
  max-height: none !important;
}
.elf-widget .leaflet-overlay-pane,
.elf-widget .leaflet-marker-pane {
  max-width: none !important;
  max-height: none !important;
  pointer-events: none;
}
.elf-widget .leaflet-overlay-pane > * {
  pointer-events: auto;
}

/* v1.1.20: Tooltip box. Without these rules the theme's container width
   collapses the tooltip to a thin column with overflowing text. */
.elf-widget .leaflet-tooltip {
  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 4px 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  pointer-events: none !important;
}
/* Hide tooltips on touch devices — tap opens the detail panel below the map
   already, and on mobile the tooltip can't be dismissed cleanly. */
@media (hover: none) and (pointer: coarse) {
  .elf-widget .leaflet-tooltip { display: none !important; }
}

/* Force the tile image dimensions to 256x256 (Leaflet's standard tile size).
   Browser test showed inline style="width:256px" gets computed to 0 because
   theme img { max-width: 100% } evaluates against the (broken) 0-width parent.
   Setting !important here defeats the theme rule. */
.elf-widget .leaflet-tile {
  width: 256px !important;
  height: 256px !important;
  min-width: 256px !important;
  min-height: 256px !important;
  max-width: 256px !important;
  max-height: 256px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Match for the tile-loaded variant too (Leaflet adds class on load). */
.elf-widget img.leaflet-tile,
.elf-widget img.leaflet-tile-loaded {
  width: 256px !important;
  height: 256px !important;
  min-width: 256px !important;
  min-height: 256px !important;
  max-width: 256px !important;
  max-height: 256px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Parent body must allow the map to actually render. */
.elf-widget .elf-widget__body {
  overflow: visible !important;
  position: relative;
}
.elf-widget .leaflet-control-attribution { background: rgba(255,255,255,0.85); color: #222; font-size: 11px; }
.elf-widget .leaflet-control-attribution a { color: #0d7a3d; }

.elf-loading,
.elf-error,
.elf-empty {
  padding: 32px;
  text-align: center;
  color: var(--elf-muted);
}

.elf-error { color: var(--elf-danger); }

/* Leaflet popup overrides: ensure popups render light even on dark site themes */
.elf-widget .leaflet-popup-content-wrapper {
  background: #ffffff;
  color: #111418;
}
.elf-widget .leaflet-popup-tip { background: #ffffff; }
.elf-widget .leaflet-popup-content { margin: 12px 14px; }
.elf-widget .leaflet-popup-content * { color: inherit; }

/* Popup -------------------------------------------------------------- */
.elf-popup { font-size: 13px; line-height: 1.45; color: #111418; }
.elf-popup__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.elf-popup__title { font-weight: 700; font-size: 15px; color: #000; }
.elf-popup__score {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  min-width: 40px;
  text-align: center;
}
.elf-popup__framing {
  margin: 0 0 10px 0;
  color: #4b5563;
  font-style: italic;
  font-size: 12.5px;
}

.elf-popup__why {
  margin: 8px 0 10px 0;
  padding: 8px 10px;
  background: #f0f7f3;
  border-left: 3px solid #0d7a3d;
  border-radius: 4px;
}
.elf-popup__why strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0d7a3d;
  margin-bottom: 4px;
}
.elf-popup__why ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #1f2937;
}
.elf-popup__why li { margin: 2px 0; }

.elf-popup__scores { margin: 8px 0; padding: 0; }
.elf-popup__score-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}
.elf-popup__score-row dt { color: #6b7280; font-size: 11.5px; }
.elf-popup__score-row dd { margin: 0; display: flex; align-items: center; gap: 6px; color: #111418; }

.elf-bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.elf-bar__fill {
  height: 100%;
  background: #0d7a3d;
}
.elf-bar__val { font-size: 11px; color: #6b7280; min-width: 32px; }

.elf-popup__meta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 12px;
  color: #1f2937;
}
/* v1.1.18: every meta child spans full width by default so inserted blocks
   (like the cost breakdown card) don't get squeezed into a half-column. */
.elf-popup__meta > div,
.elf-popup__meta > .elf-popup__cost-breakdown { grid-column: 1 / -1; }

.elf-popup__tags { margin-top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.elf-tag {
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: #374151;
}

.elf-popup__sources {
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
}
.elf-popup__sources a { color: #0d7a3d; text-decoration: none; }
.elf-popup__sources a:hover { text-decoration: underline; }

/* Table -------------------------------------------------------------- */
.elf-widget__table { padding: 0; background: var(--elf-bg); }
.elf-table__wrap { overflow-x: auto; }
.elf-table__el {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--elf-bg);
}
.elf-table__el th,
.elf-table__el td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--elf-border);
  text-align: left;
  vertical-align: middle;
  color: var(--elf-fg);
}
.elf-table__el thead {
  background: var(--elf-panel);
  position: sticky;
  top: 0;
  z-index: 1;
}
.elf-table__el thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--elf-muted);
  font-weight: 600;
}
.elf-rank {
  color: var(--elf-muted);
  font-weight: 700;
  width: 36px;
}
.elf-overall {
  font-weight: 700;
  font-size: 15px;
}
.elf-table__country {
  color: var(--elf-muted);
  font-size: 11px;
}
.elf-table__el tbody tr:hover { background: var(--elf-panel); }
.elf-widget .elf-table__row { cursor: pointer; }
.elf-widget .elf-table__row:focus-visible {
  outline: 2px solid var(--elf-accent);
  outline-offset: -2px;
}

/* Detail panel that opens when a table row is clicked. */
.elf-table__detail {
  margin: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--elf-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #111418;
  position: relative;
}
.elf-table__detail-inner { position: relative; }
.elf-table__detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ffffff !important;
  border: 1px solid var(--elf-border) !important;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  color: #6b7280 !important;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 3;
}
.elf-table__detail-close:hover { color: #111418 !important; }
/* v1.1.17: reserve room on the right edge of the popup header so the score
   pill doesn't slide under the close button. */
.elf-table__detail .elf-popup__header,
.elf-map__detail .elf-popup__header {
  padding-right: 48px;
}
/* Dark widget theme — detail panel stays light for readability. */
.elf-widget[data-elf-theme="dark"] .elf-table__detail,
.elf-widget--dark .elf-table__detail {
  background: #ffffff;
  color: #111418;
}

/* v1.1.15: Marker-click detail panel — appears below the map, same look
   as the table-row detail. Reuses popup styling for the content. */
.elf-map__detail {
  display: none;
  margin: 16px;
  padding: 16px 16px 12px 16px;
  background: #ffffff;
  border: 1px solid var(--elf-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #111418;
  position: relative;
}
.elf-map__detail-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffffff !important;
  border: 1px solid var(--elf-border) !important;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  color: #6b7280 !important;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 2;
}
.elf-map__detail-close:hover { color: #111418 !important; }
/* Reuse popup styles inside the marker detail panel — keep text readable. */
.elf-map__detail .elf-popup__title { font-size: 16px; font-weight: 600; color: #111418; }
.elf-map__detail .elf-popup__header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-right: 36px; }
.elf-map__detail .elf-popup__score { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13px; }
.elf-map__detail .elf-popup__framing { color: #4b5563; font-size: 13px; margin: 8px 0 12px 0; }
/* v1.1.19: bullets were rendering OUTSIDE the green panel because the
   override used margin-left (pushes list outside) instead of padding-left
   (keeps bullets inside). Fix: use padding-left so bullets stay contained. */
.elf-map__detail .elf-popup__why ul { margin: 4px 0 12px 0; padding: 0 0 0 20px; list-style-position: outside; }
.elf-table__detail .elf-popup__why ul { margin: 4px 0 12px 0; padding: 0 0 0 20px; list-style-position: outside; }
.elf-map__detail .elf-popup__why li { font-size: 13px; color: #4b5563; margin-bottom: 2px; }
.elf-map__detail .elf-popup__scores { margin: 12px 0; }
.elf-map__detail .elf-popup__meta { font-size: 13px; color: #374151; margin: 12px 0; display: grid; gap: 4px; }
.elf-map__detail .elf-popup__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.elf-map__detail .elf-popup__sources { font-size: 12px; color: #6b7280; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--elf-border); }
.elf-map__detail .elf-popup__sources a { color: var(--elf-accent, #0d7a3d); }

/* v1.1.16: Cost breakdown panel (rent + non-rent split). */
.elf-popup__cost-breakdown {
  margin: 8px 0 12px 0;
  padding: 10px 12px;
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 12px;
}
.elf-popup__cost-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: #374151;
}
.elf-popup__cost-line span:first-child { color: #6b7280; }
.elf-popup__cost-line span:last-child { font-weight: 600; color: #111418; }
.elf-popup__cost-evidence {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #d1d5db;
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
  line-height: 1.4;
}
.elf-popup__score-note {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: #6b7280;
  cursor: help;
  vertical-align: middle;
}
.elf-popup__score-note:hover { color: var(--elf-accent, #0d7a3d); }
.elf-widget[data-elf-theme="dark"] .elf-map__detail,
.elf-widget--dark .elf-map__detail {
  background: #ffffff;
  color: #111418;
}

/* Footer / methodology ---------------------------------------------- */
.elf-widget__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--elf-border);
  background: var(--elf-panel);
  font-size: 12px;
  color: var(--elf-fg);
}
.elf-methodology-toggle {
  background: transparent;
  border: 0;
  color: var(--elf-accent);
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  font-family: inherit;
}
.elf-methodology { margin-top: 10px; color: var(--elf-fg); }
.elf-methodology h3 { margin: 14px 0 6px 0; font-size: 13px; font-weight: 600; color: var(--elf-fg-strong); }
.elf-methodology h3:first-child { margin-top: 0; }
.elf-methodology p { margin: 6px 0; color: var(--elf-fg); }
.elf-sources-list { margin: 6px 0 10px 18px; padding: 0; font-size: 12px; line-height: 1.6; color: var(--elf-fg); }
.elf-sources-list li { margin: 2px 0; color: var(--elf-fg); }
.elf-sources-list a { color: var(--elf-accent); text-decoration: none; }
.elf-sources-list a:hover { text-decoration: underline; }
.elf-disclaimer { color: var(--elf-muted); font-size: 11.5px; padding-top: 8px; border-top: 1px dashed var(--elf-border); margin-top: 12px; }

/* Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .elf-widget__title { font-size: 16px; }
  .elf-widget__filters { gap: 12px; }
  .elf-widget__view-toggle { margin-left: 0; }
  /* CRITICAL: pin a FIXED height for the map on mobile so Leaflet measures
     the real container size before init. min-height alone doesn't work —
     the container can still be larger or jump around during init, breaking
     tile origin computation. Fixed height = stable measurement = correct tiles. */
  .elf-widget__map {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }
  .elf-widget .leaflet-container {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }
  .elf-table__el th, .elf-table__el td { padding: 8px 6px; font-size: 12px; }
  /* Hide less critical columns on mobile */
  .elf-table__el thead th:nth-child(4),
  .elf-table__el thead th:nth-child(5),
  .elf-table__el thead th:nth-child(6),
  .elf-table__el thead th:nth-child(7),
  .elf-table__el thead th:nth-child(8),
  .elf-table__el tbody td:nth-child(4),
  .elf-table__el tbody td:nth-child(5),
  .elf-table__el tbody td:nth-child(6),
  .elf-table__el tbody td:nth-child(7),
  .elf-table__el tbody td:nth-child(8) {
    display: none;
  }
}