/*
 * Sugestão do chef / do bar — one template for both sheets, on screen and on paper.
 *
 * Header (store, the sheet's own lettering, illustration, date) → a section per course → each
 * item a row of [circle] [name + description] [price] → the foot. Chef and Bar share every
 * font, colour, size and space; only the lettering, the illustration and the circles differ.
 *
 * Type: the lettering is the October sheets' script, as images; everything else is Manrope.
 * No text shadows anywhere.
 *
 * Paper is laid out natively as an A5 (148×210mm, 8mm safe margin), in mm and pt, under
 * .is-print. The A4 sheet is that A5 enlarged by √2, and ?copies=2 sets two A5s side by side
 * on a landscape A4 to cut in half — one design, so the sizes cannot drift apart.
 */

:root {
  --wine: #80184a;          /* brand burgundy: headings, active tab, date pill */
  --wine-dark: #310419;
  --tint: #f9e6ec;          /* the icon circles: a light pink on screen */
  --tint-print: #f5d6e0;    /* a shade deeper on paper, where the lighter one fades away */
  --ink: #1a1014;
  --ink-soft: #33252b;
  --muted: #6b5860;
  --ground: #efe7e4;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink); }
body { font: 16px/1.5 Manrope, 'Segoe UI', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--wine); outline-offset: 2px; border-radius: 6px; }

.sug { max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative; overflow: clip;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); }
.sug-loading { text-align: center; color: var(--muted); padding: 40vh 16px 0; margin: 0; }

/* ---- top bar: store, language, tabs (screen only) ---- */
.sug-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  font: 700 0.74rem/1 Manrope, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.sug-bar a.store { text-decoration: none; color: var(--wine); }
.lang { display: inline-flex; border: 1px solid var(--ink); border-radius: 99px; overflow: hidden; letter-spacing: 0.06em; }
.lang a { padding: 6px 11px; text-decoration: none; color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }
.tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.tabs button { flex: 1; font: 700 0.92rem/1 Manrope, sans-serif; padding: 12px 0; border-radius: 99px; cursor: pointer;
  border: 0; background: #f4eef0; color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--wine); color: #fff; }

/* ---- the sheet ---- */
/* One left and right edge for everything: the store name, the tabs and the sheet. */
.sheet { position: relative; padding: 6px 0 4px; }
.sheet > :not(.arcs) { position: relative; z-index: 1; }
.arcs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Clipped to its own box, which reaches exactly 3mm past the trim: the bleed, and no further. */
.arc-print { display: none; overflow: hidden; }

.head .where { display: none; }
.art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 34%); align-items: center; gap: 8px; margin: 4px 0 10px; }
.art .title, .art .mascot { width: 100%; height: auto; }
/* The date the suggestions run to: information, not a control, so not a pill (the tabs and the
   button are pills). Dark text with a small burgundy calendar; nothing that fades on paper. */
.valid { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px; padding: 0; background: none;
  color: var(--ink-soft); font: 600 0.86rem/1.3 Manrope, sans-serif; }
.valid::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--wine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }

.body { display: flex; flex-direction: column; gap: 26px; }
.kicker { margin: 0 0 12px; color: var(--wine); font: 800 0.74rem/1 Manrope, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
/* [circle] [name ... price / description]: the name and the price share the first line, the
   price right-aligned in figures of equal width and never wrapped, and the description runs the
   full width under them. The circle is the same size on every chef row, so the text starts at
   the same place. */
.item { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.text .line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.text .line h3 { min-width: 0; }
.text .line .price { flex: none; }
.visual { width: 84px; height: 84px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; overflow: hidden; }
.visual .ico { width: 62%; height: 62%; object-fit: contain; }
.visual .photo { width: 100%; height: 100%; object-fit: cover; }
/* Drinks are shown by their photo, which has to be big enough to see what is in the glass:
   160px, the text centred against it, a hairline between drinks. */
/* .big: every drink, and every chef dish once any of the chef's dishes has a photo - so a
   list mixing photos and course icons keeps one circle size (sugestoes.js sheetHtml). */
.big { grid-template-columns: 160px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.big .visual { width: 160px; height: 160px; }
.big .visual .ico { width: 54%; height: 54%; }
.big .text p { max-width: 42ch; text-wrap: pretty; margin-top: 7px; }
.sheet.has-big .items { gap: 0; }
.sheet.has-big .kicker { margin-bottom: 16px; }
.sheet.has-big .big { padding-block: 14px; }
.sheet.has-big .big:first-child { padding-top: 0; }
.sheet.has-big .big + .big { border-top: 1px solid rgba(0, 0, 0, 0.08); }
/* On screen the photo gets depth: a white ring, a soft low shadow, and a vignette so the
   tablecloth's damask recedes behind the glass. Each photo is moved and scaled to centre its
   drink (--tx/--ty/--z, set from the panel's frame for the photo - sugestoes.js frameStyle). */
/* Every big circle has the ring and the shadow, a photo or a course icon alike, so a mixed
   list reads as one set; the dark ground and the vignette are for photos only. */
.sug:not(.is-print) .big .visual { position: relative; box-sizing: content-box; border: 2px solid #fff;
  box-shadow: 0 8px 18px -6px rgba(60, 10, 30, 0.35); }
.sug:not(.is-print) .big .visual.has-photo { background: #5b1630; }
/* The vignette, light at the edge so the drink is not boxed in, and a hairline inside the ring. */
.sug:not(.is-print) .big .visual.has-photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 60%, rgba(40, 0, 20, 0.22));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
/* 1.3 at least (sugestoes.js frameStyle): never the lighter bands at an old photo's sides.
   A dish's photo is the menu's own square crop, already framed on the plate: no zoom. */
.sug:not(.is-print) .big .photo { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--z, 1));
  filter: saturate(1.05) contrast(1.03); }
.sug:not(.is-print) .drink .photo { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--z, 1.3)); }
@media (max-width: 480px) {
  .big { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; }
  .big .visual { width: 104px; height: 104px; }
}

/* The arcs on screen: the paper's drawing, running off the card's edge (the screen's, on a
   phone), clipped there, inside the side margin and clear of the content and the button. */
.web-arcs { position: absolute; inset: 0; pointer-events: none; }
.web-arcs .arc-print { display: block; position: absolute; }
.web-arcs .arc-print-right { right: -8px; top: 250px; width: 32px; height: 187px; }
.web-arcs .arc-print-corner { left: -10px; bottom: -10px; width: 110px; height: 110px; }
.sug > :not(.web-arcs) { position: relative; z-index: 1; }
.text h3 { margin: 0; font: 700 1rem/1.3 Manrope, sans-serif; color: var(--ink); }
.text p { margin: 3px 0 0; font: 400 0.9rem/1.45 Manrope, sans-serif; color: var(--ink-soft); text-align: left; }
.price { font: 700 1rem/1.3 Manrope, sans-serif; color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- the foot: on screen one centred block ---- */
/* On screen: the phone and "Siga-nos" stacked on the left, the logo on the right, over a thin
   rule that closes the list. */
.foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid #ecdde2; }
.sug:not(.is-print) .foot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tel logo" "social logo";
  align-items: center; column-gap: 20px; row-gap: 18px; }
.sug:not(.is-print) .tel { grid-area: tel; }
.sug:not(.is-print) .socials { grid-area: social; }
.sug:not(.is-print) .foot .logo { grid-area: logo; align-self: center; }
.tel { display: inline-flex; align-items: center; gap: 10px; justify-self: start; text-decoration: none; color: var(--ink); font: 600 1rem/1.2 Manrope, sans-serif; }
.tel img { width: 28px; height: 28px; }
.tel-label { display: block; font: 700 0.68rem/1.2 Manrope, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tel > span { display: grid; text-align: left; }
.tel-num { font: 700 1.15rem/1.2 Manrope, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.socials { display: grid; justify-items: start; gap: 8px; }
.follow-label { font: 700 0.72rem/1 Manrope, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.social-row { display: flex; gap: 10px; }
.social { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #de2476; }
.social svg { width: 22px; height: 22px; }
.social-facebook { background: #1b4f9c; }
.social-youtube { background: #c4302b; }
.ig-handle { color: var(--wine); font: 600 0.82rem/1 Manrope, sans-serif; }
.foot .logo { width: 84px; }
.vat { margin: 20px 0 0; color: var(--muted); font: 400 0.76rem/1.4 Manrope, sans-serif; text-decoration: none; }
.only-print { display: none !important; }

/* links under both */
.more { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.more a { text-decoration: none; font: 700 0.9rem/1 Manrope, sans-serif; padding: 12px 18px; border-radius: 99px; border: 1px solid var(--wine); color: var(--wine); }
.more a.primary { background: var(--wine); color: #fff; }

/* none right now */
.empty { text-align: center; display: grid; justify-items: center; gap: 12px; padding-top: 12vh; }
.empty img { width: 170px; }
.empty h1 { margin: 0; font: 400 1.7rem/1.2 Prata, Georgia, serif; color: var(--wine-dark); text-wrap: balance; }
.empty p { margin: 0; color: var(--muted); max-width: 32ch; }

/* Wider than a phone, the page is shown as the sheet it is: white paper on a soft ground. */
@media (min-width: 620px) {
  html:not(.is-print-page), html:not(.is-print-page) body { background: var(--ground); }
  .sug:not(.is-print) { background: #fff; margin-block: 24px; min-height: calc(100vh - 48px);
    border-radius: 6px; box-shadow: 0 10px 34px rgba(49, 4, 25, 0.16); padding-inline: 24px; }
  /* A wider margin on the card, so a larger arc. */
  .web-arcs .arc-print-right { right: -10px; top: 260px; width: 40px; height: 233px; }
  .web-arcs .arc-print-corner { width: 140px; height: 140px; left: -14px; bottom: -14px; }
}

/* Someone printing the web page itself, not the panel's sheet: keep the content, drop the
   controls and the card. */
@media print {
  html:not(.is-print-page), html:not(.is-print-page) body { background: #fff; }
  .sug:not(.is-print) { box-shadow: none; border-radius: 0; margin: 0 auto; min-height: 0; }
  .sug:not(.is-print) .sug-bar, .sug:not(.is-print) .tabs, .sug:not(.is-print) .more,
  .sug:not(.is-print) .web-arcs { display: none; }
}

/* ======================================================================== paper
   The A5 sheet: 148×210mm. The text keeps 8mm from the trim top and bottom and 10mm at the
   sides, so the arcs, clipped to their own page and never across the cut, stay 6mm clear of
   the prices. Header and foot take what they need; the menu fills the space between with
   fixed gaps (about twice as much above a course heading as below it) and whatever room is
   left shared out evenly, so there is never an empty band under the header. */
@page { size: A4; margin: 0; }
@page duo { size: A4 landscape; margin: 0; }
html.is-print-page, html.is-print-page body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sug.is-print { max-width: none; min-height: 0; padding: 0; margin: 0; }

.is-print .sheet { width: 148mm; height: 210mm; padding: 8mm 10mm; display: flex; flex-direction: column; }
.a4 > .a5, .duo > .a5 { overflow: hidden; }
.is-print .arc { display: none; }
.is-print .arc-print { display: block; position: absolute; }
.is-print .arc-print-right { right: -3mm; top: 40mm; width: 12mm; height: 70mm; }
.is-print .arc-print-corner { left: -3mm; bottom: -3mm; width: 30mm; height: 30mm; }

.is-print .head { flex: none; display: flex; flex-direction: column; }
.is-print .head .where { display: block; margin: 0; color: var(--wine); font: 800 8pt/1 Manrope, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.is-print .art { height: 30mm; margin: 0.5mm 0 2mm; grid-template-columns: minmax(0, 1fr) 32mm; gap: 3mm; }
.is-print .art .title { max-height: 20mm; object-fit: contain; object-position: left center; }
.is-print .art .mascot { height: 30mm; width: 32mm; object-fit: contain; }
.is-print .valid { align-self: flex-start; margin: 0; color: #222; font-size: 9pt; }
.is-print .valid::before { width: 3.6mm; height: 3.6mm; }

.is-print .body { flex: 1; min-height: 0; justify-content: space-evenly; gap: 5mm; padding: 2.5mm 0 2mm; }
.is-print .kicker { margin-bottom: 2.2mm; font-size: 8pt; }
.is-print .items { gap: 3mm; }
.is-print .item { grid-template-columns: 16mm minmax(0, 1fr); column-gap: 4mm; }
.is-print .visual { width: 16mm; height: 16mm; background: var(--tint-print); }
.is-print .drink { grid-template-columns: 30mm minmax(0, 1fr); align-items: start; }
/* Paper keeps its own spacing: no hairlines, the list's gap between drinks. */
.is-print .sheet.has-big .big, .is-print .sheet.has-big .big + .big { padding-block: 0; border: 0; }
.is-print .sheet.has-big .kicker { margin-bottom: 2.2mm; }
.is-print .sheet.has-big .items { gap: 3mm; }
.is-print .dish.big { align-items: start; }
.is-print .drink .visual { width: 30mm; height: 30mm; }
.is-print .text h3 { font-size: 11.5pt; line-height: 1.25; color: #111; }
.is-print .text p { margin-top: 0.6mm; font-size: 9.5pt; line-height: 1.3; color: #222; }
.is-print .price { font-size: 11.5pt; line-height: 1.25; color: #111; }

.is-print .foot { flex: none; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.is-print .foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4mm; }
.is-print .only-print { display: grid !important; }
.is-print .only-screen { display: none !important; }
.is-print .tel { justify-self: start; font-size: 9.5pt; gap: 2mm; }
.is-print .tel img { width: 5mm; height: 5mm; }
.is-print .tel > span { display: grid; text-align: left; line-height: 1.25; }
.is-print .tel-label { font-weight: 400; font-size: 8pt; color: var(--ink-soft); }
.is-print .tel-num { font-size: 10.5pt; }
.is-print .tel img { width: 5.5mm; height: 5.5mm; }
.is-print .ig-qr { justify-self: center; justify-items: center; gap: 0.8mm; text-decoration: none; color: var(--wine); }
/* 27mm including its 4-module quiet zone: the code itself is 22mm. */
.is-print .ig-qr img { width: 27mm; height: 27mm; }
.is-print .ig-qr span { font: 600 8pt/1 Manrope, sans-serif; }
.is-print .foot .logo { justify-self: end; width: auto; height: 21mm; }
.is-print .vat { margin: 2mm 0 0; font-size: 8pt; color: #4a3a40; text-align: center; }

/* One A5, enlarged by √2 onto a portrait A4 (?print=chef). */
.a4 { position: relative; width: 210mm; height: 297mm; overflow: hidden; background: #fff; margin: 0 auto; }
.a4 > .a5 { position: absolute; top: 0; left: 0.35mm; width: 148mm; height: 210mm; transform: scale(1.41421); transform-origin: top left; }

/* Two A5s on a landscape A4 (?copies=2): 148mm each, butting at the centre, where the sheet is
   cut. The cut is marked top and bottom; the outer trims are the paper's own edges. Each half
   may bleed 3mm into the other's margin — cut away with the paper. */
.duo { page: duo; position: relative; width: 297mm; height: 210mm; overflow: hidden; background: #fff; margin: 0 auto; }
.duo > .a5 { position: absolute; top: 0; width: 148mm; height: 210mm; }
.duo > .a5:first-child { left: 0.5mm; }
.duo > .a5 + .a5 { left: 148.5mm; }
.cut { position: absolute; left: 148.5mm; width: 0; height: 6mm; border-left: 0.25mm solid #000; z-index: 2; }
.cut-top { top: 0; }
.cut-bottom { bottom: 0; }

@media screen {
  html.is-print-page, html.is-print-page body { background: #8d8387; }
  html.is-print-page body { padding: 16px 0; }
  .a4, .duo { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); }
}

/* The static copy crawlers read (suggestions-render.js); replaced by the script on load. */
/* Hidden while the script draws the styled page (see the inline script in the head). */
.js .sug-static { display: none; }
.sug-static { padding: 24px 4px; font: 16px/1.5 Manrope, 'Segoe UI', sans-serif; }
.sug-static h1 { font: 400 1.5rem/1.2 Prata, Georgia, serif; }
.sug-static ul { padding-left: 20px; }

/* ---- Cookie banner ----
   The same banner as the store pages (build-location-pages.js cookieBanner), styled for this
   page: these are QR landings, so a scan is measured only after the visitor answers it. Never
   printed — the A4 and A5 sheets come from this page. */
.cookie-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--wine);
  background: rgba(29, 10, 16, 0.97);
  color: #fff;
  font: 0.8rem/1.5 system-ui, 'Segoe UI', sans-serif;
}
.cookie-banner[hidden],
.cookie-manage-panel[hidden] { display: none; }
.cookie-banner-main { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.cookie-text { flex: 1 1 260px; margin: 0; }
.cookie-text-long { display: none; }
.cookie-link { color: #f4c6d6; text-decoration: underline; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-cookie-accept,
.btn-cookie-reject,
.btn-cookie-manage {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-cookie-accept { border: 0; background: var(--wine); color: #fff; }
.btn-cookie-reject,
.btn-cookie-manage { border: 1px solid rgba(255, 255, 255, 0.4); background: none; color: #fff; }
.cookie-manage-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.cookie-category label { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.cookie-category p { margin: 2px 0 0 24px; opacity: 0.75; }
@media print { .cookie-banner { display: none !important; } }

/* Cookie banner on a phone: Rejeitar and Aceitar side by side, the same size - refusing is as
   easy as accepting - and Preferências full width under them. Three buttons wrapping freely
   left "Aceitar tudo" alone on a row, off to one side. */
@media (max-width: 767px) {
  .cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1 1 100%; width: 100%; }
  .cookie-banner-actions .btn-cookie-reject { order: 1; }
  .cookie-banner-actions .btn-cookie-accept { order: 2; }
  .cookie-banner-actions .btn-cookie-manage { order: 3; grid-column: 1 / -1; }
  .cookie-banner-actions button { width: 100%; min-height: 44px; padding-inline: 8px; text-align: center; justify-content: center; }
}