/**
 * Fase 2 — Rediseño Abasto: header y footer.
 * Requiere abasto-brand.css (tokens + fuentes) cargado antes.
 */

/* ---------- Header: barra superior (logo, búsqueda, cuenta, contacto) ---------- */

#header .header-top {
  background: var(--abasto-blanco);
  border-bottom: 1px solid var(--abasto-linea);
}

#header .header_logo {
  display: flex;
  align-items: center;
}

#header .header_logo .logo {
  height: 42px;
  width: auto;
  max-width: none;
}

#header #search_widget .search_toggle form input[type="text"] {
  font-family: var(--abasto-font-text);
  border: 1px solid var(--abasto-linea);
  border-radius: var(--abasto-radius-card);
}

#header #search_widget .search_toggle form input[type="text"]:focus {
  border-color: var(--abasto-azul);
  outline: none;
}

#header #search_widget .search_button,
#header #search_widget button[type="submit"] {
  /* background-color (no "background" a secas): el shorthand resetea
     background-image/position/size, que es donde el tema tiene el
     ícono de lupa (assets/img/codezeel/search.svg). */
  background-color: var(--abasto-azul);
}

#header .user-info-title,
#header .user-info a {
  font-family: var(--abasto-font-text);
  color: var(--abasto-negro);
}

#header .user-info a:hover {
  color: var(--abasto-rojo);
}

#header .user-info .dropdown-menu {
  border: 1px solid var(--abasto-linea);
  border-radius: var(--abasto-radius-card);
  box-shadow: 0 8px 24px rgba(28, 28, 27, 0.12);
  padding: 6px 0;
  margin-top: 8px;
}

#header .user-info .dropdown-menu .dropdown-item,
#header .user-info .dropdown-menu > li > a {
  padding: 10px 20px;
  font-family: var(--abasto-font-text);
  color: var(--abasto-negro);
}

#header .user-info .dropdown-menu .dropdown-item:hover,
#header .user-info .dropdown-menu > li > a:hover {
  background: var(--abasto-papel);
  color: var(--abasto-rojo);
}

#header .header-cms-block .headercms-title {
  font-family: var(--abasto-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--abasto-muted);
}

#header .header-cms-block .contact-info a {
  font-family: var(--abasto-font-text);
  font-weight: 600;
  color: var(--abasto-azul);
}

#header .header-cms-block .contact-info a:hover {
  color: var(--abasto-rojo);
}

/* ---------- Header: barra de navegación principal ---------- */

#header .header-top-inner {
  background: var(--abasto-azul);
}

#header .top-menu a[data-depth="0"] {
  font-family: var(--abasto-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
  color: var(--abasto-blanco);
}

#header .top-menu a[data-depth="0"]:hover {
  color: var(--abasto-blanco);
  opacity: 0.85;
}

#header .top-menu a[data-depth="0"]:before {
  background: var(--abasto-rojo);
}

/* submenus: fondo claro, texto oscuro, acento en hover */
#header .top-menu .sub-menu {
  background: var(--abasto-blanco);
  border-radius: 0 0 var(--abasto-radius-card) var(--abasto-radius-card);
}

#header .top-menu a:not([data-depth="0"]) {
  font-family: var(--abasto-font-text);
  color: var(--abasto-negro);
}

#header .top-menu a:not([data-depth="0"]):hover {
  color: var(--abasto-rojo);
}

/* ---------- Footer ---------- */

/* El tema define "#footer .footer-before" (con id, background-color: #0058A3)
   -- un simple ".footer-before" nunca le ganaba la especificidad, por eso la
   franja de servicios quedaba con tiras azules a los costados del bloque gris
   centrado (el "corte"). Igualamos el selector y usamos el mismo gris que
   .service-area para que sea una sola franja lisa de punta a punta. */
#footer .footer-before {
  background-color: var(--abasto-tierra-claro);
  border-top: 1px solid var(--abasto-linea);
}

.footer-container {
  background: var(--abasto-azul);
  color: var(--abasto-tierra-claro);
}

/* El tema original define .links h3 / .links .h3 / .links h3 a con más
   especificidad que un simple ".footer-container h3" (y sin !important
   de nuestro lado antes, perdían la pulseada) — iguales selectores acá,
   con !important porque esta sección es enteramente nuestra. */
.footer-container h3,
.footer-container .h3,
.footer-container .links h3,
.footer-container .links .h3,
.footer-container .links h3 a {
  font-family: var(--abasto-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--abasto-blanco) !important;
}

/* Todo el texto de links en blanco liso -- con el fondo azul, matizarlo a
   tierra-claro se leía como "varios grises" sin necesidad. El hover tampoco
   puede ir a azul (el fondo ya es azul, quedaría invisible); usamos el rojo
   de marca, que es el acento interactivo en el resto del sitio. */
.footer-container a,
.footer-container li a {
  color: var(--abasto-blanco) !important;
  font-family: var(--abasto-font-text);
}

.footer-container a:hover,
.footer-container li a:hover {
  color: var(--abasto-rojo) !important;
}

/* Newsletter: el título ".title" no entra en el selector de arriba (no es un
   h3) y quedaba gris oscuro del tema, ilegible sobre el azul. El botón de
   enviar es azul sobre fondo azul -- se pierde por completo, solo se le ve
   el ícono blanco flotando sin botón; pasado a rojo de marca para que se
   distinga como acción, con hover más oscuro (mismo negro que ya traía). */
.footer-container .block_newsletter .title,
.footer-container .block_newsletter .title span {
  color: var(--abasto-blanco) !important;
}

.footer-container .block_newsletter form input.btn {
  background-color: var(--abasto-rojo) !important;
}

.footer-container .block_newsletter form input.btn:hover {
  background-color: var(--abasto-negro) !important;
}

/* ---------- Franja de servicios (Presupuestos/Envíos/Precios/Asesoramiento) ---------- */
/* Especificidad igualada a la del tema para poder pisarla: fondo gris de la
   paleta (no blanco/papel liso, no azul) e íconos en gris oscuro consistente. */

#czservicecmsblock .service_container .service-area {
  background: var(--abasto-tierra-claro);
}

#czservicecmsblock .service_container .service-area .service-fourth {
  color: var(--abasto-tierra-oscuro);
}

#czservicecmsblock .service_container .service-area .service-fourth .service-inner {
  background: transparent;
}

#czservicecmsblock .service_container .service-area .service-fourth .service-icon {
  background: none;
  font-family: 'FontAwesome';
  font-size: 26px;
  line-height: 40px;
  color: var(--abasto-tierra-oscuro);
  text-align: center;
}

/* Los 4 iconos vienen de un sprite viejo -- se reemplazan por glifos de
   FontAwesome (ya cargado) para poder recolorearlos parejo. El de "Envíos"
   además estaba mal: un avión, cuando el reparto es en camión. */
#czservicecmsblock .service_container .service-area .service-fourth.service1 .icon1:before {
  content: "\f0d6" !important; /* fa-money */
}
#czservicecmsblock .service_container .service-area .service-fourth.service2 .icon2:before {
  content: "\f0d1" !important; /* fa-truck */
}
#czservicecmsblock .service_container .service-area .service-fourth.service3 .icon3:before {
  content: "\f02c" !important; /* fa-tags */
}
#czservicecmsblock .service_container .service-area .service-fourth.service4 .icon4:before {
  content: "\f087" !important; /* fa-thumbs-o-up */
}

#czservicecmsblock .service_container .service-area .service-fourth .service-content {
  color: var(--abasto-tierra-oscuro);
}

/* El tema define color en ".service-fourth .service-content .service-heading"
   (una clase más que la nuestra) -- iguales selectores + !important para
   pisarlo, si no el texto queda blanco sobre el gris claro nuevo (ilegible). */
#czservicecmsblock .service_container .service-area .service-fourth .headercms-title,
#czservicecmsblock .service_container .service-area .service-fourth .service-content .service-heading {
  font-family: var(--abasto-font-display) !important;
  font-weight: 700 !important;
  color: var(--abasto-negro) !important;
}

.footer-after {
  background: var(--abasto-negro);
}

.footer-after .copyright {
  font-family: var(--abasto-font-text);
  font-size: 12px;
  color: var(--abasto-tierra-medio);
  text-align: center;
  padding: 14px 0;
}

.footer-after .copyright a {
  color: var(--abasto-tierra-claro);
}