/* ------------------------------------------------------------------
   static-clone.css
   Adjustments for the static rebuild. The original itinerary relied on
   jQuery to hide modals, reveal the footer and drive the galleries;
   those scripts are gone, so the equivalent states are set in CSS here.
   ------------------------------------------------------------------ */

/* Modals were opened by JS on demand. With no JS they would render
   inline in the page flow, so keep them out of the document. */
#enquiry-modal,
#enquiry-thanks,
#enquiry-error,
.modal,
.custom_overlay.modal,
#social-sharing.custom_overlay .overlay-content {
  display: none !important;
}

/* The footer's inline `visibility:hidden` was cleared by JS on load. */
#footer.custom_footer {
  visibility: visible !important;
}

/* ------------------------------------------------------------------
   Curuvia logo
   The mark is a transparent SVG whose path is fill="currentColor". Loaded
   through <img> it has no parent to inherit from, so it paints black -
   right for the header, which sits on the pale hero overlay. The footer
   is a mid grey with white text, so the mark is inverted to white there.
   ------------------------------------------------------------------ */

/* The header mark sits over the hero photo; the platform gave the slot no
   backing of its own, so give it the same soft plate the original jpg had
   built into it, and keep it legible over any image. */
#logoName .logo {
  box-sizing: content-box;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 2px;
}

/* brightness(0) crushes the mark to solid black, invert(1) flips it white -
   the standard way to recolour an <img>-loaded SVG without a second file. */
#footer .logos .logo {
  width: 138px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* Enquiry forms are inert in the clone - make that visually honest. */
form[data-static-clone] button,
form[data-static-clone] input[type="submit"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Lightbox pages are standalone documents in the clone rather than
   overlays, so give them the same gutter as a normal content block. */
.lightbox-page {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 16px;
}

/* ------------------------------------------------------------------
   Desktop map (Leaflet — visual parity with Wetu Google map)
   ------------------------------------------------------------------ */
.map-page-title h2 {
  margin: 0;
  padding: 0.55em 0.75em;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.map-stage {
  position: relative;
  width: 100%;
  isolation: isolate;
}

#map {
  width: 100%;
  height: 70vh;
  min-height: 520px;
  z-index: 0;
  background: #cfd8c8;
}

button.map-day-by-day,
button.map-back-overview,
.map-day-nav {
  position: absolute;
  z-index: 1000;
  border: 1px solid #c5c9cc;
  border-radius: 2px;
  background: #f0f1f2;
  color: #333;
  font: 600 13px/1 "Open Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

button.map-day-by-day {
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  min-width: 200px;
  padding: 14px 32px;
}

button.map-day-by-day:hover,
button.map-back-overview:hover,
.map-day-arrow:hover {
  background: #fff;
}

button.map-back-overview {
  display: none;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 12px 28px;
}

.map-day-nav {
  display: none;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  align-items: center;
  gap: 8px;
  min-width: 240px;
  padding: 8px 10px;
}

.map-day-arrow {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #333;
  font: 600 22px/1 "Open Sans", sans-serif;
  cursor: pointer;
}

.map-day-nav-text {
  flex: 1;
  text-align: center;
  padding: 0 8px;
}

.map-day-num {
  font: 700 12px/1.2 "Open Sans", sans-serif;
  letter-spacing: 0.08em;
}

.map-day-label {
  margin-top: 4px;
  font: 600 12px/1.2 "Open Sans", sans-serif;
  letter-spacing: 0.06em;
  color: #555;
}

body.map-day-mode button.map-day-by-day {
  display: none;
}

body.map-day-mode button.map-back-overview,
body.map-day-mode .map-day-nav {
  display: flex;
}

/* Leaflet default .leaflet-div-icon is a white box — kill it for our markers */
.leaflet-div-icon.itinerary-map-marker,
.leaflet-div-icon.itinerary-transport-marker {
  background: transparent !important;
  border: none !important;
}

.leaflet-popup.itinerary-map-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.leaflet-popup.itinerary-map-popup-wrap .leaflet-popup-content {
  margin: 12px 14px 10px;
  min-width: 180px;
}

.itinerary-map-popup-title {
  font: 700 14px/1.2 "Open Sans", sans-serif;
  letter-spacing: 0.02em;
  color: #222;
}

.itinerary-map-popup-kind {
  margin-top: 4px;
  font: 600 11px/1.2 "Open Sans", sans-serif;
  letter-spacing: 0.04em;
  color: #888;
}

.itinerary-map-popup-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #e5e5e5;
}

.itinerary-map-popup-actions a {
  font: 600 12px/1 "Open Sans", sans-serif;
  color: #2376d8 !important;
  text-decoration: none;
}

.itinerary-map-popup-actions a:hover {
  text-decoration: underline;
}

.itinerary-map-error {
  margin: 0;
  padding: 2em 1em;
  text-align: center;
  color: rgba(var(--brand-text-rgb), 0.8);
}

/* ------------------------------------------------------------------
   Swipe galleries
   The platform ships `.swipe` as visibility:hidden and floats each slide
   at width:100%, leaving the jQuery Swipe plugin to reveal the gallery
   and translate between slides. With the scripts gone the slides stay
   invisible and only the container's 432px min-height survives, which
   reads as an empty box.

   Rebuild the same gallery with CSS alone: a horizontal scroll-snap
   strip. Same 432px footprint and one-image-at-a-time framing as the
   original, but scrollable/swipeable instead of script-driven.
   ------------------------------------------------------------------ */
/* `.swipe` stays put and is the positioning context for the arrows;
   `.swipe-wrap` is what actually scrolls. This split matters: the arrows are
   absolutely-positioned children of `.swipe`, so if `.swipe` were the
   scroller they would scroll away with the images. */
.swipe {
  visibility: visible !important;
  position: relative !important;
  height: 432px;
  overflow: hidden !important;
}

.swipe-wrap {
  display: flex !important;
  width: auto !important;
  height: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* the original shows no scrollbar */
}
.swipe-wrap::-webkit-scrollbar { display: none; }

.swipe-wrap > div {
  float: none !important;
  flex: 0 0 100% !important;
  height: 100% !important;
  scroll-snap-align: start;
}

/* Arrows: base.css already supplies their icon, 36x36 size and centred
   inset. They only need lifting above the strip. Driven by gallery.js.
   Do NOT set scroll-behavior:smooth here - gallery.js needs behavior:'auto'
   to mean instant when it cuts across the wrap-around seam. */
.swipe > .image-prev,
.swipe > .image-next { z-index: 2; }

/* ------------------------------------------------------------------
   Consultant panel
   The original panel carried name / phone / email / website. This one adds a
   job title, company and postal address, and two numbers instead of one, so a
   few fields need styling the platform never had to provide.
   ------------------------------------------------------------------ */

/* base.css sets `white-space: nowrap` on the header panel - fine for a single
   phone number, but it would push the postal address out of the box. Let the
   address (and only the address) wrap. */
#header-contact #consultant-detail .address {
  white-space: normal;
  max-width: 22em;
  align-items: flex-start;
  line-height: 1.35;
}
#header-contact #consultant-detail .address i {
  margin-top: 1px;
}

/* Title and company have no icon, so align them with .name's text rather than
   letting them sit flush against the panel edge. */
#consultant-detail .position,
#consultant-detail .company {
  padding-left: 7px;
}
#consultant-detail .position {
  font-style: italic;
  opacity: 0.85;
}
#consultant-detail .company {
  font-weight: 600;
}

/* Keep a little air between the identity lines and the contact rows. */
#consultant-detail .company {
  margin-bottom: 6px;
}

/* The panel is taller now than the platform's 6.5em floor assumed. */
#header #header-contact #contact-details {
  min-width: 330px;
}

/* ------------------------------------------------------------------
   Sub-768 tier - NEWLY AUTHORED, NOT REVERSE-ENGINEERED.
   The original has no styling below 768px at all: it bounced those
   visitors to a separate mobile app instead. This clone has no mobile
   app, so sub-768 is a real destination and needs to be usable.
   This is a deliberate divergence from the original - see README.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Nav labels are <a class="h4">, pinned to 14px by base.css rules that
     match the anchor directly - shrinking body font would NOT touch them.
     The anchor itself has to be targeted. */
  #nav li a { font-size: 12px; padding: 0 6px; }

  body #header, body #headerBar, body #nav,
  body .page-content, body #footer .inner, #contact-div { max-width: 100%; }

  /* base.css forces 640x360 below 899px, which overflows a 375px viewport. */
  body .block-container #company-video { width: 100%; height: auto; }

  /* .swipe is pinned to 432px above (not !important, so this later
     same-specificity rule wins). */
  .swipe { height: 240px; }
}