/* ================================
   File: /public_html/css/header/mobile-menu.css
   Version: 2.5.0
   Last Updated: 2026-02-03

   MOBILE MENU - SLIDE-IN DRAWER DESIGN
   Compact, modern drawer with accordions

   Changelog v2.5.0:
   - Added missing .mobile-menu-quick-action-icon--gallery gradient background

   Changelog v2.4.0:
   - Added explicit color to .mobile-menu-item so children don't inherit browser link defaults
   - Removed opacity: 0.7 from .mobile-menu-item-count (was reducing contrast below 4.5:1)

   Changelog v2.3.0:
   - Bumped .mobile-menu-accordion-title font-size from 10px to 11px (WAVE small text alert)

   Changelog v2.2.0:
   - WCAG: Restored focus-visible indicator on .mobile-menu-view-all links

   Changelog v2.1:
   - Combined language + dark mode on single row
   - Compact dark mode toggle (icon only)
   - Removed "Language" label from language trigger
   - View All links: subtle centered text instead of blue with arrow
   ================================ */

/* ============================
   HAMBURGER BUTTON (Mobile Only)
   ============================ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 3px;
    background-color: #2c3e50;
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Dark mode hamburger */
[data-theme="dark"] .hamburger span {
    background-color: #e2e8f0;
}

/* ============================
   MOBILE MENU BACKDROP
   ============================ */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-backdrop.active {
    display: block;
    opacity: 1;
}

/* ============================
   MOBILE MENU DRAWER
   ============================ */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #ffffff;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
}

.mobile-menu-overlay.active {
    transform: translateX(0);
}

/* Dark mode drawer */
[data-theme="dark"] .mobile-menu-overlay {
    background: #1e293b;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
}

/* ============================
   MENU HEADER
   ============================ */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

[data-theme="dark"] .mobile-menu-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

[data-theme="dark"] .mobile-menu-title {
    color: #ffffff;
}

.mobile-menu-close {
    background: rgba(0, 0, 0, 0.06);
    border: none;
    color: #0f172a;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 20px;
    line-height: 1;
}

.mobile-menu-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .mobile-menu-close {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================
   SCROLLABLE CONTENT
   ============================ */
.mobile-menu-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
}

/* ============================
   QUICK ACTIONS (Browse All, New Tools)
   ============================ */
.mobile-menu-quick-actions {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-menu-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    text-align: left;
}

.mobile-menu-quick-action:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .mobile-menu-quick-action:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mobile-menu-quick-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    color: white;
}

.mobile-menu-quick-action-icon--browse {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.mobile-menu-quick-action-icon--new {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.mobile-menu-quick-action-icon--gallery {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.mobile-menu-quick-action-icon--compare {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.mobile-menu-quick-action-text {
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

[data-theme="dark"] .mobile-menu-quick-action-text {
    color: #ffffff;
}

.mobile-menu-quick-action-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ============================
   SECTION DIVIDER
   ============================ */
.mobile-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 6px 16px;
}

[data-theme="dark"] .mobile-menu-divider {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================
   ACCORDION SECTIONS
   ============================ */
.mobile-menu-accordion {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu-accordion:last-of-type {
    border-bottom: none;
}

[data-theme="dark"] .mobile-menu-accordion {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.mobile-menu-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
}

.mobile-menu-accordion-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .mobile-menu-accordion-header:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mobile-menu-accordion-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #556477;
    margin: 0;
}

[data-theme="dark"] .mobile-menu-accordion-title {
    color: #94a3b8;
}

.mobile-menu-accordion-arrow {
    color: #64748b;
    transition: transform 0.2s ease;
    width: 14px;
    height: 14px;
}

[data-theme="dark"] .mobile-menu-accordion-arrow {
    color: #94a3b8;
}

.mobile-menu-accordion.expanded .mobile-menu-accordion-arrow {
    transform: rotate(180deg);
}

.mobile-menu-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu-accordion.expanded .mobile-menu-accordion-content {
    max-height: 500px;
}

.mobile-menu-accordion-items {
    padding: 0 8px 8px;
}

/* ============================
   MENU ITEMS
   ============================ */
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    color: #0f172a; /* Explicit color so children don't inherit browser link defaults */
}

.mobile-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .mobile-menu-item {
    color: #e2e8f0;
}

[data-theme="dark"] .mobile-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mobile-menu-item-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-item-text {
    flex: 1;
    color: #0f172a;
    font-size: 13px;
    font-weight: 500;
}

[data-theme="dark"] .mobile-menu-item-text {
    color: #ffffff;
}

.mobile-menu-item-count {
    color: #556477;
    font-size: 11px;
    font-weight: 500;
}

[data-theme="dark"] .mobile-menu-item-count {
    color: #94a3b8;
}

/* View All link - Subtle centered text */
.mobile-menu-view-all {
    justify-content: center !important;
    color: #64748b !important;
    padding: 10px 10px !important;
}

.mobile-menu-view-all:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    border-radius: 4px;
}

.mobile-menu-view-all .mobile-menu-item-icon {
    display: none;
}

.mobile-menu-view-all .mobile-menu-item-text {
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
    flex: none;
}

.mobile-menu-view-all:hover .mobile-menu-item-text {
    text-decoration: underline;
}

[data-theme="dark"] .mobile-menu-view-all .mobile-menu-item-text {
    color: #94a3b8;
}

/* Hide the arrow */
.mobile-menu-view-all .mobile-menu-arrow {
    display: none;
}

/* ============================
   MENU FOOTER
   ============================ */
.mobile-menu-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: #ffffff;
}

[data-theme="dark"] .mobile-menu-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: #1e293b;
}

/* Footer Row */
.mobile-menu-footer-row {
    margin-bottom: 12px;
}

/* ============================
   SETTINGS ROW - Language + Dark Mode Combined
   ============================ */
.mobile-menu-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Language section in settings row */
.mobile-menu-settings-row .mobile-menu-lang-section {
    flex: 1;
    margin-bottom: 0;
    position: relative;
}

.mobile-menu-settings-row .mobile-menu-lang-trigger {
    padding: 10px 12px;
}

/* Compact Dark Mode Toggle (Icon Only) */
.mobile-menu-dark-toggle-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    flex-shrink: 0;
}

.mobile-menu-dark-toggle-compact:hover,
.mobile-menu-dark-toggle-compact:active {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mobile-menu-dark-toggle-compact {
    background: rgba(255, 255, 255, 0.08);
    color: #fbbf24;
}

[data-theme="dark"] .mobile-menu-dark-toggle-compact:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mobile-menu-dark-toggle-compact .icon-sun {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-menu-dark-toggle-compact .icon-sun circle {
    fill: currentColor;
    stroke: currentColor;
}

.mobile-menu-dark-toggle-compact .icon-moon {
    display: block;
    fill: currentColor;
    stroke: none;
}

[data-theme="dark"] .mobile-menu-dark-toggle-compact .icon-sun {
    display: block;
}

[data-theme="dark"] .mobile-menu-dark-toggle-compact .icon-moon {
    display: none;
}

/* Dark Mode Toggle - Full Width Button (legacy, kept for compatibility) */
.mobile-menu-dark-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}

.mobile-menu-dark-toggle:hover,
.mobile-menu-dark-toggle:active {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mobile-menu-dark-toggle {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

[data-theme="dark"] .mobile-menu-dark-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mobile-menu-dark-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

[data-theme="dark"] .mobile-menu-dark-toggle-icon {
    color: #94a3b8;
}

.mobile-menu-dark-toggle-icon .icon-sun {
    display: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-menu-dark-toggle-icon .icon-sun circle {
    fill: currentColor;
    stroke: currentColor;
}

.mobile-menu-dark-toggle-icon .icon-moon {
    display: block;
    fill: currentColor;
    stroke: none;
}

[data-theme="dark"] .mobile-menu-dark-toggle-icon .icon-sun {
    display: block;
}

[data-theme="dark"] .mobile-menu-dark-toggle-icon .icon-moon {
    display: none;
}

.mobile-menu-dark-toggle-text {
    font-weight: 500;
}

.mobile-menu-dark-toggle .toggle-text-dark {
    display: none;
}

[data-theme="dark"] .mobile-menu-dark-toggle .toggle-text-light {
    display: none;
}

[data-theme="dark"] .mobile-menu-dark-toggle .toggle-text-dark {
    display: inline;
}

/* ============================
   LANGUAGE SECTION - Expandable
   ============================ */
.mobile-menu-lang-section {
    margin-bottom: 12px;
    position: relative;
}

.mobile-menu-lang-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}

.mobile-menu-lang-trigger:hover,
.mobile-menu-lang-trigger:active {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mobile-menu-lang-trigger {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-menu-lang-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.mobile-menu-lang-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.mobile-menu-lang-code {
    color: #0f172a;
    font-weight: 600;
}

[data-theme="dark"] .mobile-menu-lang-code {
    color: #ffffff;
}

/* Label hidden in compact mode, kept for backwards compatibility */
.mobile-menu-lang-label {
    color: #64748b;
    font-weight: 500;
    margin-left: auto;
    display: none;
}

[data-theme="dark"] .mobile-menu-lang-label {
    color: #94a3b8;
}

.mobile-menu-lang-arrow {
    width: 16px;
    height: 16px;
    color: #64748b;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

[data-theme="dark"] .mobile-menu-lang-arrow {
    color: #94a3b8;
}

.mobile-menu-lang-section.expanded .mobile-menu-lang-arrow {
    transform: rotate(180deg);
}

.mobile-menu-lang-section.expanded .mobile-menu-lang-trigger {
    border-radius: 8px 8px 0 0;
}

/* Language List - Hidden by default, shown when expanded */
.mobile-menu-lang-list {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0 0 8px 8px;
    transition: max-height 0.3s ease;
}

.mobile-menu-lang-section.expanded .mobile-menu-lang-list {
    max-height: 400px;
}

[data-theme="dark"] .mobile-menu-lang-list {
    background: rgba(255, 255, 255, 0.04);
}

.mobile-menu-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mobile-menu-lang-option:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .mobile-menu-lang-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mobile-menu-lang-option.selected {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .mobile-menu-lang-option.selected {
    background: rgba(59, 130, 246, 0.2);
}

.mobile-menu-lang-option-name {
    color: #0f172a;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

[data-theme="dark"] .mobile-menu-lang-option-name {
    color: #ffffff;
}

.mobile-menu-lang-check {
    width: 16px;
    height: 16px;
    color: #3b82f6;
    flex-shrink: 0;
}

/* Submit Tool CTA */
.mobile-menu-submit-btn {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    font-family: inherit;
}

.mobile-menu-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.mobile-menu-submit-btn:active {
    transform: translateY(0);
}

/* ============================
   MOBILE STYLES (Show on mobile)
   ============================ */
@media screen and (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .mobile-menu-overlay {
        display: flex;
    }
    
    .desktop-nav {
        display: none !important;
    }
}

/* ============================
   BODY STATE
   ============================ */
body.mobile-menu-open {
    overflow: hidden;
}