@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playwrite+AU+NSW:wght@100..400&display=swap');

/* RESET */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Inter", sans-serif;
  background: #282828;
  color: #fff;
  overflow-x: hidden;
}

/* HEADER */
.header {
  padding: 20px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #1f1f1f;
}

.logo {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  max-height: 80px;
  width: auto;
}

/* NAV */
.nav {
  margin-top: 20px;
}
.nav a {
  color: #d79158;
  margin: 0 20px;
  text-decoration: none;
  transition: 0.3s;
  font-weight: 200;
}
.nav a:hover { color: #fff; }

/* Social Icons */
.socials { position: absolute; right: 500px; }
.lng {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  max-height: 50px;
}
.lng:hover { cursor: pointer; }

/* HERO */
.hero {
  position: relative;
  background: url('../img/nn.png') center/cover no-repeat;
  padding: 180px 20px;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.hero h2,
.hero h3 {
  position: relative;
  z-index: 2;
}

.hero h2 {
  font-family: "Playwrite AU NSW", cursive;
  font-size: 3em;
  font-weight: 200;
  padding: 20px;
  transition: 0.4s ease;
}
.hero h2:hover {
  cursor: pointer;
  color: #d79158;
  text-shadow: 0 6px 12px #d79158;
  transform: scale(1.05);
}
.hero h3 {
  font-family: "Playwrite AU NSW", cursive;
  font-weight: 500;
  font-size: 1.3em;
  margin-top: 10px;
  position: static;
}

/* ABOUT */
.about {
  padding: 60px 20px;
  text-align: center;
}
.about h3 {
  font-size: 3em;
  color: #d79158;
  margin-bottom: 15px;
}
.about p {
  max-width: 800px;
  margin: 0 auto 20px;
  font-weight: 200;
}
.about button {
  background: #d79158;
  padding: 16px 24px;
  border-radius: 10px;
  transition: 0.3s;
}
.about button:hover { background: #9c6a42; cursor: pointer; }

h3 {
  text-align: center;
}
/* ROOMS TITLE */
.rooms,
.guest h3 {
  text-align: center;
  font-size: 2.5em;
  color: #d79158;
}

.review-square,
#reviews {
    padding: 80px 20px;
    background: #1e1e1e;
    text-align: center;
}

#reviews h3 {
    font-size: 2.8em;
    color: #d79158;
    font-weight: 500;
    margin-bottom: 40px;
    font-family: "Inter", serif;
}

/* Scroll container */
.reviews-wrapper {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 30px;
    scroll-snap-type: x mandatory;
}

.reviews-wrapper::-webkit-scrollbar {
    height: 6px;
}
.reviews-wrapper::-webkit-scrollbar-thumb {
    background: #d79158;
    border-radius: 10px;
}
.reviews-wrapper::-webkit-scrollbar-track {
    background: #2c2c2c;
}

.review-card {
    background: #2b2b2b;
    border-radius: 18px;
    padding: 35px;
    min-width: 330px;
    max-width: 350px;
    scroll-snap-align: center;
    box-shadow: 0 10px 35px rgba(0,0,0,0.4);
    border: 1px solid #3d3d3d;

    transition: all 0.35s ease;
}

.review-card:hover {
    box-shadow: 0 20px 45px rgba(0,0,0,0.55);
    border-color: #d79158;
}

.review-card .stars {
    color: #e6c27a;
    font-size: 22px;
    margin-bottom: 15px;
}

.review-card p {
    font-size: 1.05em;
    color: #eee;
    line-height: 1.5;
    margin-bottom: 20px;
}

.review-card strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    color: #d79158;
}

.review-card strong img {
    width: 24px;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

@media (max-width: 500px) {
    .review-card {
        min-width: 20px;
        padding: 25px;
    }
}


/* LOCATION */
.location {
  padding: 60px 20px;
  text-align: center;
}
.location h3 {
  font-size: 2.2em;
  color: #d79158;
  margin-bottom: 15px;
}

.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  overflow: hidden;
  border-radius: 12px;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#mapframe {
    width: 100%;
    height: 450px;
    border: none;
}

@media (max-width: 600px) {
    #mapframe {
        height: 300px; 
    }
}


/* CONTACT */
.contact {
  padding: 60px 20px;
  background: #1f1f1f;
}
.contact h3 {
  font-size: 2em;
  color: #d79158;
  margin-bottom: 20px;
}
.contact form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.contact input,
.contact textarea {
  background: #3a3a3a;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  color: #fff;
  border: none;
}
.contact button {
  background: #d79158;
  padding: 15px;
  border-radius: 5px;
  color: #fff;
}
.contact button:hover { background: #96663e; }

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  border-top: 2px solid #d79158;
}
footer p { color: #777; }

/* INSTAGRAM */
.insta { position: absolute; right: 3%; top: 25%; }

/* ——————————————————————— */
/*           RESPONSIVE FIXES            */
/* ——————————————————————— */

@media (max-width: 1024px){
  .logo { left: 20px; max-height: 65px; }
  .socials { right: 150px; }
}

/* MOBILE */
@media (max-width: 768px){

  /* Header elements center */
  .logo {
    left: 10%;
    top: 20%;
    transform: translateX(-50%) translateY(-50%);
    max-height: 60px;
  }

  .nav a { margin: 0 10px; }

  .socials,
  .insta,
  .lng {
    display: none;
  }

  /* Hero scaling */
  .hero {
    padding: 140px 20px;
  }
  .hero h2 { font-size: 2em; }
  .hero h3 { font-size: 1em; margin-top: 5px; }

  /* Paragraph scaling */
  p { font-size: 14px; }

  /* Review cards shrink */
  .reviews,
  .review-square {
    min-width: 90%;
  }

  #rooms div:nth-child(2) {
    flex-direction: column !important;
    align-items: center;
  }

}