/* ------------- GLOBAL THEME ------------------ */
:root{
    --accent: #ff3c3c;     /* BadTok red                         */
    --dark  : #000;        /* Pure black for bold buttons        */
  
    --fs-h0 : clamp(2.8rem, 6vw, 4rem);   /* hero headline        */
    --fs-h1 : clamp(2rem , 4.5vw, 3rem);  /* main section titles  */
    --fs-h2 : clamp(1.35rem,3vw,1.75rem); /* card / sub-headers   */
    --fs-p  : 1.15rem;                    /* default paragraph    */
  }
  
  /* ------------- RESET ------------------------- */
  *{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
  html{scroll-behavior:smooth}
  body{color:#000;line-height:1.45;background:#fff}
  
  /* ------------- HEADER ------------------------ */
  header{
    position:fixed;inset:0 0 auto 0;height:60px;
    background:rgba(255,255,255,.42);backdrop-filter:blur(5px);
    display:flex;align-items:center;z-index:2000;
    box-shadow:0 2px 5px rgba(0,0,0,.18)
  }
  #burger{font-size:2rem;background:none;border:none;margin-left:1rem;
    color:var(--dark);cursor:pointer}
  .logo{font-size:1.6rem;font-weight:700;margin-left:.4rem;letter-spacing:.5px}
  #lang-select{margin-left:auto;margin-right:.9rem;border:1px solid #ccc;
    border-radius:4px;padding:.3rem .55rem;font-size:.95rem}
  
  /* ------------- DRAWER ------------------------ */
  #drawer{
    position:fixed;top:0;left:-260px;width:260px;height:100%;background:#fff;
    box-shadow:2px 0 14px rgba(0,0,0,.18);transition:left .3s cubic-bezier(.4,0,.2,1);
    z-index:1999
  }
  #drawer.show{left:0}
  #drawer nav ul{list-style:none;padding:90px 0 0}
  #drawer nav li a{display:block;padding:1.05rem 1.6rem;text-decoration:none;
    color:#333;font-weight:700;font-size:1.05rem;letter-spacing:.4px}
  #drawer nav li a:hover{background:#f3f3f3;color:#000}
  
  /* ------------- HERO -------------------------- */
  #hero{
    min-height:100vh;
    background:#111 url('images/badkitty.png') center/cover fixed no-repeat;
    display:flex;align-items:center;justify-content:center;padding:2rem;
    color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.65)
  }
  .hero-content{max-width:1400px;width:100%;display:flex;flex-wrap:wrap;
    gap:2.2rem;align-items:center;justify-content:space-between}
  .hero-text{flex:1 1 320px}
  .hero-text h1{font-size:var(--fs-h0);margin-bottom:1.2rem}
  .hero-text p {font-size:calc(var(--fs-p)*1.05);margin-bottom:2rem}
  .cta-btn{
    background:var(--dark);color:#fff;padding:.9rem 1.5rem;border:none;
    border-radius:5px;font-weight:700;font-size:1rem;cursor:pointer;
    margin-right:1rem;transition:background .25s}
  .cta-btn:hover{background:#222}.cta-btn.alt{background:var(--accent)}
  .hero-phone{flex:0 0 360px}
  
  /* phone mock */
  .phone-frame{width:100%;aspect-ratio:9/16;background:#000;border:12px solid #000;
    border-radius:28px;overflow:hidden;box-shadow:0 25px 45px rgba(0,0,0,.45)}
  .phone-frame img{width:100%;height:100%;object-fit:cover}
  .hero-phone-controls{display:flex;justify-content:center;flex-wrap:wrap;margin-top:.6rem}
  .hero-phone-controls button{background:rgba(255,255,255,.85);border:none;
    padding:.55rem .9rem;border-radius:4px;margin:.25rem;cursor:pointer}
  
  /* ------------- SECTION BEHAVIOUR ------------- */
  .fade-section{opacity:0;transition:opacity 1s}
  .fade-section.visible{opacity:1}
  section{scroll-margin-top:72px}
  .section-header{text-align:center;margin:3.5rem 0 1.8rem}
  .section-header h2{font-size:var(--fs-h1);letter-spacing:.6px}
  
  /* ------------- PROPAGANDA GRID --------------- */
  #propaganda{padding:2.5rem 1rem}
  .propaganda-content{
    max-width:1200px;margin:0 auto;display:grid;gap:1.25rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .prop-step{background:#fefefe;padding:1.3rem;border-radius:7px;
    box-shadow:0 4px 12px rgba(0,0,0,.06)}
  .prop-step h3{font-size:var(--fs-h2);margin-bottom:.55rem;color:#111}
  .prop-step p {font-size:var(--fs-p);color:#333}
  
  /* ------------- EU AI BOX --------------------- */
  #euai{padding:2.5rem 1rem}
  .eu-box{
    max-width:950px;margin:0 auto;background:#ffefef;
    border-left:7px solid var(--accent);padding:1.5rem;border-radius:7px;
    box-shadow:0 4px 12px rgba(0,0,0,.05)}
  .eu-box h2{font-size:var(--fs-h2);margin-bottom:.6rem}
  .eu-box p {font-size:calc(var(--fs-p)*1.02)}
  
  /* ------------- CASES GRID -------------------- */
  #cases{padding:2.5rem 1rem}
  .case-grid{
    max-width:1100px;margin:0 auto;display:grid;gap:1.25rem;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .case-card{
    background:#fff;border-radius:7px;box-shadow:0 8px 22px rgba(0,0,0,.08);
    cursor:pointer;transition:transform .25s}
  .case-card:hover{transform:translateY(-5px)}
  .case-card img{width:100%;height:160px;object-fit:cover;
    border-top-left-radius:7px;border-top-right-radius:7px}
  .case-info{padding:1rem}
  .case-info h4{font-size:1.1rem;font-weight:700;margin-bottom:.35rem}
  .case-info p {font-size:.9rem;color:#555}
  
  /* ------------- CASE-ITEM GRID ---------------- */
  .case-items.grid{
    display:grid;gap:1.1rem;padding:1.1rem 0;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .item-card{display:flex;gap:1rem;padding:.8rem;background:#f9f9f9;
    border-radius:7px;cursor:pointer;transition:background .25s}
  .item-card:hover{background:#ececec}
  .item-card img{width:190px;height:140px;object-fit:cover;border-radius:5px}
  .item-meta h5{font-size:1rem;font-weight:700;margin-bottom:.25rem}
  .item-meta p {font-size:.87rem;color:#555}
  
  /* ------------- NEXT ITEM BUTTON -------------- */
  .next-item-btn{
    background:var(--accent);color:#fff;border:none;border-radius:6px;
    font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.25);
    transition:background .25s}
  .next-item-btn:hover{background:#d12d2d}
  .next-item-btn.top{padding:.55rem 1.25rem;font-size:.95rem;margin-right:.4rem}
  .next-item-wrap{display:none}   /* hide old centered button */


  /* ---------- EU AI section tweaks ---------- */
.eu-box .lead{
    font-size:1.2rem;
    margin-bottom:1rem;
    line-height:1.55;
  }
  
  .eu-bullets{
    list-style:disc inside;
    font-size:1.05rem;
    margin:1.1rem 0 1.4rem 0;
  }
  .eu-bullets li{margin-bottom:.9rem}
  
  .source-links{
    font-size:.95rem;
    margin-bottom:1.6rem;
  }
  .source-links a{color:var(--accent);text-decoration:underline}
  
  .petition-cta{
    background:#ffe9e9; 
    padding:1.4rem;
    border-radius:6px;
    text-align:center;
    box-shadow:0 3px 12px rgba(0,0,0,.06);
  }
  .petition-cta h3{font-size:1.4rem;margin-bottom:.6rem}
  .petition-cta p {font-size:1.05rem;margin-bottom:1.2rem}
  .petition-cta small{display:block;margin-top:.8rem;color:#444}
  
  /* ------------- MODALS & GALLERY -------------- */
  .modal{display:none;position:fixed;inset:0;overflow:auto;
    background:rgba(40,40,40,.9);z-index:1000}
  .modal.show{display:block}
  .modal-content{position:relative;margin:5% auto;background:#1d1d1de0; color: #aaa;
    padding:1rem;border-radius:8px;width:90%;max-width:800px}
  .modal-content.large{max-width:950px}
  .modal-header-sticky{
    position:sticky;top:0;display:flex;align-items:center;
    justify-content:space-between;gap:1rem;padding:.6rem 0;
    border-bottom:1px solid #666;color:#eee}
  .modal-close{font-size:42px;color:#aaa;cursor:pointer}
  .modal-close:hover{color:#ccc}
  .g-title-wrap{flex:1 1 auto;min-width:0}
  #gallery-heading{font-size:1.25rem;font-weight:700}
  #gallery-caption{margin-top:.25rem;font-size:.95rem;color:#ddd}
  #gallery-meta{font-size:.8rem;color:#aaa;margin-top:.15rem}
  
  #gallery-img{width:100%;max-height:66vh;object-fit:contain;border-radius:6px;margin-top:1rem}
  .modal-thumbs{display:flex;gap:.55rem;overflow-x:auto;margin:1rem 0 .6rem;scrollbar-width:none}
  .modal-thumbs::-webkit-scrollbar{display:none}
  .modal-thumbs img{width:68px;height:68px;border-radius:5px;object-fit:cover;
    opacity:.6;border:2px solid transparent;cursor:pointer;transition:.25s}
  .modal-thumbs img.active{opacity:1;border-color:var(--accent)}
  .modal-controls{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
  .modal-controls button{background:#111;color:#fff;border:none;padding:.6rem 1.1rem;
    border-radius:5px;cursor:pointer;font-size:.9rem;font-weight:700}
  .modal-controls button:hover{background:#333}
  
  /* ------------- REPORT / PETITION ------------- */
  #report,#petition{padding:2.5rem 1rem}
  #report-form{max-width:650px;margin:0 auto;display:flex;flex-direction:column;
    gap:1.15rem}
  #report-form input,#report-form textarea,#report-form select{
    border:1px solid #ccc;border-radius:5px;padding:1rem;font-size:1rem}
    #report-form select{background:#fff;color:#000;}
    #report-form select option{background:#fff;color:#000;}
  .response-message{color:limegreen;font-weight:700}
  .petition-content{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
  .share-tools{display:flex;gap:1rem}
  .share-btn{background:#666;color:#fff;border:none;border-radius:4px;
    padding:.65rem 1.3rem;cursor:pointer;font-weight:700}
  .share-btn:hover{background:#444}
  .add-btn{
    margin:.4rem 0 1rem 0;
    background:#eee;
    border:1px dashed #999;
    padding:.5rem .9rem;
    font-size:.9rem;
    cursor:pointer;
  }
  .add-btn:hover{background:#ddd}
  #link-wrapper input{margin-bottom:.6rem;}
  
  /* ------------- FOOTER ------------------------ */
  footer{text-align:center;background:#f3f3f3;padding:1.1rem;margin-top:2.5rem}
  footer a{color:var(--accent);font-weight:700}