/* SCSS for etfs landing page */
/* Smooth scrolling for the whole page */
html {
  scroll-behavior: smooth;
}

/* Scroll offset to account for any fixed headers */
#funds-tabs {
  scroll-margin-top: 100px;
}

.etfs-landing-page .default-table-wrapper {
  padding-bottom: var(--wp--preset--spacing--x-large);
}
.etfs-landing-page .funds {
  padding-top: 44px;
}
.etfs-landing-page .funds .title-wrap {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.etfs-landing-page .funds .title-wrap h2 {
  padding: 0;
  margin: 0;
  line-height: 1;
}
.etfs-landing-page .funds tr.fund-type-header td {
  font-size: 1.6rem;
  padding: 30px 12px 20px 12px;
}
.etfs-landing-page .funds tr.parent-fund-header {
  background-color: #F6f6f6;
  border: 1px solid var(--wp--preset--color--light-blue);
}
.etfs-landing-page .funds tr.parent-fund-header td {
  padding: 20px 12px;
}
.etfs-landing-page .funds tr:not(.fund-type-header) {
  border-left: 1px solid var(--wp--preset--color--light-blue);
  border-right: 1px solid var(--wp--preset--color--light-blue);
}
.etfs-landing-page .funds tr td.ticker a {
  font-weight: 700;
  text-decoration: none;
}
.etfs-landing-page .funds table.default-table {
  /* Mobile responsive accordion and stacked cards - 782px breakpoint */
  /* Desktop - hide accordion toggle icon */
}
.etfs-landing-page .funds table.default-table thead {
  background-color: var(--wp--preset--color--dark-blue);
}
.etfs-landing-page .funds table.default-table thead tr {
  background-color: var(--wp--preset--color--dark-blue) !important;
}
.etfs-landing-page .funds table.default-table thead th {
  background-color: var(--wp--preset--color--dark-blue);
}
.etfs-landing-page .funds table.default-table thead th.ticker {
  min-width: 75px;
}
.etfs-landing-page .funds table.default-table thead th.date {
  padding: 12px;
  font-weight: normal;
  font-size: 14px;
}

.performance-loading, .monthly-yields-loading, .dividends-loading, .holdings-loading, .documents-loading, .etf-performance-loading, .etf-documents-loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}
.performance-loading p, .monthly-yields-loading p, .dividends-loading p, .holdings-loading p, .documents-loading p, .etf-performance-loading p, .etf-documents-loading p {
  margin: 0;
  font-size: 1.1em;
}
.performance-loading:after, .monthly-yields-loading:after, .dividends-loading:after, .holdings-loading:after, .documents-loading:after, .etf-performance-loading:after, .etf-documents-loading:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  border-top-color: #333;
  animation: spin 1s ease-in-out infinite;
  margin-left: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Dropdown for financial reports in documents table */
.dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.dropdown-toggle {
  cursor: pointer;
  color: var(--wp--preset--color--main-blue);
  text-decoration: underline;
}

.dropdown-menu {
  position: absolute;
  left: 0;
  top: 110%;
  min-width: 120px;
  background: #fff;
  border: 1px solid #979797;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 100;
  display: none;
  flex-direction: column;
  padding: 8px 0;
  transition: opacity 0.2s;
}

.dropdown-menu a {
  display: block;
  padding: 8px 18px;
  color: var(--wp--preset--color--dark-gray);
  text-decoration: none;
  font-size: 0.95em;
  transition: background 0.2s;
}

.dropdown-menu a:hover {
  background: var(--wp--preset--color--main-blue, #0073e6);
  color: #fff;
}

/* Show dropdown on hover (for accessibility, but JS controls display) */
.dropdown:hover .dropdown-menu {
  display: block;
}
@media screen and (min-width: 783px) {
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header .accordion-toggle {
    display: none;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr {
    display: table-row;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .mobile-date-display,
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .mobile-divider {
    display: none;
  }
}
@media screen and (max-width: 782px) {
  .etfs-landing-page .funds table.default-table thead th.date {
    font-size: 12px;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table {
    padding-top: 1px;
    min-width: auto !important;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table, .etfs-landing-page .funds table.default-table.responsive-accordion-table thead, .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody, .etfs-landing-page .funds table.default-table.responsive-accordion-table tr, .etfs-landing-page .funds table.default-table.responsive-accordion-table th, .etfs-landing-page .funds table.default-table.responsive-accordion-table td {
    display: block;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table thead {
    display: none;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header {
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-top: -1px;
    border-left: 1px solid var(--wp--preset--color--light-blue);
    border-right: 1px solid var(--wp--preset--color--light-blue);
    border-bottom: 1px solid var(--wp--preset--color--light-blue);
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header td {
    padding: 0;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header .parent-fund-header-content {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: 1.2;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header .parent-fund-header-content strong {
    flex: 1;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header .parent-fund-header-content .disclaimer {
    font-size: var(--wp--preset--font-size--x-small);
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header .accordion-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none"><path d="M9.42478 9.00621V15H5.57522V9.00621H0V5.74534H5.57522V0H9.42478V5.74534H15V9.00621H9.42478Z" fill="%230048C4"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .parent-fund-header.active .accordion-toggle {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="4" viewBox="0 0 15 4" fill="none"><path d="M0 3.26087V0H15V3.26087H0Z" fill="%230048C4"/></svg>');
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) {
    display: none;
    padding: 15px 0;
    background-color: #F6f6f6;
    border-bottom: 1px solid var(--wp--preset--color--light-blue);
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header).visible {
    display: flex;
    flex-wrap: wrap;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header).visible:last-of-type {
    margin-bottom: 20px;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 8px 15px;
    border: none;
    background: none;
    flex: 1 0 auto;
    box-sizing: border-box;
    position: relative;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:before {
    content: attr(data-label);
    font-weight: bold;
    flex-shrink: 0;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:nth-child(1) {
    flex: 1 0 100%;
    background-color: var(--wp--preset--color--dark-blue);
    color: white;
    padding: 12px 15px;
    margin: -15px 0 15px 0;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    text-align: left;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:nth-child(1) br, .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:nth-child(1):before {
    display: none;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:nth-child(1) a {
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:nth-child(1) a:after {
    content: "";
    mask-image: url("/wp-content/themes/americanbeacon/assets/images/arrow-right.svg");
    mask-size: cover;
    display: block;
    width: 9px;
    height: 14px;
    background-color: #FFFFFF;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:nth-child(1) span {
    padding-top: 0 !important;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label=NAV], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Daily Change($)"] {
    flex: 1 0 50%;
    max-width: 50%;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label=NAV]:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1px solid var(--wp--preset--color--light-blue);
    width: 1px;
    height: 50%;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="YTD(%)"] {
    flex: 1 0 100%;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="1 Month"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="3 Year"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Gross Exp. Ratio"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Net Exp. Ratio"] {
    display: none;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label=YTD], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="1 Year"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="5 Year"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="10 Year"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Since Incep."] {
    flex: 1 0 auto;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label=YTD]:after, .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="1 Year"]:after, .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="5 Year"]:after, .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="10 Year"]:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1px solid var(--wp--preset--color--light-blue);
    width: 1px;
    height: 50%;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Class Incep. Date"], .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Prior Class Incep. Date"] {
    flex: 1 0 50%;
    max-width: 50%;
    align-items: center;
    order: 100;
    max-width: 200px;
    font-size: 12px;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Class Incep. Date"] br, .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Prior Class Incep. Date"] br {
    display: none;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Class Incep. Date"] {
    margin-left: auto;
    margin-right: auto;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) td[data-label="Prior Class Incep. Date"] {
    margin-right: auto;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) .mobile-date-display {
    flex: 1 0 100%;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-style: italic;
    color: #666;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: normal;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) .mobile-date-display::after {
    content: "";
    display: none;
    width: 100%;
    height: 1px;
    background-color: var(--wp--preset--color--light-blue);
    margin: 15px 0 0 0;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) .mobile-date-display::after {
    display: block;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header) .mobile-divider {
    flex: 1 0 100%;
    width: 100%;
    height: 1px;
    background-color: var(--wp--preset--color--light-blue);
    margin: 15px 0;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) .mobile-date-display,
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) .mobile-divider {
    order: 50;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) td[data-label="Class Incep. Date"],
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) td[data-label="Prior Class Incep. Date"] {
    order: 100;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) td[data-label="Class Incep. Date"] br,
  .etfs-landing-page .funds table.default-table.responsive-accordion-table tbody > tr:not(.fund-type-header):not(.parent-fund-header):has([data-label="Gross Exp. Ratio"]) td[data-label="Prior Class Incep. Date"] br {
    display: none;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table.documents tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:not(.ticker) {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    box-sizing: border-box;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table.documents tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:not(.ticker):nth-child(3n+2):not(:last-child), .etfs-landing-page .funds table.default-table.responsive-accordion-table.documents tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:not(.ticker):nth-child(3n+3):not(:last-child) {
    position: relative;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table.documents tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:not(.ticker):nth-child(3n+2):not(:last-child):after, .etfs-landing-page .funds table.default-table.responsive-accordion-table.documents tbody > tr:not(.fund-type-header):not(.parent-fund-header) td:not(.ticker):nth-child(3n+3):not(:last-child):after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-right: 1px solid var(--wp--preset--color--light-blue);
    width: 1px;
    height: 50%;
  }
  .etfs-landing-page .funds table.default-table.responsive-accordion-table .hide-mobile {
    display: none !important;
  }
}