/*
Theme Name: TripWise
Author: Davinder Singh
Version: 1.0
Description: TripWise is a custom tourism WordPress theme created for the DGL233 Tourism Office project. The purpose of this theme is to help visitors explore a travel destination by showing activities, accommodations, and useful travel information. The homepage highlights featured activities and places to stay, while archive and single pages allow users to learn more about each location. The theme focuses on a clean layout, simple navigation, and a user-friendly design so visitors can easily find travel ideas and plan their trip.
*/

/* -------------------- Base -------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #1f2933;
  line-height: 1.6;
  background: #f3f5f3;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

.site-main {
  min-height: 70vh;
}
body {
  font-size: 16px;
}

.intro p,
.cta p,
.featured-activities p,
.featured-accommodations p,
.why-visit p,
.card p {
  font-size: 1rem;
}

/* -------------------- Header -------------------- */
.site-header {
  background: #0b4d3b;
  padding: 0 2rem;
  position: relative;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo a {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
.site-logo img{
    height:55px;
    width:auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: #fff;
  font-weight: 550;
  font-size: 1rem;
}

.site-nav a:hover {
  opacity: 0.8;
}
.site-nav .current-menu-item a,
.site-nav .current_page_item a {
    color: #f5bf18; /* active color */
    font-weight: 600;
    border-bottom: 2px solid #f5bf18;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* -------------------- Global Sections -------------------- */
.section {
  width: 100%;
  padding: 3.5rem 2rem;
}

.section + .section {
  margin-top: 0;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section h2 {
  margin-top: 0;
  margin-bottom: 0.85rem;
  font-size: 2.3rem;
  line-height: 1.2;
}

.section p {
  margin-top: 0;
  margin-bottom: 1.2rem;
}


/* -------------------- Hero -------------------- */
.hero {
  min-height: 65vh;
  display: flex;
  align-items: center;
  padding: 3rem 2rem 2rem;
  background:
    linear-gradient(rgba(11, 77, 59, 0.55), rgba(11, 77, 59, 0.55)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
  color: #fff;
}

.hero .section-inner {
  width: 100%;
  text-align: center;
}

.hero-subtitle {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero h2 {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.15rem;
  margin: auto;
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

/* -------------------- Stats -------------------- */
.stats {
  background: transparent;
  padding: 3.5rem 1.2rem;
  margin-top: -2.25rem;
  position: relative;
  z-index: 2;
}

.stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.stat-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.4rem 1rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.stat-box h3 {
  margin: 0 0 0.45rem;
  font-size: 2rem;
  color: #0b4d3b;
}

.stat-box p {
  margin: 0;
  font-weight: 600;
  max-width: none;
}

/* -------------------- Section Backgrounds -------------------- */
.intro {
  background: #f3f5f3;
      padding-top: 0;
}
.featured-activities{
  background: #edf3f0;
}

.featured-accommodations {
  background: #f3f5f3;
}

.why-visit {
  background: #edf3f0;
}

.cta {
  background: #f3f5f3;
  padding: 3rem 2rem 4rem;
}

.intro p,
.cta p,
.featured-activities p,
.featured-accommodations p,
.why-visit p {
  font-size: 1.02rem;
  
}
.section-button {
  text-align: left;
  margin-top: 2rem;
}

.section-button .button {
  padding: 0.9rem 1.6rem;
  font-size: 0.95rem;
}

/* -------------------- Buttons -------------------- */
.button {
  display: inline-block;
  background: #0b4d3b;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 550;
  margin-top: 0.5rem;
  transition: 0.3s ease;
  text-align: center;
}

.button:hover {
  background: #0d624c;
  transform: translateY(-2px);
}

/* -------------------- Cards -------------------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.card-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.7rem;
  background: #e7f1ed;
  color: #0b4d3b;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.10rem;
  font-size: 1.35rem;
  line-height: 1.3;
}

.card p {
  margin-bottom: 1rem;
  max-width: none;
}

/* -------------------- Why Visit -------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.why-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.why-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.why-card p {
  margin-bottom: 0;
  max-width: none;
}

/* -------------------- Archive Pages -------------------- */
.archive-page {
  width: 100%;
  padding: 3.5rem 2rem;
}

.archive-content {
  max-width: 1100px;
  margin: 0 auto;
}

.archive-content h2 {
  font-size: 2.6rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.archive-content p {
  margin-top: 0;
  margin-bottom: 1.2rem;
  max-width: 760px;
}

/* -------------------- Single Pages -------------------- */
.single-page {
  width: 100%;
  padding: 3.5rem 2rem;
}

.single-content {
  max-width: 1100px;
  margin: 0 auto;
}

.single-post {
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.single-post img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.single-post h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2.2rem;
}
/* -------------------- Single Page New Layout -------------------- */
.single-page {
  width: 100%;
  padding: 4rem 2rem;
}

.single-content {
  max-width: 1100px;
  margin: 0 auto;
}

.single-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.single-details {
  padding-top: 1rem;
}

.single-label {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.4rem 0.8rem;
  background: #e7f1ed;
  color: #0b4d3b;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.single-details h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 3rem;
  line-height: 1.1;
  color: #1f2933;
}

.single-description p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.single-image img {
  width: 100%;
  margin-top: 3.5rem;
  height: 350px;
  object-fit: cover;
  border-radius: 16px;
}

.single-amenities {
  margin-top: 2rem;
}

.single-amenities h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.single-amenities ul {
  margin: 0;
  padding-left: 1.25rem;
}

.single-amenities li {
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .single-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .single-details h1 {
    font-size: 2.3rem;
  }

  .single-image img {
    height: 350px;
  }
}
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

.post-navigation a {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background-color: #0b5d47;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 0 1.5rem 1.5rem 1.5rem;
}

.post-navigation a:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
/* -------------------- Footer -------------------- */
.site-footer {
  background: #0b4d3b;
  color: #fff;
  text-align: center;
  padding: 1.25rem 2rem;
}

.site-footer p {
  margin: 0;
}

/* -------------------- Tablet -------------------- */
@media (max-width: 900px) {
  .archive-grid,
  .stats-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h2 {
    font-size: 3rem;
  }
}

/* -------------------- Mobile -------------------- */
@media (max-width: 700px) {
  .menu-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 82px;
    left: 0;
    width: 100%;
    background: #0b4d3b;
    padding: 1rem 1.25rem 1.5rem;
  }

  .site-nav.active {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .section,
  .archive-page,
  .single-page,
  .cta {
    padding: 2.5rem 1rem;
  }

  .hero {
    min-height: 65vh;
    padding: 2.5rem 1rem;
  }

  .hero h2 {
    font-size: 2.4rem;
  }

  .archive-grid,
  .stats-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    padding: 0 1rem 2rem;
    margin-top: -1.5rem;
  }

  .site-header {
    padding: 0 1rem;
  }

  .site-logo a {
    font-size: 1.6rem;
  }
}
/* 404 PAGE */

.error-404-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:70vh;
    text-align:center;
}

.error-title{
    font-size:100px;
    font-weight:700;
    color:#2c3e50;
    margin-bottom: 5px;
    margin-top: 5px;
}

.error-subtitle{
    font-size:32px;
    margin-bottom:15px;
    margin-top: 0;
}

.error-text{
    font-size:18px;
    color:#666;
    margin-bottom:25px;
}

.error-button{
    display:inline-block;
    padding:12px 25px;
    background:#0b4d3b;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    transition:0.3s;
}

.error-button:hover{
    background:#116750;
}