:root {
    /* shades from brown to orange to beige */
    --saddle: #553126;
    --apricot: #ff9372;
    --peach: #ffc9b8;
    --cream: #f2e2dd;
    --ceramic: #f8f0ee;

    /* shades between navy blue and aquamarine */
    --klein-blue: #0047BA;
    --mystic: #e5e9f1;

    /* monochromatic */
    --jet: #2b2b2a;
}
.filter h2 {
    color: var(--klein-blue);
    font-style: normal;
    font-weight: 400;
    margin-top: 16px;
    margin-bottom: 15px;
    line-height: 1;
}
.filter, #services-and-resources-map, .services, .resources {
    color: var(--klein-blue);
    margin-bottom: 24px;
}
.paginator {
    grid-column: 1 / -1;
}
.filter {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.filter-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.filter-row .filter-location {
    flex-grow: 1;
}
.filter-row .filter-category, .filter-row .filter-payment-supported {
    flex-basis: 0;
    flex-grow: 1;
}
.filter-row .or {
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
#services-and-resources-map {
    height: 425px;
}
.results-display {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
}
body {
    background-color: var(--ceramic);
}
.services, .resources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(100%/3 - 25px*2, 330px, 100%), 1fr));
    gap: 25px;
    padding: 0 max(15px, max((100% - 1400px)/2, 0px));
    color: var(--klein-blue);
}
.services h2, .resources h2 {
    grid-column: 1 / -1;
    color: var(--klein-blue);
    margin-top: 1rem;
    font-style: normal;
    font-weight: 400;
}
article {
    grid-row-end: span 3;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
    padding-inline: 25px;
    padding-block: 30px;
}
article h3 {
    font-size: 32px;
}
article .description-and-call-to-action {
    display: flex;
    flex-direction: column;
}
:is(.services, .resources) .actions {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    place-content: flex-end;
    height: fit-content;
}
:is(.services, .resources) .call-to-action {
    margin: 0 auto 0 0;
    line-height: 1.25;
}
:is(.services, .resources) .actions > :not(.call-to-action) {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    padding: 7px;
}
:is(.services, .resources) .actions > :not(.call-to-action):hover {
    background-color: var(--apricot);
}
:is(.services, .resources) .actions > :not(.call-to-action) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: initial;
}
.services article {
    background-color: var(--cream);
}
.resources article {
    background-color: var(--mystic);
}
.services a, .resources a {
    font: inherit;
    color: inherit;
}
.services h3, .resources h3 {
    margin-block: 0 10px;
    color: var(--klein-blue);
    line-height: normal;
}
.lead-organisation {
    font-size: 14px;
    letter-spacing: 0;
    margin-bottom: 0.75rem;
    font-weight: bold;
}
a {
    color: var(--klein-blue);
    text-decoration: underline;
}
.services .link-to-service-website, .resources .link-to-service-website {
    font-weight: bold;
    text-decoration: underline;
}
.contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact li {
    list-style: none;
    display: flex;
    gap: 5px;
    margin-bottom: 7px;
}
.contact li img {
    vertical-align: middle;
    margin-right: 0.5rem;
}
.payments-supported, .purpose {
    padding: 0;
    margin: 0;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.payments-supported li, .purpose li {
    display: inline;
    background-color: var(--klein-blue);
    padding: 7px;
    border-radius: 5px;
    color: var(--ceramic);
    font-weight: bold;
    padding: 5px 10px;
    line-height: normal;
}
.categories {
    padding: 0;
    margin: 0;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.categories li {
    display: inline;
    background-color: var(--peach);
    padding: 7px;
    border-radius: 5px;
    color: var(--saddle);
    padding: 5px 10px;
    line-height: normal;
}
hr {
    border: solid 1px var(--apricot);
    margin-block: 25px 20px;
}
.description {
    line-height: 1.5;
    margin-bottom: 20px;
}
.call-to-action {
    border: solid 1px var(--apricot);
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
}
.call-to-action:hover {
    background-color: var(--jet);
    color: var(--ceramic);
    border-color: var(--jet);
    text-decoration: none;
}
.services h2, .resources h2 {
    letter-spacing: 0;
}
.services h3, .resources h3 {
    letter-spacing: -2px;
    line-height: 1;
    font-weight: bold;
}
.filter, .services, .resources {
    letter-spacing: 0;
    font-size: 16px;
}
.no-results {
    color: var(--klein-blue);
    text-align: center;
    grid-column: 1 / -1;
}
.info-window {
    text-align: center;
    min-width: fit-content;
}
.info-window a, .info-window a:hover {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}
.info-window address {
    display: inline;
}
.home {
    position: absolute;
    right: 10px;
    bottom: 24px;
    background: #fff;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    aspect-ratio: 1 / 1;
    font-size: 0;
    color: #666666;
    padding: 8px;
}
.home:hover {
    color: #333333;
}
.home svg {
    width: 24px;
    height: 24px;
}
@media screen and (max-width: 1000px) {
    .filter-row {
        flex-wrap: wrap;
    }
    .filter-row > .drop-down-component {
        flex-grow: 1;
    }
    .filter-row:last-child > .drop-down-component {
        flex-basis: 250px;
    }
    .filter .button-group, .filter input[type="submit"] {
        margin-left: auto;
        margin-right: auto;
    }
}
dialog[open] {
    position: fixed;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: var(--klein-blue);
    border: none;
    border-radius: 8px;
    color: var(--ceramic);
    font-size: 12pt;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
    width: 300px;
    text-align: center;
}
dialog button {
    background: none;
    border: solid 1px currentColor;
    padding: 4px 12px;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}
dialog button:hover {
    background-color: var(--ceramic);
    color: var(--klein-blue);
}

details.description {
	position: relative;
}
details.description summary {
	list-style: none;
}
details.description:not([open]) summary {
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--apricot);
    font-weight: bold;
}
details.description:not([open]) summary span {
    color: var(--klein-blue);
    font-weight: normal;
}
details.description[open] {
    padding-bottom: 1.5em;
}
details.description[open] summary {
    position: absolute;
    bottom: 0;
}
details.description[open] summary span {
    display: none;
}

details.description.truncated {
    padding-bottom: 24px;
}
details.description.truncated summary::before {
    position: absolute;
    bottom: 0;
    text-decoration: underline;
    text-underline-offset: 5px;
	cursor: pointer;
    white-space: nowrap;
    color: var(--apricot);
    font-weight: bold;
}
details.description.truncated:not([open]) summary::before {
    content: "Show more";
}
details.description.truncated[open] summary::before {
	content: "Show less";
}

.map-and-featured-service {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.map-and-featured-service #services-and-resources-map {
    height: auto;
}
@media screen and (max-width: 768px) {
    .map-and-featured-service {
        display: flex;
        flex-direction: column;
    }
    .map-and-featured-service #services-and-resources-map {
        height: 450px;
    }
}