/**
 * 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.
 *
 * v4.83.1 — 2026-09-16 10:45
 */

@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 {
        /* `relative`, not `static`. Static removes the containing block for
           the absolutely positioned map tools, so the Address/Radius panel
           escapes and lands on top of the hero search. Sticky is what needed
           turning off here, not positioning altogether. */
        position: relative;
        top: auto;
        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); }

/* ===================================================================
   ROW RESULTS — the default view
   One line per business: thumbnail, name, categories, town, phone,
   website. Everything needed to choose without opening anything.
   =================================================================== */
.ddp-directory .ddp-view-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.ddp-directory .ddp-view-list .ddp-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    transform: none;
}
.ddp-directory .ddp-view-list .ddp-card:hover {
    border-color: var(--dir-accent);
    transform: none;
}
.ddp-directory .ddp-view-list .ddp-card-featured {
    border-left: 4px solid var(--dir-gold);
}

.ddp-directory .ddp-view-list .ddp-card-image {
    width: 5.5rem;
    height: 5.5rem;
    aspect-ratio: 1;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.ddp-directory .ddp-view-list .ddp-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ddp-directory .ddp-view-list .ddp-card-mono-letters { font-size: 1.5rem; }
/* The Featured ribbon is too big for a thumbnail; the gold spine says it. */
.ddp-directory .ddp-view-list .ddp-badge-featured { display: none; }

.ddp-directory .ddp-view-list .ddp-card-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 0;
    min-width: 0;
}
.ddp-directory .ddp-view-list .ddp-card-title {
    font-size: 1.0625rem;
    line-height: 1.25;
    order: 1;
}
.ddp-directory .ddp-view-list .ddp-card-cats { order: 2; display: flex; flex-wrap: wrap; gap: .3rem; }
.ddp-directory .ddp-view-list .ddp-card-meta { order: 3; }

.ddp-directory .ddp-view-list .ddp-card-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    border: 0;
    padding: 0;
    white-space: nowrap;
}

/* Grid view keeps one category so tiles stay the same height. */
.ddp-directory .ddp-view-grid .ddp-card-cats a:not(:first-child) { display: none; }

.ddp-card-site { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.ddp-card-site:link, .ddp-card-site:visited { color: var(--dir-deep); background: transparent; text-decoration: none; }
.ddp-card-site:hover, .ddp-card-site:active { color: var(--dir-accent); background: transparent; text-decoration: underline; }

/* Stack on phones — three columns at 20rem wide is unreadable. */
@media (max-width: 640px) {
    .ddp-directory .ddp-view-list .ddp-card {
        grid-template-columns: 3.5rem 1fr;
        gap: .75rem;
    }
    .ddp-directory .ddp-view-list .ddp-card-image { width: 3.5rem; height: 3.5rem; }
    .ddp-directory .ddp-view-list .ddp-card-mono-letters { font-size: 1.125rem; }
    .ddp-directory .ddp-view-list .ddp-card-footer {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding-top: .5rem;
        border-top: 1px solid var(--dir-mist);
    }
}

/* ===================================================================
   COMPACT HERO — results pages
   Once someone has searched, the headline and marketing copy have done
   their job. Shrink the block so results start near the top of the
   screen instead of below the fold.
   =================================================================== */
.ddp-directory .ddp-hero-compact {
    padding-top: 1.5rem;
    padding-bottom: 1.25rem;
}
.ddp-directory .ddp-hero-compact .ddp-hero-title {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    margin-bottom: .85rem;
}
/* The subtitle and the category chips are browsing aids, not result aids.
   The chips stay reachable through the category dropdown. */
.ddp-directory .ddp-hero-compact .ddp-hero-subtitle,
.ddp-directory .ddp-hero-compact .ddp-hero-quick-cats,
.ddp-directory .ddp-hero-compact .ddp-hero-eyebrow {
    display: none;
}

/* In split view the map column starts level with the results, not below
   a full-bleed map. */
.ddp-directory .ddp-split .ddp-map-section { margin-top: 0; }

@media (max-width: 640px) {
    .ddp-directory .ddp-hero-compact {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .ddp-directory .ddp-hero-compact .ddp-hero-title { font-size: 1.25rem; }
}

/* ===================================================================
   CLEARING THE SEARCH
   =================================================================== */
.ddp-search-input-wrap { position: relative; }

.ddp-search-clear {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.ddp-search-clear[hidden] { display: none; }
/* On the navy hero the field is translucent, so the control follows suit. */
.ddp-directory .ddp-hero .ddp-search-clear { color: #fff; background: rgba(255, 255, 255, .18); }
.ddp-directory .ddp-hero .ddp-search-clear:hover,
.ddp-directory .ddp-hero .ddp-search-clear:active { color: var(--dir-ink); background: #fff; }
.ddp-search-clear:focus-visible { outline: 3px solid var(--dir-gold); outline-offset: 2px; }

/* Keep the typed text from running underneath the control. */
.ddp-directory .ddp-hero .ddp-search-input { padding-right: 2.6rem; }

.ddp-directory .ddp-clear-all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}
.ddp-directory .ddp-hero .ddp-clear-all:link,
.ddp-directory .ddp-hero .ddp-clear-all:visited { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.34); }
.ddp-directory .ddp-hero .ddp-clear-all:hover,
.ddp-directory .ddp-hero .ddp-clear-all:active { color: var(--dir-ink); background: var(--dir-gold); border-color: var(--dir-gold); }

/* ===================================================================
   MOBILE — map tools sit above the map, not on it
   A 19rem floating panel over a 22rem map covers most of it, and on a
   phone there is no spare width to float into.
   =================================================================== */
@media (max-width: 900px) {
    .ddp-directory .ddp-map-tools {
        position: static;
        width: 100%;
        margin: 0 0 .6rem;
        box-shadow: none;
        border: 1px solid var(--dir-mist);
        background: #fff;
    }
    .ddp-directory .ddp-map-tools-row { gap: .5rem; }
    .ddp-directory .ddp-map-address { font-size: 1rem; } /* 16px stops iOS zooming on focus */
}

/* ===================================================================
   MOBILE SEARCH — tighten the stack
   Every control going full width made the panel taller than the screen.
   =================================================================== */
@media (max-width: 640px) {
    .ddp-directory .ddp-hero .ddp-search-header { padding: .75rem; }
    .ddp-directory .ddp-search-main,
    .ddp-directory .ddp-filters-row { gap: .45rem; }

    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus
       and the visitor then has to pinch back out. */
    .ddp-directory .ddp-search-input,
    .ddp-directory .ddp-select { font-size: 1rem; }

    .ddp-directory .ddp-search-input { padding-top: .8rem; padding-bottom: .8rem; }
    .ddp-directory .ddp-hero .ddp-btn { padding-top: .7rem; padding-bottom: .7rem; }

    /* Near Me and Search share a row instead of taking one each. */
    .ddp-directory .ddp-search-main #ddp-locate-me,
    .ddp-directory .ddp-search-main .ddp-btn-primary {
        flex: 1 1 calc(50% - .25rem);
        min-width: 0;
    }
    .ddp-directory .ddp-search-input-wrap { flex: 1 1 100%; }

    /* Clear all is secondary — let it sit beside More Filters. */
    .ddp-directory .ddp-filters-row > .ddp-more-filters-btn,
    .ddp-directory .ddp-clear-all {
        flex: 1 1 calc(50% - .25rem);
        justify-content: center;
    }
}

/* ===================================================================
   OPENING HOURS
   =================================================================== */
.ddp-hours-field { margin-bottom: 1.25rem; }
.ddp-hours-legend { display: block; font-weight: 600; margin-bottom: .25rem; }
.ddp-hours-hint { margin: 0 0 .75rem; font-size: .8125rem; color: #4b5764; }

.ddp-hours-grid { display: flex; flex-direction: column; gap: .4rem; }
.ddp-hours-row {
    display: grid;
    grid-template-columns: 6.5rem 6rem 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
}
.ddp-hours-day { font-weight: 600; font-size: .9375rem; color: #1b365d; }
.ddp-hours-closed { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: #003b49; }
.ddp-hours-time {
    width: 100%;
    padding: .45rem .55rem;
    border: 1px solid #d0d3d4;
    border-radius: 3px;
    font: inherit;
    font-size: 1rem; /* 16px: below this iOS zooms the page on focus */
    color: #003b49;
    background: #fff;
}
.ddp-hours-time:disabled { opacity: .45; }
.ddp-hours-sep { color: #4b5764; }

@media (max-width: 640px) {
    .ddp-hours-row { grid-template-columns: 1fr 1fr; row-gap: .3rem; }
    .ddp-hours-day { grid-column: 1 / -1; }
    .ddp-hours-closed { grid-column: 1 / -1; }
    .ddp-hours-sep { display: none; }
}

/* ---- Listing page ---- */
.ddp-hours-status {
    margin: 0 0 .6rem;
    font-weight: 700;
    font-size: .9375rem;
}
.ddp-hours-status.ddp-hours-open { color: #0b5531; }
.ddp-hours-status.ddp-hours-closed { color: #8a1c2b; }

.ddp-hours-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ddp-hours-table th,
.ddp-hours-table td { padding: .3rem 0; text-align: left; font-weight: 400; color: #003b49; }
.ddp-hours-table th { width: 45%; }
.ddp-hours-table tr.is-today th,
.ddp-hours-table tr.is-today td { font-weight: 700; color: #1b365d; }

/* ===================================================================
   SINGLE LISTING
   This page was never themed, so it inherited the site's pink accents
   while the directory ran on navy and gold. Same tokens, same buttons,
   both colours declared in every state.
   =================================================================== */
.ddp-single-listing {
    --dir-ink: #1b365d;
    --dir-deep: #003b49;
    --dir-accent: #1d4289;
    --dir-gold: #ffc845;
    --dir-sand: #d6d2c4;
    --dir-mist: #d0d3d4;
    --dir-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dir-display: 'DM Serif Display', Georgia, serif;

    font-family: var(--dir-body);
    max-width: 1240px;
}

/* ---- Breadcrumb ---- */
.ddp-single-listing .ddp-breadcrumb { font-size: .8125rem; color: #4b5764; }
.ddp-single-listing .ddp-breadcrumb a:link,
.ddp-single-listing .ddp-breadcrumb a:visited { color: var(--dir-accent); background: transparent; text-decoration: none; }
.ddp-single-listing .ddp-breadcrumb a:hover,
.ddp-single-listing .ddp-breadcrumb a:active { color: var(--dir-ink); background: transparent; text-decoration: underline; }

/* ---- Header ---- */
.ddp-single-listing .ddp-listing-header {
    border: 1px solid var(--dir-mist);
    border-top: 4px solid var(--dir-ink);
    border-radius: 4px;
    box-shadow: none;
}
.ddp-single-listing .ddp-listing-title {
    font-family: var(--dir-display);
    font-weight: 400;
    color: var(--dir-ink);
    letter-spacing: -0.01em;
}
.ddp-single-listing .ddp-listing-tagline { color: var(--dir-deep); }
.ddp-single-listing .ddp-listing-location,
.ddp-single-listing .ddp-listing-price { color: #46586e; }

/* Category chip: one quiet chip, matching the cards. */
.ddp-single-listing .ddp-listing-badges a:link,
.ddp-single-listing .ddp-listing-badges a:visited {
    color: var(--dir-deep);
    background: var(--dir-sand);
    border-radius: 3px;
    padding: .2rem .55rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.ddp-single-listing .ddp-listing-badges a:hover,
.ddp-single-listing .ddp-listing-badges a:active { color: #fff; background: var(--dir-deep); }
.ddp-single-listing .ddp-badge-featured { color: var(--dir-ink); background: var(--dir-gold); }
.ddp-single-listing .ddp-badge-verified { color: #fff; background: var(--dir-deep); }

/* ---- Header actions: outline icons, one solid primary ---- */
.ddp-single-listing .ddp-action-btn {
    border: 1px solid var(--dir-mist);
    border-radius: 3px;
}
.ddp-single-listing .ddp-action-btn:link,
.ddp-single-listing .ddp-action-btn:visited { color: var(--dir-ink); background: #fff; }
.ddp-single-listing .ddp-action-btn { color: var(--dir-ink); background: #fff; }
.ddp-single-listing .ddp-action-btn:hover,
.ddp-single-listing .ddp-action-btn:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-single-listing .ddp-favorite-btn.active { color: #fff; background: #8a1c2b; border-color: #8a1c2b; }

.ddp-single-listing .ddp-listing-header-actions .ddp-btn:link,
.ddp-single-listing .ddp-listing-header-actions .ddp-btn:visited { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }
.ddp-single-listing .ddp-listing-header-actions .ddp-btn { color: #fff; background: var(--dir-accent); border: 1px solid var(--dir-accent); border-radius: 3px; }
.ddp-single-listing .ddp-listing-header-actions .ddp-btn:hover,
.ddp-single-listing .ddp-listing-header-actions .ddp-btn:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }

/* ---- Content sections and sidebar cards ---- */
.ddp-single-listing .ddp-section,
.ddp-single-listing .ddp-sidebar-card {
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    box-shadow: none;
}
.ddp-single-listing .ddp-section h2,
.ddp-single-listing .ddp-sidebar-card h3 {
    font-family: var(--dir-display);
    font-weight: 400;
    color: var(--dir-ink);
}
.ddp-single-listing .ddp-listing-description { color: var(--dir-deep); line-height: 1.65; }

.ddp-single-listing .ddp-service-tag,
.ddp-single-listing .ddp-amenity-tag {
    color: var(--dir-deep);
    background: #eef1f5;
    border-radius: 3px;
}

/* ---- Buttons throughout ---- */
.ddp-single-listing .ddp-btn-primary:link,
.ddp-single-listing .ddp-btn-primary:visited { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }
.ddp-single-listing .ddp-btn-primary { color: #fff; background: var(--dir-accent); border: 1px solid var(--dir-accent); }
.ddp-single-listing .ddp-btn-primary:hover,
.ddp-single-listing .ddp-btn-primary:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }

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

.ddp-single-listing .ddp-contact-btn {
    border: 1px solid var(--dir-mist);
    border-radius: 3px;
}
.ddp-single-listing .ddp-contact-btn:link,
.ddp-single-listing .ddp-contact-btn:visited { color: var(--dir-ink); background: #fff; text-decoration: none; }
.ddp-single-listing .ddp-contact-btn:hover,
.ddp-single-listing .ddp-contact-btn:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
/* Phone is the action most people want — give it the weight. */
.ddp-single-listing .ddp-contact-phone:link,
.ddp-single-listing .ddp-contact-phone:visited { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }
.ddp-single-listing .ddp-contact-phone:hover,
.ddp-single-listing .ddp-contact-phone:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }

/* ---- Form ---- */
.ddp-single-listing input,
.ddp-single-listing textarea {
    border: 1px solid var(--dir-mist);
    border-radius: 3px;
    font-family: var(--dir-body);
    font-size: 1rem;
    color: var(--dir-deep);
}
.ddp-single-listing input:focus-visible,
.ddp-single-listing textarea:focus-visible,
.ddp-single-listing .ddp-btn:focus-visible,
.ddp-single-listing .ddp-action-btn:focus-visible,
.ddp-single-listing a:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

/* ---- Stats ---- */
.ddp-single-listing .ddp-mini-stat-value { color: var(--dir-accent); font-weight: 700; }
.ddp-single-listing .ddp-mini-stat-label {
    color: #46586e;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .6875rem;
}
.ddp-single-listing .ddp-mini-stat {
    border: 1px solid var(--dir-mist);
    border-radius: 3px;
    background: #fff;
}

/* ---- Map ---- */
.ddp-single-listing #ddp-single-map { border-radius: 3px; border: 1px solid var(--dir-mist); }

/* Sidebar follows the page down on wide screens. */
@media (min-width: 1024px) {
    .ddp-single-listing .ddp-content-sidebar {
        position: sticky;
        top: 1.5rem;
        align-self: flex-start;
    }
}

/* ===================================================================
   LISTING FORMS (add / edit)
   Same story as the listing page: the markup already uses ddp-btn-primary
   and ddp-btn-outline, but nothing themed .ddp-form-page, so the site's
   crimson won on the cascade. Every state declares both colours.
   =================================================================== */
.ddp-form-page {
    --dir-ink: #1b365d;
    --dir-deep: #003b49;
    --dir-accent: #1d4289;
    --dir-gold: #ffc845;
    --dir-sand: #d6d2c4;
    --dir-mist: #d0d3d4;
    --dir-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dir-display: 'DM Serif Display', Georgia, serif;
    font-family: var(--dir-body);
}

.ddp-form-page .ddp-form-header h1 {
    font-family: var(--dir-display);
    font-weight: 400;
    color: var(--dir-ink);
}
.ddp-form-page .ddp-form-header a:link,
.ddp-form-page .ddp-form-header a:visited { color: var(--dir-accent); background: transparent; text-decoration: none; }
.ddp-form-page .ddp-form-header a:hover,
.ddp-form-page .ddp-form-header a:active { color: var(--dir-ink); background: transparent; text-decoration: underline; }

.ddp-form-page .ddp-form-section {
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    box-shadow: none;
}
.ddp-form-page .ddp-form-section h2 {
    font-family: var(--dir-display);
    font-weight: 400;
    font-size: 1.375rem;
    color: var(--dir-ink);
    border-bottom: 1px solid var(--dir-mist);
}
/* The admin-only block should read as different from the owner's fields. */
.ddp-form-page .ddp-admin-section { border-left: 4px solid var(--dir-gold); }

.ddp-form-page label { color: var(--dir-deep); font-weight: 600; font-size: .875rem; }

.ddp-form-page .ddp-input,
.ddp-form-page .ddp-select,
.ddp-form-page .ddp-textarea,
.ddp-form-page input[type="text"],
.ddp-form-page input[type="url"],
.ddp-form-page input[type="email"],
.ddp-form-page input[type="tel"],
.ddp-form-page input[type="time"],
.ddp-form-page textarea,
.ddp-form-page select {
    border: 1px solid var(--dir-mist);
    border-radius: 3px;
    font-family: var(--dir-body);
    font-size: 1rem; /* 16px keeps iOS from zooming on focus */
    color: var(--dir-deep);
    background: #fff;
}
.ddp-form-page .ddp-input:focus,
.ddp-form-page .ddp-select:focus,
.ddp-form-page .ddp-textarea:focus,
.ddp-form-page input:focus,
.ddp-form-page textarea:focus,
.ddp-form-page select:focus {
    border-color: var(--dir-accent);
    box-shadow: 0 0 0 3px rgba(29, 66, 137, .12);
    outline: none;
}
.ddp-form-page :focus-visible { outline: 3px solid var(--dir-gold); outline-offset: 2px; }

/* ---- Buttons ---- */
.ddp-form-page .ddp-btn { border-radius: 3px; font-family: var(--dir-body); font-weight: 600; }

.ddp-form-page .ddp-btn-primary:link,
.ddp-form-page .ddp-btn-primary:visited { color: #fff; background: var(--dir-accent); border-color: var(--dir-accent); }
.ddp-form-page .ddp-btn-primary { color: #fff; background: var(--dir-accent); border: 1px solid var(--dir-accent); }
.ddp-form-page .ddp-btn-primary:hover,
.ddp-form-page .ddp-btn-primary:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-form-page .ddp-btn-primary:disabled { color: #fff; background: #4d5968; border-color: #4d5968; cursor: not-allowed; }

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

/* Save is the primary action on the page — give it the weight and keep it
   visually ahead of View Listing. */
.ddp-form-page .ddp-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    padding-top: .5rem;
}
.ddp-form-page .ddp-form-actions .ddp-btn-lg { padding: .85rem 2rem; font-size: 1rem; }

/* ---- Upload areas ---- */
.ddp-form-page .ddp-upload-area {
    border: 2px dashed var(--dir-mist);
    border-radius: 4px;
    color: var(--dir-accent);
    background: #fafbfc;
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease;
}
.ddp-form-page .ddp-upload-area:hover { border-color: var(--dir-accent); background: #eef1f7; }

/* ---- Collapsible sections ---- */
.ddp-form-page .ddp-collapsible-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ddp-form-page .ddp-collapse-icon {
    font-family: var(--dir-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--dir-accent);
}

/* ---- WordPress editor tabs ---- */
.ddp-form-page .wp-switch-editor {
    font-family: var(--dir-body) !important;
    border-radius: 3px 3px 0 0 !important;
    color: var(--dir-ink) !important;
    background: #eef1f5 !important;
    border-color: var(--dir-mist) !important;
}
.ddp-form-page .wp-editor-tabs .switch-tmce.active,
.ddp-form-page .wp-editor-tabs .switch-html.active {
    color: #fff !important;
    background: var(--dir-accent) !important;
    border-color: var(--dir-accent) !important;
}
.ddp-form-page .wp-editor-container { border: 1px solid var(--dir-mist); border-radius: 0 3px 3px 3px; }

@media (max-width: 640px) {
    .ddp-form-page .ddp-form-actions .ddp-btn-lg { flex: 1 1 100%; text-align: center; }
}

/* ---- Photo controls ----
   The remove buttons already existed but inherited the theme's crimson
   outline, which read as an error rather than a control. */
.ddp-form-page .ddp-upload-preview,
.ddp-form-page .ddp-gallery-item {
    position: relative;
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}
.ddp-form-page .ddp-upload-preview img,
.ddp-form-page .ddp-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ddp-form-page .ddp-remove-img,
.ddp-form-page .ddp-gallery-remove {
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    /* Dark scrim so the control is visible over a light or busy photo. */
    color: #fff;
    background: rgba(27, 54, 93, .82);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    transition: background-color .15s ease;
}
.ddp-form-page .ddp-remove-img:hover,
.ddp-form-page .ddp-remove-img:active,
.ddp-form-page .ddp-gallery-remove:hover,
.ddp-form-page .ddp-gallery-remove:active {
    color: #fff;
    background: #8a1c2b; /* red only on hover — removal is destructive */
}
.ddp-form-page .ddp-remove-img:focus-visible,
.ddp-form-page .ddp-gallery-remove:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

.ddp-form-page .ddp-gallery-add {
    border: 2px dashed var(--dir-mist);
    border-radius: 4px;
    color: var(--dir-accent);
    background: #fafbfc;
    font-weight: 600;
}
.ddp-form-page .ddp-gallery-add:hover { border-color: var(--dir-accent); background: #eef1f7; }

@media (prefers-reduced-motion: reduce) {
    .ddp-form-page .ddp-remove-img,
    .ddp-form-page .ddp-gallery-remove,
    .ddp-form-page .ddp-upload-area { transition: none; }
}

/* ===================================================================
   BUSINESS HOURS TABLE
   The container carries white-space: pre-line for the old free-text
   hours. With a table inside, every newline between the <tr> tags in the
   source rendered as a line break — which staggered the times down the
   page and opened a gap under the heading.
   =================================================================== */
.ddp-single-listing .ddp-hours { white-space: normal; line-height: 1.5; }
.ddp-single-listing .ddp-hours-legacy { white-space: pre-line; line-height: 1.8; }

.ddp-single-listing .ddp-hours-status {
    display: inline-block;
    margin: 0 0 .75rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
}
.ddp-single-listing .ddp-hours-status.ddp-hours-open { color: #fff; background: #0b5531; }
.ddp-single-listing .ddp-hours-status.ddp-hours-closed { color: #fff; background: #8a1c2b; }

.ddp-single-listing .ddp-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    table-layout: fixed;
}
.ddp-single-listing .ddp-hours-table th,
.ddp-single-listing .ddp-hours-table td {
    padding: .45rem .25rem;
    vertical-align: baseline;   /* stop the times sitting below the day */
    border: 0;
    border-bottom: 1px solid #edeff1;
    background: transparent;
    line-height: 1.4;
}
.ddp-single-listing .ddp-hours-table tr:last-child th,
.ddp-single-listing .ddp-hours-table tr:last-child td { border-bottom: 0; }

.ddp-single-listing .ddp-hours-table th {
    width: 42%;
    text-align: left;
    font-weight: 500;
    color: #46586e;
    white-space: nowrap;
}
.ddp-single-listing .ddp-hours-table td {
    text-align: right;
    color: var(--dir-deep);
    font-variant-numeric: tabular-nums; /* times line up column-wise */
}

/* Today's row reads first without shouting. */
.ddp-single-listing .ddp-hours-table tr.is-today th,
.ddp-single-listing .ddp-hours-table tr.is-today td {
    font-weight: 700;
    color: var(--dir-ink);
    background: #f3f6fa;
}
.ddp-single-listing .ddp-hours-table tr.is-today th { border-left: 3px solid var(--dir-gold); padding-left: .5rem; }

/* ===================================================================
   FORM BUTTONS — forced
   Block themes style bare <button> and <a class="button"> through global
   rules, several with !important. A class selector alone loses, which is
   why Save Changes stayed crimson. Match on the element as well and force
   the colours, declaring background AND text together in every state.
   =================================================================== */
.ddp-form-page button.ddp-btn-primary,
.ddp-form-page input[type="submit"].ddp-btn-primary,
.ddp-form-page a.ddp-btn-primary:link,
.ddp-form-page a.ddp-btn-primary:visited {
    color: #fff !important;
    background-color: #1d4289 !important;
    background-image: none !important;
    border: 1px solid #1d4289 !important;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.ddp-form-page button.ddp-btn-primary:hover,
.ddp-form-page button.ddp-btn-primary:active,
.ddp-form-page a.ddp-btn-primary:hover,
.ddp-form-page a.ddp-btn-primary:active {
    color: #fff !important;
    background-color: #1b365d !important;
    border-color: #1b365d !important;
}
.ddp-form-page button.ddp-btn-primary:disabled {
    color: #fff !important;
    background-color: #4d5968 !important;
    border-color: #4d5968 !important;
}

.ddp-form-page a.ddp-btn-outline:link,
.ddp-form-page a.ddp-btn-outline:visited,
.ddp-form-page button.ddp-btn-outline {
    color: #1b365d !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #d0d3d4 !important;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.ddp-form-page a.ddp-btn-outline:hover,
.ddp-form-page a.ddp-btn-outline:active,
.ddp-form-page button.ddp-btn-outline:hover,
.ddp-form-page button.ddp-btn-outline:active {
    color: #fff !important;
    background-color: #1b365d !important;
    border-color: #1b365d !important;
}

/* Same treatment for the single listing page, for the same reason. */
.ddp-single-listing button.ddp-btn-primary,
.ddp-single-listing a.ddp-btn-primary:link,
.ddp-single-listing a.ddp-btn-primary:visited {
    color: #fff !important;
    background-color: #1d4289 !important;
    border: 1px solid #1d4289 !important;
    text-decoration: none !important;
}
.ddp-single-listing button.ddp-btn-primary:hover,
.ddp-single-listing button.ddp-btn-primary:active,
.ddp-single-listing a.ddp-btn-primary:hover,
.ddp-single-listing a.ddp-btn-primary:active {
    color: #fff !important;
    background-color: #1b365d !important;
    border-color: #1b365d !important;
}
.ddp-single-listing button.ddp-action-btn {
    color: #1b365d !important;
    background-color: #fff !important;
    border: 1px solid #d0d3d4 !important;
}
.ddp-single-listing button.ddp-action-btn:hover,
.ddp-single-listing button.ddp-action-btn:active {
    color: #fff !important;
    background-color: #1b365d !important;
    border-color: #1b365d !important;
}

/* ===================================================================
   FRONTEND LISTINGS MANAGER — [manage_listings]
   =================================================================== */
.ddp-manage-listings { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.ddp-ml-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
.ddp-ml-head h1 { font-family: var(--dir-display); font-weight: 400; color: #1b365d; margin: 0; }

/* Status tabs double as counts, so the numbers are the navigation. */
.ddp-ml-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.ddp-ml-stat {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem 1rem; border: 1px solid #d0d3d4; border-radius: 4px;
    text-decoration: none; min-width: 5.5rem;
}
.ddp-ml-stat:link, .ddp-ml-stat:visited { color: #1b365d; background: #fff; }
.ddp-ml-stat:hover, .ddp-ml-stat:active { color: #fff; background: #1b365d; border-color: #1b365d; }
.ddp-ml-stat.is-active { color: #fff; background: #1d4289; border-color: #1d4289; }
.ddp-ml-stat-num { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.ddp-ml-stat-label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

.ddp-ml-filters, .ddp-ml-bulk {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
}
.ddp-ml-filters .ddp-input { flex: 1 1 14rem; min-width: 0; }
.ddp-ml-selected { font-size: .875rem; font-weight: 600; color: #1d4289; }

.ddp-ml-table-wrap { overflow-x: auto; border: 1px solid #d0d3d4; border-radius: 4px; background: #fff; }
.ddp-ml-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ddp-ml-table th, .ddp-ml-table td {
    padding: .6rem .7rem; text-align: left; vertical-align: middle;
    border-bottom: 1px solid #edeff1;
}
.ddp-ml-table thead th {
    background: #f3f6fa; color: #1b365d; font-weight: 700;
    font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
}
.ddp-ml-table thead th a:link, .ddp-ml-table thead th a:visited { color: #1b365d; background: transparent; text-decoration: none; }
.ddp-ml-table thead th a:hover, .ddp-ml-table thead th a:active { color: #1d4289; background: transparent; text-decoration: underline; }
.ddp-ml-table tbody tr:hover { background: #f9fbfd; }
.ddp-ml-table tbody tr:last-child td { border-bottom: 0; }

.ddp-ml-check { width: 2.25rem; }
.ddp-ml-thumb { width: 3.25rem; }
.ddp-ml-thumb img, .ddp-ml-thumb .ddp-card-mono {
    width: 2.75rem; height: 2.75rem; border-radius: 3px; object-fit: cover; display: block;
}
.ddp-ml-thumb .ddp-card-mono-letters { font-size: .9375rem; }

.ddp-ml-name a:link, .ddp-ml-name a:visited { color: #1b365d; background: transparent; font-weight: 600; text-decoration: none; }
.ddp-ml-name a:hover, .ddp-ml-name a:active { color: #1d4289; background: transparent; text-decoration: underline; }
.ddp-ml-flag {
    display: inline-block; margin-left: .4rem; padding: .05rem .4rem;
    border-radius: 3px; font-size: .625rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: #1b365d; background: #ffc845;
}

.ddp-ml-status {
    display: inline-block; padding: .15rem .5rem; border-radius: 999px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.ddp-ml-status-publish { color: #fff; background: #0b5531; }
.ddp-ml-status-draft   { color: #1b365d; background: #d6d2c4; }
.ddp-ml-status-pending { color: #1b365d; background: #ffc845; }
.ddp-ml-status-trash   { color: #fff; background: #8a1c2b; }

.ddp-ml-actions { white-space: nowrap; }
.ddp-ml-action {
    display: inline-block; margin-right: .35rem; padding: .25rem .5rem;
    border: 1px solid #d0d3d4; border-radius: 3px; background: #fff;
    font-family: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
.ddp-ml-action:link, .ddp-ml-action:visited { color: #1b365d; background: #fff; }
.ddp-ml-action:hover, .ddp-ml-action:active { color: #fff; background: #1b365d; border-color: #1b365d; }
.ddp-ml-action:disabled { opacity: .5; cursor: not-allowed; }
.ddp-ml-delete:hover, .ddp-ml-delete:active { color: #fff; background: #8a1c2b; border-color: #8a1c2b; }
.ddp-ml-action:focus-visible { outline: 3px solid #ffc845; outline-offset: 2px; }

.ddp-ml-count { margin-top: .75rem; font-size: .8125rem; color: #46586e; }
.ddp-ml-pagination { margin-top: 1.25rem; }
.ddp-ml-empty { padding: 2.5rem 1rem; text-align: center; border: 1px dashed #d0d3d4; border-radius: 4px; }

/* Toast sits above everything, including a sticky header. */
.ddp-ml-toast {
    position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
    z-index: 9999; padding: .7rem 1.2rem; border-radius: 4px;
    font-size: .875rem; font-weight: 600;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5);
}
.ddp-ml-toast[hidden] { display: none; }
.ddp-ml-toast.is-ok { color: #fff; background: #1b365d; }
.ddp-ml-toast.is-error { color: #fff; background: #8a1c2b; }

@media (max-width: 782px) {
    .ddp-ml-hide-sm { display: none; }
    .ddp-ml-table th, .ddp-ml-table td { padding: .5rem .4rem; }
    .ddp-ml-actions { white-space: normal; }
    .ddp-ml-action { margin-bottom: .25rem; }
}

/* Update-listings panel */
.ddp-check-line { display: flex; align-items: center; gap: .45rem; margin: .75rem 0; font-size: .9375rem; }
.ddp-update-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Logo fetch progress + log */
.ddp-logo-progress { margin-top: .9rem; }
.ddp-logo-progress .ddp-bar { height: 10px; background: #d0d3d4; border-radius: 999px; overflow: hidden; }
.ddp-logo-progress .ddp-bar span { display: block; height: 100%; width: 0; background: #1d4289; transition: width .25s ease; }
.ddp-logo-progress p { margin: .5rem 0 0; font-size: .875rem; color: #003b49; }

.ddp-logo-log {
    margin-top: .75rem; max-height: 16rem; overflow-y: auto;
    border: 1px solid #d0d3d4; border-radius: 4px; background: #fff;
    font-size: .8125rem;
}
.ddp-logo-row { padding: .4rem .6rem; border-bottom: 1px solid #edeff1; color: #003b49; }
.ddp-logo-row:last-child { border-bottom: 0; }
.ddp-logo-row strong { color: #1b365d; }
.ddp-logo-row.is-ok { border-left: 3px solid #0b5531; }
.ddp-logo-row.is-failed { border-left: 3px solid #8a1c2b; }
.ddp-logo-row.is-skipped { border-left: 3px solid #d0d3d4; }

/* ===================================================================
   MOBILE RESULTS — listings first, map and search on demand
   Someone who has already searched wants the results. On a phone the
   search panel and a full map push them below two screens of chrome.
   =================================================================== */
.ddp-mobile-toggle { display: none; }

.ddp-directory .ddp-mobile-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin: 0 0 .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    font-family: var(--dir-body);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.ddp-directory .ddp-mobile-toggle span { flex: 1 1 auto; }
.ddp-directory .ddp-toggle-chevron { transition: transform .2s ease; flex: 0 0 auto; }
.ddp-directory .ddp-mobile-toggle[aria-expanded="true"] .ddp-toggle-chevron { transform: rotate(180deg); }
.ddp-directory .ddp-hero .ddp-mobile-toggle {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .34);
    margin-bottom: 0;
}
.ddp-directory .ddp-hero .ddp-mobile-toggle:hover,
.ddp-directory .ddp-hero .ddp-mobile-toggle:active {
    color: var(--dir-ink);
    background: #fff;
    border-color: #fff;
}
.ddp-directory .ddp-map-toggle { color: var(--dir-ink); background: #fff; }
.ddp-directory .ddp-map-toggle:hover,
.ddp-directory .ddp-map-toggle:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-directory .ddp-mobile-toggle:focus-visible { outline: 3px solid var(--dir-gold); outline-offset: 2px; }
.ddp-directory .is-collapsed { display: none !important; }

/* The toggle sits centred under the hero copy, not stretched across it. */
.ddp-directory .ddp-hero .ddp-mobile-toggle { max-width: 22rem; margin-inline: auto; }
.ddp-directory .ddp-map-toggle { max-width: 22rem; }

@media (max-width: 782px) {
    /* Full-bleed on a phone; the base rules above cover everything else. */
    .ddp-directory .ddp-mobile-toggle,
    .ddp-directory .ddp-hero .ddp-mobile-toggle,
    .ddp-directory .ddp-map-toggle { max-width: none; }


    /* Collapsed panels. display:none rather than height:0 so Leaflet does not
       try to size a hidden map — it needs invalidateSize() on reveal, which
       the JS handles. */
    .ddp-directory .is-collapsed { display: none !important; }

    /* Hero shrinks further once the form is behind a toggle. */
    .ddp-directory .ddp-hero-compact { padding-top: .85rem; padding-bottom: .85rem; }
    .ddp-directory .ddp-hero-compact .ddp-hero-title { margin-bottom: .6rem; }

    /* Listings before the map in the split layout. */
    .ddp-directory .ddp-split .ddp-results-col { order: 1; }
    .ddp-directory .ddp-split .ddp-map-section { order: 2; margin-top: 1rem; margin-bottom: 0; }
    .ddp-directory .ddp-split .ddp-map-toggle { order: 2; }
}

/* ===================================================================
   DESKTOP — mobile toggles must never appear
   Stated as an explicit min-width rule as well as the base one, so it
   cannot lose to source order, a cached stylesheet or a theme rule.
   =================================================================== */
/* Toggles now apply at every screen size, so no desktop override. The rule
   that force-hid them and force-expanded the panels above 782px has been
   removed — it would have fought the collapse on desktop. */

/* ===================================================================
   LISTING HERO IMAGE
   One fixed-shape pane, full column width, on every listing. The
   template classes the section ddp-hero-cover (a real photo: fill and
   crop) or ddp-hero-contain (a logo or small file: natural size, whole
   image visible). Behind either sits a blurred, dimmed copy of the same
   image, so a contained logo floats on its own colours rather than in an
   empty grey box — and the pane is never narrower than its column, which
   the old aspect-ratio + max-height pair silently made it.
   =================================================================== */
.ddp-single-listing .ddp-gallery-main {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(240px, 38vw, 440px);
    padding: 0;
    background: #e9eef4;
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
}
.ddp-single-listing .ddp-gallery-backdrop {
    position: absolute;
    inset: -24px;
    background-position: center;
    background-size: cover;
    filter: blur(22px) saturate(1.1);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
}
.ddp-single-listing .ddp-gallery-main > img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ddp-single-listing .ddp-hero-contain .ddp-gallery-main > img {
    object-fit: contain;
    padding: 1.25rem;
    box-sizing: border-box;
}
/* Controls sit above both layers. */
.ddp-single-listing .ddp-gallery-main .ddp-gallery-arrow,
.ddp-single-listing .ddp-gallery-main .ddp-gallery-play,
.ddp-single-listing .ddp-gallery-main .ddp-gallery-counter,
.ddp-single-listing .ddp-gallery-main .ddp-gallery-zoom { z-index: 3; }

/* Thumbnails below the hero */
.ddp-single-listing .ddp-gallery-thumbs img {
    object-fit: contain;
    background: #f3f6fa;
}

@media (max-width: 640px) {
    .ddp-single-listing .ddp-gallery-main { height: clamp(200px, 56vw, 320px); }
    .ddp-single-listing .ddp-hero-contain .ddp-gallery-main > img { padding: .75rem; }
}

/* ===================================================================
   CARD IMAGES — logos vs photos
   Cards crop to fill, which is right for a storefront photo and wrong
   for a logo: Tripps Plumbing's wide logo was zoomed until only the
   middle of the pipe fitting showed. Fit the whole image instead and
   sit it on a neutral tint so the letterboxing looks deliberate.
   =================================================================== */
.ddp-directory .ddp-card-image img,
.ddp-feat-media img {
    object-fit: contain;
    background: #f3f6fa;
}
/* No zoom-on-hover either — magnifying a logo just crops it further. */
.ddp-directory .ddp-card:hover .ddp-card-image img { transform: none; }

/* ===================================================================
   NO STRAY UNDERLINES
   Block themes underline every <a> globally. Cards wrap their image in
   a link, so the monogram letters were underlined; so were the category
   chips, the town name and the Add Business button. Underline belongs on
   text links, not on tiles and buttons.
   =================================================================== */
/* The card image IS the anchor (a.ddp-card-image), not a child of one.
   This distinction matters: text-decoration propagates from the element
   that sets it, and a descendant cannot cancel an ancestor's underline.
   The rule has to land on the anchor itself. */
.ddp-directory a.ddp-card-image,
.ddp-directory a.ddp-card-media,
.ddp-directory a.ddp-feat-media,
.ddp-directory a.ddp-card-category,
.ddp-directory .ddp-card-cats a,
.ddp-directory .ddp-card-meta a,
.ddp-directory .ddp-badge,
.ddp-directory a.ddp-btn,
.ddp-directory button.ddp-btn,
.ddp-directory .ddp-mobile-toggle,
.ddp-directory .ddp-view-btn,
.ddp-directory a.ddp-clear-filters,
.ddp-directory a.ddp-quick-cat,
.ddp-directory a.ddp-card-link,
.ddp-directory a.ddp-card-phone,
.ddp-directory a.ddp-card-site,
.ddp-feat-media,
.ddp-loc-card,
.ddp-cat-head {
    text-decoration: none !important;
}
/* The monogram is decorative type inside a link — never underline it. */
.ddp-card-mono,
.ddp-card-mono-letters {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* Chips are labels, so keep the underline off in every state. */
.ddp-directory a.ddp-card-category:link,
.ddp-directory a.ddp-card-category:visited,
.ddp-directory a.ddp-card-category:hover,
.ddp-directory a.ddp-card-category:active { text-decoration: none !important; }

/* Add Business is a button; it should not read as a text link. */
.ddp-directory a.ddp-btn:link,
.ddp-directory a.ddp-btn:visited,
.ddp-directory a.ddp-btn:hover,
.ddp-directory a.ddp-btn:active { text-decoration: none !important; }

/* Card titles keep their underline on hover only — that one is useful. */
.ddp-directory .ddp-card-title a:hover,
.ddp-directory .ddp-card-title a:active { text-decoration: underline !important; }

/* ===================================================================
   RESULTS HEADER TIDY-UP
   The map toggle was a full-width block above a separate results row,
   which read as two unrelated bars.
   =================================================================== */
.ddp-directory .ddp-map-toggle {
    display: inline-flex;
    width: auto;
    max-width: none;
    margin-bottom: 1rem;
}

@media (max-width: 782px) {
    .ddp-directory .ddp-map-toggle { display: flex; width: 100%; }
}

/* ===================================================================
   TERM PAGE HEADER
   A category page was showing a title and nothing else. It now carries
   the count, the term's own description, and its children as links.
   =================================================================== */
.ddp-directory .ddp-hero-count {
    margin: 0 0 .5rem;
    font-family: var(--dir-body);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dir-gold);
}
.ddp-directory .ddp-hero-compact .ddp-hero-count { display: block; }

/* ---- Subcategory chips ---- */
.ddp-subcats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1.25rem;
    font-family: var(--dir-body);
}
.ddp-subcat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--dir-mist);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none !important;
}
.ddp-subcat:link, .ddp-subcat:visited { color: var(--dir-ink); background: #fff; }
.ddp-subcat:hover, .ddp-subcat:active { color: #fff; background: var(--dir-ink); border-color: var(--dir-ink); }
.ddp-subcat:focus-visible { outline: 3px solid var(--dir-gold); outline-offset: 2px; }

.ddp-subcat-count {
    font-size: .6875rem;
    font-weight: 700;
    padding: 0 .35rem;
    border-radius: 999px;
    color: var(--dir-deep);
    background: var(--dir-sand);
}
.ddp-subcat:hover .ddp-subcat-count,
.ddp-subcat:active .ddp-subcat-count { color: var(--dir-ink); background: var(--dir-gold); }

/* Long lists of children stay one scannable band rather than four rows. */
@media (min-width: 783px) {
    .ddp-subcats { max-height: 6.5rem; overflow: hidden; }
    .ddp-subcats.is-open { max-height: none; }
}

/* ---- One control row, not two ---- */
.ddp-directory .ddp-map-toggle { margin-bottom: 0; }
.ddp-directory .ddp-results-bar { gap: .75rem; }

/* The toggle is a real child of the results bar now, so it just needs to
   sit first in the flex row — no negative-margin trickery. */
.ddp-directory .ddp-results-bar .ddp-map-toggle {
    order: -1;
    margin: 0;
    flex: 0 0 auto;
}
@media (max-width: 782px) {
    .ddp-directory .ddp-results-bar .ddp-map-toggle { flex: 1 1 100%; }
}

/* ===================================================================
   SIDE MAP RAIL
   Results take the bulk of the width; the map is a narrower sticky rail
   on the right. The earlier 54/42 split gave the map almost as much
   room as the listings, which is backwards — people came for the
   listings.
   =================================================================== */
@media (min-width: 1180px) {
    .ddp-directory .ddp-split { align-items: flex-start; gap: 1.5rem; }

    /* A fixed rail rather than percentages. 68% + 30% plus a 1.5rem gap adds
       up to more than 100%, so the map wrapped onto its own line below the
       listings — which is exactly what it was doing. */
    .ddp-directory .ddp-split .ddp-results-col {
        flex: 1 1 48%;
        max-width: 50%;
        min-width: 0;
        order: 1;
    }
    .ddp-directory .ddp-split .ddp-map-section {
        /* Half the width, matching the reference. Percentage rather than a
           viewport breakout: extending to the screen edge with 50vw counts
           the scrollbar and produces a horizontal scroll on Windows. */
        flex: 1 1 48%;
        max-width: 48%;
        min-width: 0;
        order: 2;
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        margin: 0;
    }
    /* Full height, like the reference — a map this wide earns the space. */
    .ddp-directory .ddp-split .ddp-map {
        height: calc(100vh - 4rem);
        min-height: 32rem;
    }

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

    /* Hiding the map gives the space back rather than leaving a gap. The
       class is set on the container by the toggle, so this does not depend
       on the two columns being adjacent in the markup. */
    .ddp-directory .ddp-split.ddp-map-hidden .ddp-results-col {
        flex-basis: 100%;
        max-width: 100%;
    }
    /* Guard against a wrap: if anything ever pushes the total over 100%,
       nowrap keeps the rail beside the listings instead of below them. */
    .ddp-directory .ddp-split { flex-wrap: nowrap; }
}

/* Between tablet and desktop the rail is too narrow to be useful. */
@media (min-width: 783px) and (max-width: 1179px) {
    .ddp-directory .ddp-split .ddp-results-col,
    .ddp-directory .ddp-split .ddp-map-section { flex: 1 1 100%; max-width: 100%; }
    .ddp-directory .ddp-split .ddp-map-section { position: static; order: 2; margin-top: 1rem; }
    .ddp-directory .ddp-split .ddp-map { height: 24rem; }
}

/* ===================================================================
   PLAIN RESULTS HEADER
   The navy block earned its place on the landing view, where it frames
   the search and the category chips. On a results page it carried a
   title and a count, so it was a large coloured slab saying very little.
   =================================================================== */
.ddp-directory .ddp-hero-plain {
    background: transparent;
    border-bottom: 1px solid var(--dir-mist);
    border-radius: 0;
    padding: 1.25rem 0 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
}
.ddp-directory .ddp-hero-plain .ddp-hero-content {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
}
.ddp-directory .ddp-hero-plain .ddp-hero-title {
    color: var(--dir-ink);
    text-align: left;
    margin-inline: 0;
    max-width: none;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
}
.ddp-directory .ddp-hero-plain .ddp-hero-count {
    color: var(--dir-deep);
    text-align: left;
}
.ddp-directory .ddp-hero-plain .ddp-hero-subtitle {
    color: #46586e;
    text-align: left;
    margin-inline: 0;
    max-width: 70ch;
}

/* The search toggle becomes an ordinary outline control on white. */
.ddp-directory .ddp-hero-plain .ddp-mobile-toggle {
    margin: .85rem 0 0;
    max-width: 20rem;
}
.ddp-directory .ddp-hero-plain .ddp-mobile-toggle:link,
.ddp-directory .ddp-hero-plain .ddp-mobile-toggle:visited,
.ddp-directory .ddp-hero-plain .ddp-mobile-toggle {
    color: var(--dir-ink);
    background: #fff;
    border-color: var(--dir-mist);
}
.ddp-directory .ddp-hero-plain .ddp-mobile-toggle:hover,
.ddp-directory .ddp-hero-plain .ddp-mobile-toggle:active {
    color: #fff;
    background: var(--dir-ink);
    border-color: var(--dir-ink);
}

/* The expanded panel needs light-surface styling too, since it was drawn
   for the navy hero. */
.ddp-directory .ddp-hero-plain .ddp-search-header {
    background: #fff;
    border: 1px solid var(--dir-mist);
    border-radius: 4px;
    padding: .85rem;
    margin-top: .75rem;
    box-shadow: none;
}
.ddp-directory .ddp-hero-plain .ddp-search-main,
.ddp-directory .ddp-hero-plain .ddp-filters-row .ddp-select,
.ddp-directory .ddp-hero-plain .ddp-filters-row .ddp-btn {
    background-color: #fff;
    border-color: var(--dir-mist);
}
.ddp-directory .ddp-hero-plain .ddp-search-input,
.ddp-directory .ddp-hero-plain .ddp-search-icon,
.ddp-directory .ddp-hero-plain .ddp-filters-row .ddp-select,
.ddp-directory .ddp-hero-plain .ddp-filters-row .ddp-btn { color: var(--dir-deep); }
.ddp-directory .ddp-hero-plain .ddp-search-input::placeholder { color: #4b5764; }
.ddp-directory .ddp-hero-plain .ddp-search-main #ddp-locate-me { color: var(--dir-ink); }
.ddp-directory .ddp-hero-plain .ddp-search-clear { color: var(--dir-ink); background: #eef1f5; }

/* ===================================================================
   MAP TOOLS IN THE RAIL
   The address-and-radius panel was drawn as a floating overlay for a
   full-width map. Inside a 30rem rail it covered the top third of it,
   so it sits above the map here instead of on top of it.
   =================================================================== */
@media (min-width: 1180px) {
    /* At this width the panel can float on the map again, as in the
       reference. It only had to sit above when the rail was 22rem and the
       overlay covered a third of it. */
    .ddp-directory .ddp-split .ddp-map-tools {
        position: absolute;
        width: min(20rem, calc(100% - 1.5rem));
        margin: 0;
        padding: .8rem;
        box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
        border: 0;
        background: rgba(255, 255, 255, .97);
    }
}

/* ===================================================================
   MARKER BOUNCE ON CARD HOVER
   =================================================================== */
@keyframes ddp-marker-bounce {
    0%   { transform: translateY(0); }
    15%  { transform: translateY(-18px); }
    30%  { transform: translateY(0); }
    42%  { transform: translateY(-11px); }
    54%  { transform: translateY(0); }
    64%  { transform: translateY(-6px); }
    74%  { transform: translateY(0); }
    82%  { transform: translateY(-3px); }
    90%  { transform: translateY(0); }
    95%  { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

/* Leaflet positions markers with a transform on the element itself, so the
   animation goes on an inner wrapper — animating the marker directly would
   fight Leaflet for control of transform and make the pin jump to 0,0. */
.ddp-marker-bounce .ddp-marker-inner,
.ddp-marker-bounce > * {
    /* Six decaying hops over 1.6s. cubic-bezier gives each one an
       accelerating fall, so it settles like a dropped object rather than
       sliding up and down at a constant speed. */
    animation: ddp-marker-bounce 1.6s cubic-bezier(.28, .84, .42, 1);
    transform-origin: 50% 100%;
}
.ddp-marker-bounce {
    z-index: 2000 !important;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}

@media (prefers-reduced-motion: reduce) {
    .ddp-marker-bounce .ddp-marker-inner,
    .ddp-marker-bounce > * { animation: none; }
    .ddp-marker-bounce { filter: drop-shadow(0 0 0 3px #ffc845); }
}

/* A cluster bounces via its inner bubble, same reason as the pins. */
.ddp-marker-bounce .ddp-cluster-inner {
    animation: ddp-marker-bounce 1.6s cubic-bezier(.28, .84, .42, 1);
    transform-origin: 50% 100%;
}

/* ===================================================================
   BLOCKS THAT MUST NOT JOIN THE SPLIT ROW
   .ddp-split is a flex row, so anything rendered between its opening
   tag and the two columns becomes a third column and squeezes the
   listings. Belt and braces in case another block is added later.
   =================================================================== */
.ddp-directory .ddp-split > .ddp-subcats,
.ddp-directory .ddp-split > .ddp-nearby,
.ddp-directory .ddp-split > section {
    flex: 1 1 100%;
    max-width: 100%;
    order: -1;
}

/* ===================================================================
   Two-step category picker (v4.47.0)
   Group, then category — same shape as the State -> Base search.
   =================================================================== */
.ddp-cat-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Both selects share the row on wide screens and stack on narrow ones.
   Explicit widths rather than flex shorthand, per house rule. */
.ddp-cat-steps > .ddp-select {
    width: 48%;
    min-width: 0;
}

@media (max-width: 640px) {
    .ddp-cat-steps > .ddp-select { width: 100%; }
}

/* ===================================================================
   Common-categories seeder panel (v4.47.0)
   =================================================================== */
.ddp-seed-panel { margin-top: 1.5rem; }

.ddp-seed-intro {
    color: var(--dir-ink);
    max-width: 68ch;
    margin: 0 0 1rem;
}

.ddp-seed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.ddp-seed-result:empty { display: none; }

.ddp-seed-ok {
    color: var(--dir-deep);
    font-weight: 600;
    margin: 0 0 .75rem;
}

.ddp-seed-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--dir-ink);
    max-height: 22rem;
    overflow-y: auto;
}

.ddp-seed-list li { margin-bottom: .35rem; }

.ddp-seed-errors {
    margin: .75rem 0 0;
    padding-left: 1.25rem;
    color: #8a1c1c;
}

/* Import options row (v4.48.0) */
.ddp-check-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .75rem 0;
    color: var(--dir-ink);
    cursor: pointer;
}

.ddp-check-row input[type="checkbox"] {
    margin-top: .2rem;
    flex: none;
}

/* ===================================================================
   Breadcrumb (v4.51.0)
   Separators drawn in CSS so a screen reader reads the trail, not a
   run of "›" characters.
   =================================================================== */
.ddp-breadcrumb-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    font-size: .8125rem;
}

.ddp-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    min-width: 0;
}

.ddp-breadcrumb-item + .ddp-breadcrumb-item::before {
    content: "\203A";
    color: #4b5764;
    flex: none;
}

/* The trail can get long on a base listing; the current page is the one
   safe to clip, since the rest are the navigable steps. */
.ddp-breadcrumb-current {
    color: #4b5764;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

@media (min-width: 700px) {
    .ddp-breadcrumb-current { max-width: 40ch; }
}

/* Geocoder log (v4.54.0) */
.ddp-geo-ok,
.ddp-geo-cached   { color: #1a5c2e; margin: .15rem 0; }
.ddp-geo-rejected { color: #8a1c1c; margin: .15rem 0; }
.ddp-geo-notfound,
.ddp-geo-skipped  { color: #4b5764; margin: .15rem 0; }

/* ===================================================================
   State page: directory of that state's bases (v4.55.0)
   Flex row with explicit widths — no grid, per house rule.
   =================================================================== */
.ddp-state-bases {
    margin: 0 0 1.75rem;
}

.ddp-state-bases-title {
    font-family: var(--dir-display);
    color: var(--dir-ink);
    font-size: 1.375rem;
    margin: 0 0 .875rem;
}

.ddp-base-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.ddp-base-card {
    width: 31%;
    min-width: 0;
    margin: 0;
}

@media (max-width: 1100px) { .ddp-base-card { width: 48%; } }
@media (max-width: 620px)  { .ddp-base-card { width: 100%; } }

/* The whole card is the link. Background and colour are declared together
   in every state, and each pair is AAA against the other. */
.ddp-base-card-link,
.ddp-base-card-link:link {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    padding: .875rem;
    border: 1px solid var(--dir-mist);
    border-radius: 10px;
    background: #ffffff;
    color: var(--dir-ink);
    text-decoration: none !important;
}

.ddp-base-card-link:visited {
    background: #ffffff;
    color: var(--dir-ink);
}

.ddp-base-card-link:hover,
.ddp-base-card-link:active {
    background: var(--dir-ink);
    color: #ffffff;
    border-color: var(--dir-ink);
}

.ddp-base-card-link:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

.ddp-base-badge {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--dir-deep);
    color: #ffffff;
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .02em;
}

.ddp-base-card-link:hover .ddp-base-badge,
.ddp-base-card-link:active .ddp-base-badge {
    background: var(--dir-gold);
    color: var(--dir-deep);
}

.ddp-base-card-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.ddp-base-name {
    font-weight: 600;
    line-height: 1.3;
}

.ddp-base-meta,
.ddp-base-count {
    font-size: .8125rem;
    color: #4b5764;
}

/* Inherit on hover so the muted grey does not sit on the navy fill. */
.ddp-base-card-link:hover .ddp-base-meta,
.ddp-base-card-link:hover .ddp-base-count,
.ddp-base-card-link:active .ddp-base-meta,
.ddp-base-card-link:active .ddp-base-count {
    color: #ffffff;
}

/* ===================================================================
   Base directory shortcode layouts (v4.57.0)
   Flex only, explicit widths — no grid containers.
   =================================================================== */

/* Column counts for the card grid. */
.ddp-base-cols-2 .ddp-base-card { width: 48%; }
.ddp-base-cols-3 .ddp-base-card { width: 31%; }
.ddp-base-cols-4 .ddp-base-card { width: 23%; }

@media (max-width: 1100px) {
    .ddp-base-cols-3 .ddp-base-card,
    .ddp-base-cols-4 .ddp-base-card { width: 48%; }
}
@media (max-width: 620px) {
    .ddp-base-cols-2 .ddp-base-card,
    .ddp-base-cols-3 .ddp-base-card,
    .ddp-base-cols-4 .ddp-base-card { width: 100%; }
}

/* List layout: one per row, with room for a description. */
.ddp-bases-list .ddp-base-card { width: 100%; }
.ddp-base-desc {
    font-size: .875rem;
    color: #4b5764;
    line-height: 1.5;
    margin-top: .15rem;
}
.ddp-base-card-link:hover .ddp-base-desc,
.ddp-base-card-link:active .ddp-base-desc { color: #ffffff; }

/* Sidebar layout. Its own two-column row, scoped to this section — the
   results/map split further down the page is untouched. */
.ddp-bases-split {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}
.ddp-bases-main { width: 68%; min-width: 0; }
.ddp-bases-rail { width: 28%; min-width: 0; }

@media (max-width: 900px) {
    .ddp-bases-main,
    .ddp-bases-rail { width: 100%; }
}

/* Rail blocks: branches, other states, stacked stats. */
.ddp-rail-block {
    border: 1px solid var(--dir-mist);
    border-radius: 10px;
    background: #ffffff;
    padding: .875rem 1rem;
    margin-bottom: 1rem;
}
.ddp-rail-title {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4b5764;
    margin: 0 0 .5rem;
}
.ddp-rail-list { list-style: none; margin: 0; padding: 0; }
.ddp-rail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid #eef0f2;
}
.ddp-rail-row:last-child { border-bottom: 0; }
.ddp-rail-label { color: var(--dir-ink); }
.ddp-rail-count { color: #4b5764; font-size: .8125rem; flex: none; }

.ddp-rail-link,
.ddp-rail-link:link    { color: var(--dir-accent, #1d4289); text-decoration: none; }
.ddp-rail-link:visited { color: var(--dir-accent, #1d4289); }
.ddp-rail-link:hover,
.ddp-rail-link:active  { color: var(--dir-deep); text-decoration: underline; }

/* Stat bar: one line under a heading. */
.ddp-stat-bar { margin: 0 0 1.25rem; }
.ddp-stat-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.ddp-stat-item { display: flex; align-items: baseline; gap: .35rem; }
.ddp-stat-n { font-weight: 700; color: var(--dir-ink); font-size: 1.125rem; }
.ddp-stat-label {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4b5764;
}
.ddp-rail-row .ddp-stat-n { font-size: 1rem; }

.ddp-shortcode-notice {
    border-left: 3px solid var(--dir-gold);
    background: #fffaf0;
    color: #4b5764;
    padding: .5rem .75rem;
    font-size: .875rem;
}

/* Base map + branch legend (v4.58.0) */
.ddp-base-map-wrap { margin: 0 0 1.25rem; }

.ddp-base-map {
    width: 100%;
    border: 1px solid var(--dir-mist);
    border-radius: 10px;
    /* Leaflet panes otherwise paint over the rounded corners. */
    overflow: hidden;
}

/* Branch pin: a coloured disc with the branch initials. */
.ddp-base-pin { background: none; border: 0; }

.ddp-base-pin-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    color: #ffffff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.ddp-map-legend {
    list-style: none;
    margin: .625rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .8125rem;
    color: #4b5764;
}

.ddp-legend-item { display: flex; align-items: center; gap: .375rem; }

.ddp-legend-dot {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    flex: none;
}

/* The sidebar branch rows carry the same dot. */
.ddp-rail-label { display: flex; align-items: center; gap: .5rem; }

/* Card location as a link (v4.61.0)
   Block themes underline and repaint every <a>, so each state declares its
   background and colour together and matches on element.class. */
a.ddp-card-location,
a.ddp-card-location:link {
    color: #4b5764 !important;
    background: transparent !important;
    text-decoration: none !important;
    border-radius: 4px;
}

a.ddp-card-location:visited {
    color: #4b5764 !important;
    background: transparent !important;
}

a.ddp-card-location:hover,
a.ddp-card-location:active {
    color: var(--dir-deep) !important;
    background: transparent !important;
    text-decoration: underline !important;
}

a.ddp-card-location:focus-visible {
    outline: 3px solid var(--dir-gold);
    outline-offset: 2px;
}

/* ===================================================================
   Buttons on the admin/manage pages (v4.63.1)

   The base .ddp-btn rule — padding, size, radius — is scoped to
   .ddp-directory, so on the manage pages the buttons had no shape at
   all. v4.63.0 set colours without that base, which produced flat
   invisible boxes. The full button is declared here, not just its
   colours.
   =================================================================== */
.ddp-manage-page .ddp-btn,
.ddp-manage-listings .ddp-btn,
.ddp-form-page .ddp-btn {
    display: inline-block;
    padding: .625rem 1.125rem;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: var(--dir-body);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-manage-page .ddp-btn-sm,
.ddp-manage-listings .ddp-btn-sm,
.ddp-form-page .ddp-btn-sm {
    padding: .375rem .75rem;
    font-size: .8125rem;
}

/* Background and colour together in every state, matched on
   element.class so a block theme cannot repaint half a rule. */
.ddp-manage-page button.ddp-btn-primary,
.ddp-manage-listings button.ddp-btn-primary,
.ddp-form-page button.ddp-btn-primary,
.ddp-manage-page a.ddp-btn-primary,
.ddp-manage-page a.ddp-btn-primary:link,
.ddp-manage-page a.ddp-btn-primary:visited {
    background: #1d4289 !important;
    color: #ffffff !important;
    border-color: #1d4289 !important;
}

.ddp-manage-page button.ddp-btn-primary:hover,
.ddp-manage-listings button.ddp-btn-primary:hover,
.ddp-form-page button.ddp-btn-primary:hover,
.ddp-manage-page button.ddp-btn-primary:active,
.ddp-manage-page a.ddp-btn-primary:hover,
.ddp-manage-page a.ddp-btn-primary:active {
    background: #1b365d !important;
    color: #ffffff !important;
    border-color: #1b365d !important;
}

.ddp-manage-page button.ddp-btn-primary:disabled,
.ddp-manage-page button.ddp-btn-primary[disabled] {
    background: #4a5665 !important;
    color: #ffffff !important;
    border-color: #4a5665 !important;
    opacity: 1 !important;
    cursor: progress;
}

.ddp-manage-page button.ddp-btn-outline,
.ddp-manage-listings button.ddp-btn-outline,
.ddp-form-page button.ddp-btn-outline,
.ddp-manage-page a.ddp-btn-outline,
.ddp-manage-page a.ddp-btn-outline:link,
.ddp-manage-page a.ddp-btn-outline:visited {
    background: #ffffff !important;
    color: #003b49 !important;
    border-color: #003b49 !important;
}

.ddp-manage-page button.ddp-btn-outline:hover,
.ddp-manage-listings button.ddp-btn-outline:hover,
.ddp-form-page button.ddp-btn-outline:hover,
.ddp-manage-page button.ddp-btn-outline:active,
.ddp-manage-page a.ddp-btn-outline:hover,
.ddp-manage-page a.ddp-btn-outline:active {
    background: #003b49 !important;
    color: #ffffff !important;
    border-color: #003b49 !important;
}

.ddp-manage-page button.ddp-btn-outline:disabled,
.ddp-manage-page button.ddp-btn-outline[disabled] {
    background: #eef0f2 !important;
    color: #45505e !important;
    border-color: #c3cad2 !important;
    opacity: 1 !important;
}

.ddp-manage-page .ddp-btn:focus-visible {
    outline: 3px solid #ffc845;
    outline-offset: 2px;
}

/* ===================================================================
   Row actions in Manage Listings (v4.64.1)

   The .ddp-ml-action rules existed but a single class could not beat
   the theme's own button styling, so Edit rendered as a bare box and
   Unpublish / Feature / Trash as pink outlines. Matched on
   element.class with background and colour declared together in every
   state.

   Trash is the only destructive one and reads red on hover; the others
   share the navy treatment so the row does not look like four
   different kinds of control.
   =================================================================== */
.ddp-manage-listings button.ddp-ml-action,
.ddp-manage-listings a.ddp-ml-action,
.ddp-manage-listings a.ddp-ml-action:link,
.ddp-manage-listings a.ddp-ml-action:visited {
    display: inline-block;
    padding: .3125rem .625rem;
    margin: 0 .125rem;
    border: 1px solid #1b365d !important;
    border-radius: 3px;
    background: #ffffff !important;
    color: #1b365d !important;
    font-family: var(--dir-body);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-manage-listings button.ddp-ml-action:hover,
.ddp-manage-listings button.ddp-ml-action:active,
.ddp-manage-listings a.ddp-ml-action:hover,
.ddp-manage-listings a.ddp-ml-action:active {
    background: #1b365d !important;
    color: #ffffff !important;
    border-color: #1b365d !important;
}

/* Destructive action, so it announces itself on hover rather than
   looking identical to Feature. */
.ddp-manage-listings button.ddp-ml-delete,
.ddp-manage-listings a.ddp-ml-delete {
    border-color: #8a1c1c !important;
    color: #8a1c1c !important;
    background: #ffffff !important;
}

.ddp-manage-listings button.ddp-ml-delete:hover,
.ddp-manage-listings button.ddp-ml-delete:active,
.ddp-manage-listings a.ddp-ml-delete:hover,
.ddp-manage-listings a.ddp-ml-delete:active {
    background: #8a1c1c !important;
    color: #ffffff !important;
    border-color: #8a1c1c !important;
}

.ddp-manage-listings button.ddp-ml-action:disabled,
.ddp-manage-listings button.ddp-ml-action[disabled] {
    background: #eef0f2 !important;
    color: #45505e !important;
    border-color: #c3cad2 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.ddp-manage-listings .ddp-ml-action:focus-visible {
    outline: 3px solid #ffc845;
    outline-offset: 2px;
}

/* Breadcrumb on the admin pages (v4.65.0) */
.ddp-manage-page .ddp-breadcrumb,
.ddp-manage-listings .ddp-breadcrumb,
.ddp-form-page .ddp-breadcrumb {
    margin-bottom: .5rem;
}

.ddp-manage-page .ddp-breadcrumb-list a,
.ddp-manage-listings .ddp-breadcrumb-list a,
.ddp-form-page .ddp-breadcrumb-list a {
    color: #1d4289 !important;
    background: transparent !important;
    text-decoration: none !important;
}

.ddp-manage-page .ddp-breadcrumb-list a:hover,
.ddp-manage-listings .ddp-breadcrumb-list a:hover,
.ddp-form-page .ddp-breadcrumb-list a:hover {
    color: #003b49 !important;
    text-decoration: underline !important;
}

/* ===================================================================
   Term row actions — Manage Locations and Manage Categories (v4.65.1)

   These had no styling of their own, so the theme painted Edit with
   its accent fill: a red button in a list of quiet rows, reading as a
   warning when it is the least destructive control there.

   Both actions are declared with background and colour together in
   every state. Edit is quiet until hovered; delete is the destructive
   one and is the only one that goes red.
   =================================================================== */
.ddp-term-list button.ddp-term-edit,
.ddp-term-list button.ddp-term-delete {
    display: inline-block;
    padding: .25rem .625rem;
    margin-left: .25rem;
    border: 1px solid transparent !important;
    border-radius: 3px;
    background: transparent !important;
    color: #1d4289 !important;
    font-family: var(--dir-body);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-term-list button.ddp-term-edit:hover,
.ddp-term-list button.ddp-term-edit:active,
.ddp-term-list button.ddp-term-edit:focus-visible {
    background: #1d4289 !important;
    color: #ffffff !important;
    border-color: #1d4289 !important;
}

/* The only destructive control in the row, so it is the only red one. */
.ddp-term-list button.ddp-term-delete {
    color: #8a1c1c !important;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .5rem;
}

.ddp-term-list button.ddp-term-delete:hover,
.ddp-term-list button.ddp-term-delete:active,
.ddp-term-list button.ddp-term-delete:focus-visible {
    background: #8a1c1c !important;
    color: #ffffff !important;
    border-color: #8a1c1c !important;
}

.ddp-term-list button.ddp-term-edit:focus-visible,
.ddp-term-list button.ddp-term-delete:focus-visible {
    outline: 3px solid #ffc845;
    outline-offset: 2px;
}

.ddp-term-list button.ddp-term-edit:disabled,
.ddp-term-list button.ddp-term-delete:disabled {
    background: transparent !important;
    color: #45505e !important;
    border-color: transparent !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* ===================================================================
   GALLERY CONTROLS — forced
   Same fight as the form buttons above. These live here rather than in
   styles.css because theme.css is enqueued after it, and a rule in the
   earlier file loses to the block theme's crimson even with !important.
   Element plus class, background-color and background-image and colour
   declared together, in every state.
   =================================================================== */
.ddp-single-listing button.ddp-gallery-arrow,
.ddp-single-listing button.ddp-gallery-arrow:link,
.ddp-single-listing button.ddp-gallery-arrow:visited,
.ddp-single-listing button.ddp-gallery-zoom,
.ddp-single-listing button.ddp-gallery-zoom:link,
.ddp-single-listing button.ddp-gallery-zoom:visited,
.ddp-single-listing button.ddp-gallery-play,
.ddp-single-listing button.ddp-gallery-play:link,
.ddp-single-listing button.ddp-gallery-play:visited {
    color: #ffffff !important;
    background-color: rgba(11, 29, 58, 0.8) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-single-listing button.ddp-gallery-arrow:hover,
.ddp-single-listing button.ddp-gallery-arrow:focus,
.ddp-single-listing button.ddp-gallery-arrow:focus-visible,
.ddp-single-listing button.ddp-gallery-arrow:active,
.ddp-single-listing button.ddp-gallery-zoom:hover,
.ddp-single-listing button.ddp-gallery-zoom:focus,
.ddp-single-listing button.ddp-gallery-zoom:focus-visible,
.ddp-single-listing button.ddp-gallery-zoom:active,
.ddp-single-listing button.ddp-gallery-play:hover,
.ddp-single-listing button.ddp-gallery-play:focus,
.ddp-single-listing button.ddp-gallery-play:focus-visible,
.ddp-single-listing button.ddp-gallery-play:active {
    color: #ffffff !important;
    background-color: #0b1d3a !important;
    background-image: none !important;
    border-color: #ffffff !important;
}

.ddp-single-listing button.ddp-gallery-thumb,
.ddp-single-listing button.ddp-gallery-thumb:link,
.ddp-single-listing button.ddp-gallery-thumb:visited {
    color: #14315e !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #c9d3e0 !important;
}

.ddp-single-listing button.ddp-gallery-thumb:hover,
.ddp-single-listing button.ddp-gallery-thumb:focus,
.ddp-single-listing button.ddp-gallery-thumb:focus-visible,
.ddp-single-listing button.ddp-gallery-thumb.active {
    color: #14315e !important;
    background-color: #ffffff !important;
    border-color: #10499f !important;
}

.ddp-single-listing button.ddp-gallery-more,
.ddp-single-listing button.ddp-gallery-more:link,
.ddp-single-listing button.ddp-gallery-more:visited {
    color: #14315e !important;
    background-color: #e8eef7 !important;
    background-image: none !important;
    border: 2px solid #c9d3e0 !important;
}

.ddp-single-listing button.ddp-gallery-more:hover,
.ddp-single-listing button.ddp-gallery-more:focus,
.ddp-single-listing button.ddp-gallery-more:focus-visible {
    color: #ffffff !important;
    background-color: #10499f !important;
    border-color: #10499f !important;
}

/* Controls stay out of the way until the pane is used. Fading rather than
   hiding keeps them in the tab order and avoids the layout shift a
   display swap would cause. */
.ddp-single-listing .ddp-gallery-arrow,
.ddp-single-listing .ddp-gallery-play {
    opacity: 0;
    transition: opacity .18s ease;
}

.ddp-single-listing .ddp-gallery-main:hover .ddp-gallery-arrow,
.ddp-single-listing .ddp-gallery-main:focus-within .ddp-gallery-arrow,
.ddp-single-listing .ddp-gallery-main:hover .ddp-gallery-play,
.ddp-single-listing .ddp-gallery-main:focus-within .ddp-gallery-play {
    opacity: 1;
}

/* Touch has no hover, so a control that only appears on hover never
   appears at all. */
@media (hover: none) {
    .ddp-single-listing .ddp-gallery-arrow,
    .ddp-single-listing .ddp-gallery-play { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ddp-single-listing .ddp-gallery-arrow,
    .ddp-single-listing .ddp-gallery-play { transition: none; }
}

.ddp-single-listing .ddp-gallery-play {
    position: absolute;
    right: 58px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.ddp-single-listing .ddp-gallery-counter {
    background-color: rgba(11, 29, 58, 0.8);
    color: #ffffff;
}


/* ===================================================================
   MAP PICKER BUTTONS — forced
   Same reason as the gallery controls: styles.css is enqueued first, so a
   rule there loses to the block theme. Background, background-image and
   colour together, in every state.
   =================================================================== */
.ddp-map-picker button.ddp-btn.ddp-btn-outline,
.ddp-map-picker button.ddp-btn.ddp-btn-outline:link,
.ddp-map-picker button.ddp-btn.ddp-btn-outline:visited {
    color: #14315e !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #1258c2 !important;
    text-decoration: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-map-picker button.ddp-btn.ddp-btn-outline:hover,
.ddp-map-picker button.ddp-btn.ddp-btn-outline:focus,
.ddp-map-picker button.ddp-btn.ddp-btn-outline:focus-visible,
.ddp-map-picker button.ddp-btn.ddp-btn-outline:active,
.ddp-map-picker button.ddp-btn.ddp-btn-outline[aria-pressed="true"] {
    color: #ffffff !important;
    background-color: #10499f !important;
    background-image: none !important;
    border-color: #10499f !important;
}

.ddp-map-picker button.ddp-btn.ddp-btn-outline:disabled {
    color: #3d4a5c !important;
    background-color: #e8eef7 !important;
    border-color: #c9d3e0 !important;
    cursor: default;
}

/* ===================================================================
   MAP LAYER TOGGLE — forced
   Sits on top of map tiles, so the two states have to be legible over
   imagery as well as over a road map. Element plus class, background and
   colour together, every state.
   =================================================================== */
.ddp-layer-toggle {
    display: inline-flex;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.ddp-layer-toggle button.ddp-layer-btn,
.ddp-layer-toggle button.ddp-layer-btn:link,
.ddp-layer-toggle button.ddp-layer-btn:visited {
    color: #14315e !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-right: 1px solid #c9d3e0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-layer-toggle button.ddp-layer-btn:last-child { border-right: 0 !important; }

.ddp-layer-toggle button.ddp-layer-btn:hover,
.ddp-layer-toggle button.ddp-layer-btn:focus,
.ddp-layer-toggle button.ddp-layer-btn:focus-visible {
    color: #ffffff !important;
    background-color: #10499f !important;
    background-image: none !important;
}

.ddp-layer-toggle button.ddp-layer-btn.active,
.ddp-layer-toggle button.ddp-layer-btn[aria-pressed="true"] {
    color: #ffffff !important;
    background-color: #0b1d3a !important;
    background-image: none !important;
}

.ddp-layer-toggle button.ddp-layer-btn:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: -3px;
}

/* ===================================================================
   DIRECTORY MAP TYPE BUTTONS — forced, modernised
   These sat flush under the map as two square tabs, and the inactive one
   set its colour through a CSS variable with no !important — which is how
   "Satellite" ended up crimson. Same segmented pill as the picker's
   toggle, floated over the map instead of butted against it.
   =================================================================== */
.ddp-directory .ddp-map-overlay-controls {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 500;
    display: inline-flex;
    margin: 0;
    padding: 3px;
    gap: 3px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 10px rgba(11, 29, 58, 0.28);
    backdrop-filter: blur(4px);
}

.ddp-directory button.ddp-map-type-btn,
.ddp-directory button.ddp-map-type-btn:link,
.ddp-directory button.ddp-map-type-btn:visited {
    color: #14315e !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ddp-directory button.ddp-map-type-btn:hover,
.ddp-directory button.ddp-map-type-btn:focus,
.ddp-directory button.ddp-map-type-btn:focus-visible {
    color: #ffffff !important;
    background-color: #10499f !important;
    background-image: none !important;
    border-color: transparent !important;
}

.ddp-directory button.ddp-map-type-btn.active {
    color: #ffffff !important;
    background-color: #0b1d3a !important;
    background-image: none !important;
    border-color: transparent !important;
}

.ddp-directory button.ddp-map-type-btn:focus-visible {
    outline: 3px solid #0b1d3a !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ddp-directory button.ddp-map-type-btn { transition: none; }
}

@media (max-width: 640px) {
    .ddp-directory .ddp-map-overlay-controls { right: 8px; top: 8px; }
    .ddp-directory button.ddp-map-type-btn { padding: 5px 12px !important; font-size: 0.75rem !important; }
}

/* ===================================================================
   TERM PICKER
   =================================================================== */
.ddp-term-picker { display: flex; flex-direction: column; gap: 6px; }

.ddp-form-page .ddp-term-picker input.ddp-term-filter,
.ddp-manage-page .ddp-term-picker input.ddp-term-filter {
    color: #14315e !important;
    background-color: #ffffff !important;
    border: 1px solid #c9d3e0 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
}

.ddp-form-page .ddp-term-picker input.ddp-term-filter:focus,
.ddp-manage-page .ddp-term-picker input.ddp-term-filter:focus {
    border-color: #10499f !important;
    outline: 3px solid rgba(16, 73, 159, 0.35);
    outline-offset: 1px;
}

.ddp-form-page .ddp-term-picker input.ddp-term-filter::placeholder,
.ddp-manage-page .ddp-term-picker input.ddp-term-filter::placeholder {
    color: #454f5c !important;
    opacity: 1;
}

.ddp-term-hint {
    margin: 0;
    background: transparent;
    color: #3d4a5c;
    font-size: 0.82rem;
    line-height: 1.45;
}

.ddp-term-hint:empty { display: none; }

/* ===================================================================
   CATEGORY PICKER
   =================================================================== */
.ddp-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

.ddp-cat-help {
    margin: 0 0 8px;
    background: transparent;
    color: #3d4a5c;
    font-size: 0.85rem;
}

.ddp-cat-box { position: relative; }

.ddp-cat-picked { margin: 0 0 8px; padding: 0; list-style: none; }

.ddp-cat-picked-item {
    display: flex; align-items: baseline; gap: 10px;
    padding: 4px 0;
    color: #14315e;
    font-size: 0.92rem;
}

/* The parent is context, not the answer — quieter than the leaf so the eye
   lands on the thing being chosen. */
.ddp-cat-parent {
    color: #4a5462;
    font-weight: 400;
}

.ddp-cat-picked-item strong,
.ddp-cat-option strong { color: inherit; font-weight: 700; }

.ddp-cat-picked button.ddp-cat-remove,
.ddp-cat-picked button.ddp-cat-remove:link,
.ddp-cat-picked button.ddp-cat-remove:visited {
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #10499f !important;
    font-size: 0.85rem !important;
    text-decoration: underline;
    cursor: pointer;
}

.ddp-cat-picked button.ddp-cat-remove:hover,
.ddp-cat-picked button.ddp-cat-remove:focus,
.ddp-cat-picked button.ddp-cat-remove:focus-visible {
    background-color: #10499f !important;
    color: #ffffff !important;
    text-decoration: none;
    padding: 0 6px !important;
    border-radius: 3px !important;
}

.ddp-form-page input.ddp-cat-input,
.ddp-manage-page input.ddp-cat-input {
    width: 100%;
    color: #14315e !important;
    background-color: #ffffff !important;
    border: 1px solid #c9d3e0 !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
}

.ddp-form-page input.ddp-cat-input:focus,
.ddp-manage-page input.ddp-cat-input:focus {
    border-color: #10499f !important;
    outline: 3px solid rgba(16, 73, 159, 0.35);
    outline-offset: 1px;
}

.ddp-form-page input.ddp-cat-input:disabled,
.ddp-manage-page input.ddp-cat-input:disabled {
    background-color: #eef1f5 !important;
    color: #454f5c !important;
}

.ddp-form-page input.ddp-cat-input::placeholder,
.ddp-manage-page input.ddp-cat-input::placeholder {
    color: #454f5c !important;
    opacity: 1;
}

.ddp-cat-list {
    position: absolute; z-index: 40; left: 0; right: 0;
    margin: 4px 0 0; padding: 4px; list-style: none;
    max-height: 320px; overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #c9d3e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(11, 29, 58, 0.16);
}

.ddp-cat-list[hidden] { display: none; }

.ddp-cat-option {
    padding: 8px 10px;
    border-radius: 5px;
    background-color: #ffffff;
    color: #14315e;
    font-size: 0.92rem;
    cursor: pointer;
}

.ddp-cat-option.active,
.ddp-cat-option:hover { background-color: #0b1d3a; color: #ffffff; }
.ddp-cat-option.active .ddp-cat-parent,
.ddp-cat-option:hover .ddp-cat-parent { color: #d5dceb; }

.ddp-cat-option mark {
    background-color: #ffe08a;
    color: #0b1d3a;
    padding: 0 1px;
    border-radius: 2px;
}

.ddp-cat-none {
    padding: 8px 10px;
    background-color: #ffffff;
    color: #3d4a5c;
    font-size: 0.88rem;
}