/* General styles */

:root {
  --primary-color: #005eb8;
  --secondary-color: #252122;
  --tertiary-color: #007f3b;
  --focus-visible: #f89823;
} /*set the major colours used in this design */

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Istok Web', sans-serif;
	font-weight: 400;
	color: var(--secondary-color);
	font-size: 17px;
	line-height: 1.6;
	background: #D8DDE0; /* overcomes issue where chrome showed white after footer */
}
* {
  box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
}

b, strong {
  font-weight: 800;
}


/* =========================
   FLOW SPACING
   ========================= */

/* Remove default vertical margins */
.flow > * {
    margin-block: 0;
}

/* Standard spacing between content elements */
.flow > * + * {
    margin-block-start: 2rem;
}

/* Section spacing */
.flow > h2 {
    margin-block-start: 3rem;
}

.flow > h3 {
    margin-block-start: 2rem;
}

/* Keep headings connected to following content */
.flow > h1 + *,
.flow > h2 + *,
.flow > h3 + * {
    margin-block-start: 1.25rem;
}

/* Tighter spacing between consecutive paragraphs */
.flow > p + p {
    margin-block-start: 1.5rem;
}

/* Responsive banners on home page */
.responsive-banner {
  max-width: 100%;
  height: auto;
  display: block; /* removes bottom inline gap */
  transition: box-shadow 0.3s ease-in-out; /*eases box shadow on hover in and out */
}

.responsive-banner:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); /*display box shadow on home page desktop banner links on hover */
}

/* Stack responsive banners vertically with flex, and use gap to separate them by appling class to parent container */
.banner-stack {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

@media (max-width: 767px) {
    .banner-stack {
        gap: 25px;
    }
}

/* prevent cms editable regions from being able to display underlining with classes and pseudo-class*/
.editable [style*="underline"] {
  text-decoration: none !important;
}

u {
  text-decoration: none !important;
}

.editable u {
  text-decoration: none !important;
}


/*Fluid Video CSS */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* fullscreen bg banner */
.fullbanner {
    height: clamp(14.3125rem, 11.4034rem + 19.5455vw, 30.75rem);
   }

/* Supplier and App Banners Home Page */
@media (min-width: 768px) {
.banner-desktop {
	display: block; /* show desktop banner*/
	margin: 35px 0 35px 0; /*35px top and bottom margin on desktop banner */
	transition: box-shadow 0.3s; /* transition for box-shadow on hover */
	}
.banner-mobile {
	display: none; /* hide mobile banner on all but mobile devices */
	}
}

@media (max-width: 767px) {
.banner-desktop {
	display: none; /* hide desktop banner on mobile devices */
	}
.banner-mobile {
	display: block; /* show mobile banner on mobile devices and hide desktop banner*/
	margin: 20px 0 20px 0; /* 15px top and bottom margin on mobile banner */
	transition: box-shadow 0.3s; /* transition for box-shadow on hover */
	}
}

.banner-desktop:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); /*display box shadow on home page desktop banner links on hover */
}
.banner-mobile:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); /*display box shadow on home page mobile banner links on hover */
}
/* transition for box-shadow on hoverof sidebar images .sidebar-img {
	transition: box-shadow 0.3s; 
}*/

/*display box shadow on sidebar image links on hover.sidebar-img:hover {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);  
} */

img {
	max-width: 100%;/* restrict images to max of 100% size or 100% of their parent container */
}

.banner {
    width: 100%;
    aspect-ratio: 850 / 329;
    object-fit: cover;
    object-position: center center;
    margin-bottom: 15px !important;
}

.banner p {
	padding: 0;
	margin: 0; /* prevents cms from adding padding to image if adds p tages when publishing */
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
	font-family: "Istok Web", sans-serif;
	color: var(--secondary-color);
	font-weight: 700;
	line-height: 1.1;	
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
}

h1 {
	font-size: clamp(1.75rem, 1.5318rem + 1.0909vw, 2.5rem);
}
h2 {
	font-size: clamp(1.65rem, 1.5773rem + 0.3636vw, 1.9rem);
}

h3 {
	font-size: clamp(1.5rem, 1.5773rem + 0.3636vw, 1.75rem);
}

/*p {
	margin-bottom: 1.75rem;
	margin-top: 0;
}  Now controlled by flow */

p, ul, ol, li {
	font-size: clamp(0.975rem, 0.9011rem + 0.1818vw, 1.0625rem);
}

/* ul, ol {
	margin-top: 0;
	margin-bottom: 1.5rem;
}  Now controlled by flow */

ul {
	list-style-type: disc /* you can change the standard bullet point to a circle */
}

#main li + li {
    margin-block-start: 0.5rem; /*space after list items (except final item */
}

#main ul,
#main ol {
    margin-inline: 0; /*remove indent */
    padding-inline-start: 1.25rem; /* space from bullet to li content */
}

/* Standard text links */
a {
	color: var(--primary-color);
	text-decoration: underline !important;
}
a:hover {
	color: #7C2855;
	text-decoration: none  !important;
}

/* Page Title div and h1 and blue down arrow*/


.blueintro {
    background-color: var(--primary-color); /* this is for full-width page intro headings */
    padding: 30px 30px 15px 30px;
    color: #ffffff;
    position: relative; /* Set positioning context */
	width: 100%; /* will ensure fills full screen at smaller screens */
	max-width: 700px; /* but will not exceed 700px on larger devices */
}

.blueintro h1 {
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(1.625rem, 1.1886363636363635rem + 2.181818181818182vw, 3.125rem);
}

.blueintro p {
    color: #ffffff;
}


.blueintro2 {
    background-color: var(--primary-color); /* this is for standard 2 column page intro headings */
    padding: 30px 30px 15px 30px;
    color: #ffffff;
    position: relative; /* Set positioning context */
	width: 100%; /* will ensure fills full width of column */
	margin-bottom: 40px; /* add bottom margin to this to create space for arrow above banner image and page content*/
}

.blueintro2 h1 {
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(1.625rem, 1.1886363636363635rem + 2.181818181818182vw, 3.125rem);
}

.blueintro2 p {
    color: #ffffff;
}

.blue-arrow {
    border-bottom: 5px solid var(--primary-color);
}

.blue-arrow:after {
    content: '';
    position: absolute;
    left: 35px; /* Positioned 35px from the left of .blueintro */
    margin-top: 18px;
    width: 0;
    height: 0;
    border-top: 20px solid var(--primary-color);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}


/*==== ACCESSIBILITY ====*/

/* Apply focus effect across site for keboard users only - some other more specific css is needed for search box and buttons*/	
  :focus:not(:focus-visible) {
    outline: none; /* no outline for mouse users */
  }
  :focus-visible {
    outline: 4px solid var(--focus-visible); /* outline for keyboard users */
  }
   /* Target banner image links on home page for keyboard focus */
  #banners a:focus-visible img {
    outline: 4px solid var(--focus-visible); /* apply the outline to image links */
  }
  
  /* Skip Nav */

.skip-link {
  left: 50%;
  margin-top: 0;
  padding: 10px 8px 10px 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
  color: white;
  background: var(--secondary-color);
  }


.skip-link:focus {
  transform: translateY(0%);
  margin-top: 15px;
  color: white;
  border-bottom: none !important;
  text-decoration: none !important; /* Remove any underlining or bottom border from text in skp nav */
}

/*==== END ACCESSIBILITY ====*/

/* Section spacing , background colours etc to override standard section styles */

.main-section {
   background: #f5f6f7;
}
.main-grid-section {
   background: #f5f6f7;
}
.custom-grid-section {
   background-color: var(--primary-color);
   /*padding-top: 5px;  Reduced top padding to better align with content above */
}
.pi-grid-section {
	background-color: #f5f6f7;
}


/* Navigation Styles */
.navigation {
    background-color: var(--primary-color); /* Blue background */
    color: white;             /* Text color */
    padding-top: 0;               /* Remove top padding */
	padding-bottom: 3px;               /* little bit of bottom padding aligns desktop navigation better */
    height: 65px;             /* Set a height for the navigation section */
    display: flex;            /* Use Flexbox for vertical alignment */
    align-items: flex-end;      /* Vertically center the container */
    justify-content: start  /* Horizontally center the container */
}

@media (max-width: 1200px) {
.navigation {
	height: 3px; /*Reduce the nav background to effectively be a 4px separator line one mobile menu shows*/
	}
}

.nav-container {
    display: flex;            /* Use Flexbox for content alignment */
    align-items: center;      /* Vertically center the text links */
    gap: 20px;                /* Optional: space between links */
}

.navigation a {
    color: white;             /* Link color */
    text-decoration: none;    /* Remove underline from links */
    font-size: clamp(0.9375rem, 0.9011rem + 0.1818vw, 1.0625rem);        /* Font size for links */
    line-height: 1.2;        /* Match the height of the container to align text vertically */
	text-transform: none;
	font-weight: 400;	
}

.navigation a:hover {
    text-decoration: none;
}

/* Home Page Grid Styles */

.main-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, calc((100% - 3*30px)/4));
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: clamp(2.5rem, 1.8636rem + 3.1818vw, 4.6875rem);
  margin-bottom: clamp(2rem, 1.8636rem + 3.1818vw, 3rem);
  /* overflow: hidden removed — see note below, it would clip the focus outline */
}

.main-grid .grid-item {
  position: relative; /* containing block for the stretched-link overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  background: var(--primary-color);
  padding-bottom: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s;
}

.main-grid .grid-item:hover {
  background: var(--primary-color);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
}

.main-grid .grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

.main-grid .grid-item p {
  margin: 15px 0 0 0;
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  display: inline-block;
  padding-bottom: 1px;
}

.main-grid .grid-item a {
  text-decoration: none !important;
  color: #fff;
  border-bottom: 2px solid transparent; /* underline hover/focus target, transparent by default */
  transition: border-bottom 0.3s;
}

/* mouse hover — reacts directly to the div, unaffected by anchor position */
.main-grid .grid-item:hover p a {
  border-bottom: 2px solid #FFF !important;
}

/* keyboard focus — same yellow underline as hover, plus orange card border */
.main-grid .grid-item:has(.stretched-link:focus-visible) {
  outline: 4px solid var(--focus-visible);
  outline-offset: 1px;
}

.main-grid .stretched-link:focus-visible {
  outline: none; /* suppress the anchor's own default outline, card carries it instead */
  border-bottom: 2px solid #fff; /* same underline treatment as hover */
}

/* --- stretched link behaviour --- */
.main-grid .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.main-grid .grid-item:hover img {
  /* Add styles if needed */
}

/* 1200px and below */
@media (max-width: 1200px) {
  .main-grid {
    grid-template-columns: repeat(3, calc((100% - 2*25px)/3)); /*  Reduce number of columns in main grid if required */
    gap: 30px; /* Reduce gap size */
  }
}

/* 1023px and below */
@media (max-width: 1023px) {
       .footer .grid {
        grid-template-columns: repeat(2, 1fr); /* Reduce number of columns in footer grid row to 2*/
		gap: 25px; /* Reduce gap size */
    }
	.main-grid {
    grid-template-columns: repeat(3, calc((100% - 2*25px)/3)); /*  Reduce number of columns in main grid row to 2*/
    gap: 30px; /* Reduce gap size */
  }
}
/* 767px and below */
@media (max-width: 767px) {
    .main-grid {
    grid-template-columns: repeat(2, calc((100% - 20px)/2)); /*  Reduce number of columns in main grid row to 2*/
    gap: 30px; /* Reduce gap size */
  }
}

/* 575px and below */
    @media (max-width: 575px) {
	.main-grid {
    grid-template-columns: 1fr; /* Reduce number of columns in main grid row to 1 */
    gap: 30px; /* Reduce gap size */
  }
}

/*=== Home Page Grid Alternative Blue bg with icons styles ===*/

.main-grid-blue a {
    text-decoration: none !important; /* removes any default underlining of links */
}
.main-grid-blue {
  display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    grid-template-rows: auto; /* Rows adjust to the tallest item */
    gap: 30px; /* Gap between items */
	margin-top: clamp(2.5rem, 1.8636rem + 3.1818vw, 4.6875rem);
  	margin-bottom: clamp(2rem, 1.8636rem + 3.1818vw, 3rem);
}
@media (max-width: 1200px) {
  .main-grid-blue {
    grid-template-columns: repeat(3, 1fr); /*  Keep number of columns in grid row at 3 */
    gap: 25px; /* Reduce gap size */
  }
}
@media (max-width: 1023px) {
    .main-grid-blue {
    grid-template-columns: repeat(2, 1fr); /*  Reduce number of columns in grid row to 2 */
    gap: 25px; /* Reduce gap size */
  }
}
@media (max-width: 767px) {
    .main-grid-blue {
    grid-template-columns: repeat(2, 1fr); /* Keep number of columns in grid row at 2*/
    gap: 25px; /* Reduce gap size */
  }
}
 
 @media (max-width: 575px) {
    .main-grid-blue {
    grid-template-columns: 1fr; /* Reduce number of columns in grid row to 1 */
    gap: 20px; /* Reduce gap size */
  }
}
.main-grid-blue .grid-item {
  position: relative; /* containing block for the stretched-link overlay */
  display: flex;
  flex-direction: column;
  align-items: center; /* center align items */
  text-align: center; /* Center align the text content */
  background: var(--primary-color);
  height: 100%; /* make sure the grid item fills 100% of row height */
  width: 100%; /* make sure the grid item fills 100% of available width */
  padding: 20px; /* Set padding */
  border: 2px solid var(--primary-color); /* Set border color as transparent if want a border color change hover-effect */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); /* Add light box shadow to grid item */
  transition: background .3s ease-in-out, border .3s ease-in-out, box-shadow .3s ease-in-out;/* Set transitions for grid item hover effects */

}
/* .main-grid-blue .grid-item:hover {
  background: var(--secondary-color); 
border: 2px solid var(--secondary-color); } Enable if want colour changes to grid item bg or border on hover */

.main-grid-blue .grid-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); /* Box shadow effect on grid item on hover */
}
 
.main-grid-blue .grid-item p  {
  margin: 5px 0 0 0;
  text-align: center; /* center align the text horizontally */
  color: #fff !important;
  font-size: inherit;
  font-weight: inherit;
  display: inline-block; /* adding this restricts the hover underline effect to the width of the text not the whole div */
}
.main-grid-blue .grid-item:hover p {
  color: #fff !important; /* set text colour on hover if needed */
}

.main-grid-blue .grid-item h2  {
  font-size: clamp(1.3rem, 1.1418rem + 0.2909vw, 1.4rem);
  line-height: 1;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  margin-bottom: 6px; /*offset where border will appear on hover */
  border-bottom: 2px solid transparent; /*transparent bottom border for the yellow hover effect */
  transition: border-bottom 0.3s; /* border transition */
}
.main-grid-blue .grid-item:hover h2 {
  border-bottom: 2px solid #fff !important; /* The grid item hover affecting the h2 heading only */
}

.main-grid-blue .grid-item a {
   text-decoration: none; /* Remove default underline from text as removing it from the grid p doesn't work*/
   color: #fff;
}
.main-grid-blue .grid-item i {
    font-size: 48px; /* icon size */
    color: white; /* icon colour */
	max-width: 48px;
	font-weight: 700;
	padding: 12px; /* add padding around icon */
	background: none !important; /* set background colour behind icon */
	border-radius: 5px; /* Add some curve radius to icon background */
    margin-bottom: 0; /* Space between icon and text */
}

/* --- stretched link behaviour --- */
.main-grid-blue .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* econsult grid item - horizontal on desktop, stacked on mobile */
.main-grid-blue .grid-item.econsult-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 25px;
  width: 100%;
}

.main-grid-blue .grid-item.econsult-item img {
  max-width: 150px;
  flex-shrink: 0;
  margin-top: 6px;
}

.main-grid-blue .grid-item.econsult-item h2 {
  text-transform: none; /* Don't want this grid item h2 capitalised */
}

@media (max-width: 767px) {
  .main-grid-blue .grid-item.econsult-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .main-grid-blue .grid-item.econsult-item img {
    margin-top: 0;
    margin-bottom: 15px;
  }
}


/* Custom Grid styles */

.custom-grid-section h2 {
	text-align: center; /* Centre align the section's h2 text horizontally */
	color: #fff;;
	font-size: clamp(1.75rem, 1.5318rem + 1.0909vw, 2.5rem);
	margin: 20px 0 15px 0; /*Add margin above and below h2 */
}


.custom-grid-section .thank-you {
	max-width: 1150px; /* restrict this div width on larger devices to 980px */
	width: 100%;
    color: #fff;
	line-height: 1.5;
    text-align: center;
	margin: 50px auto 0 auto; /* add 50px margin to the top and center the div horizontally with margin auto */
}

.custom-grid-section .thank-you p {
  font-size: 1.2rem !important; /* Larger font for thank you message */
  font-weight: 500;
}

.custom-grid .grid-item .title {
    color: #fff;
    margin: 0; /* Remove default paragraph margin */
	font-family: 'Roboto', arial;
	font-size: clamp(1.1rem, 0.9273rem + 0.3636vw, 1.25rem);
	font-weight: 500;
	line-height:1.35;
    margin-bottom: 0 !important;
}

.custom-grid .grid-item .number {
	font-size: clamp(1.4rem, 1.2836rem + 0.5818vw, 1.8rem);/* set size & colour of the number */
	color: #fff;
	font-family: 'Roboto', arial;
	font-weight: 700;
    margin-top: 10px !important;
	margin-bottom: 0 !important;
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 30px; /* 30px gap */
}

@media (max-width: 1030px) {
    .custom-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

@media (max-width: 767px) {
    .custom-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
		gap: 25px; /* 25px gap */
    }
}

@media (max-width: 575px) {
    .custom-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
		 }
}

.custom-grid .grid-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
	height: 100%; /* make sure the grid item fills 100% of row height */
}

.custom-grid .grid-item-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center;
}

.custom-grid .grid-item i {
    font-size: clamp(1.875rem, 1.5841rem + 1.4545vw, 2.875rem); /* Icon size */
    color: #fff;
	font-weight: 700;
    margin-bottom: 0; /* Space between icon and number*/
	margin-top: 35px; /* add some extra top margin above icon */
}

@media (max-width: 767px) {
    .custom-grid .grid-item i {
	margin-top: 15px; /* reduce extra top margin above icon */
	}
}

/* Practice Info Grid style 1 */
.pi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* margin-top: clamp(2.5rem, 1.8636rem + 3.1818vw, 4.6875rem); remove for now */
}

.pi-grid .grid-item {
  background-color: var(--primary-color);
  padding: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s;
  height: 100%;
  width: 100%;
  position: relative; /* already present — also serves as the stretched-link containing block */
}

.pi-grid .grid-item p {
  margin: 0;
  line-height: 1.5rem;
  padding: 2px 0;
  display: inline-block;
  vertical-align: middle;
}

.pi-grid .grid-item a {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 0.9273rem + 0.3636vw, 1.25rem);
  text-decoration: none !important;
  border-bottom: 0 solid transparent;
  transition: border-color 0.3s;
  display: inline-block;
}

.pi-grid .grid-item::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  color: #fff;
  margin-left: 10px;
  font-size: inherit;
  vertical-align: middle;
}

/* mouse hover — reacts directly to the div, unaffected by anchor position */
.pi-grid .grid-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  background-color:  var(--secondary-color) !important;
}
.pi-grid .grid-item:hover a {
  border-bottom: 0 solid #fff !important;
}
.pi-grid .grid-item:hover::after {
  color: #FFF;
}

/* keyboard focus — same yellow underline as hover, plus orange card border */
.pi-grid .grid-item:has(.stretched-link:focus-visible) {
  outline: 4px solid var(--focus-visible);
  background-color:  var(--secondary-color) !important;
  outline-offset: 1px;
}
.pi-grid .stretched-link:focus-visible {
  outline: none; /* card carries the focus indicator instead */
  /* border-bottom: 2px solid #ffeb3b; enable if want the headline underline effect on focus */
}

@media screen and (max-width: 1300px) {
  .pi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media screen and (max-width: 980px) {
  .pi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
@media screen and (max-width: 600px) {
  .pi-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* --- stretched link behaviour --- */
.pi-grid .stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* 4-Column Footer Grid Styles */
.footer {
    background-color: #D8DDE0;
    color: var(--secondary-color);
    box-sizing: border-box;
    overflow: hidden;
	border-top: 3px solid var(--primary-color); /* add a border above footer */
}

@media (max-width: 1300px) {
   .footer {
	Padding-bottom: 125px; /*increase footer section bottom padding above standard section padding to accommodate translation widget on smaller devices */
   }
}

.footer .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    gap: 75px;
	max-width: 100%;
    box-sizing: border-box;
}

.footer .footer-column {
    padding: 0 20px 0 0;
    box-sizing: border-box;
    word-wrap: break-word;
} 

.footer a {
	color: var(--primary-color);
	text-decoration: underline !important;

}
.footer a:hover {
	color: #7C2855;
	text-decoration: none !important;
}

.footer h3 {
	color: var(--secondary-color) /* Change colour of h3 heading in footer */
}
.footer p { 
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of p text in footer */
     margin-bottom: 0.65rem !important; /*set size of footer paragraph bottom margin */
}
.footer ul {
	list-style-type: none; /* remove bullet points, padding and margin from footer lists */
	margin: 0;
	padding: 0;
}
.footer li { 
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of p text in footer */
	Line-height: 2.5; /* increase line height of list items */
	border-bottom: 0 solid #c3c9cc; /* add a border between list items */
}
/* .footer li:not(:last-child) { 
	border-bottom: 1px solid #a1a1a1; /* add a border between list items 
} */

/* Responsive Styles */

section {
    width: 100%;
    box-sizing: border-box; /* Ensure full width does not exceed container */
	padding-left: 20px; /*Stanard L-R Padding on sections - override on individual section classes if need to change */
	padding-right: 20px;
	padding-top: clamp(1.875rem, 1.4205rem + 2.2727vw, 3.4375rem); /* Clamp that takes padding top and bottom from 30px on mobile to 55px on desktop */
	padding-bottom: clamp(1.875rem, 1.4205rem + 2.2727vw, 3.4375rem);
	/* outline: 2px solid red; */
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
	/* outline: 2px solid red; */
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
	max-width: 100%;
	box-sizing: border-box;
	}
.column {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1; /* Make columns flexible */
    max-width: 100%;
	/* outline: 2px solid yellow; */
}

/* Main Layout 2 column */
.mainrow {
  	display: flex;
	max-width: 100%;
	box-sizing: border-box;
  	/* outline: 2px solid blue; */
}

.mainrow > #main {
  flex: 0 0 70%; /* have to apply left column width to this specific id as it surrounds left column and applying to left column directly does not work properly - cannot just target main as would reduce width of full-width pages */
  max-width: 70%;
  box-sizing: border-box;
}

.content {
	padding-right: 50px !important; /* div containing text content in left column */
	/*background: #ffffff; */
}

.column.right {
  flex: 0 0 30%; /* Right column 30% of row width */
  /* background: #ffffff; */
  /* outline: 2px solid yellow; */
}
.sidebar-content {
	padding: 20px; /* Add padding and white background andbottom border to sidebar content in right column */
	background: #fff;
	border-bottom: solid 1px #ccc;
}
.sidebar-content h2 {
	font-size: clamp(1.3rem, 1.5773rem + 0.3636vw, 1.5rem); /* reduce size of h2 in sidebar */ 
    margin-top: 10px !important; /* Nudge the sidebar h2 up */
   margin-bottom: 0 !important; /* Reduce gap to paragraph below */
}
.sidebar-content p {
	font-size: clamp(0.9375rem, 0.8568rem + 0.0909vw, 0.9375rem); /* reduce size of text in sidebar */ 
}


@media (max-width: 1023px) {
  .mainrow > #main {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .column.right {
    flex: 0 0 40%; /* Right column 40% of row width */
  }
  
  .content {
	padding-right: 30px !important; /* Reduce padding to 30px */
  }
}

@media (max-width: 980px) {
  .mainrow {
    flex-direction: column;
  }

  .column {
    flex: 1 0 auto;
  }
  
  .mainrow {
    flex-direction: column;
  }

  .mainrow > #main {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: 0; /*remove right padding */
    }
  
.column.right {
	display: none; /* Hide the right column */
	}
  
.content {
  padding-right: 0 !important; /* remove padding from inner div in left column once collapses to single column */
    }
}



/* Responsive Breakpoint Styling */

/* Desktop */
@media (min-width: 1201px) {
  /* Add styles */
}


/* 767px and below */
@media (max-width: 767px) {
  
  #fcol-3 {
	  display: none; /*hide last 2 footer columns on tablet * mobile */
  }
  #fcol-4 {
	  display: none;
  }
}

/* 575px and below */
    @media (max-width: 575px) {
      .footer .grid {
        grid-template-columns: 1fr; /* Reduce number of columns in footer grid row to 1 */
		gap: 20px; /* Reduce gap size */
    }

  .footer .footer-column {
	  padding: 0; /* Remove right padding from footer grid columns when reaches mobile */
  }
}

/* Button Styles */

/* Button 1 - has arrow */

	.button1 {
		-webkit-appearance: none;
		position: relative;
    	display: inline-flex;
		text-decoration: none !important;
		cursor: pointer;
		border: 0;
		color: white;
		border-radius: 5px;
		background: var(--primary-color);
		outline: 0;
		-moz-transition: background-color .25s ease-in-out;
		-webkit-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
		font-family: 'Roboto', san-serif;
		font-size: clamp(0.875rem, 0.8205rem + 0.2727vw, 1.0625rem);
		font-weight: 500;
		line-height: 1.2;
		padding: 15px 25px 15px 25px;
		margin-right: 15px; /*creates space between side by side buttons */
		margin-top: 8px; margin-bottom: 8px; /* little bit of top and bottom margin so stacking buttons have space */
	}

		.button1:hover {
			background: var(--secondary-color);
			color: white;
			text-decoration: none !important;
		}
		
/* Add the focus effect to this button only for keyvar(--primary-color)board users */
.button1:focus-visible {
    outline: 4px solid var(--focus-visible); 
	background: var(--primary-color);
	border: none;
}	
/* Remove focus effect for this button when clicked with a mouse */
.button1:focus:not(:focus-visible) {
	background: var(--primary-color);
	outline: none; /* Removes the orange border */
}
	 
.button1:active {
	  background: var(--tertiary-color);
}
		
/*Add arrow after the button text */	
.button1::after {
    content: "\f061"; /* Unicode for Font Awesome arrow-right icon */
    font-family: "Font Awesome 5 Free"; /* Use Font Awesome */
    margin-left: 12px; /* Space between text and icon */
    font-weight: 900; /* Ensure the icon is solid */
    display: inline-block;
    font-size: inherit; /* Adjusts the icon size based on the button's text size */
}

/* Alternative Button - No arrow */

.button1.alt {
	background: var(--primary-color);
	color: #fff !important;
	text-decoration: none !important;			
}

.button1.alt:hover {
	background: var(--secondary-color);
	text-decoration: none !important;
}
				
.button1.alt::after {
	content: ""; /* Removes the icon by setting content to an empty string */
	margin-left: 0; /* Remove the margin to keep spacing consistent */
}
		
/* Add the focus effect to this button only for keyboard users */
.button1.alt:focus-visible {
	outline: 4px solid var(--focus-visible); 
	background: var(--secondary-color);
	border: none;
}	

/* Remove focus effect for this button when clicked with a mouse */
.button1.alt:focus:not(:focus-visible) {
	background: var(--secondary-color);
	outline: none; /* Removes the orange border */
}

.button1.alt:active {
	background: var(--secondary-color);
}

/* Full width versions of buttons */

.button1.fit {
	display: block; /* Makes the button a block element */
	width: 100%; /* Makes the button take up the full width of its parent */
	text-align: center; /* Center the text inside the button */
}
.button1.alt.fit {
	display: block; /* Makes the button a block element */
	width: 100%; /* Makes the button take up the full width of its parent */
	text-align: center; /* Center the text inside the button */
}			


			
	/* Special Button - Text only */	
		.button1.special {
		background-color: transparent;
		border-radius: 0;
		border: 0;
		box-shadow: inset 0 0 0 0 var(--primary-color);
		color: var(--primary-color) !important;
		cursor: pointer;
		display: inline-block;
		font-family: 'Roboto', san-serif;
		font-size: 1.2em;
		font-weight: bold;
		height: 3.2em;
		letter-spacing: 0.02em;
		line-height: 3.2em;
		overflow: hidden;
		padding: 0 0 0 0;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		text-transform: none;
		white-space: nowrap;
		margin-bottom:1.2em;
        border-bottom: 3px solid var(--primary-color);
		}

			input[type="submit"].special:hover,
			input[type="reset"].special:hover,
			input[type="button"].special:hover,
			button1.special:hover,
			.button1.special:hover {
				background-color: transparent;
                color: var(--secondary-color) !important;
                border-bottom: 3px solid var(--secondary-color) !important;
			}
			
		/* Add the focus effect to this button only for keyboard users */
   .button1.special:focus-visible {
    outline: 4px solid var(--focus-visible); 
	background: var(--secondary-color);
	border: none;
	}	
	/* Remove focus effect for this button when clicked with a mouse */
	.button1.special:focus:not(:focus-visible) {
		background: transparent;
		outline: none; /* Removes the orange border */
 	 }	

			input[type="submit"].special:active,
			input[type="reset"].special:active,
			input[type="button"].special:active,
			button1.special:active,
			.button1.special:active {
				background-color: transparent;
                color: var(--primary-color) !important;
                border-bottom: 3px solid var(--primary-color) !important;
			}
		
/* Additional class to make sidebar buttons 100% width */
.sidebar-button {
  width: 100% !important;
  text-align: center !important;
}

/*======== STANDARD ALERT CARD - ======== */

.alertcard {
	background-color: #ffffff;
	border: 1px solid #ccc;
	padding: 25px 25px 10px 25px;
  	margin-bottom: 30px;
    margin-top: 30px;
}

.alertcard > :first-child:is(h2, h3, p) {
    margin-block-start: 0 !important; /* Remove additional top margin from opening elements inside alert card */
}

.alertcard h2 {
	font-size: clamp(1.5rem, 1.5773rem + 0.3636vw, 1.75rem); /*make alert card h2s smaller - same size as standard h3s */
}

.alertcard img {
  display: block;
  width: calc(100% + 50px);
  max-width: none;
  margin: -25px -25px 25px -25px !important; /* CSS to make image overcome the padding in the div and add some bottom margin */
}

/*======== FANCY ALERT BOXES AND CHECKMARK LISTS ======== */

/* Blue Alert Box */
.bluealert {
	background-color: var(--primary-color);
	position: relative; /* Set positioning context */
	padding: 15px 20px 0 20px ;
	color:#ffffff;
	border-bottom: 5px solid var(--primary-color);}
.bluealert:after {
    content:'';
    position: absolute;
    left: 35px;
    right: 0;
    margin-top: 0 ;
    width: 0;
    height: 0;
    border-top: 20px solid var(--primary-color);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.bluealert h2 {
	color: #fff;
	margin-top: 0;
	font-size: 1.25rem;
}

/* Red Alert Box */
.redalert {
	background-color: #d5281b;
	position: relative; /* Set positioning context */
	padding: 15px 20px 0 20px ;
	color:#ffffff;
	border-bottom: 5px solid #d5281b;
	}
.redalert:after {
    content:'';
	position: absolute;
    left: 35px;
    right: 0;
    margin-top: 0 ;
    width: 0;
    height: 0;
    border-top: 20px solid #d5281b;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.redalert h2 {
	color: #fff;
	margin-top: 0;
	font-size: 1.25rem;
}

/*Alert Box content Background & Border */
.alertbox {
	background-color:#fff;
	border: 1px solid #ebe6e4;
	padding:40px 20px 20px 20px;
}
.alertbox-outer {
    margin-bottom: 35px;
}
.alertbox ul, ol {
	margin-left: 20px; /* add or remove left margin to lists */
	padding-left: 0; /* add or remove left padding to lists */
}

/* Black Alert Box */
.blackalertbox {
   background-color:#000;
   color: #fff;
   border: 0 1px 1px 1px solid #ebe6e4;
   padding:40px 20px 20px 20px;
}

.blackalertbox ul, ol {
	margin-left: 20px; /* add or remove left margin to lists */
	padding-left: 0; /* add or remove left padding to lists */
}

.blackalertbox a {
    color: #fff; /* change link colour in this black alert box */
}
.blackalertbox a:hover {
    color: #FFEB3B; /* change link hover colour in this black alert box */
}

/* Green check mark list */
.checklist ul {
    list-style-type: none;
    margin-left: 0; /* add or remove left margin to lists */
	padding-left: 0; /* add or remove left padding to lists */
    position: relative;
}

.checklist ul li {
    position: relative;
    padding-left: 30px; /* Adjust padding to make space for the icon */
}

.checklist ul li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c"; /* Tick mark icon */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--tertiary-color);
    line-height: 1.5; /* Ensure the icon is vertically aligned with the text */
}

/* Red X mark list */
.xmarklist ul {
    list-style-type: none;
    margin-left: 0; /* add or remove left margin to lists */
	padding-left: 0; /* add or remove left padding to lists */
    position: relative;
}

.xmarklist ul li {
    position: relative;
    padding-left: 30px; /* Adjust padding to make space for the icon */
}

.xmarklist ul li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00d"; /* Tick mark icon */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
    color: #d5281b;
    line-height: 1.5; /* Ensure the icon is vertically aligned with the text */
}

/* horizontal rule styles */

hr {
    height: 1px; 
    border: none;
    background-color: #E5E7F2;
    margin: 35px 0; /*increase top and bottom margins from browser defaults */
}

/* Blockquote Styling */

#main blockquote {
    border-left: solid 4px var(--primary-color);
    font-style: normal;
    margin-left: 0;
    margin-right: 0;
    padding: 1.25em 1em 0.25em 0.5em;
}

#main blockquote p {
		margin-left: 1em;
	}
#main blockquote h2 {
		margin-left: 0.5em;
		margin-top: 0.25em
	}
	
#main blockquote h3 {
		margin-left: 0.5em;
		margin-top: 0.25em
	}
#main blockquote ul,
#main blockquote ol {
    padding-inline-start: 2rem; /* enable some left space on li items inside a blockquote */
}
	
/*=== Google Map directions form ===*/
.directions-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.directions-form input[type="text"] {
  flex: 1;
  min-width: 0;
}


/* stack Google Map directions button under input on small screens */
@media (max-width: 480px) {
  .directions-form input[type="text"] {
    flex: 1 1 100%; /* input takes its own full line */
  }
  .directions-form .form-button {
    flex: 0 0 auto; /* button stays its natural width, wraps below input */
  }
}

/*=== General Form Styling ===*/
.form-field,
.form-button { /* shared attributes of form field and buton */
  box-sizing: border-box;
  font-size: 0.925rem;
  line-height: 1.2;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.form-field {
  padding: 18px 12px;
  font-weight: 300;
  border: 1px solid #ccc;
  color: var(--secondary-color);
}

.form-field::placeholder {
  color: #666;
}

.form-field:focus-visible {
  outline: 4px solid var(--focus-visible);
  outline-offset: 1px;
  box-shadow: 0 0 5px rgba(69, 104, 161, 0.75);
}

.form-button {
  padding: 18px !important;
  background-color: var(--primary-color) !important;
  color: #fff !important; /* adjust if needed */
  border: none; /* buttons don't need the grey border like inputs do — remove this line if you want the border too */
  font-weight: 600;
  cursor: pointer;
  transition: background-color .25s ease-in-out;
}

.form-button:hover {
  background-color: var(--secondary-color) !important;
}

.form-button:focus-visible {
  background-color: var(--secondary-color);
  outline: 4px solid var(--focus-visible);
  outline-offset: 1px;
}     

/* ==================================================
   Accordion Styling - right aligned icon
   ================================================== */

/* Style accordian toggle */

  .accordion-toggle {
  display: flex;                   /* align icon and text */
  align-items: center;             /* vertical alignment */
  position: relative;              /* needed for ::before */
  padding-left: 0;            /* space for pseudo-icon */
  padding-right: 0;             /* NEW: reserves space for the right-hand icon circle so text never touches it, even on mobile */
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit; /* inherits the h2's font instead of default button font */
  box-sizing: border-box;          /* NEW: ensures padding is included in the 100% width, not added on top — fixes text running under the icon on narrow screens */
}

/*Style accordian toggle h2 */
  .card-header h2 button.accordion-toggle {
  display: block;
  color: #333 !important;
  font-size: clamp(1.15rem, 1.1209rem + 0.1455vw, 1.25rem) !important;
  text-decoration: none !important;
  margin: 0 !important;      /* was 12px 0 — caused margin collapse above the grey bg */
  line-height: 1.5 !important;
}


/* Add + sign using pseudo-element */
.accordion-heading .accordion-toggle::before {
  content: "+";
  position: absolute;
  right: 0.5rem;                  /* CHANGED from left:0 — now sits inset from the right edge */
  top: 50%;
  transform: translateY(-50%);
  /* width: 28px;                     /* NEW: fixed circle size */
  /* height: 28px;                    /* NEW: fixed circle size */
  display: flex;                   /* NEW: centers the +/- inside the circle */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                  /* NEW: stops the circle squashing on narrow screens */
  /* background-color: #4568A1;       /* NEW: blue circle */
  /* border-radius: 50%;              /* NEW: makes it round */
  /* color: #fff;                     /* NEW: white icon */
  font-size: 1.5rem !important;      /* separate from heading text size */
  line-height: 1;
  transition: transform 0.3s ease, content 0.3s ease;
}

/* When accordion is active, change + to − */
.accordion-heading .accordion-toggle.active::before {
  content: "−";
}

/* Basic card/border styling (was coming from Bootstrap originally) */
.accordion .card {
  border: 1px solid rgba(0,0,0,0.125);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}
.accordion .card-header {
  background-color: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.125);
}

.accordion .card-body {
  padding: 1rem 1.25rem;
}

.accordion .card-body > :first-child {
    margin-top: 0 !important; /* no top margin on first element in card */
}

.accordion .card-body > :last-child {
    margin-bottom: 0 !important; /* no bottom margin on last element in card */
}

/* Vanilla collapse behavior (was Bootstrap's .collapse) */
.accordion .collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-toggle:focus-visible {
  outline-offset: 4px; /* increase to push keyboard focus further out, e.g. 6px or 8px */
}

/* ==================================================
   Card Header & Heading Spacing
   ================================================== */

/* Adjust card-header padding */
.accordion .card-header {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 1rem;
  padding-right: 1rem;
}
.accordion .card-header h2.accordion-heading {
  margin: 0 !important;
}

/* ==================================================
   CMS Editing Override — forces accordion panels open
   inside Surreal CMS editor only, no effect on front end
   ================================================== */
.is-cms .accordion .collapse {
  max-height: none !important;   /* overrides both the 0 default and any inline JS-set max-height */
  overflow: visible !important;  /* ensures content isn't clipped even if max-height calc is off */
}

.is-cms .accordion [inert] {
  /* placeholder in case inert still causes issues in the editor — test first */
}

/* ==================================================
   STANDARD TABLES
   ================================================== */

table {
    width: 100%;
    table-layout: fixed;
    background-color: #ccc;
    border-spacing: 1px;
    border-radius: 0;
    line-height: 1.4rem;
}

table th,
table td {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    background-color: #fff;
}

table th {
    font-weight: 600;
    background-color: #f7f7f7;
}

table td {
    font-weight: 400;
}

table p {
  margin-bottom:1.25em; 
  padding-bottom:0;
}
table p:last-child {
  margin-bottom: 0;
} /* No bottom margin on final paragraph of a table cell */


/* ==================================================
   CLINIC TABLE
   ================================================== */

.tableheadertext {font-weight: 600; 
  line-height: 1.25em;
  }

.clinictable {
	background-color: #CCC;
	border-spacing: 1px;
	line-height: 1.4rem;
	border-radius: 0;
    width: 100%;
}

.clinictable th {padding: 12px; text-align: left; font-weight: 600; font-size: 1em; background-color: #f7f7f7; vertical-align: top; }
.clinictable td {padding: 12px; text-align: left; vertical-align: top;}
.clinictable tr:nth-child(even) {background-color: #f7f7f7}	
.clinictable tr:nth-child(odd) {background-color: #ffffff}	
.clinictable p {margin-bottom:1.25em; padding-bottom:0;}
.clinictable p:last-child {margin-bottom: 0;} /* No bottom margin on final paragraph of a table cell */
.clinictable h2 {font-size: 1.25em; line-height: 1.3em; margin-bottom: 1em;}
.clinictable h3 {font-size: 1.25em; line-height: 1.3em; margin-bottom: 1em;}

.clinictable .oh-label {width: 50%} /* make opening hours table 50% equal columns */
.clinictable .oh-value {width: 50%}

/* Above Grid Intro text on pages such as medical services, health advice etc - margins to space content away from blue page title and grid that follows*/
.above-grid-intro {
	margin-top: clamp(2.5rem, 2.2818rem + 1.0909vw, 3.25rem);
	margin-bottom: clamp(1.5rem, 1.2818rem + 1.0909vw, 2.25rem);
}