/*
Theme Name: Villa Casa Luna Classic
Description: Faithful recreation of the original villa-casa-luna.com design (pre-WordPress static site, archived 2020) as a WordPress theme. Original chrome — blue top bar with centered dropdown navigation, BlackJack script logo with morning glory, framed 918px slideshow, three-column home panel, and fountain footer — rendered around the existing WordPress/Elementor content.
Template: twentytwenty
Version: 3.0.1
Tags: custom-menu, one-column
*/

/* ---------------------------------------------------------------------------
   Fonts (bundled in this theme; Ubuntu + PT Sans are enqueued from Google)
--------------------------------------------------------------------------- */

@font-face {
	font-family: 'BlackJackRegular';
	src: url('fonts/black_jack-webfont.eot');
	src: url('fonts/black_jack-webfont.eot#iefix') format('embedded-opentype'),
	     url('fonts/black_jack-webfont.woff') format('woff'),
	     url('fonts/black_jack-webfont.ttf') format('truetype'),
	     url('fonts/black_jack-webfont.svg#BlackJackRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ---------------------------------------------------------------------------
   General page scaffolding (from the original main.css)
--------------------------------------------------------------------------- */

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	/* !important guards against WP custom-background output */
	background: #fff url('pics/top_blue_bar.jpg') center 0 repeat-x !important;
	font-family: 'Ubuntu', sans-serif;
}

.screen-reader-text,
.skip-link {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

#wrapper_all {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -241px; /* negative value of the footer height */
	padding: 0;
}

#wrapper {
	width: 918px;
	margin: 0 auto;
}

.push {
	/* must match the footer height so the footer never overlaps content */
	height: 241px;
}

.content {
	width: 918px;
	min-height: 450px;
	padding: 0;
	margin: 0 auto;
}

.content img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Header: script logo + morning glory
--------------------------------------------------------------------------- */

#header {
	position: relative;
	width: 918px;
	height: 150px;
	z-index: 99999;
}

#header h1 {
	margin: 0;
	padding: 73px 0 0 200px;
	font-size: 1em;
}

#header h1 a {
	display: block;
	position: relative;
	width: 469px;
	height: 0;
	padding-top: 72px;
	background: url('pics/casa_luna_name.png') 0 0 no-repeat;
	overflow: hidden;
	z-index: 99;
}

#morning_glory a {
	position: absolute;
	top: 0;
	left: -41px;
	width: 162px;
	height: 0;
	padding-top: 285px;
	background: url('pics/morning_glory.png') 0 0 no-repeat;
	overflow: hidden;
	z-index: 100;
}

/* ---------------------------------------------------------------------------
   Main navigation (WordPress menu inside the blue top bar)
--------------------------------------------------------------------------- */

#topnav {
	position: relative;
	height: 53px;
	margin: 0;
	z-index: 999999;
}

#topnav ul {
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

#topnav li {
	position: relative;
	height: 53px;
	padding-right: 2px;
	background: url('pics/topnav_separator.png') right center no-repeat;
}

#topnav li:last-child {
	padding: 0;
	background: none;
}

#topnav li a {
	display: inline-block;
	padding: 0 35px;
	text-decoration: none;
	color: #fff;
	font-size: 17px;
	line-height: 53px;
	font-family: 'Ubuntu', sans-serif;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#topnav li a:hover {
	color: #6d8bbf;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0) !important;
}

/* dropdowns */
#topnav li ul.sub-menu {
	display: block;
	position: absolute;
	z-index: 999999;
	left: -9999px;
	top: 53px;
	width: 162px;
	margin: -2px 0 0 !important;
	padding: 0;
	background: url('pics/dropdown_bg2.jpg') center 0 repeat-y;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

#topnav li:hover > ul.sub-menu,
#topnav li:focus-within > ul.sub-menu {
	left: 0;
}

#topnav li li {
	float: none;
	height: auto;
	margin: 0;
	padding: 0 0 1px 0;
	list-style: none;
	position: relative;
	background: none;
	text-align: left !important;
}

#topnav li li a {
	font-family: Arial, sans-serif;
	display: block;
	padding: .37em 6px;
	width: 150px;
	height: auto;
	margin: 0;
	background-image: none;
	font-size: 10pt;
	line-height: 1.15;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#topnav li li a:hover {
	color: #8aa1c9;
	background: #FFF;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0) !important;
}

/* ---------------------------------------------------------------------------
   Home page: framed slideshow (MetaSlider)
--------------------------------------------------------------------------- */

.home .metaslider {
	position: relative;
	width: 918px !important;
	max-width: 918px !important;
	/* top margin drops the photo below the header logo overhang */
	margin: 60px auto 0 !important;
	z-index: 99;
	background-color: #000;
}

.home .metaslider .slider-wrapper {
	border: none !important;
	overflow: visible !important;
}

/* the original white picture-frame overlay */
.home .metaslider::after {
	content: "";
	position: absolute;
	left: 0;
	top: -20px;
	width: 918px;
	height: 475px;
	background: url('pics/shuffle_overlay.png') 0 0 no-repeat;
	background-size: 918px 475px;
	pointer-events: none;
	z-index: 100;
}

/* the 2020 site had no visible slider controls */
.home .metaslider .flex-direction-nav,
.home .metaslider .flex-control-nav,
.home .metaslider .nivo-directionNav,
.home .metaslider .nivo-controlNav {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Home page: content adjustments
   (logo / morning glory / fountain image widgets are supplied by the theme
   chrome, so their in-content duplicates are hidden)
--------------------------------------------------------------------------- */

.home .elementor-widget-image {
	display: none !important;
}

/* every page embeds its own copy of the logo, morning glory and fountain
   in the Elementor content; the theme chrome supplies those, so hide the
   duplicates wherever they appear */
.elementor-widget-image:has(img[src*="casa_luna_name"]),
.elementor-widget-image:has(img[src*="villa-casa-luna-logo"]),
.elementor-widget-image:has(img[src*="morning_glory"]),
.elementor-widget-image:has(img[src*="fountain.png"]) {
	display: none !important;
}

/* with the image widgets hidden, their containers must not hold empty space */
[data-elementor-type="wp-page"] .e-con,
[data-elementor-type="wp-page"] .elementor-section {
	min-height: 0 !important;
}

.home .elementor-widget-text-editor {
	width: 918px !important;
	max-width: 918px !important;
	margin: 0 auto;
	padding: 0;
	box-shadow: none;
}

/* three-column panel */
.home .wp-block-columns {
	box-sizing: border-box;
	width: 918px !important;
	max-width: 918px !important;
	margin: 30px auto 0;
	padding: 19px 19px 0;
	background: url('pics/index_main_body.png') center 0 repeat-y;
	gap: 20px;
}

.home .wp-block-column {
	min-height: 300px;
	padding: 0 10px;
	line-height: 1.3em;
	font-size: 14px;
	color: #546c98;
	font-family: 'Ubuntu', sans-serif;
}

.home .wp-block-column p {
	font-size: 14px;
	line-height: 1.3em;
	color: #546c98;
	font-family: 'Ubuntu', sans-serif;
}

h2.home-header {
	display: block;
	width: 277px;
	height: 44px;
	margin: 0 auto 20px;
	padding: 0;
	text-decoration: none;
	font-size: 25px;
	font-weight: normal;
	line-height: 43px;
	color: #546c98;
	font-family: 'BlackJackRegular' !important;
	text-align: center;
	background: url('pics/h2_bg.jpg') 0 bottom no-repeat;
	border: none;
	box-shadow: none;
}

.home .wp-block-column a {
	font-family: 'BlackJackRegular';
	font-size: 18px;
	color: #546c98;
	text-decoration: none;
}

.home .wp-block-column a:hover {
	text-decoration: underline;
}

/* white panel bottom cap printed by front-page.php */
img.home-bottom-cap {
	display: block;
	width: 918px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Interior pages
--------------------------------------------------------------------------- */

#insidepage {
	min-height: 400px;
	margin: 5px 5px 0 !important;
	/* top padding clears the header logo and morning glory, which overhang
	   the content area (the original site had an interior slideshow there) */
	padding: 150px 25px 20px 25px;
	background: #fff;
	line-height: 1.3em;
	font-size: 14px;
	color: #546c98;
	font-family: 'Ubuntu', sans-serif;
}

#insidepage a {
	color: #546C98;
}

#insidepage h2 {
	margin: 0 0 10px 0;
	padding: 0;
}

.pageTitle {
	display: block;
	width: 818px;
	max-width: 100%;
	height: 44px;
	margin: 0 0 20px;
	text-decoration: none;
	font-size: 30px;
	line-height: 44px;
	color: #546c98;
	font-family: 'BlackJackRegular';
	font-weight: normal;
	border-bottom: solid 1px #546c98;
}

.review {
	width: 780px;
	max-width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
	padding: 15px;
	border: solid 10px #C6D1E7;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.script {
	font-size: 1.5em;
	font-family: 'BlackJackRegular';
}

.rates li {
	margin: 10px 0;
}

.rates li ul li {
	margin: 0 !important;
}

.vert {
	float: left;
	width: 220px;
	height: 300px;
	margin: 0 15px 15px 0;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	background: #ccc;
}

.wpforms-container {
	font-size: 14px;
	color: #546c98;
	font-family: 'Ubuntu', sans-serif;
}

/* interior slideshows keep the smaller frame proportions */
body:not(.home) .metaslider {
	position: relative;
	max-width: 868px;
	margin: 0 auto 20px;
}

/* ---------------------------------------------------------------------------
   Footer: fountain + script links over the blue gradient
--------------------------------------------------------------------------- */

#footer {
	position: relative;
	width: 100%;
	height: 241px;
	/* fountain layered over the blue gradient strip; both anchored to the
	   bottom of the footer itself so they can never drift out of line */
	background: url('pics/fountain.png') bottom center no-repeat,
	            url('pics/footer_bg.jpg') bottom center repeat-x;
	z-index: 9999;
}

#footer_inside {
	width: 900px;
	margin: 0 auto;
	padding-top: 100px;
}

#footer_left {
	float: left;
	width: 340px;
}

#footer_right {
	float: right;
	width: 340px;
}

#footer_inside ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer_inside li a {
	display: block;
	color: #fff;
	font-family: 'BlackJackRegular';
	font-size: 24px;
	line-height: 42px;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

#footer_inside li a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Small screens: the Mobile Menu plugin provides the header below 1025px
--------------------------------------------------------------------------- */

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

	#header,
	.home .metaslider::after {
		display: none !important;
	}

	#wrapper,
	.content,
	.home .metaslider,
	.home .elementor-widget-text-editor,
	.home .wp-block-columns,
	img.home-bottom-cap {
		width: 100% !important;
		max-width: 100% !important;
	}

	.home .wp-block-column {
		min-height: 0;
	}

	.pageTitle {
		width: auto;
	}

	#footer_inside {
		width: auto;
		padding: 100px 10px 0;
	}

	#footer_left,
	#footer_right {
		width: 50%;
	}
}