/**
 * Text Overlap Fixes for kakofloral.com
 * Date: 2026-01-25
 *
 * Issue 1: Product Info text overlap on iPad horizontal (review form over description)
 * Issue 2: Mobile menu text overlap (Account links overlapping navigation)
 *
 * IMPORTANT: This file contains ONLY overlap fixes - no sidebar link hiding rules
 */

/* ==========================================================================
   FIX 1: PRODUCT PAGE OVERLAP (iPad Horizontal)
   The review form was overlapping with product info
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    .product.info.detailed {
        clear: both !important;
        position: relative !important;
        z-index: 1 !important;
        margin-top: 30px !important;
    }

    .review-add,
    .review-form {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
    }

    .product.data.items > .item.content {
        position: relative !important;
        display: none !important;
    }

    .product.data.items > .item.content.active {
        display: block !important;
    }

    .product.attribute.description {
        position: relative !important;
        overflow: visible !important;
        z-index: 1 !important;
    }
}

/* Landscape orientation specific fixes */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .product.info.detailed .product.data.items {
        position: relative !important;
    }

    .product.data.items > .item.title {
        position: relative !important;
        z-index: 2 !important;
    }

    .product.data.items > .item.content {
        position: relative !important;
        z-index: 1 !important;
        float: none !important;
        margin-left: 0 !important;
    }

    .review-form .review-legend {
        position: relative !important;
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #e7e7e7 !important;
    }

    .review-form .field {
        margin-bottom: 20px !important;
        position: relative !important;
    }

    .review-form .field .label {
        display: block !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================================================
   FIX 2: MOBILE SIDEBAR MENU OVERLAP
   The Account links were overlapping navigation menu items

   NOTE: We do NOT hide #store.links or panel.header elements here
   because that would remove Sign In, Contact Us, Create an Account
   links from the desktop sidebar. Instead, we use z-index and
   positioning to fix the overlap issue.
   ========================================================================== */

@media (max-width: 991px) {
    /* ==========================================================================
       MOBILE TAB SWITCHING: Menu/Account tabs behavior
       The Porto theme's JavaScript handles tab switching by setting display:block/none
       directly on #store.menu and #store.links elements. We don't need to add CSS
       show/hide rules here - the JS handles it correctly now that data-mage-init
       processing is no longer broken by malformed JSON.
       ========================================================================== */

    /* Fix navigation menu items spacing and stacking */
    .navigation li.level0 {
        position: relative !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        z-index: 1 !important;
    }

    .navigation li.level0 > a.level-top {
        display: block !important;
        line-height: 1.5 !important;
        padding: 15px 40px 15px 15px !important;
        position: relative !important;
        z-index: 1 !important;
        background: inherit !important;
    }

    /* Ensure navigation items don't overlap */
    .navigation ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix any floating issues */
    .navigation li.ui-menu-item {
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
    }

    /* Ensure nav-sections content has proper stacking context */
    .nav-sections .nav-sections-item-content {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Style header links in Account tab for better readability */
    .nav-sections .nav-sections-item-content .header.links {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-sections .nav-sections-item-content .header.links li {
        display: block !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    .nav-sections .nav-sections-item-content .header.links li a {
        display: block !important;
        padding: 15px 20px !important;
        line-height: 1.5 !important;
    }

    /* Hide welcome message which can cause overlap */
    li.greet.welcome {
        display: none !important;
    }

    /* Fix Mobile Header - Logo and burger menu vertical alignment */
    .page-header .header.content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 60px !important;
    }

    .page-header .logo {
        display: flex !important;
        align-items: center !important;
    }

    .page-header .nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }
}

/* ==========================================================================
   FIX 3: GENERAL MOBILE TEXT FIXES
   ========================================================================== */

@media (max-width: 767px) {
    .navigation a,
    .header.links a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .product.info.detailed {
        margin-top: 20px !important;
    }

    .product.data.items > .item.content {
        padding: 15px !important;
    }
}