/* ===== RESET E BASE ===== */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== TIPOGRAFIA ===== */
h1 {
    text-align: left; 
    margin-bottom: 0px;    
}

h2 {
    text-align: left;
    margin-bottom: 0px;
}

p {
    text-align: justify;
    hyphens: auto;
}

small {
    margin-top: 0px;
}

hr {
    margin-bottom: 0px;
}

/* ===== LINKS ===== */
a { 
    color: blue; 
    text-decoration: none;
}

a:hover {
    background-color: #ea6d88;
    color: white;
    border-radius: 5px;
    padding: 2px 6px 2px 6px;
}

/* ===== LAYOUT PRINCIPAL ===== */
.content {
    max-width: 1440px;
    margin: auto;
    grid-gap: 3rem;
    display: grid;
    gap: 3rem;
    grid-template-areas: "sidebar main anchors";
    grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
    padding: 0 1rem;
}

/* ===== NAVEGAÇÃO ===== */
nav.bar-nav {
    text-align: left;
}

nav.bar-nav ul {
    display: flex;
    list-style-type: none;
    gap: 15px;
    border-left: 5px solid #ea6d88;
    padding-left: 20px;
}

/* ===== SIDEBAR ===== */
.sidebar {
    border-right: solid 1px #cdcdcd;
}

aside.sidebar {
    margin-top: 90px;
}

aside.sidebar details summary {
    border-left: 5px solid #ea6d88;
    padding-left: 20px;
    font-weight: 700;
    font-size: 1.4rem;
    cursor: pointer;
}

aside.sidebar details ul {
    list-style-type: none;
}

aside.sidebar ul .sub-list {
    margin-left: 10px;
    padding-left: 10px;
}

/* ===== ANCHORS (LATERAL DIREITO) ===== */
.anchors {
    border-left: solid 1px #cdcdcd;
    padding-left: 15px;
}

aside.anchors {
    margin-top: 90px;
}

aside.anchors h2 {
    font-weight: 700;
    font-size: 1.4rem;
    border-left: 5px solid #ea6d88;
    padding-left: 20px;
}

/* ===== COMPONENTES ===== */
figure {
    text-align: center;
}

figcaption {
    font-weight: 700;
}

.article-attention {
    display: flex;
    align-items: center;
    border: 1px solid #a2a9b1; 
    background-color: #f8f9fa;
    padding: 15px;           
    gap: 15px;                 
    margin-bottom: 1rem; 
    border-left: 5px solid #ff922b;
}

.article-photo-text {
    display: flex;
    align-items: left;
    padding: 0px;           
    gap: 15px;                 
    margin-bottom: 1rem; 
}

.cartas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 15px;  
}

/* ===== FOOTER ===== */
.footer {
    min-height: 100px;
    border-top: solid 1px #cdcdcd;
    margin-bottom: 30px;
}

.footer p {
    margin-left: 20%;  
}

.footer small {
    margin-left: 20%;  
}