/*
 * Service Areas accordion - Service Area page (/service-area/)
 *
 * Replaces the RYNO Service Areas plugin, removed 2026-09-17. The county and city
 * list is plain HTML in the page content; sizes and colours here match what the
 * plugin rendered. Loaded by jc_service_areas_styles() in functions.php.
 *
 * Editing the list: one <li> per town, inside its county's <ul>. Linked towns are
 * <li><a href="/page-slug/">Town</a></li>.
 */

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

.service-areas {
    padding: 40px 0;
}

.service-areas__heading {
    margin: 0 0 30px;
    font-size: 36px;
    text-align: center;
}

.service-areas__accordion {
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}

/* County bar */

.service-areas__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgb(240, 240, 240);
    color: rgb(0, 0, 0);
    list-style: none;
    cursor: pointer;
}

.service-areas__toggle::-webkit-details-marker {
    display: none;
}

.service-areas__toggle:hover {
    background: rgb(182, 182, 182);
}

.service-areas__region-heading {
    margin: 0;
    font-size: 22px;
    color: rgb(0, 0, 0);
}

/* Plus sign, becomes a minus when the county is open */
.service-areas__toggle::after {
    content: "";
    flex: 0 0 18px;
    height: 18px;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 4px no-repeat,
        linear-gradient(currentColor, currentColor) center / 4px 100% no-repeat;
    transition: transform 0.3s;
}

.service-areas__region[open] > .service-areas__toggle::after {
    background: linear-gradient(currentColor, currentColor) center / 100% 4px no-repeat;
    transform: rotate(180deg);
}

/*
 * Towns
 *
 * The parent theme styles every list in page content (.content-area ul:not(.accordion)):
 * it zeroes the list padding, indents each item by 30px for an absolutely positioned
 * bullet, and puts 10px between items. These selectors are deliberately long so they
 * outrank those rules - shortening them brings the theme's list styling back.
 */

.service-areas .service-areas__accordion ul.service-areas__cities {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    /* 15px panel padding, then a centred 90% row - same geometry as the plugin */
    padding: 15px calc(13.5px + 5%);
    list-style: none;
    background: #fff;
    color: rgb(44, 62, 80);
}

.service-areas .service-areas__accordion ul.service-areas__cities > li {
    width: 100%;
    margin: 0;
    padding: 8px 0;
    font-size: 16px;
    white-space: nowrap;
}

/* Map pin - Feather Icons "map-pin" (MIT) */
.service-areas .service-areas__accordion ul.service-areas__cities > li::before {
    position: static;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.25em;
    vertical-align: -1px;
    background-color: rgb(201, 12, 18);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.service-areas .service-areas__accordion ul.service-areas__cities a {
    font-weight: 700;
}

@media only screen and (min-width: 576px) {
    .service-areas .service-areas__accordion ul.service-areas__cities > li {
        width: 50%;
    }
}

@media only screen and (min-width: 768px) {
    .service-areas .service-areas__accordion ul.service-areas__cities > li {
        width: 33%;
    }
}

@media only screen and (min-width: 992px) {
    .service-areas .service-areas__accordion ul.service-areas__cities > li {
        width: 25%;
    }
}