/* =====================================================================
   Public directory site.

   Direction: a town noticeboard, not a SaaS dashboard. Flat colour and
   structural 2px borders carry the hierarchy (no soft grey shadows), one
   bold moment (the coral hero band), warm cream ground, plum ink.

   Brand colours are CSS variables (see style.css + theme_css_vars()), so a
   different city's palette flows through everything below, including the
   tinted category tiles, which are derived with color-mix().
   ===================================================================== */

body.public-site { background: var(--cream); }

.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;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cream);
    border-bottom: 2px solid var(--color-base);
}

.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--color-base);
    text-decoration: none;
    white-space: nowrap;
}

/* The search may shrink; a header wider than the viewport means sideways scrolling */
.site-search { flex: 1 1 220px; min-width: 0; max-width: 440px; }

.site-search form {
    display: flex;
    background: #fff;
    border: 2px solid var(--color-base);
    border-radius: 10px;
    overflow: hidden;
}

.site-search form:focus-within {
    outline: 3px solid var(--color-secondary-deep);
    outline-offset: 2px;
}

.site-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    min-height: 40px;
}

.site-search input:focus { outline: none; }

.site-search button {
    border: 0;
    border-left: 2px solid var(--color-base);
    background: var(--color-primary);
    color: var(--on-primary);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0 1rem;
    cursor: pointer;
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.site-nav a {
    color: var(--color-base);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.site-nav .nav-login {
    border: 2px solid var(--color-base);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
}

.site-nav .nav-login:hover {
    background: var(--color-base);
    color: var(--cream);
    text-decoration: none;
}

@media (max-width: 720px) {
    .site-header-inner { flex-wrap: wrap; row-gap: 0.6rem; }
    .site-search { order: 3; flex-basis: 100%; max-width: none; }
    .site-nav { gap: 0.8rem; }
}

/* ---------- Hero (the one bold moment) ---------- */
.hero {
    background: var(--color-primary);
    color: var(--on-primary);
    border-bottom: 2px solid var(--color-base);
    padding: 3.5rem 0 5rem;
}

.hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }

.hero h1 {
    font-size: clamp(2rem, 5.2vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    max-width: 13em;
}

.hero p {
    font-size: 1.1rem;
    max-width: 34em;
    margin: 0;
}

/* The search sits across the band's bottom edge, like a printed ticket */
.hero-search {
    position: relative;
    max-width: 1200px;
    margin: -2.4rem auto 0;
    padding: 0 1.25rem;
}

.hero-search form {
    display: flex;
    max-width: 640px;
    background: #fff;
    border: 2px solid var(--color-base);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--color-base);
    padding: 0.35rem;
}

.hero-search form:focus-within {
    outline: 3px solid var(--color-secondary-deep);
    outline-offset: 4px;
}

.hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
    min-height: 48px;
}

.hero-search input:focus { outline: none; }

.hero-search button {
    border: 0;
    border-radius: 10px;
    background: var(--color-base);
    color: var(--cream);
    font: inherit;
    font-weight: 700;
    padding: 0 1.5rem;
    cursor: pointer;
}

/* ---------- Page structure ---------- */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}

.page-container.narrow { max-width: 800px; }

.page-section { margin-bottom: 3rem; }

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.1rem;
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}

.breadcrumb a { color: inherit; }

.empty-state {
    border: 2px dashed var(--line);
    border-radius: 14px;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--ink-soft);
}

.empty-state a { color: var(--color-base); font-weight: 600; }

/* ---------- Category tiles: flat tints cycling through the palette ---------- */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.9rem;
}

.category-card {
    display: flex;
    align-items: flex-end;
    min-height: 92px;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--color-base);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.category-card:nth-child(4n+1) { background: #ffd3cd; background: color-mix(in srgb, var(--color-primary) 30%, #fff); }
.category-card:nth-child(4n+2) { background: #e4dafb; background: color-mix(in srgb, var(--color-secondary) 26%, #fff); }
.category-card:nth-child(4n+3) { background: #fadfae; background: color-mix(in srgb, var(--gold) 40%, #fff); }
.category-card:nth-child(4n+4) { background: #e6e1ea; background: color-mix(in srgb, var(--color-base) 13%, #fff); }

.category-card:hover {
    border-color: var(--color-base);
    transform: translateY(-2px);
}

/* ---------- Chips (localities, filters, pager) ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.3rem 1rem;
    border: 2px solid var(--color-base);
    border-radius: 999px;
    background: #fff;
    color: var(--color-base);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.chip:hover,
.chip.is-active {
    background: var(--color-base);
    color: var(--cream);
}

/* ---------- Business cards ---------- */
.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.business-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.business-card:hover {
    border-color: var(--color-base);
    transform: translateY(-2px);
}

.business-card-media { position: relative; }

.business-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f1e3d8;
}

.featured-tag {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    background: var(--gold);
    color: var(--color-base);
    font-weight: 700;
    font-size: 0.74rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.business-card-body { padding: 0.9rem 1rem 1.1rem; }

.business-card-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    margin: 0 0 0.3rem;
}

.business-card-meta {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 0.45rem;
}

.business-card-tagline {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pager { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- Business page ---------- */
.business-cover {
    display: block;
    width: 100%;
    height: clamp(160px, 28vw, 300px);
    object-fit: cover;
    background: #f1e3d8;
    border-bottom: 2px solid var(--color-base);
}

.business-header {
    position: relative;
    max-width: 1200px;
    margin: -3rem auto 0;
    padding: 0 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.business-logo {
    flex: none;
    width: 104px;
    height: 104px;
    object-fit: cover;
    background: #fff;
    border: 2px solid var(--color-base);
    border-radius: 18px;
}

.business-header-text { padding-top: 3.25rem; min-width: 0; }

.business-header-text h1 {
    font-size: clamp(1.4rem, 3.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.business-header-meta {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.business-header-meta a { color: inherit; }

.business-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2.5rem;
    align-items: start;
}

.business-main > section { margin-bottom: 2.5rem; }

.business-main h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.business-tagline {
    font-size: 1.1rem;
    margin: 0 0 2rem;
}

@media (max-width: 900px) {
    .business-layout { grid-template-columns: 1fr; gap: 1rem; }
    .business-header { margin-top: -2.4rem; gap: 1rem; }
    .business-logo { width: 80px; height: 80px; border-radius: 14px; }
    .business-header-text { padding-top: 2.7rem; }
}

/* Products & services, each with its own call-to-action */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.item-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.item-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #f1e3d8;
}

.item-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.9rem;
}

.item-card-name { font-weight: 700; margin: 0 0 0.15rem; }
.item-card-price { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem; }
.item-card-desc { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.9rem; }
.item-card .cta-btn { margin-top: auto; }

.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--color-base);
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Text colours chosen for contrast: white-on-coral and white-on-WhatsApp-green both fail AA */
.cta-enquiry  { background: var(--color-primary); color: var(--on-primary); }
.cta-call     { background: #fff; color: var(--color-base); }
.cta-whatsapp { background: #25d366; color: var(--color-base); }
.cta-link,
.cta-book     { background: var(--color-secondary-deep); color: var(--on-secondary-deep); }

.cta-btn:hover { filter: brightness(0.95); }

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.gallery-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--line);
}

/* Contact + hours */
.visit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2.5rem;
}

.contact-list { list-style: none; margin: 0; padding: 0; }

.contact-list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
    overflow-wrap: anywhere;
}

.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-list .icon { flex: none; margin-top: 0.2rem; }
.contact-list a { color: inherit; text-underline-offset: 3px; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hours-table td { padding: 0.35rem 0; border-top: 1px solid var(--line); }
.hours-table tr:first-child td { border-top: 0; padding-top: 0; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Reviews */
.review-card { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.review-card:first-of-type { border-top: 0; padding-top: 0; }
.review-card p { margin: 0.25rem 0 0; }
.review-stars { color: #b27400; letter-spacing: 0.1em; } /* darker gold: the plain gold fails contrast on cream */

/* Enquiry form */
.enquiry-card {
    position: sticky;
    top: 5.25rem;
    background: #fff;
    border: 2px solid var(--color-base);
    border-radius: 14px;
    padding: 1.25rem;
}

.enquiry-card h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; }
.enquiry-card .lead { margin: 0 0 1rem; font-size: 0.9rem; color: var(--ink-soft); }

.enquiry-card label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.enquiry-card input[type="text"],
.enquiry-card input[type="email"],
.enquiry-card textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem 0.7rem;
    border: 2px solid #857c8e; /* 3.7:1 on white: field edges must be visible */
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 400;
    min-height: 44px;
}

.enquiry-card textarea { min-height: 84px; resize: vertical; }

.enquiry-card input:focus,
.enquiry-card textarea:focus { border-color: var(--color-base); }

.enquiry-card button[type="submit"] {
    width: 100%;
    min-height: 48px;
    border: 2px solid var(--color-base);
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--on-primary);
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

.enquiry-success,
.enquiry-error {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.enquiry-success { background: #e1f4e9; color: #14633d; }
.enquiry-error   { background: #fbe3e0; color: #9c2018; }

#enquiry-product-label {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
}

#enquiry-product-label:empty { display: none; }

/* Fixed call / enquire bar for phones: tap-to-call is the whole point of a local listing */
.mobile-actions { display: none; }

@media (max-width: 900px) {
    .mobile-actions {
        display: flex;
        gap: 0.5rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
        background: var(--cream);
        border-top: 2px solid var(--color-base);
    }

    .mobile-actions .cta-btn { flex: 1; width: auto; }
    body.has-mobile-actions { padding-bottom: 5rem; }
    .enquiry-card { position: static; }
}

/* ---------- Amenity page ---------- */
.amenity-hero {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border: 2px solid var(--color-base);
    border-radius: 14px;
    margin-bottom: 1.5rem;
}

.amenity-type { margin: -0.5rem 0 1.25rem; color: var(--ink-soft); }
.amenity-contact { max-width: 420px; }

/* ---------- Sign-in, 404 ---------- */
.auth-wrap { max-width: 440px; margin: 3rem auto 4rem; padding: 0 1.25rem; }

.auth-card {
    background: #fff;
    border: 2px solid var(--color-base);
    border-radius: 14px;
    padding: 1.75rem;
}

.auth-card h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
.auth-card .lead { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: 0.92rem; }

.auth-card label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; }

.auth-card input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid #857c8e;
    border-radius: 8px;
    font: inherit;
    font-weight: 400;
    min-height: 44px;
}

.auth-card input:focus { border-color: var(--color-base); }

.auth-card button {
    width: 100%;
    min-height: 48px;
    border: 2px solid var(--color-base);
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--on-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.form-error {
    background: #fbe3e0;
    color: #9c2018;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.notfound { max-width: 520px; margin: 5rem auto; padding: 0 1.25rem; text-align: center; }
.notfound .code { font-family: var(--font-heading); font-weight: 700; font-size: 4.5rem; line-height: 1; margin: 0; }
.notfound h1 { font-size: 1.3rem; margin: 0.75rem 0; }
.notfound p { color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-base);
    color: #efe9f3;
    padding: 3rem 0;
    margin-top: 3rem;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    font-size: 0.92rem;
}

.footer-brand { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.05rem; margin: 0 0 0.5rem; }
.site-footer h2 { font-size: 0.95rem; color: #fff; margin: 0 0 0.6rem; }
.site-footer a { display: block; padding: 0.2rem 0; color: #efe9f3; }
.site-footer p { margin: 0 0 0.25rem; }

@media (max-width: 720px) {
    .site-footer-inner { grid-template-columns: 1fr; }
}