/*---------------------------------------------------------------------------
04-04 Icons (ICN)
---------------------------------------------------------------------------*/

/* Social Icons FRAMEWORK 2024-05-27
-----------------------------------------------*/  
ul.sicons { margin: 0; }
ul.sicons li { list-style: none; }

/* Navicons - Navigational Icons FRAMEWORK 2024-06-24
-----------------------------------------------*/  
/* Default Vertical Nav Icons */
*[class*="navicon"] { 
    display:flex !important; gap: .5rem; 
    flex-direction: column; align-items: center; 
    justify-content: center; background: transparent; 
    border: none; margin: 0; padding: 0; 
    transition: var(--transitions); 
    line-height: 1; 
    font-size: .75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: var(--clr-2); 
    text-decoration: none; 
}
*[class*="navicon"]:hover,*[class*="navicon"]:focus { background: none !important;  opacity: .3; }
*[class*="navicon"] svg { color: var(--clr-2); margin: 0; font-size: 1.5rem; }
*[class*="navicon"]:hover svg,*[class*="navicon"]:focus svg  {  }

/* Horizontal Nav Icons */
.navicon-hor { flex-direction: row; }

.navicon

<a href="#" class="navicon"><i class="fa-solid fa-user"></i> <span>Account</span></a>

<button class="navicon"><i class="fa-solid fa-magnifying-glass"></i> <span>Search</span></button>

/* Section Icon Heading FRAMEWORK 2024-05-27
-----------------------------------------------*/
*[class*="sect_head"] {
    display: grid;
    width: 100%;
    text-align: left;
    padding-bottom: .75rem;
    border-bottom: var(--vern-line);
    margin-top: 0rem;
    margin-bottom: 1.25rem;    
}
.sect_head--slim { border-bottom: none; padding-bottom: 0!important; margin-bottom: 0 !important; }
.sect_head--icon { grid-template-columns: var(--h2-size) 1fr; grid-gap: 0.75rem; }
.sect_head--icon > :first-child { display: flex; justify-content: center; height: var(--h2-size); width: 100%; }
.sect_head--icon > :last-child { display: flex; justify-content: center; flex-direction: column; height: 100%; }
.sect_head--icon svg { font-size: var(--h2-size); color: var(--clr-1); height: 1em; vertical-align: -0.125em; }
.sect_head--icon svg .fa-primary { fill: var(--fa-primary-color,currentColor); }
.sect_head--icon svg .fa-secondary { fill: var(--fa-secondary-color,currentColor); }