/* CSS Reset information */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* This Img section is selecting ALL images in the HTML and making them responsive, ALWAYS INCLUDE THIS */

  img{
    display: block; 
    width: 100%;
  }

  /*In the boarder-box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.*/
  

  
  /* --------------------- site wide CSS -------------- */
  
.site-bg-color {
  background-color: var(--main-site-colour);
}

/* Global Typography Settings */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
}

p {
  font-family: var(--font-primary);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--font-LineHeight-p);
  width: 100%;
  margin: 0 auto;
}

.u-additional-font1,
.u-additional-font1 h1,
.u-additional-font1 h2,
.u-additional-font1 h3, 
.u-additional-font1 p {
  font-family: var(--additional-font-1) !important;
}

.u-additional-font2
.u-additional-font2 h1,
.u-additional-font2 h2,
.u-additional-font2 h3, 
.u-additional-font2 p {
  font-family: var(--additional-font-2) !important;
}

@media screen and (min-width: 1024px) {

  p{ 
    margin: 0 auto;
   }

 }

  /* ----Global behaviours---- */


:root {
  scroll-padding-top: 15%; /* Offset scroll position by 25% of the viewport height */
}


html {
  scroll-behavior: smooth;
}

/*-------- Global Styling ----------*/

/* Max Width modifiers */

/* mobile/base container utilities */
.u-container-sm { max-width: 800px; margin: 0 auto; }
.u-container-md { max-width: 1200px; margin: 0 auto; }
.u-container-lg { max-width: 1600px; margin: 0 auto; }
.u-container-xl { max-width: 2000px; margin: 0 auto; }
.u-container-2xl { max-width: 3000px; margin: 0 auto; }

/* Desktop-only container utilities */
@media screen and (min-width: 1024px) {
  .u-container-sm--desktop { max-width: 800px; margin: 0 auto; }
  .u-container-md--desktop { max-width: 1200px; margin: 0 auto; }
  .u-container-lg--desktop { max-width: 1600px; margin: 0 auto; }
  .u-container-xl--desktop { max-width: 2000px; margin: 0 auto; }
  .u-container-xxl--desktop { max-width: 2500px; margin: 0 auto; }
}

/* XL SCreen Utilities container utilities */
@media screen and (min-width: 1440px) {
  .u-container-sm--xl-desktop { max-width: 800px; margin: 0 auto; }
  .u-container-md--xl-desktop { max-width: 1200px; margin: 0 auto; }
  .u-container-lg--xl-desktop { max-width: 1600px; margin: 0 auto; }
  .u-container-xl--xl-desktop { max-width: 2000px; margin: 0 auto; }
  .u-container-xxl--xl-desktop { max-width: 2500px; margin: 0 auto; }
}

/* Padding modifiers AT THE MOMENT THESE ONLY DO MOBILE STILL USING CUSTOM ONES FOR DESKTOP */

/* VERTICAL PADDING (Y-axis) */
.u-padding-y-xs { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.u-padding-y-sm { padding-top: 1rem; padding-bottom: 1rem; }      /* 16px */
.u-padding-y-md { padding-top: 2rem; padding-bottom: 2rem; }      /* 32px */
.u-padding-y-lg { padding-top: 3rem; padding-bottom: 3rem; }      /* 48px */
.u-padding-y-xl { padding-top: 4rem; padding-bottom: 4rem; }      /* 64px */

/* HORIZONTAL PADDING (X-axis) */
.u-padding-x-xs { padding-left: 0.3rem; padding-right: 0.3rem; }
.u-padding-x-sm { padding-left: 1rem; padding-right: 1rem; }      /* 16px */
.u-padding-x-md { padding-left: 2rem; padding-right: 2rem; }      /* 32px */
.u-padding-x-lg { padding-left: 3rem; padding-right: 3rem; }      /* 48px */
.u-padding-x-xl { padding-left: 6rem; padding-right: 6rem; }      /* 96px */

/* ALL SIDES EQUAL */
.u-padding-xs { padding: 0.3rem; }      /* 16px all sides */
.u-padding-sm { padding: 1rem; }      /* 16px all sides */
.u-padding-md { padding: 2rem; }      /* 32px all sides */
.u-padding-lg { padding: 4rem; }      /* 64px all sides */

/* PADDING BOTTOM */
.u-padding-bottom-sm { padding-bottom: 0.625rem; }   /* 10px */
.u-padding-bottom-md { padding-bottom: 1.25rem; }    /* 20px */
.u-padding-bottom-lg { padding-bottom: 2rem; }   /* 30px */

/* PADDING TOP */
.u-padding-top-sm { padding-top: 0.625rem; }   /* 10px */
.u-padding-top-md { padding-top: 1.25rem; }    /* 20px */
.u-padding-top-lg { padding-top: 3.125rem; }   /* 50px */

/* PADDING Left */
.u-padding-left-sm { padding-left: 0.625rem; }   /* 10px */
.u-padding-left-md { padding-left: 1.25rem; }    /* 20px */
.u-padding-left-lg { padding-left: 3.125rem; }   /* 50px */

/* Desktop Specific Padding */

@media screen and (min-width: 1024px) {
/* VERTICAL PADDING (Y-axis) */
.u-padding-y-xs--desktop { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.u-padding-y-sm--desktop { padding-top: 1rem; padding-bottom: 1rem; }      /* 16px */
.u-padding-y-md--desktop { padding-top: 2rem; padding-bottom: 2rem; }      /* 32px */
.u-padding-y-lg--desktop { padding-top: 3rem; padding-bottom: 3rem; }      /* 48px */
.u-padding-y-xl--desktop { padding-top: 4rem; padding-bottom: 4rem; }      /* 64px */

/* HORIZONTAL PADDING (X-axis) */
.u-padding-x-xs--desktop { padding-left: 0.3rem; padding-right: 0.3rem; }
.u-padding-x-sm--desktop { padding-left: 1rem; padding-right: 1rem; }      /* 16px */
.u-padding-x-md--desktop { padding-left: 2rem; padding-right: 2rem; }      /* 32px */
.u-padding-x-lg--desktop { padding-left: 3rem; padding-right: 3rem; }      /* 48px */
.u-padding-x-xl--desktop { padding-left: 6rem; padding-right: 6rem; }      /* 96px */

/* ALL SIDES EQUAL */
.u-padding-xs--desktop { padding: 0.3rem; }      /* 16px all sides */
.u-padding-sm--desktop { padding: 1rem; }      /* 16px all sides */
.u-padding-md--desktop { padding: 2rem; }      /* 32px all sides */
.u-padding-lg--desktop { padding: 4rem; }      /* 64px all sides */

/* PADDING BOTTOM */
.u-padding-bottom-sm--desktop { padding-bottom: 0.625rem; }   /* 10px */
.u-padding-bottom-md--desktop { padding-bottom: 1.25rem; }    /* 20px */
.u-padding-bottom-lg--desktop { padding-bottom: 2rem; }   /* 30px */

/* PADDING TOP */
.u-padding-top-sm--desktop { padding-top: 0.625rem; }   /* 10px */
.u-padding-top-md--desktop { padding-top: 1.25rem; }    /* 20px */
.u-padding-top-lg--desktop { padding-top: 3.125rem; }   /* 50px */

/* PADDING Left */
.u-padding-left-sm--desktop { padding-left: 0.625rem; }   /* 10px */
.u-padding-left-md--desktop { padding-left: 1.25rem; }    /* 20px */
.u-padding-left-lg--desktop { padding-left: 3.125rem; }   /* 50px */

}






/* Margin modifiers */

/* MARGIN - ALL SIDES */
.u-margin-none { margin: 0; }
.u-margin-sm { margin: 0.625rem; }     /* 10px */
.u-margin-md { margin: 1.25rem; }      /* 20px */
.u-margin-lg { margin: 3.125rem; }     /* 50px */

/* MARGIN TOP */
.u-margin-top-none { margin-top: 0; }
.u-margin-top-sm { margin-top: 0.625rem; }    /* 10px */
.u-margin-top-md { margin-top: 1.25rem; }     /* 20px */
.u-margin-top-lg { margin-top: 2.188rem; }    /* 35px - for buttons */
.u-margin-top-xl { margin-top: 3.125rem; }    /* 50px */

/* MARGIN BOTTOM */
.u-margin-bottom-none { margin-bottom: 0; }
.u-margin-bottom-sm { margin-bottom: 0.625rem; }   /* 10px */
.u-margin-bottom-md { margin-bottom: 1.25rem; }    /* 20px */
.u-margin-bottom-lg { margin-bottom: 3.125rem; }   /* 50px */
.u-margin-bottom-1 { margin-bottom: 1rem; }        /* 16px - for headings */
.u-margin-bottom-1-5 { margin-bottom: 1.5rem; }    /* 24px - for text */
.u-margin-bottom-2 { margin-bottom: 2rem; }        /* 32px - for sections */

/* MARGIN LEFT/RIGHT (X-axis) */
.u-margin-x-none { margin-left: 0; margin-right: 0; }
.u-margin-x-sm { margin-left: 0.625rem; margin-right: 0.625rem; }   /* 10px */
.u-margin-x-md { margin-left: 1.25rem; margin-right: 1.25rem; }     /* 20px */
.u-margin-x-lg { margin-left: 3.75rem; margin-right: 3.75rem; }     /* 60px */
.u-margin-x-xl { margin-left: 6.25rem; margin-right: 6.25rem; }     /* 100px */

/* MARGIN TOP/BOTTOM (Y-axis) */
.u-margin-y-none { margin-top: 0; margin-bottom: 0; }
.u-margin-y-sm { margin-top: 0.625rem; margin-bottom: 0.625rem; }   /* 10px */
.u-margin-y-md { margin-top: 1.25rem; margin-bottom: 1.25rem; }     /* 20px */
.u-margin-y-lg { margin-top: 3.75rem; margin-bottom: 3.75rem; }     /* 60px */

/* DESKTOP-SPECIFIC MARGINS */
@media screen and (min-width: 1024px) {
  .u-margin-bottom-sm--desktop { margin-bottom: 0.625rem; }
  .u-margin-bottom-md--desktop { margin-bottom: 1.25rem; }
  .u-margin-bottom-lg--desktop { margin-bottom: 3.125rem; }
  
  .u-margin-x-lg--desktop { margin-left: 3.75rem; margin-right: 3.75rem; }   /* 60px */
  .u-margin-x-xl--desktop { margin-left: 6.25rem; margin-right: 6.25rem; }   /* 100px */
}

/* ========================================
   HEIGHT UTILITIES
   ======================================== */

/* FIXED HEIGHTS - Use for exact dimensions */
.u-height-full { height: 100%; }
.u-height-screen { height: 100vh; }
.u-height-85vh { height: 85vh; }
.u-height-80vh { height: 80vh; }
.u-height-75vh { height: 75vh; }
.u-height-70vh { height: 70vh; }
.u-height-30vh { height: 30vh; }
.u-height-85   { height: 85px; }
.u-height-400 { height: 400px; }
.u-height-500 { height: 500px; }
.u-height-auto { height: auto; }

/* MIN HEIGHTS - Use for flexible content that needs a minimum */
.u-min-height-screen { min-height: 100vh; }
.u-min-height-85vh { min-height: 85vh; }
.u-min-height-80vh { min-height: 80vh; }
.u-min-height-70vh { min-height: 70vh; }
.u-min-height-60vh { min-height: 60vh; }
.u-min-height-30vh { min-height: 30vh; }
.u-min-height-400 { min-height: 400px; }
.u-min-height-500 { min-height: 500px; }
.u-min-height-85 { min-height: 85px; }

/* MAX HEIGHTS - Use for constraining content */
.u-max-height-screen { max-height: 100vh; }
.u-max-height-90vh { max-height: 90vh; }
.u-max-height-85vh { max-height: 85vh; }
.u-max-height-80vh { max-height: 80vh; }
.u-max-height-70vh { max-height: 70vh; }
.u-max-height-60vh { max-height: 60vh; }
.u-max-height-30vh { max-height: 30vh; }
.u-max-height-500 { max-height: 500px; }
.u-max-height-400 { max-height: 400px; }
.u-max-height-2000 { max-height: 2000px; }
.u-max-height-none { max-height: none; }
.u-max-height-0 { max-height: 0; }

/* DESKTOP-SPECIFIC HEIGHT UTILITIES */

@media screen and (min-width: 1024px) {
  .u-height-85vh--desktop { height: 85vh; }
  .u-height-80vh--desktop { height: 80vh; }
  .u-height-70vh--desktop { height: 70vh; }
  .u-height-75vh--desktop { height: 75vh; }
  .u-height-60vh--desktop { height: 60vh; }
  .u-height-35vh--desktop { height: 35vh; }
  .u-height-30vh--desktop { height: 30vh; }
  
  .u-min-height-80vh--desktop { min-height: 80vh; }
  .u-min-height-400--desktop { min-height: 400px; }
  
  .u-max-height-80vh--desktop { max-height: 80vh; }
  .u-max-height-90vh--desktop { max-height: 90vh; }
  .u-max-height-80vh--desktop { max-height: 80vh; }
  .u-max-height-70vh--desktop { max-height: 70vh; }
  .u-max-height-500--desktop { max-height: 500px; }
}

    /* tablet breakpoint */
    @media screen and (min-width: 503px) and (max-width: 1023px) {
      .u-height-45vh--tablet { height: 45vh; }
      .u-height-30vh--tablet { height: 30vh; }
    }

/* OVERFLOW UTILITIES - Pair with max-height */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-auto { overflow: auto; }
.u-overflow-visible { overflow: visible; }

/* Shadow modifiers */
.u-shadow-sm { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.u-shadow-md { box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); }
.u-shadow-btn { box-shadow: -3px 6px 8px rgba(0, 0, 0, 0.25); }


/* boarder radius modifiers */
.u-rounded-sm { border-radius: 5px; }
.u-rounded-md { border-radius: 8px; }
.u-rounded-lg { border-radius: 20px; }
.u-rounded-xl { border-radius: 50px; }
.u-rounded-full { border-radius: 50%; }

/* Overlay modifiers */

.u-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Add a pseudo-element for the white wash overlay */
.u-bg-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay-colour);
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 1;
}

/* Keep image at full opacity, adjust the white overlay instead */
.u-bg-overlay--none::after { opacity: 0; }
.u-bg-overlay--extra-light::after { opacity: 0.1; }
.u-bg-overlay--light::after { opacity: 0.4; }
.u-bg-overlay--medium::after { opacity: 0.6; }
.u-bg-overlay--heavy::after { opacity: 0.8; }

/* Ensure child content appears above the overlay */
.u-bg-overlay ~ * {
  position: relative;
  z-index: 2;
}

/* Button Component */

.button {
  display: inline-block;
  color: var(--btn-font-colour);
  text-align: center;
  text-decoration: none;
  font-weight: 400;
  background-color: var(--btn-colour);
  padding: 25px 20px;
  min-width: 100px;
  max-width: 200px;
  cursor: pointer;
}

.button:hover {

  background-color: var(--btn-colour-hover);

}
/* Modifier classes */

.button--rounded {
  border-radius: 20px;
}


.button--border {
  background-color: transparent;
  border: 3px solid var(--btn-colour);
  /* color: black;  */
}

.button--large {
  padding: 35px 30px;
  font-size: 1.125rem;
}

/* If rectangle is just the default, you don't need a modifier */

/* Underline Utilities */

.u-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

.u-underline::after {
  content: "";
  position: absolute;
  bottom: -5px;              
  left: 50%;
  transform: translateX(-50%);
  width: 40%;                
  border-bottom: 1px solid currentColor;
}

/* Modifiers ONLY override what changes */

.u-underline--sm::after {
  width: 20%;                
  bottom: -5px;              
}
.u-underline--md::after {
  width: 40%;                
  bottom: -5px;              
}

.u-underline--lg::after {
  width: 60%;                
  bottom: -2px;              
}

.u-underline--xl::after {
  width: 80%;                
  bottom: -2px;            
}


/* Display Utilities */
.u-display-block {
  display: block !important;
}

.u-display-inline {
  display: inline !important;
}

.u-display-inline-block {
  display: inline-block !important;
}


a {
  text-decoration: none; /* Removes the underline */
}

/* Global link color for links within paragraphs in rich text fields */
/* Targets links in paragraphs within containers ending with __text or __content */
[class*="__text"] p a:not(.button),
[class*="__content"] p a:not(.button) {
  color: var(--site-link-colour);
}

/*------ Global Video -------*/

.video-embed-wrapper {

  display: block;
  width: min(1200px, 100%);
  aspect-ratio: 16 / 9;
  max-block-size: 60 svh;              /* leaves room for title + padding inside 90svh */
  margin-inline: auto;
  overflow: hidden;
  border-radius: 8px;
  
}

.video-embed-wrapper iframe,
.video-embed-wrapper video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Optional desktop tweaks */
@media (min-width: 1024px) {
  .video-embed-wrapper   { max-block-size: 65svh; }
}