﻿/* ==========================================================
   Existing styles (used by /locations and other pages)
   Keep these as-is to avoid regressions.
   ========================================================== */

.prose-md-mud {
    color: var(--mud-palette-text-primary);
    line-height: 1.65;
}

    .prose-md-mud h1, .prose-md-mud h2, .prose-md-mud h3 {
        color: var(--mud-palette-text-primary);
        font-weight: 600;
    }

    .prose-md-mud h1 {
        font-size: 2rem;
        margin: 1.5rem 0 .75rem;
    }

    .prose-md-mud h2 {
        font-size: 1.5rem;
        margin: 1.25rem 0 .5rem;
        border-bottom: 2px solid #eee;
        padding-bottom: .25rem;
    }

    .prose-md-mud h3 {
        font-size: 1.25rem;
        margin: 1rem 0 .25rem;
    }

    .prose-md-mud p {
        margin: .75rem 0;
    }

    .prose-md-mud ul, .prose-md-mud ol {
        margin: .5rem 0 .75rem 1.25rem;
    }

    .prose-md-mud li {
        margin: .25rem 0;
    }

    .prose-md-mud a {
        color: #BBA96C;
        font-weight: 600;
        text-decoration: none;
        transition: color .2s ease;
    }

        .prose-md-mud a:hover {
            color: #9E8E57;
            text-decoration: underline;
        }

    .prose-md-mud blockquote {
        border-left: 3px solid var(--mud-palette-divider);
        margin: 1rem 0;
        padding: .5rem 1rem;
        color: var(--mud-palette-text-secondary);
    }

    .prose-md-mud code {
        background: var(--mud-palette-action-default-hover);
        padding: .1rem .3rem;
        border-radius: .25rem;
    }

/* A–Z nav */
.az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
}

    .az-nav a {
        text-decoration: none;
        font-weight: 600;
    }

/* Section + list */
.loc-section {
    margin: 1.25rem 0 2rem;
}

.loc-heading {
    font-size: 1.25rem;
    margin: .5rem 0 .5rem;
}

.locations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 1;
}

@media (min-width: 640px) {
    .locations-list {
        columns: 2;
    }
}

@media (min-width: 960px) {
    .locations-list {
        columns: 3;
    }
}

.locations-list li {
    break-inside: avoid;
    margin: .25rem 0;
}

.locations-list a {
    text-decoration: none;
}

    .locations-list a:hover {
        text-decoration: underline;
    }

.county {
    color: var(--mud-palette-text-secondary);
    font-size: .9em;
    margin-left: .25rem;
}

/* Pager */
.pager {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}

.pager-link {
    text-decoration: none;
}

.pager-info {
    font-size: .95rem;
    color: var(--mud-palette-text-secondary);
}

/* ==========================================================
   Location detail page fixes (scoped to avoid clashes)
   Applies to /locations/{Slug} only
   ========================================================== */

.loc-page .explore-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.loc-page .explore-card-icon .mud-icon-root,
.loc-page .explore-card-icon svg {
    display: block;
}

.loc-page .explore-card-title {
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* Keep long titles from wrapping weirdly next to the icon */
.loc-page .explore-card-header .explore-card-title {
    min-width: 0;
}

/* Make FAQ panels match hub feel (dense panels can look cramped otherwise) */
.loc-page .hub-faq .mud-expand-panel {
    border-radius: 12px;
}

    .loc-page .hub-faq .mud-expand-panel .mud-expand-panel-header {
        padding-top: 12px;
        padding-bottom: 12px;
    }

/* Markdown content inside explore-card: prevent it feeling “nested” / boxed */
.loc-page .explore-card .prose-md-mud h2 {
    border-bottom: 2px solid rgba(0,0,0,0.06);
}

/* Make chips wrap nicely in the areas card */
.loc-page .mud-chipset {
    flex-wrap: wrap;
    gap: 6px;
}

/* Ensure nearby location tiles don't get odd spacing */
.loc-page .loc-tile-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
}



/* County and count */
.county-chip-badge {
    font-size: 0.7rem;
}
