/* =====================================================================
   Modern video-platform look for MediaCMS
   Loaded on every page via EXTRA_CSS_PATHS in local_settings.py
   After editing: save, then hard-refresh the browser (Ctrl+F5)
   ===================================================================== */

/* ---------- 1. Brand color: HNJtv gold ---------- */
body {
  --default-theme-color: #B8860B;   /* HNJtv gold, deepened for readability on white */
  --default-brand-color: #B8860B;
  --theme-color: #B8860B;
}
body.dark_theme {
  --default-theme-color: #E8B931;   /* brighter gold for dark backgrounds */
  --default-brand-color: #E8B931;
  --theme-color: #E8B931;
}

/* ---------- 2. Clean light palette ---------- */
body {
  --body-bg-color: #ffffff;
  --body-text-color: #0f0f0f;
  --header-bg-color: #ffffff;
  --sidebar-bg-color: #ffffff;
  --sidebar-nav-border-color: #e5e5e5;
  --sidebar-nav-item-text-color: #0f0f0f;
  --sidebar-nav-item-icon-color: #0f0f0f;
  --nav-menu-active-item-bg-color: #f2f2f2;
  --nav-menu-item-hover-bg-color: #f2f2f2;
  --hr-color: #e5e5e5;
  --item-title-text-color: #0f0f0f;
  --item-meta-text-color: #606060;
  --item-thumb-bg-color: #f2f2f2;
  --media-list-header-title-link-text-color: #065fd4;
  --search-field-input-bg-color: #ffffff;
  --search-field-input-border-color: #d3d3d3;
  --search-field-submit-bg-color: #f8f8f8;
  --search-field-submit-border-color: #d3d3d3;
  --search-field-submit-hover-bg-color: #f0f0f0;
  --ui-hover: #f2f2f2;
  --ui-muted: #606060;
  --ui-border: #d3d3d3;
}

/* ---------- 3. Deep dark palette ---------- */
body.dark_theme {
  --body-bg-color: #0f0f0f;
  --body-text-color: #f1f1f1;
  --header-bg-color: #0f0f0f;
  --sidebar-bg-color: #0f0f0f;
  --sidebar-nav-border-color: #3f3f3f;
  --sidebar-nav-item-text-color: #f1f1f1;
  --sidebar-nav-item-icon-color: #f1f1f1;
  --nav-menu-active-item-bg-color: #272727;
  --nav-menu-item-hover-bg-color: #272727;
  --hr-color: #3f3f3f;
  --item-title-text-color: #f1f1f1;
  --item-meta-text-color: #aaaaaa;
  --item-thumb-bg-color: #272727;
  --media-list-header-title-link-text-color: #3ea6ff;
  --search-field-input-bg-color: #121212;
  --search-field-input-border-color: #303030;
  --search-field-submit-bg-color: #222222;
  --search-field-submit-border-color: #303030;
  --search-field-submit-hover-bg-color: #2a2a2a;
  --search-field-submit-text-color: #f1f1f1;
  --popup-bg-color: #282828;
  --ui-hover: #272727;
  --ui-muted: #aaaaaa;
  --ui-border: #3f3f3f;
}

body { background-color: var(--body-bg-color); }

/* ---------- 4. Header: flat, no shadow ---------- */
.page-header {
  box-shadow: none !important;
  border-bottom: none !important;
  background-color: var(--header-bg-color) !important;
}
body { --default-logo-height: 24px; }
.page-header:after { display: none !important; }
.page-header .logo span,
.page-header .logo img { height: 24px !important; width: auto; }

/* Pill-shaped search bar */
.search-field-wrap form > div {
  display: flex;
  align-items: stretch;
  height: 40px;
}
.search-field-wrap .text-field-wrap {
  flex: 1;
  height: 40px;
}
.search-field-wrap input[type="text"] {
  height: 40px !important;
  border-radius: 40px 0 0 40px !important;
  border: 1px solid var(--search-field-input-border-color) !important;
  border-right: none !important;
  padding: 0 16px 0 20px !important;
  font-size: 16px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.search-field-wrap input[type="text"]:focus {
  border-color: #1c62b9 !important;
  outline: none;
}
.search-field-wrap button[type="submit"] {
  height: 40px !important;
  width: 64px !important;
  border-radius: 0 40px 40px 0 !important;
  border: 1px solid var(--search-field-submit-border-color) !important;
  background-color: var(--search-field-submit-bg-color) !important;
}

/* Sign-in as an outlined pill */
.page-header .sign-in-wrap a.sign-in,
.page-header .button-link.sign-in {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 15px !important;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  color: #065fd4 !important;
  font-weight: 500;
  font-size: 14px;
  text-transform: none !important;
  line-height: 1;
}
body.dark_theme .page-header .sign-in-wrap a.sign-in { color: #3ea6ff !important; }
.page-header .sign-in-wrap a.sign-in:hover { background-color: rgba(6, 95, 212, 0.1); border-color: transparent; }

/* ---------- 5. Sidebar: rounded items, no gray panel ---------- */
.page-sidebar,
.page-sidebar-inner { background-color: var(--sidebar-bg-color) !important; }
.page-sidebar .nav-menu { padding: 12px 0; margin: 0 12px; border-bottom: 1px solid var(--sidebar-nav-border-color) !important; border-top: none !important; }
.page-sidebar .sidebar-theme-switcher { border: none !important; }
.page-sidebar .nav-menu nav ul li a {
  height: 40px;
  padding: 0 12px !important;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.page-sidebar .nav-menu nav ul li a .menu-item-icon { margin-right: 24px; }
.page-sidebar .nav-menu nav ul li a:hover { background-color: var(--ui-hover); }
.page-sidebar .nav-menu nav ul li.active a,
.page-sidebar .nav-menu nav ul li.selected a { background-color: var(--ui-hover); font-weight: 500; }
.page-sidebar-bottom { color: var(--ui-muted); font-size: 12px; padding: 16px 24px; }

/* ---------- 6. Home/listing grid: bigger, responsive cards ---------- */
.page-main .media-list-wrapper {
  max-width: none !important;
  width: 100% !important;
  padding: 0 24px !important;
  box-sizing: border-box;
}
.page-main .media-list-wrapper .media-list-row {
  max-width: none !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Grid rows (not the sliding carousels) */
.items-list-ver .items-list-outer:not(.list-slider) .items-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 16px;
  row-gap: 40px;
  width: 100% !important;
}
.items-list-ver .items-list-outer:not(.list-slider) .items-list .item {
  max-width: none !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;
}
.items-list-ver .items-list-outer:not(.list-slider) .item-content { margin-right: 0 !important; }

/* Thumbnails */
.item-thumb,
a.item-thumb {
  border-radius: 12px !important;
  overflow: hidden;
}
.item-duration,
.item-duration > span {
  border-radius: 4px !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 1px 4px !important;
  letter-spacing: 0.3px;
}

/* Titles and meta */
.item-main h3 { margin: 12px 0 4px !important; }
.item-main h3,
.item-main h3 a,
.item-main h3 span { background: transparent !important; }
.item-main h3,
.item-main h3 a {
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 500 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.item-meta,
.item-meta a {
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--item-meta-text-color) !important;
}
.item-meta a:hover { color: var(--item-title-text-color) !important; }

/* Section headings ("Recommended", "Latest") */
.media-list-header { align-items: baseline; }
.media-list-header h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px;
}
.media-list-header h3 a {
  display: inline-block;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: lowercase !important;
}
.media-list-header h3 a::first-letter { text-transform: uppercase; }

/* ---------- 7. Small touches ---------- */
.page-main .media-list-row { border: none !important; }
.page-main .media-list-row + .media-list-row { margin-top: 16px; }
.circle-icon-button:hover { background-color: var(--ui-hover); }

/* ---------- 8. Watch page ---------- */
.media-title-banner { border-bottom: none !important; padding-bottom: 0 !important; }
.media-title-banner h1 {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  margin: 12px 0 8px !important;
}
.media-views-actions { border-bottom: none !important; }
.media-views { font-size: 14px !important; font-weight: 500; color: var(--body-text-color) !important; }

/* Action buttons as gray pills */
.media-actions > div { display: flex; gap: 8px; align-items: center; }
.media-actions > div > div > button,
.media-actions > div > .more-options > span > button {
  display: inline-flex !important;
  align-items: center;
  height: 36px !important;
  padding: 0 14px 0 6px !important;
  border-radius: 18px !important;
  background-color: var(--ui-hover) !important;
  color: var(--body-text-color) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
}
.media-actions > div > .more-options > span > button { width: 36px !important; padding: 0 !important; justify-content: center; }
.media-actions > div > .more-options > span > button > span { display: flex; align-items: center; justify-content: center; }
.media-actions > div > div > button:hover,
.media-actions > div > .more-options > span > button:hover { filter: brightness(0.95); }
body.dark_theme .media-actions > div > div > button:hover { filter: brightness(1.25); }
.media-actions button .circle-icon-button { background: transparent !important; width: 30px !important; height: 30px !important; }
.media-actions button i.material-icons { color: var(--body-text-color) !important; font-size: 20px !important; }
.media-actions button > span:not(.circle-icon-button) {
  display: inline-block;
  text-transform: lowercase;
  color: var(--body-text-color) !important;
}
.media-actions button > span:not(.circle-icon-button)::first-letter { text-transform: uppercase; }
.media-title-banner .media-actions > * > *.like:before,
.media-title-banner .media-actions > * > *.dislike:before { display: none !important; }

/* Channel row + description box */
.media-author-banner { padding-top: 12px !important; }
.media-author-banner .author-banner-thumb span,
.media-author-banner .author-banner-thumb img { border-radius: 50% !important; width: 40px !important; height: 40px !important; }
.media-author-banner .author-banner-name { font-size: 16px !important; font-weight: 600 !important; }
.media-author-banner .author-banner-date { font-size: 12px !important; color: var(--ui-muted) !important; }
.media-content-banner {
  background-color: var(--ui-hover);
  border-radius: 12px;
  padding: 12px !important;
  margin: 12px 0 !important;
  border: none !important;
}
.media-info-content,
.media-info-content > * { border-color: transparent !important; }

/* "Up next" column */
.viewer-sidebar .auto-play-header .next-label { font-size: 16px !important; font-weight: 600 !important; }
.viewer-sidebar .auto-play { border-bottom: none !important; }
.viewer-sidebar .auto-play .items-list-outer,
.viewer-sidebar .auto-play .item { border: none !important; padding-bottom: 0 !important; margin-bottom: 8px !important; }
.viewer-sidebar .item-thumb,
.viewer-sidebar a.item-thumb { border-radius: 8px !important; }
.viewer-sidebar .item-main h3,
.viewer-sidebar .item-main h3 span {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
}
.viewer-sidebar .item-meta,
.viewer-sidebar .item-meta span { font-size: 12px !important; line-height: 18px !important; }

/* Comments heading */
.comments-list h2 { font-size: 20px !important; font-weight: 700 !important; }