/* ==========================================================================
   polish.css — modern refinement layer (2026-07-28)

   Loaded LAST, after css/style.css (Bootstrap 4.5 + the original theme).
   Nothing in the vendor stylesheet is edited; everything here is additive so a
   Bootstrap or theme update cannot silently revert it, and deleting this one
   file returns the site exactly to how it looked before.

   Brand orange is #f15d30, taken from the existing theme, not invented.
   ========================================================================== */

:root {
  --wt-orange: #f15d30;
  --wt-orange-dark: #d94a20;
  --wt-ink: #1c2733;
  --wt-muted: #5d6b7a;
  --wt-line: rgba(28, 39, 51, .12);
  --wt-radius: 12px;
  --wt-radius-sm: 8px;
  --wt-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --wt-shadow-2: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 24px rgba(16, 24, 40, .10);
  --wt-shadow-3: 0 8px 16px rgba(16, 24, 40, .08), 0 24px 48px rgba(16, 24, 40, .14);
  --wt-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Typography — the theme sets sizes but never tunes rendering or rhythm.
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--wt-ink);
}

h1, h2, h3, h4, h5, h6, .heading-section h2 {
  letter-spacing: -.018em;
  text-wrap: balance;           /* no orphaned last word in a headline */
}

p, .text p, li {
  text-wrap: pretty;
}

/* Long body copy reads badly at full container width on desktop. */
.ftco-section p:not(.breadcrumbs):not(.small),
.heading-section p {
  max-width: 68ch;
}
.text-center p, .heading-section.text-center p { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   2. Focus states — the theme removes outlines and never replaces them, so
      keyboard users had no visible focus anywhere on the site. :focus-visible
      keeps mouse clicks clean while restoring a real indicator for tab users.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--wt-orange);
  outline-offset: 2px;
  border-radius: var(--wt-radius-sm);
}
/* Bootstrap's own glow is redundant next to the outline above. */
.btn:focus, .btn.focus { box-shadow: none; }

/* Skip link (markup injected server-side) — visible only when focused. */
.wt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--wt-ink);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--wt-radius-sm) 0;
}
.wt-skip-link:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--wt-radius-sm);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .18s var(--wt-ease), box-shadow .18s var(--wt-ease),
              background-color .18s var(--wt-ease), border-color .18s var(--wt-ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background-color: var(--wt-orange);
  border-color: var(--wt-orange);
  box-shadow: var(--wt-shadow-1);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--wt-orange-dark);
  border-color: var(--wt-orange-dark);
  box-shadow: var(--wt-shadow-2);
}
.btn.rounded-pill { border-radius: 999px; }

/* The theme ships several buttons with near-invisible text on light fills. */
.btn-secondary { background-color: var(--wt-ink); border-color: var(--wt-ink); }
.btn-secondary:hover { background-color: #101a24; border-color: #101a24; }

/* --------------------------------------------------------------------------
   4. Cards / package tiles
      .project-wrap is the deal tile: a background-image block with a white
      panel pulled up over it. It had a flat drop shadow and no hover state.
   -------------------------------------------------------------------------- */
/* Scoped with :has(.img) on purpose. footer.php reuses .project-wrap as a plain layout
   wrapper for the orange "We Are ... | Your Travel Agency" banner, with no image inside —
   styling .project-wrap unconditionally painted a white card over that orange band. Only the
   deal tiles, which always contain an .img child, should get card chrome. */
.project-wrap:has(.img) {
  border-radius: var(--wt-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--wt-shadow-1);
  transition: transform .25s var(--wt-ease), box-shadow .25s var(--wt-ease);
}
.project-wrap:has(.img):hover {
  transform: translateY(-4px);
  box-shadow: var(--wt-shadow-3);
}
.project-wrap .img {
  background-size: cover;
  background-position: center;
  border-radius: 0;
  /* the inline box-shadow on this element fought the card's own shadow */
  box-shadow: none !important;
  transition: transform .5s var(--wt-ease);
}
.project-wrap:hover .img { transform: scale(1.04); }

/* The white panel was 90% wide and pulled up 40px, which left it visually
   detached and unevenly inset. Full-bleed reads as one solid card. */
.project-wrap:has(.img) .text {
  width: 100%;
  margin-top: 0;
  border-radius: 0;
  box-shadow: none;
}
.project-wrap .text .days {
  color: var(--wt-orange);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
  line-height: 1.5;
  display: block;
  margin-bottom: .9rem;
}

.card {
  border: 1px solid var(--wt-line);
  border-radius: var(--wt-radius);
  box-shadow: var(--wt-shadow-1);
  transition: transform .25s var(--wt-ease), box-shadow .25s var(--wt-ease);
}
.card.shadow { box-shadow: var(--wt-shadow-2) !important; }
a > .card:hover, .card.shadow:hover { box-shadow: var(--wt-shadow-3) !important; }
.card-header { background: transparent; border-bottom: 1px solid var(--wt-line); }

/* The account grid wraps whole cards in <a>; kill the inherited link colour. */
a:hover .card, a:focus .card { text-decoration: none; }
.card a, a .card { color: inherit; }

/* Package cards on packages.php lay white text (name, location, struck-through price,
   "Starting at $X") straight onto the photograph with nothing behind it. Over the bright
   end of a Las Vegas or Miami shot the price — the single most important number on the
   page — was close to unreadable. A bottom-up gradient keeps the photo visible and the
   type solid. */
.image-overlay {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top,
              rgba(10, 16, 22, .88) 0%,
              rgba(10, 16, 22, .70) 45%,
              rgba(10, 16, 22, .18) 80%,
              rgba(10, 16, 22, 0) 100%);
  padding-top: 3.5rem !important;
}
.image-overlay h4, .image-overlay h5, .image-overlay p, .image-overlay .info-icon {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.image-overlay h4 { font-weight: 700; }
.image-overlay s.text-danger { opacity: .85; font-size: .8em; }

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */
.form-control {
  border-radius: var(--wt-radius-sm);
  border-color: var(--wt-line);
  transition: border-color .18s var(--wt-ease), box-shadow .18s var(--wt-ease);
}
.form-control:focus {
  border-color: var(--wt-orange);
  box-shadow: 0 0 0 4px rgba(241, 93, 48, .15);
}
.input-group-text {
  border-radius: var(--wt-radius-sm) 0 0 var(--wt-radius-sm);
  border-color: var(--wt-line);
  background: #f7f8fa;
  color: var(--wt-muted);
}
.input-group > .form-control:not(:first-child) { border-radius: 0 var(--wt-radius-sm) var(--wt-radius-sm) 0; }
.input-group-append .input-group-text { border-radius: 0 var(--wt-radius-sm) var(--wt-radius-sm) 0; cursor: pointer; }

.alert { border-radius: var(--wt-radius-sm); border: 1px solid transparent; }

/* Cards that sit directly on a photograph (login, register, account pages) carry an inline
   rgba(255,255,255,.8) background, which over a bright reef photo left the labels and inputs
   barely legible. Frost the panel instead of dimming the photo behind it. */
.ftco-section.img .card,
.hero-wrap .card {
  background-color: rgba(255, 255, 255, .93) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--wt-shadow-3);
}
.ftco-section.img .card .form-control,
.hero-wrap .card .form-control {
  background-color: #fff;
}
.ftco-section.img .card h4,
.hero-wrap .card h4 { color: var(--wt-ink); letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   6. Hero / nav legibility
      The nav is white text sitting directly on a photograph. Over a bright
      sky or surf it was close to unreadable; a top-down scrim fixes it
      without dimming the whole image.
   -------------------------------------------------------------------------- */
/* These photo sections are styled with an inline background-image and nothing else, so the
   image rendered at its natural size and got cropped into an awkward sliver on wide screens.
   Pages that set background-size inline (help.php uses "100% auto") still win, as they should. */
.ftco-section.img { background-size: cover; background-position: center; }

.hero-wrap, .ftco-section.img, section.img { position: relative; }
.hero-wrap::before,
.ftco-section.img::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(12, 20, 28, .55), rgba(12, 20, 28, 0));
  pointer-events: none;
  z-index: 0;
}
.hero-wrap > *, .ftco-section.img > * { position: relative; z-index: 1; }

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: color .18s var(--wt-ease), opacity .18s var(--wt-ease);
}
.ftco-navbar-light .navbar-brand { text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* Breadcrumbs sit on photos too. */
.breadcrumbs, .bread { text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }

/* Interior page heroes (.hero-wrap-2) carry .js-fullheight, and main.js sets an inline
   height equal to the full window height on anything with that class. On a landing page
   that is the intent; on blog/about/hotel it meant the visitor's entire first screen was a
   photograph with the page title pushed below the fold and no content visible at all.
   !important is required to beat the inline style jQuery writes. */
.hero-wrap.hero-wrap-2,
.hero-wrap.hero-wrap-2 .slider-text.js-fullheight {
  height: auto !important;
  min-height: 320px;
}
.hero-wrap.hero-wrap-2 .slider-text.js-fullheight { padding-top: 5rem; }
@media (max-width: 767.98px) {
  .hero-wrap.hero-wrap-2,
  .hero-wrap.hero-wrap-2 .slider-text.js-fullheight { min-height: 240px; }
}

/* --------------------------------------------------------------------------
   7. Images — the theme has no intrinsic-size rules, so every image reflowed
      the page as it decoded (layout shift).
   -------------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* --------------------------------------------------------------------------
   8. Spacing rhythm — several pages stack four literal <br> tags between
      sections. Collapse consecutive ones and let padding do the work.
   -------------------------------------------------------------------------- */
br + br + br { display: none; }

.ftco-section { padding-top: 5em; padding-bottom: 5em; }
@media (max-width: 767.98px) {
  .ftco-section { padding-top: 3em; padding-bottom: 3em; }
  h1, .bread { font-size: 2rem !important; }
  .project-wrap .img { height: 220px; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.ftco-footer { border-top: 1px solid var(--wt-line); }
.ftco-footer a { transition: color .18s var(--wt-ease); }

/* --------------------------------------------------------------------------
   10. Motion preferences — the theme animates on scroll via ftco-animate and
       never checked this, so it was unusable for anyone sensitive to motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .project-wrap:hover, .btn:hover { transform: none; }
  .project-wrap:hover .img { transform: none; }
  .ftco-animate { opacity: 1 !important; transform: none !important; }
}

/* Safety net for when the scroll-reveal JS never runs at all (jQuery blocked, script
   error). style.css hides these with BOTH opacity:0 AND visibility:hidden, so a reveal
   that only animates opacity leaves them invisible — that is exactly what hid the login
   form. Both properties have to come back.

   Scoped to :not(.ftco-animated) so this never overrides the animate.css fadeIn* animation
   that js/main.js applies together with the .ftco-animated class. The 3s delay lets the JS
   path (which runs at ~0ms, on window load, and again at 2.5s) win in every normal case. */
@keyframes wtFailsafeReveal { to { opacity: 1; visibility: visible; } }
.ftco-animate:not(.ftco-animated) { animation: wtFailsafeReveal 0s linear 3s forwards; }