/********** HOME STYLES **********/
:root {
    --smbc-green: #508328;
    --safer6-yellow: #feed05;
    --text-colour: #1c212c;
    --light: #ffffff;
    --light-bg: #f5f5f7;
    --medium-bg: #e4e9f4;
    --medium-grey: #595959;
    --dark-grey: #2e2e2e;
}
.site-main {
    margin-bottom: 0;
}
.widget-image .image {
    border-bottom: none;
    border-radius: 0.75rem;
}
.widget-width--20 {
    width: 20%;
}
.widget-width--60 {
    width: 60%;
}
.widget .editor .s6--twinBtns .button:last-child {
    margin-bottom: 1.5rem;
    margin-left: 2rem;
}


/****************************************** CUSTOM STYLES ******************************************/
/* ---------- Page width breakout in Index Homepage ---------- */
.index-modular .page-content {
    /* margin-top: 0; */
}
.index-modular .page-content .container .widget-row {
    padding-top: 5rem;
    padding-bottom: 2rem;
}
/* Break-out rows - 3, 5, 8 */
.index-modular .page-content .container:nth-child(3), 
.index-modular .page-content .container:nth-child(5), 
.index-modular .page-content .container:nth-child(6), 
.index-modular .page-content .container:nth-child(8) {
    max-width: 100vw;
    background-color: var(--medium-bg);
}
.index-modular .page-content .container:nth-child(3) .widget-row, 
.index-modular .page-content .container:nth-child(5) .widget-row, 
.index-modular .page-content .container:nth-child(6) .widget-row, 
.index-modular .page-content .container:nth-child(8) .widget-row {
    max-width: 1280px;
    margin: 0 auto 3rem;
}
.index-modular .page-content .container:nth-child(6) {
    background-color: var(--light);
}
.index-modular .page-content .container:nth-child(8) {
    max-width: 100vw;
    background-color: var(--smbc-green);
    border-bottom: 1px solid var(--light)
}

/* Intro - row 2 */
.index-modular .page-content .container:nth-child(2) .widget-image img {
    /* height: 400px; */
}

/* Image Boxes - row 3 */
.index-modular .page-content .container:nth-child(3) .editor {
    display: flex;
    justify-content: center;
}
.smbc--imgBox {
    text-align: center;
    max-width: 90%;
}
.smbc--imgBox img {
    text-align: center;
}
.smbc--imgBox a {
    border-radius: 0.5rem;
}

/* 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;
}

/***** Slider Container *****/
.logo-slider {
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* Fade edges */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logo-slider::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.logo-slider::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

/* Track */
.logo-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

/* Slide */
.logo {
  flex: 0 0 auto;
  width: 200px;
  margin: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  max-width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.logo img:hover {
  opacity: 0.8;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 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;
}

/****************************************** THEME STYLES ******************************************/


/******************* 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 {
    background-color: transparent !important; /* Changes Header Footer colour */
}
.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 {
    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) ********************/