/* =========================================================
   Vrienda v7.6.3 - Homepage Layout Hard Fix
   Plaats als ALLERLAATSTE stylesheet, na v7.6.2.
   Doel:
   - gast/homepage weer logisch en breed uitlijnen
   - 3 kolommen in goede verhouding
   - losse tekstblokken in midden netjes card maken
   - registratiekaart gecentreerd
   - header compact houden
   ========================================================= */

:root{
    --home-shell:1320px;
    --home-left:280px;
    --home-main:680px;
    --home-right:300px;
    --home-gap:20px;

    --home-bg:#f3eee7;
    --home-card:#fff;
    --home-line:#e4d8cb;
    --home-text:#1f2937;
    --home-muted:#6b7280;
    --home-orange:#ff7a18;
}

/* Background */
html,
body{
    background:var(--home-bg) !important;
}

/* Header: never inherit wide feed overrides */
body header,
body .topbar,
body .navbar,
body .site-header,
body .app-header{
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    background:#fff !important;
    border-bottom:1px solid var(--home-line) !important;
    box-shadow:0 1px 2px rgba(28,25,23,.04) !important;
}

body header .container,
body .topbar .container,
body .navbar .container,
body .site-header .container,
body .app-header .container{
    max-width:1320px !important;
    width:100% !important;
    height:58px !important;
    margin:0 auto !important;
    padding:0 16px !important;
    display:grid !important;
    grid-template-columns:280px minmax(360px,520px) 280px !important;
    align-items:center !important;
    gap:20px !important;
    box-sizing:border-box !important;
}

body header input[type="search"],
body .topbar input[type="search"],
body .navbar input[type="search"],
body .search-input,
body input[name="q"]{
    width:100% !important;
    max-width:520px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
    background:#fffaf5 !important;
    border:1px solid var(--home-line) !important;
}

/* Main shell */
body .layout,
body .dashboard,
body .app-layout,
body .social-layout,
body .main-layout,
body .page-grid,
body .content-grid{
    max-width:var(--home-shell) !important;
    width:100% !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:var(--home-left) minmax(0,var(--home-main)) var(--home-right) !important;
    gap:var(--home-gap) !important;
    justify-content:center !important;
    align-items:start !important;
    padding:22px 16px 60px !important;
    box-sizing:border-box !important;
}

/* Columns */
body .sidebar,
body .leftbar,
body .left-sidebar,
body .sidebar-left,
body .layout > aside:first-child,
body .dashboard > aside:first-child{
    width:var(--home-left) !important;
    max-width:var(--home-left) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

body main,
body .main,
body .feed-column,
body .content,
body .main-content,
body .center,
body .timeline,
body .timeline-wrap,
body .feed,
body .posts,
body .krabbels{
    width:100% !important;
    max-width:var(--home-main) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

body .rightbar,
body .right-sidebar,
body .sidebar-right,
body .layout > aside:last-child,
body .dashboard > aside:last-child{
    width:var(--home-right) !important;
    max-width:var(--home-right) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Universal homepage card language */
body .panel,
body .card,
body .widget,
body .box,
body .section,
body .stories,
body .stories-card,
body .story-card,
body .activity,
body .activity-card,
body .feed-card,
body .post-card,
body .krabbel-card,
body .trending-card,
body .side-card,
body .nav-card,
body .menu-card{
    background:var(--home-card) !important;
    border:1px solid var(--home-line) !important;
    border-radius:12px !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
    box-sizing:border-box !important;
}

/* Left sidebar */
body .sidebar .panel,
body .sidebar .nav-card,
body .leftbar .panel,
body .left-sidebar .panel,
body .trending-card,
body .menu-card{
    width:100% !important;
    margin-bottom:14px !important;
    padding:16px !important;
}

body .sidebar a,
body .leftbar a,
body nav.sidebar a,
body .menu a,
body .side-menu a{
    min-height:32px !important;
    padding:7px 10px !important;
    border-radius:8px !important;
    font-size:13px !important;
    font-weight:700 !important;
}

/* Center modules */
body .stories,
body .stories-card,
body .story-card,
body .activity,
body .activity-card{
    width:100% !important;
    margin-bottom:16px !important;
    padding:18px !important;
}

body .stories h2,
body .stories-card h2,
body .activity h2,
body .activity-card h2{
    margin-top:0 !important;
}

/* Loose homepage social info block:
   The part with Alex drinkt koffie / Trending moods / Online vrienden / Laatste uploads */
body main > ul,
body .main > ul,
body .content > ul,
body .main-content > ul,
body main > .homepage-info,
body .main > .homepage-info,
body .content > .homepage-info,
body main > .moods,
body main > .online-friends,
body main > .latest-uploads{
    background:var(--home-card) !important;
    border:1px solid var(--home-line) !important;
    border-radius:12px !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
    padding:16px 18px !important;
    margin:0 0 16px !important;
    list-style:none !important;
}

/* If homepage info is plain paragraphs/headings directly in main, wrap feeling visually */
body main > p,
body .main > p,
body .content > p,
body .main-content > p{
    max-width:100% !important;
}

/* Account hero */
body .welcome-banner,
body .welcome-card,
body .hero,
body .hero-card,
body .account-hero{
    width:100% !important;
    background:linear-gradient(135deg,#ff7a18,#fb923c) !important;
    color:#fff !important;
    border:1px solid #ff8a35 !important;
    border-radius:12px !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
    padding:20px !important;
    margin:0 0 16px !important;
    box-sizing:border-box !important;
}

body .welcome-banner h1,
body .welcome-card h1,
body .hero h1,
body .hero-card h1{
    color:#fff !important;
    margin:0 0 4px !important;
}

/* Registration card: make it full width inside main */
body .register-card,
body .auth-card,
body .signup-card,
body .panel:has(input[name="username"]):has(input[type="password"]),
body form:has(input[name="username"]):has(input[type="password"]){
    width:100% !important;
    max-width:100% !important;
    margin:0 0 18px !important;
    padding:22px !important;
    background:#fff !important;
    border:1px solid var(--home-line) !important;
    border-radius:12px !important;
    box-shadow:0 2px 8px rgba(28,25,23,.055) !important;
    box-sizing:border-box !important;
}

/* Forms */
body input,
body textarea,
body select{
    border-radius:10px !important;
    border:1px solid var(--home-line) !important;
    background:#fffaf5 !important;
    min-height:38px !important;
}

body button,
body .btn,
body .button,
body input[type="submit"]{
    border-radius:10px !important;
    min-height:36px !important;
    font-weight:800 !important;
}

/* Right sidebar */
body .rightbar .panel,
body .rightbar .widget,
body .right-sidebar .panel,
body .right-sidebar .widget,
body .sidebar-right .panel,
body .sidebar-right .widget,
body .side-card{
    width:100% !important;
    padding:18px !important;
    margin-bottom:16px !important;
}

/* Latest members list spacing */
body .rightbar .user,
body .rightbar .member,
body .right-sidebar .user,
body .right-sidebar .member,
body .sidebar-right .user,
body .sidebar-right .member{
    padding:10px 0 !important;
    border-bottom:1px solid var(--home-line) !important;
}

/* Avatars remain circular */
body .avatar,
body .profile-avatar,
body .sidebar-profile-avatar,
body .user-avatar,
body .post-avatar,
body .comment-avatar,
body .member-avatar,
body .story-avatar,
body img.avatar,
body img.profile-avatar,
body img.sidebar-profile-avatar,
body img.user-avatar,
body img.post-avatar,
body img.comment-avatar{
    border-radius:50% !important;
    object-fit:cover !important;
}

/* Desktop sticky */
@media(min-width:1051px){
    body .sidebar,
    body .leftbar,
    body .left-sidebar,
    body .sidebar-left,
    body .rightbar,
    body .right-sidebar,
    body .sidebar-right{
        position:sticky !important;
        top:80px !important;
        max-height:calc(100vh - 92px) !important;
        overflow:auto !important;
        scrollbar-width:thin;
    }
}

/* Medium: keep left + main, hide right */
@media(max-width:1220px){
    :root{
        --home-shell:1000px;
        --home-left:260px;
        --home-main:700px;
        --home-right:0px;
        --home-gap:18px;
    }

    body .layout,
    body .dashboard,
    body .app-layout,
    body .social-layout,
    body .main-layout,
    body .page-grid,
    body .content-grid{
        grid-template-columns:var(--home-left) minmax(0,var(--home-main)) !important;
    }

    body .rightbar,
    body .right-sidebar,
    body .sidebar-right,
    body .layout > aside:last-child,
    body .dashboard > aside:last-child{
        display:none !important;
    }
}

/* Mobile */
@media(max-width:900px){
    body header .container,
    body .topbar .container,
    body .navbar .container{
        max-width:100% !important;
        grid-template-columns:auto 1fr auto !important;
        gap:8px !important;
    }

    body header input[type="search"],
    body .topbar input[type="search"],
    body .navbar input[type="search"],
    body .search-input,
    body input[name="q"]{
        max-width:100% !important;
        width:100% !important;
    }

    body .layout,
    body .dashboard,
    body .app-layout,
    body .social-layout,
    body .main-layout,
    body .page-grid,
    body .content-grid{
        display:block !important;
        max-width:100% !important;
        padding:10px !important;
    }

    body .sidebar,
    body .leftbar,
    body .left-sidebar,
    body .sidebar-left,
    body main,
    body .main,
    body .feed-column,
    body .content,
    body .main-content,
    body .center,
    body .timeline,
    body .timeline-wrap,
    body .feed,
    body .posts,
    body .krabbels{
        width:100% !important;
        max-width:100% !important;
        position:static !important;
        max-height:none !important;
        overflow:visible !important;
    }

    body .rightbar,
    body .right-sidebar,
    body .sidebar-right{
        display:none !important;
    }
}