/*
Theme Name: Buried Films
*/

/* =========================
   Base
========================= */

html,
body {
  margin: 0;
  padding: 0;
  background: #0b0b0f;
  color: #f2f2f6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================
   Super Cursed Font
========================= */

@font-face {
  font-family: 'SuperCursedTitle';
  src: url('fonts/SuperCursed-title.woff2') format('woff2'),
       url('fonts/SuperCursed-title.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Super Cursed Font TITLE ONLY
========================= */

.site-title,
.site-title a {
  font-family: 'SuperCursedTitle', serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* =========================
   Header
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
}

.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 2px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-branding {
  display: flex;
}

.site-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.site-title a {
  color: #ffffff;
}

.site-description {
  margin-top: 2px;
  font-size: 0.9rem;
  opacity: 0.6;
  color: #b3b3b3;}

/* =========================
   Hide site description - move the code out of this section


.site-description {
  display: none;
}

========================= */



/* =========================
   Header Logo Branding
========================= */

.site-branding {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bf-logo img {
  width: 48px;
  height: auto;
  display: block;
}

.bf-site-text {
  display: flex;
  flex-direction: column;
}


/* =========================
   Header Logo Branding - Mobile
========================= */


@media (max-width: 600px) {
  .bf-logo img {
    width: 40px;
  }
}




/* =========================
   Navigation
========================= */

.main-navigation {
  position: relative;
  margin-left: auto;
  top: -2px;
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 0;
}

.menu-toggle::before {
  content: "☰";
  font-size: 36px;
  color: #ffffff;
  display: block;
}

#primary-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(24, 24, 30, 0.9);
  border-radius: 12px;
  min-width: 240px;
  padding: 12px 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  z-index: 2000;
}

.main-navigation.is-open #primary-menu {
  display: block;
}

#primary-menu li {
  list-style: none;
}

#primary-menu li a {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  color: #ffffff;
}

#primary-menu li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e50914;
}


/* =========================
   Text Menu - Hide dropdown by default
========================= */

.menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 260px;
  background: #111;
  border-radius: 12px;
  padding: 12px 0;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  z-index: 999;
}


/* =========================
   Text Menu - Show on hover
========================= */

.menu > li.menu-item-has-children:hover > .sub-menu,
.menu > li.menu-item-has-children > .sub-menu:hover {
  display: block;
}



/* =========================
   Text Menu - Parent item styling
========================= */

.menu > li > a {
  color: #fff;
  font-weight: 500;
  padding: 12px 16px;
}


/* =========================
   Text Menu - Dropdown links
========================= */

.menu .sub-menu li a {
  display: block;
  padding: 10px 20px;
  color: #ddd;
  font-size: 14px;
  white-space: nowrap;
}

.menu .sub-menu li a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}


/* =========================
   Text Menu - Positioning right aligned
========================= */

.menu > li {
  position: relative;
}

.menu > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}



/* =========================
   Text Menu - Improve hover stability
========================= */

.menu > li.menu-item-has-children {
  padding-bottom: 8px;
}


/* =========================
   Text Menu - Mobile safety (do NOT break hamburger)
========================= */

@media (hover: hover) {
  .menu > li.menu-item-has-children:hover > .sub-menu {
    display: block;
  }
}



/* =========================
   Mobile Header menu and profile icon alignment
========================= */

@media (max-width: 600px) {
  .site-header-inner {
    align-items: flex-start;
  }

  .main-navigation {
    position: relative;
    top: -6px;
  }

  .bf-account-icon {
    position: relative;
    top: 14px;
  }
}







/* =========================
   Layout
========================= */

.bs-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.bs-section {
  margin-bottom: 60px;
}

.bs-section-title {
  font-size: 32px;
  font-weight: 700;
  color: #e50914;
  margin-bottom: 10px; /* controls space BELOW the title */
}

.bs-section-note {
  font-size: 16px;
  color: #b8b8c6;
  margin-top: 0;      /* removes extra space ABOVE description */
}





.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}








/* =========================
   Featured Film
========================= */

.bs-featured {
  margin-bottom: 60px;
}

.bs-featured-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 32px;
  border-radius: 24px;

  background: radial-gradient(
    ellipse at left,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.85)
  );
}

.bs-featured-thumb img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.bs-featured-info::before {
  content: "Featured Film";
  display: block;
  color: #e50914;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-size: 14px;
}

.bs-featured-title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 16px;
}

.bs-featured-director,
.bs-featured-cast,
.bs-featured-meta {
  font-size: 15px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.bs-featured-desc {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
}

.watch-now {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 22px;
  background: #e50914;
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
}

/* =========================
   Film Cards
========================= */

.bs-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-top: 16px;
  padding-bottom: 24px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Hide horizontal scrollbar but keep scrolling */
.bs-scroller {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE & Edge */
}

.bs-scroller::-webkit-scrollbar {
  display: none;                  /* Chrome, Safari */
}

.bs-scroller {
  scroll-behavior: smooth;
}


/* Card container */
.bs-card {
  position: relative;
  flex: 0 0 auto;
  width: 420px;
  border-radius: 24px;
  z-index: 1;
  transition: transform 0.25s ease;

  scroll-snap-align: start;
}

.bs-card:hover {
  transform: translateY(-10px) scale(1.02);
  z-index: 50;
}

/* Subtle background behind entire card on hover */
.bs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.0);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
}

.bs-card:hover::before {
  opacity: 1;
}

/* Inner stacking context */
.bs-card-inner {
  position: relative;
  z-index: 1;
}

/* Thumbnail always visible */
.bs-thumb {
  border-radius: 20px;
  overflow: hidden;
  background: #1a1a22;
}

.bs-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 900px) {

  /* Slightly smaller cards to reveal next thumbnail */
  .bs-card {
    width: 360px;
  }

}






/* =========================
   Base Card Info (always visible)
========================= */

.bs-card-base {
  padding: 12px 6px 0;
}

.bs-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 8px 0 2px;
}

.bs-card-director {
  font-size: 0.85rem;
  opacity: 0.6;
  color: #b3b3b3;
}

.bs-card-meta {
  font-size: 12px;
  opacity: 0.6;
  color: #9a9aac;
  margin-top: 2px;
}

/* =========================
   Hover Overlay Info (no layout shift)
========================= */

.bs-hover-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 18px;
  border-radius: 20px;

  background: rgba(40, 40, 46, 0.9);
  backdrop-filter: blur(8px);

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;

  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.bs-card:hover .bs-hover-info {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bs-hover-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
}

.bs-hover-meta {
  font-size: 13px;
  opacity: 0.85;
  margin: 2px 0;
}

.bs-hover-desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.95;
}

/* =========================
   Single Film Page
========================= */

.bs-single {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* Header */

.bs-single-header {
  margin-bottom: 32px;
}

.bs-single-title {
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 8px;
}

.bs-single-meta {
  font-size: 14px;
  color: #9a9aac;
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
}

.bs-single-director {
  font-size: 15px;
  opacity: 0.85;
}

/* Video */

.bs-single-video {
  margin: 32px 0 48px;
}

.bs-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}

.bs-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Grid */

.bs-single-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}

/* Cards */

.bs-single-card {
  background: rgba(24, 24, 30, 0.85);
  border-radius: 18px;
  padding: 24px;
}

.bs-single-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
}

/* Info list */

.bs-single-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bs-single-info li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.bs-single-info li:last-child {
  border-bottom: none;
}

.bs-single-info strong {
  opacity: 0.7;
  font-weight: 600;
}

.bs-single-info li > :last-child {
  text-align: right;
}



/* Buttons */

.bs-single-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

.bs-btn {
  padding: 10px 18px;
  border-radius: 6px;
  background: #e50914;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.bs-btn.ghost {
  background: rgba(255,255,255,0.08);
}

/* Mobile */

@media (max-width: 900px) {
  .bs-single-grid {
    grid-template-columns: 1fr;
  }

  .bs-single-title {
    font-size: 34px;
  }
}


.bs-single-category {
  margin-top: 6px;
  font-size: 14px;
}

.bs-single-category a {
  color: #e50914;
  text-decoration: none;
}

.bs-single-category a:hover {
  text-decoration: underline;
}


/* Director + category links (single film header) */
.bs-single-director a,
.bs-single-category a {
  color: #e50914;
  text-decoration: none !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Director hover: slightly darker */
.bs-single-director a:hover {
  color: #b20710;
}

/* Category de-emphasized by default */
.bs-single-category a {
  opacity: 0.75;
}

/* Category hover: darker and stronger */
.bs-single-category a:hover {
  color: #b20710;
  opacity: .55;
}











/* =========================
   Comments (Single Film)
========================= */

.bs-single-comments {
  max-width: 820px;
  margin: 26px 0 -36px;
}

#comments {
  margin: 0;
  background: rgba(24, 24, 30, 0.85);
  border-radius: 18px;
  padding: 20px 22px;
}

/* Section titles */
#comments .comments-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 14px;
}

/* Remove default WP clutter */
#comments .logged-in-as,
#comments .comment-notes,
#comments .form-allowed-tags {
  display: none;
}

/* =========================
   Comment List Styling
========================= */

.comment-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.comment-list > li {
  margin: 0 0 14px;
}

/* Individual comment card */
.comment-body {
  background: rgba(15, 15, 20, 0.85);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Comment header */
.comment-author {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Avatar */
.comment-author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 8px;
}

/* Username text */
.comment-author .fn,
.comment-author .fn a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

/* Add spacing before “says” */
.comment-author .says {
  margin-left: 4px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
}

/* Metadata */
.comment-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}

.comment-meta a {
  color: inherit;
  text-decoration: none;
}

/* Comment text */
.comment-content {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

/* Reply link */
.reply {
  margin-top: 8px;
}

.reply a {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}

.reply a:hover {
  color: #ffffff;
}

/* =========================
   Comment Form
========================= */

#comments form p {
  margin: 0 0 8px;
}

#comments label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

#comments textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;

  height: 90px;
  min-height: 90px;
  max-height: 180px;

  background: #0f0f14;
  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;

  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;

  resize: vertical;
  margin: 0;
}

#comments textarea:focus {
  outline: none;
  border-color: rgba(229,9,20,0.6);
  background: #121218;
}

#comments .form-submit {
  margin: 10px 0 0;
}

#comments input[type="submit"] {
  background: #e50914;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#comments input[type="submit"]:hover {
  background: #b20710;
}

/* Spacing to More From */
.bs-more-director {
  margin-top: 8px;
}


/* Remove comment edit link */
.comment-edit-link {
  display: none;
}


/* Disable click behavior on comment date/time */
.comment-meta a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

.comment-meta a:hover {
  color: inherit;
}

/* Add spacing before "Cancel reply" */
#cancel-comment-reply-link {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}

#cancel-comment-reply-link:hover {
  color: #ffffff;
}


/* Style login/register prompt links */
#comments .comment-login-prompt a {
  color: #e50914;
  font-weight: 600;
  text-decoration: none;
}

#comments .comment-login-prompt a:hover {
  color: #b20710;
  text-decoration: underline;
}


/* Hide comment avatar */
.comment-author img {
  display: none;
}

.comment-author {
  padding-left: 0;
}

/* Remove numeric comment counters */
.comment-list {
  list-style: none;
}

.comment-list li::marker {
  content: none;
}

/* HARD REMOVE comment numbering (mobile Safari fix) */
#comments ol,
#comments ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#comments li {
  list-style: none !important;
}

#comments li::marker {
  content: "" !important;
  display: none !important;
}

/* Restore indentation for replies only */
#comments ol.children {
  margin-left: 18px;
  padding-left: 0;
}

#comments ol.children li {
  margin-top: 12px;
}

/* Subtle visual separation for replies */
#comments ol.children li {
  border-left: 2px solid rgba(255,255,255,0.06);
  padding-left: 14px;
}








/* =========================
   Watch Next (Single Film)
========================= */

.bs-watch-next {
  margin-top: 80px;
}

.bs-watch-next-title {
  font-size: 28px;
  font-weight: 800;
  color: #e50914;
  margin: 0 0 6px;
}

.bs-watch-next-sub {
  font-size: 14px;
  color: #9a9aac;
  margin-bottom: 24px;
}

.bs-watch-next-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bs-watch-next-card {
  display: block;
}

.bs-watch-next-thumb {
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

.bs-watch-next-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.bs-watch-next-info {
  padding-top: 10px;
}

.bs-watch-next-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.bs-watch-next-meta {
  font-size: 12px;
  color: #e50914;
}

/* Mobile */
@media (max-width: 900px) {
  .bs-watch-next-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
   Category Archive Page
========================= */

body.category .bs-category-header {
  max-width: 1400px;
  margin: 0 auto 32px;
  padding: 40px 24px 0;
}

body.category .bs-category-title {
  font-size: 36px;
  font-weight: 800;
  color: #e50914;
  margin-bottom: 12px;
}

body.category .bs-category-desc {
  font-size: 16px;
  color: #b8b8c6;
  max-width: 720px;
}

/* Grid layout
   Desktop stays 3 columns even if there are fewer films
*/

body.category .bs-category-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

/* Responsive behavior */
@media (max-width: 1200px) {
  body.category .bs-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.category .bs-category-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */

body.category .bs-category-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  transition: transform 0.25s ease;
}

body.category .bs-category-card:hover {
  transform: translateY(-8px);
}

/* Thumbnail */

body.category .bs-category-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* Base info (always visible) */

body.category .bs-category-info {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.35);
}

body.category .bs-category-film-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
}

body.category .bs-category-director {
  font-size: 14px;
  opacity: 0.65;
}

/* Hover overlay info (matches front page) */

body.category .bs-category-hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 18px;
  border-radius: 20px;

  background: rgba(40, 40, 46, 0.55);
  backdrop-filter: blur(8px);

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

body.category .bs-category-card:hover .bs-category-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hover text */

body.category .bs-category-hover-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}

body.category .bs-category-hover-meta {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 6px;
}

body.category .bs-category-hover-desc {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.95;
}

/* =========================
   Single Film Desktop Sidebar Layout
   Only affects film single pages
========================= */

@media (min-width: 1100px) {
  body.single-film .bs-single,
  body.post-type-film.single .bs-single {
    max-width: 1400px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
    grid-template-areas:
  "header header"
  "video  watch"
  "grid   watch"
  "comments watch"
  "more    more";
  }
  
  body.single-film .bs-single-comments,
body.post-type-film.single .bs-single-comments {
  grid-area: comments;
}


body.single-film .bs-more-director,
body.post-type-film.single .bs-more-director {
  grid-area: more;
}


.bs-single-comments,
.bs-more-director {
  max-width: 1100px;
}


  body.single-film .bs-single-header,
  body.post-type-film.single .bs-single-header {
    grid-area: header;
    margin-bottom: 16px;
  }

  body.single-film .bs-single-video,
  body.post-type-film.single .bs-single-video {
    grid-area: video;
    margin: 0 0 24px;
  }

  body.single-film .bs-single-grid,
  body.post-type-film.single .bs-single-grid {
    grid-area: grid;
  }

  body.single-film .bs-watch-next,
  body.post-type-film.single .bs-watch-next {
    grid-area: watch;
    margin-top: 0;
    position: sticky;
    top: 120px;
  }

  /* Make Watch Next smaller in the sidebar */
  body.single-film .bs-watch-next-title,
  body.post-type-film.single .bs-watch-next-title {
    font-size: 22px;
    color: #e50914;
  }

  body.single-film .bs-watch-next-sub,
  body.post-type-film.single .bs-watch-next-sub {
    margin-bottom: 16px;
  }

  body.single-film .bs-watch-next-grid,
  body.post-type-film.single .bs-watch-next-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.single-film .bs-watch-next-card,
  body.post-type-film.single .bs-watch-next-card {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  body.single-film .bs-watch-next-thumb,
  body.post-type-film.single .bs-watch-next-thumb {
    flex: 0 0 130px;
    border-radius: 12px;
    overflow: hidden;
  }

  body.single-film .bs-watch-next-thumb img,
  body.post-type-film.single .bs-watch-next-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }

  body.single-film .bs-watch-next-info,
  body.post-type-film.single .bs-watch-next-info {
    padding-top: 0;
  }

  body.single-film .bs-watch-next-meta,
  body.post-type-film.single .bs-watch-next-meta {
    color: #e50914;
  }
}

/* =========================
   this is the hover for directors name on single-page at bottom More From Director
========================= */
.bs-more-director-link {
	color: #e50914;
	text-decoration: none;
	display: inline-block;
	transition: color 0.2s ease;
}

.bs-more-director-link:hover {
	color: #b20710;
}


/* =========================
   this is the hover for directors name on single-page inside Film Info
========================= */
.bs-director-info-link {
	color: #e50914;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bs-director-info-link:hover {
	color: #b20710;
}



.bs-auth-link {
	color: #e50914;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bs-auth-link:hover {
	color: #b20710;
}






/* =========================
   FIX: Featured Film Mobile Layout
========================= */

@media (max-width: 900px) {
  .bs-featured-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bs-featured-thumb {
    order: 1;
  }

  .bs-featured-info {
    order: 2;
  }

  .bs-featured-title {
    font-size: 32px;
  }

  .bs-featured-desc {
    font-size: 15px;
  }
}

/* =========================
   Mobile Featured Film Cleanup
========================= */

@media (max-width: 900px) {

  /* Hide extra metadata on mobile */
  .bs-featured-cast,
  .bs-featured-meta,
  .bs-featured-desc {
    display: none;
  }

  /* Tighten layout */
  .bs-featured-inner {
    padding: 24px;
  }

  /* Improve title spacing */
  .bs-featured-title {
    font-size: 30px;
    margin-bottom: 10px;
  }

  /* Make runtime more subtle */
  .bs-featured-meta {
    display: block;
    font-size: 14px;
    opacity: 0.8;
  }

  /* Center the CTA */
  .watch-now {
    margin-top: 20px;
    width: 100%;
    text-align: center;
  }
}

/* =========================
   Mobile: Simplify Featured Film CTA
========================= */

@media (max-width: 900px) {

  /* Hide Watch Now button on mobile */
  .bs-featured .watch-now {
    display: none;
  }

  /* Slightly tighten spacing since button is gone */
  .bs-featured-desc {
    margin-bottom: 0;
  }
}

/* =========================
   Mobile: Section Title Size
========================= */

@media (max-width: 900px) {
  .bs-section-title {
    font-size: 24px;
  }
}

/* =========================
   Mobile: Section Description Size
========================= */

@media (max-width: 900px) {
  .bs-section-note {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* =========================
   Mobile: Category Title Size
========================= */

@media (max-width: 900px) {
  body.category .bs-category-title {
    font-size: 24px;
    margin-bottom: 8px;
  }
}

/* =========================
   Mobile: Category Description Size
========================= */

@media (max-width: 900px) {
  body.category .bs-category-desc {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* =========================
   Mobile: Reduce Category Header Spacing
========================= */

@media (max-width: 900px) {
  body.category .bs-category-header {
    padding: 10px 24px 0;
    margin-bottom: 14px;
  }
}

/* =========================
   Mobile: Reduce Space Between Section Title & Description
========================= */

@media (max-width: 900px) {
  .bs-section-title {
    margin-bottom: 4px;
  }

  .bs-section-note {
    margin-top: 0;
  }
}


/* =========================
   Director Archive Page Only
========================= */

/* =========================
   Director Profile Header
========================= */

.bs-director-profile {
  max-width: 1400px;
  margin: 32px auto 48px;
  padding: 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;

  background: linear-gradient(
    to right,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.6)
  );
  border-radius: 24px;
}

/* Director photo */

.bs-director-photo {
  width: 100%;
  max-width: 260px;
}

.bs-director-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.95;
}

/* Director info */

.bs-director-info {
  max-width: 720px;
}

.bs-director-name {
  font-size: 28px;
  font-weight: 800;
  color: #e50914;
  margin: 0 0 16px;
}

.bs-director-bio {
  font-size: 16px;
  line-height: 1.65;
  color: #b8b8c6;
  margin-bottom: 20px;
}

/* Director links */

.bs-director-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.bs-director-links a {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

.bs-director-links a:hover {
  background: rgba(255,255,255,0.14);
  color: #e50914;
}

/* =========================
   Director Profile Mobile
========================= */

@media (max-width: 900px) {

  .bs-director-profile {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }

  .bs-director-photo {
    max-width: 200px;
  }

  .bs-director-name {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .bs-director-bio {
    font-size: 14px;
    line-height: 1.55;
  }
}


.bs-director-archive .bs-category-header {
  max-width: 1400px;
  margin: 0 auto 32px;
  padding: 40px 24px 0;
}

.bs-director-archive .bs-category-title {
  font-size: 36px;
  font-weight: 800;
  color: #e50914;
  margin-bottom: 12px;
}

.bs-director-archive .bs-category-desc {
  font-size: 16px;
  color: #b8b8c6;
  max-width: 720px;
}

.bs-director-archive .bs-category-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

@media (max-width: 1200px) {
  .bs-director-archive .bs-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .bs-director-archive .bs-category-grid {
    grid-template-columns: 1fr;
  }
}

.bs-director-archive .bs-category-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  transition: transform 0.25s ease;
}

.bs-director-archive .bs-category-card:hover {
  transform: translateY(-8px);
}

.bs-director-archive .bs-category-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.bs-director-archive .bs-category-info {
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.35);
}

.bs-director-archive .bs-category-film-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
}

.bs-director-archive .bs-category-director {
  font-size: 14px;
  opacity: 0.65;
}

.bs-director-archive .bs-category-hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 18px;
  border-radius: 20px;

  background: rgba(40, 40, 46, 0.55);
  backdrop-filter: blur(8px);

  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;

  transition: opacity 0.25s ease, transform 0.25s ease;
}

.bs-director-archive .bs-category-card:hover .bs-category-hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.bs-director-archive .bs-category-hover-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}

.bs-director-archive .bs-category-hover-meta {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 6px;
}

.bs-director-archive .bs-category-hover-desc {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.95;
}

@media (max-width: 900px) {
  .bs-director-archive .bs-category-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .bs-director-archive .bs-category-desc {
    font-size: 14px;
    line-height: 1.45;
  }

  .bs-director-archive .bs-category-header {
    padding: 10px 24px 0;
    margin-bottom: 16px;
  }
}


/* =========================
   Archive Pages: Reduce Top Spacing
   Categories + Directors
========================= */

/* Reduce top padding from .bs-wrap */
body.category .bs-wrap,
body.taxonomy-director .bs-wrap,
.bs-director-archive {
  padding-top: 10px;
}

/* Reduce header padding above the title */
body.category .bs-category-header,
body.taxonomy-director .bs-category-header,
.bs-director-archive .bs-category-header {
  padding-top: 16px;
}

/* =========================
   More From Director (Single Film)
========================= */

.bs-more-director {
  margin-top: 40px; /* controls space above the section */
}

/* Smaller thumbnails just for this section */
.bs-more-director .bs-card {
  width: 300px;
}

.bs-more-director .bs-thumb {
  border-radius: 16px;
}

.bs-more-director .bs-card-title {
  font-size: 14px;
}

/* Slightly tighter scroller spacing */
.bs-more-director .bs-scroller {
  gap: 14px;
  padding-top: 12px;
}


/* =========================
   More From Director: Clean Hover
========================= */

.bs-more-director .bs-card::before {
  display: none;
}




/* =========================
   News Archive: Layout & Grid
========================= */

.bs-news-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

@media (max-width: 900px) {
    .bs-news-wrap {
        padding: 0 20px 60px;
    }
}

.bs-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media (max-width: 1200px) {
    .bs-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .bs-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bs-news-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   News Archive: Card
========================= */

.bs-news-card {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04),
        rgba(0, 0, 0, 0.65)
    );
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bs-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.bs-news-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* =========================
   News Archive: Thumbnail
========================= */

.bs-news-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
}

.bs-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bs-news-thumb-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05),
        rgba(0, 0, 0, 0.6)
    );
}

/* =========================
   News Archive: Card Content
========================= */

.bs-news-card-content {
    padding: 18px;
}

/* =========================
   News Archive: Dates
========================= */

/* Featured cards */
.bs-news-archive .bs-news-date {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}

/* Editorial rows */
.bs-news-archive .bs-news-row-date {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}


/* =========================
   News Archive: Header Alignment and Styling
========================= */

.bs-archive-header {
    max-width: 1400px;
    margin: 0 auto 32px;
    padding: 0 40px;
}

@media (max-width: 900px) {
    .bs-archive-header {
        padding: 0 20px;
    }
}

.bs-archive-title {
    color: #e50914;
    font-weight: 700;
}

.bs-archive-title {
    font-size: 32px;
    letter-spacing: -0.02em;
}

/* =========================
   News Archive Only
   Featured + Headlines Split
========================= */

.bs-news-archive .bs-news-featured {
  margin-bottom: 64px;
}

/* =========================
   Featured News Grid
========================= */

.bs-news-archive .bs-news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

@media (max-width: 1200px) {
  .bs-news-archive .bs-news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .bs-news-archive .bs-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .bs-news-archive .bs-news-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Headlines Section
========================= */

.bs-news-archive .bs-news-headlines {
  max-width: 900px;
  margin-top: 40px;
}

.bs-news-archive .bs-news-headlines-title {
  font-size: 22px;
  font-weight: 800;
  color: #e50914;
  margin-bottom: 16px;
}

/* =========================
   Editorial Rows
========================= */

.bs-news-archive .bs-news-row {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 40px;
  transition: background 0.2s ease;
}

.bs-news-archive .bs-news-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.bs-news-archive .bs-news-row-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffffff;
}

.bs-news-archive .bs-news-row-excerpt {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.bs-news-archive .bs-news-row-source {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* =========================
   News Archive: Headlines Width Match
========================= */

.bs-news-headlines-list {
  width: 100%;
}

/* =========================
   News Archive: Headlines Alignment
========================= */

.bs-news-headlines {
  margin-top: 48px;
}

.bs-news-headlines-title {
  margin-bottom: 16px;
}

/* =========================
   News Archive: Editorial Row Card
========================= */

.bs-news-row {
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.65)
  );
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 18px;
}

.bs-news-row:hover {
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.7)
  );
}


/* =========================
   News Archive: Clamp Excerpt Length
========================= */

.bs-news-archive .bs-news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* =========================
   News Archive: Typography
========================= */

/* Featured News Cards */

.bs-news-archive .bs-news-title {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.45rem;
}

.bs-news-archive .bs-news-excerpt {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.7rem;
}

.bs-news-archive .bs-news-source {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* =========================
   News Archive: Editorial List
========================= */

.bs-news-archive .bs-news-row-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 4px;
}

.bs-news-archive .bs-news-row p {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}

.bs-news-archive .bs-news-row-source {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* =========================
   News Archive: Excerpt Cleanup
========================= */

.bs-news-excerpt p,
.bs-news-row-excerpt p {
  margin: 0;
}

/* =========================
   News Archive Only: Make Headlines Full Width
========================= */

body.post-type-archive-bs_news .bs-news-headlines {
  max-width: none;
  width: 100%;
  margin: 48px 0 0;
}

body.post-type-archive-bs_news .bs-news-headlines-list {
  width: 100%;
}

/* Keep the same left and right padding as the featured section */
body.post-type-archive-bs_news .bs-news-headlines {
  padding-left: 0;
  padding-right: 0;
}


/* =========================
   Single News Page Layout
   Scoped safely to bs_news only
========================= */

body.single-bs_news .bs-news-single {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* =========================
   Back Button
========================= */

.bs-news-back {
  margin-bottom: 20px;
}

.bs-news-back a {
  font-size: 26px;
  font-weight: 600;
  opacity: 0.7;
  color: #e50914;
}

.bs-news-back a:hover {
  opacity: 1;
  color: #e50914;
}

/* =========================
   Main Layout
========================= */

.bs-news-single-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .bs-news-single-layout {
    grid-template-columns: 1fr;
  }
}



/* =========================
   Left Image
========================= */

.bs-news-single-media {
  border-radius: 18px;
  overflow: hidden;
  background: #0;
  max-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-news-single-media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
}


/* =========================
   Content Card
========================= */

.bs-news-single-card {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.7)
  );
  border-radius: 20px;
  padding: 32px;
}

/* =========================
   Header
========================= */

.bs-news-single-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
}

.bs-news-single-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
}

/* =========================
   Body Content
========================= */

.bs-news-single-body {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}

.bs-news-single-body p {
  margin: 0 0 16px;
}

/* =========================
   Read More CTA
========================= */

.bs-news-single-footer {
  margin-top: 24px;
}

.bs-news-read-more {
  display: inline-block;
  padding: 10px 16px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
}

.bs-news-read-more:hover {
  background: rgba(255,255,255,0.14);
  color: #e50914;
}

/* =========================
   Prev / Next Navigation
========================= */

.bs-news-single-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 64px;
}

@media (max-width: 900px) {
  .bs-news-single-nav {
    grid-template-columns: 1fr;
  }
}

.bs-news-nav-card {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.65)
  );
  border-radius: 18px;
  padding: 22px 24px;
  display: block;
  transition: transform 0.2s ease, background 0.2s ease;
}

.bs-news-nav-card:hover {
  transform: translateY(-4px);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.75)
  );
}

.bs-news-nav-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
}

.bs-news-nav-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* =========================
   Single News: Layout fixes
========================= */

/* Prevent grid overflow weirdness */
.bs-news-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* No image: make it a single column and let the card stretch */
.bs-news-single-layout.is-no-media {
  grid-template-columns: 1fr;
}

.bs-news-single-layout.is-no-media .bs-news-single-card {
  width: 100%;
  max-width: none;
}

/* Mobile: always stack image over card */
@media (max-width: 900px) {
  .bs-news-single-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .bs-news-single-card {
    padding: 24px;
  }
}

/* Left media (keep your sizing behavior) */
.bs-news-single-media {
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  max-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-news-single-media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
}

@media (max-width: 800px) {
  .bs-news-archive .bs-news-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
   Desktop Header Text Menu
   Safe override
========================= */

@media (min-width: 901px) {

  /* Hide hamburger on desktop */
  .menu-toggle {
    display: none;
  }

  /* Force primary menu visible and horizontal */
  #primary-menu {
    display: flex !important;
    position: static !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 28px;
  }

  /* Remove bullets everywhere */
  #primary-menu,
  #primary-menu li,
  #primary-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Top-level links */
  #primary-menu > li > a {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    padding: 6px 4px;
  }

  #primary-menu > li > a:hover {
    color: #e50914;
  }

  /* Dropdown positioning */
  #primary-menu > li.menu-item-has-children {
  position: relative;
  padding-bottom: 0px;
}


  #primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: #111;
    border-radius: 12px;
    padding: 12px 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    z-index: 999;
  }

  #primary-menu li.menu-item-has-children:hover > .sub-menu {
    display: block;
  }

  /* Dropdown links */
  #primary-menu .sub-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #ddd;
    white-space: nowrap;
  }

  #primary-menu .sub-menu li a:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
  }
}


/* =========================
   Category Count font size
========================= */

.bs-section-title .bs-count {
  font-size: 16px;
  font-weight: 400;
  color: #888;
  margin-left: 6px;
}

.bs-category-title .bs-count {
  font-size: 16px;
  font-weight: 400;
  color: #888;
  margin-left: 8px;
}


/* =========================
   Header Branding Override
========================= */

.site-header .site-branding {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header .bf-logo {
  flex-shrink: 0;
}

.site-header .bf-logo img {
  width: 60px;
  height: auto;
  display: block;
  padding-bottom: 10px;
}

.site-header .bf-site-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8px;
}

.site-header .site-title {
  font-size: 2.2rem;
  margin: 0;
  line-height: 1;
}

.site-header .site-description {
  margin-top: 2px;
  line-height: 1.4;
  font-size: 14px;
  opacity: 0.5;
}

@media (max-width: 600px) {
  .site-header .bf-logo img {
    width: 60px;
  }
}

@media (max-width: 600px) {
  .site-header .site-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 600px) {
  .site-header .site-description {
    font-size: 7.5px;
  }
}




/* =========================
   Footer
========================= */

.site-footer {
  background: #050508;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 10px;
}

.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}

.footer-title {
  font-family: 'SuperCursedTitle', serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  max-width: 360px;
}

.footer-nav ul,
.footer-legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li,
.footer-legal li {
  margin-bottom: 10px;
}

.footer-nav a,
.footer-legal a {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: #e50914;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 16px;
}


/* Footer tip text */
.footer-tip {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
}

/* Footer tip link */
.footer-tip a {
  color: #e50914;
  font-weight: 500;
}

/* Hover state */
.footer-tip a:hover {
  color: #b20710;
}





/* =========================
   Footer Mobile
========================= */

@media (max-width: 900px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-nav,
  .footer-legal {
    margin-top: 12px;
  }
}

@media (max-width: 900px) {

  .footer-tip {
    margin-top: 10px;
    font-size: 14px;
  }

}





/* =========================
   Submit Page – Fluent Forms
   Page ID: 814
========================= */

/* Align Submit page with site layout */
.page-id-814 .entry-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Intro text width like category pages */
.page-id-814 .entry-content > p {
  max-width: 1400px;
}

/* Remove harsh divider look */
.page-id-814 hr {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 40px 0;
}

/* Form card feel */
.page-id-814 .fluentform {
  margin-top: 32px;
}

/* Inputs styled like Buried cards */
.page-id-814 .fluentform input,
.page-id-814 .fluentform textarea,
.page-id-814 .fluentform select {
  background: rgba(24, 24, 30, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Focus state */
.page-id-814 .fluentform input:focus,
.page-id-814 .fluentform textarea:focus,
.page-id-814 .fluentform select:focus {
  outline: none;
  border-color: rgba(229,9,20,0.6);
  background: rgba(24, 24, 30, 0.95);
}

/* Labels */
.page-id-814 .fluentform label {
  color: #b8b8c6;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Helper text */
.page-id-814 .fluentform .ff-el-help-text {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Field spacing */
.page-id-814 .fluentform .ff-el-group {
  margin-bottom: 22px;
}

/* Section headers inside form */
.page-id-814 .fluentform h3,
.page-id-814 .fluentform h4 {
  font-size: 22px;
  font-weight: 800;
  color: #e50914;
  margin: 48px 0 16px;
}

/* Submit button matches site CTA */
.page-id-814 .fluentform .ff-btn {
  background: #e50914;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 700;
  padding: 14px 26px;
  font-size: 14px;
}

.page-id-814 .fluentform .ff-btn:hover {
  background: #ff1f2a;
}

/* =========================
   Submit Page: Hide Default Page Title
========================= */

.page-id-814 .entry-header {
  display: none;
}

/* =========================
   Submit Page: Title Color
========================= */

/* Submit page section title color */
.page-id-814 .entry-content h2 {
  color: #e50914;
  font-weight: 800;
}

/* Submit page main title */
.page-id-814 .entry-content h1 {
  color: #e50914;
  font-weight: 800;
}


/* =========================
   Submit Page: Button Color
========================= */

.page-id-814 .fluentform button.ff-btn-submit,
.page-id-814 .fluentform input.ff-btn-submit,
.page-id-814 .fluentform .ff-btn-submit {
  background-color: #e50914 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 26px;
  cursor: pointer;
  margin-top: 12px;
}

/* Hover state */
.page-id-814 .fluentform button.ff-btn-submit:hover,
.page-id-814 .fluentform input.ff-btn-submit:hover,
.page-id-814 .fluentform .ff-btn-submit:hover {
  background-color: #b20710 !important;
}


/* =========================
   Contact Page – Fluent Forms
   Page ID: 859
========================= */

/* Align Contact page with site layout */
.page-id-859 .entry-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Intro text width matches Submit page */
.page-id-859 .entry-content > p {
  max-width: 720px;
}

/* Remove harsh divider look */
.page-id-859 hr {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 20px 0;
}

/* HARD constrain the form width */
.page-id-859 .fluentform {
  max-width: 720px;
  width: 100%;
  margin-top: 32px;
  margin-left: 0;
  margin-right: auto;
}

/* Prevent Fluent Forms internal wrappers from stretching */
.page-id-859 .fluentform .ff-el-form-control,
.page-id-859 .fluentform .ff-el-group {
  max-width: 100%;
}

/* Inputs styled like Submit page */
.page-id-859 .fluentform input,
.page-id-859 .fluentform textarea,
.page-id-859 .fluentform select {
  width: 100%;
  background: rgba(24, 24, 30, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  box-sizing: border-box;
}

/* Focus state */
.page-id-859 .fluentform input:focus,
.page-id-859 .fluentform textarea:focus,
.page-id-859 .fluentform select:focus {
  outline: none;
  border-color: rgba(229,9,20,0.6);
  background: rgba(24, 24, 30, 0.95);
}

/* Labels */
.page-id-859 .fluentform label {
  color: #b8b8c6;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Helper text */
.page-id-859 .fluentform .ff-el-help-text {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* Field spacing */
.page-id-859 .fluentform .ff-el-group {
  margin-bottom: 22px;
}

/* Hide default page title */
.page-id-859 .entry-header {
  display: none;
}

/* Page titles */
.page-id-859 .entry-content h1,
.page-id-859 .entry-content h2 {
  color: #e50914;
  font-weight: 800;
}

/* Submit button */
.page-id-859 .fluentform button.ff-btn-submit,
.page-id-859 .fluentform input.ff-btn-submit,
.page-id-859 .fluentform .ff-btn-submit {
  background-color: #e50914 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 14px 26px;
  cursor: pointer;
  margin-top: 12px;
}

/* Hover state */
.page-id-859 .fluentform button.ff-btn-submit:hover,
.page-id-859 .fluentform input.ff-btn-submit:hover,
.page-id-859 .fluentform .ff-btn-submit:hover {
  background-color: #b20710 !important;
}


/* =========================
   About Page
   Page ID: 863
========================= */

/* Align About page with site layout */
.page-id-863 .entry-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Hide default page title */
.page-id-863 .entry-header {
  display: none;
}

/* Tagline at top (first paragraph or heading) */
.page-id-863 .entry-content > p:first-child,
.page-id-863 .entry-content > h1:first-child {
  font-size: 32px;
  font-weight: 800;
  color: #e50914;
  margin-bottom: 32px;
  max-width: 1000px;
}

/* Body text */
.page-id-863 .entry-content p {
  font-size: 16px;
  line-height: 1.65;
  color: #b8b8c6;
  max-width: 900px;
  margin-bottom: 15px;
}

/* Section spacing */
.page-id-863 .entry-content p + p {
  margin-top: 0;
}

/* Links inside About page */
.page-id-863 .entry-content a {
  color: #e50914;
  font-weight: 600;
}

.page-id-863 .entry-content a:hover {
  text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 900px) {

  .page-id-863 .entry-content {
    padding: 24px 24px 64px;
  }

  .page-id-863 .entry-content > p:first-child,
  .page-id-863 .entry-content > h1:first-child {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .page-id-863 .entry-content p {
    font-size: 14px;
    line-height: 1.55;
  }
}

/* =========================
   Privacy Policy & Terms
   Page ID: 867
========================= */

/* Align page with site layout */
.page-id-867 .entry-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Hide default page title */
.page-id-867 .entry-header {
  display: none;
}

/* Main heading or first paragraph */
.page-id-867 .entry-content > p:first-child,
.page-id-867 .entry-content > h1:first-child {
  font-size: 32px;
  font-weight: 800;
  color: #e50914;
  margin-bottom: 32px;
  max-width: 1000px;
}

/* Body text */
.page-id-867 .entry-content p {
  font-size: 16px;
  line-height: 1.65;
  color: #b8b8c6;
  max-width: 900px;
  margin-bottom: 15px;
}

/* Section headings */
.page-id-867 .entry-content h2,
.page-id-867 .entry-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 40px;
  margin-bottom: 12px;
  max-width: 900px;
}

/* Reduce extra paragraph spacing */
.page-id-867 .entry-content p + p {
  margin-top: 0;
}

/* Links */
.page-id-867 .entry-content a {
  color: #e50914;
  font-weight: 600;
}

.page-id-867 .entry-content a:hover {
  text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 900px) {

  .page-id-867 .entry-content {
    padding: 24px 24px 64px;
  }

  .page-id-867 .entry-content > p:first-child,
  .page-id-867 .entry-content > h1:first-child {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .page-id-867 .entry-content p {
    font-size: 14px;
    line-height: 1.55;
  }

  .page-id-867 .entry-content h2,
  .page-id-867 .entry-content h3 {
    font-size: 18px;
    margin-top: 28px;
  }
}


/* =========================
   Newsletter Page
   Page ID: 869
========================= */

/* Align Newsletter page with site layout */
.page-id-869 .entry-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Hide default page title */
.page-id-869 .entry-header {
  display: none;
}

/* Main heading or first paragraph */
.page-id-869 .entry-content > p:first-child,
.page-id-869 .entry-content > h1:first-child {
  font-size: 32px;
  font-weight: 800;
  color: #e50914;
  margin-bottom: 32px;
  max-width: 1000px;
}

/* Body text */
.page-id-869 .entry-content p {
  font-size: 16px;
  line-height: 1.65;
  color: #b8b8c6;
  max-width: 900px;
  margin-bottom: 15px;
}

/* Section headings */
.page-id-869 .entry-content h2,
.page-id-869 .entry-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 40px;
  margin-bottom: 12px;
  max-width: 900px;
}

/* Reduce extra paragraph spacing */
.page-id-869 .entry-content p + p {
  margin-top: 0;
}

/* Links */
.page-id-869 .entry-content a {
  color: #e50914;
  font-weight: 600;
}

.page-id-869 .entry-content a:hover {
  text-decoration: underline;
}

/* =========================
   ConvertKit Form Styling
========================= */

/* Form wrapper */
.page-id-869 form {
  max-width: 600px;
  margin-top: 32px;
}

/* Email input */
.page-id-869 input[type="email"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #2a2a34;
  background: #0f0f14;
  color: #ffffff;
  margin-bottom: 14px;
}

/* Placeholder text */
.page-id-869 input[type="email"]::placeholder {
  color: #6f6f82;
}

/* Submit button */
.page-id-869 form button,
.page-id-869 form input[type="submit"] {
  background: #e50914;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.page-id-869 form button:hover,
.page-id-869 form input[type="submit"]:hover {
  opacity: 0.9;
}


/* Success message */
.page-id-869 .formkit-alert-success {
  margin-top: 16px;
  font-size: 14px;
  color: #8fd18f;
}

/* =========================
   Mobile adjustments
========================= */

@media (max-width: 900px) {

  .page-id-869 .entry-content {
    padding: 24px 24px 64px;
  }

  .page-id-869 .entry-content > p:first-child,
  .page-id-869 .entry-content > h1:first-child {
    font-size: 24px;
    margin-bottom: 18px;
  }

  .page-id-869 .entry-content p {
    font-size: 14px;
    line-height: 1.55;
  }

  .page-id-869 .entry-content h2,
  .page-id-869 .entry-content h3 {
    font-size: 18px;
    margin-top: 28px;
  }
}


/* =========================
   Auth & Account Pages
   Log In, Register, Reset, Account
========================= */

/* Page container */
.page-id-972 .entry-content,
.page-id-974 .entry-content,
.page-id-983 .entry-content,
.page-id-976 .entry-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

/* Hide default page titles */
.page-id-972 .entry-header,
.page-id-974 .entry-header,
.page-id-983 .entry-header,
.page-id-976 .entry-header {
  display: none;
}

/* =========================
   Shared Auth Layout
========================= */

.bf-auth-form,
#loginform,

.bf-account-wrap {
  width: 100%;
}

/* Page headings */
.bf-auth-form h1,
.bf-auth-form h2,
#loginform h1,
#loginform h2,
.bf-account-wrap h1,
.bf-account-wrap h2 {
  font-size: 24px;
  font-weight: 700;
  color: #e50914;
  margin-bottom: 32px;
  text-align: left;
}

/* =========================
   Labels
========================= */

.bf-auth-form label,
#loginform label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #9c9caf;
  margin-bottom: 6px;
}

/* =========================
   Inputs
========================= */

.bf-auth-form input[type="email"],
.bf-auth-form input[type="password"],
#loginform input[type="text"],
#loginform input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: #121218;
  border: 1px solid #2a2a36;
  border-radius: 6px;
  color: #f2f2f6;
  font-size: 14px;
  margin-bottom: 24px;
}

.bf-auth-form input:focus,
#loginform input:focus {
  outline: none;
  border-color: #e50914;
}

/* =========================
   Remember Me
========================= */

#loginform .login-remember {
  margin-bottom: 28px;
}

#loginform .login-remember label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #9c9caf;
  cursor: pointer;
}

/* =========================
   Buttons
========================= */

.bf-auth-form button,
#loginform input[type="submit"] {
  width: 100%;
  background: #e50914;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 8px;
}

.bf-auth-form button:hover,
#loginform input[type="submit"]:hover {
  opacity: 0.9;
}

/* =========================
   Helper Text & Links
========================= */

.bf-auth-helper,
#loginform p {
  margin-top: 24px;
  font-size: 14px;
  color: #b8b8c6;
  text-align: left;
}

/* Links */
.bf-auth-helper a,
#loginform a,
.bf-account-wrap a {
  color: #e50914;
  font-weight: 600;
}

.bf-auth-helper a:hover,
#loginform a:hover,
.bf-account-wrap a:hover {
  text-decoration: underline;
}

/* Account page helper text — match login/register spacing */
.page-id-976 article > p {
  margin-top: 16px;
  font-size: 14px;
  color: #b8b8c6;
  max-width: 720px;
}



/* =========================
   Errors
========================= */

.bf-auth-error {
  background: #121218;
  border: 1px solid #2a2a36;
  border-radius: 6px;
  padding: 14px;
  color: #b8b8c6;
  font-size: 14px;
  margin-bottom: 24px;
}

/* =========================
   Account Page
========================= */

.bf-account-wrap {
  background: #0f0f14;
  border: 1px solid #1f1f2a;
  border-radius: 10px;
  padding: 40px;
}

.bf-account-wrap p {
  font-size: 15px;
  color: #b8b8c6;
  margin-bottom: 14px;
}

/* =========================
   Mobile
========================= */

@media (max-width: 900px) {
  .page-id-972 .entry-content,
  .page-id-974 .entry-content,
  .page-id-983 .entry-content,
  .page-id-976 .entry-content {
    padding: 56px 60px 72px;
  }
}



@media (max-width: 900px) {

  .bf-account-wrap {
    max-width: none;
    margin: 0;
    padding: 24px 16px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

}


@media (max-width: 900px) {

  .bf-profile-form label {
    margin-top: 16px;
    font-size: 14px;
  }

  .bf-profile-form input,
  .bf-profile-form textarea {
    padding: 12px 14px;
    font-size: 15px;
  }

}

@media (max-width: 900px) {

  .bf-account-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 16px;
    box-sizing: border-box;
  }

}

@media (max-width: 900px) {

  .bf-account-wrap input,
  .bf-account-wrap textarea,
  .bf-account-wrap select {
    width: 100%;
    box-sizing: border-box;
  }

}

@media (max-width: 900px) {

  .bf-account-wrap {
    border-width: 1px;
    border-radius: 10px;
  }

}


@media (max-width: 900px) {

  .bf-favorites-grid,
  .bf-watched-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .bf-favorites-grid::-webkit-scrollbar,
  .bf-watched-grid::-webkit-scrollbar {
    display: none;
  }

}


@media (max-width: 900px) {

  .bf-favorites-grid > a,
  .bf-watched-grid > a {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }

}


@media (max-width: 900px) {

  .bf-favorites-grid,
  .bf-watched-grid {
    padding-left: 2px;
    padding-right: 8px;
  }

}




/* =========================
   Force Auth Links Red
========================= */

.page-id-972 .entry-content a,
.page-id-974 .entry-content a,
.page-id-983 .entry-content a,
.page-id-976 .entry-content a {
  color: #e50914;
  font-weight: 600;
}

.page-id-972 .entry-content a:hover,
.page-id-974 .entry-content a:hover,
.page-id-983 .entry-content a:hover,
.page-id-976 .entry-content a:hover {
  text-decoration: underline;
}

/* =========================
   Auth Page Headings (Red)
========================= */

.page-id-972 .entry-content h1,
.page-id-972 .entry-content h2,
.page-id-974 .entry-content h1,
.page-id-974 .entry-content h2,
.page-id-983 .entry-content h1,
.page-id-983 .entry-content h2,
.page-id-976 .entry-content h1,
.page-id-976 .entry-content h2 {
  color: #e50914;
}

/* =========================
   Header Account Icon
========================= */

.bf-account-icon {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

.bf-account-icon a {
  display: inline-flex;
  align-items: center;
}

/* Simple user icon */
.bf-user-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #e50914;
  position: relative;
}

/* Head */
.bf-user-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e50914;
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/* Body */
.bf-user-icon::after {
  content: "";
  width: 12px;
  height: 6px;
  border-radius: 6px 6px 0 0;
  background: #e50914;
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/* Hover */
.bf-account-icon a:hover .bf-user-icon {
  opacity: 0.85;
}





/* =========================
   Profile Account form additions
========================= */

.bf-profile-form input[type="text"],
.bf-profile-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: #121218;
  border: 1px solid #2a2a36;
  border-radius: 6px;
  color: #f2f2f6;
  font-size: 14px;
  margin-bottom: 20px;
}

.bf-profile-form textarea:focus,
.bf-profile-form input[type="text"]:focus {
  outline: none;
  border-color: #e50914;
}

.bf-auth-success {
  background: #121218;
  border: 1px solid #2a2a36;
  border-radius: 6px;
  padding: 14px;
  color: #f2f2f6;
  font-size: 14px;
  margin-bottom: 20px;
}

.bf-sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =========================
   Profile image section
========================= */

.bf-profile-image-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}

.bf-profile-image {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #2a2a36;
  background: #121218;
}

/* Custom file upload */

.bf-upload-label {
  color: #e50914;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
}

.bf-upload-label input[type="file"] {
  display: none;
}

/* Remove image link */

.bf-remove-image {
  margin: 0;
}

.bf-remove-image a {
  font-size: 13px;
  color: #9c9caf;
  text-decoration: underline;
}

.bf-remove-image a:hover {
  color: #e50914;
}

.bf-file-hidden {
  position: absolute;
  left: -9999px;
}

.bf-upload-label {
  display: inline-block;
  background: transparent;
  color: #e50914;
  font-weight: 600;
  cursor: pointer;
  margin-right: 10px;
}


.bf-profile-image-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.bf-profile-image {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #2a2a36;
  background: #121218;
}

.bf-profile-image-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bf-upload-label {
  color: #b30000;
  font-weight: 600;
  cursor: pointer;
}

.bf-file-hidden {
  display: none;
}

.bf-remove-image {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: #9c9caf;
  cursor: pointer;
}

.bf-remove-image:hover {
  color: #e50914;
  text-decoration: underline;
}


.bs-btn.mark-watched-button {
  appearance: none;
  -webkit-appearance: none;
  background-color: 100;
  border: none;
  box-shadow: none;
  font-family: inherit;
}


.bs-single-card::before {
  pointer-events: none;
}



.bs-btn.mark-watched-button {
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.bs-btn.mark-watched-button:hover {
  background-color: #b20710;
}

.bs-btn.mark-watched-button.is-watched {
  background-color: #6b0f14;
  cursor: default;
  opacity: 0.85;
}

.bs-btn.mark-watched-button.is-watched:hover {
  background-color: #6b0f14;
}


.mark-watched-button:hover {
  filter: brightness(0.9);
}

.mark-watched-button.is-watched:hover {
  filter: brightness(0.9);
}


.bs-card.is-watched {
  opacity: 0.6;
}

.bf-watched-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
}




/* =========================
   Watched Films (Account Page)
========================= */

.bf-watched-heading {
  margin-top: 60px;
  margin-bottom: 16px;
}

.bf-watched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.bf-watched-card {
  text-decoration: none;
  color: inherit;
}

.bf-watched-thumb img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.bf-watched-meta {
  margin-top: 8px;
}

.bf-watched-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: #ffffff;
}

.bf-watched-director {
  font-size: 13px;
  opacity: 0.75;
  margin-top: 2px;
}


/* Watched Films – remove underline on hover */
.bf-watched-card,
.bf-watched-card:hover,
.bf-watched-card * {
  text-decoration: none !important;
}


.bf-watched-card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}


/* =========================
   Single Film Actions
========================= */

.bs-single-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bs-single-actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =========================
   Favorite Heart Button
========================= */

.bs-favorite-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #e50914;
  display: flex;
  align-items: center;
}

.bs-favorite-btn:hover {
  opacity: 0.85;
}

.bs-favorite-btn.is-favorited path {
  fill: #e50914;
}

.bs-favorite-btn.is-favorited svg {
  animation: bf-heart-pop 0.2s ease;
}

@keyframes bf-heart-pop {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.bf-favorites-section {
  margin-top: 48px;
}




/* =========================
   Account Page Mobile: Horizontal scrollers
========================= */
@media (max-width: 900px) {

  /* Favorites + Watched containers become horizontal scrollers */
  .page-id-976 .bf-watched-grid,
  .page-id-976 .bf-favorites-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* Each card has a fixed width so they do not stack */
  .page-id-976 .bf-watched-card,
  .page-id-976 .bf-favorites-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }

  /* If your cards are links (likely), make sure they behave the same */
  .page-id-976 .bf-watched-grid > a,
  .page-id-976 .bf-favorites-grid > a {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }

  /* Hide scrollbar (Chrome/Safari) */
  .page-id-976 .bf-watched-grid::-webkit-scrollbar,
  .page-id-976 .bf-favorites-grid::-webkit-scrollbar {
    display: none;
  }
}



/* =========================
   Better Featured Film layout on mobile
========================= */

@media (max-width: 768px) {

  .bs-featured-inner {
    display: flex;
    flex-direction: column;
  }

  .bs-featured-thumb {
    order: 2;
  }

  .bs-featured-info {
    order: 3;
    padding-top: 12px;
  }

  .bs-featured::before {
    content: "FEATURED FILM";
    display: block;
    color: #e50914;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 18px;
    margin-bottom: 6px;
  }

  .bs-featured-meta,
  .bs-featured-cast,
  .bs-featured-desc,
  .watch-now {
    display: none;
  }

  .bs-featured-title {
    font-size: 28px;
    margin-bottom: -6px;
  }

  .bs-featured-director {
    font-size: 14px;
    opacity: 0.7;
  }

}

@media (max-width: 768px) {

  /* Hide any existing FEATURED label inside the card */
  .bs-featured-info .featured,
  .bs-featured-info .featured-film,
  .bs-featured-info .bs-featured-label {
    display: none;
  }

  /* Force left alignment for mobile featured card */
  .bs-featured,
  .bs-featured-inner,
  .bs-featured-info {
    text-align: left;
    align-items: flex-start;
  }

}

@media (max-width: 768px) {

  .bs-featured-info {
    padding-left: 0;
    padding-right: 0;
  }

  .bs-featured-title {
    text-align: left;
  }

}

@media (max-width: 768px) {

  .bs-featured-info::before {
    content: none !important;
    display: none !important;
  }

}

@media (max-width: 768px) {

  .bs-featured {
    margin-bottom: 24;
    padding-bottom: 0;
  }

  .bs-featured-inner {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .bs-featured-info {
    margin-bottom: 0;
    padding-bottom: 0;
  }

}

@media (max-width: 768px) {

  .bs-featured-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .bs-featured-thumb {
    margin-left: -14px;
    margin-right: -14px;
  }

}




/* =========================
   Hide category section descriptions on front page (mobile only)
========================= */

@media (max-width: 900px) {
  .home .bs-section-note {
    display: none;
  }
}

/* =========================
   edit category and film count text size (mobile only)
========================= */

@media (max-width: 900px) {
  .bs-section-title {
    font-size: 18px;
  }

  .bs-section-title .bs-count {
    font-size: 12px;
  }
}



/* =========================
   footer mobile layout (FINAL)
========================= */

@media (max-width: 900px) {

  .site-footer {
    padding: 28px 0 !important;
  }

  .site-footer-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  /* Brand */
  .footer-brand {
    margin-bottom: 0 !important;
  }

  .footer-title {
    font-size: 20px !important;
    margin: 0 0 10px 0 !important;
  }

  .footer-tagline {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* Divider under brand */
  .footer-brand::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin-top: 14px;
  }

  /* Links block */
  .footer-nav {
    margin-top: 10px !important;
  }

  .footer-nav ul {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: start !important;
    column-gap: 28px !important;
    row-gap: 14px !important;
    max-width: 260px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-nav li {
    margin: 0 !important;
  }

  .footer-nav a {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Tip block */
  .footer-tip {
    margin-top: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Copyright */
  .footer-copy {
    margin-top: 10px !important;
    font-size: 13px !important;
    opacity: 0.6 !important;
  }

}


/* =========================
   reduce space above footer (mobile)
========================= */

@media (max-width: 900px) {

  main,
  .site-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* If your layout uses a wrapper */
  .bs-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Last cards / sections before footer */
  .bs-section:last-child,
  .film-grid:last-child,
  .bs-film-grid:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

}


/* =========================
   About the Film section - changing button text size (mobile)
========================= */

@media (max-width: 900px) {

  .bs-single-card .bs-single-actions .bs-btn {
    font-size: 12px;
    line-height: 1.25;
    padding: 10px 6px;
    text-align: center;
    white-space: normal;
  }

}

@media (max-width: 900px) {
  .bs-single-actions {
    gap: 8px;
  }
}

/* this changes the text size when someones not logged in, to log in or create account */
@media (max-width: 900px) {
  .bs-single-actions {
    font-size: 12px;
    line-height: 1.4;
  }
}