@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Pacifico&display=swap');

/* ---------- Color scheme ----------
   Matches the "Best Food Anywhere" road-trip banner: near-black/charcoal
   grounds, a bold poster red, and a warm travel-badge gold, on a warm
   cream content background for readability. */
:root {
    --color-black: #111111;
    --color-black-soft: #1b1715;
    --color-red: #c72c2c;
    --color-red-dark: #971f1f;
    --color-gold: #d8a52b;
    --color-gold-light: #e9c468;
    --color-cream: #f7f0e5;
    --color-cream-alt: #f2e6d2;
    --color-ink: #24211d;
    --color-muted: #6d6258;
    --color-border: #ecdfc9;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { background: #080808; scroll-behavior: smooth; } /* backdrop visible outside the centered shell on wide screens */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-ink);
    background: #080808;
    line-height: 1.5;
}
a { color: var(--color-red); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }

/* The whole page (header, hero, content, footer) lives in one centered
   column (capped at 1280px - between the original 1024px and the new
   design's native 1460px canvas) instead of stretching edge-to-edge of
   the browser. Flex column + main-content flex:1 (below) is a
   sticky-footer pattern, so the footer sits at the bottom of the viewport
   even when a page is short on content, instead of floating right after
   whatever little content there is. */
.page-shell {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--color-cream);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrap { max-width: 100%; margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--color-muted); }
.small { font-size: 0.85em; }

/* ---------- Header ---------- */
.site-header {
    min-height: 64px;
    padding: 0.4rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    background: #11100f;
    color: #fff;
    border-bottom: 3px solid var(--color-gold);
    flex-wrap: wrap;
}
.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
    color: #fff;
    font: 700 1.65rem/1 'Oswald', sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.brand-mark { height: 36px; width: auto; object-fit: contain; }
.main-nav { height: 100%; display: flex; align-items: stretch; gap: 0.5rem; }
.nav-item {
    position: relative;
    min-width: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    font: 600 0.9rem/1 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #f4eadb;
}
.nav-item:hover { color: #fff; text-decoration: none; }
.nav-item.active::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: -7px;
    height: 3px;
    background: var(--color-red);
}
/* Inline SVGs instead of raster crops - one currentColor line-art icon per
   nav item, so all four are guaranteed the same color with no image-asset
   dependency (background/color mismatches, baked-in text, etc.) possible. */
.nav-icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--color-gold); opacity: 0.95; }
.nav-item:hover .nav-icon { opacity: 1; }
.social-nav {
    display: flex;
    gap: 0.45rem;
    padding-left: 1rem;
    border-left: 1px solid #4d463f;
}
.social-nav a { width: 36px; height: 36px; display: grid; place-items: center; }

/* CSS-drawn social badges - cropping the graphics-sheet.png icons down to
   36px lost too much of their fine detail (crest lines, envelope flap,
   etc. turned to mush), so these are drawn directly instead, in the
   site's cream tone. Stays crisp at any size since nothing is raster. */
.social-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--color-cream-alt);
    color: var(--color-cream-alt);
    background: rgba(242, 230, 210, 0.06);
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.social-icon-fb { font: 700 1.05rem/1 Georgia, 'Times New Roman', serif; font-style: italic; }
.social-icon-email { font: 400 1.05rem/1 Arial, sans-serif; }
.social-nav a:hover .social-icon,
.social-links a:hover .social-icon {
    background: var(--color-cream-alt);
    color: var(--color-black);
    transform: scale(1.08);
}

/* <main> carries both "wrap" and "main-content" - it's the flex item AND
   the thing centering itself, unlike header/footer where .wrap is a nested
   non-flex-item div. Auto margins on a flex item's cross axis cancel out
   the default stretch behavior, so it was shrinking to fit its content
   instead of filling the width (the "map is 1/3 width" bug). Reset the
   margin so it stretches like every other flex item here. */
.main-content { padding: 2rem 1.25rem 4rem; flex: 1 0 auto; margin: 0; }

/* ---------- Hero zone (homepage): banner image + search bar rendered as
   one continuous full-bleed dark block, so they read as a single hero
   rather than a floating image with a disconnected card below it. ---------- */
.hero-zone { background: var(--color-black); }
.hero-banner { line-height: 0; }
.hero-banner img {
    /* hero-banner.jpg is pre-cropped (2048x768) to just the real artwork -
       the original export had blank canvas past the right and bottom edges
       of the real content that needed trimming (checked via a per-pixel
       scan, not just a coarse sample, to catch faint JPEG-compression
       bleed near white). No CSS cropping/positioning trick needed here:
       plain full-width, auto-height image, the most universally-supported
       way to render it. */
    display: block;
    width: 100%;
    height: auto;
}
.hero-extra {
    background: #201a17;
    padding: 1.2rem 1.25rem 1.1rem;
    text-align: center;
}
.hero-extra .hero-alt { color: var(--color-cream-alt); margin: 0; font-size: 0.95rem; }
.hero-extra .hero-alt a { color: var(--color-gold); }
.hero-search {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 700px;
    margin: 0 auto 0.6rem;
}
.hero-search input {
    flex: 1;
    min-width: 200px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
}
.hero-search select {
    width: 110px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
}
.hero-search button {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    font: 700 13px 'Oswald', sans-serif;
}
.hero-search button:hover { filter: brightness(1.12); }

/* ---------- Footer ---------- */
.site-footer {
    min-height: 90px;
    background: #0d0d0d;
    color: #e9dfd2;
    padding: 1.25rem 1.75rem;
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    font-size: 0.9rem;
}
.site-footer a { color: var(--color-gold-light); }
.footer-brand strong { display: block; font: 700 1.05rem/1.2 'Oswald', sans-serif; color: #fff; }
.footer-brand span { color: #9e9389; font-size: 0.85rem; }
.social-links { display: flex; gap: 0.45rem; }
.social-links a { width: 36px; height: 36px; display: grid; place-items: center; }

/* ---------- Flash messages ---------- */
.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1.25rem; font-weight: 500; }
.flash-success { background: #e4f3e1; color: #256029; }
.flash-error { background: #fbe4e0; color: var(--color-red-dark); }

input, select, textarea, button {
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid #d9cdb8;
    border-radius: 6px;
    background: #fff;
}
button {
    background: var(--color-red);
    color: #fff;
    border-color: var(--color-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
    cursor: pointer;
}
button:hover { background: var(--color-red-dark); border-color: var(--color-red-dark); }

/* ---------- Sections & cards ---------- */
.section { margin-bottom: 2.5rem; }
.section.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.card {
    display: block;
    background: #fff;
    border: 1px solid #ecdfc9;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}
a.card:hover {
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.card h3 { font-size: 1.05rem; }
.eyebrow { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--color-red); font-weight: 700; margin: 0 0 0.25rem; }

/* ---------- Shared dark showcase panel (Best Of, Map) ---------- */
.dark-panel, .best-of-dark {
    background: radial-gradient(ellipse at 30% 0%, #241c16 0%, #14100c 60%, #100c09 100%);
    border-radius: 12px;
    border: 1px solid rgba(212, 160, 23, 0.25);
    padding: 1.75rem;
    color: var(--color-cream-alt);
    margin: 0 0 2.5rem;
}
.best-of-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.best-of-topbar h1 { color: #fff; margin: 0; }
.best-of-subtitle { color: var(--color-cream-alt); margin: 0.25rem 0 0; }
.best-of-stamp { width: 92px; height: 92px; opacity: 0.9; transform: rotate(8deg); flex-shrink: 0; }
.best-of-section-title { color: #fff; margin: 2rem 0 1rem; }
.best-of-empty { color: var(--color-cream-alt); }

.best-of-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.75rem; align-items: start; }
.best-of-sidebar { display: flex; flex-direction: column; gap: 0.25rem; }
.cat-btn {
    text-align: left;
    background: none;
    border: none;
    color: var(--color-cream-alt);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
}
.cat-btn:hover { background: rgba(255, 255, 255, 0.06); }
.cat-btn.active { background: var(--color-red); color: #fff; }

.best-of-type-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.type-btn {
    background: none;
    border: 1px solid rgba(212, 160, 23, 0.4);
    color: var(--color-cream-alt);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
}
.type-btn:hover { background: rgba(255, 255, 255, 0.06); }
.type-btn.active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }

.bo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
/* 8 recent reviews as 2 rows of 4 - placed before the .bo-grid responsive
   breakpoints below so those still win (and drop this to 2/1 columns) on
   narrower screens, same as every other .bo-grid. */
.recent-reviews-row { grid-template-columns: repeat(4, 1fr); }
.bo-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-black-soft);
    border: 1px solid rgba(212, 160, 23, 0.25);
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bo-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.bo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, #2a201a, #161210);
    color: var(--color-gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.05rem;
}
.bo-score {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--color-red);
    color: #fff;
    font-weight: 800;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.bo-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.8rem 0.9rem 0.7rem;
    background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.05));
}
.bo-type { display: block; margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gold-light); }
.bo-overlay h3 { margin: 0 0 0.15rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.bo-review-count { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--color-cream-alt); opacity: 0.8; }
.bo-overlay p {
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    color: var(--color-cream-alt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .bo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .best-of-layout { grid-template-columns: 1fr; }
    .best-of-sidebar { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 520px) {
    .bo-grid { grid-template-columns: 1fr; }
}

/* ---------- Stars ---------- */
.stars { color: var(--color-gold); font-size: 1.05rem; letter-spacing: 1px; }
.stars-empty { color: #a89f92; font-size: 0.85rem; font-style: italic; }

/* ---------- Search ---------- */
.search-tabs { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.25rem 0 2rem; }
.search-form { display: flex; flex-direction: column; gap: 0.6rem; background: #fff; border: 1px solid #ecdfc9; border-radius: 10px; padding: 1.1rem; min-width: 260px; flex: 1; }
.search-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #55493a; }
.search-filters { display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid #ecdfc9; border-radius: 8px; padding: 0.6rem 0.8rem 0.7rem; margin: 0; }
.search-filters legend { padding: 0 0.3rem; font-size: 0.85rem; font-weight: 600; color: #55493a; }
.search-filters .checkbox-label { font-size: 0.9rem; font-weight: 400 !important; }

/* ---------- Review list ---------- */
.review-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.review-list li { padding: 0.85rem 0; border-bottom: 1px solid #ecdfc9; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.review-list.detailed li { display: block; }
.review-photo-gallery { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0; }
.review-photo-thumb { display: flex; flex-direction: column; gap: 0.25rem; width: 110px; text-decoration: none; }
.review-photo-thumb img { width: 110px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid #ecdfc9; display: block; }
.review-photo-caption { font-size: 0.75rem; color: #55493a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Review photo lightbox ---------- */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.lightbox-overlay.open { display: flex; }
.lightbox-box { margin: 0; max-width: 100%; }
.lightbox-box img {
    display: block;
    width: 900px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.lightbox-caption { color: var(--color-cream-alt); text-align: center; margin-top: 0.6rem; font-size: 0.9rem; }

.review-title { font-style: italic; }
.review-meta { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.35rem; flex-wrap: wrap; }
.tag { background: #f1e4d4; color: #55493a; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.78rem; font-weight: 600; }

/* ---------- Rankings ---------- */
/* Reuses the shared .dark-panel background (same as Best Of/Map) instead
   of the plain white section - the red links and cream table text read
   much better against the dark brown than they did on white. Only h1 and
   the muted "no results" text need a color bump here; everything else
   (.tab, .rankings-table, .tag/.status-pill) was already designed to sit
   on a dark surface elsewhere on the site. */
.rankings-panel h1 { color: #fff; }
.rankings-panel .muted { color: var(--color-cream-alt); opacity: 0.8; }
.rankings-panel .review-search {
    background: var(--color-black-soft);
    border-color: rgba(212, 160, 23, 0.35);
    color: var(--color-cream-alt);
}
.rankings-panel .review-search::placeholder { color: var(--color-cream-alt); opacity: 0.55; }
.tabs { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.tab { padding: 0.45rem 1rem; border-radius: 999px; background: #f1e4d4; color: #55493a; font-weight: 600; }
.tab.active { background: var(--color-red); color: #fff; }
/* Horizontal scroll container rather than letting the table itself
   overflow the page - important on narrow screens where 8 columns won't
   all fit, same pattern used for any other wide content on the site. */
.rankings-table-wrap { overflow-x: auto; margin-top: 0.75rem; border-radius: 10px; border: 1px solid rgba(212, 160, 23, 0.25); }
.rankings-table { width: 100%; border-collapse: collapse; white-space: nowrap; background: #232323; }
.rankings-table th, .rankings-table td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rankings-table th { background: #171717; color: var(--color-gold-light); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.rankings-table tbody tr, .rankings-table tbody td { color: var(--color-cream-alt); }
.rankings-table td a { font-weight: 400; color: var(--color-red); }
.rankings-table td a:hover { color: var(--color-gold-light); }
.rankings-table td .tag, .rankings-table td .status-pill { white-space: normal; }
/* Zebra striping - dark gray / a lighter (but still dark) gray, per the
   dark table look this was modeled on - light cream text throughout so it
   stays readable on either shade. */
.rankings-table tbody tr:nth-child(odd) { background: #1c1a17; }
.rankings-table tbody tr:nth-child(even) { background: #242019; }
.rankings-table tbody tr:hover { background: #362f22; }
.rankings-table th.sortable { cursor: pointer; user-select: none; }
.rankings-table th.sortable:hover { color: #fff; }
.rankings-table th.sortable::after { content: '\2195'; display: inline-block; margin-left: 0.3rem; opacity: 0.5; font-size: 0.85em; }
.rankings-table th.sortable.sort-asc::after { content: '\2191'; opacity: 1; color: var(--color-gold-light); }
.rankings-table th.sortable.sort-desc::after { content: '\2193'; opacity: 1; color: var(--color-gold-light); }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.pager button:disabled { background: var(--color-cream-alt); border-color: var(--color-cream-alt); color: var(--color-muted); cursor: default; opacity: 0.7; }
.pager .pager-label { white-space: nowrap; }

/* ---------- Maps ---------- */
/* Sized from the container's WIDTH (16:9), not viewport height - inside the
   1024px-capped page-shell, a vh-based height ignored the available width
   and produced a narrow, tall box on tall screens. Same padding-top
   technique as the hero banner, for the same cross-browser reasons. */
.full-map-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(212, 160, 23, 0.35);
}
.full-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.detail-map { height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid #ecdfc9; }

/* ---------- Map page: header/stats bar, dark-styled Leaflet chrome, popups ---------- */
.map-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.map-header h1 { color: #fff; margin: 0; font-size: 1.4rem; line-height: 1.35; }
.total-reviews-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    flex-shrink: 0;
}
.trb-label { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--color-gold-light); font-weight: 700; }
.trb-number { font-size: 1.6rem; font-weight: 800; color: var(--color-red); line-height: 1.1; }

.recent-reviews-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.recent-reviews-row { margin-top: 1rem; }
.view-all-link { color: var(--color-gold-light); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* Leaflet's default chrome is a white/light UI - restyle to match the dark panel */
.leaflet-control-zoom a {
    background: var(--color-black-soft) !important;
    color: var(--color-cream-alt) !important;
    border-color: rgba(212, 160, 23, 0.4) !important;
}
.leaflet-control-zoom a:hover { background: var(--color-red) !important; color: #fff !important; }
.leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--color-cream-alt) !important;
}
.leaflet-control-attribution a { color: var(--color-gold-light) !important; }
.leaflet-popup-content-wrapper { background: var(--color-black-soft) !important; color: var(--color-cream-alt) !important; border-radius: 8px !important; }
.leaflet-popup-tip { background: var(--color-black-soft) !important; }
.leaflet-popup-close-button { color: var(--color-cream-alt) !important; }
.map-popup { display: flex; flex-direction: column; gap: 0.25rem; min-width: 160px; }
.map-popup strong { color: #fff; font-size: 0.95rem; }
.map-popup-meta { font-size: 0.78rem; color: var(--color-cream-alt); }
.map-popup-stars { color: var(--color-gold); letter-spacing: 1px; }
.map-popup-count { font-size: 0.75rem; color: var(--color-cream-alt); }
.map-popup-btn {
    display: inline-block;
    margin-top: 0.35rem;
    background: var(--color-red);
    color: #fff !important;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.6rem;
    border-radius: 5px;
}
.map-popup-btn:hover { background: var(--color-red-dark); text-decoration: none; }

@media (max-width: 600px) {
    .map-header { flex-direction: column; }
}

/* ---------- Forms (admin) ---------- */
.stacked-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 520px; margin-top: 1rem; }
.stacked-form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; color: #55493a; }
.stacked-form button { align-self: flex-start; }
#review-form { max-width: 700px; }
details { background: #fff; border: 1px solid #ecdfc9; border-radius: 10px; padding: 1rem 1.25rem; margin: 1rem 0 2rem; }
details summary { font-weight: 700; cursor: pointer; }
.photo-preview { display: flex; align-items: center; gap: 0.75rem; margin-top: -0.4rem; }
.photo-gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.photo-gallery-item { display: flex; flex-direction: column; gap: 0.3rem; }
.photo-gallery-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid #ecdfc9; }
.photo-pick-item { cursor: pointer; }
.photo-pick-item img { transition: border-color 0.15s, box-shadow 0.15s; }
.photo-pick-item:hover img { border-color: var(--color-gold); }
.photo-pick-item.photo-pick-selected img { border-color: var(--color-red); border-width: 3px; box-shadow: 0 0 0 1px var(--color-red); }

/* ---------- Review scoring (admin) ---------- */
.score-fieldset { border: 1px solid #ecdfc9; border-radius: 10px; padding: 0.9rem 1rem 1rem; margin: 0; }
.score-fieldset legend { font-weight: 700; font-size: 0.9rem; color: #55493a; padding: 0 0.4rem; }
/* Fixed 3 columns (not auto-fit) so the row break is predictable: Flavor/
   Value/Portion Size (auto-calculated from items) always fill row 1, and
   Atmosphere/Variety/Service (manual, visit-only) always start row 2. */
.score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.score-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #55493a; }
.score-field-weighted { color: var(--color-red); }
.visit-score-from-items { background: var(--color-cream-alt); }
/* Score boxes are packed tightly in a grid (see .score-grid/.item-row-scores
   above) - the native up/down spinner arrows are a thin, easy-to-fat-finger
   target right where the next field starts, and clicking one on an empty
   box jumps it straight to min="0" (a real, reported bug: an accidental
   click quietly tanked the review's score). Removing the spinner removes
   that mis-click target entirely; typing a value directly still works
   exactly the same. */
.visit-score, .item-score { -moz-appearance: textfield; }
.visit-score::-webkit-outer-spin-button, .visit-score::-webkit-inner-spin-button,
.item-score::-webkit-outer-spin-button, .item-score::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.computed-score { margin: 0.75rem 0 0; font-size: 0.9rem; color: #55493a; }
.computed-score strong { color: var(--color-red); font-size: 1.05rem; }
.item-row { border: 1px solid #ecdfc9; border-radius: 8px; padding: 0.75rem 0.85rem; margin-bottom: 0.75rem; background: #fdfaf6; }
.item-row-main { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.item-row-main .item-select { flex: 1; }
.item-new-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.item-new-fields input, .item-new-fields select { flex: 1; min-width: 140px; }
.item-row-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }
.photo-preview img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid #ecdfc9; }
.checkbox-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 0.4rem; font-weight: 500 !important; }

/* ---------- Admin table ---------- */
.review-search { width: 100%; max-width: 420px; margin-top: 0.5rem; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid #ecdfc9; }
.admin-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.admin-table th.sortable:hover { color: var(--color-red); }
.admin-table th.sortable::after { content: '\2195'; display: inline-block; margin-left: 0.3rem; opacity: 0.35; font-size: 0.85em; }
.admin-table th.sortable.sort-asc::after { content: '\2191'; opacity: 1; }
.admin-table th.sortable.sort-desc::after { content: '\2193'; opacity: 1; }
.admin-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.row-actions { display: flex; gap: 0.75rem; align-items: center; }
.inline-form { display: inline; margin: 0; }
.link-btn { background: none; border: none; color: var(--color-red); padding: 0; font-weight: 600; cursor: pointer; }
.link-btn.danger { color: var(--color-red-dark); }
.link-btn:hover { text-decoration: underline; }
.status-pill { display: inline-block; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.78rem; font-weight: 600; }
.status-pill.status-published { background: #e4f3e1; color: #256029; }
.status-pill.status-draft { background: var(--color-cream-alt); color: var(--color-muted); border: 1px solid var(--color-border); }
.status-pill.status-closed { background: #fbe4e0; color: var(--color-red-dark); }
.status-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }

/* ---------- Homepage: feature strip ----------
   Full-bleed dark bar. Negative side margins cancel out .main-content's
   1.25rem side padding so it reaches the edges of the 1024px page-shell,
   the same trick used below for .worth-section. */
.feature-strip {
    position: relative;
    margin: 0 -1.25rem;
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--color-black);
    color: #fff;
    border-top: 1px solid rgba(212, 160, 23, 0.35);
    border-bottom: 1px solid rgba(212, 160, 23, 0.35);
}
.feature-strip::before {
    content: "";
    position: absolute;
    inset: 10px 12px;
    border: 1px solid rgba(242, 230, 210, 0.3);
    border-radius: 13px;
    pointer-events: none;
}
.feature { position: relative; z-index: 1; min-height: 145px; text-align: center; padding: 0.5rem 0.75rem; border-right: 1px solid rgba(241, 228, 212, 0.2); }
.feature:last-child { border-right: 0; }

/* Homepage stats bar - sits directly above the Explore/Discover strip,
   reusing its same dark full-bleed look. Negative top margin cancels out
   .main-content's 2rem top padding (see .main-content above, unchanged at
   every breakpoint) so this actually replaces the plain cream gap that
   used to show there instead of just adding a second bar below it.
   Two classes (not just .stats-strip) so this outweighs the plain
   .feature-strip margin reset in the 1050px-and-under media query below -
   same specificity would otherwise let source order flip which one wins
   depending on viewport width. */
.feature-strip.stats-strip { margin-top: -2rem; padding: 0.55rem 1.5rem; }
.stat { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 8px 0.75rem; }
.stat-number { margin-top: 0.2rem; font: 700 1.5rem/1 'Oswald', sans-serif; color: var(--color-red); }
.stat-label { color: var(--color-cream-alt); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
/* Icons cropped directly from full-design-reference.png's own feature-strip
   mockup (not the graphics-sheet's "Info Boxes" row, which uses a
   different mixed-color icon set) - background keyed out to transparency
   so they float on the strip instead of showing as little dark tiles. */
.feature-icon { width: 44px; height: 44px; object-fit: contain; margin-bottom: 0.4rem; }
.feature h2 { margin: 0 0 0.4rem; color: #fff; font: 700 1.15rem/1 'Oswald', sans-serif; letter-spacing: 0.02em; }
.feature p { margin: 0; color: #eee5db; font-size: 0.85rem; line-height: 1.4; }

/* ---------- Homepage: review-style cards (Top Restaurants / Top Entrees /
   Recent Reviews) - shares .card's base but overrides its look, so other
   pages' plain .card grids (search, rankings) are unaffected. ---------- */
/* Extends past .main-content's own top/bottom padding (negative margins,
   same trick as .feature-strip's side cancellation) so the textured
   background reaches all the way from the feature strip above down to the
   footer below, instead of leaving a plain untextured strip of the page's
   own background showing in that padding gap. */
.reviews-section {
    background:
        linear-gradient(rgba(253, 250, 246, 0.72), rgba(253, 250, 246, 0.72)),
        url('/assets/img/texture-cream.png') center/260px repeat;
    margin: 0 -1.25rem -4rem;
    padding: 1.75rem 1.5rem calc(1.75rem + 4rem);
    border-radius: 12px 12px 0 0;
}
.section-heading { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; }
.section-heading span { flex: 1; height: 3px; background: linear-gradient(90deg, transparent, var(--color-black)); }
.section-heading span:last-child { background: linear-gradient(90deg, var(--color-black), transparent); }
.section-heading h2 { margin: 0; white-space: nowrap; font: 700 1.3rem/1 'Oswald', sans-serif; color: var(--color-black); }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
/* Positioning context for .review-badge - kept as a sibling of .review-card
   rather than nested inside it, since .review-card's own overflow:hidden
   (needed to clip the photo to its rounded corners) would otherwise clip
   the badge too, and it's meant to hang past the card's edge. */
.review-card-wrap { position: relative; }
.review-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fbf6ee;
    border: 2px solid #d39b3a;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.review-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.review-photo-wrap { position: relative; height: 170px; overflow: hidden; background: var(--color-black-soft); }
.review-photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.review-badge {
    position: absolute;
    left: -14px;
    top: -14px;
    width: 88px;
    height: auto;
    z-index: 2;
    /* Doubled up + tightened drop-shadow so the badge separates cleanly
       from busy food photos behind it - at the old single soft shadow, the
       badge's antialiased edges and fine text optically blended into
       whatever was directly behind them, especially on the black/cream
       badges, reading as if the badge itself were partly transparent. */
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}
.review-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, #2a201a, #161210);
    color: var(--color-gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
}
.review-content { padding: 0.85rem 0.7rem 0.9rem; text-align: center; }
.review-content h3 { margin: 0 0 0.2rem; font: 700 1.05rem/1.15 'Oswald', sans-serif; text-transform: uppercase; }
.review-content p { margin: 0 0 0.4rem; color: #6b5f55; font-size: 0.82rem; }
.review-card .stars { color: var(--color-red); font-size: 1rem; letter-spacing: 1px; }
.score-paren { color: var(--color-muted); font-size: 0.8rem; font-weight: 600; }
.view-all {
    display: block;
    width: fit-content;
    margin: 1.4rem auto 0;
    color: var(--color-red);
    font: 700 0.95rem 'Oswald', sans-serif;
}
.view-all span { display: inline-block; margin-left: 0.4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
    .site-header { min-height: 60px; padding: 0.6rem 1.1rem; }
    .logo { width: 100%; margin-right: 0; }
    .main-nav { flex: 1; }
    .nav-item { min-width: 5.5rem; }
    .social-nav { border-left: 0; padding-left: 0; }
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    /* flex: 1 1 100% (not just width:100%) - the 1050px breakpoint's plain
       "flex: 1" left an implied flex-basis:0%, which overrides an explicit
       width in a flex row, so .main-nav was never actually reaching full
       width here. It ended up sharing its row with .social-nav instead of
       wrapping onto its own line, squeezed into a fraction of the space
       its 4 items need. */
    .main-nav { order: 2; flex: 1 1 100%; width: 100%; overflow-x: visible; gap: 0.2rem; }
    .social-nav { order: 3; margin: 0 auto; }
    /* Stacked icon-over-label instead of side-by-side - all 4 items now
       divide the row evenly (flex:1, min-width:0) and fit without needing
       horizontal scroll, instead of being cut off/hidden past the edge. */
    .nav-item { flex: 1; min-width: 0; flex-direction: column; gap: 0.2rem; padding: 0.4rem 0.15rem; }
    .nav-item span { font-size: 0.68rem; }
    .nav-item.active::after { left: 0.5rem; right: 0.5rem; }
    /* .nav-item switches to flex-direction:column above, which flips the
       main axis to vertical - so .nav-icon's flex-basis (part of the base
       "flex: 0 0 22px" shorthand) would otherwise apply to height and
       fight the height override below. Reset it explicitly instead of
       just width/height. */
    .nav-icon { flex: 0 0 18px; width: 18px; height: 18px; }
    .hero-extra { padding: 1rem 1rem 0.9rem; }
    .hero-search { flex-wrap: wrap; }
    .hero-search input { min-width: 100%; }
    .feature-strip { grid-template-columns: 1fr 1fr; margin: 0 -1.25rem; }
    .feature:nth-child(2) { border-right: 0; }
    .feature:nth-child(-n+2) { border-bottom: 1px solid rgba(241, 228, 212, 0.2); padding-bottom: 0.75rem; margin-bottom: 0.5rem; }
    .reviews-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .reviews-grid { grid-template-columns: 1fr; }
}