/* Keep the surrounding section visible, including dark backgrounds and images.
 * Variables may be set on a surrounding page-builder container when desired. */
.jjnal-block,
.jjnal-block *,
.jjnal-service-location-link,
.jjnal-nearest-item,
.jjnal-county-child-grid a {
    box-sizing: border-box;
}
.jjnal-block,
.jjnal-coverage-map-county {
    background: var(--jjnal-background, transparent);
    color: var(--jjnal-text, inherit);
    border-color: currentColor;
    border-color: color-mix(in srgb, currentColor 25%, transparent);
}
.jjnal-block .jjnal-heading,
.jjnal-block .jjnal-links-label,
.jjnal-block .jjnal-links-intro,
.jjnal-coverage-map-county .jjnal-coverage-heading,
.jjnal-coverage-map-county .jjnal-coverage-intro {
    color: inherit;
}
.jjnal-block .jjnal-button,
.jjnal-service-locations .jjnal-service-location-link,
.jjnal-county-child-grid a,
.jjnal-nearest-locations .jjnal-nearest-item {
    background: var(--jjnal-button-background, transparent);
    color: inherit !important;
    border-color: currentColor;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.jjnal-block .jjnal-button:hover,
.jjnal-block .jjnal-button:focus,
.jjnal-service-locations .jjnal-service-location-link:hover,
.jjnal-county-child-grid a:hover,
.jjnal-nearest-locations .jjnal-nearest-item:hover {
    background: var(--jjnal-button-hover-background, transparent);
    background: var(--jjnal-button-hover-background, color-mix(in srgb, currentColor 10%, transparent));
    border-color: currentColor;
    color: inherit !important;
}
.jjnal-block.jjnal-button-style-soft_pill .jjnal-button {
    background: var(--jjnal-button-background, transparent);
    background: var(--jjnal-button-background, color-mix(in srgb, currentColor 8%, transparent));
}
/* Solid is an explicit style choice: keep its foreground/background paired. */
.jjnal-block.jjnal-button-style-solid_pill .jjnal-button {
    background: var(--jjnal-solid-background, #222);
    color: var(--jjnal-solid-text, #fff) !important;
    border-color: currentColor;
}
.jjnal-block .jjnal-button:focus-visible,
.jjnal-service-location-link:focus-visible,
.jjnal-county-child-grid a:focus-visible,
.jjnal-nearest-item:focus-visible,
.jjnal-all-towns a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
.jjnal-block .jjnal-county-parent,
.jjnal-service-locations .jjnal-service-coverage-link {
    border-color: currentColor;
    border-color: color-mix(in srgb, currentColor 25%, transparent);
}
.jjnal-radius-svg,
.jjnal-coverage-svg,
.jjnal-radius-svg a,
.jjnal-coverage-svg a {
    color: inherit;
}
.jjnal-radius-svg > circle[fill="none"] {
    stroke: currentColor;
    stroke-opacity: .35;
}
.jjnal-radius-svg > circle:not([fill="none"]),
.jjnal-radius-svg .jjnal-radius-town-dot,
.jjnal-coverage-svg .jjnal-coverage-town-dot,
.jjnal-coverage-svg .jjnal-coverage-centre {
    fill: currentColor;
}
.jjnal-radius-svg .jjnal-radius-town-label,
.jjnal-radius-svg .jjnal-radius-hub-label,
.jjnal-coverage-svg .jjnal-coverage-town-label {
    fill: currentColor;
}
.jjnal-all-towns,
.jjnal-all-towns h2,
.jjnal-all-towns a {
    color: inherit;
}
.jjnal-all-towns a:hover {
    color: inherit;
    text-decoration: underline;
}
.jjnal-all-towns .jjnal-all-towns-grid {
    display: grid;
    grid-template-columns: repeat(var(--jjnal-towns-desktop, 4), minmax(0, 1fr));
    gap: .65rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.jjnal-all-towns .jjnal-all-towns-grid > li {
    min-width: 0;
    margin: 0;
    padding: 0;
}
.jjnal-all-towns .jjnal-all-towns-grid a {
    display: block;
    padding: .35rem 0;
    overflow-wrap: anywhere;
}
@media (max-width: 1199px) {
    .jjnal-all-towns .jjnal-all-towns-grid {
        grid-template-columns: repeat(var(--jjnal-towns-tablet, 3), minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .jjnal-all-towns .jjnal-all-towns-grid {
        grid-template-columns: repeat(var(--jjnal-towns-mobile, 2), minmax(0, 1fr));
        column-gap: 1rem;
    }
}
.jjnal-block .jjnal-nearby-coverage-link { margin: 16px 0 0; }
.jjnal-block .jjnal-nearby-coverage-link a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jjnal-block .jjnal-nearby-coverage-link a:hover,
.jjnal-block .jjnal-nearby-coverage-link a:focus { color: inherit; text-decoration-thickness: 2px; }