/* 
===================================================================================
                                    FONTS
===================================================================================
*/

@font-face {
    font-family: 'Norse';
    src: url('https://rawcdn.githack.com/n1h1lius/Nordic-Fonts/main/fonts/Valheim/norse-webfont.woff2') format('woff2'),
         url('https://rawcdn.githack.com/n1h1lius/Nordic-Fonts/main/fonts/Valheim/norse-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'Norse';
    src: url('https://rawcdn.githack.com/n1h1lius/Nordic-Fonts/main/fonts/Valheim/norsebold-webfont.woff2') format('woff2'),
         url('https://rawcdn.githack.com/n1h1lius/Nordic-Fonts/main/fonts/Valheim/norsebold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

/* 
===================================================================================
                                    ROOT
===================================================================================
*/

:root {

    --background-color: rgba(122, 73, 0, 0.97);
}

/* RESET + BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 
===================================================================================
                                    BODY
===================================================================================
*/

html, body {
    height: 100%;
    background: var(--background-color);
    color: #e0e0e0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
}

body {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    animation: fadeIn 0.8s ease-out;
    max-width: 100vw;
    overflow: hidden;
    
}

.button-as-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

/* LINKS + HEADINGS */
a, .nav-link { color: #c9a968; text-decoration: none; transition: all 0.3s; }
a:hover, .nav-link:hover { color: #e8d5a3; text-shadow: 0 0 8px rgba(201,169,104,0.4); }
h1, h2, h3 { font-family: 'Norse', serif; color: #d9d1c0; margin: 1.2em 0 0.6em; }
h1 { font-size: 3.8rem; letter-spacing: 4px; }
h2 { font-size: 2.6rem; }
h3 { font-size: 2rem; }
pre, code { font-size: 1.05rem; background: #111; padding: 1rem; border-radius: 8px; overflow-x: auto;  }

/* ------------------------ SIDEBAR ------------------------ */
.sidebar {
    width: 23vw;
    min-width: 300px;
    height: 100vh;
    background: rgba(10,10,15,0.98);
    padding: 2.5rem 1.8rem;
    border-right: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    z-index: 1000;

}

.sidebar h2 {
    font-family: 'Norse', serif;
    font-size: 3.4rem;
    text-align: center;
    color: #d9d1c0;
    margin-bottom: 2rem;
    letter-spacing: 7px;
}

.profile-wrapper {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 5px solid rgba(201,169,104,0.45);
    box-shadow: 0 0 35px rgba(201,169,104,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.username {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    color: #c9a968;
    margin-bottom: 2.5rem;
}

.social-row {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 20px;              
    padding: 10px;
    width: 100%;
}

.social-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-col i {
    font-size: 1.5rem;      
    color: #c9a968;          
    transition: transform 0.3s, color 0.3s;
}

.social-col i:hover {
    color: #e8d5a3;          
    transform: scale(1.2);    
}


.social-col.main-user .username {
    font-size: 1.5rem;
    margin-bottom: 0;        
    text-shadow: 0 0 10px rgba(201,169,104,0.3);
}

.sidebar-navegator {

    height: 100%;
    min-height: 10vh;
    max-height: 55vh;
    overflow-y: auto;
}

nav ul { list-style: none; }
nav li { margin: 1rem 0; }
nav a, .nav-link {
    display: block;
    color: #a0c0ff;
    font-family: 'Norse', serif;
    font-size: 1.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    transition: all 0.25s;
}
nav a:hover, .nav-link:hover { background: rgba(201,169,104,0.15); color: #e8d5a3; }
nav ul ul {
    padding-left: 1.6rem;
    display: none;
    font-size: 1.35rem;
}
nav li.has-sub > a::after, nav li.has-sub > .nav-link::after { content: ' ▼'; font-size: 0.95rem; }
nav li.active > ul { display: block; }
nav li.active > a::after, nav li.active > .nav-link::after { content: ' ▲'; }

/* ------------------------ CONTENT ------------------------ */
.content {                       
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    background: transparent;
    transition: opacity 0.3s ease-in-out;
    overflow-y: auto;
}

/* 
===================================================================================
                                    FOOTER
===================================================================================
*/

footer {
    position: fixed;
    bottom: 0;
    left: 22vw;
    right: 0;
    background: rgba(8,10,14,0.97);
    padding: 1.4rem 2.5rem;
    text-align: center;
    border-top: 1px solid rgba(201,169,104,0.35);
    z-index: 180;
    box-shadow: 0 -6px 25px rgba(0,0,0,0.7);
}
.havamal {
    font-family: 'Norse', serif;
    font-style: italic;
    color: #c9a968;
    font-size: 1.3rem;
    width: 98%;                     
    max-width: 80vw;
    margin: 0 auto;
    padding: 1.2rem 2rem;
    background: rgba(20,22,28,0.8);
    border: 1px solid rgba(201,169,104,0.35);
    border-radius: 12px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.75);
    text-align: center;
}

.fixed-header, .sidebar, footer {
    opacity: 1 !important;
}

#current-focus li {margin-bottom: 15px;}

.fixed-header {
    position: fixed;
    top: 0;
    left: 320px;           
    right: 0;
    background: rgba(8,10,14,0.97);
    padding: 1.4rem 2.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(201,169,104,0.35);
    z-index: 200;              
    box-shadow: 0 6px 25px rgba(0,0,0,0.7);
}
.rune-message {
    font-family: 'Norse', serif;
    color: #c9a968;
    font-size: 2.4rem;
    letter-spacing: 8px;
    text-shadow: 0 0 15px rgba(201,169,104,0.5);
}

/* 
===================================================================================
                                    DETAILS
===================================================================================
*/

strong { color: #c9a968; }

details summary {
    cursor: pointer;          
    transition: all 0.3s ease; 
    list-style: none;         
}

details summary:hover {
    color: #e8d5a3;           
    text-shadow: 0 0 12px rgba(201, 169, 104, 0.6); 
    transform: translateX(5px); 
}

details summary::marker { color: #c9a968; }

details summary:hover::marker { color: #e8d5a3; }

/* SECTIONS */

section {
    width: 100%;
    min-width: 60vw;
    border-radius: 12px;       
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 25px;              
    box-shadow: 0 2px 8px rgba(0,0,0,0.65);
    margin-bottom: 2rem;
}

section h1, h2, h3 { margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: center;}

.full-section { padding-bottom: 150px;}

.ul-content {margin-left: 2rem;}

/* 
===================================================================================
                                    ANIMATIONS
===================================================================================
*/

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 
===================================================================================
                                RESPONSIVENESS
===================================================================================
*/

@media (max-width: 1024px) {
    .sidebar { width: 280px; min-width: 280px; }
    .content { margin-left: 280px; }
    footer, .fixed-header { left: 280px; }
}
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        padding: 1.8rem;
    }
    .content, footer, .fixed-header {
        margin-left: 0;
        left: 0;
    }
    .fixed-header { padding: 1.2rem; }
    .rune-message { font-size: 2rem; letter-spacing: 5px; }
    h1 { font-size: 3.2rem; }
    .havamal { width: 96%; font-size: 1.3rem; padding: 1rem 1.5rem; }
}