/* Tusubira Global Ministries - front-end polish.
   Only what an Elementor control cannot express:
   1) gold radial glow layered over the hero gradient
   2) image zoom on photo-card hover
   3) WPForms branding (WPForms Lite exposes no controls for these)
   Containers are targeted by element ID, since the CSS Classes field is unreliable on containers. */

/* ---- 1. Hero: gold radial glow over the navy gradient ---- */
#tgm-hero,
#tgm-hero-disc,
div[id^="tgm-hero-"] { position: relative; overflow: hidden; }

#tgm-hero::before,
#tgm-hero-disc::before,
div[id^="tgm-hero-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 80% 4%, rgba(201,162,39,0.22), rgba(201,162,39,0) 48%);
}

#tgm-hero > *,
#tgm-hero-disc > *,
div[id^="tgm-hero-"] > * { position: relative; z-index: 1; }

/* ---- 2. Photo cards: image zoom on hover ---- */
div[id^="tgm-photocard-"] .elementor-widget-image img {
  transition: transform .5s ease;
  will-change: transform;
}
div[id^="tgm-photocard-"]:hover .elementor-widget-image img { transform: scale(1.05); }

/* ---- 3. WPForms, branded to match the site ---- */
.wpforms-container .wpforms-form .wpforms-field-label {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #0C2E5C;
  margin-bottom: 9px;
}
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #1A1A1A;
  background: #FFFFFF;
  border: 1px solid #E2E0D8;
  border-radius: 3px;
  padding: 13px 15px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpforms-container .wpforms-form textarea { min-height: 150px; }
.wpforms-container .wpforms-form input[type=text]:focus,
.wpforms-container .wpforms-form input[type=email]:focus,
.wpforms-container .wpforms-form input[type=tel]:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
  border-color: #1B4F9C;
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,79,156,0.12);
}
.wpforms-container .wpforms-form button[type=submit] {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #0C2E5C;
  background-color: #C9A227;
  border: 2px solid #C9A227;
  border-radius: 3px;
  padding: 16px 30px;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.wpforms-container .wpforms-form button[type=submit]:hover,
.wpforms-container .wpforms-form button[type=submit]:focus {
  background-color: #E3C458;
  border-color: #E3C458;
  color: #0C2E5C;
  transform: translateY(-2px);
}
.wpforms-container .wpforms-form .wpforms-required-label { color: #C05621; }
.wpforms-container .wpforms-confirmation-container-full,
div.wpforms-confirmation-container-full {
  background: rgba(201,162,39,0.12);
  border: 0;
  border-left: 4px solid #C9A227;
  border-radius: 0 6px 6px 0;
  color: #414B5A;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}
.wpforms-container .wpforms-form .wpforms-field-description {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #6B7688;
}

/* ---- 4. Link colours that would otherwise inherit Elementor's global blue ---- */
/* Main navigation (Xpro horizontal menu).
   Xpro emits no colour rule of its own for these links, so the theme's grey wins
   unless we state it here. High specificity + !important is deliberate. */
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link,
.xpro-theme-builder-header ul.xpro-elementor-horizontal-navbar-nav li a.menu-link {
  color: #0C2E5C !important;
  transition: color .2s ease, border-color .2s ease;
  border-bottom: 2px solid transparent;
}
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link:hover,
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link:focus,
.xpro-theme-builder-header ul.xpro-elementor-horizontal-navbar-nav li a.menu-link:hover {
  color: #1B4F9C !important;
  border-bottom-color: #C9A227;
}
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a.xpro-elementor-nav-link,
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a.xpro-elementor-nav-link {
  color: #1B4F9C !important;
  border-bottom-color: #C9A227;
}
/* Mobile drop-down panel: Xpro defaults to a grey ground, which is off-brand */
@media (max-width: 1024px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper {
    background-color: #FFFFFF !important;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item {
    border-bottom: 1px solid #E2E0D8;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item:last-child {
    border-bottom: 0;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link {
    padding: 15px 18px;
    border-bottom: 0;
  }
}

/* Items the desktop bar does not need: Give is the gold button there, and the
   logo is already a link home. Both stay in the panel menu below 1200px.
   Breakpoint matches tgm-header-nav-fit below - keep the two in step. */
@media (min-width: 1200px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.tgm-menu-give { display: none; }
}

/* Footer link lists */
#tgm-footer .elementor-icon-list-item a,
#tgm-footer .elementor-icon-list-text {
  color: rgba(255,255,255,0.66);
  transition: color .2s ease;
}
#tgm-footer .elementor-icon-list-item a:hover .elementor-icon-list-text,
#tgm-footer .elementor-icon-list-item a:hover { color: #E3C458; }
#tgm-footer .elementor-widget-text-editor a { color: rgba(255,255,255,0.66); }
#tgm-footer .elementor-widget-text-editor a:hover { color: #E3C458; }

/* Footer social icons: render as circular marks.
   Without an explicit box the inline SVGs expand to fill their column. */
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}
/* The circle goes on the link, or on the icon span when the item has no link.
   It must NOT go on the empty text span, which produced a second blank circle. */
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item > a,
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item > span.elementor-icon-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  transition: border-color .2s ease, background-color .2s ease;
}
/* the icon span nested inside a linked circle is just the glyph, not another ring */
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item > a > .elementor-icon-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0;
  border-radius: 0;
}
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item {
  list-style: none;
}
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item::marker { content: none; }
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: rgba(255,255,255,0.45);
  transition: fill .2s ease;
}
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-item > span.elementor-icon-list-text,
#tgm-footer .elementor-icon-list--layout-inline .elementor-icon-list-text { display: none !important; }

/* Safety net: any button whose hover background is light must darken its label,
   and any button whose hover background is dark must lighten it. Prevents the
   "invisible text on hover" case anywhere a control was missed. */
.elementor-widget-button .elementor-button { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.elementor-widget-button .elementor-button:hover .elementor-button-text,
.elementor-widget-button .elementor-button:focus .elementor-button-text { color: inherit; }
/* only the live WhatsApp link reacts to hover */
#tgm-footer .elementor-icon-list--layout-inline a:hover { border-color: #C9A227; }
#tgm-footer .elementor-icon-list--layout-inline a:hover .elementor-icon-list-icon svg { fill: #E3C458; }

/* Guard: no icon-list SVG anywhere may grow beyond its intended size */
.elementor-icon-list-icon svg { max-width: 20px; max-height: 20px; }

/* ---- 5. Eyebrow labels: keep the gold rule and its label together on the left.
   The divider widget defaults to flex:1 1 auto and stretches, pushing the label
   to the far right. Every divider on this site is an eyebrow rule. ---- */
.elementor-widget-divider {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 34px;
}
.elementor-widget-divider .elementor-divider { padding-block: 0; }
/* the label sits beside the rule, never stacked on top of it.
   Elementor sets max-width:100% on width-initial widgets, so this must win. */
.e-con .elementor-widget-divider + .elementor-widget-heading,
.elementor-widget-divider + .elementor-widget-heading {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 46px) !important;
  min-width: 0;
}

/* ---- 6. Main nav must stay on one line at desktop ---- */
@media (min-width: 1025px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav {
    flex-wrap: nowrap;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link {
    white-space: nowrap;
    padding-left: 11px;
    padding-right: 11px;
  }
}
/* Seven items plus the Resources submenu need roughly 790px. The nav column is
   never wider than that, so the tighter tracking applies at EVERY desktop width,
   not just narrow ones. Capping it at 1440px is what let the menu ride back over
   the wordmark on large screens. */
@media (min-width: 1025px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    letter-spacing: .6px;
    white-space: nowrap;
  }
}
@media (min-width: 1025px) and (max-width: 1120px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
    letter-spacing: .4px;
  }
}
/* The wordmark is a hard floor the menu may never cross. */
@media (min-width: 1025px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper { overflow: visible; }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item { flex: 0 0 auto; }
  /* the dropdown caret nudges Resources up by a pixel without this */
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav { align-items: center; }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li.menu-item > a.xpro-elementor-nav-link {
    display: inline-flex;
    align-items: center;
  }
}
/* the menu never spills out of its own column */
@media (min-width: 1025px) {
  .xpro-theme-builder-header .elementor-widget-xpro-horizontal-menu,
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-wrapper,
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar {
    max-width: 100%;
    min-width: 0;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav {
    justify-content: flex-end;
    max-width: 100%;
  }
}

/* ---- 7. Accordions: horizontal rules only, no boxed borders ---- */
.elementor-accordion .elementor-accordion-item {
  border: 0 !important;
  border-bottom: 1px solid #E2E0D8 !important;
}
.elementor-accordion .elementor-accordion-item:first-child {
  border-top: 1px solid #E2E0D8 !important;
}
.elementor-accordion .elementor-tab-title,
.elementor-accordion .elementor-tab-content {
  border: 0 !important;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
}
.elementor-accordion .elementor-tab-content { padding-top: 0; }
/* the +/- marker is gold, matching the static design */
.elementor-accordion .elementor-accordion-icon,
.elementor-accordion .elementor-accordion-icon svg,
.elementor-accordion .elementor-accordion-icon i {
  color: #C9A227 !important;
  fill: #C9A227 !important;
}
.elementor-accordion .elementor-accordion-title { color: #0C2E5C; }

/* ---- 8. Long strings (email addresses, URLs) must never escape their card ---- */
.elementor-widget-icon-box .elementor-icon-box-content,
.elementor-widget-icon-box .elementor-icon-box-wrapper { min-width: 0; }
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-description a,
.elementor-widget-icon-box .elementor-icon-box-title a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.elementor-widget-text-editor a[href^="mailto:"],
.elementor-widget-text-editor a[href^="tel:"] { overflow-wrap: anywhere; }

/* ---- 9. WPForms select: WPForms pins height:43px, but our padding plus
   line-height needs about 56px, so the chosen option was being clipped.
   Height is released and a chevron drawn, since appearance is none. ---- */
.wpforms-container .wpforms-form select {
  height: auto !important;
  min-height: 52px;
  line-height: 1.4 !important;
  padding: 14px 42px 14px 15px !important;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230C2E5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}
.wpforms-container .wpforms-form select option { color: #1A1A1A; background: #FFFFFF; }

/* match the text inputs to the same rhythm */
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel] {
  height: auto;
  min-height: 52px;
  line-height: 1.4;
}

/* ---- 10. Book star ratings.
   The only interactive element on the site that no Elementor widget provides.
   Elementor's Star Rating widget is display-only and cannot collect a vote. ---- */
.tgm-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tgm-stars { display: inline-flex; gap: 2px; }
.tgm-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: #D8D4C6;
  line-height: 0;
  transition: color .15s ease, transform .15s ease;
}
.tgm-star svg { fill: currentColor; }
.tgm-star.is-on { color: #C9A227; }
.tgm-rating[data-voted="0"] .tgm-star:hover { color: #C9A227; transform: scale(1.12); }
.tgm-rating[data-voted="1"] .tgm-star { cursor: default; }
.tgm-rating[data-busy="1"] .tgm-star { opacity: .5; cursor: wait; }
.tgm-rating-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #6B7688;
}
.tgm-rating-avg {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #0C2E5C;
}
.tgm-rating-note { color: #C9A227; font-weight: 600; }

/* Book covers keep their natural portrait shape */
.tgm-book-cover img { width: 100%; height: auto; display: block; }

/* ---- 11. Sticky header offset so anchor links are not hidden ---- */
html { scroll-padding-top: 120px; }

/* ---- 11. Gradient backgrounds pinned by element ID.
   Elementor's background lazy-load rule sets background-image:none on
   top-level containers from the 4th onward until JS marks them loaded, which
   left whole bands with no background. An ID selector outranks it, so the
   gradient is guaranteed with or without JavaScript. ---- */
#tgm-hero-43 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-1-e2f1 { background-image: linear-gradient(150deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-44 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-disc { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-34 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-2-de24 { background-image: linear-gradient(150deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-35 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-36 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-3-4697 { background-image: linear-gradient(150deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-40 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-4-9518 { background-image: linear-gradient(155deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-5-fe95 { background-image: linear-gradient(155deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-6-b6fd { background-image: linear-gradient(155deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-7-abce { background-image: linear-gradient(155deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-8-5079 { background-image: linear-gradient(155deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-9-ea36 { background-image: linear-gradient(155deg, #C9A227 0%, #A8851C 100%) !important; }
#tgm-hero { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-grad-10-c50c { background-image: linear-gradient(150deg, #0C2E5C 0%, #071F3F 100%) !important; }

/* Partner page hero - pinned by ID, see gotcha 5 */
#tgm-hero-139 { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }

/* ---- tgm-header-nav-fit: keep the menu out of the logo ----
   Xpro's horizontal navbar is justify-content:right, flex-wrap:nowrap and
   overflow:visible. When the menu is wider than its column the surplus does not
   wrap or shrink - it spills LEFT, straight over the logo. Adding Membership
   (a 9th top-level item) pushed it past that edge and Home landed on the mark.

   Each item carried 36px of horizontal spacing (8px padding + 10px margin a
   side) across 8 items. Trimming that reclaims enough width for the menu to sit
   inside its own column again.

   If another top-level item is ever added, MEASURE: the first menu item's left
   edge must stay right of the logo block's right edge. Nesting the new item
   under an existing parent is the safer move. 
*/
.xpro-theme-builder-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link {
  margin-left: 4px;
  margin-right: 4px;
  padding-left: 6px;
  padding-right: 6px;
}
/* ---- tgm-header-panel-band: hand 1025-1199px to the panel menu ----
   The logo block is a fixed 246px (60px mark + 186px wordmark) sitting in a
   column that is a PERCENTAGE of the row. Below roughly 1250px that column is
   narrower than its own contents, so the right-aligned menu - nowrap, overflow
   visible - spills back left across the logo. No amount of spacing or label
   trimming fixes that band: the logo alone eats a quarter of the row.

   Xpro only offers Tablet (1025px) or Mobile (768px) for its Responsive
   Breakpoint, so the panel is extended upward here using Xpro's own rules,
   copied from xpro-responsive.css. Below 1025px Xpro already does this, so this
   band stops at 1199px and does not fight it.

   Xpro's script hardcodes `let p = "tablet" === responsive_show ? 1025 : 768`
   and only wires the submenu arrows below p, so in this band the arrows cannot
   toggle. Submenus are therefore pinned open and the arrows hidden - the panel
   reads as one expanded list. The open/close toggle itself is NOT breakpoint
   gated, so the hamburger works normally.
*/
@media screen and (min-width: 1025px) and (max-width: 1199px) {
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet {
    position: fixed; height: 100vh; width: 400px; max-width: 100%;
    right: 0; top: 0; text-align: right; background-color: #F5F2EA;
    padding: 30px; overflow: auto; z-index: 999;
    transform: translate3d(100%, 0, 0);
    transition: transform .5s;
  }
  .admin-bar .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet { top: 32px; }
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet.active { transform: translate3d(0, 0, 0); }

  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet ~ .xpro-elementor-horizontal-menu-overlay,
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet ~ .xpro-elementor-horizontal-menu-toggler-wrapper { display: block; }
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-menu-close { display: inline-flex; }

  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column; align-items: flex-start; padding-top: 20px;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li {
    position: relative; width: 100%;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
    margin: 0; width: 100%; min-height: 30px; padding: 16px 0;
    justify-content: flex-start; border-bottom: 1px solid #E2E0D8;
  }

  /* submenus stay open; the arrows cannot work up here, so hide them */
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu {
    position: relative; left: 0; width: 100%; min-width: 100%; max-width: 100%;
    opacity: 1; visibility: visible; transform: none;
    display: block !important; box-shadow: none !important;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-dropdown-menu > li > a {
    padding-left: 16px; border-bottom: 1px solid #EDE8DB;
  }
  .xpro-theme-builder-header .xpro-elementor-horizontal-menu-responsive-tablet .xpro-dropdown-menu-toggle { display: none !important; }
}

/* Events and Gallery heroes - pinned by ID, see gotcha 5 */
#tgm-hero-events { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }
#tgm-hero-gallery { background-image: linear-gradient(158deg, #0C2E5C 0%, #071F3F 100%) !important; }