/* GTAC Finance — static-site glue styles.
   Additive only: the original (bundled) CSS still drives the visual design.
   This file supplies the behaviour that used to come from Elementor/jQuery JS. */

/* ---------- shared header / footer include containers ---------- */
#site-header, #site-footer { display: block; }
#gtac-main { display: block; }

/* ---------- gentle scroll reveal ----------
   Replaces Elementor's fast/jarring entrance animations (zoomIn, etc.) with one
   calm, slow fade-up. With JS on, animated elements start slightly faded & lowered
   and ease in when scrolled into view (or on load if already visible). With JS off
   they simply show. */
html:not(.js) .elementor-invisible { visibility: visible !important; }
html.js .elementor-invisible {
  visibility: visible !important;
  opacity: 0;
  transform: translateY(26px);
  /* !important so Elementor's own 0.3s element transition can't override the calm pace */
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1) !important;
  will-change: opacity, transform;
  animation: none !important;   /* neutralize any Elementor keyframe animation */
}
html.js .elementor-invisible.gtac-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .elementor-invisible { transition: none; opacity: 1; transform: none; }
}

/* ---------- desktop dropdown menus (replaces SmartMenus JS) ----------
   Sub-menus already have `display:none; position:absolute` from the bundle;
   reveal them on hover / keyboard focus of their parent item. The
   `.gtac-desktop` flag is set by JS whenever the hamburger is hidden, so this
   matches Elementor's own responsive breakpoint at any width. */
html.gtac-desktop .elementor-nav-menu--main .menu-item-has-children { position: relative; }
html.gtac-desktop .elementor-nav-menu--main .menu-item-has-children > .sub-menu {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  /* size the box to its widest label so text never spills outside it */
  width: max-content;
  min-width: 220px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
/* keep each label on one line with comfortable padding inside the box */
html.gtac-desktop .elementor-nav-menu--main .sub-menu li,
html.gtac-desktop .elementor-nav-menu--main .sub-menu a {
  white-space: nowrap;
}
html.gtac-desktop .elementor-nav-menu--main .sub-menu a {
  padding-left: 22px !important;
  padding-right: 28px !important;
}
html.gtac-desktop .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
html.gtac-desktop .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- responsive breakpoint fix ----------
   The header nav has 7 top items + the My Account button; Elementor only switches
   to the hamburger at 768px, so 768–1200px wraps to two lines. Switch to the
   hamburger up to 1200px (the bar only shows when the items comfortably fit).
   IMPORTANT: only collapse nav widgets that actually have
   a hamburger toggle (the header) — never the footer's Quick Links menu, which is
   a plain link list with no toggle. Two techniques for max browser coverage:
   :has() (no-JS) and a .gtac-collapsible class added by site.js (fallback). */
@media (max-width: 1200px) {
  .elementor-widget-nav-menu:has(.elementor-menu-toggle) .elementor-nav-menu--main { display: none !important; }
  .elementor-widget-nav-menu:has(.elementor-menu-toggle) .elementor-menu-toggle { display: flex !important; }
}
@media (max-width: 1200px) {
  .elementor-widget-nav-menu.gtac-collapsible .elementor-nav-menu--main { display: none !important; }
  .elementor-widget-nav-menu.gtac-collapsible .elementor-menu-toggle { display: flex !important; }
}

/* ---------- sticky header (reproduces Elementor sticky:top) ---------- */
.gtac-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* ---------- mobile dropdown (hamburger) ---------- */
nav.elementor-nav-menu--dropdown.gtac-open { display: block !important; }
/* sub-menus inside the mobile dropdown act as accordions */
nav.elementor-nav-menu--dropdown .sub-menu { display: none !important; }
nav.elementor-nav-menu--dropdown li.gtac-sub-open > .sub-menu { display: block !important; }
/* parent items that expand get a small affordance */
nav.elementor-nav-menu--dropdown .menu-item-has-children > a { position: relative; }

/* ---------- hero readability ----------
   The homepage hero text sits over a photo slideshow with a teal tint, which made
   the teal heading and dark body text low-contrast. Add a soft light scrim on the
   text side (left) so both read clearly while the photo stays visible on the right. */
.gtac-hero { position: relative; }
.gtac-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .92) 0%,
    rgba(255, 255, 255, .80) 28%,
    rgba(255, 255, 255, .38) 54%,
    rgba(255, 255, 255, 0) 76%);
}
.gtac-hero > .e-con-inner,
.gtac-hero > .elementor-container,
.gtac-hero > .elementor-widget-wrap,
.gtac-hero > .elementor-background-overlay { position: relative; z-index: 2; }
.gtac-hero .elementor-background-overlay { z-index: 0; }
@media (max-width: 767px) {
  .gtac-hero::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .86) 0%,
      rgba(255, 255, 255, .74) 55%,
      rgba(255, 255, 255, .55) 100%);
  }
}

/* ---------- minimal content slider (homepage) ---------- */
.gtac-slider { position: relative; }
.gtac-slider .gtac-slide { display: none; }
.gtac-slider .gtac-slide.is-active { display: block; }

/* ---------- join-gtac: keep the form obvious that submit is wired later ---------- */
.gtac-form-note {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px dashed #03AFA5;
  border-radius: 6px;
  background: #f2fbfa;
  color: #05635d;
  font-size: 14px;
}