html {
    scroll-behavior: smooth;
}

body {
    font-family: "Karla", sans-serif;
    background: #FBF3E7;
    color: #201C26;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Bricolage Grotesque", sans-serif;
}

section[id] {
    scroll-margin-top: 6rem;
}

/* Scroll-in animation */
.animate-this {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.animate-this.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Category select dropdown can get very tall with 300+ options */
select.category-select {
    max-height: 300px;
}

/* Utility kept for any leftover 'd-none' references from the old bootstrap
   markup / fixed apiClass.php fragments -- Bootstrap itself is no longer
   linked on this site so this needs to be defined here. */
.d-none { display: none !important; }

/*
 * Compatibility shim -- apiClass.php's ajaxList() (used by the "Load More"
 * button on listing.php) renders fixed markup with these exact class names
 * (businesscard/img-fluid/fs-5/fw-bold/opacity-75/d-flex/gap-2/btn-sec/
 * flex-grow-1/bg_none/px-2). Styled here to match the hand-written directory
 * cards elsewhere on the site (purple brand accent, warm sand/terracotta
 * kept only as secondary desert warmth), without touching the PHP/API layer.
 */
.businesscard {
    position: relative;
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 10px 26px -10px rgba(32,28,38,.16);
    transition: transform .25s ease, box-shadow .25s ease;
    margin: 0 0 1.5rem 0;
    height: calc(100% - 1.5rem);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(32,28,38,.06);
}
.businesscard:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px -12px rgba(158,68,239,.28);
}
.businesscard .img-fluid {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.businesscard .fs-5 {
    font-size: 1.1rem;
    padding: 0 1.15rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #201C26;
}
.businesscard .fw-bold {
    font-weight: 700;
}
/* apiClass.php echoes text-white on some card titles/addresses -- override
   to ink since cards sit on a light background, not an image overlay, in
   this theme. */
.businesscard h3.text-white,
.businesscard p.text-white {
    color: #201C26 !important;
}
.businesscard .mt-2 { margin-top: .6rem; display: block; }
.businesscard .p-3.pb-2 { padding: 1.15rem 1.15rem .75rem; flex-grow: 1; display: flex; flex-direction: column; }
.businesscard p.opacity-75 {
    color: #201C26;
    opacity: .55 !important;
    font-size: .9rem;
    margin-top: .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.businesscard .d-flex { display: flex; margin-top: auto; padding-top: .85rem; }
.businesscard .flex-grow-1 { flex-grow: 1; }

/* Premium ribbon used on hand-written listing/premium cards */
.psdrs { position: relative; }
.open {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    background: #E8D3B5;
    color: #7A3A1F;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .02em;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* Generic flex helpers still referenced by fixed apiClass markup */
.d-flex { display: flex; }
.flex-grow-1 { flex-grow: 1; }

/* Pill buttons -- used across hand-written forms/cards and by apiClass.php's
   ajaxList() fragment (btn-sec / btn-sec.bg_none). */
.btn-prime,
.btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: fit-content;
    min-height: 44px;
    padding: 9px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    text-decoration: none !important;
}
.btn-prime {
    background: #9E44EF;
    color: #fff;
    box-shadow: 0 10px 22px -6px rgba(158,68,239,.5);
}
.btn-prime:hover {
    background: #8A3AD1;
    transform: translateY(-2px);
    color: #fff;
}
.btn-sec {
    background: #201C26;
    color: #fff;
}
.btn-sec:hover {
    background: #7A8B69;
    color: #fff;
    transform: translateY(-2px);
}
.btn-sec.bg_none,
.businesscard .bg_none {
    background: transparent;
    border: 2px solid rgba(32,28,38,.15);
    color: #201C26;
    box-shadow: none;
    min-height: 44px;
}
.btn-sec.bg_none:hover {
    background: #9E44EF;
    border-color: #9E44EF;
    color: #fff;
}
.btn-sec.bg_none img,
.businesscard .bg_none img {
    filter: none;
}

/* Raw blog HTML content styling (fullpost.php) */
.blog-content {
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(32, 28, 38, .78);
}
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6 {
    color: #201C26;
    font-family: "Bricolage Grotesque", sans-serif;
    line-height: 1.3;
    margin-top: 1.75em;
    margin-bottom: .6em;
}
.blog-content h1 { font-size: 1.7rem; }
.blog-content h2 { font-size: 1.45rem; }
.blog-content h3 { font-size: 1.2rem; }
.blog-content h4, .blog-content h5, .blog-content h6 { font-size: 1.05rem; }
.blog-content p { margin-bottom: 1.1em; }
.blog-content ul, .blog-content ol { margin: 1em 0 1.2em 1.4em; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: .4em; }
.blog-content a { color: #9E44EF; text-decoration: underline; }
.blog-content strong, .blog-content b { font-weight: 700; color: #201C26; }
.blog-content blockquote {
    border-left: 4px solid #7A8B69;
    padding-left: 1em;
    margin: 1.2em 0;
    color: rgba(32, 28, 38, .65);
    font-style: italic;
}
.blog-content img { margin: 1em 0; max-width: 100%; border-radius: 1rem; }

/* Quick category links (index.php hero, and anywhere else the same cl_1..cl_7
   icon set is used). Icons are inlined as real <svg> markup (see
   .category-icon-badge) instead of <img src="cl_N.svg"> + CSS filter/mask --
   those source SVGs use an internal <mask style="mask-type:alpha">, which in
   combination with <img>-loading + a CSS filter fails to rasterize reliably
   in some real-world browsers, leaving the icon blank. Inlining the path
   data removes that dependency entirely. */
.banner-anchors { display: flex; flex-wrap: wrap; gap: .75rem; }
.category-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 2px solid rgba(32, 28, 38, .08);
    border-radius: 1.25rem;
    padding: 1rem .75rem;
    width: 104px;
    text-align: center;
    box-shadow: 3px 3px 0 rgba(32, 28, 38, .06);
    transition: transform .2s ease, border-color .2s ease;
}
.category-link:hover { transform: translateY(-3px); border-color: #9E44EF; }
.category-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #9E44EF;
    color: #fff;
    box-sizing: border-box;
    transition: background-color .2s ease;
}
.category-icon-badge svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}
.category-link:hover .category-icon-badge,
.banner-anchors a:hover .category-icon-badge {
    background: #8A3AD1;
}
.category-link p { margin: 0; font-size: .78rem; font-weight: 800; color: #201C26; }

/* Trending / popular-categories row (index.php, id="listing"). When the API
   only returns a handful of cards, .post-wrapper's flex-start row leaves an
   awkward empty gap to the right of the last card. .post-wrapper--center is
   added by index.php only when the fetched count is small enough to fit
   without needing horizontal scroll, so the row hugs its content instead of
   pinning the cards to the left of a mostly-empty, full-width track. */
.post-wrapper--center {
    justify-content: center;
}

/* "Explore all businesses" filler card shown at the end of a sparse trending
   row so the section doesn't read as unfinished/empty. */
.explore-more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: calc(100% - 1.5rem);
    min-height: 220px;
    border: 2px dashed rgba(255,255,255,.25);
    border-radius: 1.5rem;
    color: #fff;
    text-align: center;
    padding: 1.5rem;
    transition: border-color .2s ease, background-color .2s ease, transform .25s ease;
}
.explore-more-card:hover {
    transform: translateY(-4px);
    border-color: #9E44EF;
    background: rgba(158,68,239,.12);
}
.explore-more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #9E44EF;
    font-size: 1.25rem;
    line-height: 1;
}
.explore-more-card p {
    margin: 0;
    font-weight: 700;
    font-size: .95rem;
}

/* listing.php's result grid -- same "sparse full-width grid" problem when a
   search only returns 1-2 cards. Applied conditionally (few-results) so
   normal, fully-populated searches keep the responsive 2-column grid. */
#listing-container.few-results {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#listing-container.few-results > div {
    width: 100%;
    max-width: 380px;
}