/*
  Bae Eatery & Bakery — menu styles.

  Palette is fixed to the two colors used on the printed menu:
    --cream  #F9F1DB  (page background / text on maroon)
    --maroon #682323  (section background / text on cream)

  Typography mirrors the printed menu's two-font system:
    --font-display  stands in for the menu's "Folsom Black" — a heavy,
                     rounded display face used only for category titles
                     and prices (self-hosted Baloo 2, weight 800).
    --font-body      stands in for the menu's "Juana" serif — used bold
                     for item names and regular for descriptions/meta text
                     (self-hosted Lora, a variable font run at weight
                     400/600 to cover both roles).
  Both are bundled locally in assets/fonts — no external font requests.
*/

@font-face {
  font-family: 'Bae Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/baloo2-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bae Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/baloo2-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bae Serif';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bae Serif';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #f9f1db;
  --maroon: #682323;
  --content-width: 880px;
  /* Shared left/right inset for main's content and the tab row's left edge,
     so headings/menu-item borders and the tabs can't drift out of alignment
     at a breakpoint the way they previously did — one value, not two. */
  --content-inset: 1.25rem;
  --font-display: 'Bae Display', 'Arial Black', 'Segoe UI Black', sans-serif;
  --font-body: 'Bae Serif', Georgia, 'Times New Roman', serif;
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

.icon-sprite-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--maroon);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.site-header {
  background: var(--maroon);
  color: var(--cream);
  /* Horizontal padding matches --content-inset (not a fixed value) so the
     logo stays aligned with the tab row/heading edges below it at every
     breakpoint, instead of sitting further right once --content-inset
     shrinks on narrow phones. */
  padding: clamp(1.25rem, 4vw, 2rem) var(--content-inset);
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.site-header__logo {
  max-width: 220px;
  width: 48%;
  min-width: 120px;
  height: auto;
  /* logo.png has the mark baked in off-center inside its own canvas — a
     wider maroon margin on the left (~13% of the file's width) than the
     right (~6.5%), left over from how the source art was exported. That
     invisible-but-real padding blends into the header background, so the
     <img> box can be flush with the tabs/heading below while the visible
     mark still reads as sitting further right. translateX doesn't touch
     the element's layout box (so the WhatsApp block's spacing is
     unaffected) — it only shifts what's painted, which is exactly what's
     needed to visually flush the mark itself against the shared inset. */
  transform: translateX(-12.9%);
}

/* Right-hand header column: contact block with the "Karar veremiyorum"
   button tucked directly under it. The column is sized by the contact
   block — the button stretches to that width rather than setting it (see
   .random-pick__button) — so adding the button neither widened this column
   nor pushed it off the logo's row, and the stack still fits inside the
   logo's height, leaving the header exactly as tall as it was before. */
.site-header__aside {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}

/* WhatsApp contact block — label on top, icon + number below, both
   right-aligned against the logo on the left. */
.site-header__contact {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  text-align: right;
}

.site-header__contact-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

.site-header__contact-number {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.85rem, 3vw, 1rem);
  white-space: nowrap;
}

.site-header__contact-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.site-header__contact:hover .site-header__contact-number,
.site-header__contact:focus-visible .site-header__contact-number {
  text-decoration: underline;
}

.site-header__contact:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.menu-meta {
  max-width: var(--content-width);
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
   Menu category tabs — selection itself is pure CSS (radio inputs +
   labels), and still fully works with JS disabled/blocked. Mouse
   click-drag panning is progressive enhancement from assets/js/menu-tabs.js
   (see .is-dragging below); touch/trackpad scrolling here is native, no JS
   involved either way. Each category in data/menu.php has a 'slug';
   adding/removing a category means adding or removing its matching
   #tab-<slug> rule pair below.
   ------------------------------------------------------------------- */

.menu-tabs-wrap {
  position: relative;
  max-width: var(--content-width);
  margin: 1.5rem auto 0;
}

.menu-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Without this, scroll-snap treats the row's own left padding as
     scrollable slack and rests scrolled past it on load — the first pill
     ends up flush with the container edge instead of showing its padding,
     landing to the left of the heading/menu-item content below it. */
  scroll-padding-left: var(--content-inset);
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Left matches main's inset so the first pill lines up with the heading/
     menu-item borders below; right stays wider to leave room for the fade
     + arrow hint overlaid on that edge. */
  padding: 0.25rem 1.5rem 0.25rem var(--content-inset);
  /* No visible scrollbar: at this row's typical overflow (a handful of
     pixels beyond the viewport) a styled thumb reads as a solid bar rather
     than a scroll affordance — mouse drag, touch swipe, and the arrow link
     already cover discoverability without it. */
  scrollbar-width: none;
}

.menu-tabs::-webkit-scrollbar {
  display: none;
}

.menu-tabs:active {
  cursor: grabbing;
}

/* Toggled by assets/js/menu-tabs.js while an actual mouse drag is in
   progress. scroll-behavior must drop to "auto" here — otherwise every
   scrollLeft update during the drag queues its own smooth-scroll animation
   and the row lags behind the cursor instead of tracking it directly. */
.menu-tabs.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

/* Zero-size flex items at each end of the tab row. They're real anchor
   targets (#menu-tabs-start / #menu-tabs-end) participating in flex layout
   — not absolutely positioned — so scrolling one into view drags the whole
   row along with it, revealing the tabs at that end. Pure HTML anchor
   navigation, no JS. */
.menu-tabs-start {
  flex: 0 0 auto;
  width: 1px;
  height: 1px;
  scroll-margin-left: 1.5rem;
  /* .menu-tabs's `gap` inserts space between every flex child, including
     this one and the first real tab right after it — without canceling
     that here, the first pill would land one gap-width further right than
     before this marker existed, breaking its intentional flush alignment
     with the row's own left padding (and with the heading/menu-item
     borders below; see the .menu-tabs comment above). */
  margin-right: -0.6rem;
}

.menu-tabs-end {
  flex: 0 0 auto;
  width: 1px;
  height: 1px;
  scroll-margin-right: 1.5rem;
}

/* Fade + chevron over each edge — the only "there's more to scroll" cue
   now that the scrollbar itself is hidden. Sits in a fixed overlay outside
   the scroll container so it never scrolls away with it. Each is a real
   link to its #menu-tabs-start/-end marker: clicking/tapping it just
   scrolls the row a few tabs in that direction (smooth, native anchor
   scroll) — it no longer opens a dropdown/expanded view. Dragging the row
   itself (mouse, touch swipe, or trackpad) covers the rest.
   The start (left) arrow is hidden until the row has actually been
   scrolled away from the beginning — at rest it would otherwise sit
   directly on top of the first tab pill, which the row's left padding
   deliberately keeps flush with the heading/menu-item borders below (see
   the .menu-tabs comment above). menu-tabs.js toggles
   .menu-tabs-wrap--scrolled once nav.scrollLeft moves off zero. The end
   (right) arrow doesn't need this: the row's wider right padding already
   reserves empty space for it to sit over, even at rest. */
.menu-tabs-hint {
  position: absolute;
  top: 0;
  bottom: 0.25rem;
  width: 2.75rem;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--maroon);
  opacity: 0.6;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.menu-tabs-hint--end {
  right: 0;
  justify-content: flex-end;
  padding-right: 0.35rem;
  background: linear-gradient(to right, rgba(249, 241, 219, 0), var(--cream) 70%);
}

.menu-tabs-hint--start {
  left: 0;
  justify-content: flex-start;
  padding-left: 0.35rem;
  background: linear-gradient(to left, rgba(249, 241, 219, 0), var(--cream) 70%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s;
}

.menu-tabs-wrap--scrolled .menu-tabs-hint--start {
  opacity: 0.6;
  visibility: visible;
  pointer-events: auto;
}

.menu-tabs-hint:hover,
.menu-tabs-hint:focus-visible {
  opacity: 1;
  outline: none;
}

.menu-tabs__item {
  flex: 0 0 auto;
  display: inline-block;
  scroll-snap-align: start;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--maroon);
  border-radius: 999px;
  color: var(--maroon);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-tabs__item--disabled {
  cursor: default;
  opacity: 0.4;
}

.menu-category {
  display: none;
}

/* Tab selection, CSS-only. Matched by position rather than by slug: the
   category list is editable at /yonetim, so a rule naming a slug would leave
   any newly-added category permanently blank (its tab would deselect the
   previous one and show nothing). Written out to 24 categories.

   The three lists stay in step because index.php emits exactly one radio, one
   <label> and one <section> per PUBLISHED category, in the same order —
   disabled categories get a non-label <span> tab and no section at all, and
   :nth-of-type counts per element type, so they never shift an index. The
   trailing .allergen-legend section sits after every .menu-category, so it
   can't be matched either. */

/* active pill */
.menu-tab:nth-of-type(1):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(1),
.menu-tab:nth-of-type(2):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(2),
.menu-tab:nth-of-type(3):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(3),
.menu-tab:nth-of-type(4):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(4),
.menu-tab:nth-of-type(5):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(5),
.menu-tab:nth-of-type(6):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(6),
.menu-tab:nth-of-type(7):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(7),
.menu-tab:nth-of-type(8):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(8),
.menu-tab:nth-of-type(9):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(9),
.menu-tab:nth-of-type(10):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(10),
.menu-tab:nth-of-type(11):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(11),
.menu-tab:nth-of-type(12):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(12),
.menu-tab:nth-of-type(13):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(13),
.menu-tab:nth-of-type(14):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(14),
.menu-tab:nth-of-type(15):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(15),
.menu-tab:nth-of-type(16):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(16),
.menu-tab:nth-of-type(17):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(17),
.menu-tab:nth-of-type(18):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(18),
.menu-tab:nth-of-type(19):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(19),
.menu-tab:nth-of-type(20):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(20),
.menu-tab:nth-of-type(21):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(21),
.menu-tab:nth-of-type(22):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(22),
.menu-tab:nth-of-type(23):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(23),
.menu-tab:nth-of-type(24):checked ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(24) {
  background: var(--maroon);
  color: var(--cream);
}

/* keyboard focus ring */
.menu-tab:nth-of-type(1):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(1),
.menu-tab:nth-of-type(2):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(2),
.menu-tab:nth-of-type(3):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(3),
.menu-tab:nth-of-type(4):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(4),
.menu-tab:nth-of-type(5):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(5),
.menu-tab:nth-of-type(6):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(6),
.menu-tab:nth-of-type(7):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(7),
.menu-tab:nth-of-type(8):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(8),
.menu-tab:nth-of-type(9):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(9),
.menu-tab:nth-of-type(10):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(10),
.menu-tab:nth-of-type(11):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(11),
.menu-tab:nth-of-type(12):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(12),
.menu-tab:nth-of-type(13):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(13),
.menu-tab:nth-of-type(14):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(14),
.menu-tab:nth-of-type(15):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(15),
.menu-tab:nth-of-type(16):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(16),
.menu-tab:nth-of-type(17):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(17),
.menu-tab:nth-of-type(18):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(18),
.menu-tab:nth-of-type(19):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(19),
.menu-tab:nth-of-type(20):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(20),
.menu-tab:nth-of-type(21):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(21),
.menu-tab:nth-of-type(22):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(22),
.menu-tab:nth-of-type(23):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(23),
.menu-tab:nth-of-type(24):focus-visible ~ .menu-tabs-wrap label.menu-tabs__item:nth-of-type(24) {
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

/* the panel itself */
.menu-tab:nth-of-type(1):checked ~ main .menu-category:nth-of-type(1),
.menu-tab:nth-of-type(2):checked ~ main .menu-category:nth-of-type(2),
.menu-tab:nth-of-type(3):checked ~ main .menu-category:nth-of-type(3),
.menu-tab:nth-of-type(4):checked ~ main .menu-category:nth-of-type(4),
.menu-tab:nth-of-type(5):checked ~ main .menu-category:nth-of-type(5),
.menu-tab:nth-of-type(6):checked ~ main .menu-category:nth-of-type(6),
.menu-tab:nth-of-type(7):checked ~ main .menu-category:nth-of-type(7),
.menu-tab:nth-of-type(8):checked ~ main .menu-category:nth-of-type(8),
.menu-tab:nth-of-type(9):checked ~ main .menu-category:nth-of-type(9),
.menu-tab:nth-of-type(10):checked ~ main .menu-category:nth-of-type(10),
.menu-tab:nth-of-type(11):checked ~ main .menu-category:nth-of-type(11),
.menu-tab:nth-of-type(12):checked ~ main .menu-category:nth-of-type(12),
.menu-tab:nth-of-type(13):checked ~ main .menu-category:nth-of-type(13),
.menu-tab:nth-of-type(14):checked ~ main .menu-category:nth-of-type(14),
.menu-tab:nth-of-type(15):checked ~ main .menu-category:nth-of-type(15),
.menu-tab:nth-of-type(16):checked ~ main .menu-category:nth-of-type(16),
.menu-tab:nth-of-type(17):checked ~ main .menu-category:nth-of-type(17),
.menu-tab:nth-of-type(18):checked ~ main .menu-category:nth-of-type(18),
.menu-tab:nth-of-type(19):checked ~ main .menu-category:nth-of-type(19),
.menu-tab:nth-of-type(20):checked ~ main .menu-category:nth-of-type(20),
.menu-tab:nth-of-type(21):checked ~ main .menu-category:nth-of-type(21),
.menu-tab:nth-of-type(22):checked ~ main .menu-category:nth-of-type(22),
.menu-tab:nth-of-type(23):checked ~ main .menu-category:nth-of-type(23),
.menu-tab:nth-of-type(24):checked ~ main .menu-category:nth-of-type(24) {
  display: block;
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.25rem var(--content-inset) 3rem;
}

.menu-category {
  margin-top: 0;
}

.menu-category__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
}

.menu-category__note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0.5rem 0 1.25rem;
  opacity: 0.85;
}

/* Vertical split for categories with sub-groups (e.g. Kahveler's Soğuk/Sıcak
   selections) — stacked with a horizontal rule on narrow screens (mobile-
   first base below), side by side with a vertical rule from the same
   tablet breakpoint used elsewhere in this file. */
.menu-category__groups {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.menu-category__group + .menu-category__group {
  border-top: 1px solid rgba(104, 35, 35, 0.2);
  padding-top: 1.5rem;
}

.menu-category__group-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(104, 35, 35, 0.2);
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item--disabled {
  opacity: 0.4;
}

/* An item with a photo lays out as a grid rather than the flex row above.
   Flex can put the three boxes in a line, but it cannot make the price drop
   under the text *while the photo stays beside both* — which is exactly what
   the phone layout needs (see the 600px block near the bottom of this file).
   A grid does both from one set of rules, so there is no second layout to
   keep in sync. Items without a photo keep the flex row untouched. */
.menu-item--has-image {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 1rem;
  /* baseline, not start or center, and it is doing real work in both
     directions. The price has to sit on the same line as the item's name
     however tall the row is — that is what start would break on a row whose
     photo is taller than its text. And on a row with a description, extras
     and allergen badges, the text column is taller than the photo, so center
     would drag the price down to the middle of the block, away from the name
     it belongs to. Baseline pins name and price together and lets the row
     grow around them. */
  align-items: baseline;
}

/* The photos are dishes cut out against transparency — a plate on nothing —
   and uploads are trimmed to that plate's own bounds (item_image_trim_
   transparent() in includes/item_image.php). So there is deliberately no box
   here: no border, no background, no radius. A frame around a cut-out plate
   would draw a square that the picture inside plainly isn't, and the cream
   showing through the corners would make the frame look like a mistake.

   The row's other children sit on a shared baseline; an image has none worth
   using, so it is pinned to the top of the row rather than hanging off the
   first line of the name. */
.menu-item__photo {
  display: block;
  align-self: start;
  line-height: 0;
  /* zoom-in rather than pointer: the link does open the photo larger, and the
     cursor is the only thing that says so before you click. */
  cursor: zoom-in;
  border-radius: 50%;
  transition: transform 0.18s ease;
}

.menu-item__photo:hover {
  transform: scale(1.04);
}

.menu-item__photo:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 4px;
}

/* contain, not cover: the upload has already been trimmed to the dish, so
   there is nothing left to crop and cover would only shave the rim off a
   plate whose bounding box isn't perfectly square. */
.menu-item__image {
  width: 120px;
  height: 120px;
  object-fit: contain;

  /* drop-shadow, not box-shadow — this is the whole reason the plates read as
     objects on the page rather than pictures stuck to it. box-shadow traces
     the element's rectangle and would hang a square shadow behind a round
     plate; filter: drop-shadow traces the alpha channel, so the shadow is the
     silhouette of whatever was photographed. */
  filter: drop-shadow(0 3px 6px rgba(58, 20, 20, 0.28));
}

@media (prefers-reduced-motion: reduce) {
  .menu-item__photo {
    transition: none;
  }

  .menu-item__photo:hover {
    transform: none;
  }
}

.menu-item__info {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-item__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
}

.menu-item__desc {
  font-family: var(--font-body);
  font-weight: 400;
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.9;
}

/* Priced-options row — an item's paid add-ons (Kahvaltı) or a category-wide
   option list (Kahveler's milk choices), rendered as labeled chips instead
   of plain description/note text so the extra cost reads clearly. Used at
   both item level (inside .menu-item) and category level (below
   .menu-category__title), so it's not scoped to either. */
.addon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}

.addon-row__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  white-space: nowrap;
}

.addon-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid rgba(104, 35, 35, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}

.addon-chip__price {
  font-weight: 700;
  opacity: 0.8;
}

.addon-chip__price::before {
  content: "+";
}

.menu-category__title + .addon-row {
  margin-top: 0.35rem;
  margin-bottom: 1.25rem;
}

/* Allergen badges get their own row below the description, instead of
   running inline into the ingredient text. */
.menu-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

/* Same size/weight it always had — just anchored next to the item name now
   instead of the row below the description. */
.menu-item__calories {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  white-space: nowrap;
}

.menu-item__allergens {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Allergen badges — small circular icon "stamps" (maroon fill, cream
   glyph) replacing the old (LETTER) codes. Icons are <use> refs into the
   sprite defined once in index.php (.icon-sprite-defs). Hover/focus/tap
   reveals a tooltip with the Turkish description via plain CSS
   (:hover/:focus/:active) — still works with no JS. Every badge opens the
   same way — anchored to its own left edge, growing rightward, the way
   only the row's first badge used to — instead of centering by default
   with edge-of-row special cases. That per-position branching is what
   produced the mismatch between desktop's mobile emulation and real
   touch devices (wrapped rows meant "first/last in the flex container"
   didn't line up with "first/last visually on a wrapped line"); one
   consistent direction removes the mismatch entirely. assets/js/menu-tabs.js
   layers on top of that to nudge a tooltip back into view via
   --tooltip-shift-x if growing rightward would still overflow the
   viewport (see the comment in that file).
   ------------------------------------------------------------------- */

.allergen-badge {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--cream);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.allergen-badge__icon {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.icon-cutout {
  fill: var(--maroon);
}

.icon-cutout-stroke {
  fill: none;
  stroke: var(--maroon);
  stroke-width: 1;
  stroke-linecap: round;
}

.allergen-badge__tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.5rem);
  /* --tooltip-shift-x is set by assets/js/menu-tabs.js when growing
     rightward from the badge's left edge would still overflow the
     viewport; 0px (today's plain left-anchored growth) if that never
     runs — see the comment above this block and in menu-tabs.js. */
  transform: translateX(var(--tooltip-shift-x, 0px)) translateY(4px);
  width: max-content;
  max-width: min(220px, 65vw);
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.allergen-badge__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0.75rem;
  transform: translateX(var(--tooltip-shift-x, 0px));
  border: 6px solid transparent;
  border-top-color: var(--maroon);
}

.allergen-badge:hover .allergen-badge__tooltip,
.allergen-badge:focus .allergen-badge__tooltip,
.allergen-badge:focus-visible .allergen-badge__tooltip,
.allergen-badge:active .allergen-badge__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(var(--tooltip-shift-x, 0px)) translateY(0);
}

.menu-item__price {
  font-family: var(--font-display);
  font-weight: 800;
  flex: 0 0 auto;
  font-size: 1.15rem;
  white-space: nowrap;
}

.menu-item__price--tbd {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.7;
}

.dessert-note {
  font-family: var(--font-display);
  font-weight: 800;
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  background: var(--maroon);
  color: var(--cream);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.02em;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  line-height: 1.6;
}

.allergen-legend {
  margin-top: 3rem;
  border-top: 3px solid var(--maroon);
  padding-top: 1.25rem;
}

.allergen-legend__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.allergen-legend__list {
  font-family: var(--font-body);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem 1.5rem;
  font-size: 0.85rem;
}

.allergen-legend__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.allergen-legend__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--cream);
}

.allergen-legend__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* ---------------------------------------------------------------------
   "Karar veremiyorum" — random dish suggestion.

   The trigger lives in the header, right below the WhatsApp contact block,
   so it's in view before any scrolling — the whole point of a button for
   visitors who can't decide. Cream fill on the maroon header inverts the
   page's usual pill, and the result opens in a native <dialog>. Everything
   here is driven by assets/js/random-pick.js: it reveals the button and
   fills the dialog from the picked .menu-item article. Nothing in this
   block is reachable without JS, which is why the button ships hidden.
   ------------------------------------------------------------------- */

.random-pick {
  display: flex;
}

/* The UA's [hidden] { display: none } loses to the class rule above, so the
   hidden state has to be spelled out here — otherwise the button flashes
   up for no-JS visitors, which is exactly what shipping it hidden avoids. */
.random-pick[hidden] {
  display: none;
}

/* width: 100% makes the pill span the contact block above it instead of
   its own text width — that's what keeps this column as narrow as the
   contact details, so the logo and contact stay side by side on a phone.
   The type is a size down from the tab pills for the same reason: its
   min-content width has to stay under the contact block's. */
.random-pick__button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Vertical padding is the tap target; horizontal stays tight because the
     width budget above is what keeps this column narrow. */
  padding: 0.45rem 0.7rem;
  border: 2px solid var(--cream);
  border-radius: 999px;
  background: var(--cream);
  color: var(--maroon);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.random-pick__button:hover {
  background: transparent;
  color: var(--cream);
}

.random-pick__button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

.random-pick__emoji {
  font-size: 1.15em;
  line-height: 1;
}

.pick-dialog {
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(86vh, 46rem);
  overflow-y: auto;
  margin: auto;
  padding: 0;
  border: 3px solid var(--maroon);
  border-radius: 1rem;
  background: var(--cream);
  color: var(--maroon);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.pick-dialog::backdrop {
  background: rgba(104, 35, 35, 0.6);
}

.pick-dialog[open] {
  animation: pick-dialog-in 0.18s ease-out;
}

@keyframes pick-dialog-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.98);
  }
}

/* One rule for every part of the card JS blanks out for an item that has
   no description/calories/add-ons — several of them are flex containers,
   whose display would otherwise win over the UA's [hidden] rule. */
.pick-dialog [hidden] {
  display: none;
}

.pick-dialog__inner {
  position: relative;
  padding: 1.5rem;
}

.pick-dialog__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--maroon);
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.pick-dialog__close:hover {
  opacity: 1;
  background: rgba(104, 35, 35, 0.1);
}

.pick-dialog__close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--maroon);
  outline-offset: 2px;
}

.pick-dialog__eyebrow {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0.75;
  /* Clears the close button in its corner. */
  margin: 0 2.25rem 0.35rem 0;
}

/* -------------------------------------------------------------------
   Photo lightbox — assets/js/photo-view.js. Inert without JS: the
   thumbnails are links to the image file, so with scripting off the photo
   opens as a page and none of this is reached.
   ------------------------------------------------------------------- */

/* No panel, no card, no background. The photo is a cut-out plate, so the
   dialog is just the plate floating over a dimmed menu — anything drawn
   behind it would be the square this picture spent its whole pipeline not
   being. */
.photo-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: visible;
}

.photo-dialog::backdrop {
  background: rgba(35, 12, 12, 0.82);
}

.photo-dialog__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem;
}

/* dvh, not vh: on a phone browser vh is the height with the toolbars
   retracted, so a tall plate would sit under the address bar until you
   scrolled. Sized well under the viewport so the caption below always has
   room without the figure needing to scroll. */
.photo-dialog__image {
  display: block;
  max-width: min(92vw, 720px);
  max-height: 72dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
}

.photo-dialog__caption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  color: var(--cream);
  margin: 0;
  max-width: min(92vw, 720px);
}

.photo-dialog__caption[hidden] {
  display: none;
}

/* Fixed rather than absolute, and pinned to the viewport: the dialog's own
   box is only as big as the photo inside it, so a corner-anchored close
   button would land on top of the plate for a small image. */
.photo-dialog__close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px is the smallest thing most people can reliably hit with a thumb. */
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  border: 2px solid rgba(249, 241, 219, 0.5);
  border-radius: 50%;
  background: rgba(35, 12, 12, 0.6);
  color: var(--cream);
  cursor: pointer;
}

.photo-dialog__close:hover {
  background: var(--cream);
  color: var(--maroon);
}

.photo-dialog__close:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* Capped in height rather than stretched to the card's width: the picture is
   a cut-out plate, so filling the width would either crop the rim off (cover)
   or leave a tall band of dead space around it (contain). Letting it size
   itself up to a ceiling keeps the name, price and allergens — the three
   things this card exists to show — above the fold on a phone.

   contain and no background, for the same reason as the menu thumbnails: there
   is no rectangle in this image to draw a box around. */
.pick-card__image {
  display: block;
  max-width: 100%;
  max-height: clamp(140px, 30vh, 220px);
  width: auto;
  height: auto;
  margin: 0 auto 0.85rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(58, 20, 20, 0.3));
}

/* [hidden] would normally handle this, but display: block above outranks the
   UA stylesheet's [hidden] { display: none } — the same collision the
   .random-pick[hidden] rule further up documents. */
.pick-card__image[hidden] {
  display: none;
}

.pick-card__category {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin: 0;
}

.pick-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  line-height: 1.25;
  margin: 0.15rem 0 0;
}

.pick-card__desc {
  font-size: 0.95rem;
  margin: 0.6rem 0 0;
  opacity: 0.9;
}

.pick-card__extras {
  margin-top: 0.25rem;
}

.pick-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1.1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(104, 35, 35, 0.2);
}

.pick-card__fact {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.pick-card__fact-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.pick-card__fact-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0;
}

.pick-card__allergen-block {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(104, 35, 35, 0.2);
}

.pick-card__allergen-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.6rem;
}

/* Same icon-stamp treatment as the legend at the bottom of the page — with
   room here to print each allergen's full wording next to it instead of
   hiding it in a hover tooltip. */
.pick-card__allergens {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.pick-card__allergen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pick-card__allergen-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--cream);
}

.pick-card__allergens-empty {
  font-style: italic;
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0;
}

.pick-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.pick-dialog__again,
.pick-dialog__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--maroon);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pick-dialog__again {
  background: var(--maroon);
  color: var(--cream);
}

.pick-dialog__again:hover {
  background: transparent;
  color: var(--maroon);
}

.pick-dialog__dismiss {
  flex: 0 0 auto;
  background: transparent;
  color: var(--maroon);
}

.pick-dialog__dismiss:hover {
  background: var(--maroon);
  color: var(--cream);
}

.pick-dialog__again:focus-visible,
.pick-dialog__dismiss:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
}

.pick-dialog__again-emoji {
  font-size: 1.1em;
  line-height: 1;
}

/* ---------------------------------------------------------------------
   Footer — one line, the registered company name and nothing else.
   Maroon band so it bookends the header instead of trailing off the
   bottom of the cream allergen legend.
   ------------------------------------------------------------------- */

.site-footer {
  background: var(--maroon);
  color: var(--cream);
  padding: 0.9rem var(--content-inset);
}

.site-footer__copyright {
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
  /* Sized to keep the name on one line down to a 320px viewport — it's
     ~46 characters, so it needs to shrink with the viewport rather than
     sit at a fixed size and wrap. */
  font-size: clamp(0.7rem, 2.6vw, 0.8rem);
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------
   Responsive breakpoints
   Base styles above are mobile-first; refinements below scale up.
   ------------------------------------------------------------------- */

/* Small phones */
@media (max-width: 380px) {
  .menu-item__name {
    font-size: 1rem;
  }

  .menu-item__price {
    font-size: 1rem;
  }

  .menu-item__desc {
    font-size: 0.85rem;
  }
}

/* Phones/small tablets: stack price under item name */
@media (max-width: 600px) {
  :root {
    --content-inset: 1rem;
  }

  main {
    padding: 1rem var(--content-inset) 2.5rem;
  }

  .menu-item {
    flex-direction: column;
    gap: 0.15rem;
  }

  /* The photo keeps its column and spans both rows; the text and the price
     stack in the second column, which is the same "price under the name"
     shape the flex rule above gives a row without a photo. */
  .menu-item--has-image {
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    row-gap: 0.15rem;
  }

  .menu-item--has-image .menu-item__photo {
    grid-row: 1 / span 2;
  }

  .menu-item--has-image .menu-item__image {
    width: 84px;
    height: 84px;
  }

  .menu-item--has-image .menu-item__price {
    grid-column: 2;
  }

  .allergen-legend__list {
    grid-template-columns: 1fr;
  }

  /* Narrower tooltip on small screens reduces how far a badge near the
     edge of a wrapped line can overflow past the viewport (body clips
     horizontal overflow, so a too-wide bubble would just get cut off). */
  .allergen-badge__tooltip {
    max-width: min(170px, 50vw);
  }

  .pick-dialog__inner {
    padding: 1.25rem 1.1rem;
  }

  /* Full-width stacked buttons rather than two cramped pills side by side. */
  .pick-dialog__actions {
    flex-direction: column;
  }

  .pick-dialog__dismiss {
    flex: 1 1 auto;
  }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 900px) {
  :root {
    --content-inset: 2rem;
  }

  main {
    padding: 1.5rem var(--content-inset) 3rem;
  }
}

/* Wide enough to put category sub-groups side by side instead of stacked */
@media (min-width: 601px) {
  .menu-category__groups {
    flex-direction: row;
    gap: 2.5rem;
  }

  .menu-category__group {
    flex: 1 1 0;
    min-width: 0;
  }

  .menu-category__group + .menu-category__group {
    border-top: none;
    padding-top: 0;
    border-left: 1px solid rgba(104, 35, 35, 0.2);
    padding-left: 2.5rem;
  }
}

/* Large desktop: keep line lengths readable */
@media (min-width: 1400px) {
  :root {
    --content-width: 960px;
  }

  body {
    font-size: 1.05rem;
  }
}

/* Respect reduced-motion/high-contrast users where relevant */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .pick-dialog[open] {
    animation: none;
  }
}