/* =========================================================================
   components.css — reusable pieces: buttons, burger, mobile overlay.
   Cards / filter pills arrive with §4 and §6 in Stage 2.
   ========================================================================= */

/* =========================================================================
   BUTTONS
   Pill labels are always --ink on --hot-pink (6.07:1).
   Cream on hot pink is 2.87:1 and is never used.
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn--pill {
  padding: clamp(var(--s-3), 1.1vw, var(--s-4)) clamp(var(--s-5), 1.8vw, var(--s-8));
  border-radius: var(--r-pill);
  background: var(--hot-pink);
  color: var(--ink);
  will-change: transform; /* magnetic */
}
.btn--pill:hover { box-shadow: 0 8px 24px rgba(255, 79, 163, .38); }

/* Solid dark pill — the contact form's submit. Without this rule the
   button had no padding and no background and rendered 19px tall: present
   in the DOM, invisible on the page. */
.btn--dark {
  background: var(--teal-deep);
  color: var(--cream);              /* 11.08:1 */
  border: 2px solid var(--teal-deep);
  padding: 15px 30px;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-control) var(--ease-out),
              border-color var(--dur-control) var(--ease-out);
}
.btn--dark:hover { background: var(--teal); border-color: var(--teal); }

.btn--ghost {
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 2px solid currentColor;
  background: transparent;
}

.btn__arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

/* =========================================================================
   BURGER — morphs to X
   ========================================================================= */
/* `display` is deliberately NOT set here — layout.css owns the breakpoint
   for the whole nav, and components.css loads later, so declaring it here
   would override the desktop `display:none` and leak the burger to 1440. */
.burger {
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  color: var(--cream);
  transition: color var(--dur-mid) var(--ease-out);
}
.nav.is-solid .burger,
.nav.is-menu-open .burger { color: var(--cocoa); }

.burger__box { position: relative; width: 24px; height: 14px; }
.burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-spring),
              opacity var(--dur-fast) linear;
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 6px; }
.burger__bar:nth-child(3) { top: 12px; }

.burger[aria-expanded='true'] .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bar:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded='true'] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================================
   MOBILE MENU OVERLAY
   ========================================================================= */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--cream);
  display: grid;
  align-content: center;
  padding: var(--nav-h) var(--pad-gutter) var(--s-16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu-overlay__list { display: grid; gap: clamp(var(--s-2), 1.4vh, var(--s-5)); }
.menu-overlay__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay__item { opacity: 1; transform: none; }
/* Stagger without JS — index-driven delays. */
.menu-overlay.is-open .menu-overlay__item:nth-child(1) { transition-delay: .08s; }
.menu-overlay.is-open .menu-overlay__item:nth-child(2) { transition-delay: .14s; }
.menu-overlay.is-open .menu-overlay__item:nth-child(3) { transition-delay: .20s; }
.menu-overlay.is-open .menu-overlay__item:nth-child(4) { transition-delay: .26s; }
.menu-overlay.is-open .menu-overlay__item:nth-child(5) { transition-delay: .32s; }
.menu-overlay.is-open .menu-overlay__item:nth-child(6) { transition-delay: .38s; }

.menu-overlay__link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 9vw, 64px);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--cocoa);
  font-variation-settings: var(--wonk-sub);
}
.menu-overlay__link:hover { color: var(--teal-deep); }

.menu-overlay__foot {
  margin-top: var(--s-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* =========================================================================
   PRODUCT CARD — one component, two variants.
   --card--best : §4, arch-topped, pill CTA inside
   --card--menu : §6, the whole card is the link (one tab stop each)
   ========================================================================= */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--cream);
  border: 1px solid rgba(var(--cocoa-rgb), .12);
  border-radius: var(--r-md);
  /* `translate` is an INDEPENDENT property. GSAP writes `transform` (and
     Flip owns it during filtering), so hovering can never fight the
     animation — and no clearProps juggling is needed. */
  translate: 0 0;
  /* A resting elevation, not zero. A flat card that only gains a shadow on
     hover reads as a rectangle until you touch it — and on touch, where
     there is no hover, it never gains one at all. */
  box-shadow: var(--shadow-sm);
  transition: translate var(--dur-card) var(--ease-out),
              box-shadow var(--dur-card) var(--ease-out),
              border-color var(--dur-card) var(--ease-out);
}
.card:hover,
.card:focus-visible {
  translate: 0 -8px;
  box-shadow: var(--shadow-lift);
  border-color: rgba(var(--cocoa-rgb), .22);
}

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 5;
  background: var(--sand);
  /* Safari leaks a transformed child out of overflow:hidden + border-radius.
     The mask forces a proper clip; `isolation` keeps the card's stacking
     context self-contained. Chosen over `will-change: transform` so we do
     not promote 22 permanent compositor layers in the §6 grid. */
  isolation: isolate;
  -webkit-mask-image: radial-gradient(#fff, #fff);
          mask-image: radial-gradient(#fff, #fff);
}
.card__media--arch {
  border-radius: var(--r-arch);
  aspect-ratio: 3 / 4;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1;
  transition: scale var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { scale: 1.06; }

.card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: var(--wonk-sub);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Hot pink on cream is 2.87:1 and fails. Teal-deep is 11.08:1. */
.card:hover .card__name { color: var(--teal-deep); }

.card__desc {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--cocoa);
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
}
.card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--cocoa);
  background: var(--sand);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 24px);
  color: var(--ink);
  font-variation-settings: var(--wonk-sub);
  white-space: nowrap;
  /* Tabular figures so prices align down a grid column: proportional
     digits make 550 and 1.800 start at different optical positions and the
     column reads as ragged. */
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-h3);
}
.card__price small {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cocoa);
  margin-left: 2px;
}

/* No confirmed price (the five napici) — never invent one.
   This occupies the PRICE slot and is information, not an action. It
   previously shipped as a hot-pink pill, which read as a second button
   competing with "Naruči" for the same destination. Now deliberately quiet:
   sentence case, no pill, no arrow, UI font instead of display — so the one
   action on the card is unambiguous. */
.card__chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cocoa);      /* 9.97:1 on cream */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  white-space: nowrap;
}

/* ---- Card actions -------------------------------------------------------
   Wolt and the cart, side by side where the card is wide enough and stacked
   where it is not. flex-basis rather than a media query: the same card sits
   in a 4-up grid on the homepage, a 3-up on meni.html and a 1-up at 360,
   and the breakpoint that matters is the CARD's width, not the screen's.

   margin-top:auto pins the pair to the bottom of the card, so a two-line
   description and a one-line description still line their buttons up across
   a row. Without it the grid reads as ragged even though every card is the
   same height. */
.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-1);
}
.card__actions .btn { flex: 1 1 132px; justify-content: center; text-align: center; }
.card--best .card__actions { flex-direction: column; }
.card--best .card__actions .btn { flex: 1 1 auto; width: 100%; }

/* The add button confirms in place. cart.js swaps the label for 1.6s; the
   colour change is what makes it register as a state and not a re-render. */
.card__add.is-added {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: var(--cream);
}

/* §6 cards were links; the arrow was the affordance. Kept for the bundle
   tiles, which are still whole-tile links — a bundle is "pick any three
   flavours", which a cart line cannot express without inventing which
   three, so bundles stay Wolt-only and keep the one-tab-stop behaviour. */
.card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.card__go span { transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card__go span { transform: translate(3px, -3px); }

.card--best .card__cta { width: 100%; margin-top: var(--s-2); }

/* =========================================================================
   FILTER PILLS (§6)
   ========================================================================= */
.pill {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 2px solid rgba(var(--cocoa-rgb), .22);
  background: transparent;
  color: var(--cocoa);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pill:hover { border-color: var(--cocoa); }
.pill[aria-pressed='true'] {
  background: var(--hot-pink);
  border-color: var(--hot-pink);
  color: var(--ink); /* 6.07:1 */
}
.pill__count {
  font-size: 11px;
  opacity: .7;
  margin-left: var(--s-1);
}

/* =========================================================================
   DISABLED / TODO AFFORDANCES
   A destination we cannot verify renders visibly disabled. We never guess
   an href — see LINKS.glovo.
   ========================================================================= */
[data-todo] {
  position: relative;
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
[data-todo]::after {
  content: 'uskoro';
  margin-left: var(--s-2);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}