/* =========================================================
   THE CABOT LODGE — HOMEPAGE
   Cleaned responsive stylesheet
   Original blue palette
   ========================================================= */

/* ---------- Original palette ----------
   White:       #FFFFFF
   Soft gray:   #F9F9F9
   Lodge blue:  #446281
   Medium blue: #6287AD
   Link blue:   #7692AF
   Button blue: #CBDAE2
   Deep blue:   #396CA0
   Hover blue:  #7DACC4
   Peach:       #FCA179
   Navy text:   #002D6B
-------------------------------------- */

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

body {
  font-family: "Forum", serif;
  background-color: #FFFFFF;
  color: #446281;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-wrap: balance;
}

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

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.top-bar1,
.top-bar2 {
  background-color: #446281;
  height: 1vh;
}

.top-bar {
  background-color: #446281;
  color: #FFFFFF;
  padding: .5vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #BECCD3;
  border-bottom: 1px solid #BECCD3;
}

.top-bar t1 {
  font-size: clamp(12px, 2vw, 20px);
  color: #FFFFFF;
}

.spacer {
  margin-left: clamp(1px, 22vw, 22vw);
}

.logo-section {
  background-color: #FFFFFF;
  text-align: center;
}

.logo {
  margin-top: .5vh;
  height: clamp(80px, 10vw, 180px);
  margin-bottom: .5vh;
}

.navbar {
  background-color: #F9F9F9;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  margin-bottom: .3vh;
}

.navbar_bg {
  background-color: #FFFFFF;
  height: clamp(30px, 4.5vh, 5vh);
  margin-bottom: .3vh;
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: .2vh;
}

.navbar li {
  margin: 0 .6vw;
  padding-top: .3vh;
  padding-right: .6vw;
}

.navbar a {
  text-decoration: none;
  font-size: clamp(12px, 1.8vw, 24px);
  color: #7692AF;
  font-weight: normal;
  transition: color 0.3s;
  padding: 2px;
  display: inline-block;
}

.navbar a:hover {
  color: #FCA179;
  font-weight: bold;
}

/* =========================================================
   BOOK NOW BUTTON IN HEADER
   ========================================================= */

.book {
  text-align: center;
  padding: 1vh;
}

.book a {
  display: inline-block;
  background-color: #CBDAE2;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: bold;
  color: #396CA0;
  margin-bottom: 1vh;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 8px;
  outline: 1px solid #FFFFFF;
  outline-offset: -4px;
  transition: background-color 0.3s, color 0.3s;
}

.book a:hover {
  background-color: #7DACC4;
  color: #FFFFFF;
}

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

.hero img {
  width: 75%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 3vh auto 0;

}

/* =========================================================
   INTRO
   ========================================================= */

.intro-text {
  text-align: center;
  width: min(90%, 1100px);
  margin: 0 auto;
  padding: 2vh 1vh 1vh;
}

.intro-text h1 {
  font-size: clamp(32px, 3.5vw, 45px);
  font-weight: bold;
  color: #446281;
  margin-bottom: .5vh;
}

.intro-text h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: bold;
  color: #6287AD;
  margin-top: 1vh;
  margin-bottom: .1vh;
}

.intro-text h4 {
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: normal;
  color: #6287AD;
  margin-bottom: 1px;
}

/* =========================================================
   CHECK AVAILABILITY BUTTON
   ========================================================= */

.button {
  text-align: center;
  padding: 1vh 0 2.5vh;
}

.button a {
  display: inline-block;
  background-color: #CBDAE2;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: bold;
  color: #396CA0;
  margin-bottom: .5vh;
  padding: 10px 18px;
  text-decoration: none;
  border-radius: 8px;
  outline: 1px solid #FFFFFF;
  outline-offset: -4px;
  transition: background-color 0.3s, color 0.3s, transform 0.18s ease, box-shadow 0.18s ease;
}

.availability_button:hover {
  background-color: #7DACC4;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(68, 98, 129, 0.18);
}

.availability_button:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 2px 5px rgba(68, 98, 129, 0.18);
}

/* =========================================================
   HOMEPAGE 2x2 FEATURE GRID
   ========================================================= */

.grid-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw;
  width: 75%;
  max-width: 1200px;
  margin: 1vh auto 4vh;
  align-items: stretch;
}

.grid-item {
  min-width: 0;
  text-align: center;
  background-color: #FFFFFF;
  border: 1px solid #DCE4EA;
  border-radius: 8px;
  padding: .8vw;
  box-shadow: 0 3px 10px rgba(68, 98, 129, 0.10);
}

.grid-item > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  outline: 1px solid #FFFFFF;
  outline-offset: -.4vw;
}

.grid-item h1 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: bold;
  color: #446281;
  margin-top: 8px;
  margin-bottom: 5px;
}

.grid-item h2 {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: normal;
  color: #002D6B;
  line-height: 1.4;
}

.grid-item a {
  color: #69A2EF;
  font-weight: bold;
}

.grid-item a:hover {
  color: #3F71B5;
}

/* =========================================================
   GUEST NOTE SLIDESHOW
   ========================================================= */

.slideshow-container {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.mySlides {
  display: none;
}

.mySlides img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: #FFFFFF;
  border-radius: 6px;
  vertical-align: middle;
}

.fade {
  animation-name: fade;
  animation-duration: 1.2s;
}

@keyframes fade {
  from { opacity: .2; }
  to   { opacity: 1; }
}

.slideshow-dots {
  text-align: center;
  margin-top: 6px;
  line-height: 1;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-radius: 50%;
  background-color: #CBDAE2;
}

.dot.active {
  background-color: #446281;
}

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

.bottom-bar {
  background-color: #446281;
  color: #FFFFFF;
  text-align: center;
  padding: 2rem 1rem;
  min-height: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-bar t1 {
  font-size: clamp(12px, 1.5vw, 20px);
  color: #FFFFFF;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {
  .hero img {
    width: 85%;
  }

  .grid-section {
    width: 85%;
    gap: 3vw;
  }
}

/* =========================================================
   PHONE NAVIGATION / LAYOUT
   Mirrors the improved Salem-in-October mobile behavior
   ========================================================= */

@media (max-width: 600px) {

  .header {
    position: static;
  }

  .logo {
    margin-top: .5vh;
    height:  120px;
    margin-bottom: 0;
  }

  .book {
    padding-bottom: 1vh;
  }

  .book a {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 1vh;
    padding: 1.5vw;
    border-radius: 8px;
    outline-offset: -1vw;
  }

  .navbar {
    padding: .5vh 0;
  }

  .navbar ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6vh;
    padding: .5vh 0;
  }

  .navbar li {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }

  .navbar a {
    display: block;
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    padding: 2px;
    line-height: .7;
  }

  .navbar a:hover {
    font-weight: normal;
  }

  .navbar_bg {
    height: auto;
  }

  .hero img {
    width: 92%;
    margin-top: 2vh;
    outline-offset: -.5vw;
  }

  .intro-text {
    width: 94%;
    padding-top: 1.5vh;
  }

  .intro-text h1 {
    font-size: 1.8rem;
  }

  .intro-text h2 {
    font-size: 1.45rem;
  }

  .intro-text h4 {
    font-size: 18px;
  }

  .button a {
    font-size: clamp(6vw, 3.5vw, 34px);
    padding: 2.5vw;
    outline-offset: -1vw;
  }

  .grid-section {
    width: 92%;
    grid-template-columns: 1fr;
    gap: 3vh;
    margin-top: 1vh;
  }

  .grid-item {
    padding: 2vw;
  }

  .grid-item > img,
  .mySlides img {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .grid-item h1 {
    font-size: 24px;
  }

  .grid-item h2 {
    font-size: 18px;
  }
}

@media (max-width: 440px) {
  .hero img {
    width: 92%;
  }

  .spacer {
    margin-left: 12vw;
  }
}