/* theme-heritage — "Atlante notturno" variant (opt-in via product.theme = "heritage").
   Dark-first: antique-gold accent on deep ink, serif display already in the base
   template (Fraunces). Loaded AFTER main.css: variable overrides only + a few
   heritage-specific components. Other products never load this file. */

:root {
  --fg: #2a2620;
  --muted: #6b6252;
  --bg: #faf7f0;
  --bg-soft: #f1ebdd;
  --surface: #ffffff;
  --accent: #8a6d1d;
  --accent-strong: #6e5510;
  --accent-soft: #f3ead0;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* warm ink (APCA-checked: #ede6da body su #12100d; oro solo accenti/testi grandi) */
    --fg: #ede6da;
    --muted: #a89c85;
    --bg: #12100d;
    --bg-soft: #1a1713;
    --surface: #201c17;
    --accent: #d4af37;
    --accent-strong: #e5c65c;
    --accent-soft: #2b2413;
  }
}

/* Display serif gets more presence on this theme */
.hero h1,
main > h1 {
  letter-spacing: 0.01em;
  font-weight: 600;
}

.hero {
  position: relative;
  overflow: hidden;
}

/* Type badge on cards (front matter tipo already rendered by entity_cards) */
.badge-tipo,
.card .tipo {
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.78rem;
}

/* UNESCO badge (attributes.unesco = true) */
.badge-unesco {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* Language switch pill in the header */
.lang-switch {
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  text-decoration: none;
}

.lang-switch:hover {
  background: var(--accent-soft);
}


/* Legend dot colors for heritage tipi (matching hero3d.js TIPO_COLORS) */
.dot.d-castello { background: #d4af37; color: #d4af37; }
.dot.d-fortificazione { background: #c98a7a; color: #c98a7a; }
.dot.d-abbazia { background: #a99bc9; color: #a99bc9; }
.dot.d-borgo { background: #cf9a5f; color: #cf9a5f; }
.dot.d-sito-archeologico { background: #8fb894; color: #8fb894; }
.dot.d-teatro-storico { background: #c391b4; color: #c391b4; }
.dot.d-faro { background: #8db6cc; color: #8db6cc; }
.dot.d-unesco { background: #e0bd66; color: #e0bd66; }

/* ===== style-up 2026-07-04 (ricerca: gallery dark-mode, parallax CSS, tilt) ===== */

/* Foto scheda: scrim dall'alto (pattern museo); foto a colori pieni. */
.entity-photo { position: relative; border-radius: 14px; overflow: hidden; }
.entity-photo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 38%);
}

/* Parallax hero CSS-only (scroll-driven animations): progressive enhancement. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
    .hero3d-map { animation: h-parallax linear both; animation-timeline: scroll(); animation-range: 0 80vh; }
    @keyframes h-parallax { from { transform: translateY(0) scale(1); } to { transform: translateY(-6%) scale(1.04); } }
    .hero3d-overlay { animation: h-fade linear both; animation-timeline: scroll(); animation-range: 0 60vh; }
    @keyframes h-fade { from { opacity: 1; } to { opacity: .25; } }
  }
}

/* Tilt 3D sulle card: solo pointer fine, mai con reduced-motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .spec01-grid, .cards, .tipo-tiles { perspective: 1200px; }
  .spec01-card, .card, .tipo-tiles li {
    transform-style: preserve-3d;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .spec01-card:hover, .card:hover, .tipo-tiles li:hover {
    transform: rotateX(2.5deg) rotateY(-2deg) translateY(-4px);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 25%, #000);
  }
}

/* Gold come punteggiatura: regola sotto gli H1 */
main > h1::after, .hero3d-overlay h1::after {
  content: ''; display: block; width: 64px; height: 2px; margin-top: .5rem;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Nearby list: card compatte con dettaglio */
.nearby-list { list-style: none; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.nearby-list li { border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 10px; padding: .5rem .75rem; background: var(--bg-soft); }
.nearby-list small { color: var(--muted); display: block; margin-top: .15rem; }

/* Il theme-switcher (html[data-theme]) ha specificità maggiore delle regole
   @media: senza questi override il tema heritage perdeva contro main.css. */
:root[data-theme='dark'] {
    --fg: #ede6da;
    --muted: #a89c85;
    --bg: #12100d;
    --bg-soft: #1a1713;
    --surface: #201c17;
    --accent: #d4af37;
    --accent-strong: #e5c65c;
    --accent-soft: #2b2413;
}

:root[data-theme='light'] {
  --fg: #2a2620;
  --muted: #6b6252;
  --bg: #faf7f0;
  --bg-soft: #f1ebdd;
  --surface: #ffffff;
  --accent: #8a6d1d;
  --accent-strong: #6e5510;
  --accent-soft: #f3ead0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --fg: #ede6da;
    --muted: #a89c85;
    --bg: #12100d;
    --bg-soft: #1a1713;
    --surface: #201c17;
    --accent: #d4af37;
    --accent-strong: #e5c65c;
    --accent-soft: #2b2413;
  }
}

/* SPEC07: badge epoca (bucket storici) */
.badge-epoca { color: var(--muted); border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
  border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; }
/* SPEC17: bottone salva */
.btn-save[aria-pressed='true'] { color: var(--accent-strong); border-color: var(--accent); }