/* ************** TOGGLE **************** */

.switchbox {
	
	color: #19E57F;
	margin-bottom: 0px;
	margin-left: 4px;
}


/* Toggle switch colours */
:root {
  --toggle-primary: #739ce6;
  --toggle-secondary: #a4c2f4;
  --toggle-tertiary: #95b9f0;
  --metl-toggle-primary: #B6FCD7; /* metl toggle colours */
  --metl-toggle-secondary: #f5a3a8; /* Approximation of darken(10%) */
  --metl-toggle-tertiary: #f07a7e; /* Approximation of lighten(20%) */
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--md-default-bg-color);
  font-size: 16px;
  line-height: 1.875em;
  position: relative;
}

body::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
  transition: 0.3s;
}

body.active::after {
  transform: translateX(0);
}


/* Input switch styling */

.input-switch {
	
	font-family: var(--branded-font);
}

.input-switch label {
  font-weight: 400;
  font-size: 1.4rem;
  color: white;
}

.input-switch {
  display: inline-block;
}

.input-switch .input {
  position: absolute;
  visibility: hidden;
}

.input-switch .input + .switch {
  position: relative;
  height: 34px; /* converted $bar-height to its value */
  width: 65px;
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 25px;
  background-color: #FFFFFF;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s 0.05s;
  border-style: solid;
  border-width: medium;
  border-color: #063920;
}

.input-switch .input + .switch::before,
.input-switch .input + .switch::after {
  content: "";
  position: absolute;
  transition: 0.25s;
}

.input-switch .input + .switch::before {
  top: 0;
  left: 0;
  height: 100%;
  width: 20%;
  border-radius: 10px;
  background-color: #ffffff;
  display: none;
}

.input-switch .input + .switch::after {
  left: 5px;
  top: 50%;
  height: 25px; /* converted $bar-thumb-size to its value */
  width: 25px; /* converted $bar-thumb-size to its value */
  border-radius: 50%;
  border: none;
  background-color: #0D7340;
  transform: translateY(-50%);
  opacity: 1;
}

.input-switch .input + .switch:hover::after {
  transform: translateY(-50%) scale(1.1);
}

.input-switch .input:checked + .switch {
  background-color: #ffffff;
}

.input-switch .input:checked + .switch::before {
  width: calc(100% - 5px);
  background-color: #ffffff;
}

.input-switch .input:checked + .switch::after {
  left: calc(100% - 25px); /* adjusted for width of the thumb */
  background-color: #19E57F;
}


/* New grid */

.dpcgrid {  

	display: grid;
	grid-template-columns: 5fr 420px;
	grid-template-rows: 360px 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 1em 2em;
	grid-auto-flow: row;
	margin-bottom: 8em;
	grid-template-areas:
		"hero directory"
		"gettingstarted directory"
		"news directory";
}

.titlecard { grid-area: 1 / 1 / 2 / 3; }
.fm { grid-area: 2 / 1 / 3 / 2; }
.tm { grid-area: 2 / 2 / 3 / 3; }
.resources { grid-area: resources; }
.directory { grid-area: directory; }

.gridcol {
	
	padding: 1em;
	border-radius: 8px;
}

.gridcol h3 {
	
	margin: 0.2em;
}

.hero { 

	grid-area: hero;
	text-align: left !important;
}

.hero h1 {
	
	color: #19E57F;
	margin-bottom: 10px !important;
	font-size: clamp(1rem, 4vw, 3.2rem) !important;
	text-align: left !important;
}

.hero p {
	
	margin-left: 4px;
}

.gettingstarted {
	
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: auto 1fr; 
  gap: 0px 2rem; 
  grid-area: gettingstarted; 
}

.titlecard h3 {
	
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	margin: 2rem 0rem 1rem !important;
}

.titlecard p {
	
	font-size: 1rem !important;
	font-weight: 400 !important;
}

.fm, .tm {
	
	margin-top: 1rem;
}

.fm p, .tm p {
	
	text-align: center !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
}

.fm img, .tm img {
	
	margin: 0rem auto 1rem auto !important;
}

.news {
	
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: auto 1fr; 
  gap: 0px 2rem; 
  grid-area: news; 
}


.directory {
	
	grid-area: directory;
	background-color: var(--md-default-bg-color);
	border-radius: 2px;
	box-shadow: 1px 1px 20px grey;
	padding: 1.4em;
	width: 100%;
}

.dirgrid {
	
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
	justify-content: space-between;
}

.dirgrid a {
	
	color: var(--md-typeset--homepage-a-color);
}

.dirgrid h2 {
  font-size: 2.0em;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.4;
  margin: 0.3em 0px 10px 0px;
  text-align: center;
}

.dirgrid p {
  margin-bottom: 5px;
  margin-top: 5px;
}

.docdir {
	
	/* width: 360px;  Fixed width for each card */
	height: 200px; /* Fixed height for each card */
	border-radius: 8px; /* Rounded corners */
	padding: 16px; /* Padding inside each card */
	display: flex; /* Flexbox to allow content alignment */
	flex-direction: column; /* Vertical layout for card content */
	justify-content: center; /* Center content vertically */
	font-weight: 500 !important;
}

.resources { grid-area: resources; }

.docdir ul li {
	
	margin-bottom: 0 !important;
}

.dpcshort { display: none; }


/* METL Stuff */

.metlgrid {  

	display: grid;
	/*grid-template-columns: 5fr 420px;*/
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr;
	grid-auto-rows: 1fr;
	grid-auto-flow: row;
	margin-bottom: 8em;
	grid-template-areas:
		"hero directory";
}


@media (max-width: 1100px) {
	
  .dpcgrid {  
  
   display: grid;
   grid-template-rows: 360px auto auto auto;
   grid-template-columns: 1fr;
   grid-auto-rows: 1fr;
   gap: 1em 2em;
   grid-auto-flow: row;
   margin-bottom: 8em;
   grid-template-areas:
   	"hero"
   	"gettingstarted"
	"directory"
   	"news";
  }
  
  .hero h1 {
	  
	font-size: clamp(0.2rem, 6.5vw, 3rem) !important;
  }
	
  .gettingstarted {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .news {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  
  .docdir {

	height: auto;
  }
  
}


@media (max-width: 800px) {
	

	.metlgrid {  

		display: grid;
		/*grid-template-columns: 5fr 420px;*/
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
		margin-bottom: 8em;
		grid-template-areas:
			"hero"
			"directory";
	}

	.gettingstarted {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	
	.news {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
	}
	
	.titlecard {
		grid-area: 1 / 1 / 2 / 2;
	}
	
	.fm {
		grid-area: 2 / 1 / 3 / 2;
	}
	
	.tm {
		grid-area: 3 / 1 / 4 / 2;
	}
	
	.docdir {
	
		max-width: 100%;
		max-height: 400px;
	}
	
	.dpcshort { display: block; }
	.dpclong { display: none; }
}


/* YouTube Container and video wrappers */

.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */  padding-top: 25px; margin-bottom: 1rem; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; box-shadow: 1px 1px 20px grey; }

.ytcontainer {
    width: 100vw;                /* Ensures the container takes full viewport width */
    position: relative;          /* Aligns the container with the viewport */
    left: 50%;                   /* Moves the container to the exact middle */
    right: 50%;
    margin-left: -50vw;          /* Pulls the container back to the left edge */
    margin-right: -50vw;
    background-color: #a4bdeb45;   /* Example background color, change as needed */
	
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.ytheader {
   
	display: block;
    justify-content: center;     /* Centers the flex items */
    max-width: 960px;            /* Adjust this value based on your main column width */
    margin: 0 auto;              /* Centers the flex container within the ytcontainer */
}

.ytcontainer .ytflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /* Centers the flex items */
    max-width: 960px;            /* Adjust this value based on your main column width */
    margin: 0 auto;              /* Centers the flex container within the ytcontainer */
}

.ytgrid { 

  justify-content: center;     /* Centers the flex items */
  max-width: 1500px;            /* Adjust this value based on your main column width */
  margin: 0 auto;  
  padding: 0 20px 0 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-rows: 1fr;
  gap: 20px 30px;
  grid-auto-flow: row;
  grid-template-areas:
    "ytheader ytlinks"
    "ytnew ytfeat";
}

@media (max-width: 800px) {
	
	.ytgrid { 

	  justify-content: center;     /* Centers the flex items */
	  max-width: 1500px;            /* Adjust this value based on your main column width */
	  margin: 0 auto;  
	  padding: 0 20px 0 20px;

	  display: grid;
	  grid-template-columns: 1fr;
	  grid-template-rows: auto;
	  grid-auto-rows: 1fr;
	  gap: 20px 30px;
	  grid-auto-flow: row;
	  grid-template-areas:
		"ytlinks"
		"ytnew"
		"ytpop"
		"ytfeat";
	}

	.ytheader, .ytlinks {

		display: none;
	}
}
.ytheader {
	grid-area: ytheader;
	margin: 0;
}

.ytlinks {
  max-width: 700px;
  padding: 0px 10px 0px 0px;
  text-align: right !important;
}

.ytlinks h3 a {
  background-color: #FF0000 !important;
  border-radius: 20px;
  color: #FFFFFF !important;
  font-weight: 600;
	grid-area: ytlinks;
  padding: 15px 15px;
}

.ytnew {

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "."
    ".";
  grid-area: ytnew;
}

.ytnew, .ytpop, .ytfeat {

	padding: 0 20px 0 20px;
    background-color: #a0a8cd59;
    border-radius: 12px;
}

.ytnew h3, .ytpop h3, .ytfeat h3 {
	
  text-align: left;
  font-style: italic;
  font-weight: 500;	
  margin-left: 0.6em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.ytpop {
	
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "."
    ".";
  grid-area: ytpop;
  text-align: left;
}

.ytfeat {

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "."
    "."
    ".";
  grid-area: ytfeat;
  text-align: left;
}

.yt-grid-item {
    margin-bottom: 40px;
}