/**
 * Base styles: loaded on the site AND inside the block editor.
 *
 * Every color, font, size and radius here is a token from theme.json:
 *   --wp--preset--color--*        settings.color.palette
 *   --wp--preset--font-size--*    settings.typography.fontSizes
 *   --wp--preset--spacing--*      settings.spacing.spacingSizes
 *   --wp--custom--*               settings.custom
 * To restyle a new site, change theme.json first. Edit this file only for
 * structural changes.
 *
 * Breakpoints: 782px (mobile / desktop), 1080px (tablet).
 *
 * Contents
 *   1. Foundations
 *   2. Accessibility
 *   3. Buttons
 *   4. Icons
 *   5. Post cards, grid and pagination
 *   6. Block style variations
 *   7. Forms
 *   8. Utilities
 *   9. Town guide sections
 *  10. Listings (SEO Micro Directory)
 */


/* ------------------------------------------------------------------
 * 1. Foundations
 * ------------------------------------------------------------------ */

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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

::selection {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
}

hr {
    border: 0;
    border-top: var(--wp--custom--border--width) solid var(--wp--custom--border--color);
}


/* ------------------------------------------------------------------
 * 2. Accessibility
 * ------------------------------------------------------------------ */

:focus-visible {
    outline: var(--wp--custom--focus--outline);
    outline-offset: var(--wp--custom--focus--offset);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    word-wrap: normal !important;
}

.skip-link:focus {
    top: var(--wp--preset--spacing--20);
    left: var(--wp--preset--spacing--20);
    z-index: 100000;
    width: auto;
    height: auto;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    margin: 0;
    clip: auto;
    font-weight: 600;
    color: var(--wp--preset--color--base);
    text-decoration: none;
    background-color: var(--wp--preset--color--contrast);
    border-radius: var(--wp--custom--radius--small);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* ------------------------------------------------------------------
 * 3. Buttons
 * Used by the Theme Button block, header/footer calls to action,
 * cards, post cards, the [towns_button] shortcode and Gravity Forms.
 *
 * Selectors use "a.towns-button" as well so they outrank the global link
 * styles from theme.json (:root :where(a) has class-level specificity).
 * ------------------------------------------------------------------ */

a.towns-button,
.towns-button {
    display: inline-flex;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--button--font-weight);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--on-primary);
    text-decoration: none;
    cursor: pointer;
    background-color: var(--wp--preset--color--primary);
    border: var(--wp--custom--border--width) solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--button--radius);
    transition:
        color var(--wp--custom--transition--fast),
        background-color var(--wp--custom--transition--fast),
        border-color var(--wp--custom--transition--fast);
}

.towns-button:hover,
.towns-button:focus-visible {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary-hover);
    border-color: var(--wp--preset--color--primary-hover);
}

.towns-button__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.125em;
    height: 1.125em;
    transition: transform var(--wp--custom--transition--fast);
}

.towns-button__icon svg {
    width: 100%;
    height: 100%;
}

.towns-button:hover .towns-button__icon,
.towns-button:focus-visible .towns-button__icon {
    transform: translate(2px, -2px);
}

/* Secondary: accent fill. */
.towns-button.towns-button--secondary {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.towns-button--secondary:hover,
.towns-button--secondary:focus-visible {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast-alt);
    border-color: var(--wp--preset--color--contrast-alt);
}

/* Outline: transparent with a border in the current text color. */
.towns-button.towns-button--outline {
    color: currentcolor;
    background-color: transparent;
    border-color: currentcolor;
}

.towns-button--outline:hover,
.towns-button--outline:focus-visible {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

/* Text link: no box, underline on hover. Inherits the text color. */
.towns-button.towns-button--link {
    padding: 0;
    color: currentcolor;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
}

.towns-button--link:hover,
.towns-button--link:focus-visible {
    color: currentcolor;
    background-color: transparent;
    border-color: transparent;
}

.towns-button--link .towns-button__label {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.towns-button--link:hover .towns-button__label {
    text-decoration-thickness: 2px;
}


/* ------------------------------------------------------------------
 * 4. Icons
 * ------------------------------------------------------------------ */

.towns-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.towns-icon svg {
    display: block;
}


/* ------------------------------------------------------------------
 * 5. Post cards, grid and pagination
 * Shared by archive templates and the Post Grid block.
 * ------------------------------------------------------------------ */

.towns-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (max-width: 1079px) {

    .towns-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 781px) {

    .towns-post-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.towns-post-card {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
}

.towns-post-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--medium);
}

.towns-post-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--wp--custom--transition--base);
}

.towns-post-card:hover .towns-post-card__media img {
    transform: scale(1.03);
}

.towns-post-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.towns-post-card__body > * {
    margin: 0;
}

.towns-post-card__meta {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    color: var(--wp--preset--color--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.towns-post-card__title {
    font-size: var(--wp--preset--font-size--large);
}

.towns-post-card__title a {
    color: inherit;
    text-decoration: none;
}

.towns-post-card__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.towns-post-card__excerpt {
    color: var(--wp--preset--color--contrast-alt);
}

.towns-post-card__excerpt p {
    margin: 0;
}

.towns-post-card .towns-button {
    align-self: flex-start;
    margin-top: auto;
}

.towns-pagination {
    margin-top: var(--wp--preset--spacing--50);
}

.towns-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
}

.towns-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    border: var(--wp--custom--border--width) solid var(--wp--custom--border--color);
    border-radius: var(--wp--custom--radius--small);
}

.towns-pagination a.page-numbers:hover {
    border-color: var(--wp--preset--color--contrast);
}

.towns-pagination .page-numbers.current {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

.towns-pagination .page-numbers.dots {
    border-color: transparent;
}


/* ------------------------------------------------------------------
 * 6. Block style variations (registered in inc/blocks.php)
 * ------------------------------------------------------------------ */

/* List > Checklist */
.wp-block-list.is-style-checklist {
    padding-left: 0;
    list-style: none;
}

.wp-block-list.is-style-checklist li {
    position: relative;
    padding-left: 1.75em;
}

.wp-block-list.is-style-checklist li + li {
    margin-top: 0.5em;
}

.wp-block-list.is-style-checklist li::before {
    position: absolute;
    top: 0.3em;
    left: 0;
    width: 1.1em;
    height: 1.1em;
    content: "";
    background-color: currentcolor;
    -webkit-mask: url(../icons/checkmark.svg) center / contain no-repeat;
    mask: url(../icons/checkmark.svg) center / contain no-repeat;
}

/* Group > Dark overlay: darkens a background image so text stays readable. */
.wp-block-group.is-style-overlay-dark {
    position: relative;
    isolation: isolate;
}

.wp-block-group.is-style-overlay-dark::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45));
    border-radius: inherit;
}


/* ------------------------------------------------------------------
 * 7. Forms
 * Native fields plus Gravity Forms.
 * ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 0.875rem;
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.4;
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--custom--form--background);
    border: var(--wp--custom--border--width) solid var(--wp--custom--form--border);
    border-radius: var(--wp--custom--form--radius);
    transition: border-color var(--wp--custom--transition--fast);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--wp--custom--form--focus);
    outline: 1px solid var(--wp--custom--form--focus);
    outline-offset: 0;
}

label {
    font-weight: 600;
}

.search-form {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    max-width: 32rem;
}

.search-form label {
    flex: 1 1 auto;
}

.search-form .search-submit {
    padding: var(--wp--custom--button--padding-block) var(--wp--custom--button--padding-inline);
    font-family: inherit;
    font-weight: var(--wp--custom--button--font-weight);
    color: var(--wp--preset--color--on-primary);
    cursor: pointer;
    background-color: var(--wp--preset--color--primary);
    border: 0;
    border-radius: var(--wp--custom--button--radius);
}

/* Gravity Forms: let the theme tokens drive the fields. */
.gform-theme--foundation {
    --gf-ctrl-border-color: var(--wp--custom--form--border);
    --gf-ctrl-radius: var(--wp--custom--form--radius);
    --gf-ctrl-border-color-focus: var(--wp--custom--form--focus);
    --gf-color-primary: var(--wp--preset--color--primary);
}

.gform_wrapper .gform_footer .gform_button.towns-button { /* stylelint-disable-line selector-class-pattern */
    width: auto;
}


/* ------------------------------------------------------------------
 * 8. Utilities
 * Add these under Block > Advanced > Additional CSS class(es).
 * ------------------------------------------------------------------ */

@media (max-width: 781px) {

    .towns-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 782px) {

    .towns-hide-desktop {
        display: none !important;
    }
}

.towns-eyebrow {
    margin-block-end: 0;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
}

.towns-lead {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.5;
}


/* ------------------------------------------------------------------
 * 9. Town guide sections
 * Block styles registered in inc/blocks.php and classes used by the
 * patterns in /patterns. Loaded on the site and in the editor.
 * ------------------------------------------------------------------ */

/* Full-width sections sit flush against each other. */
.entry-content > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull {
    margin-block-start: 0;
    margin-block-end: 0;
}

.towns-eyebrow:not(.has-text-color) {
    color: var(--wp--preset--color--primary);
}

/* Headings in a row with a "See all" link line up at the bottom. */
.towns-section-header {
    row-gap: var(--wp--preset--spacing--30);
}

.towns-section-header h2 {
    margin-block: 0;
}

/* Links on dark blue sections. */
.has-contrast-background-color a:where(:not(.wp-element-button, .towns-button)) {
    color: var(--wp--preset--color--light-green);
}

.has-contrast-background-color a:where(:not(.wp-element-button, .towns-button)):hover {
    color: var(--wp--preset--color--accent);
}

/* Hero: content lines up with the wide sections below, and the bottom
   leaves room for the category tiles that overlap it. */
.wp-block-cover.towns-hero {
    padding-top: var(--wp--preset--spacing--70);
    padding-bottom: calc(var(--wp--preset--spacing--70) + 56px);
}

/* Outranks core's "has-custom-content-position" rule, which zeroes the margin. */
.wp-block-cover.wp-block-cover.towns-hero.has-custom-content-position .wp-block-cover__inner-container {
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
}

.towns-hero .wp-block-cover__inner-container > * {
    margin-block: 0;
}

.towns-hero .wp-block-cover__inner-container > * + * {
    margin-block-start: var(--wp--preset--spacing--40);
}

.towns-hero h1 {
    max-width: 820px;
}

.towns-hero .towns-lead {
    max-width: 600px;
}

.towns-hero .td-finder {
    margin-block-start: var(--wp--preset--spacing--50);
}

/* Group > Overlap the section above (category tiles over the hero). */
.wp-block-group.is-style-overlap {
    position: relative;
    z-index: 1;
    margin-block-start: -56px;
}

/* Two tiles per row on phones instead of one long column. */
@media (max-width: 600px) {

    .wp-block-group.is-style-overlap.is-layout-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Link Card > Tile */
a.towns-link-card.is-style-tile,
.towns-link-card.is-style-tile {
    grid-template-columns: 1fr auto;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
    box-shadow: var(--wp--preset--shadow--md);
}

.towns-link-card.is-style-tile:hover,
.towns-link-card.is-style-tile:focus-visible {
    border-color: var(--wp--preset--color--primary);
}

.towns-link-card.is-style-tile .towns-link-card__arrow {
    color: var(--wp--preset--color--primary);
}

/* Group > Listing card: image on top, text below. */
.wp-block-group.is-style-card {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    height: 100%;
    box-sizing: border-box;
    padding-bottom: var(--wp--preset--spacing--40);
    overflow: hidden;
    background-color: var(--wp--custom--card--background);
    border: var(--wp--custom--border--width) solid var(--wp--custom--card--border);
    border-radius: var(--wp--custom--card--radius);
}

.wp-block-group.is-style-card > * {
    margin-block: 0;
    padding-inline: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-card > .wp-block-image {
    padding-inline: 0;
    margin: 0 0 var(--wp--preset--spacing--20);
}

.wp-block-group.is-style-card > .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.wp-block-group.is-style-card h3 {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.wp-block-group.is-style-card h3 a {
    color: inherit;
    text-decoration: none;
}

.wp-block-group.is-style-card h3 a:hover {
    text-decoration: underline;
}

.wp-block-group.is-style-card .towns-card-meta {
    margin-top: auto;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

/* Group > Compact listing card: small square image beside the text. */
.wp-block-group.is-style-card-compact {
    display: flex;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
    padding: 14px;
    background-color: var(--wp--custom--card--background);
    border-radius: var(--wp--custom--card--radius);
}

.wp-block-group.is-style-card-compact > .wp-block-image {
    flex: 0 0 96px;
    margin: 0;
}

.wp-block-group.is-style-card-compact > .wp-block-image img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--wp--custom--radius--medium);
}

.wp-block-group.is-style-card-compact > .wp-block-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wp-block-group.is-style-card-compact > .wp-block-group > * {
    margin-block: 0;
}

.wp-block-group.is-style-card-compact h3 a {
    color: inherit;
    text-decoration: none;
}

.wp-block-group.is-style-card-compact h3 {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    text-transform: none;
}

.wp-block-group.is-style-card-compact p {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

/* Paragraph > Badge (season tags on cards). */
p.is-style-badge {
    align-self: flex-start;
    padding: 6px 10px;
    margin-inline: var(--wp--preset--spacing--40);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    line-height: 1.2;
    color: var(--wp--preset--color--contrast);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: var(--wp--preset--color--accent);
    border-radius: var(--wp--custom--radius--small);
}

.wp-block-group.is-style-card > p.is-style-badge {
    padding-inline: 10px;
}

/* Buttons > Filter chips: pill links to listing categories. */
.wp-block-buttons.is-style-chips {
    gap: var(--wp--preset--spacing--20);
}

.wp-block-buttons.is-style-chips .wp-block-button__link {
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.625rem 1.25rem;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--primary);
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--radius--pill);
}

.wp-block-buttons.is-style-chips .wp-block-button:first-child .wp-block-button__link,
.wp-block-buttons.is-style-chips .wp-block-button__link:hover {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary);
}

/* Columns > Divided (summer / winter split). */
.wp-block-columns.is-style-divided {
    gap: 0;
}

.wp-block-columns.is-style-divided > .wp-block-column {
    padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 782px) {

    .wp-block-columns.is-style-divided > .wp-block-column:not(:first-child) {
        padding-inline-start: var(--wp--preset--spacing--50);
        border-inline-start: 1px solid var(--wp--preset--color--contrast-alt);
    }

    .wp-block-columns.is-style-divided > .wp-block-column:not(:last-child) {
        padding-inline-end: var(--wp--preset--spacing--50);
    }
}

@media (max-width: 781px) {

    .wp-block-columns.is-style-divided > .wp-block-column:not(:first-child) {
        border-block-start: 1px solid var(--wp--preset--color--contrast-alt);
    }
}

/* Valley directory: the "Own a business?" band. */
.towns-cta-band {
    row-gap: var(--wp--preset--spacing--30);
    border-radius: var(--wp--custom--card--radius);
}

.towns-cta-band > .wp-block-group > * {
    margin-block: 0;
}

.towns-cta-band h3 {
    font-size: var(--wp--preset--font-size--x-large);
}

/* Ad sidebar column. */
.towns-ad-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
}

.towns-ad-sidebar > * {
    margin-block: 0;
}

.towns-ad-sidebar > p {
    width: 100%;
    max-width: 300px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}


/* ------------------------------------------------------------------
 * 10. Listings (SEO Micro Directory)
 * Cards from template-parts/listing-card.php, used by the Listings block,
 * the directory pages and the related listings on a listing page.
 * ------------------------------------------------------------------ */

/* Grid: at most --td-listings-columns per row, fewer when each card would
   be narrower than --td-listings-min. */
.td-listings {
    --td-listings-gap: var(--wp--preset--spacing--40);
    --td-listings-min: 280px;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(
            max(
                min(var(--td-listings-min), 100%),
                calc((100% - (var(--td-listings-columns, 3) - 1) * var(--td-listings-gap)) / var(--td-listings-columns, 3))
            ),
            1fr
        )
    );
    gap: var(--td-listings-gap);
}

.td-listings--compact {
    --td-listings-gap: var(--wp--preset--spacing--30);
    --td-listings-min: 250px;
}

.td-listings > * {
    min-width: 0;
}

.towns-listing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--wp--custom--card--background);
    border: var(--wp--custom--border--width) solid var(--wp--custom--card--border);
    border-radius: var(--wp--custom--card--radius);
    transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.towns-listing-card:hover,
.towns-listing-card:focus-within {
    border-color: var(--wp--preset--color--primary);
    box-shadow: var(--wp--preset--shadow--md);
}

.towns-listing-card__media {
    display: block;
}

.towns-listing-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.towns-listing-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--40);
}

.towns-listing-card__body > * {
    margin: 0;
}

.towns-listing-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--10);
}

.towns-badge {
    display: inline-block;
    padding: 6px 10px;
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 600;
    line-height: 1.2;
    color: var(--wp--preset--color--contrast);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: var(--wp--preset--color--accent);
    border-radius: var(--wp--custom--radius--small);
}

.towns-badge--featured {
    color: var(--wp--preset--color--on-primary);
    background-color: var(--wp--preset--color--primary);
}

.towns-listing-card .towns-listing-card__title {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.towns-listing-card__title a {
    color: inherit;
    text-decoration: none;
}

.towns-listing-card__title a:hover {
    text-decoration: underline;
}

.towns-listing-card__summary {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.55;
    color: var(--wp--preset--color--muted);
}

.towns-listing-card__meta {
    margin-top: auto !important;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

/* Compact card: small square image beside the text. */
.towns-listing-card--compact {
    flex-direction: row;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
    padding: 14px;
    border-color: transparent;
}

.towns-listing-card--compact .towns-listing-card__media {
    flex: 0 0 96px;
}

.towns-listing-card--compact .towns-listing-card__media img {
    width: 96px;
    height: 96px;
    aspect-ratio: auto;
    border-radius: var(--wp--custom--radius--medium);
}

.towns-listing-card--compact .towns-listing-card__body {
    gap: 4px;
    padding: 0;
}

.towns-listing-card--compact .towns-listing-card__body .towns-listing-card__title {
    font-size: var(--wp--preset--font-size--medium);
}

.towns-listing-card--compact .towns-listing-card__meta {
    margin-top: 0 !important;
}

a.towns-listing-card__more {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}