/**
 * Directory Theme — civic layer
 *
 * Loaded after styles.css. Everything a client needs to rebrand is in the
 * token block below; nothing beneath it hardcodes a colour. Swap the six
 * tokens and the whole directory follows.
 *
 * Palette is drawn from the MyCityGov AAA set. Every text/background pair
 * used here clears WCAG AAA, not just AA — a directory is a public utility
 * and gets read on phones in daylight.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');

.ddp-directory {
    /* ---- Client-swappable tokens ---- */
    --dir-ink:    #1b365d;  /* headings, primary text */
    --dir-deep:   #003b49;  /* body text, deep surfaces */
    --dir-accent: #1d4289;  /* interactive blue */
    --dir-gold:   #ffc845;  /* the one warm note */
    --dir-sand:   #d6d2c4;  /* quiet fill */
    --dir-mist:   #d0d3d4;  /* hairlines */
    --dir-paper:  #ffffff;

    --dir-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --dir-body:    'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Retune the base plugin tokens so inherited components follow along
       instead of leaving indigo buttons scattered through a navy page. */
    --ddp-primary:       #1d4289;
    --ddp-primary-dark:  #1b365d;
    --ddp-primary-light: #eef1f7;
    --ddp-primary-glow:  rgba(29, 66, 137, 0.12);
    --ddp-accent:        #003b49;
}

/* ===================================================================
   WIDTH
   The base layout caps at 1200px, which leaves a three-up grid on a
   wide screen and a lot of empty margin. A directory earns its keep by
   showing more results per screen.
   =================================================================== */
.ddp-directory { max-width: 1560px; }

@media (min-width: 1200px) {
    /* Container caps at 1560px, so the column count is set by this floor.
       At 300px: four columns from 1290px up, three below. A 320px floor
       looked safer but cost the fourth column on a 1366px laptop — the most
       common desktop width — leaving 428px cards and fewer results per screen. */
    .ddp-directory .ddp-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    .ddp-directory .ddp-hero-content { max-width: 1240px; }

    /* Headline and subtitle keep a readable measure of their own. Letting them
       inherit the full 1240px would stretch the title into one thin line and
       push the subtitle past the ~70-character span where prose stays easy to
       track — the panel is what needs the width, not the copy. */
    .ddp-directory .ddp-hero-title { max-width: 20ch; margin-inline: auto; }
    .ddp-directory .ddp-hero-subtitle { max-width: 62ch; margin-inline: auto; }
}

/* ===================================================================
   SEARCH PANEL
   The field is the primary control on the page; give it the room.
   =================================================================== */
.ddp-directory .ddp-hero .ddp-search-header { padding: 1.75rem; }

.ddp-directory .ddp-search-main { gap: .75rem; }

.ddp-directory .ddp-search-input { font-size: 1rem; }

/* Selects share the row evenly instead of sitting at a fixed 160px and
   leaving dead space on the right once the panel is wider. */
@media (min-width: 900px) {
    .ddp-directory .ddp-filters-row .ddp-select {
        flex: 1 1 0;
        min-width: 0;
    }
    .ddp-directory .ddp-filters-row > .ddp-btn,
    .ddp-directory .ddp-filters-row > button {
        flex: 0 0 auto;
    }
}

/* ===================================================================
   CARD INTERIOR
   Consistent vertical rhythm; the eye should land on the name first.
   =================================================================== */
.ddp-directory .ddp-card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.15rem 1.25rem 1rem;
}

/* One quiet chip instead of eight pastel category colours. The pastels were
   assigned by term ID, so the hue meant nothing — and they collided with the
   monogram tiles, which use colour to mean something real. */
.ddp-directory .ddp-card-category {
    align-self: flex-start;
    padding: .2rem .55rem;
    border-radius: 3px;
    font-family: var(--dir-body);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ddp-directory .ddp-card-category:link,
.ddp-directory .ddp-card-category:visited { color: var(--dir-deep); background: var(--dir-sand); }
.ddp-directory .ddp-card-category:hover,
.ddp-directory .ddp-card-category:active { color: #fff; background: var(--dir-deep); }

.ddp-directory .ddp-card-title {
    font-size: 1.1875rem;
    line-height: 1.25;
    margin: 0;
}
.ddp-directory .ddp-card-title a:link,
.ddp-directory .ddp-card-title a:visited { color: var(--dir-ink); text-decoration: none; }
.ddp-directory .ddp-card-title a:hover,
.ddp-directory .ddp-card-title a:active { color: var(--dir-accent); text-decoration: underline; }

.ddp-directory .ddp-card-meta {
    font-family: var(--dir-body);
    font-size: .8125rem;
    color: #46586e;
    gap: .75rem;
}

.ddp-directory .ddp-card-footer {
    border-top: 1px solid var(--dir-mist);
    padding: .8rem 1.25rem;
    font-family: var(--dir-body);
    font-size: .8125rem;
}
.ddp-directory .ddp-card-phone:link,
.ddp-directory .ddp-card-phone:visited { color: var(--dir-deep); text-decoration: none; }
.ddp-directory .ddp-card-phone:hover,
.ddp-directory .ddp-card-phone:active { color: var(--dir-accent); text-decoration: underline; }

.ddp-directory .ddp-card-link {
    font-weight: 600;
    text-underline-offset: 3px;
}
.ddp-directory .ddp-card-link:link,
.ddp-directory .ddp-card-link:visited { color: var(--dir-accent); text-decoration: none; }
.ddp-directory .ddp-card-link:hover,
.ddp-directory .ddp-card-link:active { color: var(--dir-ink); text-decoration: underline; }

/* List view: keep the monogram square and the row aligned */
.ddp-directory .ddp-view-list .ddp-card-image { aspect-ratio: 1; }
.ddp-directory .ddp-view-list .ddp-card-mono-letters { font-size: 2.5rem; }

/* ===================================================================
   MAP
   =================================================================== */
.ddp-directory .ddp-map {
    height: 480px;
    border-radius: 0;
    border: 0;
}
@media (max-width: 782px) {
    .ddp-directory .ddp-map { height: 340px; }
}
.ddp-directory .ddp-map-info {
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--dir-mist);
}

/* ===================================================================
   SECTION RHYTHM
   =================================================================== */
.ddp-directory .ddp-map-section { margin-bottom: 2rem; }
.ddp-directory .ddp-results-controls { margin-bottom: 1.25rem; }
.ddp-directory .ddp-pagination { margin-top: 2.5rem; }

/* ===================================================================
   QUICK CATEGORY CHIPS
   The base stylesheet forces `color: #fff !important` for a frosted-glass
   treatment over a gradient. On a solid navy ribbon with white chips that
   renders white-on-white — invisible. Overriding needs equal force.
   =================================================================== */
.ddp-directory .ddp-quick-cat {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
    box-shadow: none;
    font-family: var(--dir-body);
    font-weight: 600;
    font-size: .875rem;
    padding: .55rem 1.1rem;
}
.ddp-directory .ddp-quick-cat:link,
.ddp-directory .ddp-quick-cat:visited {
    color: #fff !important;
    background: transparent;
}
.ddp-directory .ddp-quick-cat:hover,
.ddp-directory .ddp-quick-cat:active {
    color: var(--dir-ink) !important;
    background: var(--dir-gold);
    border-color: var(--dir-gold);
    transform: none;
    box-shadow: none;
}
.ddp-directory .ddp-quick-cat:focus-visible {
    color: var(--dir-ink) !important;
    background: var(--dir-gold);
    border-color: var(--dir-gold);
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.ddp-directory .ddp-quick-cat .ddp-quick-cat-label { color: inherit; }
/* SVG follows the label colour in every state; the old emoji could not. */
.ddp-directory .ddp-quick-cat-icon {
    color: inherit;
    filter: none;
    flex: 0 0 auto;
}

/* ===================================================================
   HERO — a flat civic ribbon, not a gradient
   The blobs and radial glows read as generic SaaS and fight the type.
   =================================================================== */
.ddp-directory .ddp-hero {
    background: var(--dir-ink);
    border-radius: 0;
    margin: 0 0 2.5rem;
    padding: 3rem 1.5rem 2.25rem;
    border-bottom: 4px solid var(--dir-gold);
}
.ddp-directory .ddp-hero::before,
.ddp-directory .ddp-hero::after { content: none; }
.ddp-directory .ddp-hero-decor { display: none; }

.ddp-directory .ddp-hero-eyebrow {
    display: block;
    margin: 0 0 .75rem;
    font-family: var(--dir-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dir-gold);
}

.ddp-directory .ddp-hero-title {
    font-family: var(--dir-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--dir-paper);
    /* `auto` inline, not 0: this shorthand runs after the max-width rule above
       and a plain `margin: 0 0 .6rem` silently cancels its margin-inline:auto,
       leaving the capped block hard against the left of the hero. */
    margin: 0 auto .6rem;
    text-wrap: balance;
}

.ddp-directory .ddp-hero-subtitle {
    font-family: var(--dir-body);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
    color: #e6ebf2;
    max-width: 46ch;
    margin: 0 auto;
}

/* Search panel lifts off the ribbon rather than floating in a blur */
.ddp-directory .ddp-hero .ddp-search-header {
    background: var(--dir-paper);
    border-radius: 4px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45);
    border: 0;
    backdrop-filter: none;
}

/* ===================================================================
   CARDS
   =================================================================== */
.ddp-directory .ddp-card {
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease;
}
.ddp-directory .ddp-card:hover {
    border-color: var(--dir-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -14px rgba(27, 54, 93, .55);
}

/* Featured: a gold spine, not a full ring. Quieter, and it still scans. */
.ddp-directory .ddp-card-featured {
    border: 1px solid var(--dir-mist);
    border-left: 4px solid var(--dir-gold);
}

.ddp-directory .ddp-card-image { background: var(--dir-sand); }

/* --- Monogram tile: the signature element --- */
.ddp-directory .ddp-card-mono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--mono-bg, #1b365d);
    background-image: linear-gradient(
        rgba(255, 255, 255, var(--mono-shade, 0)),
        rgba(255, 255, 255, var(--mono-shade, 0))
    );
    overflow: hidden;
}
/* Faint sectional-chart grid — texture without decoration */
.ddp-directory .ddp-card-mono::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22px 22px;
}
.ddp-directory .ddp-card-mono-letters {
    position: relative;
    font-family: var(--dir-display);
    font-size: clamp(2.25rem, 6vw, 3rem);
    line-height: 1;
    letter-spacing: .02em;
    color: var(--dir-paper);
}

.ddp-directory .ddp-card-title,
.ddp-directory .ddp-card h3 {
    font-family: var(--dir-display);
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--dir-ink);
}

.ddp-directory .ddp-badge {
    border-radius: 3px;
    font-family: var(--dir-body);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.ddp-directory .ddp-badge-featured {
    color: var(--dir-ink);
    background: var(--dir-gold);
}

/* ===================================================================
   CONTROLS
   =================================================================== */
.ddp-directory .ddp-btn {
    border-radius: 3px;
    font-family: var(--dir-body);
    font-weight: 600;
    letter-spacing: .01em;
}

.ddp-directory .ddp-btn-primary:link,
.ddp-directory .ddp-btn-primary:visited { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }
.ddp-directory .ddp-btn-primary { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }
.ddp-directory .ddp-btn-primary:hover,
.ddp-directory .ddp-btn-primary:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-directory .ddp-btn-primary:disabled { color: #fff; background: #6b7a90; border-color: #6b7a90; }

.ddp-directory .ddp-btn-outline:link,
.ddp-directory .ddp-btn-outline:visited { color: var(--dir-ink); background: #fff; border: 1px solid var(--dir-mist); }
.ddp-directory .ddp-btn-outline { color: var(--dir-ink); background: #fff; border: 1px solid var(--dir-mist); }
.ddp-directory .ddp-btn-outline:hover,
.ddp-directory .ddp-btn-outline:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }

.ddp-directory .ddp-btn:focus-visible,
.ddp-directory .ddp-select:focus-visible,
.ddp-directory .ddp-search-input:focus-visible,
.ddp-directory .ddp-card a:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

.ddp-directory .ddp-select,
.ddp-directory .ddp-search-input {
    border-radius: 3px;
    font-family: var(--dir-body);
    border-color: var(--dir-mist);
    color: var(--dir-deep);
}

/* ===================================================================
   MAP + RESULTS BAR
   =================================================================== */
.ddp-directory .ddp-map-section {
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    overflow: hidden;
}
.ddp-directory .ddp-map-info {
    font-family: var(--dir-body);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--dir-deep);
    background: var(--dir-sand);
}
.ddp-directory .ddp-map-type-btn { font-family: var(--dir-body); border-radius: 0; }
.ddp-directory .ddp-map-type-btn.active { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }

.ddp-directory .ddp-results-count {
    font-family: var(--dir-body);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--dir-deep);
}

/* ===================================================================
   PAGINATION
   =================================================================== */
.ddp-directory .ddp-pagination .page-numbers {
    border-radius: 3px;
    font-family: var(--dir-body);
    font-weight: 600;
    border: 1px solid var(--dir-mist);
}
.ddp-directory .ddp-pagination a.page-numbers:link,
.ddp-directory .ddp-pagination a.page-numbers:visited { color: var(--dir-ink); background: #fff; }
.ddp-directory .ddp-pagination a.page-numbers:hover,
.ddp-directory .ddp-pagination a.page-numbers:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-directory .ddp-pagination .page-numbers.current {
    color: #fff;
    background: var(--dir-accent);
    border-color: var(--dir-accent);
}

/* ===================================================================
   EMPTY STATE — an invitation to act, not an apology
   =================================================================== */
.ddp-directory .ddp-empty {
    border: 1px dashed var(--dir-mist);
    border-radius: 4px;
    background: #fff;
}
.ddp-directory .ddp-empty h3 {
    font-family: var(--dir-display);
    font-weight: 400;
    color: var(--dir-ink);
}
.ddp-directory .ddp-empty p { font-family: var(--dir-body); color: var(--dir-deep); }

/* ===================================================================
   RESPONSIVE + MOTION
   =================================================================== */
@media (max-width: 640px) {
    .ddp-directory .ddp-hero { padding: 2rem 1rem 1.5rem; }
    .ddp-directory .ddp-hero-subtitle { font-size: 1rem; }
    .ddp-directory .ddp-card-mono-letters { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ddp-directory .ddp-card,
    .ddp-directory .ddp-card:hover {
        transition: none;
        transform: none;
    }
}

/* ===================================================================
   QUICK SEARCH — [directory_search] on landing pages
   Appears outside .ddp-directory, so it carries its own tokens.
   =================================================================== */
.ddp-quicksearch {
    --qs-ink: #1b365d;
    --qs-deep: #003b49;
    --qs-accent: #1d4289;
    --qs-gold: #ffc845;
    --qs-mist: #d0d3d4;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    width: 100%;
}

.ddp-quicksearch-label {
    margin: 0 0 .7rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--qs-gold);
}

/* One continuous bar rather than three floating boxes: the field, the select
   and the button read as a single control, which is what they are. */
.ddp-quicksearch-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: .4rem;
    border-radius: 6px;
    box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .55);
}

.ddp-quicksearch-input,
.ddp-quicksearch-select {
    min-width: 0;
    padding: .95rem 1rem;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--qs-deep);
    background: transparent;
}
.ddp-quicksearch-input { flex: 3 1 0; }
.ddp-quicksearch-input::placeholder { color: #4b5764; opacity: 1; }

/* Hairline divider between field and select, drawn with a border so it
   collapses cleanly when the row wraps on mobile. */
.ddp-quicksearch-select {
    flex: 1 1 0;
    border-left: 1px solid var(--qs-mist);
    cursor: pointer;
    font-weight: 500;
    /* Native arrow replaced so the chevron matches the rest of the UI. */
    -webkit-appearance: none;
    appearance: none;
    padding-right: 3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23003b49' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.ddp-quicksearch-btn {
    flex: 0 0 auto;
    margin-left: .4rem;
    padding: .95rem 2.25rem;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color .18s ease, transform .12s ease;
}
/* Block themes and page builders style bare <button> elements through their
   own global rules, which repainted this one white-with-pink-text. Matching on
   the element as well as the class raises specificity, and the colour
   declarations are forced because some themes ship theirs !important too.
   Every state declares background AND text together. */
.ddp-quicksearch button.ddp-quicksearch-btn,
.ddp-quicksearch .ddp-quicksearch-btn:link,
.ddp-quicksearch .ddp-quicksearch-btn:visited {
    color: #fff !important;
    background-color: var(--qs-accent) !important;
    background-image: none !important;
    border: 0 !important;
    text-decoration: none !important;
    text-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.ddp-quicksearch button.ddp-quicksearch-btn:hover,
.ddp-quicksearch .ddp-quicksearch-btn:hover {
    color: #fff !important;
    background-color: var(--qs-ink) !important;
}
.ddp-quicksearch button.ddp-quicksearch-btn:active,
.ddp-quicksearch .ddp-quicksearch-btn:active {
    color: #fff !important;
    background-color: var(--qs-ink) !important;
    transform: translateY(1px);
}
.ddp-quicksearch button.ddp-quicksearch-btn:disabled {
    color: #fff !important;
    background-color: #4d5968 !important;
    cursor: not-allowed;
}

/* Same defence for the field and select — themes restyle inputs too. */
.ddp-quicksearch input.ddp-quicksearch-input,
.ddp-quicksearch select.ddp-quicksearch-select {
    background-color: transparent;
    box-shadow: none;
    outline-offset: 2px;
}

/* Survive a parent that centres its flex children (Elementor containers set
   align-items on the section), which otherwise shrinks the bar to its
   content width instead of filling the hero. */
.ddp-quicksearch { align-self: stretch; }

.ddp-quicksearch-input:focus-visible,
.ddp-quicksearch-select:focus-visible,
.ddp-quicksearch-btn:focus-visible {
    outline: 3px solid var(--qs-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ddp-quicksearch-btn { transition: none; }
    .ddp-quicksearch-btn:active { transform: none; }
}

/* Stack on small screens; the divider border would sit sideways when wrapped. */
@media (max-width: 700px) {
    .ddp-quicksearch-row {
        flex-wrap: wrap;
        gap: .4rem;
        padding: .5rem;
    }
    .ddp-quicksearch-input,
    .ddp-quicksearch-select,
    .ddp-quicksearch-btn {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .ddp-quicksearch-input,
    .ddp-quicksearch-select {
        border: 1px solid var(--qs-mist);
    }
    .ddp-quicksearch-btn { padding: .9rem 1.5rem; }
}

/* ===================================================================
   SEARCH AUTOCOMPLETE
   =================================================================== */
.ddp-ac-wrap { position: relative; flex: 1 1 auto; min-width: 0; }

.ddp-ac-list {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: .3rem;
    list-style: none;
    max-height: 20rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d0d3d4;
    border-radius: 4px;
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .45);
    text-align: left;
}
.ddp-ac-list[hidden] { display: none; }

.ddp-ac-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem .75rem;
    border-radius: 3px;
    cursor: pointer;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.3;
}
.ddp-ac-name { font-size: .9375rem; font-weight: 500; color: #1b365d; }
.ddp-ac-name strong { font-weight: 700; color: #1d4289; }
.ddp-ac-meta { font-size: .75rem; color: #4b5764; }

/* Hover and keyboard highlight share one appearance, and both restate
   every colour so nothing inherits a mismatched pair. */
.ddp-ac-item.is-active,
.ddp-ac-item:hover {
    background: #1b365d;
}
.ddp-ac-item.is-active .ddp-ac-name,
.ddp-ac-item:hover .ddp-ac-name { color: #fff; }
.ddp-ac-item.is-active .ddp-ac-name strong,
.ddp-ac-item:hover .ddp-ac-name strong { color: #ffc845; }
.ddp-ac-item.is-active .ddp-ac-meta,
.ddp-ac-item:hover .ddp-ac-meta { color: #d6d2c4; }

/* ===================================================================
   MOBILE — the search panel should own the full width
   Stacked controls inside a padded panel inside a padded hero left the
   fields at roughly two-thirds of the screen on a phone.
   =================================================================== */
@media (max-width: 782px) {
    .ddp-directory .ddp-hero {
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
    }
    .ddp-directory .ddp-hero-content {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .ddp-directory .ddp-hero .ddp-search-header {
        padding: .85rem;
        border-radius: 4px;
    }
    .ddp-directory .ddp-search-main,
    .ddp-directory .ddp-filters-row {
        gap: .5rem;
    }
    .ddp-directory .ddp-search-input-wrap,
    .ddp-directory .ddp-search-main > .ddp-btn,
    .ddp-directory .ddp-filters-row > .ddp-select,
    .ddp-directory .ddp-filters-row > .ddp-btn {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
    .ddp-directory .ddp-search-input { width: 100%; }
    .ddp-quicksearch-row { padding: .45rem; }
}

/* ===================================================================
   RESULTS BAR CONTROLS
   The view toggle and "Clear filters" are bare <button>/<a> elements, so
   the theme's global styles repainted them pink. Same fix as the search
   button: match on element plus class, and declare both colours in
   every state.
   =================================================================== */
.ddp-directory a.ddp-clear-filters:link,
.ddp-directory a.ddp-clear-filters:visited {
    color: var(--dir-deep);
    background: var(--dir-sand);
    border-radius: 3px;
    padding: .25rem .6rem;
    font-family: var(--dir-body);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}
.ddp-directory a.ddp-clear-filters:hover,
.ddp-directory a.ddp-clear-filters:active {
    color: #fff;
    background: var(--dir-deep);
    text-decoration: none;
}
.ddp-directory a.ddp-clear-filters:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

.ddp-directory button.ddp-view-btn {
    color: var(--dir-ink) !important;
    background-color: #fff !important;
    border: 1px solid var(--dir-mist);
    border-radius: 3px;
}
.ddp-directory button.ddp-view-btn svg { color: inherit; stroke: currentColor; }
.ddp-directory button.ddp-view-btn:hover {
    color: #fff !important;
    background-color: var(--dir-ink) !important;
    border-color: var(--dir-ink);
}
.ddp-directory button.ddp-view-btn.active {
    color: #fff !important;
    background-color: var(--dir-accent) !important;
    border-color: var(--dir-accent);
}
.ddp-directory button.ddp-view-btn:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

/* ===================================================================
   DIRECTORY SEARCH BAR — one continuous control
   Matches the landing-page [directory_search] bar: field, Near Me and
   Search read as a single unit rather than three boxes floating in
   white space, and the blue button runs the full height of the row.
   =================================================================== */
@media (min-width: 783px) {
    .ddp-directory .ddp-search-main {
        gap: 0;
        align-items: stretch;
        border: 1px solid var(--dir-mist);
        border-radius: 4px;
        /* No overflow:hidden here — it would clip the autocomplete list,
           which is absolutely positioned inside this row. Corners are
           rounded on the end pieces instead. */
        background: #fff;
    }

    .ddp-directory .ddp-search-input-wrap,
    .ddp-directory .ddp-ac-wrap {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
    }

    .ddp-directory .ddp-search-input {
        flex: 1 1 auto;
        height: 100%;
        border: 0;
        border-radius: 4px 0 0 4px;
        background: transparent;
        box-shadow: none;
    }
    .ddp-directory .ddp-search-input:focus {
        border: 0;
        box-shadow: none;
    }

    /* Hairline separators between the three segments */
    .ddp-directory .ddp-search-main #ddp-locate-me {
        border: 0;
        border-left: 1px solid var(--dir-mist);
        border-radius: 0;
        height: auto;
        white-space: nowrap;
    }
    .ddp-directory .ddp-search-main #ddp-locate-me:hover,
    .ddp-directory .ddp-search-main #ddp-locate-me:active {
        color: #fff;
        background: var(--dir-ink);
        border-left-color: var(--dir-ink);
    }
    .ddp-directory .ddp-search-main #ddp-locate-me.active {
        color: #fff;
        background: var(--dir-accent);
        border-left-color: var(--dir-accent);
    }

    /* The submit button fills the row edge to edge */
    .ddp-directory .ddp-search-main .ddp-btn-primary {
        border: 0;
        border-radius: 0 4px 4px 0;
        height: auto;
        min-width: 8rem;
        padding-left: 2rem;
        padding-right: 2rem;
        font-size: 1rem;
    }

    /* The filter row keeps its own separated boxes — those are distinct
       choices, not one continuous action. */
    .ddp-directory .ddp-filters-row { gap: .6rem; }
}

/* Below the breakpoint everything stacks, so the segments need their own
   borders and corners back. */
@media (max-width: 782px) {
    .ddp-directory .ddp-search-main {
        border: 0;
        background: transparent;
    }
    .ddp-directory .ddp-search-input {
        border: 1px solid var(--dir-mist);
        border-radius: 3px;
    }
    .ddp-directory .ddp-search-main #ddp-locate-me,
    .ddp-directory .ddp-search-main .ddp-btn-primary {
        border-radius: 3px;
    }
}

/* ===================================================================
   SEARCH PANEL ON BLUE
   The white card cut a bright slab across the hero. Dropping it lets the
   whole block read as one field of navy, with the controls sitting
   directly on it.
   =================================================================== */
.ddp-directory .ddp-hero .ddp-search-header {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    backdrop-filter: none;
}

/* Fields: a 10% white wash over the navy, which stays dark enough for
   white text at AAA while still reading as an input. */
.ddp-directory .ddp-hero .ddp-search-main,
.ddp-directory .ddp-hero .ddp-filters-row .ddp-select,
.ddp-directory .ddp-hero .ddp-filters-row .ddp-btn {
    background-color: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 4px;
}

.ddp-directory .ddp-hero .ddp-search-input,
.ddp-directory .ddp-hero .ddp-search-icon {
    color: #fff;
    background: transparent;
    border: 0;
}
.ddp-directory .ddp-hero .ddp-search-input::placeholder {
    color: #e6ebf2;
    opacity: 1;
}
.ddp-directory .ddp-hero .ddp-search-input:focus {
    border: 0;
    box-shadow: none;
}

.ddp-directory .ddp-hero .ddp-search-main #ddp-locate-me {
    color: #fff;
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, .34);
}
.ddp-directory .ddp-hero .ddp-search-main #ddp-locate-me:hover,
.ddp-directory .ddp-hero .ddp-search-main #ddp-locate-me:active {
    color: var(--dir-ink);
    background: #fff;
}

/* Submit goes gold — blue on blue would disappear now the card is gone. */
.ddp-directory .ddp-hero .ddp-search-main .ddp-btn-primary {
    color: var(--dir-ink);
    background: var(--dir-gold);
    border: 0;
}
.ddp-directory .ddp-hero .ddp-search-main .ddp-btn-primary:hover,
.ddp-directory .ddp-hero .ddp-search-main .ddp-btn-primary:active {
    color: var(--dir-ink);
    background: #fff;
}

.ddp-directory .ddp-hero .ddp-filters-row .ddp-select,
.ddp-directory .ddp-hero .ddp-filters-row .ddp-btn {
    color: #fff;
}
.ddp-directory .ddp-hero .ddp-filters-row .ddp-btn:hover,
.ddp-directory .ddp-hero .ddp-filters-row .ddp-btn:active {
    color: var(--dir-ink);
    background-color: #fff;
}
/* Native dropdown lists inherit the select's colours in most browsers, so a
   translucent select would render white options on near-white. Pin them. */
.ddp-directory .ddp-hero .ddp-filters-row .ddp-select option {
    color: var(--dir-deep);
    background: #fff;
}

.ddp-directory .ddp-hero .ddp-search-input:focus-visible,
.ddp-directory .ddp-hero .ddp-select:focus-visible,
.ddp-directory .ddp-hero .ddp-btn:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

/* The suggestion list still needs a solid surface — a translucent dropdown
   over map tiles and card text is unreadable. */
.ddp-directory .ddp-hero .ddp-ac-list {
    background: #fff;
    border-color: var(--dir-mist);
}

/* ===================================================================
   LANDING BLOCKS — [directory_categories] [directory_featured]
                    [directory_locations]
   These render outside .ddp-directory, so they carry their own tokens.
   Flex row-wrap with explicit widths; never grid.
   =================================================================== */
.ddp-cat-grid, .ddp-feat-grid, .ddp-loc-grid {
    --lb-ink: #1b365d;
    --lb-deep: #003b49;
    --lb-accent: #1d4289;
    --lb-gold: #ffc845;
    --lb-sand: #d6d2c4;
    --lb-mist: #d0d3d4;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.ddp-cols-2 > * { width: calc(50% - .625rem); }
.ddp-cols-3 > * { width: calc(33.333% - .834rem); }
.ddp-cols-4 > * { width: calc(25% - .938rem); }
.ddp-cols-5 > * { width: calc(20% - 1rem); }
.ddp-cols-6 > * { width: calc(16.666% - 1.042rem); }

@media (max-width: 1024px) {
    .ddp-cols-4 > *, .ddp-cols-5 > *, .ddp-cols-6 > * { width: calc(50% - .625rem); }
    .ddp-cols-3 > * { width: calc(50% - .625rem); }
}
@media (max-width: 600px) {
    .ddp-cat-grid > *, .ddp-feat-grid > *, .ddp-loc-grid > * { width: 100%; }
}

/* ---- Category cards ---- */
.ddp-cat-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.25rem;
    border: 1px solid var(--lb-mist);
    border-radius: 4px;
    background: #fff;
    transition: border-color .18s ease;
}
.ddp-cat-card:hover { border-color: var(--lb-accent); }

.ddp-cat-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}
.ddp-cat-head:link, .ddp-cat-head:visited { color: var(--lb-ink); background: transparent; }
.ddp-cat-head:hover, .ddp-cat-head:active { color: var(--lb-accent); background: transparent; }
.ddp-cat-icon { display: inline-flex; color: var(--lb-accent); flex: 0 0 auto; }
.ddp-cat-name { font-size: 1.0625rem; font-weight: 600; flex: 1 1 auto; }
.ddp-cat-count {
    flex: 0 0 auto;
    min-width: 1.9rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    color: var(--lb-deep);
    background: var(--lb-sand);
}
.ddp-cat-desc { margin: 0; font-size: .875rem; line-height: 1.5; color: #46586e; }

.ddp-cat-subs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.ddp-cat-subs a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .5rem;
    border-radius: 3px;
    font-size: .8125rem;
    text-decoration: none;
}
.ddp-cat-subs a:link, .ddp-cat-subs a:visited { color: var(--lb-deep); background: #eef1f5; }
.ddp-cat-subs a:hover, .ddp-cat-subs a:active { color: #fff; background: var(--lb-ink); }
.ddp-sub-count { font-weight: 700; opacity: .75; }

/* ---- Featured listing cards ---- */
.ddp-feat-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lb-mist);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.ddp-feat-card:hover { border-color: var(--lb-accent); transform: translateY(-2px); }

.ddp-feat-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--lb-sand);
    overflow: hidden;
}
.ddp-feat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ddp-feat-media .ddp-card-mono { width: 100%; height: 100%; }

.ddp-feat-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.15rem .9rem; flex: 1 1 auto; }

.ddp-feat-crumb { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .6875rem;
    text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.ddp-feat-crumb a:link, .ddp-feat-crumb a:visited { color: var(--lb-accent); background: transparent; text-decoration: none; }
.ddp-feat-crumb a:hover, .ddp-feat-crumb a:active { color: var(--lb-ink); background: transparent; text-decoration: underline; }
.ddp-feat-crumb span { color: #7a8899; }

.ddp-feat-title { margin: 0; font-size: 1.125rem; line-height: 1.25; font-weight: 600; }
.ddp-feat-title a:link, .ddp-feat-title a:visited { color: var(--lb-ink); background: transparent; text-decoration: none; }
.ddp-feat-title a:hover, .ddp-feat-title a:active { color: var(--lb-accent); background: transparent; text-decoration: underline; }

.ddp-feat-addr { margin: 0; font-size: .8125rem; color: #46586e; }
.ddp-feat-excerpt { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--lb-deep); }
.ddp-feat-attr { margin: 0; font-size: .8125rem; color: var(--lb-deep); }
.ddp-feat-attr-label { font-weight: 700; }

.ddp-feat-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1.15rem; border-top: 1px solid var(--lb-mist); font-size: .8125rem;
}
.ddp-feat-phone:link, .ddp-feat-phone:visited { color: var(--lb-deep); background: transparent; text-decoration: none; }
.ddp-feat-phone:hover, .ddp-feat-phone:active { color: var(--lb-accent); background: transparent; text-decoration: underline; }
.ddp-feat-more { font-weight: 600; }
.ddp-feat-more:link, .ddp-feat-more:visited { color: var(--lb-accent); background: transparent; text-decoration: none; }
.ddp-feat-more:hover, .ddp-feat-more:active { color: var(--lb-ink); background: transparent; text-decoration: underline; }

/* ---- Location cards ---- */
.ddp-loc-card {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--lb-mist);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color .18s ease;
}
.ddp-loc-card:link, .ddp-loc-card:visited { color: var(--lb-ink); background: #fff; }
.ddp-loc-card:hover, .ddp-loc-card:active { color: #fff; background: var(--lb-ink); border-color: var(--lb-ink); }
.ddp-loc-icon { color: var(--lb-accent); }
.ddp-loc-card:hover .ddp-loc-icon, .ddp-loc-card:active .ddp-loc-icon { color: var(--lb-gold); }
.ddp-loc-name { font-size: 1rem; font-weight: 600; }
.ddp-loc-count { font-size: .8125rem; color: #46586e; }
.ddp-loc-card:hover .ddp-loc-count, .ddp-loc-card:active .ddp-loc-count { color: var(--lb-sand); }

.ddp-cat-head:focus-visible, .ddp-cat-subs a:focus-visible,
.ddp-feat-title a:focus-visible, .ddp-feat-more:focus-visible,
.ddp-loc-card:focus-visible {
    outline: 3px solid var(--lb-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ddp-feat-card, .ddp-feat-card:hover { transition: none; transform: none; }
}

/* ===================================================================
   SPLIT VIEW — scrolling results beside a pinned map
   =================================================================== */
.ddp-directory .ddp-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}

.ddp-directory .ddp-split .ddp-results-col {
    flex: 1 1 54%;
    min-width: 0;
    order: 1;
}

.ddp-directory .ddp-split .ddp-map-section {
    flex: 1 1 42%;
    min-width: 0;
    order: 2;
    /* Sticky needs a flex item that doesn't stretch, hence align-self. */
    align-self: flex-start;
    position: sticky;
    top: 1rem;
    margin-bottom: 0;
}
.ddp-directory .ddp-split .ddp-map {
    height: calc(100vh - 8rem);
    min-height: 26rem;
}

/* Two cards per row in the narrower results column */
.ddp-directory .ddp-split .ddp-grid {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* ---- Map tools overlay ---- */
.ddp-map-section { position: relative; }
.ddp-map-tools {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 500; /* above Leaflet panes, below its controls' modals */
    width: min(19rem, calc(100% - 1.5rem));
    padding: .85rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ddp-map-tools-row { display: flex; gap: .4rem; }
.ddp-map-address {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid #d0d3d4;
    border-radius: 4px;
    font: inherit;
    font-size: .9375rem;
    color: #003b49;
    background: #fff;
}
.ddp-map-address::placeholder { color: #4b5764; opacity: 1; }
.ddp-map-locate {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    border: 1px solid #d0d3d4;
    border-radius: 4px;
    cursor: pointer;
}
.ddp-map-locate:link, .ddp-map-locate:visited { color: #1b365d; background: #fff; }
.ddp-map-locate { color: #1b365d; background: #fff; }
.ddp-map-locate:hover, .ddp-map-locate:active { color: #fff; background: #1b365d; }

.ddp-map-radius-label {
    display: block;
    margin: .7rem 0 .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #003b49;
}
.ddp-map-radius { width: 100%; accent-color: #1d4289; }
.ddp-map-radius:disabled { opacity: .5; cursor: not-allowed; }
.ddp-map-tools-hint { margin: .4rem 0 0; font-size: .75rem; color: #4b5764; }

.ddp-map-address:focus-visible,
.ddp-map-locate:focus-visible,
.ddp-map-radius:focus-visible { outline: 3px solid #ffc845; outline-offset: 2px; }

/* Below the breakpoint the columns stack; a sticky full-height map would
   otherwise fill the screen and bury the results. */
@media (max-width: 900px) {
    .ddp-directory .ddp-split .ddp-map-section,
    .ddp-directory .ddp-split .ddp-results-col { flex: 1 1 100%; }
    .ddp-directory .ddp-split .ddp-map-section {
        position: static;
        order: 1;
        margin-bottom: 1.5rem;
    }
    .ddp-directory .ddp-split .ddp-results-col { order: 2; }
    .ddp-directory .ddp-split .ddp-map { height: 22rem; }
    .ddp-map-tools { width: calc(100% - 1.5rem); }
}

/* ===================================================================
   EMPTY STATE SUGGESTIONS
   =================================================================== */
.ddp-directory .ddp-empty-suggestions {
    list-style: none;
    margin: 0 auto 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 40rem;
}
.ddp-directory .ddp-empty-suggestions a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--dir-mist);
    border-radius: 999px;
    font-family: var(--dir-body);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.ddp-directory .ddp-empty-suggestions a:link,
.ddp-directory .ddp-empty-suggestions a:visited { color: var(--dir-ink); background: #fff; }
.ddp-directory .ddp-empty-suggestions a:hover,
.ddp-directory .ddp-empty-suggestions a:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-directory .ddp-empty-suggestions a:focus-visible { outline: 3px solid var(--dir-gold); outline-offset: 2px; }
.ddp-empty-count {
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--dir-deep);
    background: var(--dir-sand);
}
.ddp-directory .ddp-empty-suggestions a:hover .ddp-empty-count,
.ddp-directory .ddp-empty-suggestions a:active .ddp-empty-count { color: var(--dir-ink); background: var(--dir-gold); }