/* ─── La Tvorza chrome: ONE source for the site AND the shop ────────────────────
   The navbar and footer are the shared BrandNavbar / BrandFooter on both
   latvorza.ordexa.rs and the marketplace shop. This file styles them, and both
   load it: the site through _document.tsx, the shop through
   marketplace.branding.chromeCssUrls (provision-latvorza.ts). Change it here and
   the two headers stay identical. Literal colours on purpose: the shop has
   the theme map, not this site's palette tokens. */

/* Bar height = the site's tall bar (64px phone / 80px desktop); the shop's
   sticky category slider reads these to sit flush under it. */
:root {
  --shop-nav-h: 64px;
  --shop-nav-h-lg: 80px;
}
nav[data-scroll-offset] .h-12 {
  height: 64px;
}
nav[data-scroll-offset] .h-14 {
  height: 80px;
}
/* No SR/EN utility strip: the site has none. */
div:has(+ nav[data-scroll-offset]) {
  display: none;
}
nav[data-scroll-offset] {
  background: #121212;
  border-bottom: 1px solid #2e2e2e !important;
}

/* Logo: their wordmark with the bars mark (logo.png), white on the dark
   bar; wide, so it is sized by width. */
nav[data-scroll-offset] a[aria-label='La Tvorza'] {
  width: 116px;
}
@media (min-width: 1024px) {
  nav[data-scroll-offset] a[aria-label='La Tvorza'] {
    width: 168px;
  }
}

/* Links: chalk white, the yellow underline when active. */
nav[data-scroll-offset] .ow-nav-link {
  font-size: 15px;
  color: #f2efea;
  position: relative;
  padding-block: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
nav[data-scroll-offset] .ow-nav-link:hover {
  color: #f7ac1d;
}
nav[data-scroll-offset] .ow-nav-link.text-foreground,
nav[data-scroll-offset] .ow-nav-link[aria-current='page'] {
  color: #f2efea;
  font-weight: 600;
}
nav[data-scroll-offset] .ow-nav-link.text-foreground::after,
nav[data-scroll-offset] .ow-nav-link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #f7ac1d;
}
@media (min-width: 1024px) {
  nav[data-scroll-offset] > div:first-child > div:last-child {
    gap: 40px;
  }
}

/* "Prijavi se": a quiet outline, secondary to ordering; the filled yellow
   button is kept for "Poruči online" only. */
nav[data-scroll-offset] .ow-auth-entry {
  border-color: #3d3d3d;
  border-radius: 6px;
  background: transparent;
  color: #f2efea;
  font-weight: 600;
}
nav[data-scroll-offset] .ow-auth-entry:hover {
  background: transparent;
  border-color: #f7ac1d;
  color: #f7ac1d;
}
/* Phone and tablet: "Prijavi se" as a plain text button, so the header
   never competes with "Poruči online". */
@media (max-width: 1023px) {
  nav[data-scroll-offset] .ow-auth-entry {
    border-color: transparent;
    padding-inline: 8px;
    color: #c5c5c5;
    white-space: nowrap;
    font-weight: 500;
  }
}
/* Place pill: "Lokacije" leads in (owner, 2026-10-26), so the street reads
   as a choice of the three places; the pill opens the place picker. */
nav[data-scroll-offset] .ow-place-pill::before {
  content: 'Lokacije';
  order: -1;
  padding-right: 8px;
  border-right: 1px solid #3d3d3d;
  color: #f7ac1d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Phone: two lines, like a "deliver to" field: the pin on the left across
   both, "Lokacije" small on top (this is where you pick the place), the
   current place under it, the chevron on the right. As wide as its content
   (it still shrinks on narrow phones). Tablet up keeps the one-line pill. */
@media (max-width: 639px) {
  nav[data-scroll-offset] .ow-place-pill {
    flex: 0 1 auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 14px auto 12px;
    justify-items: start;
    text-align: left;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
  }
  nav[data-scroll-offset] .ow-place-pill > svg:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  nav[data-scroll-offset] .ow-place-pill::before {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding-right: 0;
    border-right: 0;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.1em;
  }
  nav[data-scroll-offset] .ow-place-pill > span:not(:last-child) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    color: #f2efea;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
  }
  nav[data-scroll-offset] .ow-place-pill > span:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
    margin-left: 0;
  }
}
/* The narrowest phones (360): a smaller wordmark and a tighter pill, so the
   place name stays whole. */
@media (max-width: 389px) {
  nav[data-scroll-offset] a[aria-label='La Tvorza'] {
    width: 100px;
  }
  nav[data-scroll-offset] .ow-place-pill {
    column-gap: 6px;
    padding: 0 10px;
  }
}

/* Mobile menu toggle and sheet on the dark bar. */
nav[data-scroll-offset] button {
  color: #f2efea;
}

/* Footer: dark, one step up from the page (BrandFooter paints night + milk). */
footer {
  --color-night: #1c1c1c;
  --color-milk: #f2efea;
  --primary: #f7ac1d;
  border-top: 1px solid #2e2e2e;
}
footer a[aria-label='La Tvorza'] {
  width: auto;
}
footer a[aria-label='La Tvorza'] img {
  width: 168px;
  height: auto;
}