/* ========================================
   TOP-SPACER.CSS - v57
   Universal Page Spacer System for Sanwa Pump
   
   Last Updated: 2025-06-02
   ======================================== */

/* Main Spacer Container */
.page-spacer {
    width: 100%;
    height: 80px;
    background-color: #f8f9fa;
    position: relative;
    
    /* Smooth transitions */
    transition: all 0.3s ease;
}

/* Inner Container - Responsive Centered Layout */
.page-spacer-inner {
    max-width: 70vw;
    margin: 0 auto;
    height: 100%;
    
    /* Flexbox layout for category content */
    display: flex;
    align-items: center;
    justify-content: flex-end;  /* Right-aligned within the 70vw container */
    padding: 0 10px;            /* the value also set near/far from the underline */
}

/* Category Section Container */
.page-spacer .category-section {
    display: flex;
    align-items: flex-end;  /* Align text baseline with icon bottom edge */
    gap: 15px;
    position: relative;
    margin-bottom: -20px;  /* NEGATIVE MARGIN - moves content DOWN closer to underline */
}

/* Category Title */
.page-spacer .category-title {
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 -17px 0;
    color: #47388C;  /* Single uniform color */
}

/* Category Icon - Uniform pump icon */
.page-spacer .category-icon {
    width: 28px;  /* Reduced from 40px to match smaller text */
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0 0 -15px 0;
}

/* Bottom Border Line - Single color, 5px thick, BACK AT BOTTOM */
.page-spacer::after {
    content: '';
    position: absolute;
    bottom: 0;  /* BACK to bottom edge */
    right: 50%;
    transform: translateX(50%);
    width: 65vw;  /* Match the inner container width */
    height: 5px;  /* Increased to 5px as requested */
    background: linear-gradient(90deg, #47388C 0%, #5d4e75 100%);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .page-spacer-inner {
        max-width: 1200px;  /* Fixed max width for very large screens */
    }
    
    .page-spacer::after {
        width: 1200px;  /* Match the fixed width */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
}

/* Standard Desktop (1024px - 1399px) */
@media (max-width: 1399px) {
    .page-spacer-inner {
        max-width: 70vw;  /* 70% viewport width */
    }
    
    .page-spacer::after {
        width: 70vw;  /* Match the container width */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
}

/* Tablet Landscape (768px - 1023px) */
@media (max-width: 1023px) {
    .page-spacer {
        height: 70px;
    }
    
    .page-spacer-inner {
        max-width: 80vw;  /* Wider on tablets */
        padding: 0 15px;
    }
    
    .page-spacer::after {
        width: 80vw;  /* Match the container width */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
    
    .page-spacer .category-title {
        font-size: 18px;  /* Reduced from 28px to 18px */
        letter-spacing: 1.5px;
    }
    
    .page-spacer .category-icon {
        width: 26px;  /* Adjusted for tablet */
        height: 26px;
    }
}

/* Tablet Portrait (600px - 767px) */
@media (max-width: 767px) {
    .page-spacer {
        height: 70px;
    }
    
    .page-spacer-inner {
        max-width: 90vw;  /* Even wider on smaller tablets */
        padding: 0 15px;
        justify-content: flex-end;  /* Keep right-aligned on tablets */
    }
    
    .page-spacer::after {
        width: 90vw;  /* Match the container width */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
    
    .page-spacer .category-title {
        font-size: 16px;  /* Reduced from 24px to 16px */
        letter-spacing: 1px;
    }
    
    .page-spacer .category-icon {
        width: 24px;  /* Reduced from 35px to 24px */
        height: 24px;
    }
    
    .page-spacer .category-section {
        gap: 12px;
        margin-bottom: -8px;  /* NEGATIVE MARGIN - moves content DOWN on tablets */
    }
}

/* Smartphone Landscape (480px - 599px) */
@media (max-width: 599px) {
    .page-spacer {
        height: 60px;
    }
    
    .page-spacer-inner {
        max-width: 95vw;  /* Almost full width on phones */
        padding: 0 10px;
        justify-content: flex-end;  /* Keep right-aligned on phones */
    }
    
    .page-spacer::after {
        width: 95vw;  /* Match the container width */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
    
    .page-spacer .category-title {
        font-size: 14px;  /* Reduced from 20px to 14px */
        letter-spacing: 0.5px;
    }
    
    .page-spacer .category-icon {
        width: 20px;  /* Reduced from 30px to 20px */
        height: 20px;
    }
    
    .page-spacer .category-section {
        gap: 10px;
        margin-bottom: -6px;  /* NEGATIVE MARGIN - moves content DOWN on phones */
    }
}

/* Smartphone Portrait (320px - 479px) */
@media (max-width: 479px) {
    .page-spacer {
        height: 55px;
    }
    
    .page-spacer-inner {
        max-width: 98vw;  /* Nearly full width */
        padding: 0 5px;
        justify-content: flex-end;  /* Keep right-aligned even on small phones */
    }
    
    .page-spacer::after {
        width: 98vw;  /* Match the container width */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
    
    .page-spacer .category-title {
        font-size: 12px;  /* Reduced from 18px to 12px */
        letter-spacing: 0.3px;
    }
    
    .page-spacer .category-icon {
        width: 18px;  /* Reduced from 25px to 18px */
        height: 18px;
    }
    
    .page-spacer .category-section {
        gap: 8px;
        margin-bottom: -6px;  /* NEGATIVE MARGIN - moves content DOWN on small phones */
    }
}

/* Very Small Phones (below 375px) */
@media (max-width: 374px) {
    .page-spacer .category-title {
        font-size: 11px;  /* Reduced from 16px to 11px */
        letter-spacing: 0.2px;
    }
    
    .page-spacer .category-icon {
        width: 16px;  /* Reduced from 22px to 16px */
        height: 16px;
    }
    
    .page-spacer::after {
        width: 98vw;  /* Keep same width as parent breakpoint */
        right: 50%;
        transform: translateX(50%);
        bottom: 0;  /* BACK to bottom */
    }
    
    .page-spacer .category-section {
        margin-bottom: -6px;  /* NEGATIVE MARGIN - moves content DOWN */
    }
    
    /* Stack vertically if title is very long */
    .page-spacer.mobile-stack .category-section {
        flex-direction: column;
        gap: 5px;
    }
}

/* ========================================
   ANIMATION EFFECTS
   ======================================== */

/* Fade-in animation on page load */
.page-spacer.animate-in {
    animation: fadeInFromTop 0.6s ease-out;
}

@keyframes fadeInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle hover effect */
.page-spacer:hover {
    background-color: #f0f1f2;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Center the category section */
.page-spacer.center {
    justify-content: center;
}

/* Left-align the category section */
.page-spacer.left {
    justify-content: flex-start;
}

/* Remove grid background */
.page-spacer.no-grid {
    background-image: none;
}

/* Thicker bottom line */
.page-spacer.thick-line::after {
    height: 6px;
}

/* No bottom line */
.page-spacer.no-line::after {
    display: none;
}

/* Solid background colors */
.page-spacer.solid-bg {
    background-color: #ffffff;
    background-image: none;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .page-spacer {
        background-image: none !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
    
    .page-spacer .category-title {
        color: #000000 !important;
    }
    
    .page-spacer::after {
        background: #cccccc !important;
    }
}