/* main.css - global design tokens and base chrome
   Source: WordPress customizer color variables + site loader (theme.json / adventor-inline-css) */
:root {
  --DTPrimaryColor: #f29727;
  --DTSecondaryColor: #10221b;
  --DTTertiaryColor: #e6eee5;
  --DTQuaternaryColor: #1dc5ce;
  --DTBodyBGColor: #ffffff;
  --DTBodyTxtColor: #483e3e;
  --DTHeadAltColor: #10221b;
  --DTLinkColor: #10221b;
  --DTLinkHoverColor: #f29727;

  /* Site-wide typeface. Overrides the legacy Adventor theme defaults
     (Jost for body, Palanquin Dark for headings - see theme.css) with
     Roboto everywhere neither was a deliberate per-element choice, since
     every text element on the site ultimately reads its font-family from
     one of these two variables. */
  --DTFontTypo_Base: "Roboto", sans-serif;
  --DTFontTypo_Alt: "Roboto", sans-serif;
}

/* page-load spinner colors (paired with assets/vendor .../site-loader) */
.loader2 {
  background-color: var(--DTBodyBGColor);
}
.loader2:before {
  background-color: var(--DTTertiaryColor);
}

/* Abeno Safaris text wordmark (replaces the old "Adventor" logo image).
   The header sits on a dark hero image, so force it white + keep it on one line;
   the footer sits on a light background, so keep that instance dark. */
.dt-logo-container a .site-title {
  color: #ffffff;
  font-family: var(--DTFontTypo_Alt);
  white-space: nowrap;
  font-size: 26px;
}
#footer .dt-logo-container a .site-title {
  color: var(--DTHeadAltColor);
}

/* On scroll, the theme's own JS adds .sticky-header-active to a fixed-position
   clone of the header with a near-white background (see dt-header.css) - our
   white logo/nav text (tuned for sitting on the dark hero image) becomes
   invisible against that, so both flip to dark text in that sticky state.
   The home page's nav pill (below) is the one exception: it stays legible on
   its own dark glass regardless of what's behind it, so it's excluded here. */
.sticky-header-active .dt-logo-container a .site-title {
  color: var(--DTHeadAltColor);
}
body:not(.home) .sticky-header-active .dt-primary-nav > li > a {
  color: var(--DTLinkColor) !important;
}
body:not(.home) .sticky-header-active .dt-primary-nav > li.current-menu-item > a {
  color: var(--DTPrimaryColor) !important;
}

/* Base nav text: white, since the header sits transparent-over-photo/dark
   breadcrumb on every page. This alone is enough on inner pages (dark
   breadcrumb hero behind it) - only the home page's bright, sky-heavy photo
   needs the extra glass pill below to stay readable everywhere the photo is. */
.dt-primary-nav > li:not(.menu-item-cta) > a {
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap;
}
/* Inner pages keep the theme's original type size/spacing (--DTFontSize_Base
   20px + its 30px link margin) - that's the look that was already working
   well there. Only the home page's new glass pill (below) needs it trimmed
   down: unscoped, that margin/font-size combo was inflating the pill to ~3x
   the height of the text/buttons actually sitting inside it. Match the
   ".dt-header-menu .dt-primary-nav > li > a" specificity used by the theme's
   own rule so this override actually wins, scoped to home only. ":not(.menu-
   item-cta)" throughout this file keeps all of this off the "Book Now" item,
   which now lives as a normal <li> in the same <ul> (so it clones into the
   mobile panel automatically) but is styled entirely by its own
   ".dt-primary-nav-cta" rule further down instead of the generic link rules. */
body.home .dt-header-menu .dt-primary-nav > li:not(.menu-item-cta) > a {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}
/* The vendor's own 30px/20px link margin (header.css) would otherwise apply
   to the CTA everywhere now that it's a normal <li> - kill it globally (not
   just on home) since ".dt-primary-nav-cta" below provides its own spacing. */
.dt-header-menu .dt-primary-nav > li.menu-item-cta > a {
  margin: 0;
}
.dt-header-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
nav[aria-label="Primary navigation"] {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}
/* Scoped to the real <nav> (not just ul.dt-primary-nav) so the mobile
   off-canvas clone of this same <ul> - which lives directly in a plain
   <div class="mobile-menu"> with no <nav> ancestor - keeps the vendor's own
   vertical list layout instead of being forced into this horizontal flex
   row too. */
nav[aria-label="Primary navigation"] ul.dt-primary-nav {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 4px;
}

/* Home page only: the menu links (not the logo) get their own frosted-glass
   pill, since only the home hero photo has bright sky/cloud patches that
   wash out plain white text. Inner pages keep the plain white links above -
   their dark breadcrumb hero already gives them enough contrast. The
   logo/menu columns are a fixed Elementor 50/50 split sized for the original
   narrower boxed design; skew that split toward the menu column in the
   header specifically so 5 links + a button have room on one line. */
#header .elementor-column.elementor-col-50:first-child {
  width: 22%;
}
#header .elementor-column.elementor-col-50:last-child {
  width: 78%;
}
#header .elementor-container {
  max-width: 1300px;
}
/* The theme's outer .container is a fixed-width grid (hardcoded per
   breakpoint in grid.css: 1230px, 1080px, 900px...), not a fluid max-width -
   it was capping the header row's real available space well below the
   1300px above at common laptop widths (e.g. ~1000px at a 1366px viewport),
   so the wider/bolder nav pill below had nowhere to go but overlap the logo.
   Widen just the header's own instance of it. */
#header .container {
  width: 94%;
  max-width: 1300px;
}
body.home nav[aria-label="Primary navigation"] {
  gap: 6px;
  background: rgba(90, 98, 88, 0.72);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 26px rgba(0, 0, 0, 0.2);
}
/* Scoped through nav[aria-label="Primary navigation"] specifically (not just
   body.home .dt-primary-nav) because the mobile off-canvas panel clones
   ul.dt-primary-nav into a plain <div class="mobile-menu"> with no <nav>
   ancestor (custom.js) - without this extra scope, the desktop pill's
   inline-block/padding/radius was winning over the vendor's mobile
   display:block list styles and forcing the mobile items into a horizontal
   row instead of a stacked list. */
body.home nav[aria-label="Primary navigation"] .dt-primary-nav > li:not(.menu-item-cta) > a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
body.home nav[aria-label="Primary navigation"] .dt-primary-nav > li:not(.menu-item-cta) > a:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
/* Current page: a solid brand-orange pill, matching the "Book Now" CTA's own
   treatment - this is the reference look the site owner asked for directly,
   with the active link reading as its own button rather than a subtle tint.
   Left unscoped (applies in the mobile panel too) since it's just a color/
   background change, not a layout one - it reads fine as a highlighted row
   there too. */
body.home .dt-primary-nav > li.current-menu-item > a {
  background-color: var(--DTPrimaryColor);
  color: #ffffff !important;
}
/* the legacy theme draws an underline via :before/:after on hover + current
   state (header.css) - inside the pill that reads as a stray line poking out
   the bottom, so switch it off there; inner pages (and the mobile panel,
   which has its own full-width divider rows instead) keep the legacy
   underline since they have no pill to clash with it. ".dt-header-menu" is
   an ANCESTOR of this <nav> (see header.php), not a descendant of it - a
   previous version of this selector nested it the wrong way round and so
   never matched anything, which is why the hover underline was still
   showing up inside the pill. */
body.home nav[aria-label="Primary navigation"] .dt-primary-nav > li > a:before,
body.home nav[aria-label="Primary navigation"] .dt-primary-nav > li > a:after {
  display: none !important;
}
/* Book Now lives inside the same bar as the links here (see navbar.php - the
   CTA is the last child of the <nav>), so drop its standalone glow: flush
   flat against the bar matches the reference, the glow was only needed when
   it floated on bare photo. */
body.home .dt-primary-nav-cta {
  box-shadow: none;
}

/* "Book Now" is a normal <li class="menu-item-cta"> inside ul.dt-primary-nav
   (so it clones into the mobile panel along with the rest of the menu) - on
   desktop give the <li> itself the left margin so it sits apart from
   "Contact", since the .dt-primary-nav-cta anchor's own margin was getting
   fought over by the various link-margin resets above. */
nav[aria-label="Primary navigation"] .menu-item-cta {
  margin-left: 16px;
}
/* Matches the vendor's own "<ul>.dt-primary-nav > li > a" specificity (see
   the ":not(.menu-item-cta)" comment above) so padding/font-size/line-height
   here actually win over header.css's "padding:0; font-size:20px;
   line-height:1.8" - without it the pill lost its padding and rendered its
   text a third larger than its siblings, making the button visibly taller
   and edge-to-edge inside the nav bar. Unscoped (not just body.home) since
   header.css applies on every page, not only the homepage pill. */
.dt-header-menu .dt-primary-nav > li.menu-item-cta > a.dt-primary-nav-cta {
  display: inline-block;
  padding: 12px 26px;
  background-color: var(--DTPrimaryColor);
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(242, 151, 39, 0.4);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.dt-primary-nav-cta:hover {
  background-color: var(--DTHeadAltColor);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Widen boxed section content instead of leaving it narrow-and-centered on large
   screens (Elementor's default boxed width is 1140px, which wastes a lot of side
   space on modern displays). A single flat cap (rather than an extra vw-based
   breakpoint) avoids a "narrower than either side" dead zone in between - the
   container already shrinks to fit smaller viewports on its own since it's
   max-width, not a fixed width. */
.elementor-container {
  max-width: 1600px;
}

/* The breadcrumb hero's photo layer (.main-title-section-bg) is
   position:absolute with height:100%, meant to fill its own
   .main-title-section-wrapper - but that wrapper needs position:relative for
   the percentage height to resolve against it. The theme's own CSS sets that
   ("#header-wrapper .main-title-section-wrapper{position:relative}") but
   then a more specific rule cancels it out on our markup
   ("#header-wrapper.header-top-absolute .main-title-section-wrapper
   {position:static}", and every page here uses header-top-absolute so the
   header can float over the photo). Without a positioned ancestor, height:100%
   fell back to the full viewport height instead of the wrapper's own ~600px,
   so the photo (and the black tint over it) rendered far taller than the
   breadcrumb itself and bled straight through the "Get in Touch" section
   underneath, muddying that white text. Restoring position:relative here
   re-bounds the photo to the breadcrumb wrapper only. */
.main-title-section-wrapper {
  position: relative !important;
}

/* Mobile off-canvas nav (<1280px). The theme clones ul.dt-primary-nav
   verbatim into this white slide-out panel (custom.js), which means our
   desktop nav-link rules (forcing white text for legibility over the hero
   photo) were following it in and turning every link white-on-white -
   invisible against the panel. Re-force dark text specifically inside the
   panel. */
.mobile-menu .dt-primary-nav > li:not(.menu-item-cta) > a {
  color: var(--DTLinkColor) !important;
  font-size: 16px;
}
/* On home, the current-page item still gets the solid orange pill from the
   desktop rule (body.home .dt-primary-nav > li.current-menu-item > a) - that
   one already sets white text on the orange fill, which reads fine here too,
   so it's intentionally left alone rather than re-overridden to dark. Inner
   pages have no such pill, so give the current item a plain color/weight
   flag instead - otherwise the mobile list has no "you are here" indicator
   at all outside of home. */
body:not(.home) .mobile-menu .dt-primary-nav > li.current-menu-item > a {
  color: var(--DTPrimaryColor) !important;
  font-weight: 600;
}

/* "Book Now" is now the same <li class="menu-item-cta"> that's cloned in
   from the desktop menu (see navbar.php), so it arrives here already -
   styled as a full-width button instead of the vendor's plain divided row
   (its border-top divider and fixed 42px line-height are for a plain text
   link, not a button, so both are reset here). */
.mobile-menu .menu-item-cta {
  margin: 20px 15px 0;
}
.mobile-menu .dt-primary-nav-cta {
  display: block;
  border: none !important;
  min-height: 0 !important;
  padding: 12px 20px;
  text-align: center;
  line-height: 1.2 !important;
}

/* Hero carousel: CMS-managed background images (hero_slides table) crossfade
   on top of the section's static fallback background - rotation timer lives
   in assets/js/main.js. Section needs position:relative/overflow:hidden so
   the absolutely-positioned slides stack correctly under its own content. */
.elementor-element-4e041c9 {
  position: relative;
  overflow: hidden;
}
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}
.elementor-element-4e041c9 > .elementor-container {
  position: relative;
  z-index: 1;
}