/* === RESET & BASE === */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Orbitron', sans-serif;
  background-color: #000b26;
  color: #d7873c;
}

a { text-decoration: none; color: #ffc373; }
a:hover { color: #d7873c; }
h1,h2,h3,h4,h5,h6 { color: #ffc373; text-shadow: 0 0 8px #ffc373; }
p { line-height: 1.6; }
/* === SECTION TITLE === */
.trekhaven-rest-section-title {
  font-size: 2.5rem;           /* Desktop size */
  margin-bottom: 20px;
  text-align: center;           /* Centered title */
  text-shadow: 0 0 8px #ffc373; /* Glow effect */
  line-height: 1.2;
}

/* Tablet */
@media (max-width: 992px) {
  .trekhaven-rest-section-title {
    font-size: 2.2rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .trekhaven-rest-section-title {
    font-size: 1.8rem;
    margin-bottom: 15px;
    padding: 0 10px; /* Optional horizontal padding for small screens */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .trekhaven-rest-section-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
}

/* === NAVBAR === */
.trekhaven-rest-nav {
  background-color: #000b26;
  padding: 0.8rem 0;
}
.trekhaven-rest-nav .navbar-brand img {
  height: 80px;
}
.trekhaven-rest-nav .nav-link {
  color: #d7873c;
  font-weight: 500;
  margin: 0 8px;
  transition: 0.3s;
}
.trekhaven-rest-nav .nav-link.active,
.trekhaven-rest-nav .nav-link:hover {
  color: #ffc373;
  text-shadow: 0 0 6px #ffc373;
}

/* === NAVBAR TOGGLE BUTTON === */
.trekhaven-rest-nav .navbar-toggler {
  border: none;
  background-color: #ffc373; /* Button background */
  color: #000b26;           /* Icon color */
  padding: 8px 12px;
  border-radius: 8px;
  transition: 0.3s;
}

.trekhaven-rest-nav .navbar-toggler:hover {
  background-color: #d7873c; /* Hover background */
  color: #000b26;             /* Hover icon color */
}

.trekhaven-rest-nav .navbar-toggler:focus {
  box-shadow: 0 0 8px #ffc373; /* Glow on focus */
}

.trekhaven-rest-nav .navbar-toggler-icon {
  color: #000b26; /* Ensure hamburger icon is visible */
}

/* Optional: for Bootstrap default icon replacement */
.trekhaven-rest-nav .navbar-toggler-icon::before {
  background-color: #000b26; /* hamburger lines color */
}


/* === HERO === */
.trekhaven-rest-hero {
  padding: 100px 20px;
  height:70vh;
 
  background: #000b26 url('../images/hero.jpg') center/cover no-repeat;
}
.trekhaven-rest-hero-title {
  font-size: 3rem;
  margin-bottom: 20px;
  text-align: center; /* center the text */
}

.trekhaven-rest-hero-sub {
  font-size: 1.25rem;
  margin-bottom: 30px;
  max-width: 800px;
  text-align: center; /* center the text */
  margin-left: auto;  /* optional: center block element horizontally */
  margin-right: auto; /* optional: center block element horizontally */
}

/* === BUTTONS === */
.trekhaven-rest-btn {
  background-color: #ffc373;
  color: #000b26;
  padding: 12px 28px;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 0 12px #ffc373;
  transition: 0.3s;
}
.trekhaven-rest-btn:hover { background-color: #d7873c; color: #000b26; }

/* === SMALL BUTTON === */
.trekhaven-rest-small-btn {
  background: none;
  color: #ffc373;
  border: 2px solid #ffc373;
  padding: 8px 16px;
  border-radius: 8px;
  text-shadow: 0 0 6px #ffc373;
  transition: 0.3s;
}
.trekhaven-rest-small-btn:hover { background-color: #ffc373; color: #000b26; }

/* === SECTIONS === */
.trekhaven-rest-section-title { font-size: 2.5rem; margin-bottom: 20px; text-shadow: 0 0 8px #ffc373; }
.trekhaven-rest-section-sub { color: #d7873c; }

/* === GAME / IFRAME === */
.trekhaven-rest-game-wrap {
  max-width: 900px;     /* Max width of game */
  width: 100%;          /* Full width for smaller screens */
  margin: 0 auto;       /* Center horizontally */
}

.trekhaven-rest-video-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 20px #ffc373; /* optional glow effect */
}

.trekhaven-rest-video-ratio iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 16px;
}

/* === FEATURES GRID === */
.trekhaven-rest-features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 24px; }
.trekhaven-rest-feature-card { background: #000b26; padding: 20px; border-radius: 16px; text-align: center; box-shadow: 0 0 12px #ffc373; transition: 0.3s; }
.trekhaven-rest-feature-card:hover { transform: translateY(-5px); }
.trekhaven-rest-feature-icon { font-size: 2.5rem; margin-bottom: 12px; color: #ffc373; }

/* === ABOUT === */
.trekhaven-rest-about-img { max-width: 100%; }
.trekhaven-rest-about-text { max-width: 600px; }

/* === REVIEWS === */
.trekhaven-rest-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 20px; }
.trekhaven-rest-review-card { background: #000b26; padding: 20px; border-radius: 16px; box-shadow: 0 0 12px #ffc373; }
.trekhaven-rest-reviewer { margin-top: 12px; font-weight: 700; }

/* === CONTACT === */
.trekhaven-rest-contact-form input,
.trekhaven-rest-contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: none;
  border-radius: 12px;
  background: #000b26;
  color: #ffc373;
  box-shadow: 0 0 6px #ffc373 inset;
}
.trekhaven-rest-contact-info { max-width: 300px; }
.bg-dark-secondary { background-color: #000822; }

/* === FOOTER === */
.trekhaven-rest-footer { background-color: #000b26; color: #d7873c; }
.trekhaven-rest-footer-nav a { margin: 0 10px; color: #ffc373; text-shadow: 0 0 6px #ffc373; }
.trekhaven-rest-footer-copy a { color: #ffc373; text-shadow: 0 0 6px #ffc373; }

/* === POPUP === */
.trekhaven-rest-popup {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,11,38,0.9);
  display: none; justify-content: center; align-items: center;
  z-index: 9999; padding: 20px;
}
.trekhaven-rest-popup.visible { display: flex; }
.trekhaven-rest-popup-inner { background: #000b26; padding: 30px; border-radius: 16px; text-align: center; box-shadow: 0 0 20px #ffc373; max-width: 500px; }
.trekhaven-rest-popup-title { color: #ffc373; font-size: 1.75rem; margin-bottom: 20px; text-shadow: 0 0 6px #ffc373; }
.trekhaven-rest-popup-text { color: #d7873c; margin-bottom: 20px; }

/* === SCROLL TO TOP === */
.trekhaven-rest-scroll {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;           /* fixed width */
  height: 40px;          /* fixed height */
  background: #ffc373;
  color: #000b26;
  border: none;
  border-radius: 50%;    /* perfect circle */
  font-size: 18px;
  display: none;
  box-shadow: 0 0 12px #ffc373;
  cursor: pointer;
  text-align: center;    /* center arrow */
  line-height: 40px;     /* vertically center arrow */
  transition: 0.3s;
}

.trekhaven-rest-scroll:hover {
  background: #d7873c;
  color: #000b26;
}

/* === RESPONSIVE === */
@media(max-width: 768px){
  .trekhaven-rest-hero-title { font-size: 2rem; }
  .trekhaven-rest-hero-sub { font-size: 1rem; }
  .trekhaven-rest-about-text { text-align: center; }
  .trekhaven-rest-about-image { text-align: center; }
}


/* === LEGAL PAGES (Disclaimer, Privacy, Terms) === */
.trekhaven-rest-legal {
  background-color: #000b26;
  color: #d7873c;
  padding: 80px 20px;
  font-family: 'Orbitron', sans-serif;
}

.trekhaven-rest-legal h1,
.trekhaven-rest-legal h2 {
  color: #ffc373;
  text-shadow: 0 0 8px #ffc373;
}

.trekhaven-rest-legal h1.trekhaven-rest-section-title {
  font-size: 2.5rem;
  margin-bottom: 40px;
  text-align: center;
}

.trekhaven-rest-legal h2.trekhaven-rest-subtitle {
  font-size: 1.75rem;
  margin-top: 30px;
  margin-bottom: 15px;
}

.trekhaven-rest-legal p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 15px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  color: #d7873c;
}

.trekhaven-rest-legal a {
  color: #ffc373;
  text-decoration: underline;
}
.trekhaven-rest-legal a:hover {
  color: #d7873c;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .trekhaven-rest-legal h1.trekhaven-rest-section-title {
    font-size: 2.2rem;
  }
  .trekhaven-rest-legal h2.trekhaven-rest-subtitle {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .trekhaven-rest-legal h1.trekhaven-rest-section-title {
    font-size: 1.9rem;
    margin-bottom: 30px;
  }
  .trekhaven-rest-legal h2.trekhaven-rest-subtitle {
    font-size: 1.3rem;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .trekhaven-rest-legal p {
    font-size: 0.95rem;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .trekhaven-rest-legal h1.trekhaven-rest-section-title {
    font-size: 1.6rem;
  }
  .trekhaven-rest-legal h2.trekhaven-rest-subtitle {
    font-size: 1.15rem;
  }
  .trekhaven-rest-legal p {
    font-size: 0.9rem;
  }
}