/**
 * File: woo-account-nav.css
 * Purpose: Styles and responsive layout for the WooCommerce “My Account” sidebar / top navigation.
 * Coverage:
 *   • Navigation wrapper (.woocommerce-MyAccount-navigation)  
 *   • Navigation list & items (.woocommerce-MyAccount-navigation ul / li)  
 *   • Active / hover / focus states  
 *   • Icon injection via ::before for key nav links  
 *   • Scoped CSS custom-property definitions (prefixed --woo-account-nav-*)  
 *
 * Breakpoints:
 *   • 820 px (tablet) – switches nav to horizontal flex row  
 *   • 768 px (mobile) – tighter spacing & font scaling  
 *
 * Variables Introduced:
 *   --woo-account-nav-bar-*         (border, background, shadow)  
 *   --woo-account-nav-link-*        (color, bg, border, hover, active)  
 *
 * Icon Fonts:
 *   • Font Awesome  – dashboard, orders, addresses, wishlist, etc.  
 *   • ETModules     – logout icon (“\e06d”)  
 *
 * Dependencies:
 *   • WooCommerce markup (My Account template)  
 *   • Divi theme/ETModules font for logout glyph  
 *
 * Notes:
 *   • Focused **only** on navigation; content pane, forms, and notices are split to their own files.  
 *   • Keep any future nav-related overrides here to avoid cross-file drift.  
 */


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

.woocommerce {
    /* Navigation Bar */
    --woo-account-nav-bar-border-color: var(--gray-medium);
    --woo-account-nav-bar-bg-color: var(--white);
    --woo-account-nav-bar-box-shadow-color: var(--black-overlay-medium);

    /* Navigation Bar Links */
    --woo-account-nav-link-color: var(--black);
    --woo-account-nav-link-hover-color: var(--brand-accent-color);
    --woo-account-nav-link-active-color: var(--white);
    --woo-account-nav-link-active-hover-color: var(--white);

    --woo-account-nav-link-border-color: var(--gray-medium);
    --woo-account-nav-link-border-active-color: var(--brand-accent-color);

    --woo-account-nav-link-bg-color: var(--white);
    --woo-account-nav-link-bg-hover-color: var(--white);
    --woo-account-nav-link-bg-active-color: var(--brand-accent-color);
}

/* -------------------------- */



.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25%;
    margin: 0 2px;
}

/* Tablet & mobile Styles */
@media all and (max-width: 820px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    margin: 0;
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style-type: none;
    border: solid var(--woo-account-nav-bar-border-color);
    padding: 15% 10px 20% 10px;
    border-width: 0px 1px;
    background-color: var(--woo-account-nav-bar-bg-color);
    box-shadow: 0px 1px 7px 0px var(--woo-account-nav-bar-box-shadow-color);
    height: 100%;
}

/* Tablet & mobile Styles */
@media all and (max-width: 820px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
      padding: 0;
      height: auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content: space-around;
  }
}


.woocommerce-account .woocommerce-MyAccount-navigation ul::before {
    content: 'Navigation';
    font-weight: 600;
    font-size: 1.25em;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height:2.5em;
}

/* Tablet & mobile Styles */
@media all and (max-width: 820px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul::before {
      display:none;
  }
}

li.woocommerce-MyAccount-navigation-link {
    text-transform: uppercase;
    color: var(--woo-account-nav-link-color);
    border: solid var(--woo-account-nav-link-border-color);
    border-width: 1px 0px;
    display: flex;
    align-items:center;
    margin-bottom: 8px;
    background-color: var(--woo-account-nav-link-bg-color);
    transition: all 500ms ease;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  li.woocommerce-MyAccount-navigation-link {
    border-width: 0px 1px;
    flex-direction:column;
    margin: 8px 0px;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link {
    border-width: 0px;
    flex-direction:column;
    margin: 4px 0px;
    width:33%;
  }
}

li.woocommerce-MyAccount-navigation-link:hover
 {
    background-color: var(--woo-account-nav-link-bg-hover-color);
    color: var(--woo-account-nav-link-hover-color);
}

li.woocommerce-MyAccount-navigation-link.is-active:hover
 {
    background-color: var(--woo-account-nav-link-bg-active-color);
    color: var(--woo-account-nav-link-active-color);
}

li.woocommerce-MyAccount-navigation-link a {
    color: var(--woo-account-nav-link-font-color);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 15px;
    width: 100%;
    height: 100%;
    font-size: 13px;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  li.woocommerce-MyAccount-navigation-link a {
      padding: 4px 15px;
      font-size: 11px;
      line-height: 1.6em;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link a {
      padding: 4px 5px;
      font-size: 9px;
      line-height: 1.6em;
      text-align:center;
  }
}

li.woocommerce-MyAccount-navigation-link.is-active a,
li.woocommerce-MyAccount-navigation-link.is-active 
{
    color: var(--woo-account-nav-link-active-color);
    background-color: var(--woo-account-nav-link-bg-active-color);
    border-color: var(--woo-account-nav-link-border-active-color);
    border-width: 1px 0px;
}

li.woocommerce-MyAccount-navigation-link.is-active:hover a {
    color:var(--woo-account-nav-link-active-hover-color);
}

li.woocommerce-MyAccount-navigation-link:hover a {
    color:var(--woo-account-nav-link-hover-color);
}





li.woocommerce-MyAccount-navigation-link--dashboard::before,
li.woocommerce-MyAccount-navigation-link--orders::before,
li.woocommerce-MyAccount-navigation-link--edit-address::before,
li.woocommerce-MyAccount-navigation-link--edit-account::before,
li.woocommerce-MyAccount-navigation-link--wishlist::before,
li.woocommerce-MyAccount-navigation-link--customer-logout::before
 {
  font-family: FontAwesome;
  font-weight: 600;
  font-size: 2em;
  width: 18%;
  text-align: center;
  margin-left: 10px;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  li.woocommerce-MyAccount-navigation-link--dashboard::before,
  li.woocommerce-MyAccount-navigation-link--orders::before,
  li.woocommerce-MyAccount-navigation-link--edit-address::before,
  li.woocommerce-MyAccount-navigation-link--edit-account::before,
  li.woocommerce-MyAccount-navigation-link--wishlist::before,
  li.woocommerce-MyAccount-navigation-link--customer-logout::before
  {
    font-size: 1.5em;
    width: 100%;
    margin-left: 0px;
    margin-top: 8px;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link--dashboard::before,
  li.woocommerce-MyAccount-navigation-link--orders::before,
  li.woocommerce-MyAccount-navigation-link--edit-address::before,
  li.woocommerce-MyAccount-navigation-link--edit-account::before,
  li.woocommerce-MyAccount-navigation-link--wishlist::before,
  li.woocommerce-MyAccount-navigation-link--customer-logout::before
  {
    font-size: 1.25em;
    width: 100%;
    margin-left: 0px;
    margin-top: 8px;
  }
}

li.woocommerce-MyAccount-navigation-link--dashboard::before
 {
  content: '';
}

li.woocommerce-MyAccount-navigation-link--orders::before
 {
  content: '';
  font-size: 1.85em;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  li.woocommerce-MyAccount-navigation-link--orders::before
  {
    font-size: 1.5em;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link--orders::before
  {
    font-size: 1.25em;
  }
}

li.woocommerce-MyAccount-navigation-link--edit-address::before
 {
  content: '';
}

li.woocommerce-MyAccount-navigation-link--edit-account::before
 {
  content: '';
  font-size: 1.7em;
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  li.woocommerce-MyAccount-navigation-link--edit-account::before
  {
    font-size: 1.5em;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link--edit-account::before
  {
    font-size: 1.25em;
  }
}

li.woocommerce-MyAccount-navigation-link--wishlist::before
 {
  content: '';
}

li.woocommerce-MyAccount-navigation-link--customer-logout::before
 {
  font-family: ETmodules;
  font-size: 1.85em;
  content: '\e06d';
}

/* Tablet Styles */
@media all and (max-width: 820px) and (min-width: 769px) {
  li.woocommerce-MyAccount-navigation-link--customer-logout::before
  {
    font-size: 1.5em;
  }
}

/* Mobile Styles */
@media all and (max-width: 768px) {
  li.woocommerce-MyAccount-navigation-link--customer-logout::before
  {
    font-size: 1.25em;
  }
}