/* assets/css/store-header.css — site header (Phase 3, 2026-07).
 *
 * Three-tier header: info bar (phone/delivery/hours) -> main header
 * (logo/search/cart) -> main nav (category links + mega-menu trigger).
 * Depends on the :root tokens in store-framework.css and the generic
 * .collapse/.collapsing rules there for the mobile nav toggle (no new JS
 * mechanism — reuses assets/js/store-collapse.js, already loaded).
 *
 * The mega-menu panel (#storeMegaMenu) is styled minimally here (Phase 3:
 * empty/hidden placeholder) — its real content/open-close behavior is
 * Phase 4's job, deliberately not built yet so each phase stays reviewable
 * on its own.
 */

/* ---- info bar ---- */
.store-info-bar {
  background:var(--color-surface-alt);
  border-bottom:1px solid var(--color-border);
  font-size:.875rem;
  color:var(--color-text-muted);
}
.store-info-bar-inner {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.4rem 1rem;
  padding-top:.4rem;
  padding-bottom:.4rem;
}
.store-info-bar-group { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; min-width:0; }
.store-info-bar-item {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
a.store-info-bar-item:hover,
a.store-info-bar-item:focus-visible { color:var(--color-primary-dark); }
.store-info-bar-item svg { flex:0 0 auto; opacity:.8; }
.store-info-bar-delivery { color:var(--color-primary-dark); font-weight:500; }

/* ---- main header ---- */
.store-main-header { background:var(--color-background); border-bottom:1px solid var(--color-border); }
.store-main-header-inner {
  display:flex;
  align-items:center;
  gap:2rem;
  /* Trimmed slightly from .85rem so the ~12% larger logo below doesn't
     grow the overall header row height — logo was already the row's
     tallest element (47px vs the ~44px search/cart controls), so the
     row height tracks the logo; the padding cut offsets the logo's own
     growth almost exactly. */
  padding-top:.65rem;
  padding-bottom:.65rem;
}
.store-logo { flex:0 0 auto; display:inline-flex; align-items:center; margin-right:.5rem; }
/* ~12% larger than the source 150x47 (168x53) — noticeably more present
   without doubling it or pushing the header taller (see the padding
   trim above). Still well inside the existing 320px-wide logo
   derivative's real resolution, so this stays sharp. */
.store-logo img { display:block; width:168px; height:auto; }

.store-search-form {
  flex:1 1 auto;
  min-width:0;
  max-width:640px;
  display:flex;
  align-items:stretch;
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-medium);
  background:var(--color-background);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.store-search-form:focus-within {
  border-color:var(--color-primary-dark);
  box-shadow:0 0 0 .2rem var(--color-primary-focus-ring);
}
.store-search-input {
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  padding:.6rem .9rem;
  font-size:1rem;
  color:var(--color-text);
  outline:0;
}
.store-search-input::placeholder { color:var(--color-text-muted); }
.store-search-submit {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  border:0;
  border-left:1px solid var(--color-border);
  background:transparent;
  color:var(--color-text-muted);
  cursor:pointer;
  border-radius:0 var(--radius-medium) var(--radius-medium) 0;
  transition:background-color .15s ease, color .15s ease;
}
.store-search-submit:hover,
.store-search-submit:focus-visible { background:var(--color-primary-soft); color:var(--color-primary-dark); }
.store-search-submit:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:-2px; }

/* margin-left:auto — real bug fix, not styling: .store-search-form's
   flex-grow stops absorbing space once it hits its own max-width, and
   with nothing else claiming the remainder, the leftover collected as
   dead space trailing after .store-header-actions instead of the cart
   ever reaching the container's true right edge — at wide viewports
   (1440px+) this alone accounted for several hundred px of the "whole
   header weighs left" look. auto-margin claims exactly that leftover. */
.store-header-actions { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:1.5rem; margin-left:auto; }

.store-header-phone {
  display:flex;
  align-items:center;
  gap:.6rem;
  color:var(--color-text);
  text-decoration:none;
  white-space:nowrap;
}
.store-header-phone svg { flex:0 0 auto; color:var(--color-primary-dark); }
.store-header-phone-text { display:flex; flex-direction:column; line-height:1.25; }
.store-header-phone-label { font-size:.8rem; color:var(--color-text-muted); }
.store-header-phone-number { font-size:.95rem; font-weight:600; color:var(--color-heading); }
.store-header-phone:hover .store-header-phone-number,
.store-header-phone:focus-visible .store-header-phone-number { color:var(--color-primary-dark); }
.store-header-phone:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:2px; border-radius:4px; }

/* ---- cart indicator ---- */
.store-cart-indicator {
  flex:0 1 auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  max-width:100%;
  padding:.45rem .6rem;
  border-radius:var(--radius-medium);
  color:var(--color-text);
  text-decoration:none;
  min-height:44px;
  transition:background-color .15s ease;
}
.store-cart-indicator:hover,
.store-cart-indicator:focus-visible { background:var(--color-surface-alt); color:var(--color-text); }
.store-cart-indicator:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:2px; }
.store-cart-indicator-icon { position:relative; display:inline-flex; flex:0 0 auto; }
.store-cart-indicator-badge {
  position:absolute;
  top:-8px;
  right:-9px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--color-primary-dark);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  line-height:1;
}
.store-cart-indicator-text { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.store-cart-indicator-label { font-size:.8rem; color:var(--color-text-muted); }
.store-cart-indicator-total { min-width:0; font-size:.95rem; font-weight:600; color:var(--color-heading); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.store-cart-indicator-total-empty { font-weight:500; color:var(--color-text-muted); }

/* ---- main nav ---- */
.store-main-nav {
  position:relative;
  background:var(--color-background);
  border-bottom:1px solid var(--color-border);
  box-shadow:var(--shadow-small);
}
.store-main-nav-inner { display:flex; align-items:center; min-height:48px; }
.store-nav-toggle {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  padding:.4rem .25rem;
  border:0;
  background:transparent;
  color:var(--color-text);
  font-weight:500;
  cursor:pointer;
}
.store-nav-toggle:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:2px; }

.store-nav-list {
  display:flex;
  align-items:stretch;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.store-nav-item { display:flex; align-items:stretch; position:relative; }
.store-nav-link {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.75rem .85rem;
  min-height:44px;
  color:var(--color-text);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  border:0;
  background:transparent;
  cursor:pointer;
  white-space:nowrap;
}
.store-nav-link:hover,
.store-nav-link:focus-visible { color:var(--color-primary-dark); }
.store-nav-link:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:-2px; }
.store-nav-link-highlight { color:var(--color-accent-dark); }
.store-nav-link-highlight:hover,
.store-nav-link-highlight:focus-visible { color:var(--color-accent-dark); text-decoration:underline; }
.store-nav-categories-trigger[aria-expanded="true"] { color:var(--color-primary-dark); background:var(--color-primary-soft); }

/* ---- mega menu panel ---- */
/* [hidden] is native — no display rule needed for the closed state; these
   rules only style the panel while it's actually shown. */
.store-mega-menu-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1.5rem;
}
.store-mega-menu-column { min-width:0; }
.store-mega-menu-heading {
  display:block;
  margin-bottom:.6rem;
  padding-bottom:.4rem;
  border-bottom:2px solid var(--color-primary-soft);
  color:var(--color-heading);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
}
a.store-mega-menu-heading:hover,
a.store-mega-menu-heading:focus-visible { color:var(--color-primary-dark); }
.store-mega-menu-heading-plain { border-bottom-color:var(--color-border); }
.store-mega-menu-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; }
.store-mega-menu-list a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.4rem .3rem;
  min-height:36px;
  border-radius:var(--radius-small);
  color:var(--color-text);
  text-decoration:none;
  font-size:.88rem;
}
.store-mega-menu-list a:hover,
.store-mega-menu-list a:focus-visible { background:var(--color-surface-alt); color:var(--color-primary-dark); }
.store-mega-menu-list a:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:-2px; }
.store-mega-menu-count { color:var(--color-text-muted); font-size:.82rem; flex:0 0 auto; }
.store-mega-menu-highlight {
  display:block;
  margin-top:.6rem;
  padding:.55rem .6rem;
  border-radius:var(--radius-small);
  background:var(--color-primary-soft);
  color:var(--color-primary-darkest);
  font-size:.84rem;
  font-weight:600;
  text-decoration:none;
}
.store-mega-menu-highlight:hover,
.store-mega-menu-highlight:focus-visible { background:var(--color-primary-border-subtle); }
.store-mega-menu-viewall {
  display:inline-block;
  margin-top:.5rem;
  color:var(--color-primary-dark);
  font-size:.82rem;
  font-weight:500;
  text-decoration:none;
}
.store-mega-menu-viewall:hover,
.store-mega-menu-viewall:focus-visible { text-decoration:underline; }

@media (min-width:992px) {
  /* Real bug fix, not a style tweak: .store-nav-item sets position:relative
     on every <li> (needed for hover z-index stacking), which meant the
     absolutely-positioned mega-menu panel below was anchoring to its own
     narrow <li> (just the width of the "Категории" button, ~160px) instead
     of the full-width .store-main-nav — the "narrow column with an inner
     scrollbar" the panel rendered as. Overriding back to position:static
     on this one item lets left:0/right:0 resolve against .store-main-nav
     (the nearest OTHER positioned ancestor) as originally intended. */
  .store-nav-item-categories { position:static; }
  .store-mega-menu {
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:1030;
    padding:2rem 0;
    background:var(--color-background);
    border-top:1px solid var(--color-border);
    box-shadow:var(--shadow-medium);
    max-height:calc(100vh - 140px);
    overflow-y:auto;
  }
  .store-mega-menu .store-mega-menu-grid {
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 var(--container-pad);
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
}

@media (max-width:991.98px) {
  /* Real bug fix: .store-nav-item (the trigger's <li>) is display:flex
     with the default row direction and align-items:stretch, inherited
     from the desktop rule above. On mobile the mega-menu panel becomes a
     second flex CHILD of that same <li> (sibling to the trigger button)
     instead of an absolutely-positioned overlay — without flex-direction
     switched to column here, the button and panel sat side-by-side and
     stretch made the button match the panel's full content height,
     rendering as a huge empty colored block with the actual menu
     squeezed into a ~180px sliver on the right. */
  .store-nav-item-categories { flex-direction:column; align-items:stretch; }
  .store-mega-menu {
    position:static;
    margin:0 0 .5rem;
    padding:.25rem .5rem .75rem 1.75rem;
    border-left:2px solid var(--color-primary-soft);
  }
  .store-mega-menu-grid { grid-template-columns:1fr; gap:1rem; }
}

/* ---- body scroll lock while the mobile drawer is open ---- */
body.store-scroll-locked { overflow:hidden; }

/* ---- mobile (<992px): collapsible nav panel ---- */
@media (max-width:991.98px) {
  .store-info-bar-hours { display:none !important; }
  .store-main-header-inner { flex-wrap:wrap; row-gap:.6rem; }
  .store-search-form { order:3; max-width:none; flex-basis:100%; }
  .store-main-nav-inner { flex-direction:column; align-items:stretch; padding-top:.25rem; padding-bottom:.25rem; }
  .store-nav-collapse:not(.show) { display:none; }
  .store-nav-list { flex-direction:column; }
  .store-nav-item { border-top:1px solid var(--color-border); }
  .store-nav-link,
  .store-nav-categories-trigger { width:100%; justify-content:flex-start; padding-top:.85rem; padding-bottom:.85rem; }
}

@media (min-width:992px) {
  .store-nav-collapse { display:block !important; height:auto !important; }
}