/* =====================================================================
   STRUCTURE + semantic component styling for the public site.
   Drives everything off theme.css tokens — no hard-coded colors/fonts.
   Class names are semantic (BEM-ish) so a redesign can restyle a
   component in one place. Public pages are static SSR; this is plain CSS.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--font-size); }

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); }

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

/* ---- App shell ---- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page__body { flex: 1 0 auto; padding-block: var(--space-6); }

/* ---- Header ---- */
.site-header {
    position: sticky; top: 0; z-index: 10;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.site-header__inner {
    display: flex; align-items: center; gap: var(--space-5);
    min-height: var(--header-height);
}
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); font-size: 1.15rem; color: var(--color-text); }
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--color-primary); font-size: 1.4rem; }
.site-nav { display: flex; gap: var(--space-4); margin-left: auto; }
.site-nav a { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.site-nav a:hover { color: var(--color-primary); text-decoration: none; }

/* ---- Hero ---- */
.hero {
    background: linear-gradient(160deg, var(--color-primary), var(--color-primary-hover));
    color: var(--color-on-primary);
    padding-block: var(--space-8);
}
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--space-2); }
.hero p { margin: 0 0 var(--space-5); opacity: .92; font-size: 1.1rem; }

/* ---- Search bar ---- */
.searchbar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.searchbar__field {
    flex: 1 1 240px; min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font: inherit; background: var(--color-surface); color: var(--color-text);
}
.searchbar__submit {
    padding: var(--space-3) var(--space-5);
    background: var(--color-accent); color: #fff; border: 0;
    border-radius: var(--radius-sm); font: inherit; font-weight: var(--weight-medium); cursor: pointer;
}
.searchbar__submit:hover { filter: brightness(.95); }

/* ---- Chips / tags ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chip {
    display: inline-block; padding: var(--space-1) var(--space-3);
    background: var(--color-surface-alt); color: var(--color-text);
    border-radius: var(--radius-pill); font-size: .9rem; border: 1px solid transparent;
}
a.chip:hover { border-color: var(--color-primary); text-decoration: none; }
.chip--active { background: var(--color-primary); color: var(--color-on-primary); }
.tag { display: inline-block; padding: 2px var(--space-2); background: var(--color-surface-alt); color: var(--color-text-muted); border-radius: var(--radius-sm); font-size: .78rem; }

/* ---- Section heading ---- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-4); }
.section-head h2 { margin: 0; font-size: 1.4rem; }
.muted { color: var(--color-text-muted); }

/* ---- Listing grid + card ---- */
.listing-grid {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    list-style: none; margin: 0; padding: 0;
}
.card {
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__title { font-size: 1.1rem; margin: 0; }
.card__title a { color: var(--color-text); }
.card__title a:hover { color: var(--color-primary); text-decoration: none; }
.card__addr { color: var(--color-text-muted); font-size: .85rem; font-style: normal; margin-bottom: var(--space-1); }
.card__meta { color: var(--color-text-muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.card__cats { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.card__dbid { margin-top: var(--space-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; color: var(--color-text-muted); opacity: .7; user-select: all; word-break: break-all; }
.card__thumb { display: block; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card__thumb img { display: block; width: 100%; height: 150px; object-fit: cover; }

/* Featured (sponsored) band + card treatment. */
.featured-band { margin-bottom: var(--space-6); }
.featured-band__title { display: flex; align-items: center; gap: var(--space-2); }
.featured-band__tag {
    font-size: .68rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-text-muted); background: var(--color-surface-alt);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px var(--space-2);
}
.card--featured { position: relative; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent) inset, var(--shadow-sm); }
.card__featured {
    position: absolute; top: 0; right: 0; z-index: 1;
    font-size: .66rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: .04em;
    color: #fff; background: var(--color-accent);
    border-radius: 0 var(--radius) 0 var(--radius-sm); padding: 2px var(--space-2);
}

/* Owner featured-analytics: summary cards + data tables. */
.stat-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-4); text-align: center;
}
.stat-card__num { font-size: 1.8rem; font-weight: var(--weight-medium); color: var(--color-text); }
.stat-card__label { font-size: .8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); }
.data-table th { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.data-table td:not(:first-child), .data-table th:not(:first-child) { text-align: right; }
.detail__thumb { display: block; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.detail__photo { display: block; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--color-border); object-fit: cover; max-height: 320px; }
.listing-head { display: flex; align-items: center; gap: var(--space-3); }
.brand-logo { height: 48px; width: auto; max-width: 160px; object-fit: contain; flex: 0 0 auto; }

/* ---- Pager ---- */
.pager { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
.pager a, .pager span {
    padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
}
.pager a:hover { border-color: var(--color-primary); text-decoration: none; }
.pager .is-current { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pager .is-disabled { opacity: .5; pointer-events: none; }

/* ---- Detail page ---- */
.detail { display: grid; gap: var(--space-6); grid-template-columns: 2fr 1fr; }
@media (max-width: 760px) { .detail { grid-template-columns: 1fr; } }
.detail__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.detail dt { color: var(--color-text-muted); font-weight: var(--weight-medium); }
.detail dd { margin: 0; }
.btn {
    display: inline-block; padding: var(--space-3) var(--space-5);
    background: var(--color-primary); color: var(--color-on-primary);
    border: 0; border-radius: var(--radius-sm); font-weight: var(--weight-medium); cursor: pointer;
}
.btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); text-decoration: none; }
.btn--block { display: block; width: 100%; text-align: center; }
.btn--ghost {
    background: transparent; color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-primary-hover); }
.btn.is-busy { opacity: .6; pointer-events: none; }

/* "Use my location" banner (JS-injected; progressive enhancement). */
.loc-banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: .9rem;
}
.loc-banner__msg { flex: 1 1 auto; }
.loc-banner .btn { padding: var(--space-1) var(--space-3); }
.loc-banner__dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-muted); font-size: 1rem; line-height: 1;
}
.loc-banner.is-busy { opacity: .6; pointer-events: none; }

/* Razor Page forms (owner portal, claim form, account pages) — matched to the site skin.
   Scoped to .stacked-form so the public component forms (.searchbar, …) are untouched. */
.stacked-form { max-width: 640px; }
.stacked-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: var(--space-1); }
.stacked-form input,
.stacked-form textarea,
.stacked-form select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.stacked-form input[type="checkbox"] { width: auto; }
.stacked-form input:focus,
.stacked-form textarea:focus,
.stacked-form select:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
    border-color: var(--color-primary);
}
.stacked-form textarea { resize: vertical; min-height: 4rem; }
.stacked-form button {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: 600;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}
.stacked-form button:hover { background: var(--color-primary-hover); }
.stacked-form .field-validation-error,
.stacked-form .validation-summary-errors { color: #b00020; font-size: .85rem; }

/* near-me row under the search bar */
.searchbar-aux { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hero__geo { margin-top: var(--space-3); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.hero__geo:hover { background: rgba(255,255,255,.22); color: #fff; }

/* distance badge on a card */
.card__distance { color: var(--color-accent); font-weight: var(--weight-medium); }

/* ---- Footer ---- */
.site-footer {
    flex-shrink: 0; margin-top: var(--space-8);
    background: var(--color-surface); border-top: 1px solid var(--color-border);
    padding-block: var(--space-5); color: var(--color-text-muted); font-size: .85rem;
}
.site-footer a { color: var(--color-text-muted); text-decoration: underline; }

/* ---- Empty state ---- */
.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-text-muted); }

.stack > * + * { margin-top: var(--space-5); }

/* ---- Blazor error UI (hidden until an unhandled error) ---- */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    padding: var(--space-3) var(--space-5);
    background: #fbe3b2; box-shadow: 0 -1px 3px rgba(0,0,0,.15);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-4); top: var(--space-3); }