/* Matches the Good Food Bros Ghost theme (Source, serif): cream background, EB Garamond,
   pink accent. --accent is the brand pink for fills and graphics; --link is a deeper shade
   of it that stays readable as small text on cream (5.6:1). */
:root {
  --bg: #faf6e9;
  --surface: #fffdf7;
  --text: #15171a;
  --muted: #6b6358;
  --border: #e6dfcc;
  --accent: #fd0266;
  --link: #c4004c;
  --tint: #fde8ef;
  --good-bg: #e6f2e7; --good: #1f6b43;
  --caution-bg: #fbf0d6; --caution: #7d5200;
  --bad-bg: #fbe4e1; --bad: #a3322a;
  --radius: 10px;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: Poppins, sans-serif;   /* the theme's header/footer font; like the theme, Poppins isn't loaded */
  --gap: clamp(20px, 1.82vw + 12.7px, 36px);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 19px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--gap); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); line-height: 1.15; margin: 0.25em 0 0.4em; }
h2 { font-size: 1.35rem; margin: 1.8em 0 0.5em; }
.muted { color: var(--muted); font-size: 0.9em; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 40em; }

/* Header, as in the Ghost theme's "logo in the middle" layout (sans-serif, like the theme). */
.gh-head { height: 100px; font-family: var(--sans); }
.gh-head-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 28px;
  height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gap); }
.gh-head-menu ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.gh-head-menu a, .gh-head-action { font-size: 18.4px; font-weight: 500; color: var(--text); text-decoration: none; }
.gh-head-menu a:hover, .gh-head-menu a[aria-current] { color: var(--link); }
.gh-head-logo { font-size: 29.9px; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  text-decoration: none; white-space: nowrap; }
.gh-head-actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.gh-search { display: flex; width: 30px; height: 30px; padding: 2px; border: 0; background: none;
  color: var(--text); cursor: pointer; }
.gh-search svg { width: 100%; height: 100%; }
.gh-search:hover { color: var(--link); }
.gh-menu-extra { display: none; }
.gh-head-action { color: var(--link); }
.gh-burger { display: none; width: 30px; height: 30px; padding: 0; border: 0; background: none;
  color: var(--text); cursor: pointer; }
.gh-burger svg { width: 26px; height: 26px; }
/* Below 768px the theme shows the logo on the left and a menu button; the menu opens as a panel. */
@media (max-width: 767px) {
  .gh-head { height: 64px; }
  /* Logo, then search and the menu button on the right, as in the theme. */
  .gh-head-inner { grid-template-columns: 1fr auto auto; column-gap: 16px; }
  .gh-head-logo { grid-column: 1; grid-row: 1; font-size: 26px; }
  .gh-head-actions { grid-column: 2; grid-row: 1; }
  .gh-head-action { display: none; }
  .gh-burger { display: block; grid-column: 3; grid-row: 1; }
  .gh-head-menu { display: none; }
  .gh-menu-extra { display: list-item; }
  .gh-head.is-open { height: auto; padding-bottom: 20px; }
  .gh-head.is-open .gh-head-menu { display: flex; grid-column: 1 / -1;
    justify-content: center; padding-top: 16px; }
  .gh-head.is-open .gh-head-menu ul { flex-direction: column; align-items: center; gap: 12px; }
  .gh-head.is-open .gh-head-menu a { font-size: 26px; font-weight: 600; }
}

/* Footer, as in the Ghost theme: centered, generous spacing. */
.gh-foot { margin-top: 4em; padding: 72px 0 96px; border-top: 1px solid var(--border);
  text-align: center; color: var(--muted); font-family: var(--sans); font-size: 15px; }
.gh-foot .wrap { display: grid; gap: 14px; justify-items: center; }
.gh-foot p { margin: 0; max-width: 46em; }
.gh-social-links { display: flex; gap: 16px; }
.gh-social-links a { display: inline-flex; color: var(--text); }
.gh-social-links svg { width: 18px; height: 18px; }

.crumbs { margin: 1.5em 0 0; font-size: 0.9rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

.verdict { border-radius: var(--radius); padding: 1em 1.2em; margin: 1em 0; }
.verdict p { margin: 0.3em 0 0; }
.verdict-label { font-weight: 700; font-size: 1.4rem; }
.good { background: var(--good-bg); color: var(--good); }
.caution { background: var(--caution-bg); color: var(--caution); }
.bad { background: var(--bad-bg); color: var(--bad); }
.verdict p { color: var(--text); }

.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1em; }
.facts li { border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 2px 12px; font-size: 0.9rem; }
.badge { font-size: 0.8rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }

.claims ul, .conflict ul { padding-left: 1.2em; }
.claims li { margin: 0.35em 0; }
.ref { font-size: 0.75em; vertical-align: super; text-decoration: none; }
.conflict { border: 2px solid var(--caution); background: var(--caution-bg); border-radius: var(--radius);
  padding: 0.2em 1.2em 0.6em; margin: 1.5em 0; }
.conflict h2 { color: var(--caution); margin-top: 0.8em; }
.sources ol { padding-left: 1.4em; font-size: 0.92rem; }
.sources li { margin: 0.3em 0; }
.subhead { font-size: 1.4rem; border-top: 1px solid var(--border); padding-top: 1em; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.sidebar h2 { font-size: 1.05rem; }
.nearby { list-style: none; padding: 0; }
.nearby li { padding: 6px 0; border-bottom: 1px solid var(--border); display: flex;
  flex-direction: column; }
.mini-map { height: 220px; border-radius: var(--radius); margin-top: 1em; border: 1px solid var(--border); }
.contact { display: flex; flex-direction: column; gap: 4px; margin: 1em 0; padding: 14px 16px;
  font-style: normal; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.contact a { overflow-wrap: anywhere; }
/* One column on phones. The sidebar would land below the whole article, so let its parts
   join the page's grid and lift the address/phone/website box up to just under the title. */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .layout .sidebar { display: contents; }
  .layout .contact { order: -1; margin-top: 0.5em; }
}

.place-list { list-style: none; padding: 0; }
.hood-list { list-style: none; padding: 0; columns: 2 16em; column-gap: 32px; }
.hood-list li { break-inside: avoid; padding: 4px 0; }
.place-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }

.map-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 1em 0 0.6em; }
.map-controls select { font: inherit; padding: 4px 8px; margin-left: 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.city-map { height: 480px; border-radius: var(--radius); border: 1px solid var(--border); }
.legend { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 10px; }
.dot:first-child { margin-left: 0; }
.dot.info { background: var(--accent); }
.dot.none { background: #b8bdc6; }

.hero { padding: 2em 0 0.5em; }
.hero h1 { font-size: 2.4rem; }

.reviews-link { display: flex; flex-direction: column; gap: 2px; margin: 2em 0 0.5em; padding: 0.9em 1.2em;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: var(--text); }
.reviews-link:hover { border-color: var(--accent); }
.reviews-link strong { color: var(--link); }
.reviews-link span { color: var(--muted); font-size: 0.9rem; }

.site-header nav { display: flex; gap: 18px; }
.small { font-size: 0.85rem; }
.diner-reports .reports { list-style: none; padding: 0; }
.diner-reports .reports li { border-bottom: 1px solid var(--border); padding: 10px 0; }
.diner-reports .reports li p { margin: 0.3em 0 0; }
.diner-reports .badge { margin-left: 0; margin-right: 6px; }
.report-facts { margin-top: 2px; }
.report-toggle { margin-top: 1em; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 0.6em 1.2em; }
.report-toggle summary { cursor: pointer; font-weight: 700; color: var(--link); }
.report-form fieldset { border: 0; padding: 0; margin: 1em 0; }
.report-form legend { font-weight: 600; margin-bottom: 4px; }
.report-form .choice { display: inline-flex; align-items: center; gap: 6px; margin: 2px 16px 2px 0; }
.report-form .notes { display: block; font-weight: 600; }
.report-form textarea, .place-pick input { display: block; width: 100%; margin-top: 6px; font: inherit;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); }
.report-form button[type=submit] { font: inherit; font-size: 19px; font-weight: 700; padding: 8px 20px; border: 0;
  border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.report-form button[disabled] { opacity: 0.6; cursor: default; }
.form-status { min-height: 1.2em; color: var(--bad); }
.form-thanks { font-weight: 600; color: var(--good); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.report-page { max-width: 640px; }
.place-pick { display: block; font-weight: 600; }
.place-results { list-style: none; padding: 0; margin: 4px 0; }
.place-results button { display: block; width: 100%; text-align: left; font: inherit; padding: 8px 10px;
  border: 0; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.place-results button:hover { background: var(--tint); }
.place-chosen { padding: 10px 12px; border-radius: 8px; background: var(--tint); }
button.link { border: 0; background: none; color: var(--link); text-decoration: underline; font: inherit; cursor: pointer; }

[hidden] { display: none !important; }

.legal { max-width: 42em; padding-top: 1.5em; }
.legal h2 { font-size: 1.1rem; }

.report-form input[type=email], .suggest-form input[type=text] { display: block; width: 100%; margin-top: 6px; font: inherit; padding: 8px 10px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.report-form .newsletter { display: flex; margin: 0.4em 0 1em; }
.confirm-button { font: inherit; font-size: 19px; font-weight: 700; padding: 10px 22px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer; }
.confirm-button[disabled] { opacity: 0.6; cursor: default; }

.quick-answer { font-size: 1.15rem; line-height: 1.5; margin: 0.6em 0 0.2em; max-width: 40em; }
.checked { margin: 0 0 0.5em; }

.map-placeholder { display: flex; align-items: center; justify-content: center; background: var(--surface); }
.show-map { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--bg); color: var(--link); }
.show-map[disabled] { opacity: 0.7; cursor: default; }
.mapboxgl-popup-content { font: inherit; font-size: 0.95rem; color: var(--text); }
.mapboxgl-popup-content a { color: var(--link); }

/* Report review page (linked from the review email). */
.review-report { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 1.2em 0;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.review-report dt { font-weight: 600; }
.review-report dd { margin: 0; overflow-wrap: anywhere; }
.review-actions { display: flex; gap: 12px; }
.reject-button { font: inherit; font-weight: 700; padding: 10px 22px; border-radius: 8px; cursor: pointer;
  background: none; color: var(--bad); border: 1.5px solid var(--bad); }
@media (max-width: 480px) { .review-report { grid-template-columns: 1fr; } .review-report dd { margin-bottom: 6px; } }

/* Search: a panel opened from the header's search button or the directory home page. */
.search-launch { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin-top: 1.2em;
  padding: 14px 18px; font: inherit; color: var(--muted); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.search-launch:hover { border-color: var(--muted); }
.search-launch svg { width: 22px; height: 22px; flex: none; }

.link-button { font: inherit; color: var(--link); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer; }
.suggest-form { max-width: 560px; }
.suggest-form .notes { margin-top: 1.1em; }
.code-step { max-width: 420px; }
.code-step .code-input { display: block; width: 9em; margin-top: 6px; padding: 8px 12px; font: inherit; font-size: 1.4rem;
  letter-spacing: 0.25em; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
/* The newsletter box (newsletter.css) sits just above the footer: give it the footer's spacing. */
.gfn { margin-top: 4em; }
.gfn + .gh-foot { margin-top: 0; }
.town-group { font-size: 1.05rem; margin: 1.2em 0 0.2em; color: var(--muted); }
.auto-tag { font: 12px/1.4 var(--sans); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 7px; margin-left: 4px; white-space: nowrap; }
.correction { margin: 2em 0 0; }
.correction summary { cursor: pointer; color: var(--muted); }
.correction form { margin-top: 1em; }
.dedicated-badge { display: inline-block; margin: -0.4em 0 0.6em; padding: 2px 12px; border-radius: 999px;
  font: 700 14px/1.6 var(--sans); background: var(--good-bg); color: var(--good); }
.dedicated { background: var(--good-bg); border-radius: var(--radius); padding: 4px 18px 8px; margin: 1.4em 0; }
.dedicated h2 { color: var(--good); }
.hood-menu { font: inherit; font-size: 0.9rem; margin-left: 6px; padding: 2px 6px; max-width: 14em;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--link); cursor: pointer; }
.hood-jump { margin: 0.8em 0 0; }
.hood-jump .hood-menu { font-size: 1rem; padding: 4px 8px; max-width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0 0.2em; }
.chip { font: 600 14px/1 var(--sans); padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.chip span { font-weight: 400; color: var(--muted); margin-left: 2px; }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.is-on span { color: #fff; }
.chip-gold { border-color: var(--good); }
.guide-links { list-style: none; padding: 0; columns: 2 16em; }
.guide-links li { break-inside: avoid; padding: 4px 0; }
.guide-list li { padding: 6px 0; }
.guide-list .muted { display: block; font-size: 0.9rem; }
.near-button, .near-link { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1 var(--sans);
  padding: 12px 18px; border-radius: var(--radius); text-decoration: none; cursor: pointer; }
.near-button { border: 0; background: var(--accent); color: #fff; margin: 0.4em 0; }
.near-button[disabled] { opacity: 0.6; }
.near-link { margin-top: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--link); }
.near-button svg, .near-link svg { width: 20px; height: 20px; }
.near-list { padding-left: 1.4em; }
.near-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.near-list .badge { font-size: 0.72rem; }
.near-where { display: block; font-size: 0.9rem; }
.badge.town { background: var(--tint); color: var(--link); }
.near-where-form { margin: 1em 0 0.4em; max-width: 520px; }
.near-where-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.near-where-row { display: flex; gap: 8px; }
.near-where-row input { flex: 1; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.near-where-row button { font: 600 16px/1 var(--sans); padding: 8px 16px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.near-help { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; max-width: 520px; }
.near-help ol { margin: 0.4em 0 0; padding-left: 1.3em; }
.near-map-toggle { margin: 0.8em 0 0; }
.near-map { height: 420px; margin: 0.8em 0; }
.near-where-form { position: relative; }
.near-suggest { position: absolute; z-index: 5; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(21, 23, 26, 0.12); }
.near-suggest button { display: block; width: 100%; text-align: left; font: inherit; padding: 8px 12px;
  background: none; border: 0; color: var(--text); cursor: pointer; }
.near-suggest button:hover, .near-suggest button:focus { background: var(--tint); outline: 0; }
.stats { list-style: none; padding: 0; margin: 1.4em 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-size: 0.95rem; color: var(--muted); }
.stats strong { color: var(--text); font-size: 1.1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0.8em 0; }
.card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color 0.15s, transform 0.15s; }
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-name { font: 700 1.1rem/1.3 var(--sans); color: var(--link); }
.card-where { font-size: 0.9rem; color: var(--muted); }
.card-stat { font-size: 0.95rem; }
.card-gold { align-self: flex-start; margin-top: 4px; padding: 1px 10px; border-radius: 999px;
  font: 700 12px/1.6 var(--sans); background: var(--good-bg); color: var(--good); }
.tile-map { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 640px; margin: 0.8em 0 0.4em; }
.tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px;
  font: 600 clamp(10px, 1.6vw, 14px)/1 var(--sans); text-decoration: none;
  background: var(--tint); color: var(--muted); border: 1px solid var(--border); }
.tile:hover { border-color: var(--accent); color: var(--text); }
.tile.is-live { background: var(--accent); border-color: var(--accent); color: #fff; }
.tile.is-live:hover { filter: brightness(1.08); color: #fff; }
.chain-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.chain-grid li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.legend .key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-left: 10px;
  background: var(--tint); border: 1px solid var(--border); }
.legend .key:first-child { margin-left: 0; }
.legend .key.is-live { background: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 10px 12px; }
  .card-name { font-size: 1rem; }
  .card-where, .card-stat { font-size: 0.82rem; }
}
.spot-places { display: block; font-size: 0.88rem; margin-top: 2px; }