/**
 * SEO-Optimized Styles for CelebPoster.com
 * Adaptive H1 headings for better mobile UX and SEO
 */

/* ============================================
   H1 Product Title - Adaptive & SEO-Friendly
   ============================================ */

h1.product-title {
    font-size: 15px;
    line-height: 1.3;
    margin: 10px 0 15px;
    padding: 8px 0;
    font-weight: 600;
    color: #333;
    word-wrap: break-word;
    hyphens: auto;
    font-family: 'Roboto', sans-serif;
}

/* Product ID styling */
h1.product-title .product-id {
    font-size: 0.85em;
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

/* Product type label */
h1.product-title .product-type {
    font-weight: 500;
    color: #7f8c8d;
    font-size: 0.95em;
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    h1.product-title {
        font-size: 22px;
        margin: 15px 0 20px;
        padding: 0;
    }
    
    h1.product-title .product-id {
        font-size: 0.75em;
    }
}

/* Desktop (992px and up) */
@media (min-width: 992px) {
    h1.product-title {
        font-size: 26px;
        line-height: 1.4;
    }
    
    h1.product-title .product-id {
        font-size: 0.7em;
    }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
    h1.product-title {
        font-size: 28px;
    }
}

/* ============================================
   Sticky H1 on Mobile (Optional)
   ============================================ */

@media (max-width: 767px) {
    .product-info-block {
        position: relative;
    }
    
    /* Sticky state when scrolling */
    h1.product-title.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 999;
        padding: 10px 15px;
        margin: 0;
        font-size: 13px;
        border-bottom: 1px solid #e1e8ed;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        animation: slideDownH1 0.3s ease-out;
        line-height: 1.2;
    }
    
    h1.product-title.is-sticky .product-id {
        font-size: 0.9em;
    }
}

@keyframes slideDownH1 {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================
   Category H1 - Main Pages
   ============================================ */

h1.category-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 15px 0 20px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
}

@media (min-width: 768px) {
    h1.category-title {
        font-size: 28px;
        margin: 20px 0 30px;
    }
}

@media (min-width: 992px) {
    h1.category-title {
        font-size: 32px;
    }
}

/* ============================================
   Getty Products H1 Styles
   ============================================ */

h1.getty-product-title {
    font-size: 14px;
    line-height: 1.3;
    margin: 10px 0 15px;
    font-weight: 600;
    color: #333;
    word-wrap: break-word;
}

h1.getty-product-title .getty-label {
    font-size: 0.85em;
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

@media (min-width: 768px) {
    h1.getty-product-title {
        font-size: 24px;
        margin: 15px 0 20px;
    }
    
    h1.getty-product-title .getty-label {
        font-size: 0.7em;
    }
}

@media (min-width: 992px) {
    h1.getty-product-title {
        font-size: 28px;
    }
}

/* ============================================
   Improved Readability
   ============================================ */

/* Better text rendering on all devices */
h1 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Prevent orphans (single words on last line) */
h1.product-title,
h1.getty-product-title,
h1.category-title {
    text-wrap: balance; /* CSS Text Level 4 */
}

/* ============================================
   Loading Optimization
   ============================================ */

/* Lazy load images - already set in img tags */
img[loading="lazy"] {
    min-height: 50px; /* Prevent layout shift */
}

/* ============================================
   Canvas Touch Scroll Fix
   ============================================ */

/* Allow page scrolling on mobile when touching canvas */
canvas {
    touch-action: pan-y !important;
    -webkit-touch-action: pan-y !important;
}

/* Alternative: allow all touch gestures except pinch-zoom */
.canvas-container {
    touch-action: pan-y !important;
    -webkit-touch-action: pan-y !important;
}