/* spots-theme.css: everything visual (colours, fonts, pill look, hover effects, decorative spacing,
   transitions). Replaceable as a whole. A host stylesheet loaded after this one may also just
   override the --spots-* custom properties. Requires spots-core.css and spots-layout.css. */

:root {
  color-scheme: light dark;
  --spots-text-dark: #000000;
  --spots-text-light: #efefec;
  --spots-text: light-dark(var(--spots-text-dark), var(--spots-text-light));
  --spots-bg: light-dark(#ffffff, #121212);
  --spots-opacity-muted: 0.6;   /* secondary / dimmed content */
  --spots-opacity-dim: 0.4;     /* deemphasized or inactive UI element */
  --spots-callout-padding: 0.35rem 0.55rem;
}

.spotmap {
  border: none;
}

/* ── Filter UI ───────────────────────────────────────── */

.spot-filter-pill {
  font-family: inherit;
  font-weight: 600;
  border: 1px solid var(--spots-text);
  padding: var(--spots-pill-padding);
  line-height: var(--spots-pill-line-height);
  background: none;
  color: inherit;
  cursor: pointer;
}

.spot-filter-pill--modifier {
  font-style: italic;
  font-weight: normal;
}

.spot-filter-pill:hover {
  opacity: 1;
}

.spot-filter-pill-group {
  outline: 1px solid color-mix(in srgb, var(--spots-text) 20%, transparent);
}

.spot-filter-pill-group .spot-filter-pill + .spot-filter-pill {
  border-left: none;
}

.spot-filter-pill--active {
  outline: none;
  opacity: 1;
  background: var(--spots-text);
  color: var(--spots-bg);
}

.spot-filter-cooking-combiner-wrap {
  transition: grid-template-rows 0.25s ease;
}

.spot-filter-group .spot-filter-cooking-group-mode,
.spot-filter-cooking-combiner .spot-filter-mode {
  border: none;
}

.spot-filter-cooking-group-mode .spot-filter-mode-btn,
.spot-filter-cooking-combiner .spot-filter-mode-btn {
  padding: var(--spots-pill-padding);
  border: 1px solid var(--spots-text);
}

.spot-filter-cooking-group-mode .spot-filter-mode-btn + .spot-filter-mode-btn,
.spot-filter-cooking-combiner .spot-filter-mode-btn + .spot-filter-mode-btn {
  border-left: none;
}

.spot-filter-mode {
  border: 1px solid var(--spots-text);
}

.spot-filter-counts {
  font-size: 0.75rem;
  opacity: 0.5;
}

.spot-distance-input {
  font-family: inherit;
  font-size: 0.8rem;
  border: 1px solid var(--spots-text);
  background: none;
  color: inherit;
  padding: var(--spots-pill-padding);
  line-height: var(--spots-pill-line-height);
  opacity: var(--spots-opacity-muted);
}

.spot-distance-input:focus,
.spot-distance-input:not(:placeholder-shown) {
  opacity: 1;
  outline: none;
}

.spot-distance-input::placeholder {
  color: inherit;
}

.spot-distance-dropdown {
  border: 1px solid var(--spots-text);
  border-top: none;
  background: var(--spots-bg);
  color: inherit;
}

.spot-distance-dropdown li {
  font-size: 0.8rem;
  cursor: pointer;
}

.spot-distance-dropdown li:hover {
  background: var(--spots-text);
  color: var(--spots-bg);
}

.spot-distance-clear {
  font-family: inherit;
  font-size: 0.8rem;
  border: 1px solid var(--spots-text);
  border-left: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: var(--spots-pill-padding);
  line-height: var(--spots-pill-line-height);
  opacity: 0.3;
}

.spot-distance-clear:hover,
.spot-filter-sort:has(.spot-distance-input:not(:placeholder-shown)) .spot-distance-clear {
  opacity: 1;
  background: var(--spots-text);
  color: var(--spots-bg);
}

.spot-distance-badge {
  font-size: 0.875rem;
  padding: var(--spots-callout-padding);
  border-left: 3px solid var(--distance-color);
  background: var(--distance-bg);
}

.spot-distance-badge--0 { --distance-color: light-dark(#16a34a, #4ade80); --distance-bg: light-dark(#f0fdf4, #052e16); }
.spot-distance-badge--1 { --distance-color: light-dark(#65a30d, #a3e635); --distance-bg: light-dark(#f7fee7, #1a2e05); }
.spot-distance-badge--2 { --distance-color: light-dark(#ca8a04, #facc15); --distance-bg: light-dark(#fefce8, #1c1a05); }
.spot-distance-badge--3 { --distance-color: light-dark(#d97706, #fbbf24); --distance-bg: light-dark(#fffbeb, #1c1505); }
.spot-distance-badge--4 { --distance-color: light-dark(#ea580c, #fb923c); --distance-bg: light-dark(#fff7ed, #1c0d05); }
.spot-distance-badge--5 { --distance-color: light-dark(#dc2626, #f87171); --distance-bg: light-dark(#fef2f2, #1c0505); }
.spot-distance-badge--6 { --distance-color: light-dark(#9f1239, #fb7185); --distance-bg: light-dark(#fff1f2, #1c0509); }
.spot-distance-badge--7 { --distance-color: light-dark(#6b21a8, #c084fc); --distance-bg: light-dark(#faf5ff, #1a0533); }

.photos-toggle:not(.spot-filter-mode-btn--active),
.subspots-toggle:not(.spot-filter-mode-btn--active),
.exclusion-toggle:not(.spot-filter-mode-btn--active) {
  opacity: var(--spots-opacity-dim);
}

.spot-filter-pill--excluded {
  position: relative;
  text-decoration: none;
  opacity: 1;
}

.spot-filter-pill--excluded::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.25px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 1.25px)),
    linear-gradient(to bottom left,  transparent calc(50% - 1.25px), currentColor calc(50% - 0.75px), currentColor calc(50% + 0.75px), transparent calc(50% + 1.25px));
  pointer-events: none;
}

.spot-subspot-inherit {
  opacity: 0.5;
}

.spot-filter-mode-btn {
  font-size: 0.85rem;
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 0.05rem 0.45rem;
  line-height: var(--spots-pill-line-height);
}

.spot-filter-mode-btn + .spot-filter-mode-btn {
  border-left: 1px solid var(--spots-text);
}

.spot-filter-mode-btn--active {
  outline: none;
  background: var(--spots-text);
  color: var(--spots-bg);
}

/* ── Table of contents ───────────────────────────────── */

.spot-toc {
  font-size: 0.85rem;
}

.spot-toc a {
  text-decoration: none;
  opacity: var(--spots-opacity-muted);
}

.spot-toc a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Section headers (the generator's own sections only) ── */

section[id] > h3 {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid;
  padding-bottom: 0.3rem;
  margin-bottom: 1.25rem;
  margin-top: 2rem;
}

/* ── Scroll-to-top ───────────────────────────────────── */

@media (min-width: 940px) {
  .scroll-top {
    border: 1px solid var(--spots-text);
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    line-height: var(--spots-pill-line-height);
    text-decoration: none;
    opacity: var(--spots-opacity-dim);
    background: var(--spots-bg);
  }

  .scroll-top:hover {
    opacity: 1;
  }
}

/* ── Spot card ───────────────────────────────────────── */

.spot-card {
  border: 1px solid var(--spots-text);
  box-shadow: 0.25rem 0.25rem light-dark(#121212, #ffffff);

  .spot-name::before {
    content: "» ";
    opacity: var(--spots-opacity-muted);
  }
}

.spot-card--sub {
  border-color: color-mix(in srgb, var(--spots-text) 45%, transparent);
  font-size: 0.94em;
  box-shadow: 0.25rem 0.25rem #868686;

  .spot-name::before {
    content: "› ";
  }
}

.spot-name {
  font-size: 1.05rem;
  font-weight: bold;
}

/* Pin label: the colour is the umap layer's marker colour, set per card by the generator
   (--spots-pin-color); the text colour is derived from it (black on light, white on dark). */
.spot-label {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-family: monospace;
  font-weight: bold;
  width: 2.4em;
  height: 2.4em;
  color: inherit;
  color: lch(from var(--spots-pin-color, #888) calc((49.44 - l) * infinity) 0 0);
}

/* Pin shape: sized by aspect-ratio so the pointer overflows below without affecting layout */
.spot-label::before {
  content: '';
  position: absolute;
  inset: -0.25rem;
  aspect-ratio: 8.6599 / 11.885;
  background: var(--spots-pin-color, #888);
  mask-image: url('img/umap-drop.svg');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  z-index: -1;
}

.spot-card--sub .spot-label {
  color: inherit;
}

.spot-card--sub .spot-label::before {
  aspect-ratio: 1;
  mask-image: url('img/umap-circle.svg');
}

.spot-coords {
  font-size: 0.8rem;
  opacity: var(--spots-opacity-muted);
  cursor: copy;
}

.spot-share-link {
  text-decoration: none;
  cursor: copy;
}

/* Constraints / caveats */
.spot-caveat {
  font-size: 0.875rem;
  padding: var(--spots-callout-padding);
  border-left: 3px solid light-dark(#b86800, #c87800);
  background: light-dark(#fffae0, #1e1800);
}

/* ── Not usable anymore (🪦) ─────────────────────────── */

.spot-card--gone {
  position: relative;
  overflow: hidden;       /* clips the ribbon */
  border-style: dashed;
}

/* Trauerflor: short black ribbon across the top-right corner (a full diagonal would hide the photo) */
.spot-card--gone::after {
  content: '';
  position: absolute;
  top: 0.6rem;
  right: -1.3rem;
  width: 4.6rem;
  height: 0.7rem;
  background: #000;
  border: 1px solid light-dark(transparent, #999);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

.spot-card--gone .spot-photo {
  filter: saturate(0.4);
  opacity: 0.6;
}

.spot-gone-reason {
  font-size: 0.875rem;
  padding: var(--spots-callout-padding);
  border-left: 3px solid light-dark(#555, #aaa);
  background: light-dark(#f0f0f0, #1c1c1c);
}

.spot-distance-dropdown li[data-gone] {
  opacity: var(--spots-opacity-muted);
}

/* Details: techniques, obstacles, challenge */
.spot-details {
  font-size: 0.85rem;
}

.spot-details dt {
  font-weight: bold;
}

.spot-tag {
  font-size: 0.72rem;
  border: 1px solid var(--spots-text);
  padding: var(--spots-pill-padding);
  opacity: var(--spots-opacity-muted);
  line-height: var(--spots-pill-line-height);
}

.spot-videos {
  font-size: 0.85rem;
}

/* ── Fata Morgana ────────────────────────────────────── */

.spot-card--fata {
  opacity: 0.5;
}

/* fata 1: float + opacity pulse */
@keyframes fata-drift {
  0%, 100% { transform: translateY(0);    opacity: 0.3; }
  50%       { transform: translateY(-8px); opacity: 0.5; }
}
.spot-card--fata {
  animation: fata-drift 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spot-card--fata { animation: none; }
}

/* fata 2: desaturated + blurred photo */
@keyframes fata-photo {
  0%, 100% { filter: grayscale(60%) brightness(1.1) blur(1px); }
  50%       { filter: grayscale(60%) brightness(1.1) blur(3px); }
}
.spot-card--fata .spot-photo {
  animation: fata-photo 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spot-card--fata .spot-photo { filter: grayscale(60%) brightness(1.1) blur(2px); }
}

/* fata 3: soft glow shadow */
.spot-card--fata {
  box-shadow: 0 0 2.5rem 0.75rem light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.08));
}

/* fata 4: shimmer sweep */
.spot-card--fata {
  position: relative;
  overflow: hidden;
}
@keyframes fata-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(250%); }
}
.spot-card--fata::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    light-dark(rgba(255,255,255,0.25), rgba(255,255,255,0.1)) 50%,
    transparent 60%
  );
  animation: fata-shimmer 6s ease-in-out infinite 1s;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .spot-card--fata::after { display: none; }
  body.list-view .spot-body-collapse { transition: none; }
}

/* ── List view ───────────────────────────────────────── */

body.list-view .spot-body-collapse {
  transition: grid-template-rows 0.22s ease;
}

body.list-view .spot-body-expanded-inner {
  border-top: 1px solid color-mix(in srgb, var(--spots-text) 20%, transparent);
}

body.list-view .spot-header:hover {
  background: color-mix(in srgb, var(--spots-text) 7%, transparent);
}

/* Chevron (rotates when open) */
body.list-view .spot-header::after {
  content: '▸';
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.35;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

body.list-view .spot-card--list-open .spot-header::after {
  transform: rotate(90deg);
  opacity: 0.7;
}