/* ============================================================
   Get Away Travel - leisure facelift
   Loaded ONLY on getaway/*.html, after styles.css.
   Everything is scoped to body.leisure so the corporate site
   is completely unaffected.

   The look: full-bleed photography with translucent "glass"
   content panels floating over it, squared corners, and light
   airy serif headings.
   ============================================================ */

body.leisure {
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-line: rgba(255, 255, 255, .55);
  --sq: 0px;              /* squared corners throughout */

  /* Secondary accent: a cool slate blue that sits opposite the gold
     on the wheel, so the two strengthen each other. Gold stays the
     primary brand colour; slate carries supporting UI.
     --slate-dk is the darkened version for small text (the base
     slate is too light against white for body copy). */
  --slate: #50758D;
  --slate-dk: #3D5A6E;
  --slate-tint: rgba(80, 117, 141, .12);

  background: #F2F0EC;
}

/* ---------- Typography: lighter, airier, more letterspacing ---------- */
body.leisure h1,
body.leisure h2,
body.leisure .section-title {
  font-weight: 500;
  letter-spacing: .5px;
}
body.leisure .section-title { font-size: 40px; }
body.leisure .eyebrow { letter-spacing: 3.2px; }

/* ---------- Buttons: squared, outlined, uppercase ---------- */
body.leisure .btn {
  border-radius: var(--sq);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 15px 30px;
}
/* Outline buttons carry the slate rather than the navy: softer, and it
   keeps a clear visual rank below the gold primary button. */
body.leisure .btn-outline {
  border: 1px solid var(--slate);
  color: var(--slate-dk);
  background: transparent;
}
body.leisure .btn-outline:hover {
  background: var(--slate-dk);
  border-color: var(--slate-dk);
  color: #fff;
}
/* Ghost button for use on photos */
body.leisure .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .9);
  color: #fff;
}
body.leisure .btn-ghost:hover {
  background: rgba(255, 255, 255, .95);
  color: var(--navy);
}

/* ---------- Squared corners across the board ---------- */
body.leisure .card,
body.leisure .photo-card,
body.leisure .login-card,
body.leisure .detail-card,
body.leisure .explore-tile,
body.leisure .vac-card,
body.leisure .season,
body.leisure .trip-breakdown,
body.leisure input,
body.leisure select,
body.leisure textarea {
  border-radius: var(--sq);
}

/* ============================================================
   The signature treatment: photo-backed sections whose content
   sits inside a translucent glass panel.

   Usage in markup:
     <section class="alt-bg" style="--bg:url('...jpg');">
   Any leisure .alt-bg section that defines --bg becomes a
   photo section; without --bg it keeps the old solid tint.
   ============================================================ */
body.leisure section.alt-bg[style*="--bg"] {
  position: relative;
  background: none;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Scrim so light glass panels always read against busy photos */
body.leisure section.alt-bg[style*="--bg"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 28, 42, .34), rgba(18, 28, 42, .44));
}
body.leisure section.alt-bg[style*="--bg"] > .container {
  position: relative;
  z-index: 1;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 26px 70px rgba(10, 18, 30, .26);
  padding: 62px 46px;
  max-width: 1080px;
}

/* Cards sitting inside a glass panel: go more opaque so nested
   translucency doesn't turn muddy. */
body.leisure section.alt-bg[style*="--bg"] .card,
body.leisure section.alt-bg[style*="--bg"] .login-card,
body.leisure section.alt-bg[style*="--bg"] .season {
  background: var(--glass-strong);
  border-color: rgba(190, 154, 93, .3);
  box-shadow: 0 6px 22px rgba(10, 18, 30, .1);
}

/* ---------- Standalone glass panel (for use on any photo section) ---------- */
body.leisure .glass-panel {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 26px 70px rgba(10, 18, 30, .26);
  padding: 54px 44px;
}

/* ---------- Hero: lighter type, squared ghost button ---------- */
body.leisure .hero h1,
body.leisure .hero-modern h1 { font-weight: 500; letter-spacing: .5px; }
body.leisure .hero .btn-gold { border-radius: var(--sq); }

/* ============================================================
   Slate as the supporting accent.
   Gold keeps the hero moments (primary buttons, section rules,
   eyebrows); slate handles the quieter structural work so the
   palette has a cool counterweight instead of gold everywhere.
   ============================================================ */

/* Hairline borders pick up a hint of the slate */
body.leisure .card,
body.leisure .login-card,
body.leisure .detail-card,
body.leisure .vac-card,
body.leisure .season,
body.leisure .trip-breakdown {
  border-color: rgba(80, 117, 141, .26);
}
body.leisure .card:hover {
  border-color: var(--slate);
}

/* Small caps labels inside cards: slate instead of a second gold */
body.leisure .vac-where,
body.leisure .season h4 {
  color: var(--slate-dk);
}

/* Meta chips / pills read as cool, so gold stays the thing you notice */
body.leisure .vac-meta span {
  background: var(--slate-tint);
  border-color: rgba(80, 117, 141, .3);
  color: var(--slate-dk);
}

/* Glass panel edge: a slate-tinted line reads sharper on photography
   than pure white, without darkening the panel. */
body.leisure section.alt-bg[style*="--bg"] > .container,
body.leisure .glass-panel {
  border-color: rgba(80, 117, 141, .38);
}

/* Form focus rings move to slate so they don't imply a gold CTA */
body.leisure input:focus,
body.leisure select:focus,
body.leisure textarea:focus {
  outline: none;
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(80, 117, 141, .18);
}

/* Inline links in body copy */
body.leisure .container p > a:not(.btn) {
  color: var(--slate-dk);
  text-decoration-color: rgba(80, 117, 141, .45);
}

/* ============================================================
   Contact CTA as a bubble.
   Drops to its own line beneath the nav, right-aligned so it sits
   under the Advisors pill. Fully rounded, which reads as a friendly
   counterpoint to the squared corners everywhere else.
   ============================================================ */
body.leisure .nav-cta {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;   /* the trimmed nav fits one row, so
                                  Advisors sits at the right end and the
                                  bubble hangs directly beneath it */
  margin-top: -2px;
}

body.leisure .bubble-btn {
  padding: 13px 34px;
  border-radius: 999px;   /* overrides the squared --sq for this one element */
}

body.leisure .bubble-btn:hover {
  box-shadow: 0 10px 22px rgba(13, 21, 32, .24);
}

@media (max-width: 700px) {
  body.leisure .nav-cta { justify-content: center; margin-top: 2px; }
}

/* ---------- Advisors nav pill ----------
   Was terracotta red, which read as an alert rather than an invitation.
   Slate keeps it distinct from the plain nav links while sitting inside
   the palette, and the gold "Now Accepting" badge pops against it. */
body.leisure nav.main-nav a.nav-advisors {
  background: var(--slate);
  border-radius: var(--sq);
}
body.leisure nav.main-nav a.nav-advisors:hover {
  background: var(--slate-dk);
}
body.leisure .hiring-badge {
  border-radius: var(--sq);
}

/* ---------- Photo cards: cleaner caption plate ---------- */
body.leisure .photo-card .overlay {
  background: linear-gradient(to top, rgba(10, 18, 30, .82), rgba(10, 18, 30, .05));
}
body.leisure .photo-card .tag {
  border-radius: var(--sq);
  letter-spacing: 1.6px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.leisure section.alt-bg[style*="--bg"] > .container { padding: 44px 26px; }
  body.leisure .glass-panel { padding: 38px 24px; }
  body.leisure .section-title { font-size: 32px; }
  /* fixed attachment is janky on mobile browsers */
  body.leisure section.alt-bg[style*="--bg"] { background-attachment: scroll; }
}
@media (max-width: 560px) {
  body.leisure section.alt-bg[style*="--bg"] > .container { padding: 32px 18px; }
  body.leisure .btn { padding: 13px 22px; }
}

/* Respect reduced-motion / older browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.leisure section.alt-bg[style*="--bg"] > .container,
  body.leisure .glass-panel { background: rgba(255, 255, 255, .92); }
}