/*
Theme Name: Erotixxx Toys Theme
Description: Erotixxx Toys Theme by Flykod.
Version: 1.0
Author: Flykod
Author URI: https://flykod.com/
Tags: responsive-layout, custom-header, custom-background, custom-menu, editor-style, featured-images, full-width-template, microformats, post-formats, sticky-post, translation-ready
License: GNU General Public License v2.0
*/

/* WordPress Required Styles */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  padding-top: 4px;
  margin: 10px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none;
}

.wp-caption-dd {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
}

.sticky {
  background: #f7f7f7;
  padding: 0 10px 10px;
}

.sticky h2 {
  padding-top: 10px;
}

/* Start - Nav Menu CSS */
/* Submenu Oculto por Padrão */
.sub-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  z-index: 1000;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  width: 200px;
}

/* Exibir Submenu no Hover */
.navbar-nav .menu-item-has-children:hover > .sub-menu {
  display: block;
}

/* Alinhamento à Direita */
.navbar-nav {
  margin-left: auto;
}

/* Estilo do Menu Overlay (Mobile) */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  transition: right 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.mobile-menu-overlay.active {
  right: 0;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  margin-bottom: 10px;
}

.mobile-menu li a {
  text-decoration: none;
  font-size: 18px;
  color: #000;
}

/* Ocultar menu desktop quando o menu mobile estiver ativo */
#mainMenu {
  display: block; /* Padrão: Exibir o menu desktop */
}

.mobile-menu-overlay.active + #mainMenu {
  display: none; /* Esconde o menu desktop quando o menu mobile está ativo */
}

/* Ajuste para garantir a exibição correta no mobile */
@media (max-width: 991px) {
  #mainMenu {
    display: none; /* Ocultar menu desktop no mobile */
  }
}
/* End - Nav Menu CSS */