/* Base theme: white bg, black text */
:root { --kontrary-accent: #000; }
html, body { background:#fff; color:#000; }

html { scroll-behavior: smooth; }
#debateThread { max-height: 65vh; overflow: auto; }

.navbar-toggler{border:0px!important;}


.navbar .nav-link { color:#000; }
.navbar .nav-link.active, .navbar .nav-link:hover { text-decoration: underline; }

.nav-link {color: #707070;font-size: 16px;}
.nav-link.active {background:#000!important;margin-bottom:10px!important}

.btn-dark { background:#000; border-color:#000; padding: 15px 30px; }
.btn-outline-dark { color:#000; border-color:#000;padding: 15px 30px; }

/* Persona card selection highlight */
.persona-card .card { transition: box-shadow .2s, transform .12s; }
.persona-card.active .card { box-shadow: 0 0 0 2px #000 inset; transform: translateY(-1px); }

.logo-dark { display:none; }
[data-bs-theme="dark"] .logo-dark { display:inline; }
[data-bs-theme="dark"] .logo-light { display:none; }


/* ===== Media Query Responsive for 575 less ===== */
@media (max-width: 575.98px) {.navbar-collapse {
    display: flex;border-top: solid 1px #d7d7d7 !important;
        margin-top: 10px;
        padding: 16px 1px;

}
.navbar-nav {flex-direction: row!important;gap: 16px!important;}
.btn-outline-dark {padding: 8px 15px!important;}
.hero-text {max-width: 100%!important; font-size:0.8rem!important;padding:20px 20px!important;line-height: 1.65!important;}
.hero-slider .swiper-slide{padding: 20px 10px!important;min-height:2rem!important;}
.row {background: #fff;
    padding: 20px 10px;
    margin: 2px 2px;
    border-radius: 12px;}
    .p-3{padding:0px!important;box-shadow:none!important;}
    .btn-dark {padding: 8px 15px!important;}
    
     .h3.m-0 {font-size:18px;}
     .text-secondary {font-size:13px;}
     .h5{font-size:15px;}
     #deckMeta{font-size: 10px!important;display:none!important;}
     .card.border-0.shadow-sm.h-100{padding:2px!important;}
     .flex-grow-1{font-size: 12px;}
     .mt-2.small.text-secondary {margin-bottom: 22px;}
     #personaGrid{padding:0px!important;margin:0px!important;}
     .col-6.col-md{padding:2px 2px!important;}
     .btn .badge {font-size: 8px;
    border-radius: 3px;}
    .small.text-secondary.m-0 {font-size:8px!important;}
    .h5.mb-3{margin-bottom:10px!important;}
    .h5.m-0{width: 100%;}
    
    .mt-3{display: flex
;flex-direction: row;flex-wrap: wrap;gap: 10px;}
.d-flex.align-items-center.justify-content-between.mb-2{display: flex !important
;
    flex-direction: column;
    align-items: start !important;}
    
    
    input::placeholder {
  color: #cbcbcb !important;
  opacity: 1;
  font-size:12px!important;}
 

/* Firefox */
input::-moz-placeholder {
  color: #cbcbcb !important;
  opacity: 1;
  font-size:12px!important;
}

/* Internet Explorer 10–11 */
input:-ms-input-placeholder {
  color: #cbcbcb !important;
  font-size:12px!important;
}

/* Microsoft Edge (legacy) */
input::-ms-input-placeholder {
  color: #cbcbcb !important;
  font-size:12px!important;
}

    
}

/* ===== Hero slider (black minimal) ===== */
.hero-slider{
  background:#000;
  color:#fff;
  overflow:hidden;
  position: relative; /* for overlays/progress */
}

/* Swiper base */
.hero-slider .swiper{ width:100%; height:100%; }
.hero-slider .swiper-slide{
  position: relative;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  min-height: clamp(180px, 28vh, 360px);
  padding: 70px 70px;
}

@media (min-width: 992px) {
    .col-lg-8 {
        flex: 0 0 auto;
        width: 98%;
        background: #fff;
        border-radius: 14px;
        margin: 5px 14px;
        padding: 40px;
        box-shadow: var(--bs-box-shadow-sm) !important;}
        
        #topicForm {box-shadow:none!important;padding:0px!important;}
        
    }
    
    /* Chrome, Safari, Edge, Opera */
input::placeholder {
  color: #cbcbcb !important;
  opacity: 1;
}

/* Firefox */
input::-moz-placeholder {
  color: #cbcbcb !important;
  opacity: 1;
}

/* Internet Explorer 10–11 */
input:-ms-input-placeholder {
  color: #cbcbcb !important;
}

/* Microsoft Edge (legacy) */
input::-ms-input-placeholder {
  color: #cbcbcb !important;
}

.py-4
{background:#f1f1f1;}
/* Per-slide video layer */
.hero-slide-video{
  position:absolute; inset:0; z-index:0;
}
.hero-slide-video video{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: brightness(0.35);
}

/* Content above video */
.hero-slide-content{
  position: relative; z-index:1;
  display:flex; align-items:center;
  gap: clamp(12px, 2.5vw, 28px);
}
.hero-text{
  margin:0;
  font-size: clamp(1.0rem, 3.2vw, 5.25rem);
  line-height: 1.35;
  max-width: 66%;
  opacity: 0.98;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Remove dots (using progress bar instead) */
.hero-slider .swiper-pagination{ display:none !important; }

.card.border-0.shadow-sm.h-100
{border: solid 0.5px #000 !important;
    background: #fff;
    padding: 25px 25px;
    border-radius: 10px;}
    
  .swiper-pagination-bullet-active
  {background:#000!important;}
  
  .h6.mb-2.text-uppercase{padding: 10px 0px;}
  
  .card.border-0.shadow-sm.h-100.persona
  {padding:0px;border: 0px !important;}
  
  .object-fit-cover {border-radius: 10px 10px 0px 0px;}

/* Progress container */
.hero-progress{
  position: absolute; left:0; right:0; bottom:0;
  height: 3px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
  z-index: 2;
}
.hero-progress .bar{
  --hero-delay: 4s; /* your JS can overwrite this */
  width: 0%;
  height: 100%;
  background: #fff;
  opacity: 0.95;
  will-change: transform, width;
}
@keyframes heroFill { from { width: 0%; } to { width: 100%; } }

/* Subtle grain overlay */
.hero-slider::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
  background:
    radial-gradient(transparent 0, rgba(255,255,255,.03) 100%) center/200% 200%,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.025"/></svg>') center/auto;
}

/* Respect reduced motion: pause video and rely on poster */
@media (prefers-reduced-motion: reduce){
  .hero-slide-video video{ display:none; }
}

/* If your site uses a .container with a max-width, unlock only inside hero */
.hero-slider .container{ max-width: 100%; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ display:none; }
  .hero-overlay{ background: none; }
}

@media (min-width: 992px) {
.container {
  max-width: 100% !important;
}
}

/* Toasts spacing */
.toast-container { z-index: 1080; }


/* Minimal utility for sticky CTA on mobile */
.sticky-cta { position: sticky; bottom: 0; z-index: 100; }