/* 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;
}

/* Isometric castle, pure CSS/SVG-free geometry: three towers + walls built from
   gradients. Decorative only (aria-hidden container in layout not required — it is
   a background). Hidden on small screens and for reduced-motion users it is static. */
.hero3d::after {
  content: '';
  position: absolute;
  right: 2.5rem;
  top: 2rem;
  width: 220px;
  height: 170px;
  pointer-events: none;
  opacity: 0.14;
  background:
    /* central keep */
    linear-gradient(var(--accent), var(--accent)) 96px 40px / 28px 120px,
    /* left tower */
    linear-gradient(var(--accent), var(--accent)) 40px 70px / 22px 90px,
    /* right tower */
    linear-gradient(var(--accent), var(--accent)) 158px 70px / 22px 90px,
    /* walls */
    linear-gradient(var(--accent), var(--accent)) 62px 110px / 96px 50px,
    /* battlements (dashed top edges) */
    repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px) 96px 30px / 28px 10px,
    repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px) 40px 60px / 22px 10px,
    repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px) 158px 60px / 22px 10px,
    repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px) 62px 100px / 96px 10px;
  background-repeat: no-repeat;
  transform: perspective(600px) rotateX(8deg);
}

@media (max-width: 719px) {
  .hero3d::after {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero3d::after {
    transition: transform 0.4s ease-out;
  }
  .hero3d:hover::after {
    transform: perspective(600px) rotateX(8deg) translateY(-4px);
  }
}

/* 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);
}

/* Subtle paper grain on light, depth on dark — CSS only, no assets */
body {
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 3%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Legend dot colors for heritage tipi (matching hero3d.js TIPO_COLORS) */
.dot.d-castello { background: #d4af37; color: #d4af37; }
.dot.d-fortificazione { background: #f87171; color: #f87171; }
.dot.d-abbazia { background: #a78bfa; color: #a78bfa; }
.dot.d-borgo { background: #fb923c; color: #fb923c; }
.dot.d-sito-archeologico { background: #4ade80; color: #4ade80; }
.dot.d-teatro-storico { background: #e879f9; color: #e879f9; }
.dot.d-faro { background: #38bdf8; color: #38bdf8; }
.dot.d-unesco { background: #fbbf24; color: #fbbf24; }

/* ===== 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); }