/* file: /css/storybot-mobile-menu-style.css */

/* Main Navigation Container */
#site-navigation {
    background-color: #2e2b44; /* Soft dark purple for a storytelling vibe */
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Menu Toggle Button - Icon Only */
#site-navigation .menu-toggle {
    background: none;
    border: none;
    color: #ff7ec9;
    padding: 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

#site-navigation .menu-toggle:hover {
    color: #ffc2e1; /* Lighten the pink on hover */
}

/* Remove the default pseudo-elements from menu-toggle */
button.menu-toggle::after,
button.menu-toggle::before,
button.menu-toggle span::before,
button.menu-toggle span::after {
    content: none !important; /* Forcibly remove any content from pseudo-elements */
    background-color: transparent !important; /* Ensure there’s no background color */
    display: none !important; /* Ensure they are completely hidden */
}

/* Main Navigation Container - Open State */
#site-navigation[aria-expanded="true"] {
    background-color: #2e2b44; /* Soft dark purple for open state */
    padding: 15px; /* Apply padding only when open */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Menu Toggle Button - Icon Only */
#site-navigation .menu-toggle {
    background: none;
    border: none;
    color: #ff7ec9;
    padding: 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

#site-navigation .menu-toggle:hover {
    color: #ffc2e1; /* Lighten the pink on hover */
}


/* Menu Item Links */
#site-navigation .primary-navigation .menu a {
    color: #ffffff;
    font-size: 18px;
    padding: 12px 15px;
    display: block;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#site-navigation .primary-navigation .menu a:hover {
    background-color: #4b4566; /* Subtle hover background */
    color: #ffbed2;
}

/* Adjusting for Items with Submenus */
#site-navigation .primary-navigation .menu-item-has-children > a {
    padding-right: 35px; /* Space for the dropdown arrow */
}

.sub-menu {
    display: none; /* Hidden by default */
}

/* Dropdown Arrow Styling */
#site-navigation .primary-navigation .menu-item-has-children > a::after {
    content: '▸';
    position: absolute;
    right: 15px;
    color: #ff7ec9;
    transition: transform 0.3s ease;
    font-size: 16px;
}

/* Rotate Arrow on Open */
#site-navigation .primary-navigation .menu-item-has-children[aria-expanded="true"] > a::after {
    transform: rotate(90deg);
}

/* Submenu Styling */
#site-navigation .primary-navigation .sub-menu {
    background-color: #3d3758;
    padding: 0;
    margin: 5px 0;
    border-radius: 8px;
    display: none;
    overflow: hidden;
}

.handheld-navigation ul.menu li {
  position: relative;
  padding-left: 15px;
}

#site-navigation .primary-navigation .menu-item-has-children[aria-expanded="true"] .sub-menu {
    display: block; /* Show only when expanded */
}

/* Submenu Item Styling */
#site-navigation .primary-navigation .sub-menu a {
    font-size: 16px;
    padding: 10px 15px;
    color: #ffffff;
}

.main-navigation .menu {
  font-size: 1.2em;
}

#site-navigation .primary-navigation .sub-menu a:hover {
    background-color: #4b4566;
    color: #ffbed2;
}

/* Fixing Space Issue for Closed Dropdowns */
#site-navigation .primary-navigation .sub-menu {
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

#site-navigation .primary-navigation .menu-item-has-children[aria-expanded="true"] .sub-menu {
    max-height: 500px; /* Sufficient height for open state */
    transition: max-height 0.3s ease-in;
}

/* Active Menu Item Styling */
#site-navigation .primary-navigation .current-menu-item > a {
    color: #ffbed2;
    font-weight: bold;
}

ul, ol {
    margin: 0 0 0 0em !important;
    padding: 0;
 }