/* ==========================================================
   L2Evelion - Responsive Overrides (Mobile + PC)
   - No toca el core del template, solo corrige responsivo.
   - Carga DESPUES del resto del CSS.
   ========================================================== */

html { -webkit-text-size-adjust: 100%; }


@media (min-width: 981px){
  /* En PC mantenemos el layout clásico del template (centrado) */
  .wrapper{ margin: 0 auto !important; }
}



/* ================================
   MOBILE / TABLET
   ================================ */
@media (max-width: 980px) {

  /* Solo en móvil/tablet: box-sizing e imágenes fluidas (no romper PC) */
  *, *::before, *::after { box-sizing: border-box; }
  img, video, canvas, svg { max-width: 100%; height: auto; }

  /* Evita scroll horizontal por min-width/fijos */
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .wrapper{
    width: auto !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  /* El template usa un overlap (márgenes negativos). En móvil lo simplificamos. */
  #block-header{
    max-height: none !important;
    padding-bottom: 0 !important;
  }

  #block-main{
    margin: 0 !important;
  }

  #block-main > div > div{
    padding: 0 !important;
  }

  #toolbar{
    padding: 8px 0 !important;
    line-height: 1.2 !important;
  }

  #headerbar{
    height: auto !important;
  }

  #headerbar .left,
  #headerbar .right{
    float: none !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* ===== VOTE MENU: pasa a botones texto (no imagen fija) ===== */
  #l2-vote{
    width: auto !important;
    height: auto !important;
    float: none !important;
    margin: 0 auto !important;
  }

  ul#l2-vote-menu{
    width: auto !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;

    overflow: visible !important;
  }

  ul#l2-vote-menu li{
    float: none !important;
  }

  ul#l2-vote-menu li a{
    width: auto !important;
    height: auto !important;

    background: rgba(0,0,0,.55) !important;
    border: 1px solid rgba(255,128,50,.25) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.25) !important;

    text-indent: 0 !important;
    padding: 8px 12px !important;

    color: #ffcfad !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    line-height: 1 !important;

    text-decoration: none !important;
    font-size: 12px !important;
  }

  /* Texto del botón según clase */

  ul#l2-vote-menu li a:hover{ filter: brightness(1.06); }

  /* ===== MENÚ principal: wrap y dropdown que no se sale ===== */
  #menubar{
    height: auto !important;
    padding: 10px 0 !important;
  }

  #menu{
    float: none !important;
    margin: 0 auto !important;
  }

  #menu > ul.menu-dropdown{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
  }

  .menu-dropdown li.level1{
    margin-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .menu-dropdown a.level1 > span,
  .menu-dropdown span.level1 > span{
    height: auto !important;
    line-height: 1.2 !important;
    padding: 8px 10px !important;
  }

  .menu-dropdown .dropdown{
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: 0 !important;
    margin: 8px auto 0 auto !important;
  }

  /* ===== Contenido: padding/márgenes más compactos ===== */
  #content{ margin: 10px !important; }
  #content > div{ padding: 14px !important; }
  .module{ margin: 10px !important; }

  #footer{ padding: 16px 0 !important; }

  /* Refuerzo: apila main + sidebar */
  #main, #maininner, #sidebar-a{
    width: 100% !important;
    float: none !important;
    clear: both !important;
  }
  #sidebar-a{ margin-top: 14px !important; }

  /* Logo adaptable */
  #logol2null img{
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }

  /* Formularios: tamaño cómodo para dedos */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select,
  textarea{
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  button,
  input.button,
  input[type="submit"],
  .button,
  .button-more{
    min-height: 42px !important;
    padding: 10px 14px !important;
  }

  /* Visor de imágenes del sidebar: centrado y sin overflow */
  #ja_header_jsfade{
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    height: auto !important;
  }
  #ja_header_jsfade img{
    width: 100% !important;
    height: auto !important;
  }


  /* Layouts antiguos (floats con anchos fijos) -> stack */
  .l2-top-left, .l2-top-right{
    width: 100% !important;
    float: none !important;
  }

  .l2-castle, .l2-fortress{
    height: auto !important;
  }

  .l2-castle-pic, .l2-fortress-pic{
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }

  .l2-castle-info, .l2-fortress-info{
    width: 100% !important;
    float: none !important;
  }

  .frontpage-demobox{
    max-width: none !important;
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* Tablas: scroll horizontal suave */
  #content table{
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Móviles estrechos */
@media (max-width: 520px){
  .wrapper{ padding: 0 8px !important; }
  #content{ margin: 8px !important; }
  #content > div{ padding: 12px !important; }
  #toolbar{ font-size: 10px !important; }
  ul#l2-vote-menu li a{ padding: 8px 10px !important; }
}