/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Description:  Hello Elementor child theme
Author:       thrive
Author URI:   https://haighfieldpark.thrive-preview.co.uk/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/


/* Blog Filters Bar */
#blog-filters {
	margin: 82px 0px;
}
#blog-filters select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 2.5em 10px 10px; 
    background-image: url("/wp-content/uploads/2025/10/down-arrow2-svgrepo-com-1.svg");
    background-repeat: no-repeat;
    background-position: right 1.1em center;
    background-size: 15px;

}

#blog-filters select,
#blog-filters input[type="text"] {
    font-family: Mulish !important;
    font-size: 14px;
    border: none;
    color: #fff;
    outline: none;
    margin-right: 0;
    transition: border-color 0.2s;
    background-color: rgba(255,255,255,0.1);
    letter-spacing: 1.2px;
}

#filter-category option,
#filter-date option {
    background-color: rgba(20, 39, 37, 0.8) !important; 
    color: #ffffff !important;
}
#blog-filters input[type="text"]::placeholder{
	color: #fff;
	
}
#blog-filters input[type="text"] {
	flex: 1;
	position: relative;
	padding-right: 42px !important;
	background-image: url('/wp-content/uploads/2025/10/search-svgrepo-com-4.svg');
	background-repeat: no-repeat;
	background-position: right 1.2rem center;
	background-size: 1.2rem;
    letter-spacing: 1.2px;
}
#blog-filters select:focus,
#blog-filters input[type="text"]:focus {
	border-color: #6c3483;
}

.post-item {
	background: transparent;
	font-family: montserrat;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	box-shadow: none;
	margin-bottom: 60px;
}
.post-item .post-img {
	min-width: 33.33%;
	
}
.post-item img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.post-item h2 {
	font-family: The Seasons, Regular !important;
	font-size: 32px;
	color: #142725;
	margin: 1.2rem 0 0.5rem 0;
	font-weight: 300;
	line-height: 1.33em;
}
.post-item .read_more {
	color: #DAAA89;
	font-weight: 600;
	font-family: montserrat;
	text-decoration: underline;
	font-size: 18px;
	transition: color 0.2s;
	display: inline-block;
}
.post-content p {
	font-size: 18px;
	font-family: Montserrat;
	font-weight: 300px;
}
.post-item .read_more {
	color: #DAAA89;
	text-decoration: underline;
}
.post_auth .elementor-post-info__item-prefix {
    color: #fff;
	font-weight: 400;
}

@media (min-width: 992px) and (max-width: 1024px) {

	#blog_posts .elementor-shortcode {
		margin-top: -255px;
		margin-bottom: 50px;
	}
	#blog-filters {
		margin-bottom: 50px;
	}
}
@media (max-width: 991px) {

	#blog-filters {
		align-items: stretch;
		gap: 1rem;
		padding: 0 1rem;
	}
	#blog-filters select, #blog-filters input{
		max-width: 100%;
		
	}
	#posts-container {
		
		margin: 10px;
	}
	
	#blog_posts .elementor-shortcode {
		margin-top: -265;
		margin-bottom: 50px;
	}
	#blog-filters {
		margin-bottom: 50px;
	}
	.post-item h2 {
		font-size: 16px;
	}
	.single-post .elementor-widget-theme-post-content p {
		margin-bottom: 50px !important;
	}
}
@media (max-width: 768px) {

	#blog_posts .elementor-shortcode {
		margin-top: -255px;
		margin-bottom: 50px;
	}
	.post-item h2 {
		font-size: 16px;
	}
	.single-post .elementor-widget-theme-post-content p {
		margin-bottom: 30px !important;
	}
}



.lodges-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lodge-card.split-card {
    display: flex;
    background: #142725; /* Dark background like reference */
    
    overflow: hidden;
    color: #fff;
    align-items: stretch;
}

.lodge-card.split-card .lodge-image {
    flex: 1;
	max-width: 770px;
}

.lodge-card.split-card .lodge-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lodge-card.split-card .lodge-content {
    flex: 1;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	max-width: 34%;
	gap: 15px;
}

.lodge-title {
    font-size: 40px !important;
    font-weight: 200 ! important;
    margin-bottom: 15px;
	font-family: 'Seasons';
	letter-spacing: 1.5px;
	
}

.lodge-price {
    font-size: 18px;
    margin-bottom: 10px;
	font-family: 'Montserrat';
}

.lodge-features {
    font-size: 20px;
    margin-bottom: 10px;
    color: #d0c9bd; /* light accent text */
}

.lodge-single-text

 {
    font-size: 20px;
    color: #f0f0f0;
    font-family: 'Montserrat';
	color:#DAAA89;
}
.lodge-description {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f0f0f0;
	font-family: 'Montserrat';
}

.lodge-button {
    display: inline-block;
    padding: 12px 40px;
    background: #DAAA89; /* Peach accent like reference */
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    width: fit-content;
    transition: background 0.3s;
	font-size: 18px;
    font-family: 'Montserrat';
    line-height: 22px;
}

.lodge-button:hover {
    background: #d6aa8f; /* Forces background to remain the same */
    color: #fff;      /* Forces text color to remain the same */
   
    
}

.lodge-button.no-link {
  background-color: #000 !important;
  cursor: default !important;
  pointer-events: none !important; /* disables clicking */
}

/* Styling for the small red divider */
.lodge-divider {
    /* REQUIRED: Set the height (thickness) of the divider */
    height: 3px;
    
    /* REQUIRED: Set the color to red */
    background-color: #DAAA89; /* You can use any shade of red (e.g., #cc0000) */
    
    /* Set the width (e.g., 50px for a small line) */
    width: 50px; 
    
    /* Optional: Space below the divider and above the title */
    margin-bottom: 15px;
}

/* You might want to remove the top margin from the title if you want it closer to the divider */
.lodge-title {
    font-size: 28px;
    font-weight: 600;
    /* Use the same margin as the divider's margin-bottom to maintain consistent spacing */
    margin-top: 0; 
    margin-bottom: 15px;
}



/* .lodge-button:hover {
    background: #c69270;
} */

/* Responsive */
@media (max-width: 991px) {
    .lodge-card.split-card {
        flex-direction: column;
    }
	
	.lodges-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px !important;
	}
}



/* ==================================== */
/* MOBILE RESPONSIVENESS (Overrides) */
/* Targets screens 991px wide and smaller. */
/* ==================================== */

@media (max-width: 991px) { 
    /* 1. LAYOUT STACKING */
    .lodge-card.split-card {
        flex-direction: column; /* Stacks image and content vertically */
        
        /* Ensures any desktop hover transform/shadow is removed for touch devices */
        transform: none; 
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }
    
    /* Disables the card hover lift on mobile */
    .lodge-card.split-card:hover {
        transform: none;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }

    /* 2. WIDTH OVERRIDES */
    /* Overrides the fixed 770px and 532px widths */
    .lodge-card.split-card .lodge-image,
    .lodge-card.split-card .lodge-content {
        width: 100%; /* Takes full width of the mobile screen */
        max-width: 100%;
        padding: 20px 20px; /* Reduced padding for mobile screens */
    }
    
    /* 3. IMAGE HEIGHT CONTROL */
    .lodge-card.split-card .lodge-image {
        height: 250px; /* Give the image a controlled height on mobile */
    }

    /* 4. TYPOGRAPHY ADJUSTMENTS */
    .lodge-title {
        font-size: 35px !important; /* Smaller font size */
        letter-spacing: 1px; /* Slightly reduce letter spacing for smaller text */
    }
    
    .lodge-button {
        padding: 10px 20px; /* Smaller button padding */
    }
	
	.lodges-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
}

@media screen and (min-width: 1024px) and (max-width: 1520px) {
    .lodge-title{
        font-size: 30px !important;
		font-weight: 600 !important;
        margin-top: 0;
        margin-bottom: 15px;
	}

}

@media (max-width: 991px) {
    .lodges-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 767px) {
  .lodges-wrapper {
    display: flex;
    flex-direction: column;
    gap: 19px !important;
}

}