:root {
 
  --shadow-color: rgba(29, 67, 143, 0.1);
  --shadow-hover-color: rgba(0, 0, 0, 0.15);

  --accordian-title-bg-color: var(--highlight-colour);
  --accordian-title-bg-color-hover:var(--highlight-rollover-colour);
  --accordian-details-bg-color:var(--highlight-bg-colour);
  --accordian-details-border-color:var(--highlight-colour);
  
   --default-margin-bottom: 2.1rem;  /*use like: var(--default-margin-bottom); */
 
}

.RemoveMarginLeft {
	 margin-left: 0em !important;
}

.link-list ul, .blockLinks ul, .blockLinksArrow ul, .link-list-arrow ul, .azlink-list ul {
list-style-type: none; /* Removes default bullet points */
padding: 0;
margin-left:0px;
}


.link-list li, .blockLinks li, .blockLinksArrow li, .link-list-arrow li, .azlink-list li {
  margin: 10px 0; /* Adds space between list items */
  display: flex;
  align-items: center;
}

.link-list li i, .blockLinks li i {
  margin-right: 10px; /* Adds space between icon and text */
}

.link-list a, .blockLinksArrow a, .link-list-arrow a, .azlink-list a {

  transition: color 0.3s; /* Smooth transition for hover effect */
}

.link-list a:hover, .blockLinksArrow a:hover, .link-list-arrow a:hover, .azlink-list a:hover  {
  color: var(--secondary-color);
}



.blockLinksArrow, .blockLinks {
  margin-left: 0em !important;
}

.blockLinksArrow li, .blockLinks li {
  position: relative; /* Position for arrow icon */

}

.blockLinksArrow li > a, .blockLinks li > a {
  
  text-decoration: none !important;
  background-color: var(--main-colour);
  color: #FFFFFF; /* Link text color */
  padding: 10px; /* Padding around the link */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
  width: 100%; /* Ensure link spans full width of li */
  font-size:1.15em;
  font-weight:500;
}

.blockLinksArrow li > a::after {
  content: '\f061'; /* Unicode for right arrow from Font Awesome */
  font-family: 'Font Awesome 5 Free'; /* Font family for Font Awesome */
  font-weight: 900; /* Font weight for Font Awesome */
  position: absolute; /* Absolute position for the arrow */
  right: 30px; /* Position the arrow to the right */
  transition: color 0.3s; /* Smooth transition for hover effect */
}

.blockLinksArrow li > a:hover, .blockLinks li > a:hover {
  background-color: var(--highlight-colour);
  color: #FFFFFF;  
}

.blockLinksArrow li > a:hover::after, .blockLinks li > a:hover::after {
  color: #FFFFFF; /* Changes arrow color on hover */
}



.link-list-arrow li {
  position: relative; /* Position for arrow icon */
  padding-left: 1.8rem; /* Space for the left arrow */
  padding-bottom: 0.33; /* Space for the left arrow */
  align-items: center; 
}

.link-list-arrow li::before {
  content: '\f0a9'; 
  font-family: 'Font Awesome 5 Free'; 
  font-weight: 900; 
  position: absolute; 
  left: 0; 
  color: #000000; 
  transition: color 0.3s; 
  font-size: 1.2em;
  align-items: center; 
  margin-top:4px;
}


.link-list-arrow li > a:hover::before {
  color:var(--highlight-colour);
}
.link-list-arrow li > a:hover{
  color:var(--highlight-rollover-colour);
}

.azlink-list ul {
	background-color: var(--highlight-bg-colour);
	padding: 10px;
    margin-bottom: 40px;
}

.azlink-list {
  margin-left: 0em !important;
}

.azlink-list li {
  position: relative; /* Position for arrow icon */
  padding-left: 20px; /* Space for the left arrow */
  padding-bottom: 10px;
}


.azlink-list li > a:hover{
  color:var(--highlight-colour);
}

.container-link-boxes {
  display: flex; /* This allows the link boxes to be laid out in a row */
  flex-wrap: wrap; 
  gap: 2rem; 
   margin-bottom: calc(var(--default-margin-bottom) * 2);
  justify-content: flex-start; 
  align-items: stretch; 
}

.container-link-boxes-section {
  margin-top: 0px !important; 
  margin-bottom: 0.5em!important;
 
}

 .container-link-boxes a {
            color: var(--highlight-link-colour);
        }
		
		 .container-link-boxes a:hover {
            color: var(--highlight-rollover-colour);
        }
		
.guidance-links  {
	
margin-bottom: var(--default-margin-bottom);
	
}

.guidance-links h2 {
	font-size: 1.4rem;
	 margin-bottom: 0.8rem!important;
}

.guidance-links a {
	font-weight: 550 !important;
}



/* Link Block Styles */
.HSCLinkBlock {
  box-sizing: border-box;
  height: auto;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit;
  position: relative;
  min-height: 90px;
}


.link-box-title {
  margin-top: 0;
  margin-bottom: 3px;
  
  font-size: clamp(1rem, 1vw + .8rem, 1.2rem);
  font-weight: 600!important;
    line-height: 1.25;
}


.iconHeaderPadding{
	padding-left: 30px!important;
}
.HSCLinkBlock h2 {
   transition: color 0.3s;
    text-decoration: underline;
    text-decoration-thickness: max(1px, .0625rem);
    text-underline-offset: .1578em;
}



.HSCLinkBlock p {
  margin-top: 0;
  margin-bottom: 3px;
  padding-top: 10px;
  color: #303030;
  text-decoration: none !important;
}



.HSCLBShadow {
  box-shadow: 0 2px 4px 0 var(--shadow-color), 0 6px 20px 0 var(--shadow-hover-color);
}

.HSCLBNoDescription {
	
	min-height: 90px;
}



.HSCLBWidth2 {
  flex: 0 0 calc((100% - 2em) / 2); /* 2 items per row, 1 gap (2em) */

}

.HSCLBWidth3 {
  flex: 0 0 calc((100% - 4em) / 3); /* 3 items per row, 2 gaps (4em) */
 
}


.container-link-boxes.width-4column {
  gap: 1em !important; /* reduced gap only when 4 boxes are used */
}





.HSCLBWidth4 {
  flex: 0 0 calc((100% - 3em) / 4); /* 4 items per row, 3 gaps (6em) */
    
}

.paddingHSCLB2 {
   padding: 1em !important;
}

.paddingHSCLB3 {
 padding: 0.7em !important;
}

.paddingHSCLB4 {
padding: 0.5em !important;
}


.rounded {
  border-radius: 7px; 
}

.list-current-item {
	font-style: italic;
	font-weight:700;
}


a.HSCLBPlain {
    color:  var(--primary-hyperlink-colour)!important;
}
a.HSCLBPlain:hover {
    color: var(--primary-hyperlink-colour-hover)!important;
}


  /* Default Style for HSCLinkBlock */
  .HSCLB1 {
    border: 2px solid #e2e2e2;
    background-color: #ffffff;
	
	
}

/* Hover effect for HSCLinkBlock */
.HSCLinkBlock.HSCLB1:hover {
    box-shadow: 0 0 0 4px var(--highlight-colour);
    border: 2px solid var(--highlight-colour);
}



  /* HSCLB2 Style */
  .HSCLB2 {
    background-color: var(--highlight-bg-colour);
    border: 1px solid var(--highlight-colour);
    border-left: 10px solid var(--highlight-colour);
    transition: border-left-color 0.3s;
	  background-color: #FFFFFF;
}
a.HSCLB2 {
    color:  var(--highlight-colour)!important;
}
a.HSCLB2:hover {
    color: var(--highlight-rollover-colour)!important;
	border: 1px solid var(--highlight-rollover-colour)!important;
    border-left: 10px solid var(--highlight-rollover-colour)!important;
}

.HSCLinkBlock.HSCLB2:hover {
    border-left-color: var(--highlight-rollover-colour);
}

/* HSCLB3 Style */
.HSCLB3 {
    background-color: var(--highlight-bg-colour);
    border: 1px solid var(--highlight-colour);
    border-bottom: 10px solid var(--highlight-colour);
    transition: border-bottom-color 0.3s;
	
}

a.HSCLB3 {
    color:  var(--highlight-colour)!important;
}
a.HSCLB3:hover {
    color: var(--highlight-link-colour)!important;
	border: 1px solid var(--highlight-rollover-colour)!important;
    border-bottom: 10px solid var(--highlight-rollover-colour)!important;
}

.HSCLinkBlock.HSCLB3:hover {
    border-bottom-color: var(--highlight-rollover-colour);
	border-color:var(--highlight-rollover-colour);
}

.HSCLB4 {
    background-color: var(--highlight-bg-colour) !important;
    border: 1px solid #ccc;
    transition: border-bottom-color 0.3s;
    border-bottom: 10px solid var(--highlight-bg-colour);
    border-bottom-color: var(--highlight-bg-colour);
	  background-color: #FFFFFF;
}

a.HSCLB4 {
    color:  var(--highlight-link-colour)!important;
}
a.HSCLB4:hover {
    color: var(--highlight-rollover-colour)!important;
	border: 1px solid var(--highlight-rollover-colour)!important;
    border-bottom: 10px solid var(--highlight-rollover-colour)!important;
}

.HSCLinkBlock.HSCLB4:hover {
    border-bottom: 10px solid var(--highlight-colour);
    border-bottom-color: var(--highlight-colour);
}

/* HSCLB5 Style */
.HSCLB5 {
    background-color: var(--highlight-bg-colour);
    border-left: 10px solid var(--highlight-bg-colour);
    transition: border-left-color 0.3s;
	  background-color: #FFFFFF;
}

.HSCLinkBlock.HSCLB5:hover {
    border-left: 10px solid var(--highlight-colour);
    border-left-color: var(--highlight-colour);
}

.HSCLB6 {
  background-color: var(--highlight-bg-colour);
  border: 1px solid var(--highlight-colour);
  border-left: 10px solid var(--highlight-colour);
  transition: border-left-color 0.3s;
  position: relative;
}

.HSCLinkBlock.HSCLB6:hover {
  border-bottom-color: var(--highlight-rollover-colour);
  border-left: 10px solid var(--highlight-rollover-colour);
}


  /* Icon hidden by default and appears on hover */
  .HSCLinkBlock .icon {
    font-size: 25px; /* FontAwesome icon size */
    position: absolute; /* Position it relative to the parent */
    bottom: 15px; /* 10px from the bottom */
    right: 15px; /* 10px from the right */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease, color 0.3s ease; /* Smooth transition for appearance */
    color: var(--highlight-colour);
}

  .HSCLinkBlockPlain .icon {
    font-size: 20px; /* FontAwesome icon size */
    position: absolute; /* Position it relative to the parent */
    top: 5px !important; /* 10px from the bottom */
    left: 0px !important;; /* 10px from the right */
    opacity: 1 !important; /* Hidden by default */
    transition: opacity 0.3s ease, color 0.3s ease; /* Smooth transition for appearance */
    color: black !important;
}

/* Make icon visible on hover */
.HSCLinkBlock:hover .icon {
    opacity: 1; /* Show the icon when the link block is hovered */
    color: var(--highlight-rollover-colour); /* Change icon color to orange on hover */
}

.HSCLinkBlockPlain:hover .icon {
    opacity: 1; /* Show the icon when the link block is hovered */
    color: var(--highlight-rollover-colour)!important; /* Change icon color to orange on hover */
}


.HSCLB7::after {
  content: '\f35a'; /* Unicode for right arrow from Font Awesome */
  font-family: 'Font Awesome 5 Free'; /* Font family for Font Awesome */
  font-weight: 900; /* Font weight for Font Awesome */
  position: absolute; /* Absolute position for the arrow */
  right: 20px; /* Position the arrow to the right */
    top: 0px;
  transition: color 0.3s; /* Smooth transition for hover effect */
   font-size: 20px;
   color: var(--main-colour);
}




.sidebar-menu {
  padding: 0.5rem;
  
  border: 1px solid #ddd;
  border-radius: 0px;
  max-width: 250px;
  margin-top: 3rem;
  
}

.sidebar-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}

.blockItems {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blockItems li {
  margin-bottom: 0.5rem;
}

.blockItems li a {
  text-decoration: none;

  display: block;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.blockItems li a:hover {
  background-color: #d9dcde;
 
}


@media (max-width: 768px) {
	
	.container-link-boxes {

  gap: 1em; 
  margin-bottom: 20px;

}


	.childBlock {
	flex: 0 0 100%;
	margin-right: 0;
	min-height: 80px;
	}
	
	.HSCLinkBlock {
  min-height: 2em;

}

	    .HSCLBWidth2 {
     flex: 0 0 99%; 
    margin-bottom: 1em;
	}
	
	    .HSCLBWidth3 {
     flex: 0 0 45%; 
	}
	
	  .HSCLBWidth4 {
     flex: 0 0 45%; 
	}
	
	@media (max-width: 768px) {
  .HSCLBWidth3,
  .HSCLBWidth4 {
    flex: 0 0 100%;
  }
  
  .column, .columns {
    padding-right: .5375rem!important; 
    padding-left: .5375rem!important; 
}
}

	.HSCLBPlain {
		flex: 0 0 100% !important; 
	}
	
}

/*
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

 Accordian List Styles 

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*/

  
  .HSCAccordian code {
  font-family: monospace;
  font-weight: 600;
  }
  
  .HSCAccordian summary:focus {
  outline: 5px double #F7F306;
  }
  .HSCAccordian * {
    box-sizing: border-box;
    }
    
    .HSCAccordian:root {
    font-size: 1em;
    }
    
    .HSCAccordian {
  
    line-height: 1.5;
   /* min-height: 100vh; */
    font-size: 1.1rem;
    width: 100%;

    margin-left: auto;
    margin-right: auto;
   
  margin-bottom: var(--default-margin-bottom) !important;
    }
    
    .HSCAccordian *:focus {
    outline: none;
    }
    
    .HSCAccordian details {
      margin-bottom: 15px; 
  }
    .HSCAccordian details .accordianAns {
      border: 0px solid var(--highlight-colour);
    padding: 1.5em;
    background-color:var(--highlight-bg-colour);
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 

    }
    
    .HSCAccordian details .accordianAns > * + * {
    margin-top: 1.5em;
    }
    
    .HSCAccordian details + details {
    margin-top: .5rem;
    }
    
    .HSCAccordian summary {
    list-style: none;
  
    padding: .75em 1em;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.75rem + .75rem + .75rem);
    background-color:  var(--highlight-colour);
    color: #FFF;

    font-size: 1.1em;
    font-weight: bold;
   
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    
    }
    
    .HSCAccordian summary::-webkit-details-marker {
    display: none;
    }
    
    .HSCAccordian summary:before {
      position: absolute;
     
      left: 1rem;
      font-family: "Font Awesome 5 Free";
      content: "\f055";
      
      
  }
    
    
    .HSCAccordian details[open] summary:before {
         font-family: "Font Awesome 5 Free";
   content: "\f056";
    }
    
    .HSCAccordian summary:hover {
    background-color: var(--highlight-rollover-colour);
    }
    
    .HSCAccordian a {
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 0 0;
    }
    
    .HSCAccordian a:hover {
    box-shadow: 0 3px 0 0;
    }


/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.4em;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  color: #fff;   
  border: 1px solid transparent;

}

/* Only style anchors inside labels (won't affect site-wide links) */
.tag a {
  color: inherit;               /* keep contrast identical to label text */
  text-decoration: underline;   /* visible affordance on colored bg */
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  display: inline-block;        /* enables proper focus outline */
  outline: none;
font-weight: 600;
}
.tag a:visited { color: inherit; } /* avoid purple-on-color contrast issues */

/* Hover/focus on the link: clearer underline and focus ring */
.tag a:hover,
.tag a:focus-visible {
color: inherit; 
  text-decoration-thickness: 2px;
}
.tag a:focus-visible {
  /* High-contrast focus ring that sits inside the label */
  outline: 2px solid #fff;
  outline-offset: 2px;
}


/* Primary (blue) */
.tag-primary {
  background: #2563eb;        

}


/* Success (green) */
.tag-success {
  background: #16a34a;         

}


/* Warning  */
.tag-warning {
  background: #d9861c;          
   
}


/* Danger (red) */
.tag-danger {
  background: #dc2626;        
      
}


/* Info (cyan/sky) */
.tag-info {
  background: #0284c7;         
   
}


/* Neutral (black) */
.tag-neutral {
  background: #000;         
      
}


 .flex-container {
      display: flex;
      flex-wrap: wrap; /* Allows boxes to wrap on smaller screens */
      gap: 20px;
      
    }

    .flex-box-50 {
      flex: 0 0 calc(50% - 20px); /* 50% width on desktop - gap */
      
      display: flex;
	padding: 10px;

    }

    /* Mobile: full width */
    @media (max-width: 768px) {
      .flex-box-50 {
        flex: 0 0 100%;
      }
	  
	  .guidance-links h2 {
	font-size: 1.2rem;
	
	}

    }
	
	
	
	 /* Feature Boxes and News/posts */


.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 0.5fr)); /* auto-responsiveness */
  gap: clamp(12px, 2.5vw, 24px);
}

.feature-card {
  display: flex;
  flex-direction: column;

  overflow: clip; /* or hidden for broader support */
}


.feature-card-borders {
	  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* subtle base shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card-borders:hover,
.feature-card-borders:focus-within {
  transform: translateY(-4px); /* slight lift */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* deeper shadow */
}

.feature-card__media {
  display: block;
  aspect-ratio: 16 / 9; /* consistent thumbnail crop */
  overflow: hidden;
}

.feature-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-card__img {
  transform: scale(1.05); /* subtle zoom on hover */
}

.feature-card__content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0.75rem 1rem 1rem;
  flex: 1; /* pushes content to fill card */
}

.feature-card__date {
  font-size: .875rem;
  color: #666;
}

.feature-card__title {
  margin: 0;
  font-size: clamp(1rem, 1vw + .8rem, 1.2rem);
  line-height: 1.25;
}

.feature-card__title a {
  color: inherit;
  text-decoration: none !important;
}

.feature-card__title a:hover,
.feature-card__title a:focus {
  text-decoration: underline;
}

.feature-card__excerpt {
  margin: 0;
  color: #333;
}
/* Ensure content column fills leftover space below the image */
.feature-card__content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 0.75rem 1rem 1rem;
  flex: 1; /* already present in your CSS */
}

/* Push the date to the bottom of the content area */
.feature-card__date {
  margin-top: auto;
  font-size: .875rem;
  color: #666;
  padding-top: .5rem;                 /* optional separator */
  border-top: 1px solid rgba(0,0,0,.06);
}