/* ----- TOWN PAGES (Document pages) ----- */
/******************* Global 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;
    --line-height-body: 1.6;
    --line-height-heading: 1.3;
}
body {
    font-size: 18px;
    line-height: var(--line-height-body);
    color: var(--text-colour);
}
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;
}
a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

a:focus,
button:focus {
  outline: 3px solid #ffbf47; /* high contrast */
  outline-offset: 2px;
}
.site-main {
    margin-bottom: 0;
}
.document-article .site-main {
    margin-bottom: 3rem;
}
.widget-image .image {
    border-bottom: none;
    border-radius: 0.75rem;
}
.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;
}
.editor .s6--twinBtns {
    margin-top: 2rem;
}
.editor .s6--twinBtns .button:last-child {
    margin-top: 0;
    margin-left: 2rem;
}

/******************* Custom styles - Main Column *******************/
section.events {
  margin-top: 3rem;
}
.document-article .editor section.events h2 {
    color: var(--smbc-green);
    font-size: 1.75rem;
}
section.events .event-title {
    cursor: pointer;
    color: var(--smbc-green);
}

/* EVENT CARD */
.event-card {
    border: 2px solid var(--text-colour);
    border-radius: 0.75em;
    margin: 2rem 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.event-content {
    display:flex;
    padding: 1.5rem;
}
.event-meta {
    width: 32%;
    padding-right: 1rem;
    align-self: center;
    text-align:center;
}
.day {
    font-size: 2.5rem;
    color: var(--text-colour);
    margin: 0;
    line-height: 1;
}
.date {
    font-size: 3rem;
    color: var(--text-colour);
    margin: 0 0 0.5rem;
}
.time {
    font-size: 1.5rem;
    color: var(--text-colour);
    margin: 0;
    line-height: 1;
}
.venue {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0.5rem 0;
}
.event-details {
    width: 65%;
    padding-left: 1.5rem;
    min-height: 250px;
    border-left: 2px solid var(--text-colour);
    transition: min-height 0.3s ease;
}
.event-details .button {
    margin: 1rem 0.5rem ;
}
.event-title {
    color: var(--text-colour);
} /*
.event-title:hover {
    text-decoration: underline;
} */

/******************* TOWN BUTTON LINKS *******************/
section.events .button, section.events .button:visited, section.events .button--primary, section.events .button--primary:visited {
    border: 2px solid #191e28;
    color: #191e28;
}
section.events .button:hover, section.events .button:hover::before, section.events .button:focus::before, section.events .button:active::before, section.events .button--primary:hover::before, section.events .button--primary:focus::before, section.events .button--primary:active::before {
    border-color: #191e28;
    color: #191e28;
}

/* ----- Page styles - Sidebar ----- */
.supplement {
    border-radius: 0.75rem;
    padding-bottom: 3rem;
    background-color: var(--light-bg);
}
.supplement__heading, .aside__heading {
    color: var(--text-colour);
    font-size: 1.3rem;
}
.supplement--navigation .list--navigation .list__item {
    border-bottom: 1px solid var(--medium-bg);
    margin: 0;
    padding: 0.75rem 0;
}
.supplement a:not(.button) {
    background-image: -webkit-linear-gradient(bottom, var(--smbc-green) 0, var(--smbc-green) 1px, transparent 1px, transparent 100%);
    background-image: -o-linear-gradient(bottom, var(--smbc-green) 0, var(--smbc-green) 1px, transparent 1px, transparent 100%);
    background-image: linear-gradient(to top, var(--smbc-green) 0, var(--smbc-green) 1px, transparent 1px, transparent 100%);
    background-position: 0 -2px;
    background-repeat: no-repeat;
    background-size: 0 100%;
    color:  var(--smbc-green);
}
.supplement a:not(.button):hover, .supplement a:not(.button):focus {
    background-size: 0 100%;
    text-decoration: none;
    -webkit-transition: background-size .2s ease-out;
    -o-transition: background-size .2s ease-out;
    transition: background-size .2s ease-out;
}
.supplement>*:last-child>*:last-child {
    border-bottom: none;
    text-align: center;
    padding-top: 2.5rem;
}
.supplement>*:last-child>*:last-child a {
    font-weight: 700;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    font-size: 1.25rem;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    color: var(--light);
    background-color: var(--smbc-green);
}
.supplement>*:last-child>*:last-child a:hover {
    color: var(--safer6-yellow);
    text-decoration: underline;
}

@media (max-width: 768px) {
      .event-content {
          flex-direction: column;
          }
      .event-details {
          width: 100%;
          max-height: unset;
          padding: 1.5rem 0 0;
          border-top: 2px solid var(--dark);
          border-left: none;
      }
   .event-meta {
       width: 100%;
       display: flex;
       align-items: center;
       padding: 0;
   }
    .event-meta div {
       width: 50%;
        text-align: left;
    }
    .day {
        font-size: 1.5rem;
    }
    .date {
        font-size: 1.75rem;
    }
    .time {
        font-size: 1.5rem;
    }
    .venue {
        font-size: 1.125rem;
    }
    .event-details .button {
        margin: 1rem;
        width: 90%;
    }
}
/****************************************** 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) ********************/