/*
=====================================================
ADVANCED HOVER ACCORDION (v5 - Final)
=====================================================
*/

/* --- 1. The Main Row (the Flex Container) --- */
.my-hover-accordion {
  display: flex;
  width: 100%;
  overflow: hidden;
  height: 500px; /* Set your fixed height */
  background: linear-gradient(
    to bottom, 
    #0b391c 50%, 
    #e1ded6 50%
  );
}

/* --- 2. The Column (the Accordion Card) --- */
.accordion-card {
  flex: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: flex 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 100%; 
  margin: 0 10px;
}
.accordion-card > .vc_column-inner {
  background-size: cover !important;
  background-position: center !important;
}
/* --- 3. The Hover Effect --- */
.accordion-card:hover {
  flex: 4.50; /* 70/15/15 split */
}

/* --- 4. The "Collapsed" Title (White Text) --- */
.top-text-collapsed {
  /* --- THIS IS FIX 1 --- */
  position: absolute; /* Pulls it out of the layout flow */
  top: 0;
  left: 0;
  width: 100%;
  /* --------------------- */
  
  z-index: 10;
  padding: 40px;
  opacity: 1;
  transition: opacity 0.1s ease-out;
}

/* --- 5. The "Expanded" Panel (Colored BG) --- */
.inner-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  opacity: 0;
  transition: opacity 0.5s ease-in;
  transition-delay: 0.2s;
  min-width: 600px; /* Or 35rem, etc. */
  z-index: 5; /* Sits BEHIND the collapsed text by default */
}

/*
=====================================================
HOVER STATE LOGIC (The "Swap")
=====================================================
*/

/* 1. HIDE the "Collapsed" (white) text */
.accordion-card:hover .top-text-collapsed {
  opacity: 0;
  transition-delay: 0s; /* Hide it instantly */
}

/* 2. SHOW the "Expanded" (colored) panel */
.accordion-card:hover .inner-content {
  opacity: 1;
  z-index: 20; /* Bring it IN FRONT of the old text */
}

/*
=====================================================
WPBakery "Height Hell" & Spacer Fixes
=====================================================
*/


/* Fixes the wrappers for the OUTER column */
.accordion-card > .vc_column-inner,
.accordion-card > .vc_column-inner > .wpb_wrapper {
  height: 100% !important; /* <-- FORCED */
}

/* Fixes the wrappers for the INNER row */
.inner-content > .vc_column_container,
.inner-content > .vc_column_container > .vc_column-inner {
  height: 100% !important; /* <-- FORCED */
}

.flex-spacer .wpb_wrapper {
  /* This turns it on */
  display: flex !important;
  flex-direction: column !important;
  
  /* This forces it to fill the height */
  height: 100% !important; 
  
  /* THIS IS THE MAGIC:
     It puts the first child at the top,
     the last child at the bottom,
     and all empty space "in between".
  */
  justify-content: space-between !important;
}
/*
=====================================================
INITIAL EXPANDED STATE (Desktop Only)
=====================================================
*/

@media (min-width: 1025px) {
  
  /* 1. On page load, expand the first card... */
  .initial-expand-first .accordion-card:first-child {
    flex: 4.50;
  }
  /* ...show its inner content... */
  .initial-expand-first .accordion-card:first-child .inner-content {
    opacity: 1;
    z-index: 20; /* Bring it to the front */
  }
  
  /* --- THIS IS FIX 2 --- */
  /* ...and HIDE its collapsed text. */
  .initial-expand-first .accordion-card:first-child .top-text-collapsed {
    opacity: 0;
  }
  /* ----------------------- */

  /* 2. When you hover the *whole container*... */
  .initial-expand-first:hover .accordion-card:first-child {
    /* ...reset the first card... */
    flex: 1;
  }
  .initial-expand-first:hover .accordion-card:first-child .inner-content {
    /* ...and hide its content... */
    opacity: 0;
    z-index: 5; /* Send it to the back */
  }
  .initial-expand-first:hover .accordion-card:first-child .top-text-collapsed {
    /* ...and show the collapsed text again. */
    opacity: 1;
  }

  /* 3. ...UNLESS you are hovering the first card itself! */
  .initial-expand-first:hover .accordion-card:first-child:hover {
    /* ...in which case, keep it expanded. */
    flex: 4.50;
  }
  .initial-expand-first:hover .accordion-card:first-child:hover .inner-content {
    /* ...and keep its content visible. */
    opacity: 1;
    z-index: 20;
  }
  .initial-expand-first:hover .accordion-card:first-child:hover .top-text-collapsed {
    /* ...and keep its collapsed text hidden. */
    opacity: 0;
  }
}


/*
=====================================================
MOBILE FALLBACK
=====================================================
*/
@media (max-width: 1024px) {
  
  /* 1. Reset the main container to vertical */
  .my-hover-accordion {
    flex-direction: column;
    height: auto; /* Let content define the height */
  }

  /* 2. Reset the cards to be full-width blocks */
  .accordion-card {
    width: 100%;
    flex: 1 1 auto; /* Reset flex-grow/shrink */
    transition: height 0.5s ease-in-out; /* Animate height */
    height: 150px; /* Set a collapsed height - increased for better visibility */
    margin: 10px 0; /* Vertical spacing instead of horizontal */
  }
  
  /* 3. On hover/tap, expand the height */
  .accordion-card:hover {
    height: 470px; /* Set expanded height to match desktop */
    flex: 1 1 auto; /* Reset flex */
  }
  
  /* 4. On mobile, just hide the collapsed text on hover */
  .accordion-card:hover .top-text-collapsed {
    opacity: 0;
  }
  
  /* 5. On mobile, show the expanded panel on hover */
  .accordion-card:hover .inner-content {
    opacity: 1;
    transition-delay: 0s; /* Fade in immediately */
  }
  
  /* 6. Fix the spacer for vertical stacking */
  .flex-spacer > .vc_column-inner > .wpb_wrapper {
    height: 100%;
    min-width: auto; /* Remove fixed width on mobile */
  }
  
  /* 7. Initial expand for mobile - expand the first card on load */
  .initial-expand-first .accordion-card:first-child {
    height: 470px; /* Expanded height */
  }
  
  .initial-expand-first .accordion-card:first-child .inner-content {
    opacity: 1;
    z-index: 20;
  }
  
  .initial-expand-first .accordion-card:first-child .top-text-collapsed {
    opacity: 0;
  }
  
  /* 8. Collapse first card when any other card is hovered (using :has selector) */
  .initial-expand-first:has(.accordion-card:not(:first-child):hover) .accordion-card:first-child {
    height: 150px;
  }
  
  .initial-expand-first:has(.accordion-card:not(:first-child):hover) .accordion-card:first-child .inner-content {
    opacity: 0;
    z-index: 5;
  }
  
  .initial-expand-first:has(.accordion-card:not(:first-child):hover) .accordion-card:first-child .top-text-collapsed {
    opacity: 1;
  }
  
  /* 9. Remove min-width constraint on inner content for mobile */
  .inner-content {
    min-width: auto;
  }
}



/*
=====================================================
CUSTOM TABS STYLES (v5 - Final Border Fix)
=====================================================
*/

/* 1. Force the tabs list to be a full-width flex container */
.my-full-width-tabs .vc_tta-tabs-list {
  display: flex !important;
  width: 100% !important;
  justify-content: space-between;
  gap: 40px;
  
  /* Keep tabs inset from the row edges */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. Style the INACTIVE tab */
.my-full-width-tabs .vc_tta-tab {
  flex: 1 !important;
  text-align: center !important;
  
  /* --- UNSELECTED STATE --- */
  background: transparent !important; /* 'clear' */
  border: 1px solid #0B391C !important; /* Your 4-sided border */
}

/* 3. Remove default WPBakery junk */
.my-full-width-tabs .vc_tta-tabs-container {
  border: none !important;
}

.my-full-width-tabs:not(.my-padded-tab) .vc_tta-tabs-container {
    padding-left: 60px;
    padding-right: 60px;
}

.my-full-width-tabs .vc_tta-tab > a {
  /* --- THIS IS THE FIX --- */
  /* This forces the link to stop overlapping its parent */
  position: static !important;
  top: auto !important;
  /* ----------------------- */
  
  /* This removes the default underline/bottom-border */
  border: none !important; 
  outline: none !important;
  box-shadow: none !important;
  
  background: none !important;
  padding: 1em !important;
  margin: 0 !important;
  
  /* --- UNSELECTED TEXT COLOR --- */
  color: #0B391C !important;
}

/* 4. Style the ACTIVE button */
.my-full-width-tabs .vc_tta-tab.vc_active {
  /* --- SELECTED STATE --- */
  background: #0B391C !important;
  border-color: #0B391C !important;
}

/* 5. Style the ACTIVE text */
.my-full-width-tabs .vc_tta-tab.vc_active a {
  /* --- SELECTED TEXT COLOR --- */
  color: #E7EC05 !important;
}

/* 6. Tab panels container styling */
.my-full-width-tabs .vc_tta-panels {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
}

/* 7. Removes the padding from the panel body */
.my-full-width-tabs .vc_tta-panel-body {
  padding: 0 !important;
}

/* 8. Fade in/out animation for tab content (removes slide animation) */
.my-full-width-tabs .vc_tta-panels,
.my-full-width-tabs .vc_tta-panels-container {
  height: auto !important;
  overflow: visible !important;
  transition: none !important;
  transform: none !important;
}

.my-full-width-tabs .vc_tta-panel {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity 0.45s ease-in-out, visibility 0s 0.45s !important;
}

.my-full-width-tabs .vc_tta-panel.vc_active {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: opacity 0.45s ease-in-out, visibility 0s !important;
}

.my-full-width-tabs .vc_tta-panel-body {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* 8a. Remove column/row spacing that WPBakery adds below the tabs */
.vc_column-inner:has(.my-full-width-tabs),
.vc_row:has(.my-full-width-tabs) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.my-full-width-tabs,
.my-full-width-tabs .vc_tta-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 8b. Edge-to-edge panel content while keeping tab gutter (all breakpoints) */
.my-full-width-tabs .vc_tta-panels,
.my-full-width-tabs .vc_tta-panels-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-full-width-tabs .vc_tta-panel-body > .wpb_wrapper,
.my-full-width-tabs .vc_tta-panel-body > .wpb_wrapper > .vc_row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 9. Mobile fixes for tab styling */
@media (max-width: 1024px) {
  /* Ensure tabs stack vertically or adjust on mobile */
  .my-full-width-tabs .vc_tta-tabs-list {
    flex-wrap: wrap !important;
  }
  
  /* Force colors on mobile */
  .my-full-width-tabs .vc_tta-tab {
    background: transparent !important;
    border: 1px solid #0B391C !important;
    min-width: 45% !important; /* Adjust as needed */
  }
  
  .my-full-width-tabs .vc_tta-tab > a {
    color: #0B391C !important;
  }
  
  .my-full-width-tabs .vc_tta-tab.vc_active {
    background: #0B391C !important;
    border-color: #0B391C !important;
  }
  
  .my-full-width-tabs .vc_tta-tab.vc_active a {
    color: #E7EC05 !important;
  }
}

/* 10. Extra-small screens (force default accordion behaviour) */
@media (max-width: 767px) {
  /* Let WPBakery accordion behaviour take over */
  .my-full-width-tabs .vc_tta-panels,
  .my-full-width-tabs .vc_tta-panels-container {
    position: relative !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .my-full-width-tabs .vc_tta-panel {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    transition: none !important;
  }

  .my-full-width-tabs .vc_tta-panel-body {
    transition: none !important;
	border: none !important;
  }

  /* Style accordion headings */
  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel {
    border: 1px solid #0B391C !important;
    margin-bottom: 15px !important;
    background: transparent !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }
	
	.my-full-width-tabs:not(.my-padded-tab) .vc_tta-tabs-container {
		padding-left: 0;
		padding-right: 0;
	}

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel-heading {
    background: transparent !important;
    border: none !important;
    padding: 1em !important;
    display: block !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel-heading a,
  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel-heading .vc_tta-title-text,
  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel-heading .vc_tta-title-text span {
    color: #0B391C !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel.vc_active {
    background: #0B391C !important;
    border-color: #0B391C !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading a {
    color: #E7EC05 !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading {
    background: #0B391C !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel:not(.vc_active) .vc_tta-panel-heading {
    background: transparent !important;
    border: 1px solid #0B391C !important;
    overflow: hidden;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel:not(.vc_active) .vc_tta-panel-heading a,
  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel:not(.vc_active) .vc_tta-panel-heading .vc_tta-title-text,
  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel:not(.vc_active) .vc_tta-panel-heading .vc_tta-title-text span {
    color: #0B391C !important;
    background: transparent !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel .vc_tta-panel-body {
    background: #E7EC05 !important;
    color: #0B391C !important;
    border-top: 1px solid #0B391C !important;
  }

  .my-full-width-tabs .vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-body {
    background: #E7EC05 !important;
  }

  /* If WPBakery keeps tabs markup on mobile, force colors */
  .my-full-width-tabs .vc_tta-tabs-list {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .my-full-width-tabs .vc_tta-tabs-list .vc_tta-tab {
    margin: 0 !important;
    width: 100% !important;
  }

  .my-full-width-tabs .vc_tta-tabs-list .vc_tta-tab > a {
    display: block !important;
    background: transparent !important;
    color: #0B391C !important;
    border: 1px solid #0B391C !important;
    padding: 1em !important;
  }

  .my-full-width-tabs .vc_tta-tabs-list .vc_tta-tab.vc_active > a {
    background: #0B391C !important;
    color: #E7EC05 !important;
    border-color: #0B391C !important;
  }

  /* Catch-all fallbacks for any remaining headings */
  .my-full-width-tabs .vc_tta-panel-title,
  .my-full-width-tabs .vc_tta-panel-title > a,
  .my-full-width-tabs .vc_tta-panel-title > a span,
  .my-full-width-tabs .vc_tta-panel-title > a .vc_tta-title-text {
    background: transparent !important;
    color: #0B391C !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .my-full-width-tabs .vc_tta-panel.vc_active .vc_tta-panel-title,
  .my-full-width-tabs .vc_tta-panel.vc_active .vc_tta-panel-title > a,
  .my-full-width-tabs .vc_tta-panel.vc_active .vc_tta-panel-title > a span,
  .my-full-width-tabs .vc_tta-panel.vc_active .vc_tta-panel-title > a .vc_tta-title-text {
    background: #0B391C !important;
    color: #E7EC05 !important;
    border: none !important;
  }

  /* Ensure inactive panel headings keep outer border */
  .my-full-width-tabs .vc_tta-panel-heading {
    border: 1px solid #0B391C !important;
    background: transparent !important;
	overflow: hidden !important;
	margin: 15px !important;
  }

  .my-full-width-tabs .vc_tta-panel.vc_active .vc_tta-panel-heading {
    border-color: #0B391C !important;
    background: #0B391C !important;
  }
}