/**
 * Global Footer Styles - GDS3 version
 *
 * This file contains all the styling for the global footer component used across the FIL websites.
 * The footer is structured with multiple sections:
 * - Links groups section (top)
 * - Pure Disclaimer
 * - Logo and social media section
 * - Disclaimer sections (text and links)
 * - Copyright and legal links section (bottom)
 *
 * All sections maintain consistent styling with proper spacing, separators between links,
 * and responsive design adjustments for different screen sizes.
 */
.fil-global-footer-new {
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: fil-footer;
  /**
    * Override CSS variables for the fil-accordion component
    */
  --fil-accordion-focus-color: var(--fil-color-base-grey-700);
  --fil-accordion-title-color: var(--fil-color-base-grey-800);
  --fil-accordion-title-hover-color: var(--fil-color-base-grey-700);
  --fil-accordion-title-focus-color: var(--fil-color-base-grey-700);
  --fil-accordion-title-active-color: var(--fil-color-base-grey-800);
}
/**
  * Global link styles - Make all links grey-800
  * Using high-priority to override any other styles
  */
.fil-global-footer-new a {
  
  color: var(--fil-color-base-grey-800);
  text-decoration: none;
}
.fil-global-footer-new a:hover,
.fil-global-footer-new a:focus {
  color: var(--fil-color-base-grey-700);
  text-decoration: underline;
}
.fil-global-footer-new a fil-icon {
  color: var(--fil-color-base-grey-800) !important;
}
/**
  * Main container for each footer section
  *
  * The footer is divided into multiple horizontal sections, each with its own background
  * color and content. Each section shares some common properties like width, padding,
  * and maximum width for the inner content.
  */
.fil-global-footer-new .footer-inner-container {
  width: 100%;
  background-color: var(--fil-color-base-grey-050);
}
.fil-global-footer-new .footer-inner-container > * {
  max-width: 90rem;
  margin: 0 auto;
  padding: 2.5rem;
  box-sizing: border-box;
}

/**
  * First section - Links group section
  *
  * Contains a responsive grid of link columns that adapts based on the number of columns.
  * The grid automatically adjusts from 2 to 4 columns depending on content.
  */
.fil-global-footer-new .footer-inner-container .links-group {
  margin-top: 1.75rem !important;
}
.fil-global-footer-new .footer-inner-container:first-child {
  background-color: var(--fil-color-base-grey-025);
}
.fil-global-footer-new .footer-inner-container:first-child .links-group {
  padding-top: 1rem;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  box-sizing: border-box;
}
.fil-global-footer-new .footer-inner-container:first-child .links-group > * {
  min-height: 7.5rem;
}
.fil-global-footer-new .footer-inner-container:first-child .links-group:has(>div:nth-of-type(3)) {
  grid-template-columns: repeat(3, 1fr);
}
.fil-global-footer-new .footer-inner-container:first-child .links-group:has(>div:nth-of-type(4)) {
  grid-template-columns: repeat(4, 1fr);
}
.fil-global-footer-new .footer-inner-container:first-child .links-group .no-bullet {
  margin-bottom: 0;
}
/* Add the separator between links in the disclaimer section */
.fil-global-footer-new .footer-inner-container:nth-child(2) {
  border-bottom: 1px solid #b9bdc4;
}

/**
  * Disclaimer pure section
  *
  * Ensure disclaimer-pure-section links use blue-500
  */
.fil-global-footer-new .footer-inner-container.disclaimer-pure-section p {
  font-size: 1.125rem !important;
  margin-bottom: 0 !important;
}
.fil-global-footer-new .footer-inner-container.disclaimer-pure-section a {
  color: var(--fil-color-base-blue-500) !important;
  text-decoration: none;
}
.fil-global-footer-new .footer-inner-container.disclaimer-pure-section a:hover,
.fil-global-footer-new .footer-inner-container.disclaimer-pure-section a:focus {
  color: var(--fil-color-base-blue-600) !important;
  text-decoration: underline;
}
.fil-global-footer-new .footer-inner-container.disclaimer-pure-section a:visited {
  color: var(--fil-color-base-blue-500) !important;
}

/**
  * Logo and social section
  *
  * Contains the FIL and FMR logos on the left and social media icons on the right.
  * Uses flexbox for proper alignment and spacing between elements.
  * Layout changes to a vertical stack on mobile devices.
  */
.fil-global-footer-new .footer-inner-container.logo-social-section .footer-logo-social-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Logo container styling */
.fil-global-footer-new .footer-inner-container.logo-social-section .logo-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}
.fil-global-footer-new .footer-inner-container.logo-social-section .logo-container .fil-logo,
.fil-global-footer-new .footer-inner-container.logo-social-section .logo-container .fmr-logo {
  display: inline-block;
}
/* Social links container */
.fil-global-footer-new .footer-inner-container.logo-social-section .social-links-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2.375rem;
  justify-content: flex-end;
  align-items: center;
}
/* Ensure social media links don't have separator styles applied */
.fil-global-footer-new .footer-inner-container.logo-social-section .social-links-container a {
  position: relative;
}

/**
  * Bottom links section with disclaimer links
  *
  * Contains disclaimer text and links with visual separators between links.
  * All links are centered with proper spacing and separators are created using CSS.
  * JavaScript helps with removing any text-based separators ("|") and provides consistent spacing.
  */
.fil-global-footer-new
  .footer-inner-container.logo-social-section
  .social-links-container
  a::after {
  display: none !important;
}
.fil-global-footer-new .footer-inner-container.bottom-links-section {
  text-align: center;
}
.fil-global-footer-new .footer-inner-container.bottom-links-section .disclaimer-links-content {
  display: flex;
  column-gap: 2rem;
  row-gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.fil-global-footer-new .footer-inner-container.bottom-links-section .disclaimer-links-content > a {
  position: relative;
  font-size: 1rem;
  text-decoration: none;
  color: var(--fil-color-base-grey-800);
  line-height: 1rem;
}
/* Only add separator to anchor elements that are not the last child */
.fil-global-footer-new
  .footer-inner-container.bottom-links-section
  .disclaimer-links-content
  > a:not(:last-child):after {
  content: '';
  position: absolute;
  border-right: 1px solid #ccc;
  width: 0;
  height: 0.875rem;
  display: block;
  right: -0.96875rem;
  top: 1px;
}

/**
  * Legal and copyright section
  *
  * The bottom-most section containing copyright information and legal links.
  * All content is centered with visual separators between links similar to the disclaimer links.
  * On mobile, links stack vertically and separators are hidden.
  */
.fil-global-footer-new .footer-inner-container.copyright-section {
  text-align: center;
}
.fil-global-footer-new .footer-inner-container.copyright-section > div {
  padding: 0 2.5rem 2.5rem;
}
.fil-global-footer-new .footer-inner-container.copyright-section .legal-privacy-container a,
.fil-global-footer-new .footer-inner-container.copyright-section .legal-privacy-container span {
  position: relative;
  margin: 0 1rem;
}
.fil-global-footer-new
  .footer-inner-container.copyright-section
  .legal-privacy-container
  a:first-child,
.fil-global-footer-new
  .footer-inner-container.copyright-section
  .legal-privacy-container
  span:first-child {
  margin-left: 0;
}
.fil-global-footer-new
  .footer-inner-container.copyright-section
  .legal-privacy-container
  a:not(:last-child)::after,
.fil-global-footer-new
  .footer-inner-container.copyright-section
  .legal-privacy-container
  span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: var(--fil-color-base-grey-050);
}

/**
  * Remove accordion borders for desktop and tablet only (not mobile)
  * This will only apply on screens wider than 769px
  */
@container fil-footer (min-width: 1024px) {
  .fil-global-footer-new fil-accordion-item {
    --fil-accordion-border-color: transparent;
  }
}

/**
  * Tablet/small desktop mobile styles (screen width < 1281px)
  *
  * Adjustments for medium-sized screens:
  * 1. Logo container changes to vertical stack
  * 2. Social links align left instead of right
  * 3. Disclaimer links display with separators - LEFT ALIGNED
  * 4. Legal links display as block elements without separators
  */
@container fil-footer (max-width: 1024px) {
  .fil-global-footer-new .footer-inner-container > * {
    padding: 2.5rem 1.25rem;
  }

  /**
    * Disclaimer pure section
    *
    * Override font-size for smaller screens
    */
  .fil-global-footer-new .footer-inner-container.disclaimer-pure-section p {
    font-size: 1rem !important;
  }
  
  /**
      * First section - Links group section
      *
      * Contains a responsive grid of link columns that adapts based on the number of columns.
      * The grid automatically adjusts from 2 to 4 columns depending on content.
      */
  .fil-global-footer-new .footer-inner-container:first-child {
    padding-bottom: 1rem;
  }
  .fil-global-footer-new .footer-inner-container:first-child .links-group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .fil-global-footer-new .footer-inner-container:first-child .links-group > * {
    box-sizing: border-box;
    border: none;
    border-top: 0.0625rem solid var(--fil-color-base-grey-100);
    width: 100%;
    min-height: 3.75rem;
  }
  .fil-global-footer-new .footer-inner-container:first-child .links-group > .cell:first-of-type {
    border-top: none !important;
  }

  /**
    * Logo and social section
    */
  .fil-global-footer-new .footer-inner-container.logo-social-section .footer-logo-social-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .fil-global-footer-new .footer-inner-container.logo-social-section .social-links-container {
    justify-content: flex-start;
    margin-top: 1rem;
    gap: 2.375rem;
  }

  /**
    * Bottom links section with disclaimer links
    */
  .fil-global-footer-new .footer-inner-container.bottom-links-section {
    text-align: left;
  }
  .fil-global-footer-new .footer-inner-container.bottom-links-section .disclaimer-links-content {
    padding-top: 0;
    justify-content: flex-start !important;
  }

  /**
    * Legal and copyright section
    */
  .fil-global-footer-new .footer-inner-container.copyright-section .legal-privacy-container a,
  .fil-global-footer-new .footer-inner-container.copyright-section .legal-privacy-container span {
    display: block;
    margin: 0.5rem 0;
  }
  .fil-global-footer-new
    .footer-inner-container.copyright-section
    .legal-privacy-container
    a:not(:last-child)::after,
  .fil-global-footer-new
    .footer-inner-container.copyright-section
    .legal-privacy-container
    span:not(:last-child)::after {
    display: none;
  }
  /* Remove accordion borders for mobile */   
  .fil-global-footer-new fil-accordion-item {
    display: contents !important;
  }
}