/* 
   Cisco Support EOL Index 
   Namespace: support-eol-index | Prefix: seoli-
   Final Consolidated Version - May 2026
*/

/* --- Global / Shared Styles --- */
.seoli-intro-section, .seoli-container, .seoli-cat-section {
    font-family: "CiscoSans", Arial, sans-serif !important;
}

/* Link Force-Fix: Ensures 18px Medium weight overrides global AEM styles */
.seoli-intro-section a, 
.seoli-header-links a, 
.seoli-cat-list li a, 
.seoli-list li a {
    color: #005073 !important;
    text-decoration: none !important;
    font-family: "CiscoSans", Arial, sans-serif !important;
    font-size: 18px !important; 
    font-weight: 500 !important; 
}

.seoli-intro-section a:hover, 
.seoli-header-links a:hover, 
.seoli-cat-list li a:hover, 
.seoli-list li a:hover, 
.seoli-back-to-top:hover {
    text-decoration: underline !important;
}

/* --- Introduction Section --- */
.seoli-intro-section { padding: 20px 0; }
.seoli-intro-text, .seoli-intro-list li { font-size: 18px; line-height: 1.6; color: #58585b; }
.seoli-intro-section h4 { font-size: 22px; font-weight: normal; color: #333; margin: 5px 0; }
.seoli-intro-list { padding-left: 25px; margin: 5px 0 10px 0; }
.seoli-intro-list li { margin-bottom: 8px; }

/* --- Fix for Blurry Icons (Force 12x12px) --- */

/* 1. Icons inside the Product Lists */
.seoli-list li img {
    height: 12px !important;
    width: 12px !important;
    flex-shrink: 0;
    margin-left: 8px;
    vertical-align: middle;
    object-fit: contain;
}

/* 2. Icons inside the Support Status Key */
.seoli-status-item img {
    height: 12px !important;
    width: 12px !important;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: contain;
}

/* --- Product Categories (Navigation Box) --- */
.seoli-cat-section { background-color: #F2F2F2; padding: 25px 15px; border-radius: 4px; margin-bottom: 40px; }
.seoli-cat-section h4 { margin-top: 0; margin-left: calc(5% - 15px); margin-bottom: 15px; color: #333; font-size: 22px; font-weight: normal; }
.seoli-cat-flex { display: flex; flex-wrap: nowrap; width: 100%; }
.seoli-cat-column { width: 45%; }
.seoli-cat-left { margin-left: 5%; }
.seoli-cat-right { margin-left: auto; margin-right: 5%; }
.seoli-cat-list { list-style: none !important; padding: 0; margin: 0; }
.seoli-cat-list li { margin-bottom: 10px; line-height: 1.4; font-size: 16px; color: #58585b; }

/* --- Support Status Key --- */
.seoli-status-key-section { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; padding: 10px 0; margin-top: 15px; margin-bottom: 20px; }
.seoli-status-key-title { font-size: 16px; color: #333; margin-right: 5px; }
.seoli-status-item { display: flex; align-items: center; font-size: 14px; color: #58585b; white-space: nowrap; }
.seoli-status-item img { margin-right: 8px; vertical-align: middle; height: 14px; width: auto; }

/* --- Main Product Grids Core --- */
.seoli-container { position: relative; padding: 10px 0 30px 0; }
.seoli-header-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #D6D6D6; margin-bottom: 25px; padding-bottom: 8px; flex-wrap: wrap; row-gap: 10px; }
.seoli-container h3 { margin: 0; font-size: 28px; font-weight: 700; color: #333333; }
.seoli-header-links { display: flex; gap: 20px; }
.seoli-header-links a { font-size: 14px !important; } /* Keeps header links slightly smaller */
.seoli-grid { display: flex; flex-wrap: nowrap; align-items: flex-start; width: 100%; }
.seoli-column { flex-shrink: 0; }

/* --- DESKTOP PRECISION ALIGNMENT (Above 1250px) --- */
@media (min-width: 1251px) {
    /* Global 2-Column Alignment (Matches Category Box) */
    .seoli-two-col .seoli-column { width: 45% !important; }
    .seoli-two-col .seoli-col-1 { margin-left: 5% !important; margin-right: 0 !important; }
    .seoli-two-col .seoli-column:nth-child(2) { margin-left: auto !important; margin-right: 5% !important; }

    /* Global First-Column Anchor (For single-column sections) */
    .seoli-grid .seoli-col-1 { margin-left: 5% !important; }

    /* 4-Column Precision Alignment (Switches, Wireless, Routers) */
    #Switches .seoli-column.seoli-col-1, 
    #Wireless .seoli-column.seoli-col-1,
    #Routers .seoli-column.seoli-col-1 { 
        margin-left: 5% !important; width: 16% !important; margin-right: 4% !important; 
    }
    #Switches .seoli-column.seoli-col-2, 
    #Wireless .seoli-column.seoli-col-2,
    #Routers .seoli-column.seoli-col-2 { 
        width: 25% !important; margin-right: 0 !important; 
    }
    #Switches .seoli-column.seoli-col-3, 
    #Wireless .seoli-column.seoli-col-3,
    #Routers .seoli-column.seoli-col-3 { 
        margin-left: 0 !important; width: 24% !important; margin-right: 1% !important;
    }
    #Switches .seoli-column:nth-child(4), 
    #Wireless .seoli-column:nth-child(4),
    #Routers .seoli-column:nth-child(4) {
        width: 20% !important; margin-right: 5% !important;
    }

    /* Force No-Wrap on Desktop to save vertical space */
    .seoli-list li a { white-space: nowrap !important; display: inline-block !important; }
}

/* --- List & Header Styles --- */
.seoli-list { list-style: none !important; padding: 0; margin: 0 0 20px 0; }
.seoli-list li { display: flex; align-items: center; margin-bottom: 8px; line-height: 1.4; padding-left: 10px; }
.seoli-list li.seoli-sub-header { display: block; padding-left: 0; font-weight: 500; font-size: 18px; margin-top: 15px; margin-bottom: 10px; color: #333; white-space: nowrap; }
.seoli-list li img { height: 14px; width: auto; flex-shrink: 0; margin-left: 8px; }

/* One-off Header Adjustments */
.seoli-list li.seoli-cadence-header { margin-top: 0 !important; }
.seoli-cadence-spacer { display: none; }
@media (min-width: 769px) {
    .seoli-list li.seoli-cadence-spacer { display: block; margin-top: 15px; margin-bottom: 10px; visibility: hidden; pointer-events: none; }
}

/* Back to Top */
.seoli-back-to-top { display: flex; align-items: center; justify-content: flex-end; color: #005073; font-size: 14px; margin-top: 20px; }
.seoli-back-to-top svg { width: 16px; height: 16px; margin-left: 6px; fill: #005073; }

/* --- RESPONSIVE BREAKPOINTS --- */

/* 1. Global Overlap Fix (Trigger wrapping for long text on smaller screens) */
@media (max-width: 1360px) {
    .seoli-list li { align-items: flex-start; }
    .seoli-list li a { white-space: normal !important; display: inline-block; line-height: 1.3; margin-bottom: 2px; }
    .seoli-list li img { margin-top: 4px; }
}

/* 2. Tablet (Grids) */
@media (max-width: 1250px) {
    .seoli-grid { flex-wrap: wrap; }
    .seoli-column { width: 46% !important; margin-bottom: 30px; margin-right: 4% !important; margin-left: 0 !important; }
    .seoli-column:nth-child(2n) { margin-right: 0 !important; }
    #Routers .seoli-column { margin-left: 4% !important; }
    #Routers .seoli-column:nth-child(2n) { margin-left: 0 !important; }
}

/* 3. Tablet/Small Desktop (Specific Wrap Fix for Collaboration & Conferencing) */
@media (max-width: 1000px) {
    #CollaborationEndpoints .seoli-list li a, #Conferencing .seoli-list li a { max-width: 85%; }
}

/* 4. Small Tablet (Category Box) */
@media (max-width: 900px) {
    .seoli-cat-flex { flex-wrap: wrap; }
    .seoli-cat-column { width: 90% !important; margin-left: 5% !important; margin-right: 5% !important; margin-bottom: 20px; }
    .seoli-cat-section h4 { margin-left: 5%; } 
}

/* 5. Mobile (Headers & Columns) */
@media (max-width: 768px) {
    .seoli-header-row { flex-direction: column; align-items: flex-start; }
    .seoli-header-links { gap: 10px 15px; flex-wrap: wrap; }
    .seoli-column { width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; }
    .seoli-container h3 { font-size: 24px; }
}