/* North West page styles */
body.northwest {
	background: linear-gradient(180deg,#f7f2ff 0%,#ffffff 100%);
	color: #2a1636;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.hero { background: linear-gradient(90deg,#5b2a86 0%,#8b5bd6 100%); color:#fff; padding:22px 16px; text-align:center }
.hero h1{ margin:0; font-size:26px }
.province-content{ max-width:900px; margin:16px auto; padding:12px 18px }
.province-content h2{ color:#5b2a86 }
.districts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; list-style:none; padding:0 }
.districts li{ background:#fff; border:1px solid #f0e8fb; padding:10px; border-radius:6px }
@media(max-width:480px){ .hero h1{ font-size:20px } .province-content{ padding:10px } }

/* North West travel banner styling */
body.northwest .travel-banner-northwest {
  background: linear-gradient(135deg, #5b2a86 0%, #8b5bd6 100%);
  margin: 24px 16px;
  border-radius: 14px;
  padding: 26px 20px;
  color: #f3ecff;
  text-align: center;
}

body.northwest .travel-banner-northwest .banner-content h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.8vw, 2.2rem);
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.35);
}

body.northwest .travel-banner-northwest .banner-content p {
  margin: 0 0 18px;
  font-size: 1.1rem;
  color: rgba(243, 236, 255, 0.92);
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.28);
}

body.northwest .travel-banner-northwest .cta-button {
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: #f3ecff;
  padding: 12px 26px;
  font-weight: 700;
  border-radius: 999px;
  transition: transform 0.25s ease, background 0.25s ease;
}

body.northwest .travel-banner-northwest .cta-button:hover {
  background: rgba(255, 255, 255, 0.42);
  transform: translateY(-2px);
}

/* Ensure nav stays in header and footer stays at bottom for this page */
body.northwest {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* keep header nav at top */
body.northwest .navbar {
  order: 0;
  width: 100%;
}

/* main content grows to push footer to bottom */
body.northwest main,
body.northwest .hero,
body.northwest .districts {
  order: 1;
  flex: 1 0 auto;
}

/* footer fixed to the bottom of the viewport by flex layout */
body.northwest footer {
  order: 2;
  width: 100%;
  flex-shrink: 0;
}