/* ============================================================
   FOLC HOME COFFEE — NAV
   Template: Tienda Nube / Río
   Archivo: folc-nav.css

   Ajusta el layout del header NATIVO de Río (no reemplaza
   markup). Requiere en el admin (Diseño > Personalizar):
   - Menú hamburguesa en desktop: desactivado
   - Posición del logo (desktop): "Izquierda en línea"

   Clases reales confirmadas leyendo el theme (no genéricas):
   - .head-main / header            -> contenedor del header
   - .row.no-gutters.align-items-center > .col.d-none.d-md-inline-block
                                     -> wrapper del menú desktop
   - .nav-desktop-list              -> <ul> de links
   - .nav-list-link / .selected     -> <a> de cada link
   - .col-utility                   -> columnas de buscador/cuenta/carrito
   - .utilities-icon                -> <svg> de cada ícono
   - .badge-amount                  -> badge numérico del carrito
   ============================================================ */


/* ============================================================
   01. HEADER — ALTURA Y ESPACIADO
   ============================================================ */
.head-main {
  min-height: 70px;
}

.head-main .row.no-gutters.align-items-center {
  min-height: 70px;
}


/* ============================================================
   02. LOGO (imagen subida desde el admin)
   ============================================================ */
.head-main .logo-img {
  max-height: 56px !important;
  width: auto;
}


/* ============================================================
   03. MENÚ DESKTOP — centrado real
   Causa real encontrada: .nav-desktop trae "width:100%" hardcodeado
   en el CSS nativo de Río (style-critical.scss línea ~1273), así que
   siempre ocupaba el 100% del wrapper .col y no dejaba espacio libre
   para que justify-content:center hiciera algo. Se neutraliza acá.
   ============================================================ */
@media (min-width: 768px) {
  .head-main .row.no-gutters.align-items-center > .col.d-none.d-md-inline-block {
    display: flex !important;
    flex: 1 1 0 !important;
    justify-content: center;
    align-items: center;
    margin-left: var(--space-md, 24px);
  }

  .nav-desktop {
    width: auto !important;
    flex: 0 0 auto;
  }
}

.nav-desktop-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list-link {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #999 !important;
  text-decoration: none !important;
  transition: var(--transition, all 0.2s ease) !important;
}

.nav-list-link:hover,
.nav-list-link.selected {
  color: var(--folc-white, #fff) !important;
}

/* FIX: .nav-list-link se reusa adentro del desplegable de categorías
   (.desktop-dropdown), que tiene fondo claro nativo — el gris #999 pensado
   para el header negro quedaba muy bajo de contraste ahí. Se oscurece solo
   dentro del dropdown, sin tocar el link del nav principal. */
.desktop-dropdown .nav-list-link {
  color: var(--folc-black, #1c1c1a) !important;
}

.desktop-dropdown .nav-list-link:hover {
  color: var(--folc-wine, #7a1c1c) !important;
}


/* ============================================================
   04. ICONOS UTILITARIOS — buscar / cuenta / carrito
   ============================================================ */
.col-utility {
  margin-left: var(--space-md, 22px);
}

.utilities-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  color: #999;
  transition: var(--transition, all 0.2s ease);
}

.utilities-container:hover .utilities-icon {
  color: var(--folc-white, #fff);
}

.cart-summary a {
  position: relative;
}

.badge-amount {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  font-size: 9px !important;
  line-height: 1 !important;
  background: var(--folc-wine, #7a1c1c) !important;
  color: var(--folc-white, #fff) !important;
  border-color: var(--folc-wine, #7a1c1c) !important;
}


/* ============================================================
   05. ANNOUNCEMENT BAR — clase real es .js-adbar (no .announcement-bar)
   folc-base.css apunta a un selector que no matchea en Río;
   se corrige acá para no duplicar el bloque 09 de folc-base.css.
   ============================================================ */
.js-adbar {
  background: var(--folc-wine, #7a1c1c) !important;
  color: var(--folc-white, #fff) !important;
}

.js-adbar .adbar-message,
.js-adbar a {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--folc-white, #fff) !important;
}


/* ============================================================
   FIN — folc-nav.css
   ============================================================ */