/* ==============================================
   La Cucina — Header Component (Barik Trade)
   2-row compact layout + sticky category nav
   Author: Bariklabs.com
   Link: https://bariklabs.com
   Consistent with category / search / footer tokens
   ============================================== */

/* --- Tokens (mirror category.css / footer.css :root) --- */
:root {
  --accent:        #c70000;
  --accent-soft:   #c70000;
  --accent-dim:    rgba(139, 26, 26, 0.08);
  --text:          #111111;
  --text-muted:    #777777;
  --border:        #dddddd;
  --surface:       #ffffff;
  --green:         #2e7d4f;
  --font:          system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:        6px;
  --radius-sm:     4px;
  --transition:    all 0.15s ease;

  /* Header-specific */
  --header-h:      88px;
  --header-h-sm:   68px;
}

/* ==============================================
   TOP BAR — contact / hours / support / language
   ============================================== */
.lc-topbar {
  background: #111111;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font);
  font-size: 12px;
}

.lc-topbar * {
  box-sizing: border-box;
}

.lc-topbar .container {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 16px;
}

.lc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 42px;
}

.lc-topbar__left,
.lc-topbar__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lc-topbar a,
.lc-topbar__static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.lc-topbar a:hover,
.lc-topbar a:focus {
  color: #ffffff;
  text-decoration: none;
}

.lc-topbar__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.lc-topbar__icon svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
  opacity: 0.7;
}

.lc-topbar__divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  flex: 0 0 auto;
}

/* --- Language switcher --- */
.lc-topbar__lang {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lc-topbar__lang a {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lc-topbar__lang a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.lc-topbar__lang a.is-active {
  color: #ffffff;
  background: var(--accent);
}

.lc-topbar__lang a.is-active:hover {
  background: var(--accent-soft);
}

/* ==============================================
   ROOT WRAPPER
   ============================================== */
.lc-header {
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.lc-header * {
  box-sizing: border-box;
}

.lc-header .container {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ==============================================
   ROW 1 — LOGO / SEARCH / UTILITY
   ============================================== */
.lc-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: var(--header-h);
  padding: 18px 0;
}

/* --- Logo --- */
.lc-header__logo {
  flex: 0 0 auto;
}

.lc-header__logo a {
  display: block;
}

.lc-header__logo img {
  display: block;
  height: 48px;
  width: auto;
}

/* ==============================================
   SEARCH
   ============================================== */
.lc-header__search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
}

.lc-search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: var(--transition);
}

.lc-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.lc-search__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 0 0 18px;
  align-self: center;
  color: var(--text-muted);
  pointer-events: none;
}

.lc-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
}

.lc-search__input::placeholder {
  color: var(--text-muted);
}

.lc-search__btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
}

.lc-search__btn:hover {
  background: var(--accent-soft);
}

.lc-search__btn svg {
  width: 17px;
  height: 17px;
}

/* ==============================================
   UTILITY CLUSTER
   ============================================== */
.lc-header__utility {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lc-utility-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
}

.lc-utility-item:hover,
.lc-utility-item:focus {
  color: var(--accent);
  background: var(--accent-dim);
  text-decoration: none;
}

.lc-utility-item__icon {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.lc-utility-item__icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.lc-utility-item__label {
  line-height: 1.2;
}

/* Wishlist count badge */
.lc-utility-item__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* ==============================================
   ACCOUNT DROPDOWN
   (keeps Bootstrap dropdown / data-toggle markup
   for OC3 JS compatibility, restyled here)
   ============================================== */
.lc-header .dropdown {
  position: relative;
}

.lc-header .dropdown-toggle .caret {
  display: inline-block;
  margin-left: 2px;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  vertical-align: middle;
  opacity: 0.6;
}

.lc-header .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.lc-header .dropdown.open > .dropdown-menu,
.lc-header .dropdown-menu.show {
  display: block;
}

.lc-header .dropdown-menu li a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: var(--transition);
}

.lc-header .dropdown-menu li a:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

.lc-header .dropdown-menu li + li {
  margin-top: 1px;
}

/* ==============================================
   MINI-CART (B-Cart) — alignment only.
   .cart-trigger / .bcart-* internals are styled
   in their own stylesheet — do not redeclare here.
   ============================================== */
.lc-header .lc-mini-cart {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 12px;
  padding-left: 20px;
}

.lc-header .lc-mini-cart::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--border);
}

.lc-header .lc-mini-cart .cart-trigger {
  margin: 0;
}

/* ==============================================
   ROW 2 — STICKY CATEGORY NAV
   ============================================== */
.lc-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}

.lc-nav.is-stuck {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.lc-nav .container {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 16px;
}

.lc-nav__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
}

.lc-nav__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

.lc-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.lc-nav__link:hover,
.lc-nav__link:focus,
.lc-nav__link.is-active {
  color: var(--accent);
  background: var(--accent-dim);
  text-decoration: none;
}

/* Highlighted nav item (e.g. Specials/Aanbiedingen) */
.lc-nav__link--highlight {
  position: relative;
  height: auto;
  color: var(--accent);
  background: #ffffff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  margin: 0 2px;
  padding: 9px 16px;
  font-weight: 600;
}

.lc-nav__link--highlight:hover,
.lc-nav__link--highlight:focus {
  color: #ffffff;
  background: var(--accent);
}

.lc-nav__link--highlight::after {
  display: none;
}

/* Notification dot — top-left corner */
.lc-nav__link--highlight::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px #ffffff;
  transition: var(--transition);
}

.lc-nav__link--highlight:hover::before {
  background: #ffffff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Nav item — positioning context for mega panel */
.lc-nav-item {
  position: relative;
}

/* Separator between main nav items */
.lc-nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -4px;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background: var(--border);
}

/* No separator directly before/after the highlighted pill */
.lc-nav-item:has(.lc-nav__link--highlight)::after,
.lc-nav-item:has(+ .lc-nav-item .lc-nav__link--highlight)::after {
  display: none;
}

/* ==============================================
   MEGA MENU — intentionally not included here.
   Mega menu markup, styling and behavior (panel,
   chevron, open/close states, mobile accordion)
   are owned by a separate module (bmegamenu).
   This stylesheet only owns: topbar, header bar,
   search, utility cluster, the sticky nav shell
   (.lc-nav, .lc-nav__toggle), .lc-nav-item
   separators, and .lc-nav__link/.lc-nav__link--
   highlight base styling for whatever links the
   bmegamenu module renders inside .lc-nav__list.
   ============================================== */

/* Mobile nav toggle button styling — kept available in case
   bmegamenu reuses this class for its own mobile toggle button.
   No button with this class is rendered by header.twig itself;
   the .lc-nav__inner wrapper now only contains {{ bmegamenu }}. */
.lc-nav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}

.lc-nav__toggle svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

/* ==============================================
   RESPONSIVE
   ============================================== */

/* Tablet — collapse utility labels to icons only,
   except cart price */
@media (max-width: 991px) {
  .lc-topbar__static {
    display: none;
  }

  .lc-header__bar {
    gap: 16px;
    min-height: var(--header-h-sm);
  }

  .lc-header__logo img {
    height: 38px;
  }

  .lc-utility-item__label {
    display: none;
  }

  .lc-utility-item {
    padding: 8px;
  }

  .lc-header .dropdown-toggle .caret {
    display: none;
  }
}

/* Mobile — stack search below bar, hamburger nav */
@media (max-width: 767px) {
    .cart-trigger .cart-text {
        display: none;
    }


  .lc-topbar__left {
    display: none;
  }

  .lc-topbar__inner {
    justify-content: flex-start;
  }

  .lc-topbar__right {
    gap: 12px;
    margin-left: 0;
  }

  .lc-topbar__divider {
    display: none;
  }

  .lc-header__bar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
  }

  .lc-header__logo {
    order: 1;
  }

  .lc-header__utility {
    order: 2;
    margin-left: auto;
    gap: 0;
  }

  .lc-header__search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .lc-nav__toggle {
    display: inline-flex;
  }

  .lc-nav__link {
    height: auto;
    padding: 11px 4px;
    border-bottom: 1px solid var(--border);
  }

  .lc-nav-item::after {
    display: none;
  }

  .lc-nav__inner {
    flex-wrap: wrap;
  }

  /* .lc-nav__list open/closed state and mega-menu mobile collapse
     are handled by the bmegamenu module — not styled here. */
}

/* Small phones — tighten spacing further */
@media (max-width: 380px) {
  .lc-header .container {
    padding: 0 12px;
  }

  .lc-utility-item {
    padding: 8px 6px;
  }
}