:root {
    --purple: #814B92;
    --magenta: #B41862;
    --blue: #215494;
    /* --Ogreen: #98B62E;
    --Oorange: #FF8E3C; */
    --original-yellow: #f6b81c;
    --green: #6A7E20;
    --orange: #F56600;
    --yellow: #BA8808;
    --smbc-green: #508328;
    --dark-green: #1c4c1c;
    --light: #ffffff;
    --dark: #888;
    --darker: #2e2e2e;
    --text-colour: #1a1a1a;
    --line-height-body: 1.6;
    --line-height-heading: 1.3;
}
body {
    font-size: 18px;
    line-height: var(--line-height-body);
    color: var(--text-colour);
    background: #f9f9f9;
}
h1, h2, h3, h4 {
    line-height: var(--line-height-heading);
    margin: 3rem 0 1.5rem;
}

/* Accessible, child-friendly scale */
h1 {
    font-size: 2.5rem; /* ~40px */
    font-weight: 600;
}

h2 {
    font-size: 2rem; /* ~32px */
    font-weight: 600;
}

h3 {
    font-size: 1.5rem; /* ~24px */
    font-weight: 500;
}

h4 {
    font-size: 1.25rem; /* ~20px */
    font-weight: 500;
}
/* Paragraphs */
p {
    margin-bottom: 1em;
    max-width: 65ch; /* keeps line length readable */
}

/* Lists */
ul, ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}
a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

a:focus,
button:focus {
  outline: 3px solid #ffbf47; /* high contrast */
  outline-offset: 2px;
}

/******************* CATEGORY HOME CAROUSEL WIDGET *******************/
/* ---------- Stretch Hero Carousel to fit screen width ---------- */
.category-modular .page-content > .container:first-child .widget--carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
/* ---------- position the content relative to a centred 1280px zone ---------- */
@media (min-width: 1280px) {
    .widget--carousel .carousel__item .carousel__content {
        left: calc(50% - 640px); /* start of the invisible 1280px container */
    }
}

/* ---------- Remove space at the top & bottom when page starts with a carousel in Category Homepages ---------- */
.category-modular .page-content {
    margin-top: 0;
}
.category-modular .page-content > .container:first-child .widget-row {
    padding: 0;
    margin: 0 auto;
}
.category-modular .widget-carousel .carousel__item .slide-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 31.25rem;
}
.category-modular .page-content .container {
    max-width: 100vw;
}
.category-modular .page-content .widget-row {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 0;
}
    /* INTRO */
.category-modular .page-content .container:nth-child(2) {
    background: var(--blue);
    padding-bottom: 3rem;
}
.category-modular .page-content .container:nth-child(2) h2 {
    color: white;
    text-align: center;
}
    /* ABOUT */
.category-modular .page-content .container:nth-child(3) {
    background: var(--original-yellow);
    padding-bottom: 3rem;
}
.widget-image .image {
    border-bottom: none;
}
.category-modular .page-content .container:nth-child(3) p {
    color: #1c4c1c;
}
    /* TOWNS */
.category-modular .page-content .container:nth-child(4) {
    padding-bottom: 3rem;
}
.category-modular .page-content .container:nth-child(4) h2 {
    color: var(--dark);
    margin: 3rem 0 1.5rem;
}
.category-modular .page-content .container:nth-child(4) p {
    margin-left: auto;
    margin-right: auto;
}
.category-modular .page-content .container:nth-child(4) .services__grid {
    display: flex;
    flex-wrap: wrap;
}
.category-modular .page-content .container:nth-child(4) .services__grid > .services__grid-cell {
    flex: 0 0 33.333%;
    max-width: unset;
}
/* Mobile: 1 per row */
@media (max-width: 480px) {
  .category-modular .page-content .container:nth-child(4) .services__grid > .services__grid-cell {
    flex: 0 0 100%;
  }
}

/******************* Town Buttons *******************/
.services .service {
    border-color: var(--blue);
    background-color: var(--blue);
    border-radius: 0.5rem;
}
.services .service:hover,
.services .service:focus {
    background-color: #ffffff; /* Changes background on hover and focus states */
    outline-color: transparent; /* Changes outline colour on active state */
}
.services .service:active {
    background-color: #efefef; /* Changes background colour */
    border-color: #efefef; /* Changes border colour on active state */
    outline-color: transparent; /* Changes outline colour on active state */
}
.services .service .service__link,
.services .service .service__heading,
.services .service .list__link,
.services .service .list__link .list__link-text {
    color: #ffffff; /* Changes text colour */
    text-decoration: none; /* Removes underline on active state */
}
.services .service:hover .service__link,
.services .service:focus .service__link,
.services .service:hover .service__link .service__heading,
.services .service:focus .service__link .service__heading,
.services .service:hover .service__link:hover .service__heading,
.services .service:focus .service__link:hover .service__heading,
.services .service:hover .list__link,
.services .service:focus .list__link,
.services .service:hover .list__link .list__link-text,
.services .service:focus .list__link .list__link-text {
    color: var(--blue);
}
.services .service:hover .list__link:hover .list__link-text,
.services .service:hover .list__link:focus .list__link-text {
    text-decoration: underline;
}
.services .service:active .service__link,
.services .service:active .service__heading,
.services .service:active .list__link,
.services .service:active .list__link .list__link-text {
    color: #000000; /* Changes text colour on active state */
    text-decoration: none; /* Removes underline on active state */
}
.services .services__grid-cell:nth-child(6n+1) .service {
  background-color: var(--purple);
  border-color: var(--purple);
}
.services .services__grid-cell:nth-child(6n+1) .service:hover .service__link,
.services .services__grid-cell:nth-child(6n+1) .service:focus .service__link,
.services .services__grid-cell:nth-child(6n+1) .service:hover .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+1) .service:focus .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+1) .service:hover .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+1) .service:focus .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+1) .service:hover .list__link,
.services .services__grid-cell:nth-child(6n+1) .service:focus .list__link,
.services .services__grid-cell:nth-child(6n+1) .service:hover .list__link .list__link-text,
.services .services__grid-cell:nth-child(6n+1) .service:focus .list__link .list__link-text {
    color: var(--purple);
}
.services .services__grid-cell:nth-child(6n+1):hover .service {
    background-color: #ffffff;
    color: var(--purple);
    outline-color: transparent;
}
.services .services__grid-cell:nth-child(6n+2) .service {
  background-color: var(--magenta);
  border-color: var(--magenta);
}
.services .services__grid-cell:nth-child(6n+2) .service:hover .service__link,
.services .services__grid-cell:nth-child(6n+2) .service:focus .service__link,
.services .services__grid-cell:nth-child(6n+2) .service:hover .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+2) .service:focus .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+2) .service:hover .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+2) .service:focus .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+2) .service:hover .list__link,
.services .services__grid-cell:nth-child(6n+2) .service:focus .list__link,
.services .services__grid-cell:nth-child(6n+2) .service:hover .list__link .list__link-text,
.services .services__grid-cell:nth-child(6n+2) .service:focus .list__link .list__link-text {
    color: var(--magenta);
}
.services .services__grid-cell:nth-child(6n+2):hover .service {
    background-color: #ffffff;
    color: var(--magenta);
    outline-color: transparent;
}
.services .services__grid-cell:nth-child(6n+3) .service {
  background-color: var(--blue);
  border-color: var(--blue);
}
.services .services__grid-cell:nth-child(6n+3) .service:hover .service__link,
.services .services__grid-cell:nth-child(6n+3) .service:focus .service__link,
.services .services__grid-cell:nth-child(6n+3) .service:hover .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+3) .service:focus .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+3) .service:hover .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+3) .service:focus .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+3) .service:hover .list__link,
.services .services__grid-cell:nth-child(6n+3) .service:focus .list__link,
.services .services__grid-cell:nth-child(6n+3) .service:hover .list__link .list__link-text,
.services .services__grid-cell:nth-child(6n+3) .service:focus .list__link .list__link-text {
    color: var(--blue);
}
.services .services__grid-cell:nth-child(6n+3):hover .service {
    background-color: #ffffff;
    color: var(--blue);
    outline-color: transparent;
}
.services .services__grid-cell:nth-child(6n+4) .service {
  background-color: var(--green);
  border-color: var(--green);
}
.services .services__grid-cell:nth-child(6n+4) .service:hover .service__link,
.services .services__grid-cell:nth-child(6n+4) .service:focus .service__link,
.services .services__grid-cell:nth-child(6n+4) .service:hover .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+4) .service:focus .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+4) .service:hover .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+4) .service:focus .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+4) .service:hover .list__link,
.services .services__grid-cell:nth-child(6n+4) .service:focus .list__link,
.services .services__grid-cell:nth-child(6n+4) .service:hover .list__link .list__link-text,
.services .services__grid-cell:nth-child(6n+4) .service:focus .list__link .list__link-text {
    color: var(--green);
}
.services .services__grid-cell:nth-child(6n+4):hover .service {
    background-color: #ffffff;
    color: var(--green);
    outline-color: transparent;
}
.services .services__grid-cell:nth-child(6n+5) .service {
  background-color: var(--orange);
  border-color: var(--orange);
}
.services .services__grid-cell:nth-child(6n+5) .service:hover .service__link,
.services .services__grid-cell:nth-child(6n+5) .service:focus .service__link,
.services .services__grid-cell:nth-child(6n+5) .service:hover .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+5) .service:focus .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+5) .service:hover .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+5) .service:focus .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+5) .service:hover .list__link,
.services .services__grid-cell:nth-child(6n+5) .service:focus .list__link,
.services .services__grid-cell:nth-child(6n+5) .service:hover .list__link .list__link-text,
.services .services__grid-cell:nth-child(6n+5) .service:focus .list__link .list__link-text {
    color: var(--orange);
}
.services .services__grid-cell:nth-child(6n+5):hover .service {
    background-color: #ffffff;
    color: var(--orange);
    outline-color: transparent;
}
.services .services__grid-cell:nth-child(6n+6) .service {
  background-color: var(--yellow);
  border-color: var(--yellow);
}
.services .services__grid-cell:nth-child(6n+6) .service:hover .service__link,
.services .services__grid-cell:nth-child(6n+6) .service:focus .service__link,
.services .services__grid-cell:nth-child(6n+6) .service:hover .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+6) .service:focus .service__link .service__heading,
.services .services__grid-cell:nth-child(6n+6) .service:hover .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+6) .service:focus .service__link:hover .service__heading,
.services .services__grid-cell:nth-child(6n+6) .service:hover .list__link,
.services .services__grid-cell:nth-child(6n+6) .service:focus .list__link,
.services .services__grid-cell:nth-child(6n+6) .service:hover .list__link .list__link-text,
.services .services__grid-cell:nth-child(6n+6) .service:focus .list__link .list__link-text {
    color: var(--yellow);
}
.services .services__grid-cell:nth-child(6n+6):hover .service {
    background-color: #ffffff;
    color: var(--yellow);
    outline-color: transparent;
}


    /* VALUES */
.category-modular .page-content .container:nth-child(5) {
    background: var(--purple);
    padding-bottom: 3rem;
}
.category-modular .page-content .container:nth-child(5) h2 {
    color: var(--light);
    margin: 3rem 0 1.5rem;
}
details {
    background: white;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
}
details summary {
  display: list-item;
  list-style: disclosure-closed;
  list-style-position: inside;
  cursor: pointer;
  font-weight: 700;
  padding: 0.25em 1em;
}
details summary::-webkit-details-marker {
  display: inline;
}
details[open] summary {
  list-style: disclosure-open;
  list-style-position: inside;
}
details p {
    padding: 0 2.25rem;
    max-width: 65ch;
}

/*
details {
    background: white;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
}
summary {
    cursor: pointer;
    font-weight: 700;
}
details summary:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}*/

    /* CREDITS */
.category-modular .page-content .container:nth-child(6) {
    padding-bottom: 0;
}
.category-modular .page-content .container:nth-child(6) .widget-row {
    padding-bottom: 0;
}
.category-modular .page-content .container:nth-child(6) h2 {
    color: var(--dark);
    margin: 3rem 0 1.5rem;
    
}
.category-modular .page-content .container:nth-child(7) {
    padding-bottom: 3rem;
}