:root {
  /* Color Variables */
  --primary-bg-color-transparent: #f9f5eb00;
  --primary-bg-color: #f1e9f8;
  --primary-text-color: #2c2c2c;
  --primary-color-white: #ffffff;
  --accent-color: #1c3879;

  /* Spacing Variables */
  --padding: 1rem;
  --gap: 1rem;

  /* Typography */
  --font-size-base: 24px;
  --font-size-small: 18px;
  --font-size-xlarge: 56px;
  --font-size-title: 28px;
  --font-family-base: open-sans, sans-serif;
  --font-weight-base: 400;
  --font-family-title: open-sans, sans-serif;
  --font-weight-title: 800;
  --font-style-base: normal;

  /* Borders */
  --border-radius: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  margin-bottom: 1rem;
}

.text-center {
  text-align: center;
}

.logo {
  height: 80px;
}

.page-home .logo {
  height: 160px;
  transition: all 1s;
}

.page-home .scrolled .logo {
  height: 100px;
  transition: all 1s;
}

.logo-svg {
  fill: var(--accent-color);
  stroke-width: 0px;
}

body {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
  font-style: var(--font-style-base);
  color: var(--primary-text-color);
  background-color: var(--primary-bg-color);
  font-width: expanded;
  line-height: 1.5;
  /* padding: var(--padding); */
}

.blocks img {
  max-width: 100%;
}

/* Header Styling */

header {
  display: flex;
  justify-content: space-between;
  z-index: 10;
  align-items: center;
  padding: var(--padding);
  position: sticky;
  top: 0;
  width: 100%;
  padding-inline: 2.5%;
  background-color: var(--primary-bg-color);
  height: 100px;
}

.page-home header.scrolled {
  background-color: var(--primary-bg-color);
  transition: 1s all;
  height: 100px;
}

.page-home header {
  background-color: var(--primary-bg-color-transparent);
  position: fixed;
  left: 0;
  height: 200px;
  transition: 1s all;
}

/* Hide navigation by default on small screens */
#nav-menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 0; /* Position it below the header */
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100vh;
  background-color: var(--primary-bg-color);
}

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

#nav-menu ul li a {
  display: block;
  padding: 5px;
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
  color: var(--primary-text-color);
}

#nav-menu ul li a:hover {
  background-color: var(--accent-color);
  color: var(--primary-color-white);
}

/* Hamburger menu styles */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding-right: 79px;
}

.page-home .header-left,
.page-home .header-right {
  transition: all 1s;
  /* opacity: 0; */
}

.header-right {
  display: flex; /* Align items in a row */
  align-items: center; /* Vertically center items */
  gap: 10px; /* Space between items */
}

.page-home .scrolled .header-left,
.page-home .scrolled .header-right {
  /* opacity: 1; */
  transition: all 1s;
}

.hamburger-menu .bar {
  width: 45px;
  height: 3px;
  background-color: var(--accent-color);
  margin: 5px 0;
  transition: 0.3s;
}

#nav-menu.show {
  display: flex; /* Show menu when active */
  justify-content: center;
  align-items: center;
}

#nav-menu.show ul {
  flex: 1;
}

/* Close button styles */
.close-menu {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--primary-text-color);
  cursor: pointer;
  position: absolute;
  font-family: var(--font-family-base);
  top: 3rem;
  left: 2.5%;
  transition: color 0.3s;
}

.close-menu:hover {
  color: var(--accent-color); /* Change color on hover */
}

.btn {
  background-color: var(--accent-color);
  color: var(--primary-bg-color);
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-title);
  padding: calc(var(--padding) / 2) var(--padding);
  text-decoration: none;
  font-size: var(--font-size-base);
  border-radius: var(--border-radius);
  margin-block: 1rem;
}

.btn-primary {
  display: inline-block;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  max-width: 80rem;
  margin: auto;
}

.column {
  grid-column: span var(--span, 1); /* Default span is 1 if --span is not defined */
  padding: var(--padding);
}

section,
footer {
  max-width: 90%;
  margin-inline: auto;
  padding-block: 2rem;
}

/* Footer Styling */

footer {
  margin-block: 5rem 2rem;
}

/* Footer logo */
.footer-logo h3 {
  margin: 0;
  font-size: 1.5em;
  color: #333; /* Logo text color */
  text-decoration: none; /* Remove underline */
}

/* Footer paragraph styling */
footer p {
  margin: 10px 0; /* Margin around paragraphs */
  line-height: 1.6; /* Line height for readability */
}

footer h4 {
  margin-block: 1rem;
}

/* Styling for footer navigation */
.footer-nav {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

.footer-nav li {
  margin-bottom: 10px; /* Space between links */
}

.footer-nav a {
  color: var(--accent-color); /* Link color */
  text-decoration: none; /* Remove underline */
}

.footer-nav a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Styling for contact info */
footer .column p {
  margin: 5px 0; /* Space between contact details */
}

footer .column a {
  color: var(--accent-color); /* Link color */
  text-decoration: none; /* Remove underline */
}

footer .column a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Social media icons */
.social-icons {
  display: flex;
  gap: 15px; /* Space between icons */
}

.social-icons a {
  display: block;
}

.social-icons img {
  width: 24px; /* Size of social media icons */
  height: 24px;
  vertical-align: middle; /* Align icons vertically */
  transition: opacity 0.3s ease; /* Smooth transition on hover */
}

.social-icons img:hover {
  opacity: 0.7; /* Slightly transparent on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  footer.grid {
    grid-template-columns: 1fr; /* Stack columns vertically on smaller screens */
  }
}

.rates-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.rates-table,
.rates-table th,
.rates-table td {
  border: 1px solid #ddd;
}

.rates-table th,
.rates-table td {
  padding: 8px;
  font-size: var(--font-size-small);
  text-align: left;
}

.rates-table th {
  background-color: #f4f4f4;
}

/* Sections */
section.hero {
  max-width: 100vw;
  height: calc(100svh - 100px);
  color: var(--primary-bg-color);
  text-shadow: 3px 9px 30px #324f78;
  text-align: center;
}

section.fullscreen.hero {
  max-width: 100vw;
  height: calc(100vh - 100px);
}

section.hero h2 {
  font-size: var(--font-size-xlarge);
  max-width: 45rem;
  line-height: 1;
  margin: 1rem;
  margin-top: 1.4rem;
}

section.hero .column {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Gallery */

/* Style for the gallery figure element */
.gallery {
  margin: 0;
  padding: 0;
}

/* Style for the ul element inside the gallery */
.gallery ul {
  list-style: none; /* Remove default bullet points */
  margin: 2rem; /* Remove default margin */
  padding: 0; /* Remove default padding */
  display: flex; /* Use flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping of items */
  gap: 10px; /* Add space between items */
}

/* Style for each li element inside the gallery */
.gallery li {
  flex: 1 1 calc(25% - 10px); /* 3 items per row, accounting for gap */
  max-width: calc(25% - 10px); /* Limit the max width for responsive */
  list-style: none; /* Remove list styling */
}

/* Style for the images inside the gallery */
.gallery img {
  display: block; /* Ensure images do not have extra space below */
}

/* Style for the figcaption element */
.gallery figcaption {
  text-align: center; /* Center-align the caption text */
  font-style: italic; /* Make the caption text italic */
  margin-top: 10px; /* Add some space above the caption */
  color: #666; /* Set a light grey color for the caption text */
}
/* Slideshow container */
.slideshow {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

/* Hide all slides by default */
.slideshow-slide {
  display: none;
  position: relative;
}

/* Displayed image */
.slideshow-image {
  width: 100%;
  display: block;
  height: 40rem;
  object-fit: contain;
  background: var(--primary-bg-color);
}

/* Caption text */
.slideshow-caption {
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Next & previous buttons */
.slideshow-prev,
.slideshow-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.slideshow-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slideshow-prev:hover,
.slideshow-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.google-map-embed {
  max-width: 100%;
  list-style: none;
  transition: none;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.google-map-embed iframe {
  height: 100%;
  width: 100%;
  border: 0;
}

.external-link {
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.external-link img {
  width: 100%;
  height: 200px;
  display: block;
  object-fit: cover;
}

.external-link p {
  font-size: var(--font-size-small);
}

.external-link-content {
  padding: 15px;
}

.external-link-content h3 {
  margin-top: 0;
}

.external-link-content p {
  margin-bottom: 0;
}

/* Form Styling */

form {
  /* max-width: 600px; */
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
}

.form-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.form-group.small {
  flex: 1;
  max-width: 150px;
}

.form-row .form-group {
  flex: 1;
}

.error {
  border: 1px solid red;
}

.uniform__potty {
  position: absolute;
  left: -9999px;
}

/* Testimonial Styling */

/* Container for all testimonials */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* space between testimonials */
  justify-content: space-around; /* centers testimonials horizontally */
  padding: 20px;
}

/* Individual testimonial */
.testimonial {
  background-color: white; /* background for individual testimonials */
  border-radius: var(--border-radius); /* rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
  max-width: 300px; /* max width for responsive layout */
  padding: 20px;
  min-width: 250px;
  text-align: center; /* center align content */
}

/* Testimonial image */
.testimonial-image {
  border-radius: 50%; /* make image circular */
  width: 80px; /* set image width */
  height: 80px; /* set image height */
  object-fit: cover; /* maintain aspect ratio, crop if needed */
}

/* Testimonial title */
.testimonial h2 {
  font-size: var(--font-size-title); /* font size for titles */
  margin: 0 0 10px; /* margin below title */
  color: var(--primary-text-color); /* dark color for titles */
  line-height: 1.2;
}

/* Testimonial rating */
.rating {
  font-size: var(--font-size-small); /* font size for ratings */
  margin-bottom: 10px; /* space below rating */
  display: flex;
  height: 25px;
  color: gold;
  justify-content: center;
}

/* Testimonial text */
.testimonial-text {
  font-size: var(--font-size-small); /* font size for testimonial text */
  color: #666; /* grey color for text */
  line-height: 1.5; /* line height for readability */
  margin-top: 10px; /* space above the text */
  font-style: italic; /* italicize the testimonial text */
}

/* Basic styling for stars */
.star {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
}
/*  */

/* Calendar Style */
/* Calendar container styling */
#calendar-container {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

/* Header styling */
#calendar-container h2 {
  margin: 0;
  padding-bottom: 10px;
  font-size: 1.5em;
  color: #333;
}

/* Navigation buttons styling */
#calendar-container a {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  margin: 0 10px;
}

#calendar-container a:hover {
  text-decoration: underline;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

/* Table header styling */
th {
  background-color: #f4f4f4;
  padding: 10px;
  color: #333;
}

/* Table cell styling */
td {
  width: 14%;
  text-align: center;
  padding: 15px;
  vertical-align: top;
  cursor: pointer;
  position: relative;
}

/* Hover effect */
td:hover {
  background-color: #e9ecef;
}

/* Free day styling */
.free {
  background-color: #dff0d8; /* Light green for free */
}

/* Reserved day styling */
.reserved {
  background-color: #f8d7da; /* Light red for reserved */
}

/* Selected date range styling */
.selected-checkin {
  background-color: #cce5ff; /* Light blue for selected check-in */
  border: 2px solid #007bff; /* Blue border for selected check-in */
}

.selected-checkout {
  background-color: #cce5ff; /* Light blue for selected check-out */
  border: 2px solid #007bff; /* Blue border for selected check-out */
}

.selected {
  background-color: #cce5ff; /* Light blue for selected date range */
  border: 2px solid #007bff; /* Blue border for selected date range */
}

.hero {
  /* padding-block: 15rem; */
  color: white;
}

/* Style for the language icon */
.language-icon {
  width: 24px; /* Icon width */
  height: 24px; /* Icon height */
  fill: var(--accent-color); /* Icon color */
  cursor: pointer; /* Pointer cursor to indicate interactivity */
}

/* Style for the dropdown */
.language-dropdown {
  -webkit-appearance: none; /* Remove default styling */
  -moz-appearance: none;
  appearance: none;
  background-color: transparent; /* White background */
  border-radius: var(--border-radius); /* Rounded corners */
  padding: calc(var(--padding) / 2) var(--padding);
  padding-right: 2rem;
  border: 1px solid var(--accent-color);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  width: unset !important;
  color: var(--accent-color); /* Text color */
  cursor: pointer; /* Pointer cursor */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><polygon points="70,105 25,60 115,60" fill="%23444"/></svg>'); /* Custom dropdown arrow */
  background-repeat: no-repeat; /* No repeat */
  background-position: right 10px center; /* Position of the arrow */
  background-size: var(--font-size-small); /* Arrow size */
}

/* Centered logo */
.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center the logo horizontally */
  display: flex;
  justify-content: center;
}
.header-right .btn,
.header-right .language-dropdown {
  height: 50px;
}

.header-right {
  z-index: 100;
}

/* Hover and focus styles */
.language-dropdown:hover,
.language-dropdown:focus {
  /* border-color: #888; Darker border on hover/focus */
  outline: none; /* Remove focus outline */
}

/* Initial state: hidden or positioned off-screen */
.animation {
  opacity: 0;
  transform: translateY(20px); /* Move down by 20px */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animation state: visible and slightly moved up */
.animation.animate {
  opacity: 1;
  transform: translateY(0); /* Move to original position */
}

.accent-color path {
  fill: var(--accent-color);
}

.wrap-list li {
  width: 250px;
  float: left;
}

.wrap-list ul {
  margin: auto;
  font-size: var(--font-size-small);
}

.wrap-list li {
  margin-left: 2rem;
}

/* Example of a media query for mobile devices */
@media only screen and (max-width: 767px) {
  body {
    font-size: var(--font-size-small);
  }

  .header-right .btn,
  .language-icon {
    display: none;
  }

  .bar {
    width: 35px;
  }

  .hamburger-menu {
    margin-left: 1rem;
  }

  .column {
    grid-column: span 12;
  }
  section.hero h2 {
    font-size: 2rem;
    max-width: 60rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    max-width: 22rem;
  }
  .spacer {
    height: 1rem;
  }

  .gallery li {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    list-style: none;
  }
  li.gallery-item {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    height: 140px;
  }

  .gallery ul {
    margin-inline: 0;
  }
}

.border {
  border: 1px solid var(--accent-color);
  padding: 2rem;
  border-radius: 11px;
}
.gallery {
  margin: 0;
  padding: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery-item {
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  height: 200px; /* Set a fixed height for all items */
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%; /* Ensures all images fill the container */
  object-fit: cover; /* Crops the image to fill while maintaining aspect ratio */
}

.gallery-caption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}

.accordion-item {
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.accordion-summary {
  padding: 10px 15px;
  background-color: #f9f9f9;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-summary:hover {
  background-color: #f1f1f1;
}

.accordion-details {
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

details[open] .accordion-summary {
  background-color: #e9e9e9;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

/* Make the guests dropdown smaller */
.guests-dropdown select {
  width: 100%; /* Ensure it takes up the full width of its container */
  max-width: 100px; /* Set a maximum width to make it smaller */
}

.guest-selector {
  width: 5rem;
  flex: 0 !important;
}

/* Optional: Add margins for the date picker and guests dropdown for spacing */
.guests-dropdown {
  margin-left: 20px;
}

/* === General Form Styling === */
form {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  font-family: var(--font-family-base);
}

/* === Form Labels === */
.form-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #333;
}

/* === Input & Select Fields === */
input,
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease-in-out;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #007bff;
  outline: none;
}

/* === Error Messages === */
p.error {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

/* === Flexbox for Date & Guest Selection === */
.flex-container {
  display: flex;
  gap: 15px;
  justify-content: space-between;
}

.date-picker,
.guest-selector {
  flex: 1;
}

/* === Submit Button === */

.btn:hover {
  /* background: #0056b3; */
}

/* === Estimated Price Styling === */
p#estimated-price {
  font-size: var(--font-size-small);
  font-weight: bold;
  margin-top: 15px;
  color: #222;
}

p#estimated-price::after {
  content: " (€)";
  font-weight: normal;
  color: #555;
}