/**
 * MAP THEME CSS — map-theme.css
 * ================================
 * Sobreescriptures de projecte per al sistema de mapes.
 * Carrega SEMPRE DESPRÉS de map-base.css.
 *
 * AQUEST ÉS EL FITXER QUE HAS DE MODIFICAR PER A CADA PROJECTE.
 * No toquis map-base.css excepte per corregir bugs del sistema.
 *
 * ÍNDEX:
 *   1. Variables CSS (colors, fonts, mides)
 *   2. Tipografia
 *   3. Colors de marca
 *   4. Components personalitzats
 *   5. Responsive específic del projecte
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. VARIABLES CSS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Color principal del projecte — Begur turquesa */
  --map-accent:        #65C9BE;
  --map-accent-dark:   #4BA89E;
  --map-accent-alpha:  rgba(101, 201, 190, 0.15);

  /* Text */
  --map-text:          #2D4651;
  --map-text-light:    rgba(45, 70, 81, 0.7);

  /* Fons */
  --map-bg:            #EFF4F4;
  --map-bg-card:       #ffffff;
  --map-bg-btm:        var(--map-accent);

  /* Altimetria */
  --map-profile-fill:   var(--map-accent);
  --map-profile-stroke: var(--map-accent);

  /* Mides / forma */
  --map-radius:      8px;      /* cantonades arrodonides */
  --map-sidebar-w:   400px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. TIPOGRAFIA
   Substitueix per les fonts del teu projecte.
   ─────────────────────────────────────────────────────────────────────────── */

/* Cos de text */
.rutes-bar ul li .rutes-cnt ul li,
.rutas-list ul li h5 span,
ul#infoStats li h5 span,
body {
  font-family: 'Gotham-Medium', sans-serif;
}

/* Negreta / destacat */
.rutes-bar ul li .rutes-cnt span,
.rutes-bar h3,
.rutes-content h2,
.rutes-content h3,
.cat-list ul li,
.cat-sec ul li .icon-label,
.btns-sec ul li a,
.veure-mapa a,
.veure-llista a,
.recurs-sec ul li .recurs-cnt p,
.recurs-sec ul li .recurs-cnt span,
.rutas-list ul li h5,
ul#infoStats li h5,
#infoTitle,
#infocats {
  font-family: 'Gotham-Bold', sans-serif;
}

/* Semi-bold / mig */
.rutes-img-sec span,
.btm-btn ul li a,
.addr-info ul li,
#infoSubtitle {
  font-family: 'Gotham-Medium', sans-serif;
}

/* Títols */
.categoria-title h1 {
  font-family: 'Gotham-Black', sans-serif;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. COLORS DE MARCA
   Aplica el branding del projecte sobreescrivint estils base.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fons dels elements interactius principals */
.veure-mapa a,
.veure-llista a,
.btns-sec ul li a,
.btm-btn,
.cat-list ul li,
.ev8-cluster,
.rutes-bar ul li .rutes-cnt span,
.recurs-sec ul li .recurs-cnt span,
.right-arrow a,
.cat-sec ul li a,
.cat-sec ul li a:hover .icon-btn,
.cat-sec ul li.active .icon-btn,
#infocats {
  background: var(--map-accent);
}

/* Variació de transparència per a botons secundaris */
.btns-sec ul li:nth-child(2) a { background: rgba(101, 201, 190, 0.85); }
.btns-sec ul li:nth-child(3) a { background: rgba(101, 201, 190, 0.70); }
.btns-sec ul li:nth-child(4) a { background: rgba(101, 201, 190, 0.55); }

/* Hover general */
.btns-sec ul li a:hover,
.veure-mapa a:hover,
.veure-llista a:hover,
.right-arrow a:hover {
  background: var(--map-accent-dark) !important;
}

/* Text de color d'accent */
.rutes-bar h3,
.rutes-content h3,
.btm-btn ul li a,
.rutas-desc a,
.addr-info ul li.horaris a,
.addr-info ul li a:hover {
  color: var(--map-accent);
}

/* Logotip (ajusta la mida màxima al teu projecte) */
.logo img {
  max-width: 175px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. COMPONENTS PERSONALITZATS
   Afegeix aquí qualsevol estil específic del projecte que no existeixi a base.
   ─────────────────────────────────────────────────────────────────────────── */

/*
  Exemple: afegir una capa de color al fons del detall de ruta
  .rutes-content { background: #f8fafc; }
*/

/*
  Exemple: arrodonir les targetes del sidebar
  :root { --map-radius: 8px; }
  .rutes-bar ul li a { border-radius: var(--map-radius); }
*/


/* ─────────────────────────────────────────────────────────────────────────────
   5. RESPONSIVE ESPECÍFIC DEL PROJECTE
   Regles mòbil/tablet que no estan al base i que depenen del disseny del tema.
   ─────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .logo img { max-width: 100px; }
}