/* store-nav-mega.css — nav dropdown panels for top-level sections that
 * have real subcategories (includes/store_header.php, store_nav_sections.php).
 * Reuses the site's own tokens/typography -- no parallel colors. Opens
 * on hover (with a small intent delay, assets/js/store-nav-mega.js),
 * on focus (keyboard), or on click/tap (touch) -- data-open is the one
 * state JS/CSS both key off, mirroring store-lang-dropdown.js's own
 * pattern elsewhere in this header.
 */

.store-nav-has-mega { position: relative; }
.store-nav-has-mega > a { display: inline-flex; align-items: center; gap: 4px; }
.store-nav-has-mega > a::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}

.store-nav-mega {
  /* 2026-10-06: left:0 (not centered under the trigger) -- the first
     nav item ("Кафе") sits close to the logo, and a centered ~960px-max
     panel pushed its left edge off-screen (confirmed live: text flush
     against the viewport's own left edge, no gutter at all). Left-
     aligning under the trigger guarantees the panel only ever extends
     right, never past the left edge regardless of which item opens it. */
  position: absolute; top: 100%; left: 0; transform: translateY(4px);
  z-index: 60; width: max-content; max-width: min(96vw, 960px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.store-nav-has-mega:hover .store-nav-mega,
.store-nav-has-mega:focus-within .store-nav-mega,
.store-nav-has-mega[data-open="true"] .store-nav-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
/* JS-driven Escape suppression -- a pure :hover/:focus-within panel has
   no state Escape can clear while the mouse still physically sits over
   the trigger; this class (added by store-nav-mega.js on Escape, removed
   on the next mouseleave) wins over the :hover rule above. */
.store-nav-has-mega.store-nav-mega-suppressed .store-nav-mega {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

.store-nav-mega-inner {
  display: flex; gap: 32px;
  background: var(--color-surface, #fff); border: 1px solid var(--martines-border, #e5ded2);
  border-radius: 6px; box-shadow: 0 10px 28px rgba(10, 10, 9, .10);
  padding: 22px 28px;
}
.store-nav-mega-col { min-width: 180px; }
.store-nav-mega-col h3 {
  margin: 0 0 10px; font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: 13px; color: var(--martines-text, #0a0a09);
  text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 8px; border-bottom: 1px solid var(--martines-border, #e5ded2);
}
.store-nav-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.store-nav-mega-col ul a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 4px; border-radius: 4px;
  color: var(--martines-muted, rgba(10,10,9,.72)); font-size: 13px; text-decoration: none;
  white-space: nowrap;
}
.store-nav-mega-col ul a:hover { color: var(--coffee-caramel, #b66027); background: var(--martines-bg-alt, #fdf6ea); }
.store-nav-mega-cnt { font-size: 10.5px; color: var(--martines-muted, rgba(10,10,9,.5)); }

/* 2026-10-06: Оборудване-only thumbnail list -- per explicit
   instruction ("за оборудване искам да ми направиш малко по-красиво
   менюто, пак да има някакви картинки"). Real category images
   (file_categories.image_path, /uploads/categories/ -- the same field/
   directory the catalog filter sidebar already uses), not invented
   icons; a category with no uploaded image gets a plain blank/bordered
   swatch (data-empty) instead of a broken-image icon, and the row still
   reads fine text-only. Column widened (min-width 180->220px) and the
   row's own justify-content:space-between moved onto the inner label
   span (was directly on <a>, which worked for a plain text+count row
   but not once a thumbnail sits before it). */
.store-nav-mega-col-thumbs { min-width: 220px; }
.store-nav-mega-col-thumbs ul a { justify-content: flex-start; padding: 5px 4px; white-space: normal; }
.store-nav-mega-thumb {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 5px; overflow: hidden;
  background: var(--martines-bg-alt, #fdf6ea); border: 1px solid var(--martines-border, #e5ded2);
  display: flex; align-items: center; justify-content: center;
}
.store-nav-mega-thumb img { width: 100%; height: 100%; object-fit: contain; }
.store-nav-mega-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 auto; min-width: 0; }

/* 2026-10-06: grid widened 3->7 columns, tiles shrunk 72->56px and
   squared off (was circular) -- per explicit instruction to add the
   full 13-region set martines.coffee itself shows (was 4), matching
   its own dense 7-across grid instead of a narrow 3-wide column that
   would have made 13 tiles read as an oddly tall, cramped strip.
   2026-10-06 (2nd pass): real bug found live -- "СПЕЦИАЛНО" (one
   unbreakable word at 9.5px) was wider than the 56px track, and CSS
   grid items default to min-width:auto (won't shrink below their own
   content's intrinsic width even inside an explicit track size), so
   each tile overflowed into the next column's space instead of
   wrapping -- confirmed via a live zoom, text was genuinely bleeding
   across columns, not just visually tight. Column/tile widened
   56->72px (per direct instruction to widen this section) AND
   min-width:0 added to the grid item (the actual fix -- without it,
   widening the track alone wouldn't have stopped the overflow, since
   auto still would have let a still-too-wide word push past 72px too)
   plus overflow-wrap on the label so a still-long word breaks inside
   its own box as a last resort instead of overflowing regardless of
   column width. */
.store-nav-mega-regions { min-width: 600px; border-left: 1px solid var(--martines-border, #e5ded2); padding-left: 28px; }
.store-nav-mega-region-grid { display: grid; grid-template-columns: repeat(7, 72px); gap: 12px 14px; }
.store-nav-mega-region {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; text-align: center; min-width: 0;
}
.store-nav-mega-region img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--martines-border, #e5ded2);
}
/* 2026-10-06 (4th pass): white-space:nowrap (previous pass) forced the
   WHOLE label onto one line, which was wrong for multi-word names --
   "Папуа Нова Гвинея" (17 chars) genuinely doesn't fit in 72px and
   overflowed far enough to visibly collide with "Перу" in the next
   column (confirmed live via zoom). The actual instruction ("специално
   винаги трябва да бъде на един ред") was about one WORD never being
   split mid-word (the earlier overflow-wrap:break-word pass turned
   "Специално" into "Специалн"/"о") -- that's fixed at the source now
   (labels are just the country name, see store_nav_coffee_regions()),
   so plain default wrapping (no nowrap, no overflow-wrap) is the
   correct behavior here: a multi-word name wraps between words
   ("Папуа Нова" / "Гвинея"), never inside one. */
.store-nav-mega-region span { font-size: 9.5px; color: var(--martines-muted, rgba(10,10,9,.72)); line-height: 1.2; }
.store-nav-mega-region:hover span { color: var(--coffee-caramel, #b66027); }

/* Tablet/mobile: inside the existing collapsible nav drawer
   (#storeNavMain/.store-nav-collapse, store-collapse.js) -- the panel
   degrades to a plain static expandable block (tap the trigger once to
   reveal, same data-open state, tap again navigates), not a floating
   overlay there just isn't room for. */
@media (max-width: 899.98px) {
  .store-nav-mega {
    position: static; transform: none; max-width: none; width: auto;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .store-nav-has-mega:hover .store-nav-mega,
  .store-nav-has-mega:focus-within .store-nav-mega { display: none; }
  .store-nav-has-mega[data-open="true"] .store-nav-mega { display: block; }
  .store-nav-mega-inner { flex-direction: column; gap: 18px; border: 0; box-shadow: none; border-radius: 0; padding: 4px 0 10px 12px; background: transparent; }
  .store-nav-mega-regions { border-left: 0; border-top: 1px solid var(--martines-border, #e5ded2); padding-left: 0; padding-top: 14px; }
  .store-nav-mega-region-grid { grid-template-columns: repeat(4, 1fr); }
}