/*
Theme Name:   Luxus
Theme URI:    https://luxusaccomodation.co.uk
Description:  A Custom theme for Luxus
Author:       Jake Woods
Author URI:   https://jakewoods.io
Template:     generatepress
Version:      2.0.2
License:      Custom EULA - Not for use on any other project except this one. 
Text Domain:  djw
*/



/** ----------------------------------------
 ** Custom Properties
 ** ----------------------------------------
    Sets custom properties to be used
 	repeatedly and consistently across site. 
 ** --------------------------------------- */
:root {
	--head-font: Averia Serif Libre, serif;
	--head-font-weight: 400;
	--sub-head-font: Averia Serif Libre, serif;
	--sub-head-font-weight: 700;
	--body-font: Georgia, "Times New Roman", Times, serif;
	--body-font-weight: 400;
	--fs-body: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-head-xxl: clamp(4rem, 3.45rem + 2.75vw, 6.75rem);
	--fs-head-xl: clamp(2.875rem, 2.375rem + 2.5vw, 5.375rem);
	--fs-head-h1: clamp(2.5rem, 2.15rem + 1.7500000000000002vw, 4.25rem);
	--fs-head-h2: clamp(2.175rem, 1.9349999999999998rem + 1.2000000000000002vw, 3.375rem);
	--fs-head-h3: clamp(1.85rem, 1.6700000000000002rem + 0.8999999999999999vw, 2.75rem);
	--fs-head-h4: clamp(1.625rem, 1.5rem + 0.625vw, 2.25rem);
	--fs-head-h5: clamp(1.375rem, 1.3rem + 0.375vw, 1.75rem);
	--fs-head-h6: clamp(1.25rem, 1.22rem + 0.1499999999999999vw, 1.4rem);
	--fs-head-s: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-head-pre: clamp(1rem, 0.974rem + 0.1299999999999999vw, 1.13rem);
	--fs-body-xxl: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
	--fs-body-xl: clamp(1.13rem, 1.0159999999999998rem + 0.5700000000000001vw, 1.7rem);
	--fs-body-l: clamp(1.11rem, 1.082rem + 0.1399999999999999vw, 1.25rem);
	--fs-body-s: clamp(0.95rem, 0.9339999999999999rem + 0.08000000000000007vw, 1.03rem);
	--fs-body-xs: clamp(0.89rem, 0.888rem + 0.010000000000000009vw, 0.9rem);
	--sect-side-pad: 2rem;
	--sect-vert-pad-xs: 1rem;
	--sect-vert-pad-s: 1.5rem;
	--sect-vert-pad-m: 2.5rem;
	--sect-vert-pad-d: 5rem;
	--sect-vert-pad-l: 7.5rem;
	--sect-vert-pad-xl: 10rem;
	--cont-width-d: 1200px;/* Standard section width - set in customizer - ujpdate here if changed! */
	--cont-width-m: 64rem;/* 1024px */
	--cont-width-s: 48rem;/* 768px */
	--cont-width-xs: 40rem;/* 640px */
	--spac-x-0-25: 0.25rem;/* 4px */
	--spac-x-0-5: 0.5rem;/* 8px */
	--spac-x-0-75: 0.75rem;/* 12px */
	--spac-x-1: 1rem;/* 16px */
	--spac-x-1-25: 1.25rem;/* 20px */
	--spac-x-1-5: 1.5rem;/* 24px */
	--spac-x-1-75: 1.75rem;/* 28px */
	--spac-x-2: 2rem;/* 32px */
	--spac-x-2-5: 2.5rem; /* 40px */
	--spac-x-3: 3rem;/* 48px */
	--spac-x-4: 4rem;/* 64px */
	--spac-x-6: 6rem;/* 96px */
	--spac-x-8: 8rem;/* 128px */
	--spac-x-12: 12rem;/* 192px */
	--spac-x-16: 16rem;/* 256px */
	--spac-x-24: 24rem;/* 384px */
	--spac-x-32: 32rem;/* 512px */
	--spac-x-40: 40rem;/* 640px */
	--spac-x-48: 48rem;/* 768px */
}

@media(min-width: 769px) and (max-width: 1024px) {
	:root {
		--sect-side-pad: 1.5rem;
		--sect-vert-pad-m: 2rem;
		--sect-vert-pad-d: 4rem;
		--sect-vert-pad-l: 6rem;
		--sect-vert-pad-xl: 7.5rem;
	}
}

@media(max-width: 768px) {
	:root {
		--sect-side-pad: 1rem;
		--sect-vert-pad-xs: 1rem;
		--sect-vert-pad-s: 1.25rem;
		--sect-vert-pad-m: 1.5rem;
		--sect-vert-pad-d: 3rem;
		--sect-vert-pad-l: 4.5rem;
		--sect-vert-pad-xl: 6rem;
	}
}


/** ----------------------------------------
 ** Helper Classes
 ** ----------------------------------------
    Useful classes to do specfic things.
 ** --------------------------------------- */

 /* Used to remove elements visually while preserving them in the DOM for SEO */
.hide-me {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}

/* No Underline */
.no-ul, .no-ul a {
	text-decoration: none;
}


/** ----------------------------------------
 ** Base Theme Overrides
 ** ----------------------------------------
    Sets custom properties to be used
 	repeatedly and consistently across site. 
 ** --------------------------------------- */

 /* Mobile Menu Trigger Button */
.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
	background-color: transparent;
}


/** ----------------------------------------
 ** Container Widths
 ** ----------------------------------------
    Sets the max width for containers
 ** --------------------------------------- */
.container-width-d {max-width: var(--cont-width-d);}
.container-width-m {max-width: var(--cont-width-m);}
.container-width-s {max-width: var(--cont-width-s);}
.container-width-xs {max-width: var(--cont-width-xs);}


/** ----------------------------------------
 ** Typography
 ** ----------------------------------------
    Sets the global typography
 ** --------------------------------------- */

 /* Default Body / p font settings */
p {
	font-family: var(--body-font);
	font-size: var(--fs-body);
	font-weight: var(--body-font-weight);
	line-height: 1.5;
	margin-bottom: var(--spac-x-1-5);
}

/* Default Headings weight, margin, font-family */
h1,
h2,
h3,
h4,
h5,
h6,
.gb-headline-xxl,
.gb-headline-xl,
.gb-headline-h1,
.gb-headline-h2,
.gb-headline-h3,
.gb-headline-h4,
.gb-headline-h5,
.gb-headline-h6,
.gb-headline-s,
.gb-headline-pre {
	font-family: var(--head-font);
	font-weight: var(--head-font-weight);
	letter-spacing: 0.08em;
	margin-bottom: var(--spac-x-1);
	text-transform: uppercase;
}

.gb-headline-sub-xxl,
.gb-headline-sub-xl,
.gb-headline-sub-h1,
.gb-headline-sub-h2,
.gb-headline-sub-h3,
.gb-headline-sub-h4,
.gb-headline-sub-h5,
.gb-headline-sub-h6,
.gb-headline-sub-s,
.gb-headline-sub-pre {
	font-family: var(--sub-head-font);
	font-weight: var(--sub-head-font-weight);
	letter-spacing: 3px;
	margin-bottom: var(--spac-x-1);
	text-transform: uppercase;
}

/* Heading font-size and line-height */
.gb-headline-xxl,
.gb-headline-sub-xxl {
	font-size: var(--fs-head-xxl);
	line-height: 1.05;
}

.gb-headline-xl,
.gb-headline-sub-xl {
	font-size: var(--fs-head-xl);
	line-height: 1.05;
}

h1,
.gb-headline-h1,
.gb-headline-sub-h1 {
	font-size: var(--fs-head-h1);
	line-height: 1.05;
}

h2,
.gb-headline-h2,
.gb-headline-sub-h2 {
	font-size: var(--fs-head-h2);
	line-height: 1.1;
}

h3,
.gb-headline-h3,
.gb-headline-sub-h3 {
	font-size: var(--fs-head-h3);
	line-height: 1.15;
}

h4,
.gb-headline-h4,
.gb-headline-sub-h4 {
	font-size: var(--fs-head-h4);
	line-height: 1.1;
}

h5,
.gb-headline-h5,
.gb-headline-sub-h5 {
	font-size: 1.375rem;
	font-size: var(--fs-head-h5);
	line-height: 1.25;
}

h6,
.gb-headline-h6,
.gb-headline-sub-h6 {
	font-size: 1.25rem;
	font-size: var(--fs-head-h6);
	line-height: 1.4;
}

.gb-headline-s,
.gb-headline-sub-s {
	font-size: 1rem;
	font-size: var(--fs-headline-s);
}

.gb-headline-pre,
.gb-headline-sub-pre {
	font-size: var(--fs-headline-pre);
	text-transform: uppercase;
	letter-spacing: .1em
}

/* Additional Body font-size */

.gb-headline-body-xxl,
.gb-headline-body-xl,
.gb-headline-body-l,
.gb-headline-body-d,
.gb-headline-body-s,
.gb-headline-body-xs {
	font-family: var(--body-font);
}

.gb-headline-body-xxl {
	
	font-size: 1.25rem;
	font-size: var(--fs-body-xxl);
}

.gb-headline-body-xl {
	font-size: var(--fs-body-xl);
}

.gb-headline-body-l {
	font-size: var(--fs-body-l);
}

.gb-headline-body-d {
	font-size: var(--fs-body);
}

.gb-headline-body-s {
	font-size: var(--fs-body-s);
}

.gb-headline-body-xs {
	font-size: var(--fs-body-xs);
}

/* Add top margin to blog post H2-H6 */

.single-post #content :is(h2, h3, h4, h5, h6) {
	margin-top: var(--spac-x-3);
}

.single-post #content p {
	line-height: 1.8;
	max-width: 68ch;
}

p:last-child {
	margin-bottom: 0;
}

/* Remove bottom margin on last paragraph in container (front end) */
.gb-container p:last-child:last-of-type {
	margin-bottom: 0px;
}

/* Remove bottom margin on last paragraph in container (editor) */
.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
	margin-bottom: 0px;
}

/* * List Styles */
#content ul,
#content ol {
	margin-left: var(--spac-x-1-25)
}

#content li {
	font-family: var(--body-font);
	font-size: var(--fs-body);
	font-weight: var(--body-font-weight);
	line-height: var(--spac-x-1-75);
}


/** ----------------------------------------
 ** Links
 ** ----------------------------------------
    Basic link styles are set in the customiser
	but you can extend them here
 ** --------------------------------------- */
a, p a, .inside-article a, .paging-navigation a, .comments-area a, .page-header a {

}
a:hover, p a:hover, .inside-article a:hover, .paging-navigation a:hover, .comments-area a:hover, .page-header a:hover {

}

a.gb-button {
	font-family: var(--body-font);
	font-weight: var(--body-font-weight);
	text-transform: uppercase;
}


/** ----------------------------------------
 ** Header & Main Navigation
 ** ----------------------------------------
    Styles the site masthead
 ** --------------------------------------- */
.site-header .inside-header,
#sticky-navigation .inside-navigation {
    padding: calc( var(--sect-side-pad) / 2 ) var(--sect-side-pad);
}

@media (max-width: 767px) {
	.site-header .inside-header {
    	padding: var(--sect-side-pad);
	}
}


/** ----------------------------------------
 ** Mobile Navigation
 ** ----------------------------------------
    Styles the mobile navigation
 ** --------------------------------------- */



/** ----------------------------------------
 ** Footer
 ** ----------------------------------------
    Styles the site footer
 ** --------------------------------------- */



/** ----------------------------------------
 ** Forms
 ** ----------------------------------------
    Basic styles for Fluent Forms
 ** --------------------------------------- */
 form.frm-fluent-form label {
	color: var(--contrast-2);
	font-family: var(--head-font);
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--accent);
}

form.frm-fluent-form .ff-el-input--label {
	margin-bottom: var(--spac-x-0-25);
}

/* Inputs, Text Areas & Selects */
form.frm-fluent-form input,
form.frm-fluent-form textarea,
form.frm-fluent-form select {
	background-color: transparent;
	border-color: var(--contrast-3);
	border-radius: var(--spac-x-0-25);
	color: var(--contrast-2);
	font-family: var(--body-font);
	font-size: var(--fs-body-s);
	padding: var(--spac-x-0-75);
	-webkit-border-radius: var(--spac-x-0-25);
	-moz-border-radius: var(--spac-x-0-25);
	-ms-border-radius: var(--spac-x-0-25);
	-o-border-radius: var(--spac-x-0-25);
}
form.frm-fluent-form input::placeholder,
form.frm-fluent-form textarea::placeholder,
form.frm-fluent-form select::placeholder {
	color: var(--contrast-3);
}
form.frm-fluent-form input:focus,
form.frm-fluent-form textarea:focus,
form.frm-fluent-form select:focus {
	background-color: var(--base-2);
	border-color: var(--accent);
}

select.ff-el-form-control:not([size]):not([multiple]) {
	height: auto;
}

form.frm-fluent-form select option:first-child {
	color: var(--contrast-2);
}

/* Submit Button */
button.ff-btn-submit {
	background-color: var(--accent);
	border-radius: var(--spac-x-0-25);
	font-family: var(--head-font);
	font-size: var(--fs-body);
	font-weight: var(--fs-headline-font-weight);
	padding: var(--spac-x-0-75) var(--spac-x-1-5);
	width: 100%;
	-webkit-border-radius: var(--spac-x-0-25);
	-moz-border-radius: var(--spac-x-0-25);
	-ms-border-radius: var(--spac-x-0-25);
	-o-border-radius: var(--spac-x-0-25);
}
button.ff-btn-submit:hover {
	background-color: var(--contrast);
}
.ff_submit_btn_wrapper {
	margin-bottom: 0!important;
}



/** ----------------------------------------
 ** Guest Information Pages
 ** ----------------------------------------
    Styles the pages that will make up the
	guest information section of the site.

	Note: This section is protected by
	password.
 ** --------------------------------------- */

/* * PASSWORD FORM */
form.post-password-form {
	align-items: center;
	background-color: var(--base-2);
	background-image: url('http://guests.luxusaccommodation.co.uk/wp-content/uploads/2023/10/luxus-paper_09.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--accent);
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body-l);
	justify-content: flex-start;
	min-height: 100vh;
	padding: var(--sect-vert-pad-d) var(--sect-side-pad);
	position: relative;
	width: 100%;
	z-index: 1;
}
form.post-password-form::after {
	background-color: rgba(250,250,250,0.5);
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}
form.post-password-form > * {
	position: relative;
	z-index: 3;
}

form.post-password-form .lx--guest-info--password-logo-wrap {
	margin-bottom: var(--sect-vert-pad-d);
}
form.post-password-form .lx--guest-info--password-logo {
	height: var(--spac-x-6);
}

form.post-password-form .lx--guest-info--password-wrap {
	max-width: 522px;
}

form.post-password-form .lx--guest-into--password-inputs {
	display: flex;
	gap: var(--spac-x-0-75);
}

form.post-password-form label {
	display: block;
	letter-spacing: 2px;
	padding-top: var(--spac-x-1-5);
	font-family: var(--sub-head-font);
	font-size: var(--fs-head-h6);
	font-weight: var(--sun-head-font-weight);
	text-align: center;
	text-transform: uppercase;
}

form.post-password-form input {
	font-family: var(--body-font);
	margin-bottom: 0;
	padding: var(--spac-x-0-75) var(--spac-x-1-5);
}

form.post-password-form .lx--guest-into--password-inputs br {
    display: none;
}

form.post-password-form input[type="password"] {
	background-color: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	flex-grow: 1;
	font-size: var(--fs-body-l);
}
form.post-password-form input[type="password"]::placeholder {
	color: var(--accent-75);
}
form.post-password-form input[type="password"]:focus {
	border-color: var(--primary);
}

form.post-password-form input[type="submit"] {
	background-color: var(--primary);
	color: var(--accent);
	font-size: var(--fs-body-l);
	letter-spacing: 3px;
	text-transform: uppercase;
}

.lx--help-text {
	color: var(--accent-75);
}

@media (max-width: 767px) {
	form.post-password-form .lx--guest-info--password-logo {
		height: var(--spac-x-4);
	}

	form.post-password-form .lx--guest-into--password-inputs {
		flex-direction: column;
		gap: var(--spac-x-0-75);
	}
}


/* * CONTENT */
/* * Logo Column - Desktop Only */
.lx--guest-info--grid-left {
	position: sticky;
	top: 0;
}

.lx--guest-info--logo-lines {
	background-color: var(--accent-75);
	height: 100%;
	width: 2px;
}

.lx--guest-info--2-col-text {}

#content .lx--guest-info--logo-wrap ul.djwb--social-navigation  {
	margin-left: 0;
}

@media (max-width: 1023px) {
	.lx--guest-info--grid-left {
		display: none;
	}
}

@media (max-width: 768px) {
	.lx--guest-info--2-col-text {
		flex-direction: column;
	}

	.lx--guest-info--2-col-text > div {
		width: 100%;
	}
}

/* * Content Column - Desktop Only */
#guest-info-page-navigation {
	position: sticky;
	top: 0;
}