/* Fly fishing stacked layout: full-width text on top, three-column row below */
.flyfishing-stack{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.flyfishing-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.flyfishing-row .section-slider .slider{ height: 100%; width: 100%; }
.flyfishing-row .package{ margin: 0; }

@media (max-width: 991px){
  .flyfishing-row{ grid-template-columns: 1fr; gap: 20px; }
}

/* Desktop: place price badge at bottom of package box */
@media (min-width: 992px){
  .flyfishing-row .package{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .flyfishing-row .package .price-badge{
    margin-top: auto;
  }
}
/* Fly fishing packages row: two columns on desktop, one on mobile */
.packages-row{
  max-width: 1400px;
  margin: 24px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 991px){
  .packages-row{ grid-template-columns: 1fr; gap:20px; }
}
/* ===== CSS RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  /* make body text a bit larger for readability */
  font-size: 18px;
  color: #333;
  overflow-x: hidden;
}

/* Global visual tokens */
html, body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
:root{
  --brand-blue: #061923;
  --accent: #EFFF00; /* yellow accent */
  --muted: #6b7280;
  --card-radius: 18px;
}

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

/* ===== NAVIGATION ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(rgba(6, 25, 35, 0.9), rgba(6, 25, 35, 0.9));
  backdrop-filter: blur(10px);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
}

.nav-brand {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  text-decoration: none;
  padding: 20px 0;
  letter-spacing: 1px;
}

.nav-lang-btn {
  color: var(--brand-blue);
  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
}

.nav-lang-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg,var(--accent), #ffffff);
  box-shadow: 0 12px 36px rgba(6,25,35,0.32);
}

.nav-menu {
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-link {
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  padding: 20px;
  transition: opacity 0.3s;
}

.nav-link:hover {
  opacity: 0.8;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.nav-toggle span {
  width: 25px;
  height: 3px;
  background: #EFFF00;
  transition: all 0.3s;
}

/* Desktop: move language button to far right */
@media (min-width: 768px){
  .nav-brand{ order: 1; }
  .nav-menu{ order: 2; }
  .nav-lang-btn{ order: 3; margin-left: auto; }
  /* Center nav links between brand (left) and language (right) */
  .nav-container{ position: relative; }
  .nav-menu{ position: absolute; left:50%; transform: translateX(-50%); }
}

/* ===== HERO SECTION ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* use a dark -> transparent backdrop; an overlay (::after) places the white fade lower so it doesn't touch the centered hero text */
  background: linear-gradient(180deg, rgba(6,25,35,0.95) 0%, rgba(6,25,35,0.85) 100%), url('../img/hero-20page.png');
  background-size: cover;
  background-position: center;
  /* remove parallax so the fade stays visually aligned on scroll */
  background-attachment: scroll;
  /* keep content centered above the background and overlay */
  position: relative;
  padding: 120px 20px 0px;
}

.hero-content {
  text-align: center;
  max-width: 900px;
}

.hero-title {
  color: #fff;
  /* slightly larger hero title */
  font-size: clamp(34px, 9vw, 58px);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

/* decorative subtle underline for hero */
.hero-title::after{
  content: '';
  display: block;
  margin: 18px auto 0;
  width: 72px;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg,var(--accent), rgba(255,255,255,0.9));
  opacity: 0.9;
}

/* Hero CTA button */
.hero-cta{
  display:inline-block;
  background: linear-gradient(90deg,var(--accent), #ffffff);
  color: var(--brand-blue);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(6,25,35,0.32);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.hero-cta:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(6,25,35,0.38); }

/* NAV visual polish: thinner navbar, softer backdrop */
.nav-container { min-height: 72px; }
.navbar { background: linear-gradient(rgba(6,25,35,0.82), rgba(6,25,35,0.82)); }
.nav-brand{ font-size: 28px; }

/* Input focus and accessibility improvements */
.contact-form input:focus, .contact-form textarea:focus, .nav-toggle:focus, .slider-btn:focus, .hero-cta:focus, .btn-submit:focus{
  outline: 3px solid rgba(239,255,0,0.22);
  outline-offset: 3px;
  box-shadow: 0 12px 36px rgba(6,25,35,0.24);
}

/* improved subtle card backgrounds */
.package{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

/* smaller util for icon spacing */
.muted { color: var(--muted); }

/* A subtle bottom overlay that fades to white. Control `height` to move the fade up/down. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* adjust this height to move the fade lower (larger -> further from center) */
  height: 18%;
  pointer-events: none;
  z-index: 1; /* below content but above background */
  background: linear-gradient(180deg, rgba(6,25,35,0) 0%, rgba(255,255,255,0.98) 90%, #ffffff 100%);
}

/* ensure hero content renders above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
}

/* ===== SECTIONS ===== */
.section {
  padding: 60px 20px;
  scroll-margin-top: 90px; /* nicer anchor jumps under fixed navbar */
}

.section-dark {
  background: #061923;
  color: #fff;
}

/* Fly-fishing section (id="1") visual tweak
   - background should be white
   - the text area should be a blue bubble with white text
   - slider borders and package bubbles use the same blue (#061923) instead of the yellow accent
*/
.section[id="1"] {
  background: #fff; /* white background for the section */
  color: #061923; /* default text color outside bubble */
}

/* Slider dots / indicators */
.slider-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 10px;
  z-index: 20;
}
.slider-dot{
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: rgba(255,255,255,0.8); /* improved contrast on dark images */
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, width .15s ease, box-shadow .12s ease;
}
.slider-dot:hover{ transform: scale(1.08); box-shadow: 0 10px 20px rgba(0,0,0,0.18); }
.slider-dot.active{
  width: 28px;
  background: linear-gradient(90deg,var(--accent), #fff);
  transform: translateY(-2px);
}
.slider-dot:focus{ outline: none; box-shadow: 0 6px 18px rgba(6,25,35,0.28); }

.section[id="1"] .section-text {
  background: #061923; /* blue bubble */
  color: #fff; /* text inside the bubble is white */
  padding: 28px; /* breathing room */
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(6,25,35,0.38), inset 0 -6px 18px rgba(0,0,0,0.12);
}

/* Fly fishing 2x2 grid layout */
.flyfishing-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px; /* balanced space between columns */
  row-gap: 8px;     /* tighter vertical spacing */
  align-items: start;
}

.flyfishing-grid .section-slider { grid-column: 2; }
.flyfishing-grid .packages-right {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; /* small gap between the two packages */
}
.flyfishing-grid .packages-right-item { margin: 0; }

/* Ensure grid items don't add extra gaps */
.flyfishing-grid .section-slider,
.flyfishing-grid .package,
.flyfishing-grid .section-text {
  margin: 0;
}

.section-light {
  background: #fff;
  color: #061923;
}

/* Reduce vertical gaps for the very bottom Contact section (id=6) to make the page end tighter */
.section[id="6"] {
  padding-top: 36px; /* smaller top gap */
  padding-bottom: 36px; /* smaller bottom gap */
}

.section-rafting {
  background: #061923;
  color: #fff;
}

/* Rafting price: amount + note. Keep the amount prominent, and pin the note to the bottom of the text column.
   On mobile the amount is shown normally and the note remains at bottom of the text block below content. */
.section-rafting .section-text{ position: relative; padding-bottom: 8px; }
.section-rafting .price-badge{
  display: inline-block;
  background: var(--accent);
  color: var(--brand-blue);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 22px; /* larger base size */
  margin-top: 14px;
  text-align: center;
}
.section-rafting .price-badge .price-amount{ display:block; font-size:22px; line-height:1; }
.section-rafting .price-badge .price-note{ display:block; font-size:22px; font-weight:700; color:var(--brand-blue); opacity:0.95; margin-top:4px; line-height:1; }

.section-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.section-grid.section-reverse {
  direction: rtl;
}

.section-grid.section-reverse > * {
  direction: ltr;
}

.section-text h2 {
  /* bigger section headers so they read larger than paragraphs */
  font-size: clamp(30px, 5.5vw, 44px);
  font-weight: 800;
  margin-bottom: 16px;
}

.section-text p {
  /* make paragraph text a touch bigger for readability */
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.8;
}

.section-text .price {
  color: #EFFF00;
  font-size: 26px;
  font-weight: 800;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.92));
  padding: 6px 12px;
  display: inline-block;
  border-radius: 10px;
}

/* Make the rafting price badge highly readable on dark background */
.section-rafting .price {
  background: var(--accent);
  color: var(--brand-blue);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 12px;
}

.section-image {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center;
  border: 5px solid #EFFF00;
  border-radius: 20px;
}

/* ===== SLIDER ===== */
.section-slider {
  position: relative;
}

/* Generic price badge (used in multiple sections) */
.price-badge{
  display: inline-block;
  background: var(--accent);
  color: var(--brand-blue);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 20px;
  margin-top: 12px;
  text-align: center;
  border: 2px solid rgba(6,25,35,0.08);
  box-shadow: 0 8px 20px rgba(6,25,35,0.16);
}
.price-badge .price-amount{ display:block; line-height:1; }
.price-badge .price-note{ display:block; line-height:1; opacity:0.95; }

.slider {
  position: relative;
  width: 100%;
  height: 500px;
  border: 6px solid var(--brand-blue);
  border-radius: 20px;
  overflow: hidden;
}

.section[id="1"] .slider,
.section[id="1"] .section-image {
  border-color: #061923; /* use the same blue for slider / image borders in fly-fishing section */
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}

.slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative; /* allow slide overlay pseudo-element */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle overlay gradient for improved legibility */
.slide::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  pointer-events: none;
}

/* Placeholder / fallback when background image fails to load */
.slide.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9eef0;
  color: #6b7280;
  font-weight: 700;
  font-size: 20px;
}

/* Slight visibility improvement when an image has loaded */
.slide.loaded {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(6,25,35,0.92), rgba(6,25,35,0.6));
  border: none;
  color: #fff;
  font-size: 40px;
  width: 56px; /* slightly larger for clarity */
  height: 56px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.25s, transform 0.12s, box-shadow 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(6,25,35,0.45);
}

.slider-btn:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 12px 30px rgba(6,25,35,0.55);
}

.slider-prev {
  left: 10px;
}

.slider-prev::before {
  content: '‹';
}

.slider-next {
  right: 10px;
}

.slider-next::before {
  content: '›';
}

/* ===== PACKAGES ===== */
.packages {
  max-width: 1400px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.package {
  background: transparent;
  padding: 30px;
  border: 3px solid var(--accent); /* default accent for global packages remains yellow */
  border-radius: var(--card-radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* For the fly-fishing packages specifically switch to blue bubble with white text */
.section[id="1"] .package {
  background: #061923;
  border-color: #061923;
}

.section[id="1"] .package h3,
.section[id="1"] .package p {
  color: #fff;
}

.package h3 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #fff;
}

.package p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.8;
}

/* lift packages on hover */
.package:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(6,25,35,0.18); }

/* ===== FORM ===== */
.section-form {
  width: 100%;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}

.contact-form label {
  color: #061923;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #061923;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.btn-submit {
  background: linear-gradient(90deg,var(--brand-blue), rgba(6,25,35,0.9));
  color: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(6,25,35,0.36);
}

.form-success,
.form-error {
  padding: 15px;
  border-radius: 10px;
  margin-top: 15px;
  text-align: center;
}

.form-success {
  background: #d4edda;
  color: #155724;
}

.form-error {
  background: #f8d7da;
  color: #721c24;
}

/* ===== FOOTER ===== */
.footer {
  background: #061923;
  color: #fff;
  text-align: center;
  /* make this final block more compact */
  padding: 16px 18px; /* smaller vertical spacing */
}

.footer h2 {
  font-size: 28px; /* smaller heading for a compact footer */
  font-weight: 800;
  font-family: Montserrat, sans-serif;
  margin: 0; /* remove extra space around */
}

/* subtle footer polish */
.footer{ box-shadow: 0 -10px 40px rgba(6,25,35,0.36); }

/* ===== RESPONSIVE: TABLET ===== */
@media (max-width: 991px) {
  .section-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .flyfishing-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .section-grid.section-reverse {
    direction: ltr;
  }
  
  .section-image {
    height: 400px;
  }
  
  .slider {
    height: 400px;
  }
  
  .packages {
    gap: 30px;
  }
}

/* ===== DESKTOP: FLY FISHING EQUAL HEIGHTS ===== */
@media (min-width: 992px) {
  /* Ensure text and slider sit side-by-side with matching heights */
  .section[id="1"] .section-grid {
    align-items: stretch;
    gap: 36px;
  }
  .section[id="1"] .section-text,
  .section[id="1"] .section-slider {
    min-height: 500px; /* match slider's default height */
  }
  /* Keep the text bubble layout without overflow issues */
  .section[id="1"] .section-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* ===== RESPONSIVE: MOBILE ===== */
@media (max-width: 767px) {
  /* Mobile: place EN just left of hamburger */
  .nav-brand{ order: 1; }
  .nav-lang-btn{ order: 2; position: static; transform: none; margin-left: auto; margin-right: 10px; }
  .nav-toggle{ order: 3; }
  .nav-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: #061923;
    flex-direction: column;
    padding: 20px;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
  .nav-menu.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  
  .nav-toggle {
    display: flex;
  }
  
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  .hero {
    padding: 140px 20px 40px;
  }
  
  .hero-title {
    font-size: 36px;
    line-height: 1.3;
  }
  
  .section {
    padding: 40px 15px;
  }

  /* On mobile make contact section spacing slightly tighter too */
  .section[id="6"] {
    padding-top: 24px; /* less top space on mobile */
    padding-bottom: 24px; /* less bottom space on mobile */
  }
  
  .section-text h2 {
    font-size: 28px;
  }
  
  .section-text p {
    font-size: 18px;
  }
  
  .section-image {
    height: 300px;
  }
  
  .slider {
    height: 300px;
  }
  
  .packages {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .package h3 {
    font-size: 28px;
  }
  
  .package p {
    font-size: 18px;
  }

  /* Mobile: keep the badge inline and increase spacing for readability */
  .section-rafting .section-text{ padding-bottom: 20px; }
  .section-rafting .price-badge{ padding:12px 18px; font-size:20px; }
  .section-rafting .price-badge .price-amount{ font-size:20px; }
  .section-rafting .price-badge .price-note{ font-size:20px; opacity:0.98; color:var(--brand-blue); }
}

/* ===== RESPONSIVE: SMALL MOBILE ===== */
@media (max-width: 479px) {
  .nav-brand { font-size: 24px; }
  .nav-lang-btn { padding: 5px 15px; font-size: 14px; }
  .hero-title { font-size: 28px; }
  .section-text h2 { font-size: 24px; }
  .section-text p, .contact-form label { font-size: 16px; }
  .section-image, .slider { height: 250px; }
  .package h3 { font-size: 24px; }
  .package p { font-size: 16px; }

  /* make footer even smaller on very small devices */
  .footer { padding: 10px 12px; }
  .footer h2 { font-size: 20px; }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  animation: fadeIn 0.6s ease-out;
}

/* ===== UTILITIES ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}