/**
 * Codemoy Mobile Menu - Self-Contained Panel
 *
 * Own hamburger button + own slide panel. Zero dependency on
 * WP Block Navigation dialog or Interactivity API.
 *
 * @version 4.2.0
 */

:root {
    /* Colors — reference --cmc-theme-* with fallbacks */
    --cmm-active-color: var(--cmc-theme-primary-color, #0073aa);
    --cmm-hover-color: var(--cmc-theme-secondary-color, #005177);
    --cmm-border-color: var(--cmc-theme-border-color, rgba(255, 255, 255, 0.1));
    --cmm-bg-color: var(--cmc-theme-background-color, #1a1a1a);
    --cmm-text-color: var(--cmc-theme-text-color, #ffffff);

    /* Semi-transparent overlays (dark panel theme) */
    --cmm-white-subtle: rgba(255, 255, 255, 0.05);
    --cmm-white-light: rgba(255, 255, 255, 0.08);
    --cmm-white-medium: rgba(255, 255, 255, 0.1);
    --cmm-white-strong: rgba(255, 255, 255, 0.15);
    --cmm-black-light: rgba(0, 0, 0, 0.15);
    --cmm-black-medium: rgba(0, 0, 0, 0.2);

    /* Layout */
    --cmm-overlay-opacity: 0.5;
    --cmm-menu-width: 80%;
    --cmm-menu-max-width: 400px;
    --cmm-animation-speed: 300ms;
    --cmm-z-index: 999999;

    /* Spacing — mobile-appropriate defaults */
    --cmm-spacing-xs: var(--cmc-theme-spacing-sm, 8px);
    --cmm-spacing-sm: var(--cmc-theme-spacing-md, 10px);
    --cmm-spacing-md: var(--cmc-theme-spacing-lg, 15px);
    --cmm-spacing-lg: var(--cmc-theme-spacing-lg, 20px);

    /* Typography — mobile-appropriate sizes */
    --cmm-font-size-base: 16px;
    --cmm-font-size-sm: var(--cmc-theme-font-size-large, 14px);
    --cmm-font-size-xs: 11px;
    --cmm-font-size-icon: 20px;

    /* Border radius */
    --cmm-radius: var(--cmc-theme-border-radius-lg, 4px);
    --cmm-radius-lg: var(--cmc-theme-border-radius, 6px);
}

/* Reset */
.cmm-container *,
.cmm-container *::before,
.cmm-container *::after {
    box-sizing: border-box;
}

/* =====================================================================
   Hamburger Button
   ===================================================================== */

.cmm-hamburger {
    display: none; /* shown below breakpoint via PHP inline style */
    position: fixed;
    top: var(--cmm-spacing-sm);
    right: var(--cmm-spacing-sm);
    z-index: calc(var(--cmm-z-index) + 1);
    width: 44px;
    height: 44px;
    padding: var(--cmm-spacing-xs);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: var(--cmm-bg-color);
    border: none;
    border-radius: var(--cmm-radius);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cmm-hamburger:focus-visible {
    outline: 2px solid var(--cmm-active-color);
    outline-offset: 2px;
}

.cmm-hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--cmm-text-color);
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

body.cmm-menu-open .cmm-hamburger {
    display: none !important;
}

/* =====================================================================
   Container
   ===================================================================== */

.cmm-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cmm-z-index);
    pointer-events: none;
    visibility: hidden;
}

.cmm-container.cmm-active {
    pointer-events: auto;
    visibility: visible;
}

/* Overlay */
.cmm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, var(--cmm-overlay-opacity));
    opacity: 0;
    transition: opacity var(--cmm-animation-speed) ease;
    cursor: pointer;
}

.cmm-active .cmm-overlay {
    opacity: 1;
}

/* Panel */
.cmm-menu-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--cmm-menu-width);
    max-width: var(--cmm-menu-max-width);
    background-color: var(--cmm-bg-color);
    color: var(--cmm-text-color);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: transform var(--cmm-animation-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backface-visibility: hidden;
}

/* Position: Right (default) */
.cmm-container[data-position="right"] .cmm-menu-panel {
    right: 0;
    transform: translateX(100%);
}
.cmm-active[data-position="right"] .cmm-menu-panel {
    transform: translateX(0);
}

/* Position: Left */
.cmm-container[data-position="left"] .cmm-menu-panel {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}
.cmm-active[data-position="left"] .cmm-menu-panel {
    transform: translateX(0);
}

/* Animating */
.cmm-menu-panel.cmm-animating {
    will-change: transform;
}

/* =====================================================================
   Header
   ===================================================================== */

.cmm-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cmm-spacing-md) var(--cmm-spacing-lg);
    border-bottom: 1px solid var(--cmm-border-color);
}

.cmm-logo {
    max-width: 150px;
}
.cmm-logo img {
    max-width: 100%;
    height: auto;
}

.cmm-site-title {
    font-size: var(--cmm-font-size-icon);
    font-weight: bold;
    color: var(--cmm-text-color);
    text-decoration: none;
}

.cmm-close-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--cmm-text-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: var(--cmm-radius);
}
.cmm-close-button:hover,
.cmm-close-button:focus {
    background-color: var(--cmm-white-medium);
    outline: none;
}
.cmm-close-button svg {
    width: 24px;
    height: 24px;
}

/* =====================================================================
   Search
   ===================================================================== */

.cmm-search-box {
    padding: var(--cmm-spacing-md) var(--cmm-spacing-lg);
    border-bottom: 1px solid var(--cmm-border-color);
}
.cmm-search-box form {
    display: flex;
    gap: var(--cmm-spacing-sm);
}
.cmm-search-input {
    flex: 1;
    padding: var(--cmm-spacing-sm) var(--cmm-spacing-md);
    background-color: var(--cmm-white-medium);
    border: 1px solid var(--cmm-border-color);
    border-radius: var(--cmm-radius);
    color: var(--cmm-text-color);
    font-size: var(--cmm-font-size-base);
}
.cmm-search-input:focus {
    outline: none;
    border-color: var(--cmm-active-color);
    background-color: var(--cmm-white-strong);
}
.cmm-search-submit {
    padding: var(--cmm-spacing-sm) var(--cmm-spacing-md);
    background-color: var(--cmm-active-color);
    border: none;
    border-radius: var(--cmm-radius);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.cmm-search-submit:hover {
    background-color: var(--cmm-hover-color);
}

/* =====================================================================
   Menu Content
   ===================================================================== */

.cmm-menu-content {
    padding: var(--cmm-spacing-lg) 0;
}
.cmm-navigation {
    width: 100%;
}

/* Lists */
.cmm-menu-list,
.cmm-submenu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items */
.cmm-menu-item {
    position: relative;
    border-bottom: 1px solid var(--cmm-border-color);
}
.cmm-menu-item:last-child {
    border-bottom: none;
}

/* Item wrapper */
.cmm-menu-item-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Links */
.cmm-menu-link {
    flex: 1;
    display: block;
    padding: var(--cmm-spacing-md) var(--cmm-spacing-lg);
    color: var(--cmm-text-color);
    text-decoration: none;
    font-size: var(--cmm-font-size-base);
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.cmm-menu-link:hover,
.cmm-menu-link:focus {
    background-color: var(--cmm-white-subtle);
    outline: none;
}

/* Current */
.cmm-menu-item.cmm-current-item > .cmm-menu-item-wrapper > .cmm-menu-link {
    background-color: var(--cmm-active-color);
    color: white;
}

/* Submenu toggle */
.cmm-submenu-toggle {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--cmm-text-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.cmm-submenu-toggle:hover,
.cmm-submenu-toggle:focus {
    background-color: var(--cmm-white-subtle);
    outline: none;
}
.cmm-toggle-icon {
    font-size: var(--cmm-font-size-icon);
    line-height: 1;
    font-weight: 300;
    transition: transform 0.2s ease;
    user-select: none;
}
.cmm-submenu-open > .cmm-menu-item-wrapper > .cmm-submenu-toggle .cmm-toggle-icon {
    transform: rotate(45deg);
}

/* Submenu container */
.cmm-submenu-container {
    display: none;
    background-color: var(--cmm-black-medium);
    overflow: hidden;
}

/* Submenu items */
.cmm-submenu-list .cmm-menu-item {
    border-bottom-color: var(--cmm-white-subtle);
}
.cmm-submenu-list .cmm-menu-link {
    padding-left: 40px;
    font-size: 15px;
}

/* Deep nesting */
.cmm-submenu-list .cmm-submenu-list .cmm-menu-link {
    padding-left: 60px;
    font-size: var(--cmm-font-size-sm);
}
.cmm-submenu-list .cmm-submenu-list .cmm-submenu-list .cmm-menu-link {
    padding-left: 80px;
}

/* =====================================================================
   Action Links
   ===================================================================== */

.cmm-action-links {
    padding: var(--cmm-spacing-sm) var(--cmm-spacing-lg);
    border-top: 1px solid var(--cmm-border-color);
    display: flex;
    gap: var(--cmm-spacing-sm);
}
.cmm-action-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cmm-spacing-xs);
    padding: 12px var(--cmm-spacing-md);
    background-color: var(--cmm-white-light);
    border-radius: var(--cmm-radius-lg);
    color: var(--cmm-text-color);
    text-decoration: none;
    font-size: var(--cmm-font-size-sm);
    transition: background-color 0.2s ease;
    position: relative;
}
.cmm-action-link:hover {
    background-color: var(--cmm-white-strong);
}
.cmm-action-link svg {
    flex-shrink: 0;
}
.cmm-cart-count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background-color: var(--cmm-active-color);
    color: var(--cmm-text-color);
    font-size: var(--cmm-font-size-xs);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
}

/* =====================================================================
   Auth Links
   ===================================================================== */

.cmm-auth-links {
    padding: var(--cmm-spacing-md) var(--cmm-spacing-lg);
    border-top: 1px solid var(--cmm-border-color);
}
.cmm-auth-user {
    display: flex;
    align-items: center;
    gap: var(--cmm-spacing-sm);
    margin-bottom: var(--cmm-spacing-sm);
    padding-bottom: var(--cmm-spacing-sm);
    border-bottom: 1px solid var(--cmm-border-color);
}
.cmm-auth-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.cmm-auth-name {
    font-size: var(--cmm-font-size-sm);
    font-weight: 600;
    color: var(--cmm-text-color);
}
.cmm-auth-link {
    display: flex;
    align-items: center;
    gap: var(--cmm-spacing-sm);
    padding: var(--cmm-spacing-sm) 12px;
    color: var(--cmm-text-color);
    text-decoration: none;
    font-size: var(--cmm-font-size-sm);
    border-radius: var(--cmm-radius-lg);
    transition: background-color 0.2s ease;
}
.cmm-auth-link:hover {
    background-color: var(--cmm-white-light);
}
.cmm-logout-link:hover {
    color: var(--cmc-theme-error-color, #ff6b6b);
}
.cmm-login-link {
    background-color: var(--cmm-white-light);
    justify-content: center;
}
.cmm-login-link:hover {
    background-color: var(--cmm-active-color);
}

/* =====================================================================
   Social Links
   ===================================================================== */

.cmm-social-links {
    padding: var(--cmm-spacing-lg);
    border-top: 1px solid var(--cmm-border-color);
    display: flex;
    justify-content: center;
    gap: var(--cmm-spacing-sm);
}
.cmm-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cmm-white-medium);
    border-radius: 50%;
    color: var(--cmm-text-color);
    text-decoration: none;
    transition: all 0.2s ease;
}
.cmm-social-link:hover {
    background-color: var(--cmm-active-color);
    transform: translateY(-2px);
}
.cmm-social-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* =====================================================================
   Body State
   ===================================================================== */

body.cmm-menu-open {
    overflow: hidden;
}

/* =====================================================================
   Accessibility
   ===================================================================== */

.cmm-sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cmm-menu-link:focus-visible,
.cmm-submenu-toggle:focus-visible,
.cmm-close-button:focus-visible {
    outline: 2px solid var(--cmm-active-color);
    outline-offset: 2px;
}

/* =====================================================================
   RTL
   ===================================================================== */

.rtl .cmm-menu-link {
    text-align: right;
}
.rtl .cmm-submenu-list .cmm-menu-link {
    padding-left: var(--cmm-spacing-lg);
    padding-right: 40px;
}
.rtl .cmm-container[data-position="right"] .cmm-menu-panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
.rtl .cmm-active[data-position="right"] .cmm-menu-panel {
    transform: translateX(0);
}
.rtl .cmm-hamburger {
    right: auto;
    left: var(--cmm-spacing-sm);
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 480px) {
    .cmm-menu-panel {
        width: 85%;
        max-width: 100%;
    }
    .cmm-menu-link {
        font-size: var(--cmm-font-size-sm);
        padding: 12px var(--cmm-spacing-base, 16px);
    }
    .cmm-submenu-toggle {
        width: 44px;
        height: 44px;
    }
    .cmm-submenu-list .cmm-menu-link {
        padding-left: 32px;
    }
}

@media print {
    .cmm-container,
    .cmm-hamburger {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmm-menu-panel,
    .cmm-overlay,
    .cmm-menu-link,
    .cmm-submenu-toggle,
    .cmm-toggle-icon,
    .cmm-social-link,
    .cmm-hamburger-line {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-contrast: high) {
    .cmm-menu-panel {
        border: 2px solid currentColor;
    }
    .cmm-menu-link:focus,
    .cmm-submenu-toggle:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* =====================================================================
   Language Switcher Section (injected by cm-global-connector)
   ===================================================================== */

.cmm-lang-switcher {
    padding: 12px var(--cmm-spacing-lg);
    border-top: 1px solid var(--cmm-border-color);
}

.cmm-lang-switcher__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--cmm-white-light);
    border: none;
    border-radius: var(--cmm-radius-lg);
    padding: var(--cmm-spacing-sm) 12px;
    color: var(--cmm-text-color);
    cursor: pointer;
    font-size: var(--cmm-font-size-sm);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}

.cmm-lang-switcher__toggle:hover {
    background-color: var(--cmm-active-color);
}

.cmm-lang-switcher__current {
    display: flex;
    align-items: center;
    gap: var(--cmm-spacing-xs);
}

.cmm-lang-switcher__arrow {
    font-size: var(--cmm-font-size-icon);
    font-weight: 300;
    line-height: 1;
    transition: transform 0.2s ease;
    user-select: none;
}

.cmm-lang-switcher--open .cmm-lang-switcher__arrow {
    transform: rotate(45deg);
}

.cmm-lang-switcher__dropdown {
    overflow: hidden;
    background-color: var(--cmm-black-light);
    border-radius: 0 0 var(--cmm-radius-lg) var(--cmm-radius-lg);
    margin-top: 2px;
}

.cmm-lang-switcher__option {
    display: flex;
    align-items: center;
    gap: var(--cmm-spacing-xs);
    padding: var(--cmm-spacing-sm) 12px;
    color: var(--cmm-text-color);
    text-decoration: none;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.cmm-lang-switcher__option:hover {
    background-color: var(--cmm-white-light);
}

@media (prefers-reduced-motion: reduce) {
    .cmm-lang-switcher__arrow {
        transition: none !important;
    }
}