/* MASTER SITE CSS - START */
/* global variable declarartions for use in setting spacing */
:root {
    /* Global spacing variables */ 
--sc-margin: 8vw;
	--sc-margin-dbl: calc(2 * var(--sc-margin));
	--sc-margin-half: calc(0.5 * var(--sc-margin));
	--sc-margin-neg: calc(-1 * var(--sc-margin));
	--sc-margin-half-neg: calc(-1 * var(--sc-margin-half));

--sc-gutter: 24px;
	--sc-gutter-dbl: calc(2 * var(--sc-gutter));
	--sc-gutter-half: calc(0.5 * var(--sc-gutter));
	--sc-gutter-neg: calc(-1 * var(--sc-gutter));
	--sc-gutter-dbl-neg: calc(-1 * var(--sc-gutter-dbl));
	--sc-gutter-half-neg: calc(-1 * var(--sc-gutter-half));

--sc-padding: 16px;
	--sc-padding-big: calc(4 * var(--sc-padding));  /* NOTE – Currently changing to the --sc-margin value on tablet and mobile, which is the equavelent of padding-dbl */
	--sc-padding-dbl: calc(2 * var(--sc-padding));
	--sc-padding-half: calc(0.5 * var(--sc-padding));
	--sc-padding-neg: calc(-1 * var(--sc-padding));
	--sc-padding-dbl-neg: calc(-1 * var(--sc-padding-dbl));
	--sc-padding-half-neg: calc(-1 * var(--sc-padding-half));

/*--sc-full-width: calc(100vw - var(--sc-margin));*/
	--sc-content-width: 1440px;

--sc-padding-btn: 16px; 
--sc-padding-btn-vert: 8px; 
  
		/* global colours */
    --sc-primary: #0D3D8B;
    --sc-secondary: #042D5A;
		--sc-accent: #F90201;
    --sc-text: #2D3840;
    --sc-primary-light: #B5DFF1;
		--sc-neutral-light: #F5F9FA;
		--sc-neutral-dark: #DBECF4;
		
		--sc-btn: #fff;
    --sc-btn-hover: var(--sc-accent);
		--sc-btn-border-color: var(--sc-accent);
   
		/* design varables */
    --sc-radius-btn: 2px;
    --sc-radius-box: 5px;
    --sc-border-width: 1px;
    --sc-border-accent: 4px;
		--sc-border-width-btn: 1px;
		--sc-icon-size: 16px;
		--sc-icon-nav-dot: 10px;
		--sc-icon-nav-arrow: 24px;
		
		/* global fonts */
		--sc-font-body: "Montserrat", sans-serif;
		--sc-font-heading: "EB Garamond", "Times New Roman", serif;;
   
		/* global font size variables – View port 900 - 1440 */
		--sc-h1-clamp: clamp(2.5rem, -0.8333rem + 5.9259vw, 4.5rem); /* 40-72px */
		--sc-h2-clamp: clamp(2rem, 0.75rem + 2.2222vw, 2.75rem); /* 32-44px */
		--sc-h3-clamp: clamp(1.625rem, 1.2083rem + 0.7407vw, 1.875rem); /* 26-30px */
		--sc-h4-clamp: clamp(1.25rem, 0.9375rem + 0.5556vw, 1.4375rem); /* 20-23px */
		--sc-h5-clamp: clamp(1.125rem, 0.8125rem + 0.5556vw, 1.3125rem); /* 18-21px */
		--sc-h6-clamp: var(--sc-body-clamp); /* 16-18px */
		--sc-body-clamp: clamp(1rem, 0.7917rem + 0.3704vw, 1.125rem); /* 16-18px */
		--sc-body-sm-clamp: clamp(0.875rem, 0.6667rem + 0.3704vw, 1rem); /* 14-16px */
		/* --sc-body-sm-clamp: clamp(0.875rem, 0.7708rem + 0.1852vw, 0.9375rem); 14-15px */
		--sc-accordion-clamp: clamp(1.5rem, 1.0833rem + 0.7407vw, 1.75rem); /* to look like small h3 24-28px */
/*		--sc-intro-clamp: ;*/
/*		--sc-menu-h1-clamp: clamp(1.875rem, 0.8333rem + 1.8519vw, 2.5rem);  30-40px */
/*		--sc-menu-h2-clamp: var(--sc-body-clamp);   same as body */
	
		/* line height for body copy */  	
		--sc-body-lh: 1.5;
}  
			
 /*  Media Query – Tablet  */
@media screen and (max-width: 1024px) {
	:root {
		--sc-margin: 32px;
		--sc-gutter: 16px;
		--sc-padding: 12px;
		--sc-padding-big: var(--sc-margin);
	}
}

/*  Media Query – Mobile  */
@media screen and (max-width: 767px) {
	:root {
		--sc-margin: 16px;
		--sc-gutter: 12px;
		--sc-padding: 8px;
	}
}

/* ----------------------------------------------------------
   TEXT SETTINGS
   ---------------------------------------------------------- */
/* adjust heading spacing (H2 – 5)  - only within text editor, accordion, and sc widgets */
.elementor-widget-text-editor .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-elementskit-accordion .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-n-accordion .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-image-content-v2 .elementor-widget-container :is(h2, h3, h4, h5),
.elementor-widget-content .elementor-widget-container :is(h2, h3, h4, h5) {
  margin-top: 1em; /* scales with text size */
  margin-bottom: var(--sc-padding);
}
/* removes top margin from heading when it directly follows the lead-in text label */
.sc-content .sc-leadin-text + :is(h2, h3, h4, h5) {
  margin-top: 0;
}
/* adjust H6 spacing - only within text editor, accordion, and sc widgets */
.elementor-widget-text-editor .elementor-widget-container h6,
.elementor-widget-elementskit-accordion .elementor-widget-container h6,
.elementor-widget-n-accordion .elementor-widget-container h6,
.elementor-widget-image-content-v2 .elementor-widget-container h6,
.elementor-widget-content .elementor-widget-container h6 {
  margin-bottom: var(--sc-padding-half);
}
/* paragraph spacing - only within text editor, accordion, and sc widgets */
.elementor-widget-text-editor .elementor-widget-container p,
.elementor-widget-elementskit-accordion .elementor-widget-container p,
.elementor-widget-n-accordion .elementor-widget-container p,
.elementor-widget-image-content-v2 .elementor-widget-container p,
.elementor-widget-content .elementor-widget-container p {
  margin-block-start: 0;
  margin-block-end: var(--sc-padding); 
}

/* Remove top margin from first element and bottom margin from last element, within a text box */
.elementor-widget-container :is(p, h2, h3, h4, h5, h6, blockquote, ul, ol):first-child {
  margin-top: 0;
}
.elementor-widget-container :is(p, h2, h3, h4, h5, h6, blockquote, ul, ol):last-child {
  margin-bottom: 0;
}


/* left bullet indent and spacing after last bullet */
ul, ol {
	margin-bottom:  var(--sc-padding);
  padding-left: 20px;
}

/*  sets padding between bullets */
li {
  padding-bottom: var(--sc-padding-half);
}

/* Remove padding after last bullet */
li:last-child {
  padding-bottom: 0;
}

/* Fix Elementskit accordion bullet alignment */
.elementskit-card-body ul,
.elementskit-card-body ol {
  padding-left: 20px !important;
  margin: 0 0 var(--sc-padding) !important;
}
.elementskit-card-body :is(ul, ol):last-child {
  margin-bottom: 0 !important;
}

.elementskit-card-body li {
  padding-left: 0 !important;
	padding-bottom: var(--sc-padding-half);
}
.elementskit-card-body li:last-child {
  padding-bottom: 0 !important;
}

		/* Set paragraph spacing for notices – site wide */
.notice_content p {
		margin-bottom: 10px;
		margin-top: 0px  !important;
}

/* blockquote style */
blockquote {
    font-family: var(--sc-font-heading);
    font-weight: 300;
    font-size: var(--sc-h4-clamp);
    color: var(--sc-primary-light);
    line-height: 1.5;
    margin-inline: 0;
    margin-bottom: var(--sc-padding);
		border-left: var(--sc-border-accent) solid var(--sc-primary-light);
    padding-left: var(--sc-padding);
}

.elementskit-card-body blockquote,
.elementskit-card-body blockquote p {
  font-family: var(--sc-font-heading) !important;
  font-weight: 300 !important;
  font-size: var(--sc-h4-clamp) !important;
  color: var(--sc-primary-light) !important;
  line-height: 1.5 !important;
		margin-inline: 0;
    margin-bottom: var(--sc-padding);
		border-left: var(--sc-border-accent) solid var(--sc-primary-light);
    padding-left: var(--sc-padding);
}


/* intro text style */
.sc-intro-text,
.sc-intro-text p {
    font-family: var(--sc-font-heading);
    font-weight: 300;
    font-size: var(--sc-h3-clamp);
    color: var(--sc-primary);
    line-height: 1.5;
    text-align: center;
    margin: 0px;
}

.sc-intro-text p:not(:last-child) {
    margin-bottom: var(--sc-padding);
}

/* h6 btn style */
h6 a {
    background-color: var(--sc-btn);
    padding: var(--sc-padding-btn-vert) var(--sc-padding-btn);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
		border-style: solid;
		border-width: var(--sc-border-width-btn);
		border-color:	var(--sc-btn-border-color);
    border-radius: var(--sc-radius-btn);
		
    font-family: var(--sc-font-body);
    font-size: var(--sc-body-sm-clamp);
		font-weight: 400;
 		text-transform: uppercase;
		color: var(--sc-accent);
    vertical-align: sub;
    display: inline-block;
}

h6 a:hover {
    background-color: var(--sc-btn-hover);
		color: #fff;
}
		
/* button classes */
#sc-btn-reverse,
.dark-bg .elementor-button {
		border-color: #fff;
		color: #fff;
		}
#sc-btn-reverse:hover, 
.dark-bg .elementor-button:hover {
		border-color: var(--sc-accent);
		background-color: var(--sc-accent);
		color: #fff;
		}

/* table styling */
table {
    border-collapse: collapse;
}
th, td {
    padding: var(--sc-padding-half) !important;
    background-color: transparent !important;
}
tr:hover td {
    background-color: transparent !important;
}
/* a class to add to a column to remove horizontal borders. */
.sc-table-column-spacer {
  border-top: none;
  border-bottom: none;
}


/* ==========================================================
   CLASSS FOR FIRST LEVEL CONTAINERS
	 Applys page margins with padding to containers with this class
   MUST NOT be added to inner containers
   ========================================================== */

.page-margin-0-top-btm {
  /*max-width: var(--sc-content-width); */
  margin-inline: auto;
  padding-inline: var(--sc-margin);
	padding-bottom: 0px;
	padding-top: 0px;
/*	box-sizing: border-box; */
}
.page-margin-0-top {
  /* max-width: var(--sc-content-width); */
  margin-inline: auto;
  padding-inline: var(--sc-margin);
	padding-bottom: var(--sc-padding-big);
	padding-top: 0px;
}
.page-margin {
  /*max-width: var(--sc-content-width); */
  margin-inline: auto;
  padding-inline: var(--sc-margin);
	padding-bottom: var(--sc-padding-big);
	padding-top: var(--sc-padding-big)
/*	box-sizing: border-box; */
}
 /*  Media Query page margins – Tablet & mobile   THIS BECOMES REDUNDANT SINCE I HAVE MADE PADDING-BIG EQUAL SC-MARGIN ON TABLE AND MOBILE
@media (max-width: 1024px) {
  .page-margin-first-box,
  .page-margin {
    padding-bottom: var(--sc-margin);
  }
}*/

/* ==========================================================
   CLASS STYLES FOR DARK CONTAINERS
		to change text and button colour
   ========================================================== */

.dark-bg {
    color: #fff; 
}

.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg p,
.dark-bg a,
.dark-bg li,
.dark-bg span, 
.dark-bg blockquote,
.dark-bg blockquote p{
    color: inherit; 
}
/* this forces elementor to apply white to blockquote */
.dark-bg .elementor-widget-text-editor blockquote,
.dark-bg .elementor-widget-text-editor blockquote p {
    color: #fff;
}

/* Button inside dark containers are declared with the button classes. */

/* Link color inside dark containers */
.dark-bg a {
    color: var(--sc-accent);
}

/* White on hover */
.dark-bg a:hover {
    color: #ffffff;
}



/* ==========================================================
   PAGES WITH SIDEBAR - CLASS ADDED TO RIGHT HAND CONTAINER
   Delete for sites that dont use sidebar
   ========================================================== */
div:has( + .spacific-sidebar) {
		width:100%;
}
.spacific-sidebar {
    background-color: #E9EDF0;
    --width: 30.8% !important;
		max-width: 450px !important;
		min-width: 300px !important;
    --padding-block-start: var(--sc-padding-dbl) !important;
    --padding-block-end: var(--sc-padding-dbl) !important;
    --padding-inline-start: var(--sc-padding-dbl) !important;
    --padding-inline-end: var(--sc-padding-dbl) !important;
}
@media only screen and (max-width: 768px) {
	.spacific-sidebar {
    --width: 100% !important;
	}	
}

/* This stops svg images changing size when they have a link applied*/
.elementor-widget-image a img[src$=".svg"] {
    width: 100%;
}

/* remove the browser default clear cross from search inputs */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

/* Social icons (header and footer) */
.social-icons .elementor-icon-list-text .spacific-social-icon i {
	color: var(--e-global-color-primary)!important;
	font-size: 21px;
}
.social-icons.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin-left:0;
	margin-right:0;
}
.social-icons.elementor-widget .elementor-icon-list-items.elementor-inline-items {
	margin-left:0;
	margin-right:0
}
.social-icons .elementor-icon-list-text .spacific-social-icon {
	background: #fff;
	padding: 5px;
	border-radius: 100px;
	color: #000 !important;
	margin-right:18px
}
.social-icons.elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:last-child .spacific-social-icon {
	margin-right:0;
}

/* Quicklinks styling (header and footer) */
.quicklinks-menu nav ul li a {
	background-color: var(--sc-primary)!important;
	color:var(--sc-secondary)!important;
}
.quicklinks-menu nav ul li a:hover, .quicklinks-menu nav ul li a:active, .quicklinks-menu nav ul li a:focus {
	background-color: #fff!important;	
	color:var(--sc-text)!important;
}
#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 .quicklinks-menu .elementor-widget-container  {
	margin:0!important
}

/* footer styles */
.footer-link{color:#fff!important;}
.elementor-location-footer .elementor-nav-menu--dropdown {display:none;}
.elementor-location-footer li { list-style-type: none; }
@media only screen and (max-width: 700px) {
		.mobile-copyright .elementor-icon-list-items.elementor-inline-items li:nth-child(2)::after {
			display: none !important;
		}
}

.wtm-vert-menu a.elementor-item {
	display: block;
}
.wtm-nav-search input::placeholder {
	opacity: 1 !important;
}
#wtm-nav-search-wrap, #wtm-ql-wrap, #wtm-mm-wrap {
	display: none;
}
.wtm-vert-menu a.elementor-item span {
	font-size: 16px;
	line-height: 16px;
}
.wtm-search-trigger-active, .wtm-ql-trigger-active {
	background: #094b8d;
}
.wtm-mm-trigger-active {
	background: #0080AF;
}
ul.sub-menu {
	height: 100vh;
	background: #0080AF;
	width: 400px !important;
}
#wtm-mm-wrap nav > ul > li:hover {
	background: #0080AF;
}
#wtm-mm-wrap nav > ul > li a{
	color: #fff !important;
}
#wtm-mm-wrap nav > ul > li > ul.sub-menu > li > ul.sub-menu {
	background: #22AACB !important;
}
#wtm-mm-wrap nav > ul > li > ul.sub-menu > li a.highlighted, #wtm-mm-wrap nav > ul > li > ul.sub-menu > li a:hover, #wtm-mm-wrap nav > ul > li > ul.sub-menu > li:hover {
	background: #22AACB !important;
}
#wtm-mm-wrap .mega-menu-item-has-children {
	position: static !important;
}
#wtm-mm-wrap .mega-sub-menu {
	height: 100vh !important;
}
#wtm-mm-wrap .mega-sub-menu .mega-sub-menu {
	background: #22AACB !important;
}
#wtm-mm-wrap .mega-sub-menu .mega-sub-menu .mega-menu-link:hover {
	background: #0B3876 !important;
}
#wtm-mm-wrap .mega-menu-wrap > ul.mega-menu > .mega-menu-item-has-children > .mega-sub-menu > .mega-menu-item-has-children.mega-toggle-on > a {
	background: #22AACB !important;
}
body {
	min-height: 100vh;    
	display: flex;
	flex-direction: column;
}
body > main#content, body > div.elementor-location-single {
	flex: 1;
}
div.elementor-location-footer {
	margin-top:auto
}
/* MASTER SITE CSS - END */

		/* Class to make Buttons to be full width. must add class to elementor button id - is this still required?????
#btn-wide { 
	display:block; 
}
.btn-wide { 
	display:block; 
}*/


/* ==========================================================
   EVENT ORGANSIER / CALENDAR OVERRIDES 
   ========================================================== */

/* Removes indent from event info meta data */
ul.eo-event-meta{
		margin-left: -20px;
}
/* Removes bullets from event details */
ul.eo-event-meta {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.eo-event-meta li {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.eo-event-meta li:before,
ul.eo-event-meta li:after {
    content: none !important;
}
/* removes horizontal rule from event details */
.eventorganiser-event-meta hr {
    display: none !important;
}
/* Event Organiser - calendar view - uncategorised event colour */
.fc-event {
    background-color: var(--sc-primary) !important;
    border-color: var(--sc-primary) !important;
}
.fc-event .fc-title,
.fc-event .fc-time {
    color: #fff !important;
}

/* Event Organiser – Stop venu from being a link on event detail page */
a[href*="/events/venues/"] {
    pointer-events: none !important;
    text-decoration: none;
    color: inherit;
}
/* ==========================================================
   GRAVITY FORMS CUSTOM STYLES
   ========================================================== */

/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
    display: inline-block;
/*    height: 4.5em !important;*/
    border: 1px solid var(--sc-neutral-dark);
/*    padding: var(--sc-padding-half);*/
    font-size: 15px !important;
    line-height: normal;
    color: var(--sc-text);
    background-color: #ffffff;
    border-radius: var(--sc-radius-box);
}

/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
    border: 1px solid var(--sc-secondary) !important;
}

/* Form field labels */
body .gform_wrapper .top_label .gfield_label,
body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
    color: var(--sc-text);
    font-size: var(--sc-h5-clamp);
/*    text-transform: uppercase;*/
		font-weight: 500;
}

/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
    color: var(--sc-primary);
}

/* Row Spacing */
.gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: var(--sc-gutter) !important;
}

/*Max mega menu, adjust width of last flyout – delete if horizontal menu isnt used.*/
		#mega-menu-wrap-max_mega_menu_4 #mega-menu-max_mega_menu_4 > li.mega-menu-flyout:last-child ul.mega-sub-menu {
width: 184px;
}

/* ==========================================================
   IMAGE ASPECT RATIO CLASSES
   ========================================================== */

.sc-aspect-ratio-3-1 {
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;
}
.sc-aspect-ratio-3-1 img {
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-3-2 {
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-3-2 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.sc-aspect-ratio-2-3 {
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-2-3 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.sc-aspect-ratio-3-4 {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
}

.sc-aspect-ratio-3-4 img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* make the nav block thumb a ratio box */
.sc-navblock-3-2 .navblock-thumb {
  position: relative;
  height: 0;
  padding-top: 66.67%; /* adjust to your desired ratio */
  overflow: hidden;
}

.sc-navblock-3-2 .navblock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* make a slide a container, so I can adjust height based on width */
.sc-slide-3-2 .swiper-slide-inner {
  position: relative;
  height: 0;
  padding-top: 66.67%;
  overflow: hidden;
}

.sc-slide-3-2 .swiper-slide-inner > * {
  position: absolute;
  inset: 0;
  height: auto;
}
/* END aspect ratio */