/* ===== FAQ SECTION ===== */


.faq-a {
    margin-bottom: 2.5rem;
}

details {
    font-size: var(--text-md);
    margin-left: 1rem;
}

summary {
    list-style-type: '+ ';
    color: var(--dark);
    margin-bottom: 0.75rem;
}

details summary {
    cursor: pointer;
}

details[open]>summary {
    list-style-type: '- ';
    font-style: italic;
    color: var(--light);
}

section {
    margin-bottom: 6rem;
}

/* ===== articles ===== */

.article-item {
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: space-between;

}


.article-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
}

.article-content p, h3{
    margin-bottom: 0;
}
.article-item { 
      margin-bottom:2.5rem;
 }

.article-item:last-child{
    margin-bottom: 0;
}

.article-dot { 
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-basis: 8px;
    flex-grow: 0;
    flex-shrink: 0;
}


/* ===== TAGS ===== */

.tags {
    margin-top: 0.25rem;
}

ul.tags{
    display:flex;
    flex-wrap: wrap;
}

.tags li {
    font-size: var(--text-sm);
    line-height: 100%;
    color: var(--dark);
    background-color: var(--lightest);
    padding:0.35rem  0.5rem;
    border-radius: 24px;
    display: inline;
    margin-right: 0.375rem;
    opacity: 0.8;
}


/* ===== list ===== */

.list ul{
    list-style-position: outside; /* Aligns the list vertically */
padding-left: 30px;
}

.list li::before{
    content: "––";
    letter-spacing: -2px;;
}


/* ===== atlas ===== */

.atlas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.atlas h1, h2 {
    line-height: 140%;
}

.atlas img{
    width: 100%;
    max-width: 8rem;
    height: auto;
    margin-bottom: 1rem;
}

.atlas-list li{
    background-color: var(--lightest);
    margin-bottom: 0.5rem  ;
    text-align: center;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
}

.atlas-list li:hover{
    opacity: 0.7;

}

.atlas-list a {
    border-bottom: none;
}

/* ===== 404 ===== */

.container-404 {
    text-align: center;
}

.illu-404 {
    max-width: 100px;
    width: 100%;
    height: auto;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

/* ===== media queries ===== */

@media (max-width: 576px) { 
    .tags li{
         font-size: var(--text-xs);
         margin-bottom: 0.25rem;
    }

    time, .industry{
        display: none
    }
}