/*** Globals ***/

:root {
	--font-text: 'Merriweather Sans', sans-serif;
	--font-display: 'Lilita One', serif;
	--bg-colour: #f9f5ea;
	--tx-colour: #6f4433;
	--highlight-colour: #efe9d0;
	--olive: #978f34;
	--yellow: #de9827;
	--mid-yellow:  #e4b351;
	--dark-yellow: #d9c693;
	--table-yellow: #d2b940;
	--red: #bc4c16;
	--sea-blue: #46c2d2;
	--easy: #70ad47;
	--moderate: #4472c4;
	--hard: #323e4f;
}

/* Check out the has() selector before writing too much https://www.youtube.com/watch?v=OGJvhpoE8b4 */

/*** Reset ***/
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, tt, var,
b, u, i, center,
dl, dt, dd,
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;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse; 
	border-spacing: 0;
}

em {
	font-style: italic;
}

img {
	width: 100%;
	height: auto;
}

/*** Structure ***/
* {
    /*border: 1px solid #f00 !important;*/
}

html {
	margin: 0;
	padding: 0;
}

body {
	color: var(--tx-colour);
	background: var(--bg-colour);
	margin: 0;
	font-family: var(--font-text);
	overflow-x: hidden;
	line-height: 1.5em;
	padding-top: 3em;
}

section {
	padding: 3em 0;
}

#skiptocontent a {
    padding: 10px;
    position: fixed;
    top: -40px;
    left: 0px;
    color: #fff;
    background: #004f41;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 43000;
}

#skiptocontent a:focus {
	position: fixed;
	left: 0px;
	top: 0px;
	-webkit-transition: top .1s ease-in;
    transition: top .1s ease-in;
}

.wrapper {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	padding: 0 2%;
}

.text-wrapper {
	max-width: 900px;
	margin: 0 auto;
}

.wrapper:has(nav) {
	padding: 12px 2% 4px 2%;
}

/* Typography */

h1 {
	font-family: var(--font-display);
	color: var(--olive);
	font-weight: 300;
	font-size: clamp(2.6rem, 4rem + 2vw, 9.8rem);
	line-height: 0.85em;
	margin-top: 8vh;
}

.fixed-bg h1 {
	color: white;
	text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

h2, h3 {
	line-height: 1em;
}

h2 {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.2rem + 0.5vw, 3.8rem);
	font-weight: 500;
    padding-top: 1em;
}

h3 {
	font-size: 1.6rem;
	text-transform: uppercase;
	font-weight: 300;
    padding-top: 0.4em;
	border-top: solid 1px var(--dark-yellow);
}

h4 {
	color: var(--highlight-colour);
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: 0.4em;
}

h5 {
	font-size: 1.2rem;
	font-weight: 700;
	margin-top: 0.8em;
}

p {
    margin: 1.2em 0;
}

p, ol, ul {
    font-weight: 300;
    line-height: 1.6em;
	font-size: 1.3rem;
}

blockquote {
	font-family: var(--font-display);
	font-size: 1.6rem;
    line-height: 1.3em;
	font-weight: 700;
	font-style: italic;
	color: #aaa16a;
	border-top: solid 4px #faedc5 ;
	border-bottom: solid 4px #faedc5 ;
	padding: 1em 0;
}

button {
	font-size: 1.6rem;
	background: var(--yellow);
	color: white;
	border-radius: 26px;
	border: none;
}

button:hover {
	background: var(--red);
}

button a, button a:visited {
	display: inline-block;
	color: #fff;
	padding: 1.25em;
}

button a:hover, button a:active {
	color: #fff;
	text-decoration: none;
}

thead tr {
	background: var(--table-yellow);
	color: #fff;
	font-weight: 700;
}

th, td {
	padding: 8px 20px;
}

a, a:visited {
	color: var(--olive);
}

a:hover, a:active {
	color: var(--red);
	text-decoration: none;
}

/* General styles */

.visually-hidden {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.clear {
	clear: both;
}

strong, .strong {
	font-weight: 900;
}

.centred {
	text-align: center;
}

.left-image, .right-image, .text-width-image {
	width: 100%;
	margin: 40px 0;
}

.chart {
	margin: 100px 0;
}

.baseline {
	align-self: flex-end;
}

figcaption {
	color: var(--red);
	padding: 0.5em 0;
	border-bottom: solid 2px var(--dark-yellow);
	font-size: 0.75rem;
	line-height: 1.25em;
	font-weight: 300;
	margin-bottom: 4em;
}

#HCAI-logo {
	width: 18%;
}

#HCAI-logo img {
	filter: drop-shadow(4px 4px 8px rgb(0 0 0 / 0.4));
}

#HCAI-banner-logo {
	width: 80px;
}

#banner-cont {
	display: flex;
	justify-content: space-between;
}

#home-intro p {
	color: #fff;
	font-size: 1.6rem;
	line-height: 1em;
	font-weight: 500;
	text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

.wide-image {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	grid-template-areas: 
		"text1"
		"text2"
		"img";
	margin-bottom: 3em;
}

#dwr-initial-text {
	grid-area: text1;
}

#dwr-continued-text {
	grid-area: text2;
}

#dwr-img {
	grid-area: img;
}

/* Nav */

#nav-banner {
	background: var(--red);
	z-index: 31;
	position: fixed;
	width: 100%;
	height: 72px;
	top: 0px;
	left: 0px;
	border-bottom: solid 2px #fff;
}


/* Responsive menu */
#menuicon {
	display: block;
	padding: 0;
	z-index: 379;
	background: transparent;
	border: none;
	cursor: pointer;
}

.burger {
	display: block;
	width: 2.25em;
	height: 2.25em;
	fill: var(--highlight-colour);
}

#menuicon:hover .burger {
	fill: #fff;
}

#menuicon .line {
  transition: y 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
  transform-origin: center;
}

#menuicon[aria-expanded="true"] .line {
  transition: y 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
}

#menuicon[aria-expanded="true"] :is(.top, .bottom) {
  y: 45;
}

#menuicon[aria-expanded="true"] .top {
  rotate: 45deg;
}

#menuicon[aria-expanded="true"] .middle {
  opacity: 0;
}

#menuicon[aria-expanded="true"] .bottom {
  rotate: -45deg;
}

#menuicon .line {
  transition: y 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
  transform-origin: center;
}

#menuicon[aria-expanded="true"] .line {
  transition: y 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
}

#menuicon[aria-expanded="true"] :is(.top, .bottom) {
  y: 45;
}

#menuicon[aria-expanded="true"] .top {
  rotate: 45deg;
}

#menuicon[aria-expanded="true"] .middle {
  opacity: 0;
}

#menuicon[aria-expanded="true"] .bottom {
  rotate: -45deg;
}

#site-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 0;
}

#site-menu li {
	font-size: 1.25rem;
	font-weight: 500;
	text-transform: uppercase;
	list-style: none;
	background-color: var(--red);
	position: relative;
	padding: 1em;
	border-top: solid 2px var(--yellow);
}

#site-menu li:hover {
	color: #fff;
	background: var(--tx-colour);
}

.sub-menu-parent svg {
	display: none;
}

#site-menu a, #site-menu a:visited {
	font-size: 1rem;
	font-weight: 400;
    color: var(--highlight-colour);
	text-transform: uppercase;
}

#site-menu li:hover a, #site-menu li:active a {
	color: #fff;
}

#site-menu a, #site-menu a:visited, #site-menu a:hover, #site-menu a:active {
	text-decoration: none;
	white-space: nowrap;
}

#site-menu[data-state="opened"] {
  animation: clipPathMenuOpen 1s ease-in-out forwards;
  display: block;
}

#site-menu[data-state="closing"] {
  animation: clipPathMenuClose 1s ease-in-out forwards;
}

#site-menu[data-state="closed"] {
  display: none;
}

#site-menu ul {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-left: 1em;
	padding-inline-start: 0;
    box-sizing: border-box;
    margin-top: 0.5em;
}

#site-menu ul li {
}

#site-menu li.sub-menu-parent {
	padding: 1em 0 0 0;
}

.sub-menu-parent a {
	padding-left: 1em;
}

@keyframes clipPathMenuOpen {
  0% { clip-path: rect(-20% 115% 0 100% round 60%); }
  100% { clip-path: rect(0 100% 100% 0); }
}
@keyframes clipPathMenuClose {
  0% { clip-path: rect(0 100% 100% 0); }
  100% { clip-path: rect(-20% 115% 0 100% round 60%); }
}

@keyframes clipPathSubMenuOpen {
  0% { clip-path: rect(-20% 0 0 -20% round 30%); }
  100% { clip-path: rect(0 100% 100% 0); }
}
@keyframes clipPathSubMenuClose {
  0% { clip-path: rect(0 100% 100% 0); }
  100% { clip-path: rect(-20% 0 0 -20% round 30%); }
}

/* Sections */

.fixed {
	position: fixed;
}

.fixed-bg {
    min-height: 100vh;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: initial;
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom: 4em;
    position: relative;
}

#intro {
	background-image: url(../img/setting-up-camera-trap.jpg);
}


/* Main buttons */

#module-container {
	padding: 2em 2%;
	margin-top: 3em;
	background: rgba(151, 143, 52, 0.6);
	text-align: center;
	color:  #fff;
}

.modules {
	display: flex;
	justify-content: space-between;
}

.module {
	position: relative;
    overflow: hidden;	
	width: 32%;
}

.photo-module {
	height: 160px;
}

#module-cont-collecting {
    clip-path: url(#collectingClip);
}

#module-cont-caring {
    clip-path: url(#caringClip);
}

#module-cont-sharing {
    clip-path: url(#sharingClip);
}

#module-container h2 {
	padding-top: 0;
	margin-bottom: 1em;
}

.module p {
	font-size: 1rem;
	line-height: 1em;
	margin-top: 0.2em;
	font-weight: 500;
	opacity: 0;
}

.module-inner, .contact-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: initial;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform 400ms;
}

.module:hover .module-inner, .module:focus .module-inner, .contact-grid:hover .contact-inner, .contact-grid:focus .contact-inner {
    transform: scale(1.2);
}

#module-collecting {
	background-image: url("../img/learning-drone-skills.jpg");
}

#module-caring {
	background-image: url("../img/camera-on-tripod.jpg");
}

#module-sharing {
	background-image: url("../img/data-dashboard.jpg");
}

/* Sub-modules */

.sub-modules {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 6%;
	row-gap: 6%;
	margin: 2em 0;
}

.module-content {
	display: none;
}

.module-intro {
	width: 100%;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 6%;
	grid-template-areas: 
	    "text"
	    "image";
}

.module-image img {
	border-radius: 0 30px;
}

.sub-module {
	position: relative;
	text-align: center;
}

.sub-module-bg {
	fill: var(--yellow);
}

.sub-module-bg:hover {
	fill: var(--tx-colour);
}

.sub-module-text {
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1.1em;
	width: 60%;
	margin-left: 20%;
	position: absolute;
	color: #fff;
	top: 30%;
	pointer-events: none;
}

.displayed .sub-module-bg, .displayed .sub-module-bg:hover {
	fill: var(--red);
}

.inline-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: baseline;
    margin: 0 3px;
}

.basemap {
 	background: url("../img/basemap-icon.svg") no-repeat;
    background-size: contain;
}

.share {
 	background: url("../img/share-icon.svg") no-repeat;
    background-size: contain;
}

.add {
    width: 22px;
    height: 22px;
 	background: url("../img/add-icon.svg") no-repeat;
    background-size: contain;
}

/* Individual skills pages */

.closed, .open {
    cursor: pointer;
    position: relative;
}

.closed:before, .open:before {
    position: absolute;
    font-family: 'FontAwesome';
    top: 0;
    right: 10px;
    color: var(--highlight-colour);
	font-size: 1.6rem;
}

.closed:before {
    content: "\f0d7";
}

.open:before {
    content: "\f0d8";
}

.closed:hover:before, .open:hover:before {
    color: #fff;
}

.skill-unit {
	color:  #fff;
	font-weight: 700;
	padding: 8px 30px 8px 8px;
	list-style-position: inside;
	margin: 8px 0 0 -40px;
	border-radius: 8px;
}

.easy {
	background: var(--easy);
}

.moderate {
	background: var(--moderate);
}

.hard {
	background: var(--hard);
}

.skills {
	display: none;
	margin-left: -10px;
}

.skills p {
	margin: 4px 0 4px 26px;
	font-size: 1.2rem;
	position: relative;
}

.skills p:before {
    position: absolute;
    font-family: 'FontAwesome';
    content: "\f096";
    top: 0;
    left: -26px;
    color: var(--font-text);
	font-size: 1.2rem;
}

.skill-legend {
	display: flex;
	align-content: flex-end;
	flex-direction: column;
	column-gap: 2%;
	margin-top: 0.6em;
}

.legend-colour {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	display: inline-block;
	border-radius: 4px;
}

.skill-legend p {
	font-size: 0.9rem;
	vertical-align: middle;
	display: inline-block;
	margin-top: -0.6em;
	margin-bottom: 0;
}

/* Training page */

#training-tile-cont {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em 3%;
	margin-top: 4em;
}

.training-tile {
	width: 47%;
}

/* Contact */

#contact a, #contact a:visited, #contact a:active, #contact a:hover {
	text-decoration: none;
} 

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 6%;
	height: 220px;
	background-color: var(--mid-yellow);
	margin-top: 3em;
}

.contact-grid:hover {
	background-color: var(--red);
}

.contact-pic {
	position: relative;
	margin: 8%;
}

#contact1 {
    clip-path: url(#contact1Clip);
}

#contact2 {
    clip-path: url(#contact2Clip);
}

#contact-img1 {
	background-image: url("../img/ricky.jpg");
}

#contact-cont-img1 {
    clip-path: url(#contactimg1Clip);
}

#contact-img2 {
	background-image: url("../img/Cathy-Robinson-1024x683.jpg");
}

#contact-cont-img2 {
    clip-path: url(#contactimg2Clip);
}

.contact-text {
	align-self: center;
	font-size: 1.2em;
}

.contact-text p, .contact-text h4 {
	margin-top: 0;
	color: #fff;
}

/* Overlay parts – from previous projects, just here in case we need them later */

.overlay-panel {
	text-align: left;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-weight: 500;
	border-radius: 14px;
	padding: 20px 3%;
	position: sticky;
    position: -webkit-sticky;
    top: 400px;
    margin-top: 1000px;
    margin-bottom: 200px;
	width: 50%;
	margin-left: 10%;
}

.left-overlay {
	margin-left: 5%;
}

.overlay-panel p {
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.5em;
	margin: 0.4em 0;
}

.overlay-panel h3 {
	font-size: 3.2rem;
	font-family: var(--font-display);
	text-transform: none;
	border-top: none;
}

.overlay-panel.narrow {
    top: 200px;
	width: 30%;
	margin-left: 5%;
}

.overlay-panel.narrow h3 {
	font-size: 2.6rem;
}

.spacer {
    width: 20px;
    height: 1000px;
}



/* Footer */

footer {
	padding-top: 2em;
	background: #fff;
	border-top: solid 6px var(--red);
}

#logo-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 2%;
	margin-bottom: 2em;
	justify-items: center;
}

.footer-logo {
	width: 80%;
	align-self: center;
	padding: 20px 0;
}

.wide-logo {
	width: 100%;
}

#footer-base {
	background: var(--red);
	padding: 2em 0;
}

.split {
	display: flex;
	justify-content: space-between;
}

.fineprint {
	font-size: 0.8rem;
	color: #fff;
}

.fineprint a {
	color: var(--highlight-colour);
}

.fineprint a:hover, .fineprint a:active {
	color: #fff;
	text-decoration: underline;
}


/* Media queries */

@media only screen and (min-width: 630px) {

	.photo-module {
		height: 200px;
	}

	#logo-container {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	.module-intro {
		grid-template-columns: 3fr 2fr;
		grid-template-areas: 
		    "text image";
	}

	.module-image img {
		margin-top: 1.2em;
	}

	.contact-grid {
		grid-template-columns: 1fr 2fr;
	}

	.contact-pic {
		margin: 4% 0 8% 8%;
	}

}

@media only screen and (min-width: 720px) {

	h4 {
		font-size: 1.25rem;
	}

	.sub-modules {
		margin: 2em 10%;
	}

	.skill-legend {
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 0.6em;
	}

	.training-tile {
		width: 30%;
	}

}

@media screen and (min-width: 800px) {

	#module-container {
		padding: 2em 6%;
	}

	.modules {
		justify-content: space-evenly;
	}

	.module-intro {
		grid-template-columns: 2fr 1fr;
	}

	.wide-image {
		grid-template-columns: 1fr 1fr;
		gap: 0 2em;
		grid-template-areas: 
			"text1 img"
			"text2 text2";
	}

}

@media screen and (min-width: 900px) {

	.sub-modules {
		margin: 2em 20%;
	}

}

@media screen and (min-width: 1000px) {

	.inline-image {
		width: 100%;
		margin: 2% 0;
	}

	.left-image {
		width: 60%;
		float: left;
		margin: 2% 4% 2% -15%;
	}

	.right-image, blockquote {
		width: 60%;
		float: right;
		margin: 2% -15% 2% 4%;
	}

	.module {
		width: 27%;
	}

	.photo-module {
		height: 240px;
	}

	h4 {
		font-size: 1.4rem;
	}

	.module p {
		font-size: 1.2rem;
	}

	.contact-grid {
		grid-template-columns: 1fr 3fr;
	}

}

@media screen and (min-width: 1100px) {

	.sub-modules {
		grid-template-columns: 1fr 1fr 1fr;
		margin: 2em 12%;
	}

}

@media screen and (min-width: 1150px) {

	#site-menu {
		display: flex;
		justify-content: flex-end;
		position: static;
	}

	#site-menu li {
		display: inline;
		font-size: 0.9rem;
		background: none;
		border-top: none;
		padding: 0.75em;
	}

	#site-menu li:hover, #site-menu li:active {
		background: none;
	}
	
	#menuicon {
		display: none;
	}

	#site-menu {
		position: static;
	}

	#site-menu, #site-menu[data-state="opened"] {
		display: flex;
	}

	#site-menu[data-state="opened"], #site-menu[data-state="closing"], #site-menu[data-state="closed"] {
		animation: none;
	}

	#site-menu ul {
		position: absolute;
        top: calc(100% + 4px);
        left: 0;
        padding: 0;
        width: auto;
        margin-top: 0;
    }

	#site-menu ul[data-state="opened"] {
	  animation: clipPathSubMenuOpen 1s ease-in-out forwards;
	  display: flex;
	}

	#site-menu ul[data-state="closing"] {
	  animation: clipPathSubMenuClose 1s ease-in-out forwards;
	}

	#site-menu ul[data-state="closed"] {
	  display: none;
	}

	#site-menu ul li {
		color: var(--bg-colour);
        background: var(--red);
        line-height: 1em;
        padding: 1.25em;
        border-top: solid 2px var(--yellow);
	}

	#site-menu ul li:hover, #site-menu ul li:active {
		color: #fff;
        background: var(--tx-colour);
	}

	#site-menu li.sub-menu-parent {
		display: flex;
		padding: 0.75em;
		gap: 0.25em;
	}

	.sub-menu-parent svg {
		width: 1.25em;
		display: block;
	}

	#chevron {
		stroke: var(--bg-colour);
		transition: rotate 300ms ease-in;
		transform-origin: center;
	}

	.sub-menu-parent:hover #chevron {
		stroke: #fff;
	}

	.sub-menu-parent[aria-expanded="true"] #chevron {
		transition: rotate 300ms ease-in;
	}

	.sub-menu-parent[aria-expanded="true"] #chevron {
		rotate: 180deg;
	}

	#site-menu li.sub-menu-parent a {
		padding: 0;
	}

}


@media screen and (min-width: 1380px) {

	.module {
		width: 22%;
	}

	.photo-module {
		height: 280px;
	}

	h4 {
		font-size: 1.6rem;
	}

	.module-intro {
		width: 120%;
		margin: 0 -20% 0 0;
	}

}

@media screen and (min-width: 1700px) {

	.photo-module {
		height: 360px;
	}

	.module-intro {
		width: 130%;
		margin: 0 -30% 0 0;
	}

}


@media (hover: hover) and (pointer: fine) {

	.fixed-bg {
	    background-attachment: fixed;
	}

}