/* store-header.css — site-wide header (topbar + masthead + nav) and footer
 * identity, 2026-09-04 redesign. Loaded on every storefront page (see
 * includes/store_header.php's CSS-mode block) regardless of the store-
 * framework/store-components Bootstrap-subset A/B mode, since the header
 * and footer render the same way in both. Uses the --store-* tokens from
 * store-tokens.css (additive — does not touch --color-brand-*, which
 * stays the indigo used by every .btn-primary/link/focus-ring elsewhere
 * on the site) and the self-hosted 'Store Display' serif from
 * store-home-fonts.css *only when that file has also loaded* — the
 * fallback stack on --font-display (Georgia/Times/serif) means every page
 * still renders a real serif, just the system one, when it hasn't (i.e.
 * every page except the homepage, by design — see that file's docblock).
 */

/* Homepage-only body background — covers the gap between the last
   .store-home section and <footer> (the outer container/row/col Bootstrap
   grid wrapper index.php reuses from the listing/product views has its
   own bottom padding, which otherwise shows through as plain white on the
   one route with a non-white page background). Every other route is
   unaffected — this selector only ever matches when store_header.php
   stamped body.store-home-page (see its own docblock).
   2026-09-07: tried moving overflow-x:clip here (body) and onto <main>
   -- reverted both. <main> (Bootstrap's own col-12, padded/gutter-
   inset, its own box measured left:32/right:992 at a 1024px viewport)
   is genuinely NARROWER than the true viewport; .store-home's full-
   bleed sections deliberately escape that gutter via a negative-margin
   breakout so their content can reach x:0..viewport-width. Putting
   clip on <main> clipped that escaping content at main's OWN (narrower)
   edge instead -- confirmed live: coffee rail copy text and the section
   arrows were being cut off by several px on both sides across most
   common desktop widths, a real, visible regression, not just a
   scrollWidth number. overflow-x:clip is back on .store-home itself
   (below) -- see its own comment for why that's actually correct here,
   not the general "clip can't fix its own box" concern it seems to
   contradict at first glance. Kept here on body too since it's
   harmless. */
body.store-home-page { background: var(--store-cream); overflow-x: clip; }

/* Site-wide content shell — replaces Bootstrap's .container for the
 * header/footer (topbar/masthead/nav/footer all used class="container
 * ..." before this, on EVERY page, not just the homepage). Bootstrap's
 * .container caps at max-width:720px between the 768px and 992px
 * breakpoints (store-framework.css) — at a 935px viewport that squeezed
 * the whole header/footer to 720px with a 108px dead margin per side,
 * confirmed live.
 * 2026-09-07: desktop width unified with .store-home-shell's own rule
 * (assets/css/store-home.css) -- was min(100% - 130px, 1180px), header/
 * footer and the homepage sections used two different max-widths
 * (1180 vs 1280) so the logo, hero text, section headings, and footer
 * columns didn't share one vertical edge. Mobile/tablet breakpoints
 * below are untouched.
 * 2026-09-08: briefly raised 1280 -> 1480px matching .store-home-shell's
 * own wide-desktop density fix, then reverted the same day -- the
 * homepage's default shell went back to 1280 too (widening it was
 * changing laptop-width layout, which was meant to stay untouched;
 * the homepage's own wide-desktop widening now lives behind a
 * >=1600px breakpoint instead). Still the same value on both, still
 * one shared vertical edge.
 */
.store-shell { width: min(100% - 16px, 1280px); margin-inline: auto; }
@media (max-width: 899.98px) { .store-shell { width: min(100% - 48px, 1180px); } }
@media (max-width: 575.98px) { .store-shell { width: min(100% - 32px, 1180px); } }

/* ============ E. Utility top bar — spec target ~23px ============ */
.store-topbar {
  background: var(--martines-green-dark);
  color: #fff;
  font-size: 10px;
  overflow-x: hidden;
}
/* Three real zones (shipping / tagline / phone+social), the middle one
   truly centered on the bar — not just visually left-vs-right like a
   plain flex space-between, which can't center a middle item at all. */
.store-topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: 23px;
  padding: 5px 0;
}
.store-topbar-item-tagline { justify-self: center; }
.store-topbar-right { justify-self: end; }
.store-topbar-messages, .store-topbar-right { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.store-topbar-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.store-topbar-item svg { flex: 0 0 auto; opacity: .85; width: 12px; height: 12px; }
.store-topbar-phone { color: inherit; text-decoration: none; }
.store-topbar-phone:hover { color: var(--martines-bg); }
.store-topbar-social { display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: .85; text-decoration: none; transition: opacity var(--transition-fast); }
.store-topbar-social:hover { opacity: 1; color: var(--martines-bg); }

/* ============ F. Masthead — spec target ~65-70px, 3 real columns
   (logo ~180px / search flexible / actions ~240px) ============ */
.store-masthead { background: var(--martines-bg); border-bottom: 1px solid var(--martines-border); }
.store-masthead-inner {
  display: grid;
  grid-template-columns: 180px minmax(300px, 1fr) auto;
  grid-template-areas: "logo search actions";
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: 12px 0;
}
.store-brand { grid-area: logo; display: inline-flex; align-items: center; text-decoration: none; }
.store-brand img, .store-brand picture { max-width: 165px; }
.store-brand-fallback-text { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--martines-green); letter-spacing: -.01em; }

/* Classic rectangular search field (spec: "НЕ pill-shaped modern SaaS
   style — reference е по-класическа rectangular форма"), small radius. */
.store-search {
  grid-area: search;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 36px;
  border: 1px solid var(--martines-border);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}
.store-search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--martines-text);
  font-size: 13px;
}
.store-search input:focus { outline: none; }
.store-search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  border: 0;
  background: var(--martines-green-dark);
  color: var(--martines-bg);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.store-search-submit:hover { background: var(--martines-green); }

.store-masthead-actions { grid-area: actions; display: flex; align-items: center; gap: 20px; }
/* 2026-09-06: interactive hover/active accents (account/cart icon hover,
   active-language indicator) -- burnish (secondary emphasis), matching
   the same "clickable accent" role used for the homepage's own small
   secondary links, rather than the shared passive-label crema. The cart
   count badge is its own case -- caramel, since it's meant to be the
   single most attention-grabbing small element in the header, the same
   tier as a primary CTA. */
.store-masthead-action { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--martines-text); text-decoration: none; }
.store-masthead-action:hover { color: var(--coffee-burnish); }
.store-masthead-action-label { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
/* storeCartIndicatorRender() (cart_indicator.php) keeps its own fixed
   markup/classes (.nav-link, .badge.bg-secondary) — restyled here rather
   than changing that function, since it's shared with any other page that
   might render it standalone. */
.store-masthead-actions .nav-link { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; padding: 0; color: var(--martines-text); }
.store-masthead-actions .nav-link:hover { color: var(--coffee-burnish); }
.store-masthead-actions .nav-link .badge { background: var(--coffee-caramel) !important; }
/* 2026-09-08: dropdown version -- toggle button shows the current
   flag+code (brand color), menu lists the other 2 languages on click. */
.store-masthead-actions .store-lang-switcher { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.store-masthead-actions .store-lang-switcher-toggle { color: var(--coffee-burnish); }
.store-masthead-actions .store-lang-switcher-toggle:hover { color: var(--martines-text); }
.store-masthead-actions .store-lang-switcher-menu { background: var(--martines-bg); border-color: var(--martines-border); }
.store-masthead-actions .store-lang-switcher-link { color: var(--martines-muted); }
.store-masthead-actions .store-lang-switcher-link:hover { background: var(--martines-border); color: var(--coffee-burnish); }

/* ============ G. Nav bar — spec target ~35-38px, centered links ============ */
/* Light, near-white bar (not solid forest green) — the nav row sits on a
   bar close to the cream masthead above it, distinctly lighter than the
   dark top bar/footer, with dark-ink text and an orange hover accent. */
.store-nav { background: #fdfbf7; border-bottom: 1px solid var(--martines-border); }
.store-nav-inner { position: relative; }
.store-nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .65rem 0;
  border: 0;
  background: transparent;
  color: var(--martines-text);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
/* #storeNavMain keeps Bootstrap's own .collapse/.navbar-collapse classes
   (assets/js/store-collapse.js toggles them, driven by the subset CSS's
   .collapse{display:none}/.collapse.show{display:block} rules) — but this
   nav is no longer inside a .navbar-expand-lg ancestor (which is what
   Bootstrap itself uses to force the collapse open above a breakpoint), so
   without this rule the nav would stay hidden on desktop until clicked.
   Below 767.98px this is overridden back to the real collapse behavior. */
#storeNavMain.collapse { display: block; height: auto; }
/* Centered link row (spec G), ~36px tall, 32px gap between items — real
   nav items only (Кафе / Курсове / Оборудване / За нас), no fake
   "COFFEE SHOP" entry, so there's no single trailing item to accent
   orange the way the reference's active "COFFEE SHOP" tab is; hover/focus
   carries the orange accent instead. */
.store-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.store-nav-list li { display: block; }
.store-nav-list a {
  display: inline-block;
  padding: .55rem 0;
  color: var(--martines-text);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.store-nav-list a:hover { color: var(--coffee-burnish); border-color: var(--coffee-burnish); }

/* ============ Footer (spec P — brand/nav/info/contacts/newsletter, one
   row of 5 down to 899.98px, target ~260-285px total at 935px) ============ */
/* 2026-09-06: footer type was uniformly too small (10-11px base across
   nearly every element) -- bumped ~2-2.5px across the board, per explicit
   instruction, keeping the same relative hierarchy (headings > body >
   fine print) rather than a single flat font-size on .store-footer alone
   (most children set their own explicit size, which would otherwise keep
   overriding an inherited bump). */
.store-footer { background: var(--martines-green-dark); color: rgba(248, 241, 229, .82); margin-top: 2rem; font-size: 13px; }
.store-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .9fr 1fr 1.4fr;
  gap: 20px;
  padding: 42px 0 28px;
}
.store-footer-col { padding-left: 18px; border-left: 1px solid rgba(248, 241, 229, .14); }
.store-footer-col:first-child { padding-left: 0; border-left: 0; }
.store-footer-col h2 { margin: 0 0 10px; color: var(--martines-bg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.store-footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.store-footer-col a { color: inherit; text-decoration: none; font-size: 13px; transition: color var(--transition-fast); }
.store-footer-col a:hover { color: var(--coffee-burnish); }
.store-footer-contact li a { display: inline-flex; align-items: center; gap: 6px; }
.store-footer-contact svg { flex: 0 0 auto; width: 13px; height: 13px; opacity: .8; }
.store-footer-logo { display: inline-block; width: 145px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--martines-bg); letter-spacing: -.01em; line-height: 1.15; }
.store-footer-logo-img { display: block; height: 32px; width: auto; filter: brightness(0) invert(1); }
.store-footer-tagline { margin: 8px 0 0; max-width: 30ch; color: rgba(248, 241, 229, .68); font-size: 12.5px; line-height: 1.5; }
.store-footer-social { display: flex; gap: 8px; margin-top: 12px; }
.store-footer-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid rgba(248, 241, 229, .3); border-radius: 50%; color: var(--martines-bg); transition: border-color var(--transition-fast), color var(--transition-fast);
}
.store-footer-social a svg { width: 12px; height: 12px; }
.store-footer-social a:hover { border-color: var(--coffee-burnish); color: var(--coffee-burnish); }
.store-footer-newsletter p { margin: 0 0 10px; color: rgba(248, 241, 229, .68); font-size: 12.5px; line-height: 1.45; }
.store-footer-newsletter form { display: flex; gap: 0; }
.store-footer-newsletter .form-control { flex: 1 1 auto; min-width: 0; height: 34px; border: 0; border-radius: 3px 0 0 3px; padding: 0 12px; background: rgba(248, 241, 229, .92); color: var(--martines-text); font-size: 13px; }
.store-footer-newsletter .form-control::placeholder { color: var(--martines-muted); }
/* Square submit button (spec: "input + square orange submit button
   inline"), not the circular icon-only button used elsewhere. This is a
   literal subscribe CTA -- caramel/burnish (primary actionable element),
   not the shared small-label crema. */
.store-footer-newsletter button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0 3px 3px 0; cursor: pointer;
  background: var(--coffee-caramel); color: #fff; transition: background var(--transition-fast);
}
.store-footer-newsletter button:hover { background: var(--coffee-burnish); }
.store-footer-newsletter-flash { margin: 8px 0 0; font-size: 12px; font-weight: 600; }
.store-footer-newsletter-flash-success { color: #6ee7b7; }
.store-footer-newsletter-flash-error { color: #fca5a5; }
.store-footer-bottom { min-height: 56px; display: flex; align-items: center; border-top: 1px solid rgba(248, 241, 229, .14); }
.store-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 12px; color: rgba(248, 241, 229, .6); }

@media (max-width: 899.98px) {
  .store-footer-grid { grid-template-columns: 1fr 1fr; }
  .store-topbar-item-tagline { display: none; }
  /* Tablet: logo + actions share the top row, search drops to its own
     full-width row below — replaces the old flex-wrap/order approach,
     which relied on .store-masthead-inner being flex; it's a fixed
     3-column grid now, so reflowing needs real template areas instead. */
  .store-masthead-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo . actions" "search search search";
    row-gap: 10px;
    gap: var(--space-3);
  }
  .store-masthead-action-label { display: none; }
}

@media (max-width: 767.98px) {
  .store-nav-toggle { display: flex; }
  /* Below the toggle breakpoint, hand control back to the real Bootstrap-
     subset .collapse behavior (display:none unless .show) that
     store-collapse.js drives via the toggle button above. */
  #storeNavMain.collapse:not(.show) { display: none; }
  #storeNavMain.collapse.show { display: block; height: auto; }
  .store-nav-list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: .25rem 0 .75rem;
  }
  .store-nav-list a { padding: .55rem 0; border-bottom: 0; }
}

@media (max-width: 575.98px) {
  /* Only the free-shipping message survives on very narrow screens — the
     phone number + social icons on the right were the actual cause of a
     document-wide horizontal overflow at this width (the flex-wrap on
     .store-topbar-inner only kicks in once its content can't fit at all,
     by which point .store-topbar-phone's un-wrapping text had already
     forced the row, and the whole page, wider than the viewport). */
  .store-topbar-messages .store-topbar-item:not(:first-child) { display: none; }
  .store-topbar-right { display: none; }
  .store-footer-grid { grid-template-columns: 1fr; padding: 1.5rem 0 1rem; gap: 1.25rem; }
  .store-footer-col { padding-left: 0; border-left: 0; padding-top: 1rem; border-top: 1px solid rgba(250, 243, 230, .14); }
  .store-footer-col:first-child { padding-top: 0; border-top: 0; }
}