/*
Theme Name: Konte Child Theme
Theme URI: http://konte.uix.store/
Author: UIX Themes
Author URI: http://uix.store
Description: A fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: konte
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: konte
*/

/* 🎨 Gradiente de fondo para el header */
#masthead.site-header {
    background: linear-gradient(180deg, #333333, #910F15) !important;
    color: #ffffff !important;
    transition: background 0.3s ease-in-out;
}

/* 🖋️ Colores de enlaces del menú */
#masthead .main-navigation > ul > li > a {
    color: #ffffff !important;
}

/* 🖋️ Colores al hacer hover */
#masthead .main-navigation > ul > li > a:hover,
#masthead .main-navigation > ul > li.current-menu-item > a {
    color: #E8353A !important; /* Naranja cálido de acento */
}

/* 🧱 Color del ícono de búsqueda, menú móvil y demás */
#masthead .site-header__icons i,
#masthead .site-header__icons .icon {
    color: #ffffff !important;
}


/* 🌌 Fondo gris oscuro del desplegable */
#masthead .sub-menu {
    background-color: #333333 !important;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

/* 🖋 Tipografía clara con efecto LED */
#masthead .sub-menu li a {
    color: #dddddd !important;
    padding: 10px 20px;
    display: block;
    font-family: 'Orbitron', sans-serif; /* Fuente moderna tipo digital (asegúrate de activarla si la quieres usar) */
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: all 0.3s ease;
}

/* 💡 Efecto "glow" suave al pasar el ratón */
#masthead .sub-menu li a:hover,
#masthead .sub-menu li.current-menu-item > a {
    color: #E8353A !important;
    background-color: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 6px #E8353A;
}

/* 💠 Línea LED animada al pasar el mouse */
#masthead .sub-menu li a::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: 8px;
    width: 0;
    height: 2px;
    background-color: #E8353A;
    transition: width 0.3s ease;
}

#masthead .sub-menu li a:hover::after {
    width: calc(100% - 40px);
}

/* 🌌 Bordes suaves entre elementos */
#masthead .sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#masthead .sub-menu li:last-child {
    border-bottom: none;
}

#masthead .main-navigation > ul > li > a {
    position: relative;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out;
}

#masthead .main-navigation > ul > li > a:hover {
    color: #E8353A !important;
    text-shadow: 0 0 6px #E8353A;
}

#masthead .main-navigation > ul > li > a::after {
    content: '';
    position: absolute;
    left: 10%;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff0033, #ff9900);
    transition: width 0.3s ease-in-out;
}

#masthead .main-navigation > ul > li > a:hover::after {
    width: 80%;
}

#masthead .site-header__icons i,
#masthead .site-header__icons .icon {
    color: #ffffff;
    transition: all 0.3s ease;
}

#masthead .site-header__icons i:hover,
#masthead .site-header__icons .icon:hover {
    color: #E8353A;
    text-shadow: 0 0 6px #E8353A;
}

#masthead.site-header {
    animation: headerDrop 0.6s ease-in-out;
}

@keyframes headerDrop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.offcanvas {
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
}

.offcanvas a {
    color: #ddd;
}

.offcanvas a:hover {
    color: #E8353A;
}

/* 🌌 Estética cyber-luxury para el desplegable */
.account-links {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  font-family: 'Orbitron', sans-serif;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 9999;
  min-width: 220px;
}

/* Mostrar con hover */
.header-account:hover .account-links {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Lista limpia */
.account-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Elementos de menú */
.account-links li {
  padding: 12px 22px;
  font-size: 14px;
  color: #dddddd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

.account-links li:last-child {
  border-bottom: none;
}