/*
*
* ==========================================
* SHADOWS
* ==========================================
*
*/

/* List of shadows
*
* Basic Drop Shadow
* Offset Drop Shadow
* Drop Shadow Spread 5px
* One Edge Shadow
* Multi-box Color Shadows
*
*/

/* Basic Drop Shadow */
.shadow1 {
-moz-box-shadow: 0 0 10px;
-webkit-box-shadow: 0 0 10px;
box-shadow: 0 0 10px;
}

/* Offset Drop Shadow */
.shadow2 {
-moz-box-shadow: 5px 5px 10px;
-webkit-box-shadow: 5px 5px 10px;
box-shadow: 5px 5px 10px;
}

/* Drop Shadow Spread 5px */
.shadow3 {
-moz-box-shadow: 0 0 10px 5px;
-webkit-box-shadow: 0 0 10px 5px;
box-shadow: 0 0 10px 5px;
margin: 5px;
}

/* One Edge Shadow */
.shadow4 {
-moz-box-shadow: 0 8px 6px -7px;
-webkit-box-shadow: 0 8px 6px -7px;
box-shadow: 0 8px 6px -7px;
}

/* Multi-box Color Shadows */
.shadow5 {
-moz-box-shadow: 5px 5px 30px 5px red, -5px -5px 30px 5px blue;
-webkit-box-shadow: 5px 5px 30px 5px red, -5px -5px 30px 5px blue;
box-shadow: 5px 5px 30px 5px red, -5px -5px 30px 5px blue;
margin: 40px;
}

/* END SHADOWS */


/*
*
* ==========================================
* SCROLL-BEHAVIOR 
* ==========================================
*
*/

/* Smoothly animates links on page */

.smooth {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

/* END SCROLL-BEHAVIOR*/


/*
*
* ==========================================
* HR TEXT CONTENT DIVIDERS
* ==========================================
*
*/

/* Gray Divider*/
hr.hr-text {
  position: relative;
    border: none;
    height: 35px;
    background: #999;
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 2rem;
    color: #707070;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* Blue Divider*/
hr.hr-text-blue {
  position: relative;
    border: none;
    height: 35px;
    background: #5D85C6;
}

hr.hr-text-blue::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 2rem;
    color: #4271BD;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* END HR TEXT CONTENT DIVIDER */



/*
*
* ==========================================
* DIV CONTENT DIVIDERS
* ==========================================
*
*/

/* Regular Separator */

.separator {
background-color: #BCCCE0; padding: 5px; text-align: center; color: #33334d; font-size: xx-large;
}

/* End Regular Separator*/


/* Gradient Line Divider */
        /* minor cosmetics */
        .gradient-divider-line {
            display: table; 
            font-size: 24px; 
            text-align: center; 
            width: 75%; 					/* divider width */
            margin: 20px auto;					/* spacing above/below */
        }
        .gradient-divider-line div { display: table-cell; position: relative; }
        .gradient-divider-line div:first-child, .gradient-divider-line div:last-child {
            width: 50%;
            top: 13px;						/* adjust vertical align */
            -moz-background-size: 100% 2px; 			/* line width */
            background-size: 100% 2px; 				/* line width */
            background-position: 0 0, 0 100%;
            background-repeat: no-repeat;
        }
        .gradient-divider-line div:first-child {		/* color changes in here */
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#2D3B45));
            background-image: -webkit-linear-gradient(180deg, transparent, #2D3B45);
            background-image: -moz-linear-gradient(180deg, transparent, #2D3B45);
            background-image: -o-linear-gradient(180deg, transparent, #2D3B45);
            background-image: linear-gradient(90deg, transparent, #2D3B45);
        }
        .gradient-divider-line div:nth-child(2) {
            color: #2D3B45; padding: 0px 15px; width: auto; white-space: nowrap;
        }
        .gradient-divider-line div:last-child {			/* color changes in here */
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2D3B45), to(transparent));
            background-image: -webkit-linear-gradient(180deg, #2D3B45, transparent);
            background-image: -moz-linear-gradient(180deg, #2D3B45, transparent);
            background-image: -o-linear-gradient(180deg, #2D3B45, transparent);
            background-image: linear-gradient(90deg, #2D3B45, transparent);
        }

/* End Gradient Line Divider */


/*
*
* ==========================================
* TESTING CARDS FOR FOCUS GROUP
* ==========================================
*
*/

.cardpage {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.cardbody{
	min-height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cardcontainer{
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 1100px;
}
.card{
	width: 300px;
	background: #e0e5ec;
	padding: 40px 30px;
	margin: 20px 10px;
	border-radius: 1rem;
	box-shadow: 5px 5px 10px rgba(163,177,198,.8),
				-9px -9px 16px 5px rgba(255,255,255,.5);
}
.card h4{
	padding: 10px;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0;
	box-sizing: border-box;
}
.card h5{
	text-align: center;
	color: #9b9b9b;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 1rem;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.card p{
	color: #696969;
	font-size: 1rem;
	font-weight: bold;
	padding: 10px 0;
	line-height: 1.5rem;
}
.card a{
	display: block;
	padding: 1.2rem;
	text-align: center;
	text-decoration: none;
    	background-color: #e0e5ec; 
    	border-style:hidden;
	color: #2E3B6A
	margin: 10px 0;
	font-size: 1rem;
	font-weight: bold;
	box-shadow: 3px 3px 10px rgba(163,177,198,.8),
				-5px -5px 16px 5px rgba(255,255,255,.5);
	border-radius: 100px;
}
.card a:hover{
	box-shadow:	inset 5px 5px 10px rgba(163,177,198,.4),
			inset	-5px -5px 10px rgba(255,255,255,.4);
	background-color: #e0e5ec; 
}


/*
*
* ==========================================
* PARALLAX
* ==========================================
*
*/

.parallax {
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
  }


/*
*
* ==========================================
* TEXT OVERLAY
* ==========================================
*
*/

/* This allows designers to put text in front of a picture */

/* Image and text go inside this div */
.overlay-content {
  text-align: center;
  position: relative;
}

/* Use this div to lighten an image and put dark text overlayed */
.overlay-lighten {
  opacity: 0.3;
  }
  
/* Use this div to darken an image and put light text overlayed */
.overlay-darken {
filter: brightness(50%);
  }

/* Use this class in a div, h2, or p to center the overlayed text */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
*
* ==========================================
* BUTTON TRANSITIONS 
* ==========================================
*
*/


/* Fade */
.hover-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
  background-color: #008EE2;
  color: white;
}

/* Fade Red*/
.hover-fade-red {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade-red:hover, .hover-fade-red:focus, .hover-fade-red:active {
  background-color: #A63446;
  color: white;
}


/* Border Fade */
.hover-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px 	rgb(255, 255, 255, 0.0), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hover-border-fade:hover, .hover-border-fade:focus, .hover-border-fade:active {
  box-shadow: inset 0 0 0 4px #008EE2, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}



/* Glow */
.hover-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-glow:hover, .hover-glow:focus, .hover-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}


/* Shadow */
.hover-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/* Underline From Center */
.hover-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hover-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hover-underline-from-center:hover:before, .hover-underline-from-center:focus:before, .hover-underline-from-center:active:before {
  left: 0;
  right: 0;
}



/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}


/*
*
* ==========================================
* Columns
* ==========================================
*
*/

/* The property name columns has two values.  The pixel value determines the minimum width of the columns.  When the width is smaller than the minimum, the columns will merge.  The other value determines how many columns there will be if the screen has room enough for the miminum.  Small mobile device screens will likely be rendered as single column content.  */


.col2_200 {
  padding: 15px;
  columns: 200px 2;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col2_300 {
  padding: 15px;
  columns: 300px 2;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col3_200 {
  padding: 15px;
  columns: 200px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col3_300 {
  padding: 15px;
  columns: 300px 3;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col4_200 {
  padding: 15px;
  columns: 200px 4;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}

.col4_300 {
  padding: 15px;
  columns: 300px 4;
  column-fill: balance;
  column-gap: 35px;
  column-rule: 4px dashed #79a5ed;
}



/*
*
* ==========================================
* Tabbed Interaction
* ==========================================
*
*/


/* This tabbed interaction uses JavaScript to simulate real tab behavior within Canvas.
   Each tab button (.tab-link) contains a data-tab attribute that maps to a corresponding content panel (.tab-content).
   When a button is clicked, JavaScript adds the 'active' class to both the selected button and the matching content panel,
   while removing 'active' from all others. The CSS handles styling for active and inactive states.
   The tab buttons are styled to connect visually with the top of the content box, with no visible gap between them.
   This method requires JavaScript to function properly and is mobile-friendly with responsive layout and clean transitions. */




.js-tabs {
  width: 100%;
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.tab-link {
  display: inline-block;
  background: #ddd;
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: background 0.3s ease;
  margin-right: 0.25rem;
  text-decoration: none;
  color: black;
}

.tab-link:hover,
.tab-link:focus {
  background: #bbb;
  color: black;
  text-decoration: none;
}

.tab-link.active {
  background: #005fa3;
  color: white;
  text-decoration: none;
}

/* Canvas-compatible tab content visibility */
.tab-content {
  display: none;
  padding: 1rem;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content.active {
  display: block !important;  /* Critical for Canvas! */
  opacity: 1;
  transform: translateY(0);
}



/*
*
* ==========================================
* TABBED INTERACTION (CSS-only)
* ==========================================
*
*/

.tabs{
  position: relative;
  border: 1px solid #d7dde6;
  border-radius: 14px;
  background: #ffffff;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  padding-top: 48px; /* space for the tab bar */
  overflow: hidden;
}

/* Invisible anchor targets to keep the scroll position stable */
.tab-target{
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 80px; /* adjust if your page has a sticky header */
}

/* Tab bar */
.tabs-links{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-wrap: wrap;

  background: #f7f9fc;
  border-bottom: 1px solid #e6eaf0;
  border-radius: 14px 14px 0 0;
}

/* Tab buttons */
.tabs .tabs-links a{
  display: block;
  padding: 12px 16px;
  font-weight: bold;
  color: #636363;

  background: #f7f9fc;
  border-right: 1px solid #e6eaf0;

  white-space: nowrap;
  cursor: pointer;

  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.tabs .tabs-links a:last-child{
  border-right: none;
}

.tabs .tabs-links a:hover{
  background: #dde2e6;
}

/* Panels */
.tab{
  display: none;
  padding: 16px;
}

/* Default panel shows until a tab is selected */
.tab.default{
  display: block;
}

/* Show correct panel when target is selected */
#tab1:target ~ .panel-tab1,
#tab2:target ~ .panel-tab2,
#tab3:target ~ .panel-tab3,
#tab4:target ~ .panel-tab4,
#tab5:target ~ .panel-tab5,
#tab6:target ~ .panel-tab6,
#tab7:target ~ .panel-tab7,
#tab8:target ~ .panel-tab8,
#tab9:target ~ .panel-tab9,
#tab10:target ~ .panel-tab10,
#tab11:target ~ .panel-tab11,
#tab12:target ~ .panel-tab12{
  display: block;
}

/* Hide default when any tab is selected */
#tab1:target ~ .tab.default,
#tab2:target ~ .tab.default,
#tab3:target ~ .tab.default,
#tab4:target ~ .tab.default,
#tab5:target ~ .tab.default,
#tab6:target ~ .tab.default,
#tab7:target ~ .tab.default,
#tab8:target ~ .tab.default,
#tab9:target ~ .tab.default,
#tab10:target ~ .tab.default,
#tab11:target ~ .tab.default,
#tab12:target ~ .tab.default{
  display: none;
}

/* Persistent highlight on the selected tab */
#tab1:target ~ .tabs-links a[href="#tab1"],
#tab2:target ~ .tabs-links a[href="#tab2"],
#tab3:target ~ .tabs-links a[href="#tab3"],
#tab4:target ~ .tabs-links a[href="#tab4"],
#tab5:target ~ .tabs-links a[href="#tab5"],
#tab6:target ~ .tabs-links a[href="#tab6"],
#tab7:target ~ .tabs-links a[href="#tab7"],
#tab8:target ~ .tabs-links a[href="#tab8"],
#tab9:target ~ .tabs-links a[href="#tab9"],
#tab10:target ~ .tabs-links a[href="#tab10"],
#tab11:target ~ .tabs-links a[href="#tab11"],
#tab12:target ~ .tabs-links a[href="#tab12"]{
  background: #e7e9eb;
  color: #636363;
}




/*
*
* ==========================================
* ACCORDION - STYLED
* ==========================================
*
*/

/* Accordion container
   Creates the card appearance and spacing between accordions  */
.acc {
  border: 1px solid #d7dde6;          /* light gray border */
  border-radius: 14px;                /* rounded corners */
  background: #fff;                   /* white background */
  overflow: hidden;                   /* keeps inner content clipped to rounded corners */
  margin: 16px 0;                     /* vertical spacing between accordions */
  box-shadow: 0 1px 3px rgba(0,0,0,.12); /* subtle elevation */
}

/* Accordion header (the clickable summary bar) */
.acc summary {
  padding: 14px 16px;                 /* space inside header */
  cursor: pointer;                    /* shows pointer on hover */
  font-weight: bold;                  /* stronger header text */
  background: #f7f9fc;                /* light header background */
}

/* Header background when accordion is open
   Uses the built in [open] attribute on <details> */
.acc[open] summary {
  background: #eef4ff;                /* slightly tinted background when expanded */
}

/* Accordion body content
   Targets any direct child of <details> that is not <summary>
   This allows wrapper free HTML like:
   <details class="acc">
     <summary>Title</summary>
     <p>Text</p>
   </details> 
*/
.acc > *:not(summary) {
  padding: 14px 16px;                 /* space inside body */
  border-top: 1px solid #e6eaf0;      /* divider line between header and content */
  line-height: 1.5;                   /* readable text spacing */
  margin: 0;                          /* removes default paragraph margins */
}

/* If multiple body elements exist
   Example: <p> + <img>
   This prevents double borders and stacked padding
*/
.acc > *:not(summary) + *:not(summary) {
  border-top: none;                   /* avoid extra divider lines */
  padding-top: 0;                     /* prevent doubled vertical padding */
  margin-top: 12px;                   /* controlled spacing between elements */
}

/* Images inside accordion
   Ensures responsive behavior inside Canvas */
.acc img {
  max-width: 100%;                    /* prevents overflow */
  height: auto;                       /* maintains aspect ratio */
  display: block;                     /* removes inline image spacing */
}



/*
*
* ==========================================
* POPUPS
* ==========================================
*
*/


/* Hide all popups by default */
.popup {
  display: none;
}

/* Show popup when targeted */
.popup:target {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
}

/* Backdrop overlay */
.popup > a {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Dialog panel */
.popup > div {
  position: fixed;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 10px;
  width: min(720px, 92vw);
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);

  resize: both;
  overflow: auto;

  max-width: 92vw;
  max-height: 80vh;

  min-width: 280px;
  min-height: 160px;
}

/* Close "X" button */
/* Override Canvas link styling */
.popup > div > a,
.popup > div > a:link,
.popup > div > a:visited,
.popup > div > a:active {
  position: absolute;
  top: 10px;
  right: 14px;

  text-decoration: none !important;
  border-bottom: none !important;
  background: none !important;
  background-image: none !important;

  font-size: 20px;
  font-weight: 700;
  color: #444 !important;

  padding: 0;
  line-height: 1;

  transition: transform 0.15s ease, text-shadow 0.15s ease;
}

/* Hover effect: subtle shadow and slight scale */
.popup > div > a:hover {
  color: #000 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transform: scale(1.1);
  cursor: pointer;
}

/* Title spacing */
.popup h2 {
  margin: 0 28px 10px 0;
}

</style>