/* =========================================
   1. GRUNDINSTÄLLNINGAR & RESET
   ========================================= */
html {
    /* NYTT: Reserverar plats för scrollbaren så sidan inte hoppar */
    scrollbar-gutter: stable;
}

html, body {
    margin: 0; 
    padding: 0; 
    background-color: #f4f4f4; 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    color: #111;
    width: 100%;
    /* Vi undviker overflow-x: hidden här för att scrollen ska funka bra på iPhone */
}
* { box-sizing: border-box; }

/* Klass för att låsa bakgrunden när menyer är öppna (läggs på body via JS) */
body.noscroll { 
    overflow: hidden; 
    padding-right: 0; /* Säkerhetsåtgärd */
}


/* =========================================
   2. TOPP BAR (Profil, Ikoner, Notiser)
   ========================================= */
.cc-top-bar { 
    background: #fff; 
    border-bottom: 1px solid #ddd; 
    height: 50px; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.cc-top-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 100%; 
}

/* --- VÄNSTER: Profil-knapp (Öppnar menyn) --- */
.cc-top-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: left;
}
.cc-top-profile-btn:hover { opacity: 0.8; }

.cc-top-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
}

/* --- HÖGER: Ikoner (Sök, Notiser, Hamburgare) --- */
.cc-top-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cc-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 5px;
    display: flex;
    align-items: center;
    color: #333;
}

/* Hamburgaren (Nu ALLTID synlig även på desktop) */
.cc-hamburger-btn {
    display: block; 
    font-size: 1.6rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

/* Notis-wrapper och Knapp */
.cc-notification-wrapper { position: relative; }

.cc-notif-btn {
    position: relative; 
    font-size: 1.4rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 5px;
}

/* Den röda siffran (Badge) på notisklockan */
.cc-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #e74c3c;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    border: 1px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}


/* =========================================
   3. NOTIS-DROPDOWN & MODALER
   ========================================= */

/* --- Notis-listan (Dropdown) --- */
.cc-notif-dropdown {
    display: none; /* Dold som standard */
    position: absolute;
    top: 45px;
    right: -10px; 
    width: 300px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border: 1px solid #eee;
    z-index: 2000;
    overflow: hidden;
}
.cc-notif-dropdown.show { display: block; }

.cc-notif-header {
    background: #f9f9f9;
    padding: 10px 15px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
}

.cc-notif-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.cc-notif-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    transition: background 0.2s;
}
.cc-notif-item:hover { background: #f0f8ff; }

.cc-notif-icon {
    width: 35px;
    height: 35px;
    background: #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
/* Färger för notiser */
.icon-green { background: #e8f5e9; color: #2e7d32; }
.icon-blue { background: #e3f2fd; color: #1565c0; }
.icon-red { background: #ffebee; color: #c62828; }

.cc-notif-text { font-size: 0.85rem; line-height: 1.3; }
.cc-notif-time { font-size: 0.7rem; color: #999; display: block; margin-top: 3px; }


/* --- SÖK-MODAL (Popup) --- */
.cc-modal-overlay {
    display: none; /* Dold som standard */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); 
    z-index: 2000; 
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px; 
    backdrop-filter: blur(3px); 
}
.cc-modal-overlay.open { display: flex; }

.cc-search-box {
    background: #fff;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cc-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    background: #f9f9f9;
}

.cc-modal-body { padding: 20px; }
.cc-adv-input { width: 100%; padding: 12px; font-size: 1rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 15px; }
.cc-filter-group { margin-bottom: 15px; }
.cc-filter-label { display: block; font-size: 0.8rem; font-weight: bold; margin-bottom: 5px; color: #666; }

.cc-primary-btn {
    width: 100%;
    padding: 12px;
    background: #000; 
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* =========================================
   4. HEADER (Endast Logga & Reklam nu)
   ========================================= */
.cc-main-header { 
    background: #fff; 
    padding: 20px 0; 
    border-bottom: 1px solid #eee; 
}

.cc-header-grid { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 15px; 
    display: grid; 
    /* Vi centrerar loggan genom att låta den ta hela bredden */
    grid-template-columns: 1fr; 
    align-items: center; 
}

/* LOGOTYP */
.cc-logo-area h1 { 
    margin: 0; 
    font-family: 'Arial Black', sans-serif; 
    font-size: 3rem; 
    text-transform: uppercase; 
    line-height: 1; 
    display: flex; 
    flex-wrap: wrap; 
    column-gap: 5px; 
    justify-content: center; /* Alltid centrerad */
}

.cc-logo-black { color: #000; }
.cc-logo-color { color: #ea8c00; } /* Styrs av theme.css */

/* Reklam i headern (Valfritt) */
.cc-header-ad-desktop { display: none; }
.cc-header-ad-mobile { display: none; margin-top: 20px; text-align: center; }

@media (max-width: 600px) { 
    .cc-logo-area h1 { flex-direction: column; font-size: 2.5rem; line-height: 0.9; } 
    .cc-logo-black, .cc-logo-color { display: block; }
    .cc-header-ad-mobile { display: block; }
}


/* =========================================
   5. MENY (Navigation) - SIDEBAR (Dator & Mobil)
   ========================================= */
/* Denna kod gör att menyn alltid är en sidomeny */

.cc-nav-bar { 
    display: block;
    position: fixed; 
    top: 50px; /* Börjar under topplisten */
    left: 0; 
    bottom: 0; /* Går hela vägen ner */
    
    /* Bredd: 100% på små mobiler, men max 320px annars */
    width: 100%; 
    max-width: 320px; 
    
    background: #fff; 
    border-right: 1px solid #ddd; /* Kantlinje */
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* Skugga */
    
    /* ANIMERING: Dold till vänster (-100%) som standard */
    transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out;
    
    z-index: 900; 
    overflow-y: auto; 
    overscroll-behavior: contain; 
}

/* När klassen "open" läggs på via JS glider menyn in */
.cc-nav-bar.open { 
    transform: translateX(0); 
}

.cc-nav-container { 
    display: block; 
    padding: 0; 
}

/* Länkarna i sidomenyn */
.cc-nav-link { 
    display: flex !important; 
    align-items: center;
    width: 100%;
    text-align: left; 
    font-size: 1rem; 
    font-weight: 600;
    padding: 20px 25px; 
    border-bottom: 1px solid #f9f9f9; 
    margin: 0;
    background: transparent;
    color: #333;
    transition: background 0.2s;
}

.cc-nav-link:hover {
    background: #f4f4f4;
    color: #000;
}

/* Aktiv länk */
.cc-nav-link.cc-active {
    background: #fff5e6; /* Mycket ljus orange */
    color: #ea8c00; 
    border-left: 5px solid #ea8c00; /* Markering */
}

/* Ikoner i menyn */
.cc-nav-icon { 
    width: 30px; 
    display: flex; 
    justify-content: center; 
    font-size: 1.1rem;
    color: #888;
}
.cc-nav-link:hover .cc-nav-icon { color: #333; }
.cc-nav-link.cc-active .cc-nav-icon { color: #ea8c00; }

/* Skiljelinje */
.cc-nav-container hr { 
    display: block; 
    border: 0;
    border-top: 1px solid #eee; 
    margin: 10px 0; 
}


/* =========================================
   6. LAYOUT, GRID & INNEHÅLL
   ========================================= */
.cc-layout-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr; /* Feed | Ads | Profile */
    gap: 25px; 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 0 15px; 
}
@media (max-width: 900px) {
    .cc-layout-grid { grid-template-columns: 1fr; }
    .cc-col-feed { order: 1; }
    .cc-col-ads { order: 2; }
    .cc-col-profile { order: 3; }
}

/* Artiklar */
.cc-post-card { background: #fff; border: 1px solid #ddd; margin-bottom: 25px; }
.cc-img-wrapper { width: 100%; overflow: hidden; background: #eee; }
.cc-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-ratio-landscape { aspect-ratio: 16 / 9; }
.cc-ratio-portrait { aspect-ratio: 3 / 4; }
.cc-post-content { padding: 20px; word-wrap: break-word; overflow-wrap: break-word; }

.cc-post-meta { font-size: 0.7rem; color: #ea8c00; font-weight: bold; text-transform: uppercase; margin-bottom: 8px; }
.cc-post-headline { font-family: 'Georgia', serif; font-size: 1.6rem; margin: 0 0 10px 0; line-height: 1.1; font-weight: bold; }
.cc-post-headline a { color: #000; text-decoration: none; }


/* =========================================
   7. SIDOSPALTER & FOOTER
   ========================================= */
.cc-in-feed-ad { margin-bottom: 25px; text-align: center; padding: 20px 0; background: #f9f9f9; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.cc-ad-box { background: #fff; border: 1px solid #ddd; border-top: 4px solid #000; padding: 15px; margin-bottom: 20px; }
.cc-ad-title { font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 10px; text-transform: uppercase; font-size: 0.9rem; background: #000; color: #fff; display: inline-block; padding: 2px 5px; }

.cc-mobile-footer { display: none; text-align: center; padding: 20px; background: #222; color: #fff; margin-top: 20px; }
@media (max-width: 900px) { .cc-mobile-footer { display: block; } }

/* --- INLÄGGS-KORT (FEED) --- */

.cc-post-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* VIKTIGT: Klipper allt som sticker ut */
    width: 100%;      /* Håll dig inom föräldern */
    box-sizing: border-box; /* Räkna in padding i bredden */
}

/* HEADER: Där profilbilden och namnet ligger */
.cc-post-header {
    display: flex;
    align-items: center;
    padding: 15px;
}

/* FIXAR PROFILBILDEN (Avatar) */
.cc-post-avatar {
    width: 45px;       /* Tvinga den att vara liten */
    height: 45px;      /* Tvinga den att vara liten */
    border-radius: 50%; /* Gör den rund */
    object-fit: cover; /* Beskär bilden snyggt om den inte är fyrkantig */
    margin-right: 10px;
    border: 1px solid #eee;
    flex-shrink: 0;    /* Förhindra att den kläms ihop på små skärmar */
}

/* TEXT & META (Namn och tid) */
.cc-post-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cc-post-time {
    font-size: 0.8rem;
    color: #999;
}

/* INNEHÅLLET (Text och stor bild) */
.cc-post-content {
    padding: 0 15px 15px 15px; /* Luft på sidorna och botten */
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
}

/* FIXAR DEN STORA BILDEN I INLÄGGET */
.cc-post-content img {
    max-width: 100%;   /* Får ALDRIG bli bredare än kortet */
    height: auto;      /* Behåll proportionerna */
    border-radius: 4px;
    margin-top: 10px;
    display: block;    /* Tar bort en liten vit rand i botten */
}

/* KNAPPARNA LÄNGST NER (Gilla/Dela) */
.cc-post-actions {
    border-top: 1px solid #f0f0f0;
    display: flex;
    /* padding: 5px 0; */ /* Valfritt */
}

.cc-action-btn {
    flex: 1; /* Alla knappar får lika stor plats */
    background: none;
    border: none;
    padding: 12px 0;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Mellanrum mellan ikon och text */
}

.cc-action-btn:hover {
    background-color: #f9f9f9;
    color: #ea8c00;
}
/* --- FIX FÖR MOBILBILDER --- */

/* Tvinga alla kort att hålla sig inom skärmbredden */
.cc-post-card {
    max-width: 100%;
    width: 100%;
    overflow: hidden; /* Klipp av allt som sticker ut */
    box-sizing: border-box;
}

/* Tvinga ALLA bilder inuti kort att anpassa sig */
.cc-post-card img, 
.cc-post-content img {
    max-width: 100% !important; /* !important kör över alla andra regler */
    height: auto !important;    /* Behåll proportionerna */
    display: block;
}
/* --- SÄKER AVATAR-KLASS --- */
.cc-avatar-circle {
    width: 45px !important;       /* Tvinga bredd */
    height: 45px !important;      /* Tvinga höjd */
    border-radius: 50%;           /* Gör den rund */
    object-fit: cover;            /* Beskär bilden snyggt (ingen distortion) */
    flex-shrink: 0;               /* VIKTIGT: Förhindrar att den kläms ihop */
    border: 1px solid #ddd;       /* Snygg kant */
    display: block;
    background-color: #fff;       /* Om bilden saknas syns vit bakgrund */
}