/* =====================================================
   MENÚ FULL-WIDTH RESPONSIVE — top100tarot.com
   Breakpoint: 1050px (alineado con AsapTheme)
   ===================================================== */

:root {
  --nav-bg:      #120228;
  --nav-border:  #f5c842;
  --nav-link:    #e0cfa8;
  --nav-hover:   #f5c842;
  --nav-sub-bg:  #1e0838;
  --nav-height:  62px;
}

/* =========================================================
   DESKTOP — mayor de 1050px
   ========================================================= */
@media (min-width: 1051px) {

  /* --- HEADER --- */
  .site-header {
    width: 100% !important;
    background: linear-gradient(135deg, #120228 0%, #2a0a50 60%, #120228 100%) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9990 !important;
  }

  .site-header-content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    min-height: var(--nav-height) !important;
  }

  /* --- LOGO --- */
  .site-logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 12px !important;
    padding: 0 !important;
  }

  .site-logo img.custom-logo {
    height: 48px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  /* --- WRAPPER (el div que envuelve hamburger + nav) --- */
  .site-header-content > div:last-of-type {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    position: static !important;
  }

  /* Separador logo / nav */
  .site-header-content > div:last-of-type::before {
    content: '' !important;
    display: block !important;
    width: 1px !important;
    height: 28px !important;
    background: rgba(245,200,66,.25) !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
  }

  /* --- OCULTAR hamburger en desktop --- */
  #btn-menu           { display: none !important; }
  #nav-icon           { display: none !important; }
  header label        { display: none !important; }

  /* --- NAV --- */
  #menu {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: var(--nav-height) !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* --- UL PRINCIPAL full-width --- */
  ul.header-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: stretch !important;
    justify-content: space-evenly !important;
    flex-wrap: nowrap !important;
    min-height: auto !important;
    background: transparent !important;
  }

  ul.header-menu > li {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    background: transparent !important;
    width: auto !important;
    line-height: normal !important;
  }

  ul.header-menu > li > a,
  ul.header-menu > li > span {
    display: flex !important;
    align-items: center !important;
    padding: 0 13px !important;
    color: var(--nav-link) !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    transition: color .2s, border-color .2s, background .2s !important;
    line-height: 1 !important;
    width: auto !important;
    background: transparent !important;
  }

  ul.header-menu > li > a:hover,
  ul.header-menu > li:hover > a,
  ul.header-menu > li:focus-within > a {
    color: var(--nav-hover) !important;
    border-bottom-color: var(--nav-hover) !important;
    background: rgba(255,255,255,.04) !important;
    text-decoration: none !important;
  }

  /* Flecha submenu desktop */
  ul.header-menu > li.menu-item-has-children > a::after {
    content: ' ▾' !important;
    font-size: .65em !important;
    opacity: .75 !important;
    margin-left: 3px !important;
  }

  /* Ocultar el ::before triangle del tema padre */
  ul.header-menu > li.menu-item-has-children::before {
    display: none !important;
  }

  /* --- SUBMENU dropdown --- */
  ul.header-menu .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 215px !important;
    background: var(--nav-sub-bg) !important;
    border: 1px solid rgba(245,200,66,.25) !important;
    border-top: 2px solid var(--nav-border) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.55) !important;
    z-index: 9999 !important;
    border-radius: 0 0 8px 8px !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  ul.header-menu li:hover > .sub-menu,
  ul.header-menu li:focus-within > .sub-menu {
    display: block !important;
  }

  ul.header-menu .sub-menu li {
    background: transparent !important;
    line-height: normal !important;
    padding: 0 !important;
  }

  ul.header-menu .sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    color: #c9b080 !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: none !important;
    width: 100% !important;
    transition: color .15s, padding-left .15s, background .15s !important;
  }

  ul.header-menu .sub-menu li a:hover {
    color: var(--nav-hover) !important;
    padding-left: 28px !important;
    background: rgba(245,200,66,.08) !important;
    text-decoration: none !important;
  }

} /* /desktop */

/* =========================================================
   MÓVIL / TABLET — hasta 1050px
   ========================================================= */
@media (max-width: 1050px) {

  /* --- HEADER en móvil --- */
  .site-header {
    background: linear-gradient(135deg, #120228 0%, #2a0a50 60%, #120228 100%) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.6) !important;
  }

  .site-header-content {
    max-width: 100% !important;
    padding: 0 14px !important;
  }

  /* Separador: oculto en móvil */
  .site-header-content > div:last-of-type::before {
    display: none !important;
  }

  /* Logo */
  .site-logo {
    padding: 0 !important;
  }

  .site-logo img.custom-logo {
    max-height: 44px !important;
  }

  /* --- HAMBURGER visible en móvil --- */
  #nav-icon,
  header label[for='btn-menu'] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: none !important;
  }

  .circle.nav-icon {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(245,200,66,.4) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.08) !important;
    transition: background .2s !important;
  }

  .circle.nav-icon:hover {
    background: rgba(245,200,66,.15) !important;
  }

  span.line {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--nav-link) !important;
    border-radius: 2px !important;
    transition: transform .3s ease, opacity .2s ease, width .2s ease !important;
  }

  /* Animación X */
  #btn-menu:checked ~ label span.line.top    { transform: translateY(7px) rotate(45deg) !important; }
  #btn-menu:checked ~ label span.line.middle { opacity: 0 !important; width: 0 !important; }
  #btn-menu:checked ~ label span.line.bottom { transform: translateY(-7px) rotate(-45deg) !important; }

  /* --- MENÚ CERRADO (default móvil) --- */
  #menu {
    width: 100% !important;
    transform: translateX(-110%) !important;
    transition: transform .22s ease-in-out !important;
    background: var(--nav-bg) !important;
    border-top: 2px solid var(--nav-border) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.5) !important;
    overflow-y: auto !important;
    padding-bottom: 40px !important;
    display: block !important;
    height: 100% !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 9980 !important;
  }

  /* --- MENÚ ABIERTO --- */
  #btn-menu:checked ~ #menu {
    transform: translateX(0) !important;
  }

  /* --- UL en móvil --- */
  ul.header-menu {
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: transparent !important;
  }

  ul.header-menu > li {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    background: transparent !important;
    line-height: normal !important;
  }

  ul.header-menu > li > a,
  ul.header-menu > li > span {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
    color: var(--nav-link) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    border-left: 3px solid transparent !important;
    text-decoration: none !important;
    width: 100% !important;
    transition: border-color .15s, background .15s !important;
  }

  ul.header-menu > li > a:hover {
    color: var(--nav-hover) !important;
    border-left-color: var(--nav-hover) !important;
    background: rgba(255,255,255,.04) !important;
  }

  /* Submenú móvil: siempre visible inline */
  ul.header-menu .sub-menu {
    display: block !important;
    position: static !important;
    background: rgba(0,0,0,.25) !important;
    border: none !important;
    border-top: none !important;
    border-left: 3px solid rgba(245,200,66,.3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 0 20px !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  ul.header-menu .sub-menu li {
    padding: 0 !important;
    background: transparent !important;
  }

  ul.header-menu .sub-menu li a {
    display: block !important;
    padding: 11px 16px !important;
    color: #c9b080 !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    text-decoration: none !important;
    transition: color .15s, padding-left .15s !important;
  }

  ul.header-menu .sub-menu li a:hover {
    color: var(--nav-hover) !important;
    padding-left: 24px !important;
    background: rgba(245,200,66,.06) !important;
  }

  /* Ocultar el ::before triangle del tema en los li con hijos */
  ul.header-menu > li.menu-item-has-children::before {
    display: none !important;
  }

  /* El wrapper del menú: que el label quede a la derecha */
  .site-header-content > div:last-of-type {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 !important;
  }

} /* /móvil */

/* =====================================================
   FIX COLOR MÓVIL
   El tema tiene: header #menu a { color:#222 !important }
   Especificidad (0,1,0,2). Necesitamos (0,1,1,2) o mayor.
   ===================================================== */
@media (max-width: 1050px) {

  /* Links principales del menú en móvil */
  header #menu ul.header-menu > li > a,
  header #menu ul.header-menu > li > span {
    color: #e0cfa8 !important;
  }

  header #menu ul.header-menu > li > a:hover {
    color: #f5c842 !important;
  }

  /* Links del submenu (Calculadoras) en móvil */
  header #menu ul.header-menu .sub-menu li a {
    color: #c9b080 !important;
  }

  header #menu ul.header-menu .sub-menu li a:hover {
    color: #f5c842 !important;
  }

}