/* Ladda in ChiKareGo2 font */
@font-face {
    font-family: 'ChiKareGo2';
    src: url('site_media/ChiKareGo2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* GENERAL RESET */
html, body {
    margin: 0;
    height: 100%;
}

body {
    background: url("site_media/background.jpg") no-repeat center center fixed;
    background-size: cover;
    font-family: 'ChiKareGo2', monospace;
    font-size: 16px;
}

/* HEADER */
header {
    background: #e0e0e0;
    border-bottom: 4px double black;
    height: 60px;             /* behåll fast höjd */
    box-sizing: border-box;

    display: flex;            /* gör headern till flex-container */
    align-items: center;      /* centrerar vertikalt */
    justify-content: center;  /* centrerar horisontellt */

    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0;               /* ingen extra padding behövs */
}


/* PAGE CONTAINER — FIXED HEIGHT, NO GLOBAL SCROLL */
.container {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    height: calc(100vh - 60px); 
    gap: 20px; /* händer ingentng när jag justerar*/
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* stoppar global scroll */
}

/* ----------- SCROLL & LAYOUT FIX : main + sidebars ----------- */

/* Mittkolumnen scrollar i sig själv */
main {
    background: #d6d6d6;
    border: 8px double black;
    padding: 20px; /*  distansen mellan innehållet och innerkanten på mainrutan */
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;            
    box-sizing: border-box;
    font-size: 16px;
}

/* Vänsterspalten scrollar inte i sig själv */
.sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 30px; /* händer ingenting när jag justerar */
    overflow: hidden; 
    height: 100%;
}

/* Boxar i vänster sidebar (t.ex. Archive) scrollar internt */
.sidebar-left .box {
    background: #d6d6d6;
    border: 8px double black;
    padding: 12px;
    overflow-y: auto; 
    overflow-x: hidden;
    max-height: 100%;
}

/* Högerspalten scrollar inte */
.sidebar-right {
    overflow: hidden;
    height: 100%;
    display: flex;
}

/* About-me boxen scrollar internt */
.sidebar-right .box {
    background: #d6d6d6;
    border: 8px double black;
    padding: 12px;
    overflow-y: auto; 
    overflow-x: hidden;
    /*height: 100%; */
    flex: 1;
    box-sizing: border-box;
    font-size: 16px;
}

/* -------------------- SCROLLBAR STYLE -------------------- */

::-webkit-scrollbar {
    width: 16px;
    background: #bfbfbf;
    border-left: 2px solid black;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, #e5e5e5, #a5a5a5);
    border: 2px solid black;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(145deg, #ffffff, #8f8f8f);
}

/* -------------------- RETRO BOXES -------------------- */

.box {
    background: #d6d6d6;
    border: 3px double black;
    padding: 20px;
    font-size: 16px;
    margin: 10px; /* avståndet mellan lådorrna i t.ex. vänsterkolumnen, obs inte mainrutan för den är inte en .box tydlgien */
}

.box-header {
    font-weight: bold;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
    font-size: 18px;
}

/* LEFT MENU */
.menu .menu-item {
    display: block;
    padding: 6px;
    border-bottom: 1px solid black;
    text-decoration: none;
    font-size: 16px;
}

.menu .active {
    background: #3f53ff;
    color: white;
}

/* RIGHT SIDEBAR (empty styling except box) */
.sidebar-right {
    background: transparent;
}

/* -------------------- BLOG POSTS -------------------- */

.blog-post {
    background: #d6d6d6;
    border: 3px double black;
    padding: 22px;
    margin-bottom: 40px;
    font-size: 16px;
}

.post-title {
    font-size: 32px;
    margin: 0;
    text-transform: lowercase;
}

.post-date {
    font-size: 14px;
    margin-bottom: 15px;
}

.post-content img {
    width: 60%;
    border: 3px solid black;
    display: block;
    margin-bottom: 12px;
}

.post-content p {
    margin: 6px 0 18px 0;
    font-size: 16px;
}

.post {
    border-bottom: 1px solid black;
    margin-bottom: 22px;
    padding-bottom: 22px;
}

.post:last-child {
    border-bottom: none;
}

/* -------------------- ARCHIVE SUBMENU -------------------- */

.archive-submenu {
    background: #e0e0e0;
    border: 2px solid black;
    padding: 12px;
    margin-top: 0;
    max-height: 300px; 
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 16px;
}

.archive-submenu ul {
    list-style: none;
    margin: 0;
    padding-left: 5px;
}

.archive-submenu li {
    margin: 6px 0;
}

.archive-submenu .sub {
    margin-left: 15px;
    font-size: 14px;
}

.archive-submenu strong {
    font-size: 16px;
}

/* -------------------- COMMENTS -------------------- */

.comments-header {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid black;
    display: flex;
    align-items: center;
    gap: 10px; /*händer ingenting när jag ändrar gap och denna vet jag inte om jag ens vill ändra*/
}

.comment-count {
    font-size: 16px;
}

.comments-actions {
    margin-left: auto;
    font-size: 16px;
}

.comments-actions a {
    color: #3f53ff;
    text-decoration: none;
}

.comments-list {
    margin-top: 12px;
    font-size: 16px;
}

/* INDIVIDUAL COMMENT */
.comment {
    display: grid;
    grid-template-columns: 50px 1fr 80px;
    align-items: start;
    background: #e2e2e2;
    border-bottom: 1px solid black;
    padding: 4px 4px;
}

/* nedan låda är för komentars */
.comment-avatar {
    width: 30px;
    height: 30px;
    background: #888;
    border: 2px solid black;
}

.comment-author {
    font-weight: bold;
    margin-bottom: 0px;
}

.comment-text {
    font-size: 16px;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.comment-date {
    font-size: 14px;
    align-self: end;
}