/*
Theme Name: AuroraDental
Author: Care Barker and Alan Wong
Author URI: https://nwong.ca
Description: A custom theme for Aurora Dental Clinic
Requires at least: 6.4
Tested up to: 6.8.2
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: auroradental
*/


/***************/
/* base styles */
/***************/

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

body {
	background-color: #ddd;
	padding: 0;
	margin: 0;
	top: 0;
	/* overflow-x:hidden;*/
}

/* reset */
p, h1, h2, h3, h4, h5, table, td, input, label, button ul {
    font-family: "IBM Plex Sans Condensed", sans-serif;
	padding: 0;
	margin: 0;
	scroll-margin-top: 120px;
}

p {
	font-size: 24px;
	margin-bottom: 15px;
	padding-left: 2em;
	padding-right: 2em;
}

/* titles */
h1 {
	font-size: 36px;
	font-weight: bold;
	color: white;
	text-align: center;
	align-content: center;
	text-decoration: bold;
	text-transform: uppercase;
	/*background-color: #332b69; */
	background-image: url('assets/images/dark_stars_lowres.jpg');
	background-position: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 25px;
	margin-bottom: 30px;
	clear: both;
}

/* used as section breaks */
h2 {
	font-size: 30px;
	font-weight: bold;
	color: white;
	text-align: center;
	align-content: center;
	text-decoration: bold;
	text-transform: uppercase;
	/*background-color: #332b69; */
	background-image: url('assets/images/dark_stars_lowres.jpg');
	background-position: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 35px;
	margin-bottom: 25px;
	clear: both;
}

/* sub sections */
h3 {
	font-size: 30px;
	font-weight: bold;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 10px;
	clear: both;
}

/* entry headings (like staff names) */
h4 {
	font-size: 26px;
	font-weight: bold;
	padding-left: 2em;
	padding-right: 2em;
	padding-bottom: 10px;
}

td {
	font-size: 24px;
}

ul {
	font-size: 24px;
	padding-left: 2em;
	padding-right: 2em;
}

a {
	text-decoration: none;
	color: #332b69;
	font-weight: bold;

}

a:hover {
	color: blue;
	text-decoration: underline;
	text-decoration-color: green;
}

article {
	padding-left: 60px;
	padding-right: 60px;
}

/* override wordpress styles... */

.wp-block-columns {
	padding-left: 50px;
	padding-right: 50px;
}

.is-layout-flex {
	row-gap: 1em;
}

.wp-block-list {
	margin-top: 0;
}

.wp-block-list li {
  margin-left: 1em;
}

/***************/
/* main styles */
/***************/


.main {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	padding-left: 60px;
	padding-right: 60px;
	background-color: white;
	top: 0;
}

.page {
	padding-left: 0;
	padding-right: 0;
}

/* header styles */

.header {
	width: 100%;
	padding:0;
	margin:0;
	clear: both;
}

.logo_bar {
	padding: 0;
	margin: 0;
}

.logo_bar a {
	color: white;
}
.logo_bar a:hover {
	text-decoration: none;
	color:	lightgrey;
}

.quicklinks {
	display: grid;
	grid-template-columns: 25% 50% 25%;
	justify-content: center;
	text-align: center;
	font-family: "IBM Plex Sans Condensed", sans-serif;
	font-size: 20px;
	font-weight: 500;
	position: sticky;
	background-color: white;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
}

/* quicklinks icons */
.quicklinks i {
	color: green;
	padding: 10px;
	font-size: 20px;
	line-height: 1;
}

.logo_bar {
	/* background-color: #332b69; */
	background-image: url('assets/images/dark_stars_lowres.jpg');
	background-position: center;
	padding:0;
	margin:0;

}

#menu-main-menu {
	margin-top: 25px;
	margin-bottom: 25px;
	grid-auto-flow: column;
	font-family: "IBM Plex Sans Condensed", sans-serif;
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
	list-style-type: None;
}

#menu-main-menu li {
	display: inline-block; /* Makes list items behave like inline elements but allows width/height */
  	margin: 0 10px; /* Adds spacing between menu items */
}


/*********************/
/* for the site logo */
/*********************/


.logo{
	font-family: "Libre Baskerville", serif;
	font-weight: 300;
	font-size: 160px;
	text-transform: uppercase;
	margin: auto;
	margin-top: 0;
	margin-bottom:0;
	text-align: center;
	padding: 0;
	padding-top: 0px; /* use this adjust top offset */
	height:200px; /* use this to adjust height */
	padding-bottom: 0;
}

.logo_rest{
	font-size:50%;
	position: relative;
	bottom: 0.6em;
	left: -0.35em;

}

.logo_sec_text {
	text-transform: none;
	font-size: 24%;
	position: relative;
	top: -2.1em;
	left: 1.1em;
}

/******************/
/* content styles */
/******************/

/* slideshow 
   (add the slideshow class to a Wordpress Gallery block and it will
    convert it to a slideshow)
*/

.slideshow.has-nested-images { /* container for a slideshow, each child figure is a slide */
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16/7;
	overflow: hidden;
	padding: 0;
	position: relative;
	left:0;
	top: 0;
	margin-bottom: 30px;
	display: block;
}

/* slides of slideshow */
.slideshow.has-nested-images figure.wp-block-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.slideshow figure img {
	width: 100%;
	display: block; 
}

.slideshow.has-nested-images figure.wp-block-image figcaption {
	color: black;
	background: none;
	text-shadow: none;
	font-size: 24px;
	padding: 8px 12px;
	margin-left: 50%;
	position: absolute;
	bottom: 16px;
	right: 8px;
	text-align: right;
	box-sizing: border-box;
	font-family: "IBM Plex Sans Condensed", sans-serif;
	background-color: rgba(255, 255, 255, 0.5);
}


/*****************************/
/* make staff photos circles */
/*****************************/

.staff_bio figure {
	padding-top: 10px;
}

}
.staff_bio img {
	max-width: 200px;
	max-height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: solid 3px ;
	border-color: #726ba3;
	display: block;
	margin: auto;
}

/***********/
/* Summary */
/***********/

/* 
for handling read_more hide/show by using the tags

*/

details  {
	margin: 0;
	scroll-margin-top: 60px;
}


details > summary {
	color: green;
	text-decoration: none;
	color: #332b69;
	font-family: "IBM Plex Sans Condensed", sans-serif;
	font-size: 24px;
	font-weight: 600;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 10px;
	padding-top: 20px;
	padding-left: 2em;
	padding-right: 2em;
}

details > summary:hover {
	color: blue;
	cursor: pointer;
}

details > summary::marker {
	content: "";
}

/* hides the 'Click to show' while open */
details:open > summary {
	color: white;
	height: 0;
	padding: 0;
	margin: 0;
	display: none;
}

summary::marker {
	content: "";
	list-style: none; /* Removes the default list-item marker */

}

/* following for Safari to remove marker and hide details */
summary {
	list-style: none;
}

details summary::-webkit-details-marker { 
	display: none; /* Hides the Safari-specific details marker */
}

details[open] > summary {
	color: white;
	height: 0;
	padding: 0;
	margin: 0;
	display: none;
}

/*******/
/* Map */
/*******/

/* formats the Google map  */

.map {
	clear:both;
	margin-top: 50px;
	position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 60%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/************************/
/* for the Contact page */
/************************/

.location_info p {
	padding: 0;
	margin: 0;
	font-size:24px;
	margin-bottom: 20px;
	margin-left: 2em;
	margin-right: 2em;
}

/* office hours table */

figure.office_hours table {
	line-height: 35px;
	margin:auto;
	border: 0px;
	line-height: 35px;
}
figure.office_hours tr{
	border: 0px;
	margin: 0;
}

figure.office_hours td {
	padding: 0;
	padding-right: 15px;
	border: 0px;
	margin: 0;
}

/************************/
/* for the booking form */
/************************/

/* these styles override the Contact Form 7 plugin css */

.wpcf7 label {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 60px;
}

.wpcf7 input, textarea {
	width: 100%;
	margin: auto;
	margin-bottom: 15px;
	font-size: 24px;
	padding: 0.5em;
	/* fix padding */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.wpcf7 textarea {
	height: 6em;
	resize: none;
}

.wpcf7-submit {
	background-color: green;
	color: white;
	padding-left: 3em;
	padding-right: 3em;
	padding-top: 1em;
	padding-bottom: 1em;
	/*margin-left: 60px;*/
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 700;
}

.wpcf7-submit:hover {
	background-color: MediumSeaGreen;
}


/*****************/
/* Footer styles */
/*****************/

.footer {
	margin-top:10px;
	padding-bottom: 20px;
}


.socials {
	display: flex;
	flex-direction: row;
	justify-content:space-evenly;
	font-size: 36px;
	margin: auto;
	padding:0;
	padding-top: 20px;
	height: 60px;
}


.copyright {
	padding-left: 50px;
	padding-right: 50px;
	padding-top:40px;
	padding-bottom:40px;
	text-align: center;
	background-image: url('assets/images/dark_stars_lowres.jpg');
	background-position: 50%;
	font-size: 15px;
	color: white;
}

.copyright p {
	font-size: 15px;
}

.copyright a:link {
	color: white;
}

.copyright a:visited {
	color: white;
}

.copyright a:hover {
	color: pink;
}

.copyright a:active {
	color: white;
}

.policy {
	font-size: 15px;
}



/******************/
/* mobile styling */
/******************/

@media only screen and (max-width: 780px) {

	.body {
		padding: 0;
		margin-left: 0;
		margin-right: 0;
	}

	.main {
		max-width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}

	.page {
		max-width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}

	.logo_bar {
       height: 80px;
	   padding-top: 20px;
	   padding-bottom: 40px;
	}

	.logo {
		padding: 0;
		font-size: 90px;
	}
	
	p {
		padding-left: 2em;
		padding-right: 2em;
	}

	h1 {
		text-align: center;
		padding-left: 1em;
		padding-right: 1em;
		margin-bottom: 20px;
	}

	h2 {
		text-align: center;
		margin: auto;
		padding-left: 1em;
		padding-right: 1em;
		margin-bottom: 20px;
	}

	h3 {
		font-size: 40px;
		padding-left: 1em;
		padding-right: 1em;
		text-align: center;
	}

	h4 {
		padding-left: 1em;
		padding-right: 1em;
		padding-bottom: 10px;
		text-align: center;
	}
	
	.nav_bar ul {
		grid-auto-flow: row;
		grid-gap: 10px;
	}
	
	.quicklinks {
		font-size: 16px;
		line-height: 0.8;
		padding-bottom: 0.5em;
	}
	
	.quicklinks i {
		font-size: 14px;
		line-height: 0.8;
	}

	.slideshow.has-nested-images {
		/*
		width: 100%;
		height: 60%;
		*/
		display: none;
	}

	.wp-block-columns {
		width: 100%;
		padding-left: 0;
		padding-right: 0;

	}

	.wp-block-column {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}


	details:open > summary {
		color: white;
		height: 0;
		padding: 0;
		margin: 0;
	}

	.staff_bio figure {
		padding-top: 10px;
	}

	.staff_bio img {
		max-width: 200px;
		max-height: 200px;
		object-fit: cover;
		border-radius: 50%;
		border: solid 3px ;
		border-color: #726ba3;
		display: block;
		margin: auto;
	}
	
	.office_info_and_hours {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		justify-content: space-evenly;
	}

	.location_info p {
		padding: 0;
		margin: 0;
		font-size:24px;
		text-align: center;
		margin-bottom: 20px;
		margin-left: 2em;
		margin-right: 2em;
	}

	.office_info {
		margin: auto;
		padding: 0;
		padding-bottom: 30px;
	}

	.office_hours {
		display: grid;
		grid-template-columns: 1fr;
		justify-content: space-evenly;
		margin:auto;
		padding: 0;
	}

	.office_hours td {
		line-height: 35px;
		width: 150px;
		text-align: center;
	}
	
	
	.wpcf7 {
		margin: auto;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.wpcf7 p {
		padding: 0;
		margin: 0;
	}

	.wpcf7 input, textarea {
		margin: auto;
		width: 100%;
	}
	
	.wpcf7-submit {
		margin: auto;
		width: 100%;
		height: auto;
		padding: 0;
		
	}

	.copyright a {
		font-size: 80%;
	}
	
}