/*
Theme Name: Grand Villa
Theme URI: https://www.grandvilla.lk/
Author: Grand Villa
Author URI: https://www.grandvilla.lk/
Description: Custom lightweight WordPress theme for Grand Villa, Anuradhapura.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: grand-villa
*/


/* ================================================================
   BRAND
   ================================================================ */

:root {
	--grand-green: #007a14;
	--grand-green-dark: #005c0f;
	--grand-green-deep: #003f0a;
	--grand-green-light: #eaf6ec;
	--grand-green-pale: #f5faf5;
}


/* ================================================================
   GLOBAL TYPOGRAPHY
   ================================================================ */

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Convergence', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.grand-heading {
	font-family: 'Aladin', cursive;
	font-weight: 400;
}

button,
input,
select,
textarea {
	font-family: 'Convergence', sans-serif;
}


/* ================================================================
   HEADER
   ================================================================ */

.grand-header {
	background: rgba(0, 63, 10, 0.78);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.grand-brand-name {
	display: block;
	font-family: 'Aladin', cursive;
	font-size: 2.35rem;
	line-height: 1;
	color: #ffffff;
}

.grand-brand-location {
	display: block;
	margin-top: 4px;
	font-family: 'Convergence', sans-serif;
	font-size: 0.62rem;
	line-height: 1;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}


/* ================================================================
   WORDPRESS CUSTOM LOGO
   ================================================================ */

.grand-logo .custom-logo-link {
	display: block;
}

.grand-logo .custom-logo {
	display: block;
	width: auto;
	max-height: 65px;
	max-width: 210px;
}


/* ================================================================
   PRIMARY MENU
   ================================================================ */

.grand-primary-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.grand-primary-menu > li {
	position: relative;
	margin-left: 1.75rem;
}

.grand-primary-menu > li:first-child {
	margin-left: 0;
}

.grand-primary-menu > li > a {
	display: block;
	padding: 0.5rem 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: 'Convergence', sans-serif;
	font-size: 0.9rem;
	text-decoration: none;
	transition:
		color 180ms ease,
		opacity 180ms ease;
}

.grand-primary-menu > li > a:hover,
.grand-primary-menu > li.current-menu-item > a,
.grand-primary-menu > li.current_page_item > a {
	color: #ffffff;
}


/* ================================================================
   DESKTOP SUBMENUS
   ================================================================ */

.grand-primary-menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;
	z-index: 50;

	min-width: 210px;
	margin: 0;
	padding: 0.5rem;

	list-style: none;

	background: #ffffff;
	border-radius: 0.75rem;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

	opacity: 0;
	visibility: hidden;
	transform: translateY(5px);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		visibility 160ms ease;
}

.grand-primary-menu li:hover > .sub-menu,
.grand-primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.grand-primary-menu .sub-menu li a {
	display: block;
	padding: 0.65rem 0.8rem;
	color: #374151;
	font-size: 0.875rem;
	text-decoration: none;
	border-radius: 0.5rem;
}

.grand-primary-menu .sub-menu li a:hover {
	background: var(--grand-green-light);
	color: var(--grand-green);
}


/* ================================================================
   BOOKING BUTTON
   ================================================================ */

.grand-book-button {
	background: var(--grand-green);
	color: #ffffff;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}

.grand-book-button:hover {
	background: #ffffff;
	color: var(--grand-green);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* ================================================================
   MOBILE MENU
   ================================================================ */

/*
 * <details> is used instead of JavaScript.
 */

.grand-mobile-menu > summary {
	list-style: none;
}

.grand-mobile-menu > summary::-webkit-details-marker {
	display: none;
}

.grand-mobile-menu[open] > summary {
	background: rgba(255, 255, 255, 0.10);
}

.grand-mobile-panel {
	position: absolute;
	top: 58px;
	right: 0;

	width: min(320px, calc(100vw - 2rem));

	background: #ffffff;
	border-radius: 1rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20);

	overflow: hidden;
}

.grand-mobile-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.grand-mobile-nav li {
	margin: 0;
	padding: 0;
}

.grand-mobile-nav a {
	display: block;
	padding: 0.75rem 0.5rem;

	color: #374151;
	font-size: 0.95rem;
	text-decoration: none;

	border-bottom: 1px solid #f3f4f6;
}

.grand-mobile-nav a:hover,
.grand-mobile-nav .current-menu-item > a,
.grand-mobile-nav .current_page_item > a {
	color: var(--grand-green);
}

.grand-mobile-book-button {
	background: var(--grand-green);
	color: #ffffff;
	text-decoration: none;
}

.grand-mobile-book-button:hover {
	background: var(--grand-green-dark);
	color: #ffffff;
}


/* ================================================================
   BOOKING CTA
   ================================================================ */

.grand-booking-cta {
	background:
		linear-gradient(
			135deg,
			#007a14 0%,
			#005c0f 100%
		);
}

.grand-footer-book-button {
	background: #ffffff;
	color: var(--grand-green);
	text-decoration: none;

	transition:
		background-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}

.grand-footer-book-button:hover {
	background: var(--grand-green-pale);
	color: var(--grand-green);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}


/* ================================================================
   FOOTER
   ================================================================ */

.grand-footer {
	background: var(--grand-green-deep);
}

.grand-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.grand-footer-menu li {
	margin-bottom: 0.75rem;
}

.grand-footer-link {
	color: rgba(220, 252, 231, 0.75);
	text-decoration: none;

	transition:
		color 160ms ease;
}

.grand-footer-link:hover {
	color: #ffffff;
}


/* ================================================================
   WORDPRESS
   ================================================================ */

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

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}

.alignright {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}


/* ================================================================
   ACCESSIBILITY
   ================================================================ */

.skip-link:focus {
	z-index: 9999;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1023px) {

	.grand-header {
		background: rgba(0, 63, 10, 0.92);
	}

}

@media (max-width: 640px) {

	.grand-brand-name {
		font-size: 2rem;
	}

	.grand-brand-location {
		font-size: 0.55rem;
	}

	.grand-logo .custom-logo {
		max-height: 55px;
		max-width: 175px;
	}

}

/* ================================================================
   GRAND VILLA HERO
   ================================================================ */

.grand-hero {
	min-height: 760px;
	height: 88vh;
	max-height: 920px;
	background: #e9eee9;
}


/*
 * The original photograph is intentionally allowed to breathe.
 */

.grand-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}


/*
 * Extremely subtle gradient.

 * The purpose isn't to darken the photograph.
 * It just gives the bottom of the image enough separation
 * for the floating card.
 */

.grand-hero-vignette {
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.00) 45%,
			rgba(0, 32, 5, 0.10) 70%,
			rgba(0, 32, 5, 0.32) 100%
		);
}


/* ================================================================
   HERO CARD
   ================================================================ */

.grand-hero-card {
	width: 100%;
	max-width: 480px;

	padding: 2.25rem 2.5rem 2.5rem;

	background: rgba(255, 255, 255, 0.94);

	border-left: 5px solid #007a14;

	box-shadow:
		0 25px 60px rgba(0, 0, 0, 0.18);

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}


/* Small uppercase heading */

.grand-hero-eyebrow {
	margin: 0;

	font-family: 'Convergence', sans-serif;
	font-size: 0.72rem;
	line-height: 1.5;
	font-weight: 500;

	letter-spacing: 0.22em;
	text-transform: uppercase;

	color: #007a14;
}


/* Main Grand Villa heading */

.grand-hero-title {
	margin: 0.35rem 0 0;

	font-family: 'Aladin', cursive;
	font-size: clamp(4rem, 7vw, 6rem);
	font-weight: 400;
	line-height: 0.9;

	color: #003f0a;
}


/* Main statement */

.grand-hero-subtitle {
	margin: 1.25rem 0 0;

	max-width: 390px;

	font-family: 'Convergence', sans-serif;
	font-size: 1.15rem;
	line-height: 1.65;

	color: #374151;
}


/* Decorative line */

.grand-hero-divider {
	width: 55px;
	height: 3px;

	margin-top: 1.5rem;

	background: #007a14;
}


/* Supporting copy */

.grand-hero-description {
	max-width: 390px;

	margin: 1.25rem 0 0;

	font-family: 'Convergence', sans-serif;
	font-size: 0.9rem;
	line-height: 1.7;

	color: #6b7280;
}


/* ================================================================
   HERO ACTIONS
   ================================================================ */

.grand-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;

	margin-top: 1.75rem;
}


.grand-hero-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.85rem 1.35rem;

	border-radius: 999px;

	background: #007a14;
	color: #ffffff;

	font-family: 'Convergence', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;

	text-decoration: none;

	transition:
		background-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


.grand-hero-primary:hover {
	background: #005c0f;
	color: #ffffff;

	transform: translateY(-2px);

	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.16);
}


.grand-hero-secondary {
	display: inline-flex;
	align-items: center;

	padding: 0.75rem 0.25rem;

	color: #005c0f;

	font-family: 'Convergence', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;

	text-decoration: none;

	border-bottom: 1px solid transparent;

	transition:
		color 180ms ease,
		border-color 180ms ease;
}


.grand-hero-secondary:hover {
	color: #007a14;
	border-bottom-color: #007a14;
}


/* ================================================================
   AVAILABILITY CARD
   ================================================================ */

.grand-availability-card {
	padding: 1.75rem 2rem;

	background: #ffffff;

	border-radius: 1rem;

	box-shadow:
		0 20px 55px rgba(0, 0, 0, 0.14);
}


.grand-availability-eyebrow {
	margin: 0 0 0.25rem;

	font-family: 'Convergence', sans-serif;
	font-size: 0.65rem;
	font-weight: 500;

	text-transform: uppercase;
	letter-spacing: 0.18em;

	color: #007a14;
}


.grand-availability-title {
	margin: 0;

	font-family: 'Aladin', cursive;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1;

	color: #003f0a;
}


/* ================================================================
   HBOOK HOMEPAGE OVERRIDES
   ================================================================ */

/*
 * HBook generates its own markup/classes.
 * These rules make the form feel like part of this design.
 */

.grand-home-hbook .hb-booking-form {
	margin: 0;
}


.grand-home-hbook input,
.grand-home-hbook select,
.hb-detail-field {
	min-height: 46px;

	border: 1px solid #d1d5db;
	border-radius: 0.5rem;

	font-family: 'Convergence', sans-serif;
	padding: 10px;
}


.grand-home-hbook input:focus,
.grand-home-hbook select:focus {
	border-color: #007a14;
	box-shadow: 0 0 0 2px rgba(0, 122, 20, 0.10);
	outline: none;
}


.grand-home-hbook button,
.grand-home-hbook input[type="submit"] {
	min-height: 46px;

	border: 0;
	border-radius: 999px;

	background: #007a14;
	color: #ffffff;

	font-family: 'Convergence', sans-serif;
	font-weight: 500;

	cursor: pointer;

	transition:
		background-color 180ms ease,
		transform 180ms ease;
}


.grand-home-hbook button:hover,
.grand-home-hbook input[type="submit"]:hover {
	background: #005c0f;
	transform: translateY(-1px);
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 767px) {

	.grand-hero {
		height: auto;
		min-height: 720px;
		max-height: none;
	}


	/*
	 * On mobile the original image needs to be positioned
	 * so the house remains visible behind the card.
	 */

	.grand-hero-image {
		object-position: 58% center;
	}


	.grand-hero-card {
		max-width: calc(100% - 1rem);

		margin-left: 0;

		padding: 1.75rem 1.5rem 1.9rem;

		border-left-width: 4px;
	}


	.grand-hero-title {
		font-size: 4.5rem;
	}


	.grand-hero-subtitle {
		font-size: 1rem;
	}


	.grand-hero-description {
		font-size: 0.82rem;
	}


	.grand-hero-actions {
		align-items: stretch;
		flex-direction: column;
	}


	.grand-hero-primary {
		width: 100%;
	}


	.grand-hero-secondary {
		justify-content: center;
	}


	.grand-availability-card {
		padding: 1.5rem;
	}

}


/* ================================================================
   SMALL PHONES
   ================================================================ */

@media (max-width: 420px) {

	.grand-hero {
		min-height: 680px;
	}


	.grand-hero-title {
		font-size: 4rem;
	}


	.grand-hero-card {
		padding: 1.5rem 1.25rem 1.6rem;
	}

}

.grand-header {
	background: linear-gradient(180deg, rgb(0 81 10 / 68%), rgba(0, 40, 5, 0));

	border-bottom: 0;

	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* =========================================================
   Contact Page
   ========================================================= */

.grand-contact-icon {
	width:2.5rem;
	height:2.5rem;
	margin-right:1rem;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	border-radius:50%;
	background:#eaf6ec;
	color:#007a14;
	font-size:.9rem;
}

.grand-contact-label {
	margin:0 0 .2rem;
	font-family:'Convergence',sans-serif;
	font-size:.65rem;
	font-weight:500;
	text-transform:uppercase;
	letter-spacing:.14em;
	color:#6b7280;
}

.grand-contact-value {
	margin:0;
	font-family:'Convergence',sans-serif;
	font-size:.85rem;
	line-height:1.7;
	color:#374151;
	text-decoration:none;
}

a.grand-contact-value:hover {
	color:#007a14;
}


/* Form card */

.grand-contact-form-card {
	padding:2rem;
	background:#fff;
	border-radius:1rem;
	box-shadow:0 15px 45px rgba(0,0,0,.08);
}

@media (min-width:768px) {
	.grand-contact-form-card {
		padding:2.5rem;
	}
}


/* Labels */

.grand-contact-field-label {
	display:block;
	margin-bottom:.45rem;
	font-family:'Convergence',sans-serif;
	font-size:.72rem;
	font-weight:500;
	color:#374151;
}

.grand-contact-field-label span {
	color:#007a14;
}


/* Inputs */

.grand-contact-input {
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:.8rem .9rem;
	border:1px solid #d1d5db;
	border-radius:.5rem;
	background:#fff;
	color:#374151;
	font-family:'Convergence',sans-serif;
	font-size:.82rem;
	outline:none;
	transition:border-color 180ms ease,box-shadow 180ms ease;
}

.grand-contact-input:focus {
	border-color:#007a14;
	box-shadow:0 0 0 3px rgba(0,122,20,.10);
}

.grand-contact-textarea {
	resize:vertical;
	min-height:150px;
}


/* Submit */

.grand-contact-submit {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.65rem;
	padding:.85rem 1.5rem;
	border:0;
	border-radius:999px;
	background:#007a14;
	color:#fff;
	font-family:'Convergence',sans-serif;
	font-size:.82rem;
	font-weight:500;
	cursor:pointer;
	transition:background-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}

.grand-contact-submit:hover {
	background:#005c0f;
	color:#fff;
	transform:translateY(-1px);
	box-shadow:0 7px 20px rgba(0,0,0,.14);
}


/* Success / error */

.grand-contact-success {
	padding:1rem 1.1rem;
	border:1px solid #cfe6d3;
	border-radius:.6rem;
	background:#eaf6ec;
	color:#005c0f;
	font-family:'Convergence',sans-serif;
	font-size:.8rem;
	line-height:1.6;
}

.grand-contact-error {
	padding:1rem 1.1rem;
	border:1px solid #f0d0d0;
	border-radius:.6rem;
	background:#fff5f5;
	color:#9b1c1c;
	font-family:'Convergence',sans-serif;
	font-size:.8rem;
	line-height:1.6;
}


/* Invisible honeypot */

.grand-contact-honeypot {
	position:absolute !important;
	left:-9999px !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
	opacity:0 !important;
	pointer-events:none !important;
}

/* =========================================================
   LARGE ACCOMMODATION GALLERIES
========================================================= */

.grand-accommodation-gallery {
	position:relative;
}


.grand-gallery-arrow {
	width:48px;
	height:48px;
	border:1px solid rgba(255,255,255,.45);
	border-radius:999px;
	background:rgba(0,0,0,.30);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:2rem;
	line-height:1;
	cursor:pointer;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}


.grand-gallery-arrow:hover {
	background:rgba(0,0,0,.58);
	border-color:rgba(255,255,255,.75);
}


.grand-gallery-arrow:focus {
	outline:none;
	box-shadow:0 0 0 3px rgba(255,255,255,.35);
}


.grand-gallery-dot {
	width:8px;
	height:8px;
	padding:0;
	border:0;
	border-radius:999px;
	background:rgba(255,255,255,.55);
	cursor:pointer;
	transition:
		width 180ms ease,
		background-color 180ms ease,
		opacity 180ms ease;
}


.grand-gallery-dot:hover {
	background:#fff;
}


.grand-gallery-dot-active {
	width:24px;
	background:#fff;
}


.grand-gallery-button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.8rem 1.35rem;
	border-radius:999px;
	background:#007a14;
	color:#fff;
	text-decoration:none;
	font-family:'Convergence',sans-serif;
	font-size:.85rem;
	font-weight:500;
	transition:
		background-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


.grand-gallery-button:hover {
	background:#005c0f;
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(0,0,0,.14);
}


.grand-gallery-button:focus {
	outline:none;
	box-shadow:0 0 0 3px rgba(0,122,20,.18);
}


/* Mobile */

@media (max-width:767px) {

	.grand-gallery-arrow {
		width:42px;
		height:42px;
		font-size:1.75rem;
	}

	.grand-gallery-button {
		width:100%;
	}

}