/* Hero Section */
    .video-header {
      position: relative;
      width: 100%;
      height: 40vh;      /* your header height */
      overflow: hidden;
      background: linear-gradient(180deg, #D62828 0%, #F77F00 30%, #FCF6F5 95%, #ffffff 100%);
    }

    #tsparticles {
      position: absolute; /* absolutely inside header */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;       /* now matches header height */
      z-index: 0;
    }

    .overlay-content {
      position: relative;
      color: white;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
    }


    .overlay-content h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      text-shadow: 0 0 10px rgba(0,0,0,0.8);
    }

    .overlay-content p {
      font-size: 1.25rem;
    }

    @media (max-width: 768px) {
      .video-header {
        padding: 10rem 2rem; /* more padding on mobile */
      }
      .overlay-content h1 { font-size: 1.5rem; }
      .overlay-content p { font-size: 1rem; }
    }


        /* Buttons */
    .themed-btn2, .themed-btn4 {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    .themed-btn2 {
      background: linear-gradient(90deg, #ff6b35, #e63946);
      color: #fff;
    }
    .themed-btn2:hover { filter: brightness(1.1); transform: scale(1.05); }

    .themed-btn4 {
      background: #fff;
      color: #ff6b35;
      border: 2px solid #ff6b35;
    }
    .themed-btn4:hover { background: #ff6b35; color: #fff; }

  /* --- Map & Canton Hover Styles (scoped to this section) --- */
  .canton .base { fill: #f2f2f2; stroke: none; }

  
  /* Container & responsiveness */
  .responsive-map {
    aspect-ratio: 1349 / 865;             /* keep your map ratio */
    width: min(100vw, 1200px);
    margin: 0 auto;
    position: relative;
  }
  #swiss-map { width: 100%; height: 100%; display: block; }
  .responsive-map, #swiss-map { position: relative; z-index: 1; }

  @media (max-width: 1200px) { .responsive-map { width: 100vw; } }

  /* The canton path you already have becomes the "outline" */
  .responsive-map .canton .outline {
    fill: transparent;                     /* not 'none' -> keeps pointer-events sane */
    stroke: url(#mapOutlineGrad) !important;
    stroke-width: 1.2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke 150ms ease, stroke-width 150ms ease;
    pointer-events: none;                  /* events go to the .hitarea */
  }

  /* A fat invisible path on top to make hover easy anywhere inside */
  .responsive-map .canton .hitarea {
    fill: rgba(0,0,0,0.001);               /* painted (transparent) -> good for hit-testing */
    stroke: none;
    pointer-events: all;
    cursor: pointer;
  }

  /* The photo clipped to the canton */
  .responsive-map .canton image.photo {
    opacity: 0;
    transform: scale(1);
    transition: opacity 220ms ease, transform 350ms ease;
    pointer-events: none;
  }

  /* Hover/focus effects */
  .responsive-map .canton:hover .outline,
  .responsive-map .canton:focus-within .outline {
    stroke-width: 2.2;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.25));
  }
  .responsive-map .canton:hover image.photo,
  .responsive-map .canton:focus-within image.photo {
    opacity: 1;
    transform: scale(1);
  }

  /* Canton codes overlay */
  #swiss-map .canton .canton-code {
  pointer-events: none;         /* clicks go through to the canton */
}
/* base label styling */
#swiss-map g.canton { cursor: pointer;  outline: none;}
#swiss-map .hitarea { fill: rgba(0,0,0,0); stroke: none; pointer-events: all; }
#swiss-map .canton-name {
  font-weight: 600;
  font-size: 18px;
  fill: #000;
  stroke: #fff;               /* outline color */
  stroke-width: 1px;
  paint-order: stroke fill; 
  pointer-events: none;  /* clicks go through */
}


#swiss-map .canton .hitarea {
  fill: rgba(0,0,0,0);          /* fully transparent */
  stroke: none;                 /* no border */
  pointer-events: all;          /* still clickable */
}
  /* Optional: keyboard focus ring */
  .canton:focus-within .hitarea {
    outline: none;
  }
/* Optional: stop focus rings on the shape itself; move to group instead */
#swiss-map .canton:focus { outline: none; }
#swiss-map .canton .outline { outline: none; }
#swiss-map g.canton:focus:not(:focus-visible) { outline: none; }
/* Provide a subtle, custom focus style for keyboard users (optional) */
#swiss-map g.canton:focus-visible .outline {
  stroke: #1a73e8;          /* pick your brand color */
  stroke-width: 2.5;
}

#CH-BORDER { pointer-events: none; }

.sunset-search{ position:relative; display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.58); border:1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px); width:min(420px, 100%); }
.sunset-search input{ flex:1; border:none; outline:none; background:transparent; color:#fff; font-size:15px; }
.sunset-search svg{ opacity:.85; }