/* Service directory pages (allServices / stakeholders).
   Layout and spacing only: colours, fonts and radii come from the site tokens in main_nav.css,
   the group icons from the existing .btn-<iconClass> rules in main.css. Logical properties are used
   so the same rules serve LTR and RTL without a main_rtl.css counterpart. */

.sd-page { --sd-tint: rgb(234, 245, 238); --sd-muted: #555; --sd-hover: #EEEEE9; }
.sd-hidden { display: none !important; }

/* ---- Search + list tools ---- */
.sd-toolbar { margin-bottom: 1.25rem; }
.sd-toolbar .list-tools { margin-inline-start: auto; }

/* ---- Layout: rail + results ---- */
.sd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
.sd-side { align-self: start; }
.sd-grid .sd-layout { grid-template-columns: minmax(0, 1fr); }
.sd-grid .sd-side { display: none; }
@media (min-width: 992px) {
    .sd-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; }
}

/* ---- Category rail ---- */
.sd-rail { padding: 1rem; background-color: #fff; border: 1px solid var(--bdr); border-radius: 12px; }
.sd-rail-title { margin-bottom: .5rem; font-family: var(--family-bold); font-size: 1rem; color: var(--black-color); }
.sd-cats { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sd-cat { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 48px; padding: .5rem .75rem; border: 0; border-radius: 8px; background: transparent; color: var(--black-color); font-size: 1rem; line-height: var(--lh-120); text-align: start; }
.sd-cat:hover { background-color: var(--sd-hover); }
.sd-cat:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.sd-cat.is-current { background-color: var(--sd-tint); color: var(--primary-color); }
.sd-cat-name { flex: 1 1 auto; min-width: 0; }
.sd-cat-count { flex: none; font-size: .875rem; color: var(--sd-muted); }
.sd-cat.is-current .sd-cat-count { color: var(--primary-color); }
.sd-cat-icon { flex: none; display: inline-flex; width: 32px; height: 32px; border-radius: 8px; background-color: var(--sd-tint); }
.sd-cat.is-current .sd-cat-icon { background-color: #fff; }
.sd-cat-icon:before { content: ""; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 20px; }
.sd-cat-icon-all:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a6046'%3E%3Cpath d='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'/%3E%3C/svg%3E"); }

/* ---- Results ---- */
.sd-result-text { margin: 0 0 1rem; color: var(--sd-muted); }
.sd-empty { padding: 3rem 1rem; text-align: center; border: 1px dashed var(--bdr); border-radius: 12px; }
.sd-empty-title { font-family: var(--family-bold); font-size: 1.125rem; color: var(--black-color); }
.sd-empty-hint { margin: .25rem 0 0; color: var(--sd-muted); }

/* ---- Group cards ---- */
.sd-page .service-list-content { overflow: hidden; }
.sd-page .service-list-content .card-header .btn { padding: 1rem 1.5rem; border-radius: 0; }
.sd-group-text { display: flex; flex-direction: column; gap: .125rem; text-align: start; }
.sd-group-title { font-family: var(--family-bold); font-size: 1.125rem; line-height: var(--lh-120); }
.sd-group-count { font-size: .875rem; color: var(--sd-muted); }
.sd-page .service-list-content .card-body { padding: 0; }

/* ---- Service rows ---- */
.sd-page .list-group-eservices { margin: 0; border-radius: 0; }
.sd-page .list-group-eservices > .list-group-item { flex-wrap: wrap; gap: .75rem 1rem; padding: 1rem 1.5rem; border: 0; border-top: 1px solid var(--bdr); border-radius: 0; background-color: transparent; }
.sd-page .all-services-content { display: block; flex: 1 1 20rem; width: auto; min-width: 0; }
.sd-row-title { display: block; color: var(--black-color); text-decoration: none; }
.sd-page .src-action-button { flex-wrap: wrap; align-items: center; gap: .5rem; margin-inline-start: auto; }
.sd-page .btn-favorite { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; border-radius: 8px; }
.sd-page .btn-favorite:hover { background-color: var(--sd-hover); }

/* Favourites keep their own list, one card per row */
.sd-page .favourite-ul-list > .list-group-item { margin-bottom: .75rem; border: 1px solid var(--bdr); border-radius: 12px; }

/* Search results are shown flat (group headers hidden), so frame the whole list instead of each group */
.sd-page .accordion-container.sd-flat { overflow: hidden; border: 1px solid var(--bdr); border-bottom: 0; border-radius: 12px; }
.sd-page .sd-flat .list-group-eservices > .list-group-item { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--bdr); }

/* ---- Narrow screens: rail becomes a scrolling row of chips ---- */
@media (max-width: 991.98px) {
    .sd-rail { padding: 0; border: 0; border-radius: 0; background: transparent; }
    .sd-rail-title { display: none; }
    .sd-cats { display: flex; gap: .5rem; padding-bottom: .25rem; overflow-x: auto; scrollbar-width: none; }
    .sd-cats::-webkit-scrollbar { display: none; }
    .sd-cat { flex: none; width: auto; min-height: 40px; padding: .25rem .875rem; white-space: nowrap; border: 1px solid var(--bdr); border-radius: 999px; background-color: #fff; }
    .sd-cat.is-current { border-color: var(--primary-color); }
    .sd-cat-icon { display: none; }
    .sd-page .service-list-content .card-header .btn { padding: .875rem 1rem; }
    .sd-page .list-group-eservices > .list-group-item { padding: 1rem; }
    .sd-page .src-action-button { width: 100%; margin-inline-start: 0; }
}