/* ZeelandFix — Cabecera + Banner Club
   Paleta: SOLO los 4 colores oficiales del proyecto (navy, lima, blanco, cyan).
   El navy se usa aquí únicamente como color de texto (igual que en el resto del sitio),
   nunca como fondo de esta sección, según lo pedido. */

.zf-lang-bar{background:#fff;border-bottom:1px solid #EEF1F6;}
.zf-lang-bar-inner{max-width:1320px;margin:0 auto;padding:6px 24px;display:flex;justify-content:flex-end;gap:6px;}
.zf-lang-btn{background:#fff;border:2px solid #D8E3F0;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:800;color:#1A2E5A;cursor:pointer;font-family:'Nunito',sans-serif;}
.zf-lang-btn.active,.zf-lang-btn:hover{border-color:#39C700;color:#2EA800;}

/* ── Banner Club ── */
.zf-club-banner{background:#fff;border-bottom:1px solid #EEF1F6;position:relative;overflow:hidden;}
.zf-club-banner-inner{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12.5px;font-weight:800;text-align:center;color:#1A2E5A;flex-wrap:wrap;}
.zf-club-banner-inner strong{color:#2EA800;}
.zf-club-cta{display:inline-flex;align-items:center;gap:5px;background:#39C700;color:#fff;padding:5px 14px;border-radius:999px;font-size:11.5px;font-weight:900;text-decoration:none;white-space:nowrap;transition:transform .2s ease;}
.zf-club-cta:hover{transform:translateY(-2px);}
.zf-club-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;color:#B8BEC9;cursor:pointer;font-size:16px;padding:4px;line-height:0;z-index:3;}
.zf-club-close:hover{color:#0095FF;}

/* Animación: coche recorriendo la carretera punteada hacia una casa, en bucle */
.zf-club-anim{position:relative;width:130px;height:26px;flex-shrink:0;}
.zf-road{position:absolute;left:0;right:22px;top:50%;height:2px;background-image:linear-gradient(to right, #0095FF 0 6px, transparent 6px 12px);background-size:12px 2px;transform:translateY(-50%);}
.zf-house{position:absolute;right:0;top:50%;transform:translateY(-50%);color:#1A2E5A;font-size:20px;line-height:0;}
.zf-car{position:absolute;top:50%;left:0;transform:translate(0,-50%);color:#2EA800;font-size:16px;line-height:0;animation:zf-car-drive 3.2s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes zf-car-drive{
  0%{left:0;opacity:0;} 8%{opacity:1;} 85%{left:calc(100% - 30px);opacity:1;} 92%{opacity:0;} 100%{left:calc(100% - 30px);opacity:0;}
}
@media (prefers-reduced-motion: reduce){.zf-car{animation:none;left:calc(100% - 30px);opacity:1;}}

/* ── Cabecera principal ── */
.zf-site-header{background:#fff;border-bottom:1px solid #EEF1F6;position:relative;overflow:visible;z-index:10;
  -webkit-user-select:none;-moz-user-select:none;user-select:none; /* anti-copia (regla del proyecto) */
}
.zf-site-header-inner{max-width:1320px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:center;gap:151px;position:relative;}
/* 151px ≈ 40mm de pantalla — el hueco entre logo y el bloque de navegación completo. */

.zf-logo{display:flex;align-items:center;flex-shrink:0;position:relative;z-index:11;text-decoration:none;}
.zf-logo img,
.zf-logo .custom-logo{height:208px;width:auto;display:block;-webkit-user-drag:none;}

/* Menú de WordPress + iconos, fusionados en un único bloque visual — mismo espaciado
   interno que los propios elementos del menú, para que no se note la costura entre
   ambos y parezcan un solo menú continuo. */
.zf-nav-group{display:flex;align-items:center;gap:8px;flex-shrink:0;}

.zf-nav{flex-shrink:0;align-self:center;}
.zf-nav-list{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap;}
.zf-nav-list a{display:block;padding:11px 16px;border-radius:10px;font-size:15px;font-weight:800;color:#1A2E5A;text-decoration:none;transition:.2s;position:relative;}
.zf-nav-list a:hover{color:#0095FF;}
.zf-nav-list .current-menu-item a,
.zf-nav-list .current_page_item a{color:#2EA800;}
.zf-nav-list .current-menu-item a::after,
.zf-nav-list .current_page_item a::after{content:'';position:absolute;left:16px;right:16px;bottom:4px;height:3px;border-radius:2px;background:#39C700;}

/* ── Responsive mobile-first (regla del proyecto: exigente en móvil) ── */
@media(max-width:960px){
  .zf-site-header-inner{height:auto;padding:20px 18px 16px;flex-wrap:wrap;justify-content:center;gap:12px;}
  .zf-logo{margin-right:0;}
  .zf-nav{margin-left:0;width:100%;display:flex;justify-content:center;}
  .zf-logo img,
  .zf-logo .custom-logo{height:130px;}
  .zf-nav-list{overflow-x:auto;}
  .zf-club-banner-inner{font-size:11px;padding:8px 40px;}
  .zf-club-anim{display:none;}
}

/* ── Iconos de cabecera: Inloggen/Registreren (o Account), Winkel, Winkelwagen ── */
.zf-header-icons{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative;z-index:11;margin-left:4px;}

.zf-hicon{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  color:#1A2E5A;
  text-decoration:none;
  background:transparent; /* sin fondo ni marco */
  transition:color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.zf-hicon i{font-size:26px; line-height:1; transition:transform .2s ease;} /* iconos más grandes, sin texto debajo */

.zf-hicon:hover,
.zf-hicon:focus-visible{
  color:#39C700; /* verde lima del tema, igual para los 4 */
  transform:translateY(-2px);
}
.zf-hicon:hover i{transform:scale(1.12);}

.zf-hicon-badge{
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:8px;
  background:#39C700; color:#fff;
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
  box-shadow:0 0 0 2px #fff;
  animation:zf-badge-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes zf-badge-pop{0%{transform:scale(0);}100%{transform:scale(1);}}

@media(max-width:960px){
  .zf-nav-group{flex-direction:column; gap:10px; width:100%;}
  .zf-header-icons{order:3; width:100%; justify-content:center; gap:20px; margin-left:0;}
}