/********** CATEGORY HOME STYLES **********/
:root {
    --smbc-green: #508328;
    --safer6-yellow: #feed05;
    --text-colour: #1c212c;
    --light: #ffffff;
    --light-bg: #f5f5f7;
    --medium-bg: #e4e9f4;
    --light-grey: #d0d4db;
    --medium-grey: #595959;
    --dark-grey: #2e2e2e;
}
.site-main {
    margin-bottom: 0;
}
.document-article .site-main {
    margin-bottom: 3rem;
}
.widget-image .image {
    border-bottom: none;
    border-radius: 0.75rem;
}
.widget-width--20 {
    width: 20%;
}
.widget .editor .s6--twinBtns .button:last-child {
    margin-bottom: 1.5rem;
    margin-left: 2rem;
}
.document-article h1, .document-article .h1, .document-article h2, .document-article .h2, 
.document-article .form__heading {
    color: var(--smbc-green);
}
.document-article .editor h2 {
    font-size: 2rem;
}
.document-article .editor h3 {
    font-size: 1.75rem;
}

/****************************************** CUSTOM STYLES ******************************************/
/******************* ABOUT SAFER 6 *******************/

/* ---------- Page width breakout ---------- */
.container .widget-row {
    padding-top: 5rem;
    padding-bottom: 2rem;
}
/* Break-out rows - 4, 6 */
.category-modular .page-content .container:nth-child(4), 
.category-modular .page-content .container:nth-child(7) {
    max-width: 100vw;
    background-color: var(--medium-bg);
}
.category-modular .page-content .container:nth-child(4) .widget-row, 
.category-modular .page-content .container:nth-child(7) .widget-row {
    max-width: 1280px;
    margin: 0 auto 3rem;
}
.index-modular .page-content .container:nth-child(6) {
    background-color: var(--light);
}

/* Intro - row 1 */
.category-modular .page-content .container:nth-child(1) .widget-row {
    padding: 0;
    background-image: url('/safer6/images/safer_6_logo_500.png');
    background-size: 350px;
    background-repeat: no-repeat;
    background-position: calc(100% - 50px) top;
}
.category-modular .page-content .container:nth-child(1) .widget-row .editor {
    max-width: 75ch;
    min-height: 270px;
}

/* remove bottom margin & padding - row 2, 5, 8 */
.container:nth-child(2) .widget-row, .container:nth-child(5) .widget-row, .container:nth-child(8) .widget-row {
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: center;
}

/* remove top margin & padding - row 3, 6, 9 */
.container:nth-child(3) .widget-row, .container:nth-child(6) .widget-row, .container:nth-child(9) .widget-row {
    padding-top: 1rem;
}
.container:nth-child(9) .widget-row {
    padding-top: 1.5rem;
}

/* 2-col row - row 4 */
.container:nth-child(4) .widget-row .widget-width--50:first-child {
    border-right: 1px solid var(--text-colour);
}
.container:nth-child(4) .widget-row ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.container:nth-child(4) .widget-row h2, .container:nth-child(4) .widget-row .editor p {
    text-align: center;
}
.container:nth-child(4) .widget-row ul li {
    flex: 0 0 50%;
}

/* Icon Boxes & heading - row 3 */
.container:nth-child(2) .widget-row {
    border-top: 1px solid var(--light-grey);
}
.s6--iconCard img {
    max-width: 75%;
}
.s6--iconCard h4 {
    font-size: 1.25rem;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .category-modular .page-content .container:nth-child(1) .widget-row .editor {
    max-width: 60ch;
    min-height: 270px;
}
    .category-modular .page-content .container:nth-child(4) .widget-row ul {
    display: block;
}
    .category-modular .page-content .container:nth-child(4) .widget-row h2, .category-modular .page-content .container:nth-child(4) .widget-row p {
        text-align: left;
        padding-left: 2rem;
}
}
@media (max-width: 820px) {
    .category-modular .page-content .container:nth-child(1) .widget-row {
        background-size: 250px;
        background-position: right center;
}
    .category-modular .page-content .container:nth-child(1) .widget-row .editor {
        max-width: 50ch;
        min-height: 270px;
        }
    .container:nth-child(3) .widget-row, .container:nth-child(9) .widget-row, .container:nth-child(6) .widget-row {
        display: flex;
        flex-wrap: wrap;
        }
    .container:nth-child(3) .widget-row > .widget-width--20, 
    .container:nth-child(9) .widget-row > .widget-width--20, 
    .container:nth-child(6) .widget-row > .widget-width--33 {
        flex: 0 0 33.333%;
        }
    .container:nth-child(9) .widget-row > .widget-width--20 .widget-image {
        padding: 1rem;
        }
    .container:nth-child(4) .widget-row .widget-width--50:first-child {
        margin-bottom: 3rem;
        }
}

@media (max-width: 480px) {
    .category-modular .page-content .container:nth-child(1) .widget-row {
        background-image: 250px;
        background-position: center bottom;
        padding-bottom: 17rem;
    }
    .container:nth-child(3) .widget-row > .widget-width--20 {
        flex: 0 0 50%;
    }
    .container:nth-child(6) .widget-row > .widget-width--33 {
        flex: 0 0 100%;
    }
    .container:nth-child(9) .widget-row > .widget-width--20 .widget-image {
        padding: 0.5rem;
    }
}
/******************* OUR PARTNERS *******************/

.s6--partnerLogos {
    display: flex;
    flex-wrap:wrap;
    gap: 4rem;
}
.s6--partnerLogos img {
    width: 250px;
    height: auto; /* maintain aspect ratio */
    display: block;
}

/******************* CONTACT US *******************/
.s6--contact {
    display: flex;
    flex-wrap: wrap;
}
.s6--contact  > * {
    flex: 1 1 33.333%;
}
.s6--contact > :first-child, .s6--contact > :last-child {
    flex: 0 0 100%;
    margin-bottom: 3rem;
}
.s6--contact > div {
    font-size: 1.25rem;
    background-color: var(--medium-bg);
    margin: 1.5rem 1.75rem 1.5rem 0;
    padding: 2rem;
    border-radius: 1rem;
}
.s6--contact > div:nth-child(3) {
    margin-right: 0;
}
.s6--contact > div h4 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-colour);
}

/* Popular Services - row 4 */
.index-modular .page-content .container:nth-child(4) .services__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.index-modular .page-content .container:nth-child(4) .services__grid > .services__grid-cell {
    flex: 0 0 33.333%;
    max-width: unset;
}
/* Tabs */
@media (max-width: 768px) {
    .services__grid-cell {
        max-width: 100%;
        padding: 0 1rem; /* reduce spacing if needed */
    }
}
/* Mobile: 1 per row */
@media (max-width: 480px) {
  .index-modular .page-content .container:nth-child(4) .services__grid > .services__grid-cell {
    flex: 0 0 100%;
  }
}
.service {
    border-radius: 0.5rem;
}

/* FAQs - row 7 */
.index-modular .page-content .container:nth-child(7) .smbc--faqs {
    max-width: 75%;
    margin: 0 auto;
}
.index-modular .page-content .container:nth-child(7) .widget__heading {
    text-align: center;
} 
details {
    background: var(--medium-bg);
    padding: 0.75rem;
    margin-bottom: 1rem;
    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: 85ch;
}

/* Newsletters - row 8 */
.smbc--newsletterCTA h2 {
    margin: 0;
    color: var(--light);
}
.smbc--newsletterCTA p {
    color: var(--light);
    padding-right: 5rem;
}

/****************************************** STANDARD THEME STYLES (with custom main nav & carousel) ******************************************/


/******************* MAIN NAV MENU *******************/
/*.menu-navigation .nav ul li a:hover {
    text-decoration: none;
}*/
.menu-navigation .nav__secondary ul li:first-child a {
    font-size: 1.25rem;
    font-weight: 700;
}
/******************* HEADER & FOOTER *******************/
.site-header, .site-footer,
.site-footer .nav--social-links .list__link {
    background-color: #508328 !important; /* Changes Header Footer colour */
}
.nav--social-links .list__link {
    border: 1px solid #508328;
    background-color: #508328;
    color: #fff;
}
/******************* CAROUSEL WIDGET *******************/
.index-modular .page-content > .container:first-child .widget--carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: var(--smbc-green);
    border-top: 1px solid var(--light);
    margin-top: -106px;
}
/* ---------- position the content relative to a centred 1280px zone ---------- */
@media (min-width: 1281px) {
    .widget--carousel .carousel__item .carousel__content {
        left: calc(50% - 640px); /* start of the invisible 1280px container */
    }
}
.index-modular .page-content > .container:first-child .widget-row {
    max-width: 1280px;
    padding: 0;
    margin: 0 auto;
}
.index-modular .widget-carousel .carousel__item .slide-background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 37.875rem;
}
.widget-carousel .carousel:not(.flickity-enabled) .carousel__content {
    width: 65%;
    border-radius: 1rem;
    background-color: rgba(45,53,71,0.75);
    font-size: 1.5rem;
}

/******************* HEADINGS & SUBHEADINGS *******************/
.in-the-community__title,
.widget__heading
h1, .h1, h2, .h2, h3, .form__heading, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--smbc-green);
}

/******************* Reduce bottom margin of specific row - Hello widget *******************/
.widget-row:has(.widget--hello) {
    margin-bottom: 1em; 
}


/******************* POPULAR SERVICES *******************/
.services .service {
    border-color: #508328; /* Changes border colour */
    background-color: #508328; /* Changes background colour */
}
.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: #508328; /* Changes text colour on hover and active states */
}
.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 */
}

/******************* NAVIGATION *******************/
.widget-navigation .list__link {
    background-color: #508328; /* Changes background colour */
    border-color: var(--light); /* Changes border colour */
    justify-content: center; /* Centers the text */
    text-decoration: none; /* Removes underline */
    border-radius: 0.5rem;
}
.widget-navigation .list__link:hover,
.widget-navigation .list__link:focus {
    background-color: #ffffff; /* Changes background colour on hover & focus states */
}
.widget-navigation .list__link:active {
    background-color: #efefef; /* Changes background colour on active state */
    border-color: #efefef; /* Changes border colour on active state */
    outline-color: #000000; /* Changes outline colour on active state */
}
.widget-navigation .list__link .list__heading {
    line-height: 2;
    color: #ffffff; /* changes text colour */
    padding-right: 0 !important; /* Removes padding for central alignment */
}
.widget-navigation .list__link:hover .list__heading,
.widget-navigation .list__link:focus .list__heading {
    color: #508328; /* Changes text colour */
    text-decoration: underline; /* Adds underline */
}
.widget-navigation .list__link:active .list__heading  {
    color: #000000; /* Changes text colour on active state */
    text-decoration: none; /* Removes underline on active state */
}
.widget-navigation .list__link .icon {
	display: none; /* Hide the icon */
}


/******************* BUTTON LINKS - (primary & variations) *******************/
a:hover {
    color: #508328;
}
.button, .button:visited, .form__label--upload, .form__label--image-upload, .button--primary, .form__dropzone .form__dropzone-upload-button, .form__footer .button--secondary, .engagement__comment-form .engagement__comment-form-close, .widget--myaccount-sign-in a, .widget--myaccount-api-links a, .widget--myaccount-organisation-account-links a, .widget--myaccount-organisation-links a, .form__label--upload:visited, .form__label--image-upload:visited, .button--primary:visited, .form__dropzone .form__dropzone-upload-button:visited, .form__footer .button--secondary:visited, .engagement__comment-form .engagement__comment-form-close:visited, .widget--myaccount-sign-in a:visited, .widget--myaccount-api-links a:visited, .widget--myaccount-organisation-account-links a:visited, .widget--myaccount-organisation-links a:visited {
    border: 2px solid #508328;
    color: #508328;
}
.button:hover::before, .button:focus::before, .button:active::before, .form__label--upload:hover::before, .form__label--image-upload:hover::before, .button--primary:hover::before, .form__dropzone .form__dropzone-upload-button:hover::before, .form__footer .button--secondary:hover::before, .engagement__comment-form .engagement__comment-form-close:hover::before, .widget--myaccount-sign-in a:hover::before, .widget--myaccount-api-links a:hover::before, .widget--myaccount-organisation-account-links a:hover::before, .widget--myaccount-organisation-links a:hover::before, .form__label--upload:focus::before, .form__label--image-upload:focus::before, .button--primary:focus::before, .form__dropzone .form__dropzone-upload-button:focus::before, .form__footer .button--secondary:focus::before, .engagement__comment-form .engagement__comment-form-close:focus::before, .widget--myaccount-sign-in a:focus::before, .widget--myaccount-api-links a:focus::before, .widget--myaccount-organisation-account-links a:focus::before, .widget--myaccount-organisation-links a:focus::before, .form__label--upload:active::before, .form__label--image-upload:active::before, .button--primary:active::before, .form__dropzone .form__dropzone-upload-button:active::before, .form__footer .button--secondary:active::before, .engagement__comment-form .engagement__comment-form-close:active::before, .widget--myaccount-sign-in a:active::before, .widget--myaccount-api-links a:active::before, .widget--myaccount-organisation-account-links a:active::before, .widget--myaccount-organisation-links a:active::before {
    border-color: #508328;
}
.button--secondary:hover, .button--secondary:active, .button--secondary:focus, .boxed .form__footer .button:hover, .aside__section .form__footer .button:hover, .widget-filtered-listing-filter .form__action--secondary .button:hover, .boxed .form__footer .button:active, .aside__section .form__footer .button:active, .widget-filtered-listing-filter .form__action--secondary .button:active, .boxed .form__footer .button:focus, .aside__section .form__footer .button:focus, .widget-filtered-listing-filter .form__action--secondary .button:focus {
    border-color: #508328;
    color: #508328;
}
.button.button--white, .button.button--white:visited {
    border-color: #fff;
    color: #fff;
}
.button.button--white:hover::before, .button.button--white:focus::before, .button.button--white:active::before {
    border-color: #fff;
}
.boxed .form__footer .button, 
.boxed .form__footer .button:hover, 
.boxed .form__footer .button:active, 
.boxed .form__footer .button:focus {
    border-color: #191e28;
    color: #191e28;
}

/******************** Image + Block Button Cards ********************/
.button--block, .button--block:visited, .button--block.button, .button--block.button:visited {
    background-color: #508328;
    border-color: #508328;
    color: #fff;
}
.button--block:hover, .button--block:focus, .button--block:active, .button--block:visited:hover, .button--block:visited:focus, .button--block:visited:active, .button--block.button:hover, .button--block.button:focus, .button--block.button:active, .button--block.button:visited:hover, .button--block.button:visited:focus, .button--block.button:visited:active {
    background-color: #fff;
    color: #508328;
}
.button--block:hover::before, .button--block:focus::before, .button--block:active::before, .button--block:visited:hover::before, .button--block:visited:focus::before, .button--block:visited:active::before, .button--block.button:hover::before, .button--block.button:focus::before, .button--block.button:active::before, .button--block.button:visited:hover::before, .button--block.button:visited:focus::before, .button--block.button:visited:active::before {
    border-color: #508328;
}

/******************** Text + Button Cards ********************/


/******************* NEWS & EVENTS *******************/
.news-card--primary .news-card__content:hover, 
.news-card--primary .news-card__content:focus, 
.news-card--primary .news-card__content:active {
    background-color: #508328;
}
.news-events-grid__single:nth-child(4) .news-card__feature-date {
    background-color: #508328;
}
.news-events-grid__single:nth-child(4) .news-card__content:hover, 
.news-events-grid__single:nth-child(4) .news-card__content:focus, 
.news-events-grid__single:nth-child(4) .news-card__content:active {
    background-color: #508328;
}

/******************* MODIFIED NEWS & EVENTS *******************/
/******************* BANNERS *******************/



/******************* CONTENT WIDGET *******************/
.do-not-display {
    display: none;
}
.site-content .page-content .table-wrapper table:not([class]) td {
    border: none;
    text-align: center;
}

/******************** Paragraphs ********************/
.boxed--blue {
    background-color: #CAE2F7; /* Pale Sky Blue */
    border-color: #CAE2F7;
}


/******************** Images ********************/
/******************** Videos (Youtube embeds) ********************/