/*
Theme Name:        Cottages at the Aquatic Center
Theme URI:         https://cottagesatac.com/
Author:            Paragon Group
Description:       Custom theme for cottagesatac.com, converted from the original hand-coded site. Includes page templates for Home, Availability, Floorplans, Gallery and Contact Us, an AppFolio listings shortcode, a built-in contact form, and a Media Library–driven photo gallery. Go to Appearance → Cottages Setup after activating.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      7.1
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       cottagesatac
Tags:              custom-logo, custom-menu, featured-images, one-column
*/

/* Fonts (bundled with the theme; SIL Open Font License, see assets/fonts) */
@font-face {
	font-family: 'Allura';
	src: url(assets/fonts/allura-regular.woff) format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Libre Baskerville';
	src: url(assets/fonts/libre-baskerville.woff) format('woff');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Libre Baskerville';
	src: url(assets/fonts/libre-baskerville-italic.woff) format('woff');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   Base (carried over from the original site's style.css)
   Brand green: #a9bbb7   Body text: #90817a
   ========================================================================== */

body {
	font-family: 'Libre Baskerville', serif;
	color: #90817a;
	text-align: center;
	background: url(assets/images/wood-background.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
}

a { color: #6f8b85; }
a:hover { color: #4f6662; }

/* Navbar ------------------------------------------------------------------ */
.navbar { background: #a9bbb7; }

.navbar-brand img,
.navbar-brand .custom-logo {
	width: 4em;
	height: auto;
	margin: 0 10px;
}

.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .8); }
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }

/* Keep the fixed navbar below the WordPress admin bar when logged in */
.admin-bar .fixed-top { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .fixed-top { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .fixed-top { top: 0; }
	#wpadminbar { position: fixed; }
}

/* Hero (jumbotron) ---------------------------------------------------------- */
.jumbotron {
	background: url(assets/images/clarkston-hero.jpg) center center;
	background-size: cover;
	height: 28em;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 50px;
}
.jumbotron .fancy-font {
	margin-top: 40px;
	margin-bottom: -20px;
	font-size: 60px;
}
.jumbotron h1 {
	font-size: 30px;
	margin: 0;
}
.jumbo-logo {
	width: 20%;
	min-width: 140px;
	margin-bottom: 15px;
}

/* Home ------------------------------------------------------------------- */
.body-img {
	width: 15em;
	max-width: 100%;
	margin: 10px;
}
#amenities-img { box-shadow: 20px 30px #a9bbb7; }

.amenities h3 {
	font-size: 40px;
	text-align: left;
	margin-left: 25px;
}
.amenities li {
	font-size: 15px;
	line-height: 2.2;
	text-align: left;
}

.apply-div { margin-top: 70px; }
.apply-div h3 {
	font-size: 50px;
	margin-bottom: 20px;
}

/* Buttons ----------------------------------------------------------------- */
.cta-btn,
.wp-block-button__link {
	background: #a9bbb7;
	color: #ffffff;
	margin: auto;
	margin-top: 20px;
}
.cta-btn:hover { background: #849994; color: #fff; }

.btn-sec {
	background: rgba(0, 0, 0, .2);
	color: #f4f4f4;
}
.btn-sec:hover {
	background: rgba(0, 0, 0, .5);
	color: #fff;
}

/* Gallery page ------------------------------------------------------------ */
.tab-bar {
	width: 100%;
	background-color: #a9bbb7;
	text-align: center;
	margin: auto;
}
.tab-bar .nav-tabs {
	justify-content: center;
	border-bottom: 0;
}
.tab-bar .nav-link { color: #ffffff; }
.tab-bar .nav-link.active { color: #495057; }

.gallery-grid { padding-top: 20px; }

.gallery-img {
	position: relative;
	margin: 10px;
	width: 20em;
	max-width: calc(100% - 20px);
	height: 15em;
	display: inline-block;
	vertical-align: top;
	background-position: center center;
	background-size: cover;
}
.gallery-img .overlay {
	color: #fff;
	background: #000;
	width: 100%;
	height: 100%;
	padding: 50px 10px;
	opacity: 0;
	transition: opacity .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gallery-img:hover .overlay { opacity: .7; }
.gallery-img .overlay p { margin: 0; }

/* Floorplans -------------------------------------------------------------- */
.fp-bgrd {
	width: 20em;
	max-width: 100%;
	min-height: 20em;
	border-radius: 10px;
	padding-bottom: 15px;
}
.fp-bgrd img { display: block; margin: 0 auto 15px; }

.modal {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .4);
}

#floorplan2 { margin: 21.225px auto; }
#floorplan3 { margin: 35.265px auto; }

/* Contact ----------------------------------------------------------------- */
.contact-map iframe {
	width: 100%;
	max-width: 500px;
	height: 450px;
	border: 0;
}
.contact-form .hp-field {
	position: absolute;
	left: -5000px;
}
.alert-error {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

/* 404 --------------------------------------------------------------------- */
.err-btn {
	background: #a9bbb7;
	color: #fff !important;
	width: 140px;
	font-size: 20px;
	margin: 10px 0;
}
.err-btn:hover { background: #849994; }

.page-not-found { padding: 0 10%; }
.page-not-found p {
	margin-top: 10px;
	font-size: 22px;
}
.page-not-found h1 { font-size: 60px; }

/* Footer ------------------------------------------------------------------ */
footer.footer {
	margin-top: 50px;
	background: #a9bbb7;
	color: #ffffff;
}
footer.footer .text-muted { color: rgba(255, 255, 255, .75) !important; }
footer.footer a { color: #fff; }

/* Utility classes from the original site ---------------------------------- */
.white-text    { color: #ffffff; }
.offwhite-text { color: #f6f6f6; }
.row-centered {
	text-align: center;
	margin: auto;
	align-content: center;
	justify-content: center;
}
.hidden-text   { color: rgba(0, 0, 0, 0); }
.fancy-font    { font-family: 'Allura', cursive; }
.top-margin    { margin-top: 100px; }
.top-margin-xl { margin-top: 170px; }
.all-padding   { padding: 15px; }
.margin-higher { margin-top: -30px; }
.font-xs { font-size: 11px; }
.font-sm { font-size: 18px; }
.font-md { font-size: 30px; }
.font-lg { font-size: 50px; }
.font-xl { font-size: 70px; }
.green-bgrd { background-color: #a9bbb7; }
.img-sm   { height: 10em; }
.img-md   { width: 25em; }
.img-full { width: 90%; }

/* Content from the block editor -------------------------------------------- */
.entry-content { margin-bottom: 30px; }
.entry-content .text-left,
.entry-content .text-left li { text-align: left; }
.entry-content img { max-width: 100%; height: auto; }
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { font-size: .85em; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff; clip: auto !important; clip-path: none; color: #333;
	display: block; height: auto; left: 5px; padding: 15px 23px 14px;
	top: 5px; width: auto; z-index: 100000;
}

/* Blog / generic pages */
.post-list article { margin-bottom: 40px; }

/* Responsive -------------------------------------------------------------- */
@media (min-width: 992px) {
	#amenities-img { width: 25em; }
}

@media (max-width: 575px) {
	.font-lg { font-size: 40px; }
	.font-xl { font-size: 54px; }
	.amenities h3 { margin-top: 50px; }
	.amenities h3,
	.amenities li {
		text-align: center;
		list-style: none;
		margin-left: -20px;
	}
	footer.footer h3 { font-size: 18px; }
	.top-margin-xl { margin-top: 120px; }
	.jumbotron h1 { font-size: 24px; }
}

/* Contact page tweaks carried over from the original contact-us.php */
@media (min-width: 767px) and (max-width: 1045px) {
	.lg-text-2 { font-size: 15px; }
	.lg-text { font-size: 20px; }
}