/* The blog inside foodbooth.com's look. The site's own fonts.css and fb.css (brand tokens --fb-*,
   roles --ground, --ink, --text, --stroke...) load first; this keeps the light look even when the
   visitor's system is dark (the site's switch is not on the blog), sets the blog's --pb-* to the
   site's roles, opens the phone menu without script and gives article text the site's prose look.
   Rules start with .pb-theme-foodbooth so they win over blog.css, which loads after this file. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: var(--fb-paper); --ground-2: var(--fb-mist); --surface: var(--fb-surface);
    --ink: var(--fb-ink); --text: var(--fb-body); --text-2: var(--fb-ink-60); --stroke: var(--fb-hairline); --stroke-2: var(--fb-ink-40);
    --series-1: var(--fb-ink-20); --series-2: var(--fb-ink); --selected: var(--fb-brand-12);
    --ok: var(--fb-status-ok); --warn: var(--fb-status-warn); --bad: var(--fb-status-bad); --info: var(--fb-status-info);
    --glass: rgb(255 246 240 / .92); --on-brand: #fff;
    --shadow: 0 1px 2px rgb(23 18 15 / .04), 0 12px 32px rgb(23 18 15 / .08);
    color-scheme: light;
  }
  :root:not([data-theme="light"]) .logo-light { display: block; }
}

.pb-theme-foodbooth {
  --pb-accent: var(--ink);
  --pb-ink: var(--ink);
  --pb-text: var(--text);
  --pb-muted: var(--text-2);
  --pb-line: var(--stroke);
  --pb-soft: var(--ground-2);
  --pb-radius: var(--radius);
  --pb-font: var(--fb-font-body);
}

/* The page on the header's measure (.wrap). */
.pb-theme-foodbooth .pb { max-width: var(--max); padding: 28px var(--gutter) 72px; }
.pb-theme-foodbooth .pb-toc { top: 80px; }
.pb-theme-foodbooth .pb-body h2, .pb-theme-foodbooth .pb-body h3 { scroll-margin-top: 80px; }

/* Phone menu without script: the checkbox before the header holds the state. */
.pb-theme-foodbooth .pb-menu-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pb-theme-foodbooth .pb-menu-toggle:focus-visible ~ .hd .burger { outline: 2px solid var(--fb-brand); outline-offset: 3px; }
@media (max-width: 1023px) {
  .pb-theme-foodbooth .drawer { visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; }
  .pb-theme-foodbooth .pb-menu-toggle:checked ~ .drawer { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .pb-theme-foodbooth .pb-menu-toggle:checked ~ .hd .burger { background: var(--ground-2); }
}
.pb-theme-foodbooth .drawer a[aria-current="page"] { color: var(--ink); border-inline-start: 3px solid var(--fb-brand); padding-inline-start: 12px; }

/* Labels: the site's .lab (Josefin Sans tracked caps; IBM Plex Sans Arabic in Arabic). */
.pb-theme-foodbooth .pb-label { font: 300 11px/1.4 var(--fb-font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
html[lang="ar"] .pb-theme-foodbooth .pb-label { font: 500 12px/1.4 var(--fb-font-arabic); letter-spacing: 0; text-transform: none; }
.pb-theme-foodbooth .pb-lead { color: var(--text-2); }

/* Buttons and fields: the site's primary .btn.pr (the one orange action) and its 4px corners. */
.pb-theme-foodbooth .pb-search button,
.pb-theme-foodbooth .pb-button {
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px;
  border: 1px solid var(--fb-brand); border-radius: var(--radius); background: var(--fb-brand); color: var(--fb-ink) !important;
  font-weight: 700; font-size: 15px; line-height: 1;
}
html[lang="en"] .pb-theme-foodbooth .pb-search button,
html[lang="en"] .pb-theme-foodbooth .pb-button { font-family: var(--fb-font-heading); font-weight: 600; font-size: 14px; }
.pb-theme-foodbooth .pb-search button:hover,
.pb-theme-foodbooth .pb-button:hover { background: var(--fb-brand-light); border-color: var(--fb-brand-light); }
.pb-theme-foodbooth .pb-search input { height: 46px; border-radius: var(--radius); border-color: var(--stroke-2); background: var(--surface); }
.pb-theme-foodbooth .pb-chip { border-radius: var(--radius); background: var(--surface); }
.pb-theme-foodbooth .pb-chip.is-on { background: var(--selected); border-color: transparent; color: var(--ink) !important; }
.pb-theme-foodbooth .pb-card { background: var(--surface); }
.pb-theme-foodbooth .pb-card:hover { box-shadow: var(--shadow); }
.pb-theme-foodbooth .pb-featured { background: var(--surface); }

/* Article text: the site's .prose (lists, links underlined in orange). */
.pb-theme-foodbooth .pb-body ul,
.pb-theme-foodbooth .pb-body ol { padding-inline-start: 22px; }
.pb-theme-foodbooth .pb-body li + li { margin-top: 6px; }
.pb-theme-foodbooth .pb-body a:not(.pb-button),
.pb-theme-foodbooth .pb-crumbs a:hover,
.pb-theme-foodbooth .pb-share a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--fb-brand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pb-theme-foodbooth .pb-body blockquote { border-inline-start-color: var(--fb-brand); background: var(--ground-2); color: var(--ink); }
.pb-theme-foodbooth .pb-body th { background: var(--ground-2); }
.pb-theme-foodbooth .pb-faq details { border-radius: var(--radius); background: var(--surface); }
.pb-theme-foodbooth .pb-switch a,
.pb-theme-foodbooth .pb-pages a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--fb-brand); text-underline-offset: 4px; }