/**
 * File: footer-columns.css
 * Purpose: Styles for the main footer information area, including multi-column layout, toggles, and social links.
 * Usage: Used in `footer.php` as the primary section above the legal footer, often containing links, store locations, contact, and social media.
 * Dependencies: Divi (base structure), ETmodules icon font (for toggle arrows)
 *
 * Notes:
 * - Responsive layout for desktop, tablet, and mobile
 * - Custom toggle styling using `<details>` and `<summary>`
 * - Social link styling included
 * - Controlled via CSS variables for full visual flexibility
 */


/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.footer-columns {
  --footer-columns-bg-color: var(--tan-lighter);
  --footer-columns-border-top-color: var(--tan-medium);
  --footer-columns-font-color: var(--brown-dark);
  --footer-columns-link-color: var(--brown-dark);
  --footer-columns-link-hover-color:var(--brand-orange-medium);
  --footer-columns-link-underline-color: var(--brand-yellow-trans-full);
  --footer-columns-link-hover-underline-color: var(--brand-yellow-trans-none);
  --footer-columns-arrow-color: var(--brand-orange-medium);
  --footer-columns-accent-color: var(--brand-orange-medium);
  --footer-columns-social-color: var(--brown-dark);
  --footer-columns-social-hover-color: var(--brand-orange-medium);
}



/* Footer Information Columns */
.footer-columns {
  background-color: var(--footer-columns-bg-color);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px 45px;
  line-height:2em;
  z-index: 1;
  position: relative;
  border-width: 1px 0!important;
  border: solid var(--footer-columns-border-top-color);
}

.footer-column {
  width: 21%;
}

.footer-column:last-of-type {
    width: 13%;
}

.footer-column h4
  {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--footer-columns-font-color);
}

.footer-columns a,
.footer-column ul li > p {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: var(--footer-columns-link-color);
  text-decoration: underline solid var(--footer-columns-link-underline-color) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 5px !important;

}

.footer-columns a {
  white-space: nowrap;
  transition: color 300ms ease-in-out;
}

.footer-column ul li > p {
  padding: 4px 0px 12px 6px;
  margin: 0;
}

.footer-columns a:hover {
  color: var(--footer-columns-link-hover-color);
  font-weight: 800;
  text-decoration: underline solid var(--footer-columns-link-hover-underline-color) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 5px !important;
}

#affiliation ul {
    padding-left: 5px;
}

@media (max-width: 820px) and (min-width: 769px) {
  #affiliation ul {
    padding-left: 0;
    display: flex;
  }

  #affiliation ul li {
    width: 23%;
    padding: 5px;
    display: flex;
  }
}


@media (max-width: 768px) {
  #affiliation ul {
    padding-left: 0;
    display: flex;
  }

  #affiliation ul li {
    padding: 5px;
    display: flex;
  }
}



/* Toggle Sections (Locations, Brands, etc.) */

.footer-columns details {
  interpolate-size: allow-keywords;
}

.footer-columns details::details-content {
  transition: block-size 1s, content-visibility 1s allow-discrete;
  overflow: hidden;
  block-size: 0;
}

.footer-columns details[open]::details-content {
  block-size: auto;
}

.footer-columns details > summary {
  padding: 2px 6px;
  width: 100%;
  border: none;
  cursor: pointer;
  list-style: none;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--footer-columns-font-color);
  font-size: 12px;
  letter-spacing:0.5px;
  text-decoration: underline solid var(--footer-columns-link-underline-color) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 5px !important;
  transition: color 300ms ease-in-out;
}

.footer-columns details > summary:hover {
  color: var(--footer-columns-link-hover-color);
  font-weight: 800;
  text-decoration: underline solid var(--footer-columns-link-hover-underline-color) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 5px !important;
}

.footer-columns summary::-webkit-details-marker {
  display: none;
}

.footer-columns summary::after {
  font-family: ETmodules !important;
  font-weight: 400 !important;
  content: "\43";
  float: right;
  color: var(--footer-columns-arrow-color);
  padding-right: 20px;
}

.footer-columns details[open] summary:after {
    content: "\42";
}

.footer-columns details > p {
  padding: 2px 0px 2px 20px;
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.footer-columns details > p.accent {
  color: var(--footer-columns-accent-color);
}

.footer-columns details > p a {
  font-size: 11px!important;
  transition: color 300ms ease-in-out;
}

.footer-columns details > p a:hover {
  color: var(--footer-columns-link-hover-color);
}


/* Follow Us (Social Media) */

.social-links {
    display: flex;
    padding: 5px;
}

.social-links a {
  font-size: 16px;
  margin-right: 20px;
  text-decoration: none;
  color: var(--footer-columns-social-color);
  transition: color 300ms ease-in-out;
}

.social-links a:hover {
    color: var(--footer-columns-social-hover-color);
}




/* --- Footer Media Queries --- */

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
    .footer-column {
        width: 44%;
        margin-bottom: 3vh;
    }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
    .footer-columns {
        flex-direction: column;
    }

    .footer-column {
        width: 100%;
        margin-bottom: 6vh;
    }
    
    .footer-column:last-of-type {
        width: 100%;
        margin-bottom: 0vh;
    }
    
    
}