/* ---------------------------------------------------------------------------
   Visit Nelson — coastal-editorial design system.
   Fraunces (display serif) + Karla (body). Warm paper ground, deep pine green
   brand, amber for the premium tier. No framework; custom properties + grid.
--------------------------------------------------------------------------- */

:root {
    --ink: #21301f;
    /* Muted + premium are tuned to hold ≥4.5:1 (WCAG 1.4.3) on the darkest surface they
       sit on — muted on the sand footer, premium on the warm premium-tile fill. */
    --muted: #5c6756;
    --accent: #0b6e4f;
    --accent-deep: #084f39;
    --premium: #9a5817;
    --premium-soft: #f6e8d4;
    --line: #e4ded2;
    --bg: #faf8f2;
    --card: #ffffff;
    --sand: #f1ebdd;
    --max: 72rem;
    --radius: 0.75rem;
    --shadow: 0 1px 2px rgb(33 48 31 / 0.06), 0 6px 18px -8px rgb(33 48 31 / 0.14);
    --shadow-lift: 0 2px 4px rgb(33 48 31 / 0.08), 0 14px 30px -10px rgb(33 48 31 / 0.22);
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Karla", "Segoe UI", sans-serif;
    /* Fallback when no hero photo is configured / the file 404s: layered dusk-over-bay gradient. */
    --hero-fallback: linear-gradient(160deg, #0a3d30 0%, #0b6e4f 45%, #2e8b6a 70%, #c99a4b 115%);
    --hero-image: none;
}

* { box-sizing: border-box; }

/* Keep keyboard focus and anchor targets clear of the sticky header (WCAG 2.4.11).
   Sized for the header's tallest wrapped state on narrow viewports. */
html { scroll-padding-top: 4.5rem; }

/* The hidden attribute must always win: site.js toggles it (e.g. filtered-out tiles), and
   any author display rule (.business-card { display: flex }) would otherwise override the
   browser's built-in [hidden] { display: none }. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    /* Sticky footer: main stretches, footer sits at the viewport bottom on short pages. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, .brand {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.15;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

a { color: var(--accent); }

main { flex: 1; }
main .page { padding-block: 2rem 3rem; }
.page-narrow { max-width: 44rem; }

/* ---- Skip link ------------------------------------------------------------- */

/* Slides in at the top-left only while keyboard-focused; mouse/touch users never see it.
   z-index above the sticky header (20). */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    transform: translateY(-120%);
    background: var(--accent-deep);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: 0 0 0.5rem 0;
    box-shadow: var(--shadow-lift);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Header --------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(250 248 242 / 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-block: 0.7rem;
    flex-wrap: wrap;
}

.brand {
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--accent-deep);
    white-space: nowrap;
}

.header-search {
    display: flex;
    flex: 1 1 14rem;
    max-width: 24rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
/* The inputs suppress their own outline (rounded pill container), so the container must
   carry a real focus ring (WCAG 2.4.7) — a border tint alone is not a visible indicator. */
.header-search:focus-within, .search-page-form:focus-within {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.header-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0.45rem 1rem;
    font: inherit;
    background: transparent;
    outline: none;
}
.header-search button {
    border: 0;
    background: var(--sand);
    color: var(--accent-deep);
    font: inherit;
    font-weight: 700;
    padding-inline: 1rem;
    cursor: pointer;
}
.header-search button:hover { background: var(--accent); color: #fff; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: auto;
    flex-wrap: wrap;
}
.site-nav a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
}
.site-nav a:hover { color: var(--accent); }
.site-nav .nav-login { color: var(--accent-deep); }
.site-nav .nav-cta {
    background: var(--accent);
    color: #fff;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: var(--shadow);
    transition: background 0.15s ease, transform 0.15s ease;
}
.site-nav .nav-cta:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }

/* ---- Hero ----------------------------------------------------------------- */

.hero {
    position: relative;
    color: #fff;
    background-image:
        linear-gradient(rgb(8 26 20 / 0.45), rgb(8 26 20 / 0.62)),
        var(--hero-image),
        var(--hero-fallback);
    background-size: cover;
    background-position: center;
}

.hero-inner {
    padding-block: 5.5rem 4.5rem;
    text-align: center;
    max-width: 46rem;
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.6rem, 7vw, 4.25rem);
    font-weight: 700;
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}

.hero .lead {
    margin: 0.75rem 0 0;
    font-size: 1.2rem;
    color: rgb(255 255 255 / 0.92);
    text-shadow: 0 1px 12px rgb(0 0 0 / 0.35);
}

/* Search lives in the header only; the hero stays a clean title card. */

/* ---- Category strip / pills ---------------------------------------------- */

.category-list, .town-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.category-list li, .town-list li {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    box-shadow: var(--shadow);
}
.category-list a, .town-list a { text-transform: capitalize; font-weight: 700; text-decoration: none; }
.category-list .count { color: var(--muted); font-size: 0.85rem; }
.text-capitalize { text-transform: capitalize; }

/* ---- Listing sections + grid ---------------------------------------------- */

.listings-section { margin-top: 3rem; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--line);
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}
.section-head h2 { margin: 0; font-size: 1.7rem; }
.see-all { font-weight: 700; text-decoration: none; white-space: nowrap; }
.see-all:hover { text-decoration: underline; }

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

/* ---- Business tile --------------------------------------------------------- */

.business-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.business-card:hover { transform: scale(1.02); box-shadow: var(--shadow-lift); }
/* Premium tiles: same amber family as the badge — border plus a subtle warm fill —
   so the tier reads at a glance wherever a tile appears (home, browse, search).
   Deliberately not green: green is the brand/action colour and the Claimed badge,
   and the two tiers must stay visually distinct. */
.business-card.tier-premium {
    border-color: color-mix(in srgb, var(--premium) 45%, var(--line));
    background: color-mix(in srgb, var(--premium-soft) 50%, var(--card));
}

.card-photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--sand);
}
.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--accent);
    color: #fff;
}
.badge-premium { background: var(--premium); }
.card-photo .badge, .listing-photo .badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.3);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem 1rem;
    flex: 1;
}
.card-name { margin: 0; font-size: 1.15rem; }
.card-name a { color: var(--ink); text-decoration: none; }
.card-name a:hover { color: var(--accent); }
.card-meta { margin: 0; color: var(--muted); font-size: 0.85rem; }
.category { text-transform: capitalize; }
.card-desc {
    margin: 0;
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pill-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin: 0.1rem 0 0;
}
.pill {
    display: inline-block;
    background: var(--sand);
    border-radius: 999px;
    /* ≥24px tall tap target (WCAG 2.5.8): 12px text × 1.55 line-height + 0.2rem padding. */
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-deep);
    text-transform: capitalize;
    text-decoration: none;
}
a.pill:hover { background: var(--accent); color: #fff; }
/* On the premium tile's warm fill the sand pill would all but disappear — lift it to white. */
.tier-premium .pill { background: rgb(255 255 255 / 0.8); }
.tier-premium a.pill:hover { background: var(--accent); }

/* Icon + value contact list (ContactPoints.razor). */
.contact-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.35rem 1rem;
    font-size: 0.85rem;
}
.contact-points li { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.contact-points .ci { width: 1rem; height: 1rem; flex: none; fill: var(--muted); }
.contact-points a {
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-points a:hover { text-decoration: underline; }

.card-contact {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--line);
}

.rating { color: var(--premium); font-weight: 700; white-space: nowrap; margin-left: 0.4rem; }
/* Free-tier teaser: review count without the star rating (field-mapping §2a/§2b). */
.review-teaser { color: var(--muted); white-space: nowrap; }

/* ---- Breadcrumb / misc ----------------------------------------------------- */

.breadcrumb { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.result-count { color: var(--muted); }

/* ---- Filter bar ------------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.8rem 1rem;
    margin-block: 2rem 1.5rem;
}
.filter-bar label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.filter-bar select {
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #fff;
    min-width: 9rem;
    text-transform: capitalize;
}
.filter-bar select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
#filter-reset {
    border: 0;
    background: var(--sand);
    color: var(--accent-deep);
    font: inherit;
    font-weight: 700;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}
#filter-reset:hover { background: var(--accent); color: #fff; }
.filter-empty { color: var(--muted); font-style: italic; }

/* ---- Pager ("Load more") ---------------------------------------------------- */

/* Filtered-out tiles: the filter bar toggles this class (site.js §1) rather than the `hidden`
   attribute, which the pager owns for its reveal window — so the two never clobber each other. */
.business-card.filter-hidden { display: none; }

.listing-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}
.pager-size { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.pager-size select {
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #fff;
}
.pager-size select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.pager-more {
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
}
.pager-more:hover { background: var(--accent-deep); }
.pager-more:focus { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* ---- Listing detail -------------------------------------------------------- */

.listing-photo {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 21 / 9;
    background: var(--sand);
    margin-bottom: 1.5rem;
}
.listing-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.listing-head h1 { margin: 0 0 0.25rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* Google-verified: small accent roundel beside the name; the tooltip/aria-label carries
   the "on Google" attribution. Sized in em so it tracks the heading's clamp(). */
.verified-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* font-size scales the glyph down from the h1; width/height (in the mark's own em)
       keep the circle comfortably around it. */
    font-size: 0.42em;
    width: 1.55em; height: 1.55em;
    margin-left: 0.7em; /* breathing room after the name (in the mark's own em) */
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    vertical-align: 0.35em;
    cursor: help;
}
.verified-fact span[aria-hidden] { color: var(--accent); font-weight: 700; }
.listing-meta { margin: 0 0 0.6rem; color: var(--muted); }

.listing-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: 2rem;
    margin-top: 1.5rem;
    align-items: start;
}
@media (max-width: 46rem) {
    .listing-columns { grid-template-columns: 1fr; }
}

.listing-desc { font-size: 1.08rem; margin-top: 0; }
.listing-time-spent { color: var(--muted); font-style: italic; }

.facts-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
}
.facts-card h2 { margin-top: 0; font-size: 1.2rem; }

.listing-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.listing-facts dt { font-weight: 700; color: var(--muted); }
.listing-facts dd { margin: 0; overflow-wrap: anywhere; }

.listing-map {
    margin-top: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--line);
}
.listing-map iframe { display: block; width: 100%; height: 16rem; border: 0; }
.map-links { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; margin-bottom: 0; }

.hours { list-style: none; padding: 0; max-width: 24rem; }
/* Two-column grid: a fixed-width inline-block day label overflows under the time
   for long day names ("Wednesday"); grid columns can't overlap. */
.hours li {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.35rem;
}
.hours .day { font-weight: 700; }
.hours .closed { color: var(--muted); }
/* Applied by site.js — the pages are pre-rendered, so "today" is a client-side concern. */
.hours .today { background: var(--sand); font-weight: 700; }

/* ---- Features & facilities (amenities from Outscraper `about`) --------------- */

.listing-features { margin-top: 2rem; }
.amenity-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1.25rem 2rem;
}
.amenity-group h3 {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.3rem;
}
.amenity-group ul { list-style: none; margin: 0; padding: 0; }
.amenity-group li { padding: 0.12rem 0; font-size: 0.95rem; }
.amenity-group .mark { display: inline-block; width: 1.1rem; }
.amenity-group .yes .mark { color: var(--accent); font-weight: 700; }
.amenity-group .no { color: var(--muted); }
.features-teaser {
    color: var(--muted);
    background: var(--sand);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    margin: 0;
}

.listing-disclaimer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.listing-disclaimer p { margin: 0; color: var(--muted); font-size: 0.85rem; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.claim {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--card);
}
.claim-status.claimed { color: var(--accent); }
.claim-status.unclaimable { color: var(--muted); }

/* ---- Events ----------------------------------------------------------------- */

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.25rem;
}
.event-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    background: var(--card);
    box-shadow: var(--shadow);
}
.event-card h3 { margin: 0 0 0.25rem; }
.event-when, .event-where { color: var(--muted); font-size: 0.9rem; margin: 0.15rem 0; }
.event-desc { margin: 0.35rem 0 0; }

/* ---- Forms (search / claim / add-business) ---------------------------------- */

.search-page-form {
    display: flex;
    max-width: 34rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}
.search-page-form input { flex: 1; min-width: 0; border: 0; padding: 0.7rem 1.2rem; font: inherit; outline: none; }
.search-page-form button {
    border: 0; background: var(--accent); color: #fff;
    font: inherit; font-weight: 700; padding-inline: 1.4rem; cursor: pointer;
}

.stacked-form { display: flex; flex-direction: column; gap: 0.35rem; max-width: 30rem; }
.stacked-form label { font-weight: 700; margin-top: 0.6rem; }
.stacked-form input, .stacked-form select, .stacked-form textarea {
    font: inherit;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: #fff;
}
.stacked-form input:focus, .stacked-form select:focus, .stacked-form textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}
.stacked-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.stacked-form legend { font-weight: 700; padding-inline: 0.4rem; }
.stacked-form button {
    margin-top: 1rem;
    align-self: flex-start;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
}
.stacked-form button:hover { background: var(--accent-deep); }
.stacked-form button[disabled] { opacity: 0.6; cursor: default; }

.form-offline {
    background: var(--premium-soft);
    border: 1px solid color-mix(in srgb, var(--premium) 35%, var(--line));
    border-radius: var(--radius);
    padding: 0.9rem 1.2rem;
}

#claim-message, #submit-message { min-height: 1.4em; font-weight: 700; }
.form-error { color: #a33a2a; }
.form-success { color: var(--accent); }

/* ---- Footer ----------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--sand);
    padding-block: 2rem;
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 3rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 40rem) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-deep);
    margin: 0 0 0.25rem;
}
.footer-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.footer-heading { font-weight: 700; color: var(--ink); margin: 0 0 0.2rem; }
.footer-nav a, .footer-network a { color: var(--accent-deep); }
.footer-network { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1rem; margin-bottom: 0; }