/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/*---------- End Reset -----------------*/



:root{
	/*---- Dark Colors ----*/
	--pri-dark: #271502;
	--sce-dark: #0039a6;

	/*---- Light Colors ----*/
	--pri-light: #f1f1f1;
	--sce-light: #fafafa;

	/*---- Link Color ----*/
	--pri-link: #cf2e2e;

	/*---- Box-shadow Color ----*/
	--box-shadow: 0px 5px 10px #0039a649;
	
}

:root.alternative{
	--pri-dark: #f1f1f1;
	--sce-dark: #fafafa;

	/*---- Light Colors ----*/
	--pri-light: #111;
	--sce-light: #333;
	/*---- Box-shadow Color ----*/
	--box-shadow: 0px 5px 10px #fafafa49;
	

}

body{
  background: #bdeaee;
	font-size: 16px;
	line-height: 1.5;
  max-width: 100em;
  margin: 0 auto;
  
}

/* ------------------------------------------------------ 
LAYOUT
------------------------------------------------------ */
header {
	position: relative;
	height: auto;
	background-color:#fafafa;
	padding-top: 20px;
  
}

main{
  position: relative;
  margin: 0 auto;
	background-color: var(--pri-light);
	color: var(--pri-dark);
  padding: 6vw;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 3em;
	
}


footer{
  padding: 2vw;
}
.copy {
	padding: 3ch;
	text-align: center;
}	

/* ------------------------------------------------------ 
TYPOGRAPHY
------------------------------------------------------ */

H1, H2, H3{
  font-family: "Arial", "Helvetica Neue", "Liberation Sans", sans-serif;
}

p{
  font-family: "Verdana", "Geneva", "DejaVu Sans", sans-serif;
}

li, .cls-1{
  font-family: "Tahoma", "Helvetica Neue", "Liberation Sans", sans-serif;
}


h1{
	font-size: clamp(2rem, 3vw + 1rem, 2.5rem); 
  font-weight: 700;
}

h2, h3, h4{
  font-size: clamp(1.25rem, 1.7vw + 1rem, 1.75rem); 
}
nav li, .cls-1{
	font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem); 
}
p, section li{
	font-size: clamp(1rem, 1.5vw + 1rem, 1.125rem); 
  font-weight: 400;
}

h2, h3, h4, nav li, .cls-1{
  font-weight: 600;
}

/* ---------------------------------------------------
HEADER STYLING
--------------------------------------------------- */
/*----MENU STYLING----- */
nav ul li a:link,
nav ul li a:visited {
    display: block;
    padding-left: 3vw;
    color: var(--pri-link);
    text-decoration: none;
    text-align: left;
    text-transform: capitalize;
    background-color: transparent;
    transition: background-color .2s ease-in-out;
}

nav ul li a:hover,
nav ul li a:active,
nav ul li a:focus{
    color: var(--sce-light);
    background-color: var(--pri-dark);
}

/* Menu toggle */
input#menu-toggle {
    opacity: 0;
    position: absolute;
}

label.toggle {
    display: inline-block;
    width: auto;
    position: relative;   
    text-transform: capitalize;
    font-size: 1.2em;
    line-height: 1;
    color: var(--pri-link);
}

label.toggle:hover,
label.toggle:active,
label.toggle:focus, section a {
    cursor: pointer;
}

/* Visual focus */
label.toggle::before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

input#menu-toggle:focus-visible + label.toggle::before {
    border-top: 1px solid var(--pri-link);
    border-bottom: 1px solid var(--sce-dark);
    outline: none;
}

/* Show/hide menu */
input#menu-toggle + label.toggle + ul {
    display: none;
}

input#menu-toggle:checked + label.toggle + ul {
    display: block;
}

/* 3-lined toggle visualization */
label.toggle strong {
    position: absolute;
    display: block;
    width: 30vw;
    top: 0px;
    left: calc(3vw + 42px);
    color: #271502;
}

label.toggle:hover strong {
    color: var(--pri-link);
}

label.toggle .line {
    background: var(--pri-link);
    display: block;
    border-radius: 3px;
    height: 3px;
    width: 26px;
    margin: 0 0 6px 3vw;
    transform: rotate(0deg);
    transition: .2s ease all;
}

label.toggle:hover .line {
    background: #271502;
}

input#menu-toggle:checked + label.toggle .line.top {
    transform: rotate(45deg);
    transform-origin: 0 0;
}

input#menu-toggle:checked + label.toggle .line.mid {
    opacity: 0;
}

input#menu-toggle:checked + label.toggle .line.bot {
    transform: rotate(-45deg);
    transform-origin: 0 90%;
}
/*----TTS STYLING----- */
#read-aloud{
	position: absolute;
	top: 5px;
	right: 60px;
	transform: translateX(-50%);
}

.tts-control-panel {
	display: none;
  display: flex;
	align-items: center;
	padding: 10px;
	background-color: #fafafa;
	box-shadow: 0px 5px 10px #0039a649;
	border-radius: 10px;
	width: 145px;
}
#read-aloud #toggleButton,
.tts-control-panel select,
.tts-control-panel button,
.tts-control-panel input,
.tts-control-panel label
 {
	box-shadow: 0px 5px 1px #0039a649;
	font-size: 12px;
	margin: 5px;
}
#toggleButton{
	display: block;

	width: 90px;
   background-color:  #fafafa;
   border-radius: 7px;
   margin: 20px;
}

#voiceTypeDropdown{
	width: 100px;
	font-size: 12px;
}

/*----Dark Mode----*/
#darkmode{
	position: absolute;
	top: 5px;
	right: 10px;
}

#darkmode label {
	display: block;
	padding-top: 10px;
	width:80px;
	height:30px;
	margin-top: 6px;
	position: relative;
	background: #ebebeb;
	border-radius: 200px;
	box-shadow: inset 0px 5px 15px rgba(0,0,0,0.2), inset 0px -5px 15px rgba(255,255,255,0.6);
	border: 3px solid #0039a649;
	cursor: pointer;
	transition: 0.3s;	
}
 #darkmode-toggle{
	margin-top: 10px;
 }
 label.toggle1 strong {
  position: absolute;
  display: block;
  top: 30px;
  left: 0px;
  color: #271502;
  font-size: 14px;
}

 #darkmode label:after {
	content: "";
	width:25px;
	height: 25px;
	position: absolute;
	top:1px;
	left: 0;
	background: linear-gradient(180deg,#ffcc89,#cf2e2e);
	border-radius: 180px;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
	transition: 0.3s;
}
#darkmode input {
	display: none;
}
#darkmode input:checked + label {
	background: #242424;
}
#darkmode input:checked + label:after {
	left:74px;
	transform: translateX(-100%);
	background: linear-gradient(180deg,#999,#5a5a5a);

}
#darkmode label:active:after{
	width: 50px;
}

#darkmode label svg {
	position: absolute;
	width: 20px;
	top:2.2px;
	z-index: 100;
}
#darkmode label svg.sun {
	left:2px;
	fill: #fff;
	/*transition: 0.3s;*/
}
#darkmode label svg.moon {
	left:52px;
	fill:rgba(0,0,0,0.05);
	/*transition: 0.3s;*/
}
#darkmode input:checked + label svg.sun {
	fill:rgba(255,255,255,0.2);
}

#darkmode input:checked + label svg.moon {
	fill:#fff;

}

header .owl{
	display: block;
	width: calc(8vw + 200px);
   	height: auto;
   	margin: 10px auto 0 auto;
}

.cls-1 {
  fill: #dfdfd8;
}

.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19, .cls-20, .cls-21, .cls-22, .cls-23, .cls-24, .cls-25, .cls-26, .cls-27, .cls-28, .cls-29, .cls-30, .cls-31, .cls-32, .cls-33, .cls-34 {
  fill-rule: evenodd;
}

.cls-2 {
  fill: #007200;
}

.cls-3 {
  fill: #859596;
}

.cls-4 {
  fill: #f4f6f6;
}

.cls-5 {
  fill: #203534;
}

.cls-6 {
  fill: #626b61;
}

.cls-7 {
  fill: #b3783b;
}

.cls-8 {
  fill: #d4b88f;
}

.cls-9 {
  fill: #ed9a7e;
}

.cls-10 {
  fill: #e1e2db;
}

.cls-11, .cls-19 {
  fill: #ce2d2e;
}

.cls-12 {
  fill: #adb5ae;
}

.cls-13 {
  fill: #1e4597;
}

.cls-14 {
  fill: #b1b7ad;
}

.cls-35, .cls-36 {
  fill: none;
}

.cls-15 {
  fill: #b6bdb5;
}

.cls-16 {
  fill: #d4d8d2;
}

.cls-17 {
  fill: #945618;
}

.cls-18 {
  fill: #e3e2d9;
}

.cls-19 {
  stroke: #fff;
  stroke-miterlimit: 10;
}

.cls-20 {
  fill: #143037;
}

.cls-37, .cls-38 {
  isolation: isolate;
}

.cls-21 {
  fill: #e8b678;
}

.cls-36, .cls-39 {
  stroke: #b1763a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
}

.cls-22 {
  fill: #f6f9fa;
}

.cls-39 {
  fill: #f0f0f0;
}

.cls-23 {
  fill: #aeb6ae;
}

.cls-24 {
  fill: #0039a6;
}

.cls-38 {
  fill: #271502;
  font-family: Arial-BoldMT, Arial;
  font-size: 25.5px;
  font-weight: 700;
}

.cls-25 {
  fill: #27190d;
}

.cls-26 {
  fill: #d8dbd4;
}

.cls-27 {
  fill: #b1763a;
}

.cls-28 {
  fill: #b6bdb4;
}

.cls-29 {
  fill: #dadbd5;
}

.cls-30 {
  fill: #f5f6f6;
}

.cls-31 {
  fill: #b1bab2;
}

.cls-32 {
  fill: #d3d7d1;
}

.cls-33 {
  fill: #dbddd7;
}

.cls-34 {
  fill: #a8b1aa;
}

h1{
	grid-column: 1 / -1;
	text-align: center;
}
main p{
	grid-column: 1 / -1;
	max-width: 40em;
	margin: 0 auto;

}

#star{
  grid-column: 1 / -1;
  justify-self: center;
  width: 25em;
  height: auto;
}

.cls-1{
  isolation: isolate;
  cursor: pointer;
  fill: var(--pri-link);
  text-decoration: underline;
}

.cls-1:hover{
  fill: var(--pri-dark);
}

.cls-2, .cls-3, .cls-4 {
  stroke-width: 0px;
}
.cls-2{
  fill:#EC1D24;
}

.cls-3 {
  fill: none;
}

.cls-4 {
  fill: #224085;
}

.cls-5 {
  letter-spacing: -.02em;
}


#star, .close{
  display: none;
}

/* ---------------------------------------------------
CARDS STYLING 
--------------------------------------------------- */

section, .popup{
 
	background-color:  var(--sce-light);
	border-radius: 10px;
	box-shadow: 0px 5px 10px #0039a649;
	margin: 0 auto;
  
}

section h2{
	display: block;
  border-top-left-radius: 10px ;
	border-top-right-radius: 10px ;
	width: 100%;
  min-height: 11vh;
	background-color: var(--sce-dark);
	color: var(--sce-light);
	padding: 15px;

  
}
h2, h3, h4{
  text-align: center;
}


section p{
	margin: 1rem 2rem ;
}


section li{
  color: var(--sce-dark); 
  list-style-type: square;
  padding-bottom: 1rem;
  margin: 0 2rem 0 4rem;
}

section li:first-child{
  margin-top: 2em;
}


section a{
  color: var(--pri-link);
}

section a:hover{
  color: var(--sce-light);
  background-color: var(--pri-dark);
}



.popup strong, section strong{
  font-weight: 900;
  color: var(--sce-dark);
}

.wavey {
  display: none;
}
 footer{
  background-color: #fafafa;
 }

@media (min-width: 800px) {

  input#menu-toggle + label.toggle + ul,
    input#menu-toggle:checked + label.toggle + ul {
        display: block;
    }
    
    input#menu-toggle + label.toggle,
    input#menu-toggle:checked + label.toggle {
        display: none;
    }
    header{
      padding: 20px;
    }
    
   header nav ul {
        position: absolute;
        top: 25%;
        left: 37%;
    }
    
     nav ul li {
        display: inline;
    }
    
    nav ul li a:link,
    nav ul li a:visited {
        margin: 0 1px;
        padding: 13px;
        display: inline-block;
        text-align: center;
    }
    
    nav ul li a:hover,
    nav ul li a:active,
    nav ul li a:focus {
        background-color: transparent;
        color: #271502;
        text-decoration: underline;
    }
    
		/*----LOGO STYLING-----*/
		header .owl{
      display: block;
      position: static;
      margin: 0;
			height: auto;
    
		}

    .wavey {
      display: block;
      position: absolute;
      bottom: 0 ; 
      left: 0;
      width: 100%;
      overflow: hidden;
      line-height: 0;
  }
  
  .wavey svg {
      position: relative;
      display: block;
      width: calc(100% + 1.3px);
      height: 50px; 
  }
  
.wavey .shape-fill {
  fill: var(--pri-light);
  }

 
  #star{
    display: block;
    width: 50em;
    height: auto;
  }

  .popup {
    width: 40rem;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
  }
  
  .popup header h2 {
    margin: 0 0 10px;
  }
  
  .popup .close {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 3rem;
    color: var(--sce-light);
    cursor: pointer;
  }
    
  #overlay{
    display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
   }
  
    .noscroll{ 
      overflow: hidden; 
      height: 100%;
      width: 100%; position: fixed; 
    }

    #wellbeing{ 
      grid-template-rows: 3;
    }

    #wellbeing section:nth-child(3){
      grid-column: 1;
      grid-row: 3 / 6;
    }
    #wellbeing section:nth-child(4){
      grid-column: 2;
      grid-row: 3 / 5;
    }
    open-day section:last-child{
      grid-column: 1 / 2;
    }



  footer nav{
    position: static;
    text-align: center;
  }

  #journey section:nth-child(5){
    grid-row: 3;
  }

}



@media (min-width: 900px) {

  #open-day section:first-child{
    grid-column: 1 / 2;
  }
  #open-day section:last-child{
    grid-column: span 2;
  }

  #journey section:nth-child(2){
    grid-column: 1;
    grid-row: span 2
  }

  #journey section:nth-child(5){
    grid-column: 2 / -1;
    grid-row: 3;
  }

}