/* NexDemo Polish: eat (Guía Picante, Mexico City eating guide).
   Identity kept: hot pink #D6006F, cobalt #1F4FD8, Bebas Neue + DM Sans, warm canvas #FFF6E9.
   Fixes, in order:
    1. Warm neutrals: the plugin's cool slate greys (canvas, hairlines, muted text) become the site's warm set on every page.
    2. Bebas Neue was drawn in synthetic bold at 15-22px on cards and section headings: real weight, readable sizes.
    3. Header: one solid cream bar instead of a see-through strip over photos.
    4. Archive / category / what's new / search: dark strip under the header, cold hero scrim, small title, grey chip rail, blue pagination.
    5. Archive on phones: the page opened as a full-screen map with nothing else; now title, search, chips, a map panel and the list.
    6. Empty search: world map beside "no results" removed; the message card is themed.
    7. Listing page: white page becomes canvas, two-photo gallery fills its row, section headings sized, cool borders warmed.
    8. About / For restaurants: checklist rows line up with the heading and use brand colours.
    9. Home: hero search on one row with matching controls; Editor's pick band on canvas; card labels readable; second H1 ("Map") hidden.
   10. Maps: grey basemap warmed toward the canvas so pink pins stand out; map page list in the body font; credit line fits on phones.
   11. Footer: brand-coloured (ink) footer instead of a sparse white block.
   12. 404: body copy in DM Sans instead of the theme's light Manrope.
   Also: 3b (phones) header no longer covers the demo strip and the first line on Home / About / For restaurants;
   card status line wraps as one sentence; "Member since 2026 · 24 places" and the dead-end Message button hidden on listings.
   Note on @layer: three rules sit inside "@layer nexdemo { }". The site's own Additional CSS is re-issued in that layer, and
   an !important declaration inside a layer outranks every unlayered rule, so its own !important values can only be corrected from the same layer.
*/

/* ---------- 1. Warm neutrals (defect: cool blue-grey plugin defaults on a warm cream site) ---------- */
html body {
  --nd-canvas: #FFF6E9;
  --nd-ink-2: #3B2D27;
  --nd-muted: #6B5A52;
  --nd-subtle: #A39085;
  --nd-line: #EFDFC8;
  --nd-line-strong: #E0CBAC;
}

/* ---------- 2. Display type (defect: Bebas Neue has one weight; the plugin asked for 650-700, so the browser smeared a fake bold) ---------- */
html body .nxd-ui :is(.nd-ecard__title, .nd-mcard__title, .nds-h2, .nds-title, .nd-discover__title, .nd-mapx__title, .nds-related h3, .nexdirectory-empty-state h3),
html body .nd-ecard .nd-ecard__title,
html body .nd-ecard .nd-ecard__title a { font-weight: 400; font-synthesis: none; }
/* list cards: place names were 15-17px condensed caps, smaller than the category label above them */
html body .nd-ecard.nd-ecard--horizontal .nd-ecard__title { font-size: 26px; line-height: 1.22; margin: 0; }
html body .nd-ecard.nd-ecard--horizontal .nd-ecard__eyebrow { color: var(--nd-accent-ink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
html body .nd-ecard.nd-ecard--horizontal .nd-ecard__eyebrow .nd-ecard__when { color: inherit; font-size: inherit; font-weight: inherit; }
@media (max-width: 767.98px) {
  html body .nd-ecard.nd-ecard--horizontal .nd-ecard__title { font-size: 22px; }
}

/* ---------- 3. Header (defect: translucent white bar turned grey-pink over hero photos) ---------- */
html body .ndn.nexdirectory-platform-nav::before,
html body .ndn.nexdirectory-platform-nav.is-scrolled::before { background: rgba(255, 246, 233, .96); }
html body .ndn.nexdirectory-platform-nav.is-scrolled { box-shadow: 0 1px 0 #EFDFC8, 0 12px 28px -22px rgba(28, 19, 16, .45); }

/* ---------- 4. Archive, category, what's new, search ---------- */
/* dark strip under the header: the parallax photo slid down and showed the navy box behind it */
html body .nd-discover .nd-discover__hero-media { background: #1C1310; }
html body .nd-discover .nd-discover__hero-media img { height: calc(100% + 96px); margin-top: -48px; opacity: 1; }
/* scrim: warm ink instead of slate navy, lighter at the top so the food still reads */
html body .nd-discover .nd-discover__hero-media::after { background: linear-gradient(180deg, rgba(28, 19, 16, .38) 0%, rgba(28, 19, 16, .52) 50%, rgba(28, 19, 16, .78) 100%); }
/* title: 48px read as a label next to the 84-110px headings on the other pages */
html body .nd-discover .nd-discover__title { font-size: clamp(44px, 5.4vw, 80px); line-height: 1; }
html body .nd-discover .nd-discover__hero.has-image .nd-discover__lede { color: rgba(255, 255, 255, .92); font-size: 18px; }
html body .nd-discover .nd-searchbar { border-color: transparent; box-shadow: 0 18px 44px -18px rgba(28, 19, 16, .55); }
/* chip rail: frosted cool grey -> frosted canvas */
html body .nd-discover .nd-discover__rail { background: rgba(255, 246, 233, .92); }
html body .nd-discover .nd-qchip:hover { border-color: var(--nd-accent); color: var(--nd-accent-ink); }
html body .nd-discover .nd-qchip[aria-pressed="true"] { background: var(--nd-accent); border-color: var(--nd-accent); color: #fff; }
/* pagination: default blue links -> ink numbers, pink current page */
html body .nexdirectory-pagination ul.page-numbers { color: #1C1310; }
html body .nexdirectory-pagination .page-numbers a.page-numbers { border-color: var(--nd-line-strong); border-radius: 999px; }
html body .nexdirectory-pagination .page-numbers a.page-numbers:hover { border-color: var(--nd-accent); }
html body .nexdirectory-pagination .page-numbers span.page-numbers.current { background: var(--nd-accent); border-color: var(--nd-accent); color: #fff; border-radius: 999px; }
/* view toggle: pressed state in ink reads as a black blob; use the accent */
html body .nd-discover .nd-viewtoggle button[aria-pressed="true"] { background: var(--nd-accent) !important; }

/* ---------- 5. Archive on phones and small tablets (defect: "map" default view was a fixed full-screen map; no title, search, chips, list or empty message) ---------- */
@media (max-width: 899.98px) {
  /* the map becomes a panel in the page, under the title, search and chips, with the list of places below it */
  html body .nd-discover[data-view="map"] .nd-discover__body { display: flex; flex-direction: column; align-items: stretch; }
  html body .nd-discover[data-view="map"] .nd-discover__map {
    order: -1; position: relative; top: auto; left: auto; right: auto; bottom: auto; z-index: 1;
    width: 100%; height: clamp(200px, 28vh, 260px); border-radius: 20px; margin: 0 0 16px;
  }
  html body .nd-discover[data-view="map"] .nd-discover__results { display: block; width: 100%; min-width: 0; }
  /* the floating "List" pill only made sense over the full-screen map; the list is now on the page and the view switch sits in the toolbar */
  html body .nd-discover[data-view="map"] .nd-floatpill { display: none; }
  /* in grid/list view the pill offers "Map": brand pink instead of slate glass */
  html body .nd-discover .nd-floatpill { background: var(--nd-accent); border-color: var(--nd-accent); color: #fff; box-shadow: 0 14px 30px -10px rgba(214, 0, 111, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body .nd-discover .nd-discover__hero.has-image .nd-discover__hero-inner { padding-top: 28px; padding-bottom: 24px; }
  html body .nd-discover .nd-discover__title { font-size: 46px; }
  html body .nd-discover .nd-discover__hero.has-image .nd-discover__lede { font-size: 16px; }
}
/* status line ("Open now · Closes 3:00 pm") broke into two ragged columns on narrow cards: let it wrap as one sentence */
html body .nd-ecard .nd-ecard__status { display: inline; }
html body .nd-ecard .nd-ecard__status::before { display: inline-block; margin-right: 6px; vertical-align: 1px; }
html body .nd-ecard .nd-ecard__status-detail { margin-left: 0; }

/* ---------- 6. Empty search (defect: cold white-blue card with navy heading; a grey map of the whole world beside it) ---------- */
html body .nd-discover.is-empty[data-view="map"] .nd-discover__map { display: none; }
html body .nd-discover.is-empty[data-view="map"] .nd-discover__body { display: block; }
html body .nd-discover.is-empty .nd-discover__results { max-width: 860px; margin-inline: auto; padding-bottom: 0; }
html body #nexdirectory-archive-results > .nexdirectory-grid > .nexdirectory-search-recovery {
  border-color: var(--nd-line-strong) !important;
  background: radial-gradient(circle at 50% -18%, rgba(214, 0, 111, .10), transparent 52%), #fff !important;
  box-shadow: 0 18px 44px -24px rgba(28, 19, 16, .35) !important;
}
html body .nexdirectory-search-recovery .nexdirectory-search-recovery__title { color: #1C1310 !important; font-family: var(--nd-font-display); font-weight: 400 !important; font-size: clamp(34px, 4vw, 52px) !important; line-height: 1 !important; letter-spacing: .012em; text-transform: uppercase; }
html body .nexdirectory-search-recovery .nexdirectory-search-recovery__description { color: var(--nd-muted) !important; font-size: 17px !important; }
html body .nexdirectory-search-recovery .nexdirectory-search-recovery__button:not(.nexdirectory-search-recovery__button--primary) { border-color: var(--nd-line-strong); color: var(--nd-ink-2); }

/* ---------- 7. Listing page ---------- */
/* white page under a cream header -> canvas, cards stay white */
html body .nds { background: var(--nd-canvas); }
html body .nds .nds-related { border-top-color: var(--nd-line); }
/* section headings were 22px synthetic bold */
html body .nds .nds-h2 { font-size: 34px; line-height: 1; }
/* photo wall: two portrait tiles filled a third of the row each and left the rest empty */
html body .nds .nds-gallery--wall .nds-gallery__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .nds .nds-gallery--wall .nds-gallery__grid[data-count="2"] .nds-gallery__item { aspect-ratio: 4 / 3; }
html body .nds .nds-gallery--wall .nds-gallery__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
html body .nds .nds-gallery--wall .nds-gallery__grid[data-count="1"] .nds-gallery__item { aspect-ratio: 16 / 9; }
/* body copy was slate blue-grey */
html body .nds .nds-prose { color: var(--nd-ink-2); }
/* related cards: names in the display face like every other card */
html body .nds .nds-related .nds-relcard .nds-relcard__title { font-family: var(--nd-font-display); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: .015em; text-transform: uppercase; }
/* owner block: "Member since 2026 · 24 places" is seed-account filler, and Message only leads to "Accounts are off on this demo" */
html body .nds .nds-host .nds-host__meta,
html body .nds .nds-host .nds-host__actions a[href*="/login-signup/"] { display: none; }
@media (max-width: 767.98px) {
  html body .nds .nds-h2 { font-size: 28px; }
}

/* ---------- 8. About / For restaurants ---------- */
/* checklist rows started 76px left of the heading (their margin reset beat the section's centring) and ran the full 1240px */
/* (the site's own rule is !important and is re-issued inside @layer nexdemo, where it outranks any unlayered rule; this one line joins that layer to beat it) */
@layer nexdemo { html body .gp-section > .gp-ticks { margin-left: auto !important; margin-right: auto !important; } }
/* "Editor's picks" / "Places waiting" card rows sat 24px right of their heading */
html body .gp-end-wrap > .nxd-ui > section, html body .gp-end-wrap > section { width: calc(100% - 48px); padding-left: 0; padding-right: 0; }
@media (max-width: 640px) { html body .gp-end-wrap > .nxd-ui > section, html body .gp-end-wrap > section { width: calc(100% - 36px); } }
@media (min-width: 900px) {
  html body .gp-section > .gp-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
}
/* ticks: jade is not a brand colour here; use the pink */
html body .gp-ticks li::before { background-color: #D6006F; }
html body .gp-ticks li { box-shadow: 0 1px 0 #EFDFC8; }

/* ---------- 9. Home ---------- */
/* hero search: the text field was forced onto its own row above a lone select; one row of matching pill controls */
html body .gp-hero .nexdirectory-widget-search-block .nexdirectory-widget-search-fields > input[type="text"]:first-of-type { grid-column: auto; }
html body .gp-hero .nexdirectory-widget-search-form :is(input[type="text"], select) { height: 50px; border-radius: 999px; padding-left: 18px; border-color: #E0CBAC; background-color: #fff; font-size: 16px; }
html body .gp-hero .nexdirectory-widget-search-form .nexdirectory-btn { min-height: 50px; padding-inline: 26px; font-size: 16px; }
html body .gp-hero .nexdirectory-widget-search-form { border: 0; border-radius: 999px; padding: 10px; }
@media (max-width: 640px) {
  html body .gp-hero .nexdirectory-widget-search-form { border-radius: 26px; padding: 12px; }
}
/* Editor's pick: a pure white band between two cream ones */
html body .gp-section.gp-picks { background: #FFF6E9; }
/* category labels over photos were gold on bright food and hard to read; a deeper warm scrim behind the text block */
html body .gp-picks .nd-ecard .nd-ecard__shade { background: linear-gradient(180deg, rgba(28, 19, 16, 0) 30%, rgba(28, 19, 16, .55) 62%, rgba(28, 19, 16, .88) 100%); }
/* classic cards (Open right now, Editor's picks on About): category label in the same pink caps as the list cards, not slate grey */
html body .nd-ecard--classic .nd-ecard__eyebrow { color: var(--nd-accent-ink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
html body .nd-ecard--classic .nd-ecard__eyebrow .nd-ecard__when { color: inherit; font-size: inherit; font-weight: inherit; }

/* ---------- 10. Maps (defect: flat grey basemap; the site's warm tint sat under the tiles and never showed) ---------- */
html body .leaflet-pane .nd-tiles-modern { filter: brightness(.88) sepia(.42) saturate(1.3) hue-rotate(-8deg); }
html body .leaflet-container { background: #F3E3CC; }
/* map page: the plugin's runtime rule put the display font on the whole panel, so place lines were tiny condensed caps */
html body #nexdirectory-map-default-wrapper.nd-mapx { font-family: var(--nd-font) !important; background: #F3E3CC; }
html body .nd-mapx .nd-mcard .nd-mcard__title { font-size: 22px; line-height: 1.2; }
html body .nd-mapx .nd-mcard .nd-mcard__when { color: var(--nd-accent-ink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; }
html body .nd-mapx .nd-mapx__title { font-size: 34px; line-height: 1; }
html body .nd-mapx .nd-qchip[aria-pressed="true"] { background: var(--nd-accent); border-color: var(--nd-accent); color: #fff; }

/* ---------- 11. Footer (defect: sparse white default footer on a cream site) ---------- */
html body .ndn-footer {
  --nd-surface: #1C1310; --nd-ink: #fff; --nd-ink-2: rgba(255, 255, 255, .9); --nd-muted: rgba(255, 246, 233, .72);
  --nd-line: rgba(255, 246, 233, .16); --nd-line-strong: rgba(255, 246, 233, .32); --nd-accent: #FF5FAE;
  border-top: 4px solid #D6006F !important;
}
html body .ndn-footer .ndn-footer__title { color: #F5A623 !important; font: 700 12px/1.3 var(--nd-font) !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
html body .ndn-footer .ndn-footer__logo img { height: 48px; }
html body .ndn-footer .ndn-footer__tagline { max-width: 38ch; font-size: 16px; }
html body .ndn-footer .ndn-footer__top-btn { background: transparent; }
@media (min-width: 900px) {
  /* one short column left the right 60% empty: brand left, links as a two-column block on the right edge */
  html body .ndn-footer .ndn-footer__top { grid-template-columns: minmax(0, 1fr) auto; }
  html body .ndn-footer .ndn-footer__cols { grid-template-columns: minmax(0, 1fr); min-width: 360px; }
  html body .ndn-footer .ndn-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (max-width: 767.98px) {
  html:has(body .ndn-footer) { background-color: #1C1310; }
  html body .ndn-footer .ndn-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  html body .ndn-footer .ndn-footer__cols { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- 3b. Phones: demo strip vs pinned header (defect: on Home, About and For restaurants the header is pinned to the top of the screen, so it covered the demo strip and the first lines of the page) ---------- */
@media (max-width: 640px) {
  /* the site's "top:0 !important" lives in @layer nexdemo, so this joins the same layer; the header drops below the strip until the page scrolls */
  @layer nexdemo {
    html body:is(.home, .page-template-page-no-title):has(> .nxdc:not(.is-hidden)) .nexdirectory-platform-nav:not(.is-scrolled) { top: 44px !important; }
    /* About: the first line ("About this demo") sat under the pinned header */
    html body .gp-section.gp-about { padding-top: 104px !important; }
  }
}

/* map credit line: on narrow maps it wrapped to a two-line white band across the bottom of the panel (the plugin's font rule is !important) */
@media (max-width: 899.98px) {
  html body .leaflet-container .leaflet-control-attribution { font-size: 9.5px !important; padding: 1px 6px; background: rgba(255, 246, 233, .82); }
}

/* ---------- 12. 404 (theme template): body copy fell back to the theme's light Manrope ---------- */
html body.error404 .gp-section :is(p, li), html body.error404 .gp-mini-foot { font-family: "DM Sans", Inter, system-ui, sans-serif; }
html body.error404 .gp-section p:not(.gp-kicker) { font-weight: 400; color: #3B2D27; }

/* home: the embedded map brought a second H1 ("Map") under the section's own heading */
html body.home .nd-mapx .nd-mapx__title { display: none; }

/* "What are you craving?" chips opened a quotation mark and never closed it (decorative mark only) */
html body .gp-asks .gp-ask::after { content: "\201D"; color: #D6006F; font-weight: 800; margin-left: 2px; }