/*
 * MoviePost v2 – Stylesheet
 * Kleuren komen uit /assets/css/colors.css (auto-gegenereerd door admin).
 * De :root hier bevat fallback-waarden voor als colors.css nog niet bestaat.
 */

/* Kleuren worden inline geladen via renderPageHead() – zie template.php */

:root {
    --bg:           #080810;
    --surface:      #10101a;
    --surface2:     #18182a;
    --border:       #222238;
    --accent:       #e63946;
    --accent2:      #e63946;
    --text:         #e8e8f0;
    --muted:        #6b6b8a;
    --radius:       12px;
    --card-r:       10px;
    --transition:   .22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden }

/* ── Header ── */
.site-header { position:sticky; top:0; z-index:100; background:rgba(8,8,16,.92); backdrop-filter:blur(18px); border-bottom:1px solid var(--border) }
.header-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:1.5rem; padding:.9rem 2rem }
.site-logo { font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.08em; color:var(--text); text-decoration:none; white-space:nowrap }
.site-logo span { color:var(--accent) }

/* ── Zoekbalk ── */
.search-form { flex:1; display:flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:50px; overflow:hidden; transition:border-color var(--transition) }
.search-form:focus-within { border-color:var(--accent) }
.search-input { flex:1; padding:.6rem 1.2rem; background:transparent; border:none; outline:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:1rem }
.search-input::placeholder { color:var(--muted) }
.search-btn { padding:.6rem 1.1rem; background:var(--accent); border:none; cursor:pointer; color:#fff; font-size:1.1rem; transition:background var(--transition) }
.search-btn:hover { background:var(--accent2) }

/* ── Taalschakelaar ── */
.lang-switcher { display:flex; gap:.4rem }
.lang-switcher a { font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--muted); text-decoration:none; padding:.3rem .5rem; border-radius:4px; transition:color var(--transition),background var(--transition) }
.lang-switcher a:hover, .lang-switcher a.active { color:var(--color-hover-text, #fff); background:var(--accent) }

/* ── Layout ── */
.layout { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:220px 1fr; gap:2rem; padding:2rem }
@media(max-width:900px) { .layout { grid-template-columns:1fr } .sidebar { display:none } .header-inner { padding:.8rem 1rem; gap:.8rem } }

/* ── Sidebar ── */
.sidebar { position:sticky; top:80px; align-self:start }
.sidebar-title { font-family:'Bebas Neue',sans-serif; letter-spacing:.1em; color:var(--muted); font-size:.9rem; margin-bottom:1rem; text-transform:uppercase }
.genre-list { list-style:none }
.genre-list li { margin-bottom:.15rem }
.genre-list a { display:flex; justify-content:space-between; align-items:center; padding:.45rem .8rem; border-radius:8px; color:var(--muted); text-decoration:none; font-size:.88rem; transition:color var(--transition),background var(--transition) }
.genre-list a:hover { color:var(--color-hover-text, var(--text)); background:var(--surface) }
.genre-list a.active { color:var(--accent); background:rgba(230,57,70,.1); font-weight:600 }
.count { font-size:.72rem; color:var(--muted); background:var(--surface2); padding:.1rem .4rem; border-radius:20px }

/* ── Sectietitels ── */
.section-title { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.06em; margin-bottom:1.5rem }
.section-title em { color:var(--accent); font-style:normal }
.cat-count { font-size:1rem; color:var(--muted); font-family:'DM Sans',sans-serif }
.no-results { color:var(--muted); padding:3rem 0; text-align:center; font-size:1.1rem }

/* ── Film grid ── */
.movie-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.1rem }
.movie-card { text-decoration:none; color:var(--text); border-radius:var(--card-r); overflow:hidden; background:var(--surface); transition:transform var(--transition),box-shadow var(--transition); display:block; position:relative }
.movie-card:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 0 1px var(--accent) }
.movie-card.fav::after { content:'★'; position:absolute; top:.4rem; left:.4rem; color:#ffd700; font-size:.9rem; background:rgba(0,0,0,.7); padding:.1rem .35rem; border-radius:4px }

/* ── Film card cover ── */
.card-cover { position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--surface2) }
.card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.movie-card:hover .card-cover img { transform:scale(1.06) }
.no-cover { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem }
.card-rating { position:absolute; top:.5rem; right:.5rem; background:rgba(0,0,0,.75); color:#ffd700; font-size:.7rem; font-weight:700; padding:.2rem .5rem; border-radius:20px; backdrop-filter:blur(4px) }
.card-genre { position:absolute; bottom:.5rem; left:.5rem; background:var(--accent); color:#fff; font-size:.62rem; font-weight:600; letter-spacing:.05em; padding:.2rem .45rem; border-radius:4px; text-transform:uppercase }
.card-info { padding:.65rem .75rem .85rem }
.card-title { font-size:.85rem; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:.2rem; color:var(--text) }
.card-year { font-size:.73rem; color:var(--muted) }

/* ── Paginering ── */
.pagination { display:flex; gap:.5rem; justify-content:center; margin-top:2.5rem; flex-wrap:wrap }
.page-btn { padding:.5rem .9rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); text-decoration:none; font-size:.9rem; transition:all var(--transition) }
.page-btn:hover { border-color:var(--accent); color:var(--color-hover-text, var(--accent)) }
.page-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700 }

/* ── Film detail pagina ── */
.movie-overlay { background:var(--bg); min-height:100vh; padding:2rem 0 }
.movie-detail { max-width:1000px; margin:0 auto; padding:0 2rem }
.back-btn { display:inline-block; color:var(--muted); text-decoration:none; font-size:.9rem; margin-bottom:2rem; transition:color var(--transition) }
.back-btn:hover { color:var(--color-hover-text, var(--accent)) }
.detail-inner { display:grid; grid-template-columns:260px 1fr; gap:2.5rem; align-items:start }
@media(max-width:640px) { .detail-inner { grid-template-columns:1fr } }
.detail-cover { width:100%; border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.7) }
.detail-title { font-family:'Bebas Neue',sans-serif; font-size:2.8rem; letter-spacing:.04em; line-height:1.1; margin-bottom:1rem; color:var(--text) }
.detail-meta { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.5rem }
.detail-meta span { font-size:.85rem; color:var(--muted); background:var(--surface); padding:.3rem .8rem; border-radius:20px; border:1px solid var(--border) }
.detail-meta .genre-link { color:var(--accent); text-decoration:none }
.detail-desc { font-size:.95rem; line-height:1.7; color:var(--muted); margin-bottom:2rem }
.watch-btn { display:inline-block; padding:.85rem 2rem; background:var(--accent); color:#fff; text-decoration:none; border-radius:50px; font-weight:600; font-size:1rem; transition:all var(--transition); box-shadow:0 4px 20px rgba(230,57,70,.4) }
.watch-btn:hover { background:var(--accent2); transform:translateY(-2px) }

/* ── Footer ── */
.site-footer { border-top:1px solid var(--border); margin-top:4rem; padding:2rem; text-align:center }
.footer-logo { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.5rem }
.footer-logo span { color:var(--accent) }
.footer-copy { font-size:.8rem; color:var(--muted) }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--muted) }