/* ==========================================================================
   OB-019 — Mobile Navigation Drawer Redesign
   Overrides Travivu theme's .gva-offcanvas-content.mobile styles to match
   the approved mockup: docs/mockups/hamburger_menu_mobile/screen.png
   No custom JS — reuses the theme's existing data-canvas toggle system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Drawer panel — white background, 90% width
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile {
    background: #ffffff;
    width: 90% !important;
    display: flex !important;
    flex-direction: column;
}

/* Hide theme's decorative color overlay layers */
.gva-offcanvas-content.mobile .first-layer,
.gva-offcanvas-content.mobile .second-layer {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. Header bar — dark navy, flex, 56px
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile .top-canvas {
    background: #0d2d6b;
    height: 56px;
    padding: 0 24px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* Reset theme's float-based clearfix padding */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Replace clearfix ::before with "MENÚ" label */
.gva-offcanvas-content.mobile .top-canvas::before {
    content: 'MENÚ';
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    float: none;
}

/* Remove clearfix ::after */
.gva-offcanvas-content.mobile .top-canvas::after {
    display: none;
}

/* Hide the logo image — "MENÚ" text replaces it */
.gva-offcanvas-content.mobile .top-canvas .logo-mm {
    display: none !important;
}

/* Close button */
.gva-offcanvas-content.mobile .top-canvas .control-close-mm {
    color: #ffffff;
    font-size: 22px;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    opacity: 0.9;
    text-decoration: none;
}

.gva-offcanvas-content.mobile .top-canvas .control-close-mm:hover {
    color: #ffffff;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Sidebar body — flex column so footer pins to bottom
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile .wp-sidebar.sidebar {
    background: #ffffff;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Menu container grows to push footer down */
.gva-offcanvas-content.mobile #gva-mobile-menu {
    flex: 1;
    padding: 8px 0 0;
}

/* --------------------------------------------------------------------------
   4. Nav list items — 56px rows with bottom dividers
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
    position: relative;
}

.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li > a {
    height: 56px;
    padding: 0 24px !important;
    font-size: 17px !important;
    font-weight: 600;
    color: #1a1a2e !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    border-left: 3px solid transparent;
    box-sizing: border-box;
    background: transparent;
    transition: background 0.15s ease;
}

.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li > a:hover {
    background: #f5f5f5;
    color: #1a1a2e !important;
}

/* Chevron on every link via ::after */
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li > a::after {
    content: '›';
    display: block !important;
    font-size: 22px;
    color: #aaaaaa;
    line-height: 1;
    font-weight: 300;
}

/* --------------------------------------------------------------------------
   5. Active / current page item — blue left border
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li.current-menu-item > a,
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li.current-menu-ancestor > a,
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li.current-page-ancestor > a {
    color: #1a73e8 !important;
    border-left: 3px solid #1a73e8;
    background: rgba(26, 115, 232, 0.04);
}

.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li.current-menu-item > a::after,
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li.current-menu-ancestor > a::after {
    color: #1a73e8;
}

/* --------------------------------------------------------------------------
   6. Hide JS-injected .caret spans (chevron handled by a::after above)
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu > li .caret {
    display: none !important;
}

/* --------------------------------------------------------------------------
   7. Submenu items — indented, smaller text
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu .submenu-inner {
    padding-bottom: 0 !important;
}

.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu .submenu-inner li {
    border-bottom: 1px solid #f8f8f8 !important;
}

.gva-offcanvas-content.mobile #gva-mobile-menu ul.gva-mobile-menu .submenu-inner a {
    padding: 12px 24px 12px 36px !important;
    font-size: 15px !important;
    font-weight: 500;
    color: #555555 !important;
    height: auto;
    display: block;
}

/* --------------------------------------------------------------------------
   8. Scroll lock when drawer is open — CSS :has() (all modern browsers)
   -------------------------------------------------------------------------- */
body:has(.gva-offcanvas-content.mobile.open) {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Hide sidebar widgets from the mobile drawer (ARCHIVOS, CATEGORÍAS, etc.)
   -------------------------------------------------------------------------- */
.gva-offcanvas-content.mobile .after-offcanvas {
    display: none !important;
}

/* --------------------------------------------------------------------------
   10. CTA footer — injected via wp_footer JS snippet
   -------------------------------------------------------------------------- */
.opzac-mobile-nav-footer {
    flex-shrink: 0;
    background: #ffffff;
    padding: 0 20px 28px;
}

.opzac-mobile-nav-footer .opzac-nav-divider {
    height: 1px;
    background: #e0e0e0;
    margin-bottom: 20px;
}

.opzac-mobile-nav-footer .opzac-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #27ae60;
    color: #ffffff !important;
    text-align: center;
    height: 48px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

.opzac-mobile-nav-footer .opzac-nav-cta:hover {
    opacity: 0.9;
    color: #ffffff !important;
}

.opzac-mobile-nav-footer .opzac-nav-cta-arrow {
    font-size: 18px;
    line-height: 1;
}

.opzac-mobile-nav-footer .opzac-nav-company {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #888888;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 14px;
}