/* Moderating Clips — clean dark theme */

:root {
    --clips-bg: #101116;
    --clips-sidebar: #17191f;
    --clips-header: #1b1d24;
    --clips-surface: #22252e;
    --clips-accent: #9683ff;
    --clips-text: #f3f3f7;
    --clips-muted: #a1a5b3;
    --clips-border: #30323c;
}

/* General appearance */
html,
body {
    background-color: var(--clips-bg);
    color: var(--clips-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
}

/* Main sections */
header,
.header {
    background-color: var(--clips-header);
    border-bottom: 1px solid var(--clips-border);
}

/* Sidebar */
.sidebar,
aside {
    background-color: var(--clips-sidebar);
    border-right: 1px solid var(--clips-border);
}

/* Navigation links */
.sidebar a,
aside a {
    transition: background-color 160ms ease,
                color 160ms ease;
}

.sidebar a:hover,
aside a:hover {
    color: var(--clips-accent);
}

/* Search */
input[type="search"] {
    background-color: var(--clips-bg);
    color: var(--clips-text);
    border: 1px solid var(--clips-border);
    border-radius: 8px;
    padding: 10px 14px;
}

input[type="search"]:focus {
    border-color: var(--clips-accent);
    outline: none;
}

/* Video thumbnails */
video {
    border-radius: 10px;
}

.media-card img,
.media-item img {
    border-radius: 10px;
    object-fit: cover;
}

/* Cards */
.media-card,
.media-item {
    transition: transform 160ms ease;
}

.media-card:hover,
.media-item:hover {
    transform: translateY(-2px);
}

/* Keyboard navigation */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--clips-accent);
    outline-offset: 3px;
}

/* Hide informational sidebar links */
.page-sidebar a[href="/about"],
.page-sidebar a[href="/terms"],
.page-sidebar a[href="/contact"],
.page-sidebar a[href="/language"],
.page-sidebar a[href*="/about/"],
.page-sidebar a[href*="/terms/"],
.page-sidebar a[href*="/contact/"],
.page-sidebar a[href*="/language/"] {
    display: none !important;
}

/* Remove MediaCMS footer branding from sidebar */
.page-sidebar .page-sidebar-bottom {
    display: none !important;
}

/* BEGIN MODERATING CLIPS CLEAN UI */
:root {
  --mc-bg: #101116;
  --mc-panel: #191b23;
  --mc-panel-2: #222530;
  --mc-border: #2b2f3c;
  --mc-accent: #a18aff;
  --mc-muted: #aab0bf;
}
body {
  background: var(--mc-bg);
  color: #f4f5f9;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Sidebar: remove the remaining language selector in the menu, not on video subtitle controls. */
.page-sidebar .nav-menu li:has(> a[href="/language"]),
.page-sidebar .nav-menu li:has(> a[href^="/language/"]),
.page-sidebar .nav-menu li:has(> a[href="/languages"]),
.page-sidebar .nav-menu li:has(> a[href^="/languages/"]),
.page-sidebar .nav-menu li:has(> a[href="/tos"]),
.page-sidebar .nav-menu li:has(> a[href="/about"]),
.page-sidebar .nav-menu li:has(> a[href="/contact"]) {display:none!important;}
.page-sidebar .page-sidebar-bottom {display:none!important;}
.page-sidebar, aside.page-sidebar {background:var(--mc-panel);border-right:1px solid var(--mc-border);}
.page-sidebar a {transition:color .18s ease, background-color .18s ease;}
.page-sidebar a:hover {color:var(--mc-accent);}
/* Header and search */
.page-header, header.site-header {background:var(--mc-panel);border-bottom:1px solid var(--mc-border);}
input[type="search"], input[placeholder="Search"] {
  background:#11131b; border:1px solid var(--mc-border);
  color:#f4f5f9; border-radius:9px;
}
input[type="search"]:focus, input[placeholder="Search"]:focus {border-color:var(--mc-accent);outline:2px solid transparent;}
/* Clip thumbnails & media lists */
.media-item img, .media-card img, .item-thumb img, .media-item video {
  border-radius:12px; object-fit:cover;
}
.media-item, .media-card {transition:transform .18s ease;}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .media-item:hover, .media-card:hover {transform:translateY(-2px);}
}
/* Limit width on ultra-wide monitors without changing playlist or player functionality. */
@media (min-width:1600px) {
  .media-list, .media-items-list {max-width:1720px;}
}
@media (max-width:768px) {
  .media-item img, .media-card img {border-radius:8px;}
  input[type="search"] {max-width:100%;}
}
a:focus-visible, button:focus-visible {outline:2px solid var(--mc-accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce) { .media-item,.media-card,.page-sidebar a {transition:none!important;transform:none!important;} }
/* END MODERATING CLIPS CLEAN UI */