/* ==========================================================================
   Hero journey enquiry bar — a slim, very translucent bar over the hero film.
   Reuses the planner's .jv-field styling (label above a hairline input).
   Homepage only.

   Placement: bottom-left, alongside the fixed call/WhatsApp stack, with the
   bar's bottom edge level with the lower contact button (bottom:32px). Its
   right edge stops short of the film's "Sound On" control. On phones there is
   no room beside the stack, so the bar sits just above it instead.
   No outline: the glass edge is defined by the blur alone.
   ========================================================================== */

.hero-enquiry{
  --he-left: 98px;                                  /* 32px margin + 42px icon + 24px gap */
  --he-right: calc(clamp(24px,4vw,64px) + 104px + 24px); /* clears the Sound On control, even when a translated label wraps */
  position:absolute;
  left:var(--he-left);
  right:var(--he-right);
  max-width:1000px;
  bottom:32px;                                      /* = bottom of the lower contact button */
  z-index:2;
  background:linear-gradient(to top, rgba(17,19,21,0.26), rgba(17,19,21,0.06));   /* clear at the top edge, a little depth where the type sits */
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  border:0;
  padding:7px 16px 8px;
  animation:heIn 0.9s ease 0.6s both;
}
/* While a field is in use the bar (and its suggestion list) sits above the sound icon. */
.hero-enquiry:focus-within{z-index:4;}
@keyframes heIn{from{opacity:0;} to{opacity:1;}}

.hs-icon{display:none;}              /* desktop/tablet keep the "Sound On" text */
.hero-sound-toggle{max-width:104px; white-space:normal; line-height:1.4;}   /* longer translated labels wrap instead of growing into the bar */
.he-fields{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,0.72fr) auto;
  gap:0 20px;
  align-items:end;
}

/* Manrope (brand book: practical information, labels, controls) for the bar, the
   film's Sound control and the header Contact control. */
.hero-enquiry .jv-field span,
.hero-enquiry .jv-field input,
.hero-enquiry .jv-field select,
.he-status,
.he-suggestions .jv-location-suggestion,
.hero-sound-toggle,
.nav-contact-btn,
.nav-contact-opt{font-family:'Manrope','Inter',sans-serif;}
.hero-enquiry .jv-field span{font-weight:500;}

/* Field look comes from the planner's .jv-field; here it is quieter and tighter.
   A soft text shadow (not a heavier tint) keeps everything legible over footage. */
.hero-enquiry .jv-field{gap:2px;}
.hero-enquiry .jv-field span{font-size:8.5px; letter-spacing:0.16em; color:rgba(241,240,236,0.86); text-shadow:0 1px 8px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.5);}
.hero-enquiry .jv-field input,
.hero-enquiry .jv-field select{
  font-size:13px; font-weight:500; padding:3px 0 5px;
  color:rgba(241,240,236,0.95);
  border-bottom-color:rgba(241,240,236,0.34);
  text-shadow:0 1px 10px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.5);
}
.hero-enquiry .jv-field input::placeholder{color:rgba(241,240,236,0.72);}
.hero-enquiry .jv-field input:focus,
.hero-enquiry .jv-field select:focus{border-bottom-color:#F1F0EC;}
.hero-enquiry .jv-field select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:transparent;
}
.hero-enquiry .jv-field select option{color:#0A0908; background:#F1F0EC;}
.hero-enquiry .jv-field input[aria-invalid="true"],
.hero-enquiry .jv-field select[aria-invalid="true"]{border-bottom-color:#d9926a;}

/* Low-profile CTA: short, small bold type, a fine understated hairline. */
.he-cta{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:28px;
  padding:0 13px;
  background:transparent;
  color:#F1F0EC;
  text-shadow:0 1px 8px rgba(0,0,0,0.75);
  border:1px solid #8E755A;      /* brand Bronze, fine and muted */
  font:700 9px/1.2 'Manrope','Inter',sans-serif;
  letter-spacing:0.14em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:color 0.3s, background 0.3s, border-color 0.3s;
}
.he-cta:hover{color:#F1F0EC; background:#8E755A; border-color:#8E755A;}
.he-cta:focus-visible{outline:1px solid rgba(243,239,230,0.85); outline-offset:3px;}
.he-cta-arrow{display:inline-block;}

/* Validation / suggestions — appears just above the bar, never inside the film's subject area. */
.he-status{
  position:absolute;
  left:0; right:0; bottom:calc(100% + 8px);
  margin:0;
  font:500 11px/1.5 'Manrope','Inter',sans-serif;
  letter-spacing:0.02em;
  color:#F1F0EC;
  text-shadow:0 1px 10px rgba(0,0,0,0.85);
  pointer-events:none;
}
.he-status:empty{display:none;}
.he-status.is-error{color:#f0c3a5;}
/* Airport suggestions: a compact Carbon panel anchored to the active field. It opens upward from
   the bar (which sits at the bottom of the hero) so it is never clipped. Position/size set in JS.
   Brand book v03: Carbon panel, Chalk names, Silver details, Graphite edge/dividers, Bronze only
   as a tiny selected/focused tick. Manrope throughout. */
.he-suggestions{
  position:absolute;
  bottom:calc(100% + 6px);
  z-index:5;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:#111315;
  border:1px solid #51575A;
  border-radius:2px;
  box-shadow:none;
  font-family:'Manrope','Inter',sans-serif;
  color:#F1F0EC;
  scrollbar-width:thin; scrollbar-color:#51575A transparent;
}
.he-suggestions[hidden]{display:none;}
.he-sug-head{
  padding:9px 14px 7px;
  font-size:9px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:#BFC2C3;
  border-bottom:1px solid rgba(81,87,90,0.55);
}
.he-sug-head.is-error{color:#F1F0EC; text-transform:none; letter-spacing:0.01em; font-size:12px; font-weight:500;}
.he-opt{
  position:relative;
  display:block;
  min-height:44px; padding:9px 14px 9px 16px;
  cursor:pointer; touch-action:manipulation;
  border-top:1px solid rgba(81,87,90,0.55);
}
.he-opt:first-child{border-top:0;}
.he-sug-head + .he-opt{border-top:0;}
.he-opt-name{display:block; font-size:13.5px; font-weight:600; line-height:1.3; color:#F1F0EC; overflow-wrap:anywhere;}
.he-opt-sub{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:2px; font-size:11px; font-weight:400; line-height:1.4; color:#BFC2C3;}
.he-opt-code{font-weight:600; letter-spacing:0.12em; color:#BFC2C3;}
.he-opt:hover{background:rgba(241,240,236,0.04);}
.he-opt[aria-selected="true"]{background:rgba(241,240,236,0.07);}
/* the one small bronze mark: selected / keyboard-focused option */
.he-opt[aria-selected="true"]::before{content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px; background:#8E755A;}
html[dir="rtl"] .he-opt{padding:9px 16px 9px 14px;}
html[dir="rtl"] .he-opt[aria-selected="true"]::before{left:auto; right:0;}
.he-opt-free{font-size:12.5px; font-weight:500; line-height:1.45; color:#F1F0EC; padding:12px 14px 12px 16px;}
.he-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* Longer translated CTA labels (e.g. "Commencez votre voyage") get a little less
   padding/tracking on mid-width desktops so the four fields keep their room. */
@media (min-width:901px) and (max-width:1180px){
  .he-fields{gap:0 14px;}
  .he-cta{padding:0 11px; letter-spacing:0.1em; gap:6px;}
}

/* Selectors below are prefixed .hero-enquiry on purpose: styles.css sets
   .jv-field:nth-of-type(3|4){grid-column:…} for the planner, which would otherwise win. */
/* ---- 601–900px: two compact rows, still beside the contact stack ----
   Row 1: From | To.  Row 2: Date | Travellers | CTA. */
@media (max-width:900px){
  .hero-enquiry{padding:7px 12px 8px;}
  .he-fields{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:8px 8px;
  }
  .hero-enquiry .he-from{grid-column:1 / 7;}
  .hero-enquiry .he-to{grid-column:7 / 13;}
  .hero-enquiry .he-date{grid-column:1 / 6;}
  .hero-enquiry .he-travellers{grid-column:6 / 9;}
  .hero-enquiry .he-cta{grid-column:9 / 13; padding:0 8px; width:100%; white-space:normal; text-align:center; line-height:1.2; letter-spacing:0.08em; font-size:9px; gap:5px;}
}

/* ---- Phones (≤600px) ----
   The call/WhatsApp stack moves into a small Contact control in the header, so
   the bar can sit low in the frame, just above Sound On. Fields stay in two
   compact columns (From|To, Date|Travellers) with a slim CTA beneath. */
/* ---- Phones: sound becomes a speaker icon, floating just above the bar ---- */
@media (max-width:600px){
  .hero-film-controls{
    left:auto; right:12px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px) + var(--he-h, 113px) + 6px);
    display:block;
  }
  .hero-sound-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; min-width:44px; min-height:44px; max-width:none;
    margin:0; padding:0;
    border-radius:50%;
    background:rgba(17,19,21,0.28);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    color:#F1F0EC;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,0.6));
  }
  .hero-sound-toggle .hs-icon{display:none; width:22px; height:22px;}
  .hero-sound-toggle[data-sound="off"] .hs-icon-off,
  .hero-sound-toggle[data-sound="on"] .hs-icon-on{display:block;}
  /* The label stays for screen readers (and in the DOM for translation) but is not drawn. */
  .hero-sound-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  /* Out of the way while the airport list is open, so the two never overlap. */
  .hero:has(.hero-enquiry:focus-within) .hero-sound-toggle{opacity:0; pointer-events:none;}
  html[dir="rtl"] .hero-film-controls{right:auto; left:12px;}
  html[dir="rtl"] .hero-sound-toggle{margin:0 !important;}
}

@media (max-width:600px){
  .contact-mark{display:none;}
  .hero-enquiry{
    --he-left:16px; --he-right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));   /* small even gap above the browser controls / safe area */
    padding:5px 12px 6px;
    background:linear-gradient(to top, rgba(17,19,21,0.17), rgba(17,19,21,0.03));
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  .he-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px 14px;
    align-items:end;
  }
  .hero-enquiry .he-from,
  .hero-enquiry .he-to,
  .hero-enquiry .he-date,
  .hero-enquiry .he-travellers{grid-column:auto;}
  .hero-enquiry .jv-field{gap:0;}
  .hero-enquiry .jv-field span{font-size:8px; letter-spacing:0.12em; line-height:1.2; color:rgba(241,240,236,0.92); text-shadow:0 1px 6px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.7);}
  /* 16px stops iOS from zooming the page when a field is focused. */
  .hero-enquiry .jv-field input,
  .hero-enquiry .jv-field select{
    font-size:16px; line-height:1.2; padding:1px 0 3px; height:24px; box-sizing:border-box;
    color:#F1F0EC;
    border-bottom-color:rgba(241,240,236,0.45);
    text-shadow:0 1px 6px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.75);
  }
  .hero-enquiry .jv-field input::placeholder{color:rgba(241,240,236,0.85);}
  /* Date: keep the value, the dd/mm/yyyy placeholder and the calendar icon clearly visible over footage. */
  .hero-enquiry .he-date input{color-scheme:dark;}
  .hero-enquiry .he-date input::-webkit-datetime-edit,
  .hero-enquiry .he-date input::-webkit-datetime-edit-fields-wrapper{color:#F1F0EC; opacity:1;}
  .hero-enquiry .he-date input::-webkit-calendar-picker-indicator{opacity:0.9; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.9));}
  /* Compact single-line CTA: short, slightly bolder, very fine muted champagne line. */
  .hero-enquiry .he-cta{
    grid-column:1 / 3; min-height:26px; margin-top:3px; padding:0 10px;
    font-size:9px; font-weight:700; letter-spacing:0.12em; line-height:1;
    white-space:nowrap; gap:0;
    border:1px solid #8E755A;
    background:transparent;
  }
  .hero-enquiry .he-cta:hover{border-color:#8E755A;}
  .he-cta-arrow,
  html[dir="rtl"] .he-cta-arrow{display:none;}
}
@media (max-width:380px){
  .hero-enquiry{padding:5px 10px 6px;}
  .he-fields{gap:3px 10px;}
  .hero-enquiry .he-cta{padding:0 6px; letter-spacing:0.08em;}
}

/* A very short viewport can't hold the bar and the film: keep it tight. */
@media (max-height:480px) and (orientation:landscape){
  .hero-enquiry{padding:6px 12px;}
}

/* ---- Header Contact control (phones only) ----
   Replaces the fixed call/WhatsApp stack below 601px. Sits in the nav's right
   cell beside the language selector; tap shows both actions. */
.nav-tools{
  grid-column:3;
  justify-self:end;
  display:flex; align-items:center; gap:2px;
  position:relative;
  z-index:2;
}
.nav-contact{position:relative; display:none;}
.nav-contact-btn{
  display:inline-flex; align-items:center;
  min-width:44px; min-height:44px; padding:0 6px;
  background:none; border:0; cursor:pointer;
  color:var(--off-white, #F1F0EC);
  font-weight:600; font-size:10px; line-height:1;
  letter-spacing:0.14em; text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,0.9);
  transition:color .25s;
}
.nav-contact-btn:hover,
.nav-contact.is-open .nav-contact-btn{color:#BFC2C3;}
.nav-contact-btn:focus-visible,
.nav-contact-opt:focus-visible{outline:1px solid rgba(243,239,230,0.85); outline-offset:3px;}
.nav-contact-menu{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:132px; margin:0; padding:4px 0; list-style:none;
  background:rgba(17,19,21,0.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,75,0.34);
}
.nav-contact-menu[hidden]{display:none;}
.nav-contact-opt{
  display:flex; align-items:center; min-height:44px; padding:0 18px;
  color:rgba(241,240,236,0.9); text-decoration:none;
  font-weight:500; font-size:13px; line-height:1; letter-spacing:0.02em;
}
.nav-contact-opt:hover{color:#BFC2C3; background:rgba(241,240,236,0.05);}
@media (max-width:600px){
  .nav-contact{display:block;}
}
html[dir="rtl"] .nav-contact-menu{right:auto; left:0;}

@media (prefers-reduced-motion: reduce){
  .hero-enquiry{animation:none; transition:none;}
  .he-cta, .nav-contact-btn{transition:none;}
}