:root{
  --bg:#0b0f17;
  --bg-2:#0e1420;
  --text:#ffffff;
  --muted:#c9d1d9;
  --accent:#ff2e2e;
  --card:#111826;
  --border:#1f2937;
  --header-height:56px;           /* mobile / default */
  --desktop-header-height:80px;   /* desktop override */
  --mobile-menu-width:280px;      /* base partial width */
  --container-max:1100px;
  --radius:8px;
  --shadow-1:0 4px 12px rgba(0,0,0,0.45);
  --shadow-2:0 8px 20px rgba(0,0,0,0.55);
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Ensure content sits below header */
body{padding-top:var(--header-height);transition:padding-top .18s ease}

/* Layout helpers */
.container{max-width:var(--container-max);margin:0 auto;padding:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr;gap:10px}}

/* Header (solid background — no transparency) */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-height);
  background:var(--bg-2); /* solid, opaque */
  border-bottom:1px solid var(--border);
  z-index:1200;display:flex;align-items:center;
  backdrop-filter:none; filter:none; opacity:1;
}
.navbar{
  width:100%;max-width:var(--container-max);margin:0 auto;padding:0 12px;
  display:flex;align-items:center;justify-content:space-between;height:100%
}
.brand{display:flex;align-items:center;gap:10px;margin-left:8px}
.brand img{height:40px;width:auto;display:block}
.logo-img{display:block} /* explicit class from header.php */

/* Desktop header increase (only on wide screens) */
@media (min-width:1024px){
  :root{ --header-height: var(--desktop-header-height); }
  body{padding-top:var(--header-height)}
  .header{height:var(--header-height)}
  .navbar{padding:0 20px}
  .brand img{height:56px}
}

/* Mobile/tablet: make logo and toggle larger + margins */
@media (max-width:1024px){
  .brand{margin-left:14px}
  .brand img{height:48px}
  .toggle{
    padding:12px; font-size:1.8rem; margin-right:14px; border-radius:10px;
  }
}
@media (max-width:768px){
  .brand{margin-left:16px}
  .brand img{height:52px}
  .toggle{
    padding:14px; font-size:2rem; margin-right:16px;
  }
}

/* Desktop menu */
.menu{display:flex;gap:10px;align-items:center}
.menu a{padding:6px 8px;border-radius:8px;transition:background .14s,color .14s}
.menu a:hover{background:rgba(255,46,46,0.06);color:#fff}

/* Buttons */
.btn{
  display:inline-block;padding:8px 12px;background:var(--accent);color:#fff;border-radius:8px;
  border:none;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .12s,opacity .12s
}
.btn:hover{transform:translateY(-1px);opacity:.98}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:7px 10px}

/* Toggle (mobile) — solid background */
.toggle{
  display:none;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px;border-radius:8px;cursor:pointer;font-size:1.6rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.toggle:hover{background:rgba(255,46,46,0.08);border-color:var(--accent)}
.toggle:focus{outline:2px solid rgba(255,46,46,0.12)}

/* Mobile flyout menu — partial width, opaque */
.mobile-menu{
  position:fixed;top:var(--header-height);right:calc(-1 * var(--mobile-menu-width));
  width:var(--mobile-menu-width);height:calc(100% - var(--header-height));
  max-width:80vw; /* partial coverage */
  background:var(--bg-2); /* solid */
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;padding:12px;gap:8px;
  transition:right .26s cubic-bezier(.2,.9,.2,1);
  z-index:1400;box-shadow:-8px 0 26px rgba(0,0,0,0.6);
  opacity:1; backdrop-filter:none; filter:none; mix-blend-mode:normal;
}
.mobile-menu.open{right:0}
.mobile-menu a{color:#fff;padding:10px 12px;border-radius:8px;font-weight:700;text-decoration:none;background:transparent}
.mobile-menu a:hover{background:rgba(255,46,46,0.06)}

/* Mobile overlay — darker behind menu */
.mobile-overlay{
  position:fixed;inset:0;top:var(--header-height);background:rgba(0,0,0,0.6);
  opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s;z-index:1350
}
.mobile-overlay.open{opacity:1;visibility:visible}

/* Mobile close button */
.mobile-close{
  align-self:flex-end;background:transparent;border:1px solid rgba(255,255,255,0.1);
  color:#fff;padding:6px 8px;border-radius:8px;cursor:pointer
}
.mobile-close:hover{background:rgba(255,46,46,0.06);border-color:var(--accent)}

/* Responsive */
@media (max-width:768px){.menu{display:none}.toggle{display:inline-flex;align-items:center;justify-content:center}}

/* Card base */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.015));
  border:1px solid rgba(255,255,255,0.03);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-1)
}

/* Inputs & forms */
.input,.search-input{width:100%;padding:10px;background:rgba(255,255,255,0.02);border:1px solid var(--border);color:var(--text);border-radius:8px;font-size:.98rem}
.label{color:var(--muted);font-size:.88rem;margin-bottom:6px;display:block}

/* Hero (centered, compact) */
.hero{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:36vh;padding:16px 12px;text-align:center;border-bottom:1px solid var(--border)
}
.hero h1{font-size:1.6rem;margin-bottom:6px;color:var(--accent);letter-spacing:.6px}
.hero .tagline{font-size:.98rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.hero .subtext{max-width:680px;color:var(--muted);margin-bottom:10px}

/* Tighten title/search/list spacing */
.container > h1, .container > h2, .section-title { margin-top:6px; margin-bottom:6px; }

/* Search UI (shared, compact) */
.search-bar{
  display:flex;gap:8px;align-items:center;width:100%;max-width:640px;padding:8px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,46,46,0.02),transparent);border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,0.42); margin:8px auto 6px;
}
.search-input{flex:1;background:transparent;border:none;color:var(--text);font-size:.98rem;padding:10px 12px;outline:none}
.search-input::placeholder{color:#9aa3ad}
.search-input:focus{box-shadow:0 0 0 6px rgba(255,46,46,0.05);border-radius:8px}

/* Clear button */
.search-clear{background:transparent;border:1px solid transparent;color:var(--muted);padding:6px 8px;border-radius:8px;cursor:pointer}
.search-clear:hover{color:#fff;background:rgba(255,255,255,0.02)}

/* Submit */
.search-btn{padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,#ef4444,#dc2626);color:#fff;border:none;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(220,36,36,0.12)}
.search-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(220,36,36,0.12)}

/* Search meta */
.search-meta{text-align:center;color:var(--muted);margin-top:6px;font-size:.92rem}

/* Centered search wrapper for list pages (compact) */
.list-search-center{display:flex;justify-content:center;align-items:center;min-height:18vh;padding:8px 0}

/* Debate card specifics (compact) */
.debate-card{
  padding:10px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s
}
.debate-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.debate-thumb{width:100%;height:130px;object-fit:cover;border-radius:8px;border:1px solid var(--border);margin-bottom:8px}
.debate-title{font-size:1.02rem;font-weight:700;margin-bottom:4px;color:#fff}
.debate-desc{color:var(--muted);font-size:.9rem;margin-bottom:8px}

/* View button */
.btn-view{display:inline-block;padding:8px 14px;border-radius:8px;background:linear-gradient(90deg,#ef4444,#dc2626);color:#fff;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn-view:hover{transform:scale(1.02);box-shadow:0 8px 22px rgba(220,36,36,0.12)}

/* Utility */
.label{color:var(--muted);font-size:.88rem;display:block}
.alert{padding:10px;border-radius:8px;margin-top:8px}

/* Footer */
.site-footer{
  background:linear-gradient(180deg,#0f1114,#0b0b0b);
  color:#e9ecef;
  padding:28px 16px;
  margin-top:24px;
  border-top:1px solid rgba(255,255,255,0.03);
  box-shadow:0 -6px 18px rgba(0,0,0,0.45);
}
.site-footer .footer-container{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:0 8px;
}
.site-footer .col{flex:1;min-width:180px}
.site-footer h3{color:var(--accent);margin:0 0 8px 0;font-size:1rem;font-weight:700}
.site-footer .tagline{font-style:italic;color:#bfc8cf;margin-bottom:8px}
.site-footer .footer-links, .site-footer .footer-social{display:flex;flex-direction:column;gap:8px}
.site-footer a{color:#e6e9eb;text-decoration:none;transition:color .18s}
.site-footer a:hover{color:var(--accent)}
.site-footer .social-row{display:flex;gap:10px;align-items:center;margin-top:6px}
.site-footer .social-row a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.02);color:#fff;text-decoration:none;transition:background .18s,transform .12s}
.site-footer .social-row a:hover{background:rgba(255,46,46,0.12);transform:translateY(-2px)}
.footer-bottom{text-align:center;margin-top:18px;border-top:1px solid rgba(255,255,255,0.03);padding-top:12px;color:#9aa3ad;font-size:13px}

/* Footer responsive */
@media (max-width:720px){
  .site-footer .footer-container{flex-direction:column;gap:16px}
  .site-footer .social-row a{width:34px;height:34px}
}

/* Footer small adjustments */
.site-footer .col p, .site-footer .col a { margin:0; line-height:1.5; }
.site-footer .col + .col { padding-left:8px; }

/* Accessibility helpers */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Small screens adjustments (compact) */
@media (max-width:520px){
  :root{--mobile-menu-width:80vw}   /* ensure partial width on smallest screens */
  .container{padding:10px}
  .hero{min-height:34vh;padding:12px 10px}
  .brand img{height:50px}
  .search-bar{padding:10px;flex-direction:column;gap:8px}
  .grid{gap:10px}
  .debate-thumb{height:110px}
  .site-footer{padding:20px 12px}
  .site-footer .footer-container{padding:0}
}

/* Final overrides to guarantee opacity (if anything else tries to add transparency) */
body .header,
body .mobile-menu,
body .mobile-menu.open{
  background-color:var(--bg-2) !important;
  background-image:none !important;
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
  mix-blend-mode:normal !important;
}






/* Mobile + tablet: slightly reduce vertical gap between input and button */
@media (max-width:1023px) {
  .search-bar {
    gap: 0px !important; /* subtle reduction from 8px */
  }
}

/* Very small screens (already stacked): keep column but tighten spacing */
@media (max-width:520px) {
  .search-bar {
    gap: 0px !important; /* was 8px in your small screens block */
  }
  .search-input,
  .search-btn {
    margin: 0 !important; /* ensure no extra vertical margins slip in */
  }
}



/* Home page: small vertical spacing around search bar
   Applies only to mobile (≤768px) and desktop (≥1024px). Tablet (769–1023px) unchanged. */
@media (max-width:768px) {
  .container > .search-bar {
    margin-top: 15px !important;    /* small space above */
    margin-bottom: 5px !important; /* small space below */
    padding-top: 6px !important;    /* keep inner padding compact */
    padding-bottom: 6px !important;
  }
}

@media (min-width:1024px) {
  .container > .search-bar {
    margin-top: 15px !important;    /* slightly larger on desktop */
    margin-bottom: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}




/* Mobile + tablet only: add vertical space between stacked input and button */
@media (max-width:1023px) {
  .list-search-center .search-bar {
    flex-direction: column !important; /* ensure stacked layout */
    gap: 18px !important;               /* vertical space between input and button */
    padding: 10px !important;          /* keep touch targets comfortable */
    box-sizing: border-box !important;
  }

  .list-search-center .search-input,
  .list-search-center .search-btn {
    width: 100% !important;            /* full width when stacked */
    margin: 0 !important;              /* remove stray margins */
    padding: 10px 12px !important;     /* consistent vertical padding */
    line-height: 1 !important;
    height: auto !important;
  }
}



/* Footer: add left margin in mobile and desktop only */
@media (max-width:768px), (min-width:1024px) {
  .site-footer .footer-container {
    padding-left: 16px !important;  /* adds left margin */
  }
}













/* 🖥️ Desktop-only: force ultra-crisp button and menu text */
@media (min-width:1024px) {
  .btn,
  .btn-view,
  .btn-outline,
  .search-btn,
  .menu a,
  input[type="button"],
  input[type="submit"] {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.4) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    letter-spacing: 0.2px !important;
    text-rendering: optimizeLegibility !important;
  }
}






/* 📱 Mobile + tablet: ultra-sharp button and menu text */
@media (max-width:1023px) {
  .btn,
  .btn-view,
  .btn-outline,
  .search-btn,
  .mobile-menu a,
  .toggle,
  .mobile-left-btn a {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #ffffff !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.4) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    letter-spacing: 0.2px !important;
    text-rendering: optimizeLegibility !important;
  }
}