/* ---------------------------------------------------------------------------
   site.css — additions on top of the legacy style.css / responsive.css.
   Loaded last, so it wins without touching the original files.
   --------------------------------------------------------------------------- */

/* --- Excursions hero ---------------------------------------------------- */
.excursion-hero {
  background-image: url("../images/hero.webp");
  background-position: center;
  background-size: cover;
  /* Transparent chocolate scrim in the brand tone (--primary-color #402e23),
     the same colour as the headings. Not white — that washed the photo out. */
  box-shadow: inset 0 0 0 2000px rgba(64, 46, 35, 0.45);
}
/* The photo is dark and busy, so both the title and the subtitle are painted
   white with a soft drop shadow instead of tinting the image. */
.excursion-hero .hero-content .hero-title,
.excursion-hero .hero-content p {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.excursion-hero .hero-content p {
  font-weight: 600;
}

/* --- Language switcher -------------------------------------------------- */
.nav-item.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}
.lang-switch .lang-link {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #333;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-switch .lang-link:hover {
  background: #f0f0f0;
}
.lang-switch .lang-link.is-current {
  background: var(--orange-color, #e2711d);
  border-color: var(--orange-color, #e2711d);
  color: #fff;
  cursor: default;
}

/* --- Navigation: current page + touch-friendly dropdowns ----------------- */
.navbar-light .navbar-nav .nav-link.active,
.dropdown-item.active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Bootstrap paints .dropdown-item.active bright blue, which has nothing to do
   with this palette. Mark the current entry with the site orange instead. */
.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item:active {
  background-color: transparent;
  color: var(--orange-color, #e2711d);
}

/* A fifth top-level entry (Excursion) plus the language pills no longer fit at
   the legacy 15px padding — "À PROPOS" was wrapping onto a second line. */
@media (min-width: 992px) {
  .navbar-light .navbar-nav .nav-link {
    padding: 0 10px;
    white-space: nowrap;
  }
  .navbar-nav .btn-primary-dark {
    white-space: nowrap;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-light .navbar-nav .nav-link {
    padding: 0 7px;
    font-size: 14px;
  }
}

/* The dropdowns were hover-only, so they never opened on a phone. */
@media (max-width: 991px) {
  .navbar-nav {
    align-items: flex-start !important;
  }
  .nav-item.dropdown > .nav-link::after {
    content: "\25be";
    margin-left: 6px;
    font-size: 12px;
  }
  .nav-item .dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    border: 0;
    border-left: 2px solid var(--orange-color, #e2711d);
    border-radius: 0;
    margin: 4px 0 8px 10px;
    padding: 4px 0 4px 12px;
    background: transparent;
  }
  .nav-item.dropdown:hover .dropdown-menu {
    display: none;                 /* hover means nothing on touch */
  }
  .nav-item.dropdown.open .dropdown-menu {
    display: block;
  }
  .nav-item.lang-switch {
    margin: 10px 0 0 0;
  }
}

/* Long dropdowns (Excursion has up to 8 entries) must not run off screen. */
@media (min-width: 992px) {
  .nav-item .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
    min-width: 240px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  .navbar-nav > .nav-item:nth-last-child(-n + 3) .dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* --- Program page: "Points" list ---------------------------------------- */
.program-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.program-points li {
  position: relative;
  padding: 6px 0 6px 28px;
  line-height: 1.5;
}
.program-points li i {
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--orange-color, #e2711d);
}

/* --- Related programs --------------------------------------------------- */
.related-wrapper .related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 24px;
}
.related-wrapper .related-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.25s ease;
}
.related-wrapper .related-card:hover img {
  transform: translateY(-4px);
}
.related-wrapper .related-card h4 {
  margin-top: 12px;
  font-size: 18px;
  text-align: center;
}

/* --- Home: category grid ------------------------------------------------ */
.category-grid .cat-card {
  display: block;
  position: relative;
  margin-bottom: 24px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.category-grid .cat-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.category-grid .cat-card:hover img {
  transform: scale(1.05);
}
.category-grid .cat-card .cat-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  font-size: 17px;
  font-weight: 700;
}

/* --- Contact form ------------------------------------------------------- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-error {
  padding: 10px 14px;
  border-radius: 6px;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #a1231d;
}

/* --- Floating call / WhatsApp buttons ----------------------------------- */
.float-actions {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.float-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.float-btn i {
  font-size: 18px;
}
.float-call {
  background: #111;
  padding: 14px;
}
.float-wa {
  background: #25d366;
  padding: 14px;
}
.float-btn:hover {
  color: #fff;
  opacity: 0.92;
}
/* Icon-only by default so the buttons never sit on top of body copy; the label
   expands on hover, where there is a pointer to hover with. */
.float-wa span {
  display: none;
  white-space: nowrap;
}
@media (hover: hover) and (min-width: 992px) {
  .float-wa:hover {
    padding: 14px 18px;
  }
  .float-wa:hover span {
    display: inline;
  }
}