@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;
  --sun:#FDE68A;
  --pine:#22C55E;
  --rock:#94A3B8;
  --valley:#0E7490;
  --font-display:"Fraunces", Georgia, serif;

  --radius:18px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow2: 0 6px 20px rgba(2,6,23,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: linear-gradient(180deg, #E0F2FE 0%, var(--bg) 22%, var(--bg) 100%);
}

a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 18px}

.header{
  position:sticky;top:0;z-index:50;
  background: rgba(248,250,252,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.header__inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__name{font-weight:800;letter-spacing:.2px}
.brand__logo{filter: drop-shadow(0 6px 10px rgba(2,6,23,.10))}
.nav{display:flex;gap:14px;margin-left:auto}
.nav a{padding:8px 10px;border-radius:10px;color:var(--muted)}
.nav a:hover{background: rgba(125,211,252,.25);color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;font-weight:700;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
}
.btn--primary{background: #fff}
.btn--sun{background: linear-gradient(90deg, var(--sun), #fff);
}

.hero{position:relative;padding:34px 0 26px}
.hero__bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(248,250,252,.0), rgba(248,250,252,.92)),
    url("../images/hero.webp") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.02);
}
.hero__content{position:relative}
.hero__card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow);
  border-radius: calc(var(--radius) + 6px);
  padding: 22px;
  max-width: 780px;
}
.pill{
  display:inline-flex;gap:8px;align-items:center;
  background: rgba(125,211,252,.25);
  border:1px solid rgba(125,211,252,.55);
  padding:6px 10px;border-radius:999px;
  font-weight:700;color:#0B3B53;margin:0 0 10px;
}
h1{font-size: clamp(28px, 3.2vw, 44px); line-height:1.08; margin:0 0 10px;}
.lead{color:var(--muted); font-size: 16px; margin:0 0 16px; max-width:65ch}

.search{display:flex;gap:10px;align-items:center;margin: 10px 0 14px}
.search input{
  flex:1;
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  outline:none;
  background:#fff;
}
.search input:focus{border-color: rgba(125,211,252,.9); box-shadow: 0 0 0 5px rgba(125,211,252,.25)}
.quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{
  padding:8px 10px;border-radius:999px;
  background: rgba(253,230,138,.35);
  border:1px solid rgba(253,230,138,.65);
  font-weight:700;color:#5B3B00;
}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat{background: rgba(248,250,252,.9); border:1px solid rgba(15,23,42,.06); border-radius:14px; padding:10px}
.stat__k{color:var(--muted); font-size:12px}
.stat__v{font-weight:400}

.section{padding:34px 0}
.section--soft{background: rgba(255,255,255,.55); border-top:1px solid rgba(15,23,42,.06); border-bottom:1px solid rgba(15,23,42,.06)}
.section__head{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.section__head h2{margin:0;font-size:26px}
.section__head p{margin:0;color:var(--muted)}

.grid{display:grid;gap:14px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background: var(--card);
  border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.card__img{width:100%;height:190px;object-fit:cover;display:block}
.card__body{padding:12px 12px 14px}
.card__body h3{margin:0 0 6px}
.card__body p{margin:0;color:var(--muted)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{
  font-weight:500;font-size:12px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}
.tag--sky{background: rgba(125,211,252,.25); border-color: rgba(125,211,252,.55)}
.tag--sun{background: rgba(253,230,138,.35); border-color: rgba(253,230,138,.65)}
.tag--pine{background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35)}
.tag--rock{background: rgba(148,163,184,.22); border-color: rgba(148,163,184,.5)}

/* Badge suprapus pe poză (mutat automat din .tags de site-nav.js) */
.card{position:relative}
.card__badges{
  position:absolute; top:10px; left:10px; right:10px; z-index:2;
  display:flex; justify-content:space-between; gap:8px; pointer-events:none;
}
.card__badges .tag{
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5);
  box-shadow:0 4px 12px rgba(2,6,23,.18);
  border-color:rgba(255,255,255,.35);
}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filter{
  background:#fff;border:1px solid rgba(15,23,42,.10);
  padding:8px 12px;border-radius:999px;font-weight:500;
}
.filter.is-active{background: rgba(125,211,252,.25); border-color: rgba(125,211,252,.6)}

.routes{grid-template-columns:repeat(3,1fr)}
.route{
  background:#fff;border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius); padding:14px;
  box-shadow: var(--shadow2);
}
.route__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.route__top h3{margin:0;font-size:18px}
.badge{
  font-weight:900;font-size:12px;
  padding:6px 10px;border-radius:999px;border:1px solid rgba(15,23,42,.10);
}
.badge--sun{background: rgba(253,230,138,.35); border-color: rgba(253,230,138,.65)}
.badge--sky{background: rgba(125,211,252,.25); border-color: rgba(125,211,252,.55)}
.badge--rock{background: rgba(148,163,184,.22); border-color: rgba(148,163,184,.5)}
.route__meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-weight:700;font-size:13px;margin:8px 0}
.route p{margin:0;color:var(--muted)}

.notice{
  margin-top:14px;
  background: rgba(253,230,138,.28);
  border:1px solid rgba(253,230,138,.6);
  padding:12px 14px;border-radius: var(--radius);
}

.itineraries{grid-template-columns:repeat(3,1fr)}
.mini{
  background:#fff;border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius); padding:14px; box-shadow: var(--shadow2);
}
.mini h3{margin:0 0 8px}
.mini ul{margin:0;padding-left:18px;color:var(--muted);font-weight:650}

.info{grid-template-columns:repeat(3,1fr)}
.info__card{
  background:#fff;border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius); padding:14px; box-shadow: var(--shadow2);
}
.info__card h3{margin:0 0 8px}

.map-teaser{
  margin-top:14px;
  display:flex;gap:14px;align-items:center;
  background:#fff;border:1px solid rgba(15,23,42,.08);
  border-radius: var(--radius); padding:12px;
  box-shadow: var(--shadow2);
}
.map-teaser img{width:220px;height:130px;object-fit:cover;border-radius:14px}

.footer{
  padding:22px 0;
  border-top:1px solid rgba(15,23,42,.06);
  background: rgba(248,250,252,.75);
}
.footer__inner{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.muted{color:var(--muted)}

@media (max-width: 980px){
  .cards,.routes,.itineraries,.info{grid-template-columns:1fr}
  .nav{display:none}
  .stats{grid-template-columns:1fr}
  .map-teaser{flex-direction:column;align-items:stretch}
  .map-teaser img{width:100%}
}




/* UX upgrade: meta pe coloane (fără să schimbe paleta) */
.route__meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:10px 0 0;
}
.route__meta span{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.92);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 980px){
  .route__meta{grid-template-columns: repeat(3, minmax(0,1fr));}
}
@media (max-width: 980px){
  .route__meta{grid-template-columns: 1fr;}
}



/* ===== Mobile menu (hamburger) ===== */
.menu-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: var(--shadow2);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.menu-toggle svg{width:22px;height:22px}
.menu-toggle:focus{
  outline:none;
  box-shadow: 0 0 0 5px rgba(125,211,252,.25)
}









:root{
  --header-h: 64px;
}

@media (max-width: 980px){
  :root{ --header-h: 64px; }
}

.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 40;
  display:none;
}
.mobile-nav.is-open{display:block}

.mobile-nav__backdrop{
  position:absolute;
  left:0; right:0; bottom:0;
  top: var(--header-h);
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(2px);
}

.mobile-nav__panel{
  position:absolute;
  left:10px; right:10px;
  top: calc(var(--header-h) + 10px);
  max-height: calc(100vh - var(--header-h) - 20px);
  overflow:auto;

  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: 12px;
}



















.mobile-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 6px 10px;
  border-bottom:1px solid rgba(15,23,42,.06);
}

.mobile-nav__title{
  font-weight:900;
}

.mobile-nav__close{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.mobile-nav__links{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 6px 6px;
}

.mobile-nav__links a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.85);
  font-weight:900;
  color: var(--ink);
}

.mobile-nav__links a:hover{
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.35);
}

@media (max-width: 980px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
}

body.no-scroll{overflow:hidden}



/* ===== FOOTER UX ===== */
.footer{
  margin-top: 80px;
  background: rgba(248,250,252,.85);
  border-top: 1px solid rgba(15,23,42,.08);
}

.footer__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 48px 0 32px;
}

.footer__col{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.footer__title{
  display:block;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 10px;
}

.footer__nav{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.footer__nav a{
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--muted);
  transition: var(--transition);
}

.footer__nav a:hover{
  background: var(--sky-light);
  color: var(--sky);
}

.footer__bottom{
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.9);
}

.footer__bottomInner{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 14px;
  color: var(--muted);
}

.footer__bottom a{
  font-weight: 800;
  color: var(--sky);
}

/* Responsive */
@media (max-width: 900px){
  .footer__grid{
    grid-template-columns: 1fr;
  }

  .footer__bottomInner{
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}






/* ===== Footer bottom 3 coloane ===== */
.footer__bottomGrid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 0;
}

.footer__left{
  justify-self: start;
}

.footer__center{
  justify-self: center;
  font-weight: 700;
}

.footer__right{
  justify-self: end;
}

.footer__right a{
  font-weight: 900;
  color: var(--sky);
}

/* Mobile */
@media (max-width: 700px){
  .footer__bottomGrid{
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .footer__left,
  .footer__center,
  .footer__right{
    justify-self: center;
  }
}



/* ===== WEBCAMS LIVE SECTION ===== */
.webcams {
  margin-top: 20px;
}

.webcam-card {
  position: relative;
  overflow: hidden;
}

.webcam-card .card__img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

.webcam-card:hover .card__img {
  transform: scale(1.05);
  filter: saturate(1.1);
}

/* LIVE badge */
.webcam-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ef4444;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}

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

/* Text sub titlu */
.card__body.center {
  text-align: center;
}

.webcam-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}



/* ===== WEBCAM FIX: badge full + hover ===== */

/* Nu mai tăia badge-ul */
.webcam-card{
  overflow: visible !important;
}

/* dar păstrează colțurile rotunjite doar pe imagine */
.webcam-card a{
  display:block;
  position:relative;
}

.webcam-card .card__img{
  border-radius: var(--radius) var(--radius) 0 0;
}

/* badge peste imagine, complet vizibil */
.webcam-badge{
  z-index: 5 !important;
  top: 12px;
  left: 12px;
}





/* Hover zoom + glow (sigur) */
.webcam-card a:hover .card__img{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.03);
}

.webcam-card:hover{
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
}




.webcam-badge{
  transform: translateZ(0);
}





/* ===== ROUTES PILLS UX FIX ===== */

/* Containerul de pilule */
.route__meta{
  display: flex;
  flex-wrap: wrap;              /* să poată trece pe rând nou */
  gap: 12px 16px;             /* mai mult aer între ele */
  margin-bottom: 10px;       /* spațiu până la buton */
}

/* Fiecare pilulă */
.route__meta span{
  white-space: normal;       /* NU mai forța pe un singur rând */
  line-height: 1.4;
  max-width: 100%;
  padding: 10px 14px;       /* puțin mai „grase” */
}

/* Special pentru pilulele lungi (gen marcaj) */
.route__meta span.long,
.route__meta span:nth-child(1){
  flex: 1 1 100%;           /* ocupă tot rândul dacă e lung */
}

/* Butonul "Vezi fișa traseului" */
.route .btn,
.route a.btn,
.route .btn--primary{
  margin-top: 12px;        /* separare clară de pilule */
  display: inline-block;
}



/* ===== ROUTES META LAYOUT: 1 linie + marcaj jos ===== */

/* Container */
.route__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 18px;
}

/* Toate pilulele normale (durată, diferență, distanță) */
.route__meta span{
  white-space: nowrap;
  padding: 10px 14px;
  line-height: 1.2;
}

/* Primele 3 pilule: stau pe același rând */
.route__meta span:nth-child(-n+3){
  flex: 0 0 auto;
}

/* Marcajul (a 4-a pilulă): pe rând nou, full width */
.route__meta span:nth-child(4){
  flex: 1 1 100%;
  white-space: normal;
}





/* ===== MOBILE HEADER ALIGN FIX ===== */
@media (max-width: 640px){
  .header .container{
    padding-left: 14px;   /* era prea mic, împingem spre dreapta */
    padding-right: 14px;
  }

  .header__inner{
    justify-content: space-between;
  }

  .brand{
    margin-left: 6px;   /* mic offset spre centru */
  }
}





/* ===== AUTOCOMPLETE (PRO) ===== */
.search{ position: relative; }

.acbox{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 999;
  backdrop-filter: blur(10px);
}

.acitem{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.acitem:last-child{ border-bottom: none; }

.acitem:hover,
.acitem.is-active{
  background: rgba(125,211,252,.20);
}

.actype{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: var(--ink);
}

.actype.traseu{ background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35); }
.actype.obiectiv{ background: rgba(253,230,138,.35); border-color: rgba(253,230,138,.65); }
.actype.pagina{ background: rgba(125,211,252,.25); border-color: rgba(125,211,252,.55); }

.acmain{ min-width: 0; }
.acmain strong{
  display:block;
  font-size: 14px;
  line-height: 1.25;
}
.acmain span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== ADSENSE BLOCK (CONTAINER WIDTH) ===== */
.header .nav__item{position:relative;display:flex;align-items:center}
.header .nav__link--parent{display:inline-flex;align-items:center;gap:6px}
.header .nav__caret{font-size:11px;opacity:.8}

.header .nav__sub{
  position:absolute;
  left:0;
  top:100%;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  box-shadow: var(--shadow2);
  padding:6px;
  display:none;
  z-index:2000;
}

.header .nav__sub::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

.header .nav__item--hasSub:hover .nav__sub,
.header .nav__item--hasSub:focus-within .nav__sub{display:block}

.header .nav__sub a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
  text-decoration:none;
}
.header .nav__sub a:hover{
  background: rgba(125,211,252,.25);
  color:var(--ink);
}

.mobile-nav__links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-nav__links > a,
.mnav__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  font-weight:800;
  color:var(--ink);
  text-decoration:none;
  box-shadow: var(--shadow2);
  cursor:pointer;
}

.mobile-nav__links > a{justify-content:flex-start}

.mobile-nav__links > a:hover,
.mnav__toggle:hover{
  background: rgba(125,211,252,.18);
  border-color: rgba(125,211,252,.55);
}

.mnav__caret{font-size:12px;opacity:.8}

.mnav__sub{
  margin-top:8px;
  padding:10px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fff;
  box-shadow: var(--shadow2);
  display:block;
}
.mnav__sub[hidden]{display:none !important}

.mnav__sub a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  color:var(--muted);
  text-decoration:none;
  border:1px solid rgba(15,23,42,.06);
  background: rgba(248,250,252,.9);
  margin-bottom:8px;
}
.mnav__sub a:last-child{margin-bottom:0}

.mnav__sub a:hover{
  background: rgba(125,211,252,.20);
  border-color: rgba(125,211,252,.55);
  color:var(--ink);
}





  .header .nav__item{position:relative;display:flex;align-items:center}
    .header .nav__link--parent{display:inline-flex;align-items:center;gap:6px}
    .header .nav__caret{font-size:11px;opacity:.8}

    .header .nav__sub{
      position:absolute;
      left:0;
      top:100%;
      min-width:220px;
      background:#fff;
      border:1px solid rgba(15,23,42,.10);
      border-radius:14px;
      box-shadow: var(--shadow2);
      padding:6px;
      display:none;
      z-index:2000;
    }

    .header .nav__sub::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:-10px;
      height:10px;
    }

    .header .nav__item--hasSub:hover .nav__sub,
    .header .nav__item--hasSub:focus-within .nav__sub{display:block}

    .header .nav__sub a{
      display:block;
      padding:10px 12px;
      border-radius:10px;
      font-weight:800;
      color:var(--muted);
      white-space:nowrap;
      text-decoration:none;
    }
    .header .nav__sub a:hover{
      background: rgba(125,211,252,.25);
      color:var(--ink);
    }

    /* Mobile submenu: uniform ca restul meniului */
    .mnav__group{display:block}

    .mobile-nav__links{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .mobile-nav__links > a,
    .mnav__toggle{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.92);
      font-weight:800;
      color:var(--ink);
      text-decoration:none;
      box-shadow: var(--shadow2);
      cursor:pointer;
    }

    .mobile-nav__links > a{
      justify-content:flex-start;
    }

    .mobile-nav__links > a:hover,
    .mnav__toggle:hover{
      background: rgba(125,211,252,.18);
      border-color: rgba(125,211,252,.55);
    }

    .mnav__caret{font-size:12px;opacity:.8}

    .mnav__sub{
      margin-top:8px;
      padding:10px;
      border:1px solid rgba(15,23,42,.08);
      border-radius:14px;
      background:#fff;
      box-shadow: var(--shadow2);
      display:block;
    }
    .mnav__sub[hidden]{display:none !important}

    .mnav__sub a{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      font-weight:800;
      color:var(--muted);
      text-decoration:none;
      border:1px solid rgba(15,23,42,.06);
      background: rgba(248,250,252,.9);
      margin-bottom:8px;
    }
    .mnav__sub a:last-child{margin-bottom:0}

    .mnav__sub a:hover{
      background: rgba(125,211,252,.20);
      border-color: rgba(125,211,252,.55);
      color:var(--ink);
    }

/* ===== Design & UX upgrade ===== */
h1, h2, h3, .brand__name{font-family:var(--font-display)}
h1{letter-spacing:-.01em}
h1,h2,h3,h4{font-weight:600}
main h2{margin:20px 0 10px}
main h3{margin:16px 0 8px}
.ico-mono{filter:grayscale(1) contrast(1.1);display:inline-block}
.section__head h2{position:relative;padding-top:12px}
.section__head h2::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  border-radius:2px;background:var(--valley);
}

/* carduri clickabile + hover */
.card{position:relative;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card__img{transition:transform .35s ease}
.card:hover .card__img{transform:scale(1.04)}
.card__go{position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.card h3 small{color:var(--valley);font-weight:600;font-size:.72em}

/* meniu: pagina curenta */
.nav a.is-active, .mobile-nav__links a.is-active{
  color:var(--ink);background:rgba(14,116,144,.10);font-weight:700;
}

/* accesibilitate */
:focus-visible{outline:3px solid var(--valley);outline-offset:2px;border-radius:6px}
[id]{scroll-margin-top:84px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ===== Mobile menu v2: drawer aerisit ===== */
.mobile-nav--v2{
  position:fixed;inset:0;z-index:1000;
  display:block;visibility:hidden;pointer-events:none;
  transition:visibility 0s .32s;
}
.mobile-nav--v2.is-open{visibility:visible;pointer-events:auto;transition:none}

.mobile-nav--v2 .mobile-nav__backdrop{
  top:0;opacity:0;transition:opacity .28s ease;
  background:rgba(2,6,23,.45);backdrop-filter:blur(3px);
}
.mobile-nav--v2.is-open .mobile-nav__backdrop{opacity:1}

.mnav2{
  position:absolute;top:0;right:0;bottom:0;
  width:min(84vw,340px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#E0F2FE 0%,#fff 30%);
  box-shadow:-20px 0 60px rgba(2,6,23,.25);
  padding:18px 22px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,.28,1);
}
.mobile-nav--v2.is-open .mnav2{transform:translateX(0)}

.mnav2__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mnav2__close{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(15,23,42,.10);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--shadow2);
}
.mnav2__close svg{width:20px;height:20px}

.mnav2__links{display:flex;flex-direction:column}
.mnav2__links a{
  position:relative;
  font-family:var(--font-display);
  font-size:22px;font-weight:600;color:var(--ink);
  padding:11px 2px 11px 20px;
  border-bottom:1px solid rgba(15,23,42,.05);
}
.mnav2__links a:last-child{border-bottom:none}
.mnav2__links a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scale(0);
  width:8px;height:8px;border-radius:50%;background:var(--valley);
  transition:transform .2s ease;
}
.mnav2__links a.is-active{color:var(--valley);background:none}
.mnav2__links a.is-active::before,
.mnav2__links a:active::before{transform:translateY(-50%) scale(1)}

.mnav2__towns{margin-top:22px}
.mnav2__label{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.mnav2__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mnav2__grid a{
  padding:12px;border-radius:14px;text-align:center;
  font-weight:800;font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.85);
  border:1px solid rgba(14,116,144,.18);
}
.mnav2__grid a.is-active{background:rgba(14,116,144,.10);color:var(--valley);border-color:var(--valley)}

.mnav2__cta{margin-top:22px;width:100%}

/* intrare in cascada */
.mobile-nav--v2.is-open .mnav2__links a,
.mobile-nav--v2.is-open .mnav2__towns,
.mobile-nav--v2.is-open .mnav2__cta{
  animation:mnavIn .4s cubic-bezier(.22,.7,.3,1) both;
}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(1){animation-delay:.05s}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(2){animation-delay:.08s}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(3){animation-delay:.11s}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(4){animation-delay:.14s}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(5){animation-delay:.17s}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(6){animation-delay:.20s}
.mobile-nav--v2.is-open .mnav2__links a:nth-child(7){animation-delay:.23s}
.mobile-nav--v2.is-open .mnav2__towns{animation-delay:.27s}
.mobile-nav--v2.is-open .mnav2__cta{animation-delay:.32s}
@keyframes mnavIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}

/* bara sus, pe mobil: mai aerisita */
@media (max-width:980px){
  .menu-toggle{border-radius:50%;width:44px;height:44px}
  .header .header__inner > .btn--primary{display:none} /* CTA mutat in drawer */
}
@media (min-width:981px){
  .mobile-nav--v2{display:none}
}

/* ===== Uniformizare interactiuni pe tot site-ul ===== */
.route-card,.note-card,.info__card,.mini,.attraction-card,.meteo-card,.gimg{
  transition:transform .2s ease, box-shadow .2s ease;
}
.route-card:hover,.note-card:hover,.info__card:hover,.mini:hover,
.attraction-card:hover,.meteo-card:hover,.gimg:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.btn{transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.chip{transition:transform .15s ease, background .15s ease}
.chip:hover{transform:translateY(-1px)}
/* titluri de sectiune: bara teal si pe h2 fara .section__head (uniformitate) */
main h2{scroll-margin-top:84px}

/* ===== Breadcrumbs ===== */
.crumbs{
  background:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(15,23,42,.06);
  backdrop-filter:blur(4px);
}
.crumbs__inner{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;
  font-size:13.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.crumbs__inner::-webkit-scrollbar{display:none}
.crumbs a{
  color:var(--muted);
  padding:2px 0;
  transition:color .15s ease;
}
.crumbs a:hover{color:var(--valley)}
.crumbs__sep{color:var(--valley);opacity:.55;font-size:12px}
.crumbs__cur{
  color:var(--ink);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;max-width:62vw;
}
@media (max-width:640px){
  .crumbs__inner{gap:9px;padding:10px 16px;font-size:13px}
}

/* ===== Dark mode - scoped la meteo & webcam ===== */
.theme-toggle-btn{
  border:1px solid rgba(15,23,42,.14);background:#fff;color:var(--ink);
  border-radius:999px;padding:9px 16px;font-weight:800;font-size:13px;
  cursor:pointer;transition:var(--transition, all .2s ease);
}
.theme-toggle-btn:hover{box-shadow:var(--shadow2, 0 6px 20px rgba(2,6,23,.06))}

html[data-theme="dark"] .meteo-card,
html[data-theme="dark"] .webcam-card{
  background:#0F172A;border-color:rgba(255,255,255,.08);
  color:#E2E8F0;
}
html[data-theme="dark"] .meteo-card__alt,
html[data-theme="dark"] .meteo-now__desc,
html[data-theme="dark"] .meteo-meta,
html[data-theme="dark"] .meteo-day__name,
html[data-theme="dark"] .meteo-day__min,
html[data-theme="dark"] .meteo-update{
  color:#94A3B8;
}
html[data-theme="dark"] .meteo-days{border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .meteo-card h2 a{color:#E2E8F0}
html[data-theme="dark"] .webcam-card .card__body p,
html[data-theme="dark"] .webcam-card .card__body h3{color:#E2E8F0}