:root {
  --cm-omap-page: #f5f0e6;
  --cm-omap-panel: #faf6ee;
  --cm-omap-panel-alt: #f0e8d4;
  --cm-omap-surface: #fff;
  --cm-omap-chip: #fff;
  --cm-omap-image-bg: #f5f0e8;
  --cm-omap-field-bg: #faf6ee;
  --cm-omap-chrome: #1a1510;
  --cm-omap-chrome-alt: #241d14;
  --cm-omap-gold: #c9a654;
  --cm-omap-gold-soft: #e8d5a0;
  --cm-omap-chrome-muted: #7a6a55;
  --cm-omap-chrome-label: #a89070;
  --cm-omap-gold-rgb: 201, 166, 84;
  --cm-omap-ink: #2c2416;
  --cm-omap-ink-list: #3a2e22;
  --cm-omap-ink-muted: #666;
  --cm-omap-placeholder: #b0a08a;
  --cm-omap-search-icon: #9a8468;
  --cm-omap-on-type: #fff;
  --cm-omap-border: #cfc4ad;
  --cm-omap-border-soft: #ddd5c0;
  --cm-omap-border-list: #ede6d4;
  --cm-omap-border-card: #ede8dd;
  --cm-omap-border-frame: #c9b897;
  --cm-omap-scroll-thumb-hover: #a89070;
  --cm-omap-control: #3a2e22;
  --cm-omap-control-hover: #1a1510;
  --cm-omap-paper-ink-rgb: 70, 48, 28;
  --cm-omap-paper-opacity: 1;
  --cm-omap-compass-ink: #4a3520;
  --cm-omap-compass-paper: #f0e2bd;
  --cm-omap-rubric: #8b1e14;
  --cm-omap-seal: #8b1e14;
  --cm-omap-seal-light: #b03a2c;
  --cm-omap-seal-deep: #5e1009;
  --cm-omap-seal-ink: #f6e9c6;
  --cm-omap-seal-halo-rgb: 139, 30, 20;
  --cm-omap-militar: #b4504c;
  --cm-omap-militar-text: #b4504c;
  --cm-omap-militar-legend: #b4504c;
  --cm-omap-civil: #5aab3a;
  --cm-omap-civil-text: #5aab3a;
  --cm-omap-civil-legend: #7ec259;
  --cm-omap-religios: #163ded;
  --cm-omap-religios-text: #163ded;
  --cm-omap-religios-legend: #163ded;
  --cm-omap-altres: #a028b8;
  --cm-omap-altres-text: #a028b8;
  --cm-omap-altres-legend: #a028b8;
  --cm-omap-militar-tint: #fff8f8;
  --cm-omap-civil-tint: #f6fbf4;
  --cm-omap-religios-tint: #f4f5ff;
  --cm-omap-altres-tint: #fdf4ff;
  --cm-omap-shadow-rgb: 44, 36, 22;
  --cm-omap-scrim-rgb: 0, 0, 0;
}

/* Dark palette. Inert on its own: nothing changes until something sets
   data-theme="dark" on <html>. On the WordPress pages that is the theme's own
   toggle, and this stylesheet just follows along; the standalone pages never
   set it, so they stay light.

   The header and filter bar keep their light-mode values on purpose — they were
   already dark chrome (#1a1510 / #241d14) and re-darkening them would flatten
   the only contrast the standalone page has.

   The zoom and fullscreen buttons sit on --cm-omap-panel (see "Parchment
   map"), so their ink follows the text ramp like everything else. */
:root[data-theme="dark"] {
  --cm-omap-page:        #1b1613;
  --cm-omap-panel:       #231c17;
  --cm-omap-panel-alt:   #1b1613;
  --cm-omap-surface:     #231c17;
  --cm-omap-image-bg:    #2a221c;
  --cm-omap-field-bg:    #2f2720;

  --cm-omap-ink:         #e7dccd;
  --cm-omap-ink-list:    #e7dccd;
  --cm-omap-ink-muted:   #b8ab99;
  --cm-omap-placeholder: #968879;
  --cm-omap-search-icon: #b09a80;

  /* The Ruta circle stays light: it carries a dark glyph image we don't ship a
     light variant of, so darkening the disc would hide the icon inside it. */
  --cm-omap-chip:        #f0e8dc;

  --cm-omap-border:       #4a3d33;
  --cm-omap-border-soft:  #3a3028;
  --cm-omap-border-list:  #302823;
  --cm-omap-border-card:  #332a24;
  --cm-omap-border-frame: #4a3d33;
  --cm-omap-scroll-thumb-hover: #6b5a48;
  --cm-omap-control:       #e7dccd;
  --cm-omap-control-hover: #fff;

  /* Multiplied over tiles already dimmed below, the paper sheet would turn
     the ground to mud, so it is only a trace here. The compass swaps to a
     gold rose that reads on the dark ground. */
  --cm-omap-paper-opacity: 0.45;
  --cm-omap-compass-ink:   #e8d5a0;
  --cm-omap-compass-paper: #5a4630;
  --cm-omap-rubric:        #f08b76;

  /* Type fills carry white text, so they are tuned for two constraints at once:
     >= 4.5:1 against the white label, and >= 3:1 against the card behind them.
     Militar already satisfied both; the other three had to move. */
  --cm-omap-militar:  #b4504c;
  --cm-omap-civil:    #3f7c28;
  --cm-omap-religios: #4a66e0;
  --cm-omap-altres:   #ab38c2;

  /* The same four colours used as ink instead of as fill, so they invert. */
  --cm-omap-militar-text:  #f08b76;
  --cm-omap-civil-text:    #8fd06a;
  --cm-omap-religios-text: #9fb4ff;
  --cm-omap-altres-text:   #dc8fee;
  --cm-omap-militar-legend:  #f08b76;
  --cm-omap-civil-legend:    #8fd06a;
  --cm-omap-religios-legend: #9fb4ff;
  --cm-omap-altres-legend:   #dc8fee;

  --cm-omap-militar-tint:  #2e1f1c;
  --cm-omap-civil-tint:    #1f2a1b;
  --cm-omap-religios-tint: #1e2233;
  --cm-omap-altres-tint:   #2a1c2e;
}

/* The OSM tiles are third-party rasters baked light, so on a dark page the map
   turns into a lightbox. Dim and desaturate them slightly rather than inverting:
   an inverted map stops looking like a map, and the marker icons — which are not
   tiles — keep their full brightness and stand out against the calmer ground.
   The sepia is the light mode's parchment tint (see "Parchment map"); a filter
   declaration replaces the other wholesale, so it is repeated here. */
:root[data-theme="dark"] .leaflet-tile {
  filter: sepia(0.5) saturate(0.6) brightness(0.68) contrast(1.05);
}

/* Leaflet draws the popup tip (the little arrow under the card) itself, in
   white. The card above it is ours and goes dark, so the tip has to follow or
   it reads as a white notch. */
:root[data-theme="dark"] .leaflet-popup-tip {
  background: var(--cm-omap-surface);
}

/* ── Page base ── */

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

/* Page chrome, for the standalone pages only (web/index.html and the demo).
   This whole stylesheet also ships into catalunya-medieval-plugins and is
   loaded on the WordPress map templates, where an unscoped `body` rule wins
   over the theme's own — it set the background, colour and font for the
   entire site on every page carrying a map. Same opt-in class as the flex
   layout below. */
body.omap-page {
  margin: 0;
  padding: 0;
  background: var(--cm-omap-page);
  font-family: 'Droid Serif', Georgia, serif;
  color: var(--cm-omap-ink);

  /* A fixed height, not a minimum: with min-height the open list (thousands
     of items) stretched #container to its full length, and Leaflet centred
     the map tens of thousands of pixels below the fold. */
  display: flex;
  flex-direction: column;
  height: 100vh;
}

body.omap-page #site-header,
body.omap-page #omap-filters {
  flex-shrink: 0;
}

body.omap-page #container {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* ── Site header ── */

#site-header {
  background: var(--cm-omap-chrome);
  border-bottom: 2px solid var(--cm-omap-gold);
  padding: 0 20px;
  height: 58px;
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

#title-h1 {
  font-family: 'Cinzel', 'Droid Serif', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cm-omap-gold-soft);
  margin: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

#title-h4 {
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 10px;
  font-weight: 400;
  font-style: italic;
  color: var(--cm-omap-chrome-muted);
  margin: 0;
  letter-spacing: 0.04em;
  line-height: 1;
}

#title-h4 a {
  color: var(--cm-omap-gold);
  text-decoration: none;
}

#title-h4 a:hover { text-decoration: underline; }

.header-right { flex-shrink: 0; }


/* ── Comarca / edifici filter bar ── */

#omap-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  padding: 8px 24px;
  background: var(--cm-omap-chrome-alt);
  border-bottom: 1px solid var(--cm-omap-gold);
}

#omap-filters label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-omap-chrome-label);
}

#omap-filters select {
  min-width: 200px;
  padding: 5px 8px;
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 12px;
  color: var(--cm-omap-ink);
  background: var(--cm-omap-field-bg);
  border: 1px solid var(--cm-omap-border);
  border-radius: 4px;
}

#omap-filters select:disabled { opacity: 0.55; }

#omap-filters button {
  padding: 6px 14px;
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 11.5px;
  color: var(--cm-omap-gold-soft);
  background: transparent;
  border: 1px solid var(--cm-omap-gold);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

#omap-filters button:hover { background: rgba(var(--cm-omap-gold-rgb), 0.15); }

#omap-filters-current {
  margin-left: auto;
  align-self: center;
  font-size: 11px;
  font-style: italic;
  color: var(--cm-omap-gold);
}

.header-logo {
  height: 32px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.header-logo-link:hover .header-logo { opacity: 1; }


/* ── Legend ── */

#legend {
  padding: 10px 24px;
}

ul.legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding: 0;
  margin: 0;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  list-style: none;
}

.legend span {
  border: 1px solid rgba(var(--cm-omap-scrim-rgb), 0.15);
  display: inline-block;
  width: 12px;
  height: 12px;
  min-width: 12px;
  border-radius: 2px;
  margin: 0;
  padding: 0;
}

.legend .legend-militar { background-color: var(--cm-omap-militar-legend); }
.legend-text-militar, .legend-text-militar a { color: var(--cm-omap-militar-legend); }

.legend .legend-civil { background-color: var(--cm-omap-civil-legend); }
.legend-text-civil, .legend-text-civil a { color: var(--cm-omap-civil-legend); }

.legend .legend-religios { background-color: var(--cm-omap-religios-legend); }
.legend-text-religios, .legend-text-religios a { color: var(--cm-omap-religios-legend); }

.legend .legend-altres { background-color: var(--cm-omap-altres-legend); }
.legend-text-altres, .legend-text-altres a { color: var(--cm-omap-altres-legend); }

.legend-bold { font-weight: 700; }


/* ── Map container ── */

#container {
  display: flex;
  height: calc(100vh - 60px);
}

/* WordPress embedded wrapper — centered with breathing room */
.cm-map-outer {
  margin: 8px 24px 32px;
}

.cm-map-container {
  display: flex;
  height: 660px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--cm-omap-border-frame);
  box-shadow: 0 4px 28px rgba(var(--cm-omap-shadow-rgb), 0.13), 0 1px 4px rgba(var(--cm-omap-shadow-rgb), 0.08);
}

#omap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Category icons are one control each: when they don't fit the map height,
   wrap them into extra columns towards the left instead of being clipped. */
.leaflet-top.leaflet-right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  max-height: 100%;
}

/* The map of a page about one building, on a phone: a 320 px wide map cannot
   spare a column of twelve category buttons, a list toggle and a 120 px logo.
   The category buttons fold behind the «Capes» button (assets/js: the manager
   adds .cm-omap--entry to the map and toggles .cm-omap--layers-open), the list
   toggle and the logo go, and the map is shorter and as wide as its column.
   In fullscreen, where there is room, everything is back. */
.cm-omap-layers { display: none; }

/* The host asked for foldLayers: the same fold as above, at any width, and the
   show/hide-all button folds with the category buttons. */
.cm-omap--folded:not(:fullscreen) .cm-omap-layers { display: block; }
.cm-omap--folded:not(:fullscreen):not(.cm-omap--layers-open) .leaflet-control:has(> img[id^="img-"]),
.cm-omap--folded:not(:fullscreen):not(.cm-omap--layers-open) .leaflet-control:has(> #visibleBuildings) { display: none; }

@media (max-width: 600px) {
  .cm-map-outer:has(.cm-omap--entry) { margin: 8px 0 24px; }
  .cm-map-container:has(> .cm-omap--entry) { height: 420px; }

  .cm-omap--entry:not(:fullscreen) .cm-omap-layers { display: block; }
  .cm-omap--entry:not(:fullscreen):not(.cm-omap--layers-open) .leaflet-control:has(> img[id^="img-"]) { display: none; }
  .cm-omap--entry:not(:fullscreen) .leaflet-control:has(> #llistat) { display: none; }
  .cm-omap--entry:not(:fullscreen) .leaflet-control:has(> img[src*="logoCM"]) { display: none; }
}

.leaflet-control-fullscreen a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--cm-omap-control);
}

.leaflet-control-fullscreen a:hover { color: var(--cm-omap-control-hover); }
.cm-omap-locate a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--cm-omap-control);
}

.cm-omap-locate a:hover { color: var(--cm-omap-control-hover); }

.cm-omap-search a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--cm-omap-control);
}

.cm-omap-search a:hover { color: var(--cm-omap-control-hover); }
.cm-omap-locate a.cm-omap-locate--busy { opacity: 0.5; cursor: progress; }

/* Said beside the button, over the map; the parchment panel keeps it readable. */
.cm-omap-locate { position: relative; }

.cm-omap-locate-message {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  width: max-content;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--cm-omap-border-frame);
  border-radius: 4px;
  background-color: var(--cm-omap-panel);
  color: var(--cm-omap-ink);
  font: 12px/1.35 'Droid Serif', Georgia, serif;
  box-shadow: 0 1px 4px rgba(var(--cm-omap-shadow-rgb), 0.25);
}

.cm-omap-locate-message[hidden] { display: none; }

.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-popup-tip-container { margin-top: -1px; }


/* ── Parchment map ──
   The OSM tiles are modern and loud: yellow roads, orange motorways, green
   woods that fight the four building colours. Toning them to sepia and laying
   a paper sheet over them (the .cm-omap-paper pane, between the tiles and the
   comarques/markers — see _setPaperOverlay()) turns the ground into an old
   chart and leaves the markers as the only saturated thing on it.

   Leaflet's own stylesheet loads in a different order on the standalone page
   and on WordPress, so each override below carries one extra type selector or
   class to win on specificity rather than on order. */

div.leaflet-container { background: var(--cm-omap-page); }

.leaflet-tile {
  filter: sepia(0.5) saturate(0.7) hue-rotate(-6deg) contrast(0.95);
}

/* Multiply only darkens: the grain and stains tint the tiles, and white
   would leave them untouched. */
.leaflet-paper-pane {
  z-index: 250;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--cm-omap-paper-opacity);
}

.cm-omap-paper {
  position: absolute;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(var(--cm-omap-paper-ink-rgb), 0.38) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27220%27%20height=%27220%27%3E%3Cfilter%20id=%27g%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.85%27%20numOctaves=%273%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%200.42%200%200%200%200%200.3%200%200%200%200%200.16%200%200%200%200.22%200%27/%3E%3C/filter%3E%3Crect%20width=%27220%27%20height=%27220%27%20filter=%27url%28%23g%29%27/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271000%27%20height=%271000%27%3E%3Cfilter%20id=%27s%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.005%27%20numOctaves=%273%27%20seed=%277%27%20stitchTiles=%27stitch%27/%3E%3CfeColorMatrix%20values=%270%200%200%200%200.55%200%200%200%200%200.4%200%200%200%200%200.2%200%200%200%200.5%20-0.12%27/%3E%3C/filter%3E%3Crect%20width=%271000%27%20height=%271000%27%20filter=%27url%28%23s%29%27/%3E%3C/svg%3E"),
    #f6ecd4;
  /* The sheet never moves with the map, so the stains are stretched over it
     once: repeated, the low-frequency noise shows a seam at every tile edge. */
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: 100% 100%, auto, cover;
}

/* Double ruled border, as on an engraved map */
.cm-omap-paper::before,
.cm-omap-paper::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(var(--cm-omap-paper-ink-rgb), 0.7);
  border-radius: 3px;
}
.cm-omap-paper::before { inset: 6px; border-width: 2px; }
.cm-omap-paper::after  { inset: 11px; opacity: 0.6; }

/* Compass rose — decorative, so it never takes a click */
.cm-omap-compass {
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(var(--cm-omap-shadow-rgb), 0.35));
}
.cm-omap-compass svg { display: block; overflow: visible; }
.cm-omap-compass-ring { fill: none; stroke: var(--cm-omap-compass-ink); stroke-width: 1; }
.cm-omap-compass-ring-inner { stroke-width: 0.5; }
.cm-omap-compass-dark { fill: var(--cm-omap-compass-ink); }
.cm-omap-compass-light {
  fill: var(--cm-omap-compass-paper);
  stroke: var(--cm-omap-compass-ink);
  stroke-width: 0.6;
}
.cm-omap-compass-north {
  font: 700 14px 'Cinzel', 'Droid Serif', Georgia, serif;
  fill: var(--cm-omap-rubric);
}

@media (max-width: 600px) {
  .cm-omap-compass { display: none; }
}

/* Clusters as wax seals. Leaflet.markercluster's default bubbles are
   green/yellow/orange, which read as the civil colour and as a traffic light.
   The seal keeps the same red in both themes: 7.6:1 against its ink. */
.leaflet-container .marker-cluster-small,
.leaflet-container .marker-cluster-medium,
.leaflet-container .marker-cluster-large {
  background-color: rgba(var(--cm-omap-seal-halo-rgb), 0.28);
}

.leaflet-container .marker-cluster-small div,
.leaflet-container .marker-cluster-medium div,
.leaflet-container .marker-cluster-large div {
  background: radial-gradient(circle at 35% 30%, var(--cm-omap-seal-light), var(--cm-omap-seal) 60%, var(--cm-omap-seal-deep));
  box-shadow: inset 0 0 0 1.5px var(--cm-omap-gold), 0 1px 3px rgba(var(--cm-omap-scrim-rgb), 0.35);
  color: var(--cm-omap-seal-ink);
  font: 700 12px 'Cinzel', 'Droid Serif', Georgia, serif;
}

.leaflet-container .marker-cluster-large div { font-size: 11px; }

/* Zoom and fullscreen buttons on parchment instead of Leaflet's white */
.leaflet-container div.leaflet-bar {
  border: 1px solid var(--cm-omap-border-frame);
  box-shadow: 0 1px 4px rgba(var(--cm-omap-shadow-rgb), 0.25);
}

.leaflet-container .leaflet-bar a {
  background-color: var(--cm-omap-panel);
  color: var(--cm-omap-control);
  border-bottom-color: var(--cm-omap-border-soft);
}

.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus {
  background-color: var(--cm-omap-panel-alt);
  color: var(--cm-omap-control-hover);
}

.leaflet-container div.leaflet-control-attribution {
  background-color: var(--cm-omap-panel);
  color: var(--cm-omap-ink-muted);
  font: italic 10px 'Droid Serif', Georgia, serif;
  border-top-left-radius: 4px;
}

.leaflet-container .leaflet-control-attribution a { color: var(--cm-omap-ink); }

.leaflet-popup-content-wrapper {
  box-shadow: 0 0 0 1px var(--cm-omap-border-frame), 0 3px 14px rgba(var(--cm-omap-shadow-rgb), 0.35);
}


/* ── Marker popup card ── */

.catmed-maps-marker {
  cursor: default;
  width: 280px;
  position: relative;
  font: 400 12px 'Droid Serif', Georgia, serif;
  background: var(--cm-omap-surface);
}

.catmed-maps-marker-header { position: relative; }

.catmed-maps-marker-image {
  height: 160px;
  overflow: hidden;
  background: var(--cm-omap-image-bg);
}

.catmed-maps-marker-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catmed-maps-marker-title-wrapper {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.catmed-maps-marker-link-image {
  text-decoration: none !important;
  border: none !important;
  display: block;
  width: 100%;
}

.catmed-maps-marker-link-image:hover .catmed-maps-marker-title {
  text-decoration: underline;
}

.catmed-maps-marker-title {
  color: var(--cm-omap-on-type);
  font-size: 13px;
  font-family: 'Droid Serif', Georgia, serif;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(var(--cm-omap-scrim-rgb), 0.25);
}

.catmed-maps-marker-directions {
  position: relative;
  max-width: 80px;
  min-width: 70px;
  text-align: center;
}

.catmed-maps-marker-directions-button {
  text-decoration: none !important;
  border: none !important;
  opacity: .7;
}

.catmed-maps-marker-directions-button:hover { opacity: 1; }

.catmed-maps-marker-directions-label {
  color: var(--cm-omap-on-type);
  font-size: 13px;
}

.catmed-maps-marker-directions-icon {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background-color: var(--cm-omap-chip);
  position: absolute;
  bottom: -36px;
  right: 50%;
  transform: translate(50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 6px 0 rgba(var(--cm-omap-scrim-rgb), 0.3);
}

.catmed-maps-marker-content { background: var(--cm-omap-surface); }

.catmed-maps-marker-info {
  padding: 10px 14px 12px;
  background: var(--cm-omap-surface);
  border-top: 1px solid var(--cm-omap-border-card);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Category badge */
.catmed-maps-marker-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-family: 'Droid Serif', Georgia, serif;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--cm-omap-on-type);
  padding: 2px 9px 3px;
  border-radius: 10px;
}
.catmed-maps-marker-badge.militar  { background-color: var(--cm-omap-militar); }
.catmed-maps-marker-badge.civil    { background-color: var(--cm-omap-civil); }
.catmed-maps-marker-badge.religios { background-color: var(--cm-omap-religios); }
.catmed-maps-marker-badge.altres   { background-color: var(--cm-omap-altres); }

/* Address row */
.catmed-maps-marker-info-item-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cm-omap-ink-muted);
}

.catmed-maps-marker-info-item-icon {
  flex-shrink: 0;
  fill: var(--cm-omap-militar);
}

/* CTA link */
.catmed-maps-marker-cta {
  display: block;
  font-size: 11px;
  font-family: 'Droid Serif', Georgia, serif;
  font-weight: 700;
  text-align: right;
  text-decoration: none !important;
  border: none !important;
  letter-spacing: 0.02em;
  padding-top: 2px;
  border-top: 1px solid var(--cm-omap-border-card) !important;
}
.catmed-maps-marker-cta.militar  { color: var(--cm-omap-militar-text); background: transparent; }
.catmed-maps-marker-cta.civil    { color: var(--cm-omap-civil-text); background: transparent; }
.catmed-maps-marker-cta.religios { color: var(--cm-omap-religios-text); background: transparent; }
.catmed-maps-marker-cta.altres   { color: var(--cm-omap-altres-text); background: transparent; }
.catmed-maps-marker-cta:hover    { text-decoration: underline !important; }

/* Host controls from catalunyaOmapConfig.popupActions; the host styles them. */
.catmed-maps-marker-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}


/* ── Building type colours — only title wrapper and badge ── */

.catmed-maps-marker-title-wrapper.militar,
.catmed-maps-marker-badge.militar  { background-color: var(--cm-omap-militar); }

.catmed-maps-marker-title-wrapper.civil,
.catmed-maps-marker-badge.civil    { background-color: var(--cm-omap-civil); }

.catmed-maps-marker-title-wrapper.religios,
.catmed-maps-marker-badge.religios { background-color: var(--cm-omap-religios); }

.catmed-maps-marker-title-wrapper.altres,
.catmed-maps-marker-badge.altres   { background-color: var(--cm-omap-altres); }


/* ── Sidebar ── */

#secondaryDiv {
  width: 280px;
  flex-shrink: 0;
  background: var(--cm-omap-panel);
  border-left: 1px solid var(--cm-omap-border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Search */
.search-wrapper {
  position: relative;
  padding: 10px 12px;
  background: var(--cm-omap-panel-alt);
  border-bottom: 1px solid var(--cm-omap-border-soft);
  flex-shrink: 0;
}

.search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  color: var(--cm-omap-search-icon);
  pointer-events: none;
}

input#search-list,
input#search-llista {
  width: 100%;
  background: var(--cm-omap-surface);
  border: 1px solid var(--cm-omap-border);
  border-radius: 4px;
  padding: 7px 10px 7px 30px;
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 11.5px;
  color: var(--cm-omap-ink);
  outline: none;
  margin: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input#search-list::placeholder,
input#search-llista::placeholder { color: var(--cm-omap-placeholder); font-style: italic; }

input#search-list:focus,
input#search-llista:focus {
  border-color: var(--cm-omap-gold);
  box-shadow: 0 0 0 2px rgba(var(--cm-omap-gold-rgb), 0.18);
}

/* List */
#list,
#llista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
}

#list::-webkit-scrollbar,
#llista::-webkit-scrollbar { width: 5px; }
#list::-webkit-scrollbar-track,
#llista::-webkit-scrollbar-track { background: var(--cm-omap-panel-alt); }
#list::-webkit-scrollbar-thumb,
#llista::-webkit-scrollbar-thumb { background: var(--cm-omap-border-frame); border-radius: 3px; }
#list::-webkit-scrollbar-thumb:hover,
#llista::-webkit-scrollbar-thumb:hover { background: var(--cm-omap-scroll-thumb-hover); }

#map-list,
#mapLlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

#map-list li,
#mapLlist li {
  display: block;
  padding: 8px 14px 8px 17px;
  font-family: 'Droid Serif', Georgia, serif;
  font-size: 11.5px;
  color: var(--cm-omap-ink-list);
  background: var(--cm-omap-panel);
  border-bottom: 1px solid var(--cm-omap-border-list);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-left-color 0.12s, padding-left 0.12s;
  line-height: 1.4;
}

#map-list li:last-child,
#mapLlist li:last-child { border-bottom: none; }

/* A building's other names, under its title when the search matched them */
#map-list li .catmed-maps-list-other-names {
  display: block;
  font-size: 10.5px;
  font-style: italic;
  color: var(--cm-omap-ink-muted);
}

#map-list li .catmed-maps-list-other-names[hidden] { display: none; }

/* Category headers */
#map-list li.header,
#mapLlist li.header {
  font-family: 'Cinzel', 'Droid Serif', Georgia, serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cm-omap-on-type);
  padding: 6px 14px;
  cursor: default;
  border-bottom: none;
  border-left: 3px solid rgba(var(--cm-omap-scrim-rgb), 0.2);
}

/* Header colors per type */
#map-list li.castell.header, #map-list li.muralles.header,
#map-list li.torre.header, #map-list li.epoca-carlina.header,
#mapLlist li.castell.header, #mapLlist li.muralles.header,
#mapLlist li.torre.header, #mapLlist li.epoca-carlina.header {
  background: var(--cm-omap-militar);
}

#map-list li.casa-forta.header, #map-list li.palau.header,
#map-list li.pont.header, #map-list li.torre-colomer.header,
#mapLlist li.casa-forta.header, #mapLlist li.palau.header,
#mapLlist li.pont.header, #mapLlist li.torre-colomer.header {
  background: var(--cm-omap-civil);
}

#map-list li.basilica.header, #map-list li.catedral.header,
#map-list li.ermita.header, #map-list li.esglesia.header,
#map-list li.monestir.header, #map-list li.esglesia-fortificada.header,
#mapLlist li.basilica.header, #mapLlist li.catedral.header,
#mapLlist li.ermita.header, #mapLlist li.esglesia.header,
#mapLlist li.monestir.header, #mapLlist li.esglesia-fortificada.header {
  background: var(--cm-omap-religios);
}

#map-list li.altres-llocs-dinteres.header,
#mapLlist li.altres-llocs-dinteres.header {
  background: var(--cm-omap-altres);
}

/* Item hover — left accent per type */
#map-list li.castell:hover:not(.header), #map-list li.muralles:hover:not(.header),
#map-list li.torre:hover:not(.header), #map-list li.epoca-carlina:hover:not(.header),
#mapLlist li.castell:hover:not(.header), #mapLlist li.muralles:hover:not(.header),
#mapLlist li.torre:hover:not(.header), #mapLlist li.epoca-carlina:hover:not(.header) {
  background: var(--cm-omap-militar-tint); border-left-color: var(--cm-omap-militar); padding-left: 20px;
}

#map-list li.casa-forta:hover:not(.header), #map-list li.palau:hover:not(.header),
#map-list li.pont:hover:not(.header), #map-list li.torre-colomer:hover:not(.header),
#mapLlist li.casa-forta:hover:not(.header), #mapLlist li.palau:hover:not(.header),
#mapLlist li.pont:hover:not(.header), #mapLlist li.torre-colomer:hover:not(.header) {
  background: var(--cm-omap-civil-tint); border-left-color: var(--cm-omap-civil); padding-left: 20px;
}

#map-list li.basilica:hover:not(.header), #map-list li.catedral:hover:not(.header),
#map-list li.ermita:hover:not(.header), #map-list li.esglesia:hover:not(.header),
#map-list li.monestir:hover:not(.header), #map-list li.esglesia-fortificada:hover:not(.header),
#mapLlist li.basilica:hover:not(.header), #mapLlist li.catedral:hover:not(.header),
#mapLlist li.ermita:hover:not(.header), #mapLlist li.esglesia:hover:not(.header),
#mapLlist li.monestir:hover:not(.header), #mapLlist li.esglesia-fortificada:hover:not(.header) {
  background: var(--cm-omap-religios-tint); border-left-color: var(--cm-omap-religios); padding-left: 20px;
}

#map-list li.altres-llocs-dinteres:hover:not(.header),
#mapLlist li.altres-llocs-dinteres:hover:not(.header) {
  background: var(--cm-omap-altres-tint); border-left-color: var(--cm-omap-altres); padding-left: 20px;
}