/* ivanositaliano.co.uk: replica of the 2018–2026 ivanositalianfood.co.uk (TheGem) look.
   Rebuilt in plain CSS from the measured design tokens (brand/legacy/DESIGN-TOKENS.md).
   No theme/plugin code is reused. */

@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Montserrat UltraLight'; src: url('../fonts/montserrat-ultralight.woff') format('woff'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Source Sans Pro'; src: url('../fonts/source-sans-pro-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Source Sans Pro'; src: url('../fonts/source-sans-pro-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }

:root {
  --gem-menu: #126b24; --gem-menu-hover: #969696; --gem-menu-chip: rgba(255,255,255,.85);
  --gem-h1: #008f43; --gem-heading: #3c3950; --gem-body: #5f727f;
  --gem-link: #00a32e; --gem-link-hover: #384554;
  --gem-box: rgba(0,160,53,.92); --gem-topbar: #107a2c;
  --gem-footer: #2e2e47; --gem-footer-text: #99a9b5; --gem-title-band: #008229;
  --gem-btn: #6dab3c; --gem-btn-hover: #5f9434; --gem-sep: #ebebeb;
  --flag-green: #008f41; --flag-red: #e01f27;
  --container: 1212px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 16px; line-height: 25px; color: var(--gem-body); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gem-link); text-decoration: none; }
a:hover { color: var(--gem-link-hover); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 21px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Headings (TheGem: Montserrat 700 uppercase, thin variant via .light) */
h1, .title-h1, h2, h3, h4, h5 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .6em; }
h1, .title-h1 { font-size: 50px; line-height: 69px; color: var(--gem-h1); }
h2 { font-size: 36px; line-height: 53px; color: var(--gem-heading); }
h3 { font-size: 28px; line-height: 42px; color: var(--gem-heading); }
h4 { font-size: 24px; line-height: 38px; color: var(--gem-heading); text-transform: none; letter-spacing: 0; }
.light, h1 .light, h2 .light, h3 .light { font-family: 'Montserrat UltraLight', 'Montserrat', Arial, sans-serif; font-weight: normal; }
@media (max-width: 1000px) { h1, .title-h1 { font-size: 5vw; line-height: 6.9vw; } h2 { font-size: 3.6vw; line-height: 5.3vw; } }
@media (max-width: 600px) { h1, .title-h1 { font-size: 30px; line-height: 40px; } h2 { font-size: 24px; line-height: 34px; } h3 { font-size: 22px; line-height: 32px; } }

/* Reopening banner (new) */
.reopen-banner { background: var(--gem-topbar); color: #fff; text-align: center; font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; line-height: 20px; }
.reopen-banner strong { font-weight: 700; }

/* Top bar */
.top-area { background: #fff; border-top: 5px solid var(--gem-topbar); border-bottom: 1px solid #e5e7ea; color: var(--gem-topbar); padding: 10px 0; font-size: 14px; line-height: 30px; }
.top-area .container { display: flex; justify-content: center; align-items: center; position: relative; flex-wrap: wrap; }
.top-area .contacts { display: flex; flex-wrap: wrap; justify-content: center; }
.top-area .contacts span, .top-area .contacts a { padding: 0 17px; color: var(--gem-topbar); display: inline-flex; align-items: center; gap: 6px; }
.top-area .contacts a:hover { color: #189e39; }
.top-area .socials { position: absolute; right: 21px; display: flex; gap: 10px; }
.top-area svg, .footer-socials svg { width: 16px; height: 16px; fill: currentColor; }
.top-area .socials a { color: #b6c6c9; }
.top-area .socials a:hover { color: var(--gem-topbar); }
@media (max-width: 799px) { .top-area { display: none; } }

/* Header */
.site-header { position: relative; z-index: 20; text-align: center; padding-top: 40px; }
.site-header.over-hero { position: absolute; left: 0; right: 0; }
.site-header.solid { background: #fff; padding-bottom: 6px; border-bottom: 1px solid #eef0f1; }
.site-header .logo img { width: 174px; margin: 0 auto 4px; }
.primary-menu { list-style: none; margin: 0; padding: 18px 0 20px; display: flex; justify-content: center; flex-wrap: wrap; }
.primary-menu li { padding: 6px 3px; }
.primary-menu a { display: block; padding: 0 15px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; line-height: 25px; text-transform: uppercase; color: var(--gem-menu); background: var(--gem-menu-chip); border: 2px solid transparent; }
.site-header.solid .primary-menu a { background: transparent; }
.primary-menu a:hover { color: var(--gem-menu-hover); }
.primary-menu a.current { border-color: var(--gem-menu); }
.menu-toggle { display: none; }
@media (max-width: 767px) {
  .site-header { padding-top: 16px; }
  .site-header.over-hero { position: relative; background: #fff; }
  .site-header .logo img { width: 132px; }
  .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; position: absolute; right: 16px; top: 22px; width: 42px; height: 38px; background: transparent; border: 0; cursor: pointer; padding: 8px; }
  .menu-toggle span { display: block; height: 3px; background: #008a15; border-radius: 1px; }
  .primary-menu { display: none; flex-direction: column; padding: 8px 0; border-top: 1px solid #eef0f1; margin-top: 12px; }
  .primary-menu.open { display: flex; }
  .primary-menu li { padding: 0; }
  .primary-menu a { background: transparent; padding: 12px 20px; text-align: left; border: 0; border-left: 4px solid transparent; }
  .primary-menu a.current { border-left-color: var(--gem-topbar); }
}

/* Buttons */
.btn-order { display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.4; padding: 14px 20px; color: #fff; background: var(--gem-btn) linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.01)); border: 1px solid transparent; border-radius: 0; }
.btn-order:hover { background-color: var(--gem-btn-hover); color: #fff; }
.btn-outline-white { display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; padding: 8px 18px; color: #fff; border: 2px solid #fff; border-radius: 1px; background: transparent; }
.btn-outline-white:hover { background: #fff; color: #848484; }

/* Hero */
.hero { position: relative; color: #fff; text-align: center; padding: 345px 0 225px; background: #1f1a17 center / cover no-repeat; background-attachment: fixed; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(12,10,8,.72), rgba(12,10,8,.62)); }
.hero > * { position: relative; }
.hero .wordmark { width: 800px; max-width: 88%; margin: 0 auto; }
.hero .tagline { margin: 20px 0 10px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 85%; line-height: 23px; letter-spacing: .05em; text-transform: uppercase; color: #cfcfcf; }
.hero .phone { color: #d0d0d0; margin: 0 0 24px; }
.hero .phone a { color: inherit; }
.v-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 20px; width: 100%; }
.v-edge path { fill: #fff; }
@media (max-width: 1024px) { .hero { background-attachment: scroll; } }
@media (max-width: 767px) { .hero { padding: 90px 0 90px; } }

/* Sections */
.section { padding: 90px 0 40px; }
.section.tight { padding-top: 40px; }
.separator { height: 1px; background: var(--gem-sep); border: 0; margin: 10px auto 30px; }
.sep-title { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
.sep-title::before, .sep-title::after { content: ""; flex: 1; height: 1px; background: var(--gem-sep); }
.sep-title h1 { margin: 0; }
.lead { max-width: 1170px; margin: 0 auto; color: #000; text-align: center; font-size: 15px; letter-spacing: .02em; }
.muted { color: #808080; }

/* Photo strip (replaces the Slider Revolution strip; own photos only) */
.photo-strip { position: relative; max-width: 1170px; margin: 50px auto 0; height: 470px; overflow: hidden; }
/* 5 slides: the restored 2018 "hands rolling dough" slide first, then own photos. 6s each, 30s cycle */
.photo-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: strip 30s infinite; }
.photo-strip img:nth-child(1) { animation-delay: 0s; } .photo-strip img:nth-child(2) { animation-delay: 6s; }
.photo-strip img:nth-child(3) { animation-delay: 12s; } .photo-strip img:nth-child(4) { animation-delay: 18s; }
.photo-strip img:nth-child(5) { animation-delay: 24s; }
@keyframes strip { 0% { opacity: 0; transform: scale(1.06); } 3% { opacity: 1; } 20% { opacity: 1; } 23% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-strip img { animation: none; } .photo-strip img:first-child { opacity: 1; } }
@media (max-width: 767px) { .photo-strip { height: 215px; margin: 30px 16px 0; } }

/* Explore menu tab */
.tabs { margin: 30px auto 0; max-width: 1170px; }
.tabs .tab-label { display: table; margin: 0 auto -2px; position: relative; z-index: 1; padding: 10px 20px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--gem-btn); background: #fff; border: 2px solid var(--gem-btn); border-bottom-color: #fff; }
.tabs .tab-panel { border: 2px solid var(--gem-btn); border-radius: 4px; padding: 26px; }
.dish-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dish { text-align: center; }
.dish img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.dish h4 { font-size: 16px; line-height: 22px; margin: 12px 0 2px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dish p { margin: 0; font-size: 14px; color: var(--gem-btn); font-weight: 400; }
@media (max-width: 900px) { .dish-grid { grid-template-columns: repeat(2, 1fr); } }

/* Finest ingredients (parallax + sage overlay) */
.ingredients { position: relative; margin-top: 90px; padding: 50px 0 520px; text-align: center; background: center / cover no-repeat; background-attachment: fixed; }
.ingredients::before { content: ""; position: absolute; inset: 0; background: #abb292; opacity: .38; }
.ingredients > * { position: relative; }
.ingredients h1 { color: #fff; margin: 0; }
.ingredients .separator { background: rgba(255,255,255,.7); max-width: 460px; margin-top: 6px; }
.v-edge.top { top: -1px; bottom: auto; transform: rotate(180deg); }
@media (max-width: 1024px) { .ingredients { background-attachment: scroll; } }
@media (max-width: 767px) { .ingredients { padding-bottom: 260px; } }
/* Restored 2018 background video behind "Finest Ingredients" (overlay #abb292 at 50%, as the original) */
.ingredients.has-video { background-attachment: scroll; overflow: hidden; }
.ingredients > video.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ingredients.has-video::before { z-index: 1; opacity: .5; }
.ingredients.has-video > :not(video) { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .ingredients > video.bg-video { display: none; } }

/* Pay your way cards */
.pay-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.pay-card { background: var(--gem-box); color: #fff; text-align: center; padding: 40px 26px 60px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; }
.pay-card svg { width: 96px; height: 96px; margin: 0 auto 18px; display: block; }
.pay-card h3 { color: #fff; font-size: 24px; line-height: 34px; margin-bottom: 14px; }
.pay-card p { margin: 0; font-size: 15px; }
@media (max-width: 900px) { .pay-cards { grid-template-columns: 1fr; } }

/* Hours + reviews */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours td { padding: 10px 6px; border-bottom: 1px solid var(--gem-sep); }
.hours td:last-child { text-align: right; font-family: 'Montserrat', Arial, sans-serif; font-weight: 500; color: var(--gem-heading); }
.hours tr.closed td:last-child { color: #b6c6c9; font-weight: 400; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { border: 2px solid var(--gem-sep); padding: 20px 10px; text-align: center; }
.review .score { font-family: 'Montserrat UltraLight', 'Montserrat', sans-serif; font-size: 44px; line-height: 52px; color: var(--gem-h1); }
.review .stars { color: #f5b301; letter-spacing: 2px; }
.review .src { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--gem-heading); }
.review .count { font-size: 13px; color: #99a9b5; }
@media (max-width: 600px) { .reviews { grid-template-columns: 1fr; } }

/* Subscribers */
.subscribe-box { background: var(--gem-box); color: #fff; text-align: center; padding: 50px 40px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; }
.subscribe-box p { margin: 0 0 18px; }
.subscribe-form label { display: block; text-align: center; font-size: 14px; color: #5f727f; margin: 0 0 4px; }
.subscribe-form input { width: 100%; height: 40px; background: #f1f1f1; border: 2px solid rgba(51,51,51,.1); padding: 0 12px; font: inherit; margin-bottom: 16px; }
.subscribe-form button { width: 100%; height: 40px; background: #e8e8e8; border: 2px solid rgba(51,51,51,.2); font: inherit; color: #5f727f; cursor: pointer; }
.form-note { font-size: 13px; color: #99a9b5; text-align: center; margin-top: 6px; }

/* Map area */
.map-area { background: #e6e4e0; padding: 60px 0 80px; margin-top: 90px; text-align: center; }
.map-area .separator { background: #fff; height: 3px; max-width: 70%; margin: 6px auto 40px; }
.map-card { max-width: 560px; margin: 0 auto; background: #fff; padding: 30px; border-top-right-radius: 30px; border-bottom-left-radius: 30px; }
.map-card address { font-style: normal; font-size: 18px; line-height: 28px; color: var(--gem-heading); margin-bottom: 18px; }

/* Page title band (inner pages) */
.page-title { background: var(--gem-title-band); color: #fff; text-align: center; padding: 70px 0 60px; }
.page-title h1 { color: #fff; margin: 0; }
.page-title p { margin: 8px 0 0; color: rgba(255,255,255,.85); }

/* Menu page (styled like the old Supsystic menu tables) */
.menu-tools { display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 40px 0 10px; }
.menu-search { height: 40px; min-width: 260px; border: 1px solid #dfe5e8; background: #f4f6f7; padding: 0 12px; font: inherit; color: var(--gem-menu); }
.menu-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; padding: 0; list-style: none; justify-content: center; }
.menu-jump a { display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; padding: 4px 10px; border: 2px solid var(--gem-btn); color: var(--gem-btn); }
.menu-jump a:hover { background: var(--gem-btn); color: #fff; }
.menu-cat { margin: 50px 0 10px; scroll-margin-top: 20px; }
.menu-cat h2 { text-align: center; margin-bottom: 4px; }
.menu-cat .cat-note { text-align: center; color: #808080; font-size: 14px; margin: 0 0 14px; }
.menu-table { width: 100%; border-collapse: collapse; font-family: 'Montserrat', Arial, sans-serif; font-weight: 300; text-align: center; color: #333; }
.menu-table th { font-weight: 700; font-size: 13px; text-transform: uppercase; color: #008a15; border-bottom: 2px solid #dfe5e8; padding: 10px 8px; }
.menu-table td { padding: 11px 8px; border-bottom: 1px solid #eef0f1; font-size: 15px; vertical-align: top; }
.menu-table td.dish-name { font-weight: 600; color: var(--gem-heading); text-align: left; width: 26%; }
.menu-table td.dish-desc { text-align: left; font-size: 14px; color: #5f727f; }
.menu-table td.price { white-space: nowrap; width: 12%; }
.menu-table .tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--gem-btn); padding: 0 6px; margin-left: 4px; border-radius: 2px; vertical-align: middle; }
.menu-table tr.hidden { display: none; }
.build-list { columns: 2; column-gap: 40px; margin: 0; padding: 0 0 0 18px; font-size: 15px; }
@media (max-width: 700px) {
  .menu-table thead { display: none; }
  .menu-table tr { display: block; border-bottom: 1px solid #eef0f1; padding: 8px 0; }
  .menu-table td { display: block; border: 0; padding: 2px 4px; text-align: left !important; width: auto !important; }
  .menu-table td.price::before { content: attr(data-label) ": "; color: #99a9b5; font-weight: 400; }
  .menu-table td.price:empty { display: none; }
  .build-list { columns: 1; }
}

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.gallery-grid figure { margin: 0; position: relative; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.gallery-grid figcaption { font-size: 13px; color: #808080; text-align: center; padding: 6px 0 0; }
.placeholder-tile { aspect-ratio: 4 / 3; border: 2px dashed #b6c6c9; display: flex; align-items: center; justify-content: center; text-align: center; color: #99a9b5; font-family: 'Montserrat', sans-serif; font-size: 13px; text-transform: uppercase; padding: 10px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; }
dialog.lightbox::backdrop { background: rgba(0,0,0,.85); }
dialog.lightbox img { max-height: 86vh; width: auto; margin: 0 auto; }
dialog.lightbox p { color: #fff; text-align: center; margin: 8px 0 0; }

/* Content pages */
.prose { max-width: 820px; margin: 0 auto; font-size: 17px; line-height: 28px; }
.prose p { margin: 0 0 18px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.info-grid .card { border: 2px solid var(--gem-sep); padding: 26px; }
.info-grid h3 { font-size: 18px; line-height: 26px; color: var(--gem-h1); }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--gem-footer); color: var(--gem-footer-text); padding: 40px 0; margin-top: 0; font-size: 15px; }
.site-footer .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.site-footer a { color: var(--gem-footer-text); }
.site-footer a:hover { color: #fff; }
.footer-socials { display: flex; justify-content: flex-end; gap: 12px; }
.footer-socials .fb { color: #4e64b5; } .footer-socials .tw { color: #00aced; }
.footer-legal { grid-column: 1 / -1; text-align: center; font-size: 12px; line-height: 18px; color: #7d8a96; border-top: 1px solid #3b3b58; padding-top: 16px; margin-top: 10px; }
@media (max-width: 991px) { .site-footer .container { grid-template-columns: 1fr; text-align: center; } .footer-socials { justify-content: center; } }

/* Allergens page (built from app/data/allergens.json by build/allergens.mjs) */
.al-draft { background: #fff3cd; color: #856404; border: 1px solid #e0a800; border-left: 5px solid #e0a800; padding: 14px 18px; margin: 40px 0 16px; font-size: 15px; line-height: 24px; }
/* 2026-09-20: the allergen data is confirmed by the shop, so the page carries a quiet "who provided it, when" line instead of the draft warning. */
.al-updated { background: #f7f7f7; color: #555; border-left: 5px solid #c8c8c8; padding: 14px 18px; margin: 40px 0 16px; font-size: 15px; line-height: 24px; }
.al-banner { background: #f2f8ee; color: #3f5a2c; border: 1px solid #cfe3bf; border-left: 5px solid var(--gem-btn); padding: 14px 18px; margin: 0 0 26px; font-size: 15px; line-height: 24px; }
.al-banner a { color: #2f6b18; text-decoration: underline; }
.menu-tools + .al-banner { margin-top: 6px; }
.al-h2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; text-transform: uppercase; letter-spacing: .05em; color: var(--gem-h1); margin: 36px 0 10px; }
.al-14 { columns: 2 16rem; column-gap: 40px; padding-left: 20px; margin: 0 0 12px; font-size: 15px; }
.al-14 li { break-inside: avoid; margin-bottom: 4px; }
.al-count { font-size: 14px; color: #808080; margin: 0 0 8px; }
.al-legend { font-size: 13px; line-height: 22px; color: #5f727f; background: #fafbfa; border: 1px solid var(--gem-sep); padding: 8px 12px; margin: 0 0 8px; }
.al-key { display: inline-block; margin-right: 14px; white-space: nowrap; }
.al-legend abbr, .allergen-table abbr { text-decoration: none; border-bottom: 1px dotted #b6c6c9; cursor: help; }
.al-section { margin: 34px 0 0; scroll-margin-top: 20px; }
.al-section h3 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 24px; text-transform: uppercase; letter-spacing: .06em; color: var(--gem-heading); border-bottom: 2px solid #dfe5e8; padding-bottom: 6px; margin: 0 0 8px; }
.al-section h4 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--gem-h1); margin: 16px 0 4px; }
.al-intro { font-size: 14px; color: #808080; margin: 0 0 10px; }
.al-warn { font-size: 14px; background: #fff3cd; color: #856404; border: 1px solid #ffe08a; padding: 8px 12px; margin: 0 0 10px; }
.al-extras { font-size: 15px; margin: 0; padding-left: 20px; }
.al-extras li { margin-bottom: 4px; }
.al-todo { display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #856404; background: #fff3cd; padding: 0 5px; border-radius: 3px; vertical-align: middle; }
.al-foot { font-size: 14px; margin: 40px 0 0; }
/* The table scrolls inside its own box, so the page never scrolls sideways. */
/* position:relative keeps the screen-reader .sr-only spans inside the table (they are absolutely
   positioned, and without a containing block here they widen the whole page on a phone). */
.al-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border: 1px solid var(--gem-sep); }
.al-scroll:focus-visible { outline: 2px solid var(--gem-btn); outline-offset: 2px; }
.allergen-table { border-collapse: collapse; width: 100%; font-family: 'Montserrat', Arial, sans-serif; font-weight: 300; font-size: 13px; background: #fff; }
.allergen-table thead th { font-weight: 700; font-size: 11px; text-transform: uppercase; color: #008a15; background: #fff; text-align: center; white-space: nowrap; border-bottom: 2px solid #dfe5e8; padding: 8px 5px; }
.allergen-table td { text-align: center; padding: 7px 5px; border-bottom: 1px solid #eef0f1; vertical-align: middle; }
.allergen-table th.al-dish { text-align: left; font-weight: 600; color: var(--gem-heading); min-width: 13rem; padding: 7px 10px 7px 0; border-bottom: 1px solid #eef0f1; background: #fff; position: sticky; left: 0; z-index: 1; }
.allergen-table thead th.al-dish { z-index: 2; }
.allergen-table .al-y { color: #b02a37; font-weight: 700; }
.allergen-table .al-m { color: #9a6700; font-weight: 700; }
.allergen-table .al-u { color: #b6c6c9; }
.al-plain { display: none; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 400; font-size: 13px; line-height: 19px; color: #808080; }
@media (max-width: 900px) {
  /* On a phone the plain line under the dish name is the quickest read; the table is still there to swipe. */
  .al-plain { display: block; margin-top: 2px; }
  .allergen-table th.al-dish { min-width: 12rem; max-width: 13rem; white-space: normal; box-shadow: 1px 0 0 #eef0f1; }
}
@media print { .al-scroll { overflow: visible; } .al-plain { display: none; } .allergen-table { font-size: 8pt; } }

/* Mailing-list sign-up (2026-10-03, worker/signup.js). The form ships `hidden` and the Worker shows it only when the
   list is set up; the honeypot box is off-screen for people but still there for bots that fill in every field. */
[hidden] { display: none !important; }
.subscribe-form .optional { color: #99a9b5; }
.subscribe-form .consent { font-size: 13px; line-height: 20px; color: #5f727f; text-align: center; margin: 0 0 14px; }
.subscribe-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.signup-off-note { text-align: center; color: #5f727f; margin: 40px 0; }
.form-note.error { color: #c0392b; font-size: 15px; }

/* Blog (2026-10-03): /blog/ and /blog/<slug>, built by build/build.mjs from blog/*.md. Taken from the approved mockup
   (mockups/blog/css/blog.css) without its "MOCKUP ONLY" block. Nothing new: the site's tokens, fonts and shapes -
   Montserrat uppercase headings, the green box with the 30px corners (as Pay Your Way), the About page's cards. */
.breadcrumbs { font-size: 14px; line-height: 22px; color: var(--gem-body); padding-top: 18px; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.breadcrumbs li { min-width: 0; }
.breadcrumbs li + li::before { content: "/"; padding: 0 8px; color: #b6c6c9; }
.breadcrumbs [aria-current="page"] { color: #808080; }
.post-meta { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 12px; line-height: 20px; text-transform: uppercase; letter-spacing: .06em; color: var(--gem-btn); margin: 0 0 8px; }
.post-meta .dot { color: #b6c6c9; padding: 0 6px; }

/* The list: one article per row, photo left, words right; stacks on a phone */
.blog-intro { max-width: 760px; margin: 0 auto; text-align: center; font-size: 17px; line-height: 28px; }
.post-list { list-style: none; margin: 50px auto 0; padding: 0; max-width: 1000px; display: grid; gap: 40px; }
.post-card { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 30px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--gem-sep); }
.post-card:last-child { border-bottom: 0; padding-bottom: 0; }
.post-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.post-card h2 { font-size: 24px; line-height: 32px; margin: 0 0 10px; text-wrap: balance; }
.post-card h2 a { color: var(--gem-heading); }
.post-card h2 a:hover { color: var(--gem-link); }
.post-card p { margin: 0 0 14px; }
.read-more { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 767px) {
  .post-list { margin-top: 30px; gap: 30px; }
  .post-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 30px; }
  .post-card h2 { font-size: 20px; line-height: 28px; }
}

/* An article */
.page-title.article-title h1 { font-size: 40px; line-height: 54px; text-wrap: balance; max-width: 980px; margin: 0 auto; }
@media (max-width: 1000px) { .page-title.article-title h1 { font-size: 4vw; line-height: 5.6vw; } }
@media (max-width: 600px) { .page-title.article-title { padding: 44px 0 36px; } .page-title.article-title h1 { font-size: 22px; line-height: 30px; } }
.article { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 28px; overflow-wrap: break-word; }
.article p { margin: 0 0 18px; }
.article .intro { font-size: 20px; line-height: 31px; color: var(--gem-heading); }
.article h2 { font-size: 20px; line-height: 30px; color: var(--gem-h1); letter-spacing: .05em; margin: 38px 0 10px; text-wrap: balance; }
.article h3 { font-size: 16px; line-height: 24px; color: var(--gem-heading); letter-spacing: .05em; margin: 26px 0 8px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin: 0 0 6px; }
.article blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 4px solid var(--gem-sep); color: var(--gem-heading); }
.article figure { margin: 30px 0; }
.article figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.article figcaption { font-size: 13px; line-height: 20px; color: #808080; text-align: center; padding-top: 8px; }
.article .table-wrap { overflow-x: auto; margin: 0 0 22px; }
.article table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 16px; line-height: 24px; }
.article th:first-child, .article td:first-child { width: 62%; }
.article th { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .05em; color: #008a15; text-align: left; border-bottom: 2px solid #dfe5e8; padding: 8px 12px 8px 0; }
.article td { text-align: left; border-bottom: 1px solid #eef0f1; padding: 8px 12px 8px 0; vertical-align: top; }
.article .note { font-size: 15px; line-height: 24px; background: #f2f8ee; color: #3f5a2c; border: 1px solid #cfe3bf; border-left: 5px solid var(--gem-btn); padding: 12px 16px; margin-top: 30px; }
.article .note a { color: #2f6b18; text-decoration: underline; }

/* The order call to action: the site's own green box (same as Pay Your Way / Subscribers) */
.cta-box { background: var(--gem-box); color: #fff; text-align: center; padding: 40px 26px 44px; margin: 44px 0 0; border-top-right-radius: 30px; border-bottom-left-radius: 30px; }
.cta-box h2, .article .cta-box h2 { color: #fff; margin: 0 0 8px; font-size: 24px; line-height: 34px; }
.cta-box p { margin: 0 0 20px; }
.cta-box .btn-outline-white { font-size: 15px; padding: 12px 22px; }
.cta-box .small { font-size: 15px; margin: 18px 0 0; color: rgba(255,255,255,.9); }
.cta-box .small a { color: #fff; text-decoration: underline; }

/* Related links: the About page's bordered cards */
.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin: 50px 0 0; }
.related .card { border: 2px solid var(--gem-sep); padding: 24px 26px; }
.related h3 { font-size: 16px; line-height: 24px; color: var(--gem-h1); margin: 0 0 10px; }
.related ul { margin: 0; padding: 0 0 0 18px; }
.related li { margin: 0 0 6px; }
.back-link { margin: 40px 0 0; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 767px) {
  .article { font-size: 16px; line-height: 26px; }
  .article .intro { font-size: 18px; line-height: 28px; }
  .article h2 { font-size: 18px; line-height: 26px; margin-top: 30px; }
  .article table { font-size: 15px; line-height: 22px; }
  .related { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cta-box { padding: 32px 18px 36px; }
}

/* Blog article kit (2026-10-03, batch 1): icons, key facts, cards, callouts, steps, FAQ, "In this article", photo
   pairs and "Keep reading". After the AdRestore article template, redrawn in this site's own tokens (the greens of
   the title band and buttons, Montserrat labels, the About page's thin borders). The icons are Lucide (ISC licence,
   build/data/LICENSE-lucide.txt), one inline <symbol> sprite per page: no icon font, no extra request. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.article .chip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #eef6e8; border: 1px solid #cfe3bf; color: #2f7d1a; }
.article .chip .i { width: 19px; height: 19px; vertical-align: 0; }
.article .chip-warning { background: #fdf0ef; border-color: #f2c9c6; color: #c0262d; }
.article .chip-note { background: #eef3f6; border-color: #d3dfe6; color: var(--gem-heading); }
.article .chip-tip { background: #fff6e0; border-color: #f0dca6; color: #a86a00; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 15px; }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta .i { opacity: .85; }

/* Section headings with an icon */
.article h2.h-icon, .article h3.h-icon { display: flex; align-items: center; gap: 12px; }
.article h3.h-icon .chip { width: 28px; height: 28px; border-radius: 7px; }
.article h3.h-icon .chip .i { width: 16px; height: 16px; }

/* A list with an icon per point */
.article .icon-list { list-style: none; padding: 0; }
.article .icon-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; }
.article .icon-list li > .i { color: #2f7d1a; margin-top: 4px; width: 20px; height: 20px; }
.article .icon-list li > span { min-width: 0; }

/* Key facts */
.article .facts { background: #f6faf3; border: 1px solid #dcebd0; border-radius: 12px; padding: 20px 22px 22px; margin: 28px 0; }
.article .facts-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .1em; color: #2f7d1a; }
.article .facts-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.article .fact { display: flex; gap: 12px; align-items: flex-start; margin: 0; min-width: 0; }
.article .fact-label { margin: 0 0 2px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; line-height: 20px; color: var(--gem-heading); }
.article .fact-value { margin: 0; font-size: 15px; line-height: 23px; }

/* Cards */
.article .cards { list-style: none; padding: 0; margin: 24px 0 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.article .card-i { border: 1px solid #e3e8ea; border-radius: 12px; padding: 16px 18px; margin: 0; background: #fff; }
.article .card-i .chip { margin-bottom: 10px; }
.article .card-t { margin: 0 0 4px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 22px; color: var(--gem-heading); }
.article .card-i p:last-child { margin: 0; font-size: 15px; line-height: 23px; }

/* Callouts: tip (amber), note (grey-blue), warning (red, for allergies) */
.article .callout { display: flex; gap: 14px; align-items: flex-start; border-radius: 12px; padding: 16px 18px; margin: 26px 0; background: #f6faf3; border: 1px solid #dcebd0; }
.article .callout-warning { background: #fdf6f5; border-color: #f2d3d0; border-left: 5px solid #d8363c; }
.article .callout-note { background: #f5f8fa; border-color: #dfe7ec; }
.article .callout-tip { background: #fffaf0; border-color: #f1e2bc; }
.article .callout-body { min-width: 0; font-size: 16px; line-height: 26px; color: #4c5d68; }
.article .callout-title { margin: 4px 0 6px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 22px; color: var(--gem-heading); }
.article .callout-body p, .article .callout-body ul { margin: 0 0 10px; }
.article .callout-body > :last-child { margin-bottom: 0; }

/* Numbered steps */
.article .steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0 26px; }
.article .steps li { counter-increment: step; position: relative; padding: 0 0 20px 54px; margin: 0; min-height: 38px; }
.article .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--gem-title-band); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; }
.article .steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; background: #dcebd0; }
.article .steps li:last-child { padding-bottom: 0; }
.article .step-t { margin: 0 0 2px; padding-top: 6px; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 22px; color: var(--gem-heading); }
.article .steps li p:last-child { margin: 0; }

/* "In this article" */
.article .toc { border-top: 1px solid var(--gem-sep); border-bottom: 1px solid var(--gem-sep); margin: 0 0 26px; }
.article .toc summary { display: flex; align-items: center; gap: 10px; padding: 14px 2px; cursor: pointer; list-style: none; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 14px; color: var(--gem-heading); }
.article .toc summary::-webkit-details-marker { display: none; }
.article .toc summary > .i:first-child { color: #2f7d1a; }
.article .toc-n { font-weight: 400; color: #8a9aa3; font-size: 13px; margin-left: auto; }
.article .toc-chev, .article .faq-chev { transition: transform .2s; }
.article details[open] > summary .toc-chev, .article details[open] > summary .faq-chev { transform: rotate(180deg); }
.article .toc ol { margin: 0 0 16px; padding-left: 40px; font-size: 16px; line-height: 26px; }

/* FAQ */
.article .faq-list { border-top: 1px solid var(--gem-sep); }
.article .faq-item { border-bottom: 1px solid var(--gem-sep); }
.article .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 2px; cursor: pointer; list-style: none; font-weight: 700; color: var(--gem-heading); }
.article .faq-item summary::-webkit-details-marker { display: none; }
.article .faq-item summary .i { color: #2f7d1a; }
.article .faq-a { padding: 0 2px 6px; }

/* Two photos side by side */
.article .photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0; }
.article .photo-pair figure { margin: 0; }

/* Lead photo, allergy note, order box, "On the menu" and "Keep reading" */
.article figure.lead { margin-top: 26px; }
.article .note { display: flex; gap: 10px; align-items: flex-start; }
.article .note > .i { color: #c0262d; margin-top: 4px; width: 18px; height: 18px; }
.cta-points { list-style: none; padding: 0 !important; margin: 0 0 22px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; }
.cta-points li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.related { grid-template-columns: minmax(0, 1fr); }
.related h3 { display: flex; align-items: center; gap: 8px; }
.related ul { columns: 2; column-gap: 30px; }
.more { margin: 44px 0 0; }
.article h2.more-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.more-list { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.more-list li { margin: 0; }
.more-card { display: block; color: var(--gem-heading); }
.more-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 8px; }
.more-cat { display: block; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; font-size: 11px; line-height: 18px; text-transform: uppercase; letter-spacing: .06em; color: var(--gem-btn); }
.more-title { display: block; font-weight: 700; font-size: 16px; line-height: 23px; }
.more-card:hover .more-title { color: var(--gem-link); }
.article table.wide th:first-child, .article table.wide td:first-child { width: auto; }
@media (max-width: 767px) {
  .article .facts-list, .article .cards { grid-template-columns: minmax(0, 1fr); }
  .article .card-i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 14px 16px; }
  .article .card-i .chip { grid-row: span 2; margin: 0; }
  .article .card-t { padding-top: 4px; }
  .article .facts { padding: 18px 16px; }
  .article .callout { padding: 14px; gap: 12px; }
  .article .chip { width: 30px; height: 30px; }
  .article .chip .i { width: 17px; height: 17px; }
  .article h2.h-icon { gap: 10px; }
  .article .photo-pair { grid-template-columns: minmax(0, 1fr); }
  .related ul { columns: 1; }
  .more-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .more-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 14px; align-items: start; }
  .more-card img { grid-row: span 2; margin: 0; }
  .article-meta { font-size: 13px; gap: 2px 14px; }
}
/* 2026-10-03: the menu is built from ivanos.uk's own menu - small headings for runs inside a category, the add-ons
   for each category in a fold, and the old section anchors kept as empty targets. */
.menu-cat .menu-sub { text-align: center; margin: 34px 0 4px; font-size: 20px; }
.menu-addons { margin: 18px auto 0; max-width: 760px; }
.menu-addons > summary { cursor: pointer; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--gem-btn); padding: 6px 0; }
.anchor-alias { display: block; height: 0; }
.allergen-table td.al-tbc { text-align: left; font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 13px; font-weight: 600; color: #856404; background: #fff8e1; padding: 7px 10px; border-bottom: 1px solid #eef0f1; }