/* Custom Menu Color Overrides */
/* Change desktop menu hover and active background color to #cbe1e4 */
nav[class*=menu] li:hover>.ct-menu-link,
nav[class*=menu] li:hover>.ct-sub-menu-parent,
nav[class*=menu] li[class*=current-menu-]>.ct-menu-link,
nav[class*=menu] li[class*=current-menu-]>.ct-sub-menu-parent {
  --theme-link-hover-color: #080C0E !important;
  --theme-icon-hover-color: #080C0E !important;
  --theme-link-active-color: #080C0E !important;
  --theme-icon-active-color: #080C0E !important;
}

[data-menu]>ul>li>a:before,
[data-menu]>ul>li>a:after {
  --menu-indicator-hover-color: #cbe1e4 !important;
  --menu-indicator-active-color: #cbe1e4 !important;
}

[data-menu*=type-3]>ul>li:hover>a {
  --menu-indicator-hover-color: #cbe1e4 !important;
}

/* Add background to mobile menu */
@media (max-width: 999.98px) {
  .mobile-menu,
  .elementor-nav-menu--dropdown,
  .ct-panel-content-inner {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
  }
  
  .mobile-menu .ct-menu-link,
  .elementor-nav-menu--dropdown a {
    color: #080C0E !important;
  }
  
  .mobile-menu .ct-menu-link:hover,
  .elementor-nav-menu--dropdown a:hover {
    color: #1559ed !important;
  }
}

/* ========================================================
   MOBILE LOGO FIX
   Corrige el logo que se ve muy pequeño en versión móvil
   ======================================================== */

/* --- Header mobile logo (sticky bar) --- */
@media (max-width: 999.98px) {
  /* Override el var que fuerza el logo a 22px */
  [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
    --logo-max-height: 44px !important;
  }

  /* Imágenes dentro del logo header mobile */
  [data-device="mobile"] .site-logo-container img.sticky-logo,
  [data-device="mobile"] .site-branding img.sticky-logo,
  [data-device="mobile"] .site-logo-container img.default-logo,
  [data-device="mobile"] .site-branding img.default-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
  }
}

/* --- Offcanvas / panel móvil: logo en menú lateral --- */
@media (max-width: 999.98px) {
  [data-header*="type-1"] [data-id="offcanvas-logo"] {
    --logo-max-height: 44px !important;
  }

  #offcanvas .site-logo-container img,
  #offcanvas [data-id="offcanvas-logo"] img {
    height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
  }
}

/* --- Footer logo (elementor dfe5505) ---
   El CSS inline de Elementor lo fuerza a height:25px en mobile.
   Este override lo amplía a un tamaño legible. */
@media (max-width: 1024px) {
  .elementor-193 .elementor-element.elementor-element-dfe5505 img {
    height: 54px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
  }
}

/* Fix adicional para logos en footer de TODAS las páginas
   (aplica también al logo que usa class wp-image-1253) */
@media (max-width: 1024px) {
  footer .elementor-widget-image img[src*="jinshi-casino-logo"],
  footer img.wp-image-1253,
  footer .attachment-large[src*="jinshi-casino-logo"] {
    height: 54px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
  }
}

/* --- Logo en modo sticky/shrink en tablet --- */
@media (max-width: 1024px) and (min-width: 690px) {
  .ct-header .site-logo-container img.sticky-logo,
  .ct-header .site-logo-container img.default-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
  }
}