:root {
	/* COLOURS */
	--met-office: #d7df00; /* light */
	--met-office-mono: #231F20;

	--met-office-text: #0fbd00;
	--bbc-text: #0997ce;

	--bbc: #149edc;

	--grade-APlus: #FF41D8;
	--grade-A: #2EC918;
	--grade-B: #ffb600;
	--grade-C: #FF5400;
	--grade-D: #C40000;
	--grade-F: #000000;

	--period-thin-border: 0.75px solid rgba(0, 0, 0, .2);
	--theme: #8aabca;

	--topbar-border: 2px;
	--light-border: rgba(0, 0, 0, .2);
	--loc-card-h: 35px;
}

body {
	background: var(--theme);
}

svg:not(.mono) [href="#mo-square"] {
	fill: var(--met-office);
}

svg [href="#mo-text"], svg #mo-text {
	fill: var(--met-office-mono);
}

g#bbc-full .ln2 {
	fill: var(--bbc);
}

[grade="A+"] {
	color: var(--grade-APlus) !important;
	fill: var(--grade-APlus) !important;
}

[grade="A+"]:has(sup) {
	position: relative;
}

[grade="A+"] sup {
	display: inline-flex; /* dont ask why flex, just makes it work! */
	position: absolute;

	font-size: 0.5em;

	line-height: initial;
}

[grade="A"] {
	color: var(--grade-A) !important;
	fill: var(--grade-A) !important;
}

[grade="B"] {
	color: var(--grade-B) !important;
	fill: var(--grade-B) !important;
}

[grade="C"] {
	color: var(--grade-C) !important;
	fill: var(--grade-C) !important;
}

[grade="D"] {
	color: var(--grade-D) !important;
	fill: var(--grade-D) !important;
}

[grade="F"] {
	color: var(--grade-F) !important;
	fill: var(--grade-F) !important;
}

div.underline.light {
	background-color: var(--light-border);
}

div.underline.thin {
	--size: min(1.5px, 1vh);
	margin-top: calc(var(--size) * -1) !important;
	height: var(--size);
}

div.underline.moderate {
	width: 90%;
	margin: 0 auto;
}

div.underline.most {
	width: 94%;
	margin: 0 auto;
}

div.underline.full {
	width: 100%;
	margin: 0 auto;
}

body {
	--topbar-height: max(70px, 9vh);
	--content-height: calc(100vh - var(--topbar-height));

	margin: 0 !important;
	overflow: hidden;
}


@supports (height: 100dvh) {
	body {
		--topbar-height: max(70px, 9dvh);
		--content-height: calc(100dvh - var(--topbar-height));
	}
}





#topbar {
	width: 100vw;

	z-index: 99;
	height: var(--topbar-height);

	position: relative;

	display: flex;
	justify-content: space-between;
	
	/*background:rgb(0, 56, 10);*/
	/*background: #80956d;*/
	background: var(--theme);

	border-bottom: var(--topbar-border) solid white;

	img#logo {
		height: 90%;

		padding-top: calc(var(--topbar-height) * 0.05);
		padding-left: calc(var(--topbar-height) * 0.05);
	}

	img#wordlogo {
		height: 125%;
		margin-top: calc(var(--topbar-height) * -0.1);
	}

	overflow: hidden;
}

#topbar #logocont {
	height: 100%;

	position: relative;

	cursor: pointer;
}

#topbar #logocont img {
	display: inline;
	float: left;
	filter: drop-shadow(#000000 0.1em 0.1em 0.1em);
}

#topbar #logocont #wordlogo {
	position: absolute;
}

#topbar #topright {
	padding: 5px 5px 0 0;
	height: 50%;
	min-height: 40px;
	max-height: 100px;

	position: relative;
}

#topbar #topright > * {
	height: 100%;
}

#topbar #topright #hamburger {
	fill: white;
}

#topbar #topright #rainbow {
	filter: drop-shadow(0.1em 0.1em 0px black);
	position: absolute;
	right: 10px;
}

#topbar #navbar {
	display: flex;
	gap: 10px;

	align-items: flex-end;
	justify-content: center;
	
	height: 100%;
	width: fit-content;
	padding-left: auto;

	font-size: clamp(3vh, 30px, 3vw);
	font-family: "Viga", serif;
	flex: 60%;/* WIP*/
	
	* {
		color: white;
	}
}

body:has(#content > [location-selector="true"]) #loc-card {
	display: block;
}

#loc-card {
	display: none; /* default status, unless needed */

	position: absolute;
	z-index: 100;
	width: fit-content;/*10vw;*/

	padding: 5px 15px 5px 5px;
	background:#8aabca;

	/*filter: drop-shadow(0px 2px 2px black);*/
	box-shadow: 1px 1px 0px black;
	border: 1px solid black;
	border-top: none;
	border-left: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;

	margin: calc(calc(var(--topbar-border) + 1px) * -1) 0 0 0;
	color: white;

	cursor: pointer;
	user-select: none;
}

#loc-card:hover {
	/*filter: drop-shadow(0px 3px 2px black);*/
	box-shadow: 2px 2px 0px black;
}

#loc-card:active{
	/*filter: drop-shadow(0px 1px 2px black);*/
	box-shadow: 0px -1px 0px black;
}

#loc-card * {
	vertical-align: middle;
}

#loc-card svg {
	display: inline;
	width: var(--loc-card-h);
}

#loc-card label {
	display: inline;

	font-family: Lilita One;
	font-size: clamp(3vh, 30px, 3vw);
	pointer-events: none;

	filter: drop-shadow(0.07em 0.07em 0 black);
}

.sticky-bkg {
	width: 100vw;
	height: var(--content-height);

	position: absolute;
}


.sticky-bkg img {
	width: 100vw;
	height: var(--content-height);

	overflow: hidden;
	z-index: -1;

	position: sticky;
	top: 0;

	object-fit: cover;
	object-position: center;
}

/*.sticky-bkg::after {
	content: var(--sticky-colour-gradient);

	width: 100vw;
	height: var(--content-height);

	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;

	pointer-events: none;

	background: var(--sticky-colour-gradient);
}*/

/*.sticky-bkg::after {
	content: var(--sticky-colour-gradient);

	width: 100vw;
	height: 10px;

	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;

	pointer-events: none;

	background: var(--pane3-bkg);
}*/


a.map-pin-tooltip {
	opacity: 0; /* fade in, code sets inline style for opacity = 1 */
	/*position: fixed;*/
	position: absolute;

	font-family: "Viga";

	background: rgba(255,255,255,1);
	border-radius: 5px;

	padding: 2px 5px;

	offset-anchor: bottom left;

	text-wrap: nowrap; /**/

	pointer-events: none;

	transition: opacity 0.1s ease 0.03s;
}

.GMAMP-maps-pin-view {
	transform-origin: bottom center;
	transition: transform 0.03s ease;
}


#content:has(.content-elem[scrollsnap="true"]) {
	scroll-snap-type: y proximity;
	scroll-padding: 0;
	scroll-behavior: auto;
}

#content:has(.content-elem[scrollsnap="true"]) #footer-bar {
	scroll-snap-align: end;
}


.content-elem[scrollsnap="true"] > :not(.sticky-bkg) {
	height: var(--content-height);
	position: relative;
	scroll-snap-align: end;
	scroll-snap-stop: always;
}

#content {
	height: var(--content-height);
	width: 100vw;
	overflow: hidden scroll;

	scroll-behavior: auto !important; /* MUST BE, for scrollTo(instant) TO WORK. */
	scrollbar-width: thin;

	position: absolute;

	margin-top: calc(var(--topbar-border) * -1);
}


#content > * {
	width: inherit;
	height: fit-content;
}

#content > .content-elem > .hero > .contents {
	margin: auto;

	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	display: flex;
	flex-direction: column;

	border-radius: 5px;
	box-shadow: 4px 4px 0px black;
	background: rgba(255, 255, 255, 0.91);
}

#content > .content-elem > .hero > .contents {
	width: max(900px, 70vw);
	height: calc(var(--content-height) * 0.9);

	border: 1px solid rgb(0,6,81);
}




.content-elem[rendered="false"] > div.hero > .contents > * {
	display: none !important;
}

.content-elem[rendered="false"] > div.hero > .contents::after {
	content: "Loading, please wait!";
	
	font-size: 3vmin;
	font-family: Roboto;
	text-align: center;
	
	margin-top: 10%;
}

#content:not(:has(.content-elem)) .footer-bar {
	position: absolute;
	bottom: 0;
}

#content:not(:has(.content-elem))::after {
	content: "Loading! Please wait. If this is taking too long, please ensure you have JavaScript enabled, then refresh the page. Thanks!";
	height: var(--content-height);
	
	font-size: 3vmin;
	font-family: Roboto;
	color: white;
	text-align: center;
	padding-top: 10%;
	width: 100%;
	display: block;
}





div[monthly-calendar] > .contents {
	--content-width: calc(100vw - var(--padding-lr) - var(--padding-lr));
	--date-square: min(calc(calc(var(--content-height) - var(--padding-tb) * 2) / var(--n-weeks)), calc(80vw / 7)); /* 6 rows used. */

	width: inherit;
	height: inherit;
	box-sizing: border-box;
	position: relative;

	padding: var(--padding-tb) var(--padding-lr);

	background: linear-gradient(var(--pane3-bkg) 20%, var(--theme) 100%);
}


.calendar {
	--datetxt-size: calc(var(--date-square) * 0.08);
	--datehead-size: var(--datetxt-size);

	width: calc(var(--date-square) * 7);

	position: relative;

	background: white;

	border-radius: 4px;
	border: 1px solid black;
	
	z-index: 0;
}

.calendar .calendar-cont {
	width: inherit;
	height: calc(var(--date-square) * var(--n-weeks));

	display: grid;
	grid-template-columns: repeat(7, var(--date-square));
	grid-template-rows: repeat(var(--n-weeks), var(--date-square));
}

.calendar .day-header {
	width: calc(var(--date-square) * 7);
	height: var(--datehead-size);

	display: grid;
	grid-template-columns: repeat(7, var(--date-square));
	grid-template-rows: var(--datehead-size);

	background-color: #e3e3e3;

	/*padding: 1px 0;*/
	
}

.calendar .day-header:not(:empty) {
	border-bottom: var(--period-thin-border);
}

.calendar .day-header .day {
	font-size: var(--datetxt-size);
	line-height: var(--datetxt-size);
	padding: 1px;

	font-family: Roboto;
	font-weight: 600;
}

.calendar .day-header .day:not(:first-child) {
	border-left: var(--period-thin-border);
}

.calendar .date {
	border-bottom: var(--period-thin-border);
	background: white;
	z-index: 2;
}

.calendar .date[floating] {
	width: var(--date-square);
	height: var(--date-square);

	transition: opacity 0.15s ease;

	opacity: 0;

	border: 1px solid black !important;
	border-top: none !important;
	filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.733));
}

.calendar .date[floating] > * {
	transition: opacity 0.3s 0.15s ease;
	opacity: inherit;
}

.calendar .date:not(:nth-child(7n + 1)) {
	border-left: var(--period-thin-border);
}

.calendar .date:not(:has(svg):has(label[grade])) {
	background: #e3e3e3;
}

.calendar .date.onegrade > svg {
	display: block;
	width: 100%;	
}

.calendar .date.twograde svg {
	width: 50%;
	max-height: 80%;
}

.calendar .date.onegrade > svg:has(use[href="#mo-square"]) {
	height: 45%;
}

.calendar .date.onegrade > svg:has(use[href="#bbc-full"]) {
	padding: 7% 0 3% 0;
	height: 35%;
}

.calendar .date.onegrade > svg:has(use[href="#equals"]) {
	padding: 10% 0 10% 0;
	height: 25%;
}

.calendar .date:has(svg use[href="#equals"]) > label[grade] {
	font-size: calc(var(--date-square) * 0.4);
}

.calendar .date label.datetxt {
	font-family: Roboto;
	font-weight: 800;
	font-size: var(--datetxt-size);
	line-height: var(--datetxt-size);

	display: block;
	margin: 3px 0 0 5px;
}

.calendar .date.onegrade > label[grade],
.calendar .date.twograde label[grade] {
	font-family: Luckiest Guy;
	font-size: calc(var(--date-square) * 0.4);
	width: 100%;
	text-align: center;
	display: block;
}

.calendar .date.twograde label[grade] {
	max-width: 40%;
}

.calendar .date.twograde > label[grade] {
	font-family: Luckiest Guy;
	font-size: calc(var(--date-square) * 0.3);
	width: 100%;
	text-align: center;
	display: block;
}

.calendar .date.twograde > div:not(.underline) {
	height: calc(50% - var(--datetxt-size));

	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.calendar .date.highlight {
	background: #ffffd5;
}


#popup-map {
	width: 100vw;
	height: 100vh;

	z-index: 101;
}

#popup-map-cont {
	width: inherit;
	height: inherit;
	z-index: 101;
}

#popup-map > a {
	font-family: Lilita One;
	font-size: min(3vw,6vh);

	padding: 10px 15px;
	color: rgb(223, 52, 164);
	filter: drop-shadow(0.035em 0.035em 0 black);

	position: absolute;
	z-index: 102;
}

#popup-map.invisible, #popup-map:has(.invisible) {
	display: none;
}










table.summary-table {
	font-size: 3vh;
	font-family: "Roboto", sans-serif;

	border-collapse: collapse;
}

table.summary-table.conditions {
	--underline-len: 90%;
	margin-right: 1vw;
	margin-left: auto;

	width: calc(60% - 1vw);
}


table.summary-table.conditions tr > :nth-child(1) {
	width: 50%;

	text-align: right;
}

table.summary-table.conditions tr :nth-child(2) {
	width: 10%;

	text-align: center;
}

table.summary-table.conditions tr :nth-child(3) {
	width: 30%;
}

table.summary-table.conditions tr :nth-child(4) {
	width: 10%;
	aspect-ratio: 1/1;
}

table.summary-table.conditions tr :nth-child(4) svg {
	width: 40%;

	display: block;
	margin: auto;
}

table.summary-table.conditions td {
	padding: 0;
}


table.summary-table.conditions tr {
	position: relative;
}

table.summary-table.conditions td {
	text-wrap: nowrap;
}

table.summary-table.conditions tr[cond="t"],
table.summary-table.conditions tr[cond="f"],
table.summary-table.conditions tr[cond="ws"],
table.summary-table.conditions tr[cond="wg"],
table.summary-table.conditions tr[cond="wd"] {
	cursor: pointer;
}

table.summary-table.conditions tr[cond="f"] {
	display: none;
}


table.summary-table.conditions:has(
	tr[cond="t"].clicked
) tr[cond="f"] {
	display: table-row;
}

table.summary-table.conditions:has(
	tr[cond="t"].clicked
) tr[cond="t"]::after {
	bottom: -100%;
}

table.summary-table.conditions:has(
	tr[cond="t"].clicked
) tr[cond="t"] svg {
	rotate: 180deg;
}



table.summary-table.conditions tr[cond="wg"] {
	display: none;
}

table.summary-table.conditions tr[cond="wd"] {
	display: none;
}


table.summary-table.conditions:has(
	tr[cond="ws"].clicked
) tr[cond="wg"],
table.summary-table.conditions:has(
	tr[cond="ws"].clicked
) tr[cond="wd"] {
	display: table-row;
}

table.summary-table.conditions:has(
	tr[cond="ws"].clicked
) tr[cond="ws"] svg {
	rotate: 180deg;
}

table.summary-table.conditions tr[cond="f"] :first-child,
table.summary-table.conditions tr[cond="wg"] :first-child,
table.summary-table.conditions tr[cond="wd"] :first-child {
	font-size: 0.7em;
	font-weight: 700;
}

table.summary-table.conditions:not(:has(
	tr[cond="t"].clicked
)) tr[cond="t"]::after,

table.summary-table.conditions:has(
	tr[cond="t"].clicked
) tr[cond="f"]::after,

table.summary-table.conditions:not(:has(
	tr[cond="ws"].clicked
)) tr[cond="ws"]::after,

table.summary-table.conditions:has(
	tr[cond="ws"].clicked
) tr[cond="wd"]::after {
	content: "";

	position: absolute;
	bottom: 0;
	right: 0;
	
	width: var(--underline-len);
	height: 1px;
	background-color: var(--light-border);
}



table.summary-table.conditions tr[cond="f"] td:has(svg),
table.summary-table.conditions tr[cond="wg"] td:has(svg),
table.summary-table.conditions tr[cond="wd"] td:has(svg),
table.summary-table.conditions tr[cond="w"] td:has(svg) {
	opacity: 0;
}




table.summary-table td[grade] {
	font-family: "Luckiest Guy", serif;
	font-size: 1.5em;
}


table.summary-table.grades tr:first-child :nth-child(1) {
	width: 40%;
}

.table.summary-table.grades tr:first-child :nth-child(2) {
	width: 60%;
}

table.summary-table.grades tr :first-child {
	padding-right: 9%;
	text-align: right;
}



table.summary-table.grades table:first-of-type {
	margin-left: 7%;
}

table.summary-table.grades table:last-of-type {
	margin-right: 4%;
}


table.summary-table.change {
	width: 100%;

	font-size: 2vh;
	font-family: "Roboto", sans-serif;
	font-weight: 500;

	border-collapse: collapse;
}


#footer-bar {
	height: fit-content;
	
	font-size: 2vh;
	
	font-family: "Roboto";
	background: var(--theme);
	color: white;
	
	padding: 0 0 0.5vh 0.5vw
}

#footer-bar :visited {
	color: white;
}



.summary-row {
	display: flex;
	flex-direction: row;
	align-items: center;

	position: relative;
}

.summary-row .left-items {
	width: 40%;
	height: 100%;

	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.summary-row svg.logo {
	width: 50%;
	max-height: 80%;

	flex-shrink: 0;
}

.summary-row .left-items .grade {
	margin: 0 0 0 var(--grade-pad);

	font-family: "Luckiest Guy";
	font-size: var(--grade-size);
	line-height: var(--grade-size);
	text-align: left;

	position: relative;
}

.summary-row .underline {
	position: absolute;
	margin: 0 auto;

	bottom: 0;
	left: 0;
	right: 0;
}

.hero .title-bar {
	width: 94%;
	/*height: 20%;*/
	height: fit-content;
	margin: 0 0 0.5% 6%;

	position: relative;
}

.title-bar .main {
	--font-size: 7vmin;
	color: #2992f3;
	filter: drop-shadow(0.035em 0.035em 0 black);
	font-family: "Lilita One", "Serif";
	font-size: var(--font-size);
	line-height: var(--font-size);
	display: block;

	width: fit-content;

	padding-top: 2vh;

	margin: unset;
}

.title-bar .main.mid {
	--font-size: 5vmin;
	color: #5b9d36;
}

.title-bar .sub {
	--font-size: min(2vh,3vw);
	font-family: "Viga";
	font-size: var(--font-size);
	line-height: var(--font-size);
	display: block;
	width: fit-content;

	padding: 0.75% 0 0 1.5vw;

	margin: unset;
}

.title-bar .right-items {
	position: absolute;
	right: 5%;
	bottom: 0;
}

.title-bar .right-items .sub {
	--font-size: min(2.5vh,3.5vw);
	padding: 0 5px 0 0 ;

	display: inline;
}

.title-bar .right-items .loc-name {
	--font-size: min(6vh, 8vw);
	display: inline;
}

.hero .rows {
	display: flex;
	flex-direction: column;

	flex-grow: 1;
	flex-shrink: 1;

	height: 100%;
}



@media screen and (max-width: 1500px) {
	div[monthly-calendar] > .contents {
		padding-top: calc(var(--padding-tb) / 2);
	}

	div[monthly-calendar] > .contents .title-bar {
		position: static !important;
		width: 100% !important;

		padding-top: 2vh;
		padding-right: 5vw;
	}

	div[monthly-calendar] > .contents .title-bar > * {
		text-align: center;
		width: 100%;
	}

	div[monthly-calendar] > .contents .calendar {
		position: static;
		display: block;

		margin: 1vh auto 0 auto;
	}
}



@media screen and (max-width: 1080px) {
	#topbar #rainbow {
		display: none;
	}

	body #content > .content-elem > .hero > .contents {
		width: 90vw;
	}
}

@media screen and (max-width: 900px) {
	#topbar #logocont #wordlogo {
		display: none;
	}
	
	#topbar #navbar {
		position: absolute;
		left: 50%;
		translate: -50% 0;
	}
}

@media screen and (max-width: 460px) {
	body #topbar #navbar {
		left: auto;
		right: 2vw;
		translate: 0 0;
	}
}