/* =========================================================================
   UTS Trip Page Polish (v2)
   Scoped, cosmetic-only refresh for the WP Travel Engine single-trip
   template. This version deliberately does NOT touch layout order, flex
   direction, or DOM structure of #primary / #secondary -- v1 tried to
   reorder the sidebar and broke the page (price hidden, Featured Trips
   and PDF download jumping above the trip content). This version only
   restyles existing elements in place: colors, type, radius, spacing on
   individual components. The native gallery grid, native content order,
   and native mobile price-toggle behavior are left exactly as WP Travel
   Engine renders them.

   Design tokens: primary #4285F4, hover #2B6ADF, secondary #E67D3C,
   ink #1A161F, body #272930, surface #F5F5F5, headings "Oakes Grostek"
   (site's declared heading font) falling back to Fira Sans, body Ubuntu Sans.
   ========================================================================= */

/* Register the site's own uploaded Oakes Grostek font file. It's already
   registered as an Elementor custom font (family name "Oakes Grostek",
   matching the site's existing spelling) but wasn't being emitted as an
   actual @font-face on this template, so it was silently falling back.
   This makes it actually render instead of falling back.

   IMPORTANT: only one file exists (Regular). Declaring it as font-weight:
   400 (not a "400 700" range) is deliberate -- a range tells the browser
   this file already covers bold, which suppresses real bold rendering
   AND blocks the browser's own faux-bold synthesis, so font-weight:700
   silently rendered as regular weight. With just 400 declared, requests
   for 700 correctly fall through to synthesized/faux bold on this face. */
@font-face {
  font-family: "Oakes Grostek";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/uploads/2026/08/Oakes-Grotesk-Regular.ttf') format('truetype');
}

body.single-trip {
  --uts-accent: #4285F4;
  --uts-accent-hover: #2B6ADF;
  --uts-accent2: #E67D3C;
  --uts-ink: #1A161F;
  --uts-body: #272930;
  --uts-surface: #F5F5F5;
  --uts-line: rgba(26, 22, 31, 0.10);
  --uts-shadow: 0 10px 30px -14px rgba(26, 22, 31, 0.18);
  --uts-radius-sm: 8px;
  --uts-radius-md: 14px;
  --uts-radius-pill: 999px;
  --uts-heading-font: "Oakes Grostek", var(--tmp-primary-font-family), "Fira Sans", sans-serif;
  --uts-body-font: "Ubuntu Sans", sans-serif;
}

/* -------------------------------------------------------------------------
   Mobile header compact-size fix has moved to the site-wide
   uts-header-decor.css (loaded on every page, not just trip pages) --
   the homepage and other pages were still showing the tall 70px-logo
   version since this used to be scoped to body.single-trip only.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Mobile gallery -- back to the simple, robust crop (attempt at a
   hero+thumbnail grid rearrangement failed twice on real devices despite
   passing every static check I could run remotely -- not repeating that
   again). This just caps the whole native gallery to a fixed height and
   rounds its corners. Nothing about WP Travel Engine's own grid placement
   is touched at all.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Side gutter for the gallery, take 3 -- applied to its specific parent
     container instead of the gallery element itself. The theme resets
     `.trip-content-area{padding:0}` at mobile (it's normally `0 20px`);
     restoring 10px here, scoped only to the gallery's own
     `.wpte-gallery-wrapper__multi-banners` parent (not the second,
     unrelated `.trip-content-area` further down that wraps the
     tabs/booking content), avoids touching the gallery element's own
     margin/width entirely -- which is what broke twice before. */
  body.single-trip .wpte-gallery-wrapper__multi-banners .trip-content-area {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.single-trip .wpte-gallery-wrapper {
    height: 50vh !important;
    max-height: 50vh !important;
    overflow: hidden !important;
    border-radius: var(--uts-radius-md) !important;
  }
  body.single-trip .wpte-gallery-wrapper .wpte-multi-banner-layout,
  body.single-trip .wpte-gallery-wrapper .wpte-trip-feat-img,
  body.single-trip .wpte-gallery-wrapper .wpte-multi-banner-image {
    height: 100% !important;
  }
  body.single-trip .wpte-gallery-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Prevent any accidental horizontal scroll without touching layout.
   Covers both html and body since browsers differ on which element is
   the actual scrolling root. This stylesheet only loads on trip pages
   (is_singular('trip') in the PHP enqueue), so no .single-trip scoping
   is needed here. */
html,
body.single-trip {
  overflow-x: hidden;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Title / header -- typography only, no repositioning
   ------------------------------------------------------------------------- */
body.single-trip .entry-title {
  font-family: var(--uts-heading-font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--uts-ink);
  text-align: center;
}

@media (max-width: 767px) {
  body.single-trip .entry-title {
    font-size: clamp(20px, 5.2vw, 24px);
  }
}

/* Native WPTE markup: .wte-title-duration is a small stacked box (a number
   over a label, e.g. "8" over "Days"), rendered twice (days + nights). The
   plugin's own default styling made these frame-white with a blue top --
   overridden here to a compact black box with white text throughout, per
   request, without touching its native position/layout behavior. */
body.single-trip .wte-title-duration {
  width: 56px;
  border-radius: 10px;
  border: none;
  box-shadow: none;
  background: #000;
  margin-top: 10px;
  margin-right: 8px;
}
body.single-trip .wte-title-duration .duration {
  height: 34px;
  font-family: var(--uts-heading-font);
  font-size: 18px;
  font-weight: 700;
  background-color: #000 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.single-trip .wte-title-duration .days {
  height: 22px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background-color: #000;
}
body.single-trip .wte-title-duration.wte-duration-night .duration {
  background-color: #000 !important;
  color: #fff !important;
}

/* Center the duration badge(s) under the (now centered) title. */
body.single-trip .entry-header {
  text-align: center;
}
body.single-trip .wte-title-duration {
  display: inline-flex !important;
  float: none !important;
}

/* -------------------------------------------------------------------------
   Trip facts -- uniform, slightly smaller type so every card fits cleanly
   on a phone screen. Layout stays a 2-column grid (as before); only the
   card look and font sizing change.
   ------------------------------------------------------------------------- */
body.single-trip .wte-trip-facts .widget-title {
  display: none;
}

body.single-trip .trip-facts-value li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--uts-surface);
  border-radius: var(--uts-radius-md);
}

body.single-trip .trip-facts-value .icon-holder {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.12);
  color: var(--uts-accent-hover);
}
body.single-trip .trip-facts-value .icon-holder svg {
  width: 16px;
  height: 16px;
}

body.single-trip .trip-facts-text {
  min-width: 0;
}
body.single-trip .trip-facts-text label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(39, 41, 48, 0.6);
  margin-bottom: 2px;
  line-height: 1.3;
}
body.single-trip .trip-facts-text .value {
  font-weight: 600;
  color: var(--uts-body);
  font-size: 12.5px;
  line-height: 1.35;
}

@media (max-width: 767px) {
  body.single-trip .trip-facts-value {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  body.single-trip .trip-facts-value li {
    padding: 10px;
  }
}

/* -------------------------------------------------------------------------
   Sticky tabs -- clearer active state, comfortable touch targets
   ------------------------------------------------------------------------- */
body.single-trip .wpte-tabs-container {
  background: #fff;
}
body.single-trip .nav-tab-wrapper {
  border-bottom: 1px solid var(--uts-line);
}
body.single-trip .wpte-tabs-scrollable .tab-inner-wrapper,
body.single-trip .wpte-sticky-tab-mobile {
  scrollbar-width: none;
}
body.single-trip .wpte-tabs-scrollable .tab-inner-wrapper::-webkit-scrollbar,
body.single-trip .wpte-sticky-tab-mobile::-webkit-scrollbar {
  display: none;
}
body.single-trip .nav-tab {
  font-family: var(--uts-body-font);
  font-weight: 600;
  font-size: 14px;
  color: rgba(39, 41, 48, 0.65);
  padding: 14px 16px !important;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.single-trip .nav-tab.nav-tab-active {
  color: var(--uts-accent-hover);
  border-bottom-color: var(--uts-accent);
}

/* -------------------------------------------------------------------------
   Overview / content typography
   ------------------------------------------------------------------------- */
body.single-trip .post-data,
body.single-trip .tab-content {
  font-family: var(--uts-body-font);
  color: var(--uts-body);
  line-height: 1.65;
  font-size: 15px;
}
body.single-trip .tab-content h2,
body.single-trip .tab-content h3,
body.single-trip .wpte-overview-title,
body.single-trip .wpte-trip-highlights-title {
  font-family: var(--uts-heading-font);
  font-weight: 700;
  color: var(--uts-ink);
  line-height: 1.25;
  margin-top: 28px;
  margin-bottom: 12px;
  text-align: center;
}

@media (max-width: 767px) {
  body.single-trip .tab-content h2,
  body.single-trip .wpte-overview-title,
  body.single-trip .wpte-trip-highlights-title {
    font-size: 22px;
  }
  body.single-trip .tab-content h3 {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  body.single-trip .post-data,
  body.single-trip .tab-content {
    font-size: 14.5px;
  }
}

/* -------------------------------------------------------------------------
   Booking / price card -- cosmetic only (no position, no order, no
   overflow changes). The native mobile "Show Prices" toggle and its
   reveal behavior are left completely untouched.
   ------------------------------------------------------------------------- */
body.single-trip .wpte-booking-area-wrapper.wpte-bf-outer {
  background: #fff;
  border-radius: var(--uts-radius-md);
  box-shadow: var(--uts-shadow);
  border: 1px solid var(--uts-line);
  padding: 18px;
}

body.single-trip .wpte-bf-discount-tag {
  display: inline-block;
  background: var(--uts-accent2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--uts-radius-pill);
  margin-bottom: 10px;
}

body.single-trip .wpte-bf-price-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--uts-line);
  /* WP Travel Engine collapses this to max-height:0;overflow:hidden by
     default until the "Show Prices" toggle is tapped -- forcing it open
     here so prices are visible immediately without that extra tap. */
  max-height: none !important;
  overflow: visible !important;
}

/* The toggle button becomes redundant once prices are always shown. */
body.single-trip #wpte_price-toggle-btn-mb {
  display: none !important;
}
body.single-trip .wpte-bf-price-wrap .wpte-bf-price {
  align-items: center !important;
}
body.single-trip .wpte-bf-reg-price {
  display: block;
  font-size: 12px;
  color: rgba(39, 41, 48, 0.5);
}
body.single-trip .wpte-bf-reg-price del {
  text-decoration: line-through;
}
body.single-trip .wpte-bf-offer-amount {
  font-family: var(--uts-heading-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--uts-accent-hover);
}
body.single-trip .wpte-bf-pqty {
  font-size: 12px;
  color: rgba(39, 41, 48, 0.6);
}

body.single-trip .wpte-bf-content ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.single-trip .wpte-bf-content ul li {
  font-size: 13px;
  color: var(--uts-body);
  padding-left: 22px;
  position: relative;
}
body.single-trip .wpte-bf-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.15);
  box-shadow: inset 0 0 0 2px rgba(66, 133, 244, 0.35);
}

body.single-trip .wpte-bf-btn,
body.single-trip .wte-book-now,
body.single-trip .wpte-button,
body.single-trip .enquiry-submit {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--uts-radius-pill) !important;
  transition: background 0.2s ease;
}
body.single-trip .wpte-bf-btn:hover,
body.single-trip .wte-book-now:hover,
body.single-trip .wpte-button:hover,
body.single-trip .enquiry-submit:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

/* The button's visible label ("Check Availability") is set by the plugin
   in PHP/JS, not editable via markup here -- swapping the display text to
   "Book Now" via a pseudo-element instead of touching plugin behavior. */
body.single-trip .wte-book-now.wpte-bf-btn {
  color: transparent !important;
  position: relative;
}
body.single-trip .wte-book-now.wpte-bf-btn::after {
  content: "Book Now";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

body.single-trip .wpte-booking-footer-text {
  text-align: center;
  font-size: 12.5px;
  margin-top: 12px;
  color: rgba(39, 41, 48, 0.65);
}
body.single-trip .wpte-booking-footer-text a {
  color: var(--uts-accent-hover);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Un-stick the price/booking card from its native fixed-bottom mobile
   position. WP Travel Engine makes the INNER .wpte-booking-area
   (contained by the .wpte-booking-area-wrapper card I style above)
   position:fixed;bottom:0 on mobile, which is what floats over content
   regardless of scroll position. Neutralizing that here so it renders
   normally inside its (already-styled) card wrapper instead.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.single-trip .wpte-booking-area {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
}

/* -------------------------------------------------------------------------
   Itinerary PDF download widget -- small card treatment to match
   ------------------------------------------------------------------------- */
body.single-trip .wte-itinerary-downloader-inn-wrap {
  background: var(--uts-surface);
  border-radius: var(--uts-radius-md);
  padding: 16px;
  text-align: center;
}
body.single-trip .download-itinerary-main-label {
  font-family: var(--uts-heading-font);
  font-weight: 600;
  color: var(--uts-ink);
}
body.single-trip .download-itinerary-main-description {
  font-size: 13px;
  color: rgba(39, 41, 48, 0.7);
  margin-bottom: 12px;
}
body.single-trip .wte-itinerary-downloader-btn {
  display: inline-block;
  background: var(--uts-accent);
  color: #fff !important;
  border-radius: var(--uts-radius-pill);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 13px;
}

/* -------------------------------------------------------------------------
   Reviews / star rating spacing
   ------------------------------------------------------------------------- */
body.single-trip .wpte-trip-review-stars {
  gap: 6px;
}

/* -------------------------------------------------------------------------
   Includes / Excludes / Trip Highlights checklists -- each row's icon is a
   CSS ::before pseudo-element absolutely positioned inside its own <li>
   (native WPTE styling), so centering via display:table + margin:auto
   centers each icon+text row as an intact unit without disturbing the
   icon's positioning. A max-width cap is required too: without it, a
   multi-line item's table-box stretches to the full container width (so
   margin:auto has no visible centering effect on those specific rows,
   even though short one-line items looked centered) -- capping width
   forces every row, short or long, to actually wrap/center consistently.
   ------------------------------------------------------------------------- */
body.single-trip .cost ul#include-result li,
body.single-trip .cost ul#exclude-result li,
body.single-trip #include-result li,
body.single-trip #exclude-result li,
body.single-trip .wpte-trip-highlights li {
  display: table;
  max-width: 88%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}

/* Overview / tab body paragraphs, centered as requested. */
body.single-trip .tab-content p,
body.single-trip .post-data p {
  text-align: center;
}

/* -------------------------------------------------------------------------
   Respect reduced-motion preferences for the hover transitions above
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.single-trip * {
    transition: none !important;
  }
}