@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap");

:root{
  
  --ink:#0F172A;
  --muted:#475569;
  --bg:#F8FAFC;
  --card:#FFFFFF;

  
  --sky:#7DD3FC;
  --sky-light:#E0F2FE;
  --sun:#FDE68A;
  --sun-light:#FEF9C3;
  --pine:#22C55E;
  --pine-light:#DCFCE7;
  --rock:#94A3B8;
  --rock-light:#F1F5F9;
  --valley:#0E7490;
  --font-display:"Fraunces", Georgia, serif;

  
  --radius:18px;
  --radius-sm:14px;
  --radius-lg:24px;

  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow-sm: 0 6px 20px rgba(2,6,23,.06);
  --shadow-hover: 0 14px 40px rgba(2,6,23,.10);

  --line: rgba(15,23,42,.10);
  --transition: all .25s cubic-bezier(.4,0,.2,1);
}
main .page{padding:6px 0 34px}
main .hero{
  margin:20px 0 22px;
  padding:22px;
  border:1px solid rgba(15,23,42,.08);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
}
main .h-title{margin:10px 0 0;font-size: clamp(24px, 3.2vw, 36px); line-height:1.12}
main .h-sub{margin:10px 0 0;color:var(--muted);max-width:70ch;line-height:1.6}
main .grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  margin-top:20px;
}
main .card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  padding:24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
main .card > h2:first-child{margin-top:0;padding-top:0}
main .card > h2:first-child::before{display:none}
main .card h2:not(:first-child){
  margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(15,23,42,.08);
}
main .card:hover{box-shadow: var(--shadow-hover); transform: translateY(-2px)}
@media(min-width:860px){
main .card.left{grid-column:span 8}
main .card.right{grid-column:span 4}
}
main .kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:520px){
main .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
}
main .k{
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.92);
}
main .k span{display:block;font-size:12px;color:var(--muted)}
main .k strong{display:block;margin-top:3px;font-size:14px}
main .badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.9);
  font-size:13px;
  font-weight: 800;
}
main .dot{width:10px;height:10px;background:#0ea5e9}
main .dot.easy{background:var(--pine)}
main .dot.med{background:#f59e0b}
main .dot.hard{background:#ef4444}
main .list{margin:10px 0 0;padding-left:18px;line-height:1.7}
main .list li{margin-bottom:6px}
main .list li:last-child{margin-bottom:0}
main .muted{color:var(--muted)}
main .btn{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.9);
  padding:10px 12px;border-radius:14px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
main .btn:hover{
  transform: translateY(-1px);
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.35);
}
main .footer{
  margin-top: 80px;
  background: rgba(255,255,255,.55);
  border-top: 1px solid rgba(15,23,42,.06);
  padding-top: 40px;
}
@media (max-width: 980px){
main .hero{padding:18px;margin:14px 0 16px}
main .grid{gap:14px;margin-top:14px}
main .card{padding:18px}
main .card h2:not(:first-child){margin-top:22px;padding-top:18px}
main .kv{gap:8px}
}
main body > *:not(.trailhdr){
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}
main, main section, main article, main .page, main .hero, main .grid, main .card{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
main #trailMap, main .trailmap{
  height: 340px !important;
  min-height: 340px !important;
  width: 100% !important;
  display: block !important;
}
main .trailmap .leaflet-container, main #trailMap.leaflet-container{
  height: 100% !important;
  width: 100% !important;
}
main .leaflet-container img{
  max-width: none !important;
}
main .card.mapcard, main .mapcard{
  overflow: visible !important;
  transform: none !important;
}
main .leaflet-pane, main .leaflet-tile, main .leaflet-marker-icon, main .leaflet-marker-shadow{
  image-rendering: auto;
}
main .card.mapcard{
  grid-column: 1 / -1 !important; 
  width: 100% !important;
}
main .card.elevcard{
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
main .card.mapcard{
  padding: 22px;
}
main .trailmap{
  border-radius: 22px;
}
main .card.mapcard{
  display: flex;
  flex-direction: column;
}
main .card.mapcard h3{
  flex: 0 0 auto;   
}
main .card.mapcard .trailmap{
  flex: 1 1 auto;  
  height: auto !important;
  min-height: 420px;  
  width: 100%;
}
main .trailmap .leaflet-container, main #trailMap.leaflet-container{
  height: 100% !important;
  width: 100% !important;
}
main .leaflet-container img{
  max-width: none !important;
}
main .webcam-card{ position: relative; overflow: visible !important; }
main .webcam-card a{ display:block; position:relative; }
main .webcam-card .card__img{ transition: transform .5s ease, filter .5s ease; }
main .webcam-card a:hover .card__img{ transform: scale(1.06); filter: saturate(1.08) contrast(1.03); }
main .webcam-badge{
  position:absolute; top:12px; left:12px;
  background:#ef4444; color:#fff; font-weight:900; font-size:12px;
  padding:6px 12px; border-radius:999px; letter-spacing:.08em;
  z-index:5; box-shadow: 0 8px 20px rgba(239,68,68,.35);
}
main .webcam-badge::before{
  content:""; display:inline-block; width:8px; height:8px; margin-right:6px;
  background:#fff; border-radius:50%;
  animation: webcam-pulse 1.5s infinite;
}
@keyframes webcam-pulse{
  0%{transform:scale(1);opacity:1}
  70%{transform:scale(1.8);opacity:0}
  100%{transform:scale(1.8);opacity:0}
}
main .card__body.center{ text-align:center; }
main .webcam-note{ display:block; margin-top:6px; font-size:13px; font-weight:700; color:var(--muted); }
main .grid.cards.webcams{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
main .grid.cards.webcams{
    grid-template-columns: 1fr;
  }
}
main .grid.webcams{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
main .grid.webcams .webcam-card{
  grid-column: span 12;
}
@media (min-width: 640px){
main .grid.webcams .webcam-card{
    grid-column: span 6;
  }
}
@media (min-width: 980px){
main .grid.webcams .webcam-card{
    grid-column: span 4;
  }
}
main .grid.cards.webcams{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
main .grid.cards.webcams > .card.webcam-card{
  grid-column: auto !important;   
  width: auto !important;
}
@media (max-width: 980px){
main .grid.cards.webcams{
    grid-template-columns: 1fr !important;
  }
}
main .webcam-note{
  margin-top: 0px !important;   
  line-height: 1.2;
}
main .card__body.center h3{
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 4px;
}
main .card__body.center h3::after{
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin: 6px auto 0;
  background: rgba(14,165,233,.45); 
  border-radius: 999px;
}
main h1, main h2, main h3{font-family:var(--font-display)}
main .h-title{letter-spacing:-.01em}
main h2{position:relative;padding-top:12px}
main h2::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  border-radius:2px;background:var(--valley);
}
:focus-visible{outline:3px solid var(--valley);outline-offset:2px;border-radius:6px}
[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion: reduce){
main *::before, main *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
main .leaflet-container{z-index:0 !important;isolation:isolate}
main .trail-desc{color:var(--muted);line-height:1.7;margin:0}
main .warnbox{
  margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.30);
  color:#7F1D1D;line-height:1.6;
}
main .salvamont{
  margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(14,116,144,.08);border:1px solid rgba(14,116,144,.25);
}
main .salvamont p{margin:6px 0 0;color:var(--muted);line-height:1.7}
main .salvamont a{color:var(--valley);font-weight:800}
main .list.similar li{margin-bottom:8px;line-height:1.5}
main .list.similar a{color:var(--valley);font-weight:700}
main .list.similar a:hover{text-decoration:underline}
main .kv .k strong{font-weight:800}

main .leaflet-container{z-index:0 !important;isolation:isolate}

/* FAQ accordion (trail pages) */
.faq{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.faq + div{margin-top:28px !important}
.faq-item{
  border:1px solid rgba(15,23,42,.08);border-radius:12px;
  background:rgba(248,250,252,.7);padding:10px 14px;
}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;font-weight:900;color:var(--valley,#0e7490)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:8px 0 0;color:var(--muted,#475569);line-height:1.6}

/* Tag pills (obiective pages) */
.pill2{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;
  border:1px solid rgba(15, 23, 42, 0.10);background:#fff;white-space:nowrap;
}
.attraction-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}



/* ===== Buton "Salveaza traseul" + spatiere hero (2026-07) ===== */
.hero .h-title{margin-bottom:2px}
.hero .h-sub{margin:14px 0 0}
.savebar{margin:18px 0 6px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.savebtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:14px;
  font-weight:800;font-size:15px;cursor:pointer;
  border:1px solid rgba(15,23,42,.12);
  background:linear-gradient(90deg, var(--sun, #FDE68A), #fff);
  color:inherit;
  box-shadow:0 4px 14px rgba(2,6,23,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.savebtn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(2,6,23,.14)}
.savebtn.is-saved{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.40);
}
.savehint{color:#64748b;font-size:13px;font-weight:600}
.savehint a{text-decoration:underline}
#reportWidget{margin-top:18px !important;padding-top:16px;border-top:1px solid rgba(15,23,42,.08)}
#reportWidget .pill2{padding:10px 16px;font-size:13px}