/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* General layout strategy!  */

/* basic minimal css reset */

* {
	margin: 0;
	padding: 0;
}

/* --------- from the style guide --------- */

/*
I’ve made changes to the style guide - the headings are really small. 
The HTML living standard recommends
	h1 | 2em    | 32px
	h2 | 1.5em  | 24px
	h3 | 1.17em | 18.72px
and a base font size of 16px.

For mobile, I"m using a base font of 14.

*/

:root {
	--dark-green: #386641;
	--mid-green: #6a994e;
	--light-green: #a6c957;
	--pale: #f3e8cf;
	--highlight: #bc4749;
}

html {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px; /* sets base font ... now use ems */
	/* own choices */
	max-width: 1000px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}

.title {
	font-size: 2em;
	margin: 20px 0;
}
h1 {
	font-size: 2em;
	margin: 20px 0;
}
h2 {
	font-size: 1.5em;
	margin: 20px 0;
}
h3 {
	font-size: 1.17em;
	margin: 10px 0;
}

caption {
	font-size: 0.9em;
}

/* --------- end style guide --------- */

.grid-align-right {
	-ms-grid-column-align: end;
	justify-self: end;
}
/* ======================================
		 Home Page 
====================================== */

button {
	background-color: #bc4749;
	padding: 20px;
	border-radius: 25px;
}
button a {
	color: white;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.2em;
}

/* home page hero image */
picture {
	position: relative;
	text-align: center;
	color: white;
}

.hero-image {
	background-image: url("../images/woman_barbells_1000x664.jpg");
	height: 664px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.about-us {
	margin: 0 auto;
	padding: 20px;
	background: -o-radial-gradient(
		circle,
		rgba(204, 204, 204, 1) 18%,
		rgba(255, 255, 255, 1) 100%
	);
	background: radial-gradient(
		circle,
		rgba(204, 204, 204, 1) 18%,
		rgba(255, 255, 255, 1) 100%
	);
}

@font-face {
	font-family: fancyFont;
	src: url(seaweedscript-regular.ttf);
}
.over-text {
	letter-spacing: 0.2rem;
	color: white;
	font-family: fancyFont;
	padding-top: 80px;
	margin: 0;
	font-size: 60px;
	text-align: center;
}

/* ---------  grids --------- */

.grid-cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.card {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	background-color: #ccc;
	padding: 20px;
	border-radius: 5px;
	margin: 20px 10px;
	max-width: 350px;
}

.card img {
	width: 90%;
	height: auto;
	padding: 1em;
	margin: 10px auto;
}

.inner-page {
	/* margin: 0 10px; */
	min-height: calc(100vh - 200px);
}

/* --------- page layouts - inner section needed between 700 and 1000px --------- */
@media screen and (min-width: 700px) and (max-width: 1000px) {
	.inner-page {
		margin: 0 20px;
	}
}

/* ======================================
		 Class Timetable  

with thanks to 
https://www.freecodecamp.org/news/https-medium-com-nakayama-shingo-creating-responsive-tables-with-pure-css-using-the-grid-layout-module-8e0ea8f03e83/
====================================== */

.openicon {
	height: 100px;
	-ms-grid-column-align: end;
	justify-self: end;
	-ms-flex-item-align: end;
	-ms-grid-row-align: end;
	align-self: end;
	padding: 20px;
}

.timetable > .one-row {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	min-height: 40px;
	-ms-flex-line-pack: center;
	align-content: center;
}

.timetable > .one-row > div {
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(var(--column-width-min), 1fr)
	);
	--column-width-min: 8em;
}

.timetable > .one-row {
	border-bottom: 1px solid gray;
	padding: 2px;
	overflow: hidden;
	white-space: nowrap;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

.timetable li:first-child {
	background-color: var(--light-green);
}

/* ======================================
		 Class Booking  
====================================== */

.booking-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 20px 3fr;
	grid-template-columns: 1fr 3fr;
	gap: 20px;
	max-width: 90%;
	margin: auto;
}

fieldset {
	border: none;
}

.booking-grid > span.error-text {
	display: none;
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1/3;
	color: var(--highlight);
}

.booking-grid > section > input[type="reset"],
.booking-grid > section > input[type="submit"] {
	margin: 0 20px;
	font-size: 1.2em;
	padding: 10px 20px;
	border-radius: 10px;
}

input,
option,
select,
textarea {
	padding: 0.5em;
	border: 1px solid black;
	max-width: 90%; /* don't overflow off right edge! */
}

/* highlight the submit button, leave other one grey */
input[type="submit"] {
	background-color: var(--highlight);
	color: white;
}

.drop-down {
	padding: 10px;
}
.align-right {
	-ms-grid-column-align: end;
	justify-self: end;
}

.label-after > label {
	margin-right: 20px;
}

#help-button {
	color: darkblue;
	text-decoration: underline;
	cursor: help;
	-ms-flex-item-align: end;
	-ms-grid-row-align: end;
	align-self: end;
}

#help-video {
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1/3;
	background-color: rgb(244, 244, 244);
	-ms-grid-column-align: stretch;
	justify-self: stretch;
	-webkit-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s;
	height: 0;
}

#help-button:hover ~ #help-video,
#help-video:hover {
	/* transition won't work unless height is specific value */
	-webkit-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s;
	height: 400px;
}

/* probs need to use these, in case video is playing when users moves cursor OFF it */
/* video:playing
video:paused */

/* Showing error messages, but not when user is IN the field, or if it's empty */
input:invalid:not(:-moz-placeholder-shown):not(:focus) + .error-text {
	display: block;
}
input:invalid:not(:-ms-input-placeholder):not(:focus) + .error-text {
	display: block;
}
input:invalid:not(:placeholder-shown):not(:focus) + .error-text {
	display: block;
}

/* optional, but useful for debugging! */
input:invalid:not(:-moz-placeholder-shown):not(:focus) {
	border: 1px dashed red;
}
input:invalid:not(:-ms-input-placeholder):not(:focus) {
	border: 1px dashed red;
}
input:invalid:not(:placeholder-shown):not(:focus) {
	border: 1px dashed red;
}
input:valid {
	border: 1px solid green;
}

/* is this how we're mean to add the icons before? */
/* input::before {
	content: url(smiley.gif);
}
*/

/* NOTES on trying to select the label BEFORE the required input, to show the * 
	label::after + input:required 
 	doesn't work ... I can't seem to target the label when it comes BEFORE the input, cos + is for AFTER
	:has was suggested on stackoverflow, but that doesn't work either, at least on firefox
	label:has(+ input:required) 
	Eventually I resorted to explicitly marking the required labels with class "required"
 */
.required::after {
	content: " *";
	color: red;
}

/* For Mobile, HIDE the labels and use icons instead; and adjust the layout! */
@media screen and (max-width: 700px) {
	.booking-grid {
		max-width: 90%;
		margin: auto;
		-ms-grid-columns: 60px 10px 1fr;
		grid-template-columns: 60px 1fr;
		gap: 10px;
	}

	.booking-grid label[for="your-name"] {
		content: url("../images/user.svg");
	}
	.booking-grid label[for="your-email"] {
		content: url("../images/at-sign.svg");
	}
	.booking-grid label[for="your-phone"] {
		content: url("../images/phone.svg");
	}
	.booking-grid label[for="gender"] {
		content: url("../images/venus-mars-solid.svg");
		max-height: 20px;
	}
	.booking-grid label[for="preferred"] {
		content: url("../images/send.svg");
	}
	.booking-grid label[for="your-age"] {
		content: url("../images/watch.svg");
	}
	.booking-grid label[for="health"] {
		content: url("../images/activity.svg");
	}
	.booking-grid label[for="fitness-goals"] {
		content: url("../images/target.svg");
	}
	/* buttons smaller on mobile */
	.booking-grid > section > input[type="reset"],
	.booking-grid > section > input[type="submit"] {
		margin: 10px;
		padding: 5px 5px;
	}

	#help-button:hover ~ #help-video,
	#help-video:hover {
		height: 300px;
	}
}

/* ======================================
		 contact page  
====================================== */

.two-cols {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 20px 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.form-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 20px 4fr;
	grid-template-columns: 1fr 4fr;
	gap: 20px;
}
.form-grid > label {
	-ms-grid-column-align: end;
	justify-self: end;
}
.form-grid > input[type="submit"] {
	margin: 0 20px;
	font-size: 1.2em;
	padding: 10px 20px;
	border-radius: 10px;
	width: 100px;
	-ms-flex-item-align: end;
	align-self: flex-end;
}

/* ======================================
		 locations
====================================== */

.location-card {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 30px;
	-webkit-box-shadow: 0 0 15px 3px gray;
	box-shadow: 0 0 15px 3px gray;
	border: 1px solid grey;
	margin-top: 50px;
}

.location-card > section > .three-cols > img {
	width: 90%;
}

.three-cols {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr) [3];
	grid-template-columns: repeat(3, 1fr);
}
.location-card p {
	margin: 20px 0;
}

.location-card > .map {
	/* justify-self: center; */
	-ms-flex-item-align: start;
	align-self: flex-start;
	/* max-width: 300px; */
	padding: 20px;
}
.map > img {
	max-width: 100%;
}

.top-link {
	color: #ff0000b2;
	font-size: 14px;
	/* border-bottom: 1px dashed red; */
	-webkit-text-decoration-style: dotted;
	text-decoration-style: dotted;
}
/* ======================================
			Media queries - Desktop
====================================== */
@media screen and (min-width: 700px) {
	html {
		font-size: 16px; /* sets base font ... now use ems */
	}

	.about-us {
		width: 80%;
	}

	.card {
		max-width: 260px;
	}

	.location-card {
		-ms-grid-columns: 3fr 2fr;
		grid-template-columns: 3fr 2fr;
	}
	.location-card > .map {
		/* justify-self: end; */
		padding: 20px;
	}
}

/* ===== BURGER MENU STUFF ==== */

header {
	background-color: var(--dark-green);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between; /* pushes toggle to right */
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center; /* bring to middle vertically */
	padding: 0 10px;
}

header a {
	color: white;
	text-decoration: none;
}
header > h1 {
	margin: 0;
}

header a:hover {
	padding-bottom: 5px;
	-webkit-box-shadow: inset 0 -2px 0 0 #fff;
	box-shadow: inset 0 -2px 0 0 #fff;
}

#burger-menu-toggle {
	display: none;
	/* NONE might not be OK for assistive tech - and it gives me a gap above menu!! */
	/* height: 0;
    margin: 0;
    opacity: 0; */
}
#burger-menu-toggle-button {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#burger-menu-toggle-button:hover {
	background-color: var(--mid-green);
}
#burger-menu {
	display: none;
	background-color: var(--mid-green);
	position: relative; /* takes it out of page flow */
}
#burger-menu a {
	padding: 0.5em;
	color: white;
	font-size: 1.4em;
	font-weight: bold;
	text-decoration: none;
}
/* hover only shows on mobile when you touch it */
#burger-menu a:hover {
	background-color: var(--light-green);
}
#burger-menu-toggle:checked ~ #burger-menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column; /* makes menu stack vertically */
	height: 180px;
}
#burger-menu-overlay {
	height: 0;
}
@media screen and (min-width: 701px) {
	#wide-nav {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: space-around; /* pushes toggle to right */
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center; /* bring to middle vertically */
	}
	#wide-nav a {
		margin: 0 20px;
	}
	#burger-menu-toggle-button,
	#burger-menu-overlay {
		display: none;
	}
}
@media screen and (max-width: 700px) {
	#wide-nav {
		display: none;
	}
}

/* --------- footer --------- */

footer {
	margin-top: 30px;
	background-color: var(--dark-green);
	padding: 10px 20px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

footer li {
	margin: 0 10px;
	padding: 10px;
}

footer a {
	color: #fff;
}

footer span,
footer p {
	display: block;
}