/**
 * Webhouse, styling voor de lokale SEO-secties op de regiopagina's
 * Kruimelpad, reviews-badge, lokaal haakje, prijsblok, FAQ-accordeon en
 * interne buurplaats-links. Sluit aan op de bestaande huisstijl
 * (paars #764294, cyaan #58C5F1, Satoshi).
 */

/* --- Kruimelpad --------------------------------------------------------- */
.regio-breadcrumb {
    padding: 90px 0 0;
    font-size: 14px;
}
.regio-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #6b6b76;
}
.regio-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.regio-breadcrumb li:not(:last-child)::after {
    content: "›";
    color: #b3b3bd;
}
.regio-breadcrumb a {
    color: #764294;
    text-decoration: none;
}
.regio-breadcrumb a:hover { text-decoration: underline; }
.regio-breadcrumb li[aria-current="page"] { color: #6b6b76; }

/* --- Reviews-badge ------------------------------------------------------ */
.regio-reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(118, 66, 148, .07);
    border: 1px solid rgba(118, 66, 148, .15);
    font-size: 14px;
}
.regio-reviews-score { font-weight: 700; color: #2a2a33; }
.regio-reviews-aantal { color: #6b6b76; }
.regio-reviews-badge .gr-sterren,
.regio-reviews-badge svg { color: #f5a623; }

/* --- Lokaal haakje ------------------------------------------------------ */
.regio-lokaal {
    padding: 60px 0 20px;
}
.regio-lokaal h2 {
    margin-bottom: 22px;
}
.regio-lokaal p {
    font-size: 18px;
    line-height: 1.7;
    color: #3f3f49;
    margin-bottom: 18px;
}
.regio-lokaal a { color: #764294; }

/* --- Prijs / pakketten -------------------------------------------------- */
.regio-prijzen {
    padding: 70px 0;
}
.regio-prijzen-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}
.regio-prijzen-head p {
    color: #4a4a54;
    font-size: 17px;
    line-height: 1.65;
}
.regio-prijzen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
}
.regio-prijs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ece9f1;
    box-shadow: 0 14px 40px rgba(40, 18, 58, .06);
}
.regio-prijs-card.is-uitgelicht {
    border-color: #764294;
    box-shadow: 0 22px 55px rgba(118, 66, 148, .18);
    transform: translateY(-6px);
}
.regio-prijs-badge {
    position: absolute;
    top: -13px;
    left: 28px;
    background: linear-gradient(135deg, #764294, #9747FF);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
}
.regio-prijs-card h3 { margin: 0 0 4px; }
.regio-prijs-tagline { color: #6b6b76; font-size: 15px; margin: 0 0 18px; }
.regio-prijs-bedrag {
    font-size: 30px;
    font-weight: 700;
    color: #2a2a33;
    margin-bottom: 22px;
    line-height: 1.1;
}
.regio-prijs-vanaf { font-size: 14px; font-weight: 500; color: #6b6b76; }
.regio-prijs-opmaat { font-size: 24px; }
.regio-prijs-card ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    flex: 1 1 auto;
}
.regio-prijs-card li {
    position: relative;
    padding: 8px 0 8px 28px;
    border-bottom: 1px solid #f2f0f6;
    color: #3f3f49;
    font-size: 15px;
}
.regio-prijs-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 16px;
    height: 16px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23764294' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.regio-prijs-card .btn { margin-top: auto; align-self: flex-start; }
.regio-prijzen-maatwerk {
    text-align: center;
    margin: 30px auto 0;
    max-width: 640px;
    color: #6b6b76;
    font-size: 15px;
}

/* --- FAQ-accordeon ------------------------------------------------------ */
.regio-faq {
    padding: 30px 0 70px;
}
.regio-faq > .container > .row > div > h2 {
    margin-bottom: 30px;
}
.regio-faq-item {
    border: 1px solid #ece9f1;
    border-radius: 14px;
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
}
.regio-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 56px 20px 22px;
    position: relative;
    font-weight: 600;
    font-size: 17px;
    color: #2a2a33;
}
.regio-faq-item summary::-webkit-details-marker { display: none; }
.regio-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    color: #764294;
    transition: transform .2s ease;
}
.regio-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.regio-faq-antwoord {
    padding: 0 22px 20px;
    color: #4a4a54;
    line-height: 1.65;
}
.regio-faq-antwoord p { margin: 0; }

/* --- Interne links buurplaatsen ---------------------------------------- */
.regio-buren {
    padding: 20px 0 70px;
}
.regio-buren h2 { margin-bottom: 22px; }
.regio-buren-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.regio-buren-links a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(118, 66, 148, .06);
    border: 1px solid rgba(118, 66, 148, .16);
    color: #764294;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
}
.regio-buren-links a:hover {
    background: #764294;
    color: #fff;
}
.regio-buren-diensten { color: #4a4a54; }
.regio-buren-diensten a { color: #764294; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    .regio-prijzen-grid { grid-template-columns: 1fr; gap: 20px; }
    .regio-prijs-card.is-uitgelicht { transform: none; }
    .regio-lokaal p { font-size: 17px; }
}
@media (max-width: 560px) {
    .regio-breadcrumb { padding-top: 80px; }
    .regio-prijs-bedrag { font-size: 26px; }
}