/**
 * Mobile Landscape / Horizontal View Optimizations
 * Optimized for phones in landscape mode (max-height: 500px)
 * Applies to ALL pages across the site
 * Version: 1.0.0
 */

/* ===================================================================
   MOBILE LANDSCAPE - CORE FIXES (All Phones in Landscape)
   Max Height: 500px + Landscape Orientation
   Covers: iPhone, Samsung, Google Pixel, etc. in horizontal mode
   =================================================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {
    
    /* ========== HEADER & NAVIGATION ========== */
    
    /* Reduce header height significantly */
    .site-header {
        padding: 8px 0 !important;
        min-height: auto !important;
    }
    
    .header-inner {
        padding: 8px 0 !important;
        min-height: auto !important;
    }
    
    /* Compact logo */
    .site-logo,
    .site-branding .site-logo {
        font-size: 1.1rem !important;
        padding: 6px 0 !important;
    }
    
    .site-logo img {
        max-height: 35px !important;
        width: auto !important;
    }
    
    /* Compact navigation menu */
    .primary-menu > li > a {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* CTA button in nav - more compact */
    .primary-menu > li.menu-cta-button > a,
    .primary-menu > li:last-child > a {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
        margin-left: 8px !important;
    }
    
    /* ========== HERO SECTIONS ========== */
    
    /* Dramatically reduce hero heights */
    .hero,
    .hero-premium,
    section[class*="hero"] {
        padding: 30px 0 !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* Hero titles - much smaller */
    .hero h1,
    .hero-title,
    .hero-premium h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    
    /* Hero subtitles */
    .hero-subtitle,
    .hero p {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
    }
    
    /* Hero badges */
    .hero-badge {
        padding: 4px 12px !important;
        font-size: 0.75rem !important;
        margin-bottom: 12px !important;
    }
    
    /* Hero grid - single column in landscape */
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Hide or minimize hero images in landscape */
    .hero-images,
    .hero-image-primary {
        display: none !important;
    }
    
    /* Hero stats - horizontal compact layout */
    .hero-stats-inline {
        gap: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .hero-stats-inline .stat-number {
        font-size: 1.5rem !important;
    }
    
    .hero-stats-inline .stat-label {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }
    
    /* ========== BUTTONS & CTAs ========== */
    
    /* All buttons - more compact */
    .btn,
    .btn-primary,
    .btn-secondary,
    button[class*="btn"] {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .btn-xl,
    .btn-xxl {
        padding: 12px 24px !important;
        font-size: 1rem !important;
    }
    
    /* Button groups - better spacing */
    .hero-cta-buttons,
    .cta-buttons,
    div[class*="button"] {
        gap: 10px !important;
        margin-bottom: 16px !important;
        flex-wrap: wrap !important;
    }
    
    /* ========== SECTIONS & SPACING ========== */
    
    /* Reduce all section padding */
    .section,
    section {
        padding: 25px 0 !important;
    }
    
    .section.hero,
    section.hero {
        padding: 30px 0 !important;
    }
    
    /* Container padding */
    .container,
    .container-wide {
        padding: 0 16px !important;
    }
    
    /* ========== TYPOGRAPHY ========== */
    
    /* Headings - scaled down */
    h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
    h3 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h4 { font-size: 1.1rem !important; line-height: 1.3 !important; }
    h5 { font-size: 1rem !important; line-height: 1.3 !important; }
    h6 { font-size: 0.95rem !important; line-height: 1.3 !important; }
    
    /* Reduce heading margins */
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 10px !important;
        margin-top: 16px !important;
    }
    
    /* Paragraph spacing */
    p {
        margin-bottom: 12px !important;
        line-height: 1.5 !important;
    }
    
    /* ========== CARDS & GRIDS ========== */
    
    /* Card grids - 2 columns in landscape */
    .card-grid,
    .cards-grid,
    div[class*="grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    /* Individual cards - compact */
    .card,
    .company-card,
    div[class*="card"] {
        padding: 16px !important;
    }
    
    .card h3,
    .card h4,
    .company-card h3,
    .company-card h4 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    /* ========== STAT CARDS ========== */
    
    .stat-card,
    .stats-grid,
    div[class*="stat"] {
        padding: 12px !important;
    }
    
    .stat-card .number,
    .stat-number {
        font-size: 1.8rem !important;
    }
    
    .stat-card .label,
    .stat-label {
        font-size: 0.8rem !important;
    }
    
    /* ========== FORMS ========== */
    
    /* Form fields - compact */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
        min-height: auto !important;
    }
    
    textarea {
        min-height: 80px !important;
        max-height: 120px !important;
    }
    
    /* Form labels */
    label {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }
    
    /* ========== TABLES ========== */
    
    /* Tables - more compact */
    table,
    .table,
    .comparison-table {
        font-size: 0.8rem !important;
    }
    
    table th,
    table td {
        padding: 8px 6px !important;
    }
    
    /* Table overflow - allow horizontal scroll */
    .table-responsive,
    div:has(> table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* ========== COMPARISON SECTIONS ========== */
    
    /* Comparison grids - 2 columns */
    .comparison-grid,
    section[class*="comparison"] .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* ========== CALCULATOR SECTIONS ========== */
    
    /* Calculator containers */
    .calculator,
    .calculator-container,
    div[class*="calculator"] {
        padding: 16px !important;
    }
    
    .calculator-results,
    .results-container {
        padding: 12px !important;
        margin-top: 16px !important;
    }
    
    /* ========== FAQ SECTIONS ========== */
    
    /* FAQ items - compact */
    .faq-item,
    .accordion-item {
        padding: 12px 16px !important;
        margin-bottom: 10px !important;
    }
    
    .faq-question,
    .accordion-header {
        font-size: 1.05rem !important;
        margin-bottom: 8px !important;
    }
    
    .faq-answer,
    .accordion-content {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* ========== FOOTER ========== */
    
    /* Footer - compact */
    .site-footer {
        padding: 25px 0 15px !important;
    }
    
    .footer-grid {
        gap: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .footer-column h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    .footer-column a {
        padding: 6px 0 !important;
        font-size: 0.85rem !important;
    }
    
    /* ========== IMAGES & MEDIA ========== */
    
    /* All images - ensure they don't cause overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Feature images - reduced height */
    .featured-image,
    .hero-image,
    div[class*="image"] img {
        max-height: 200px !important;
        object-fit: cover !important;
    }
    
    /* ========== MODALS & POPUPS ========== */
    
    /* Modals - fit screen better */
    .modal,
    .popup,
    div[class*="modal"] {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    .modal-content {
        padding: 16px !important;
    }
    
    /* ========== UTILITY ADJUSTMENTS ========== */
    
    /* Spacing utilities - reduced */
    .mt-1, .my-1 { margin-top: 8px !important; }
    .mt-2, .my-2 { margin-top: 12px !important; }
    .mt-3, .my-3 { margin-top: 16px !important; }
    .mb-1, .my-1 { margin-bottom: 8px !important; }
    .mb-2, .my-2 { margin-bottom: 12px !important; }
    .mb-3, .my-3 { margin-bottom: 16px !important; }
    
    .pt-1, .py-1 { padding-top: 8px !important; }
    .pt-2, .py-2 { padding-top: 12px !important; }
    .pt-3, .py-3 { padding-top: 16px !important; }
    .pb-1, .py-1 { padding-bottom: 8px !important; }
    .pb-2, .py-2 { padding-bottom: 12px !important; }
    .pb-3, .py-3 { padding-bottom: 16px !important; }
}

/* ===================================================================
   MOBILE LANDSCAPE - SMALL PHONES (Extra Compact)
   Max Height: 414px + Landscape Orientation  
   Covers: iPhone SE, small Android phones in horizontal mode
   =================================================================== */

@media screen and (max-height: 414px) and (orientation: landscape) {
    
    /* Even more aggressive height reduction */
    .site-header {
        padding: 6px 0 !important;
    }
    
    .hero,
    .hero-premium {
        padding: 20px 0 !important;
    }
    
    .hero h1,
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }
    
    .hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }
    
    .section {
        padding: 20px 0 !important;
    }
    
    /* Buttons even more compact */
    .btn {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }
    
    /* Hide decorative elements */
    .hero-badge,
    .decorative,
    .background-pattern {
        display: none !important;
    }
    
    /* Single column for everything */
    .card-grid,
    .comparison-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================================================
   MOBILE LANDSCAPE - TABLETS IN LANDSCAPE
   Min Width: 768px + Max Height: 600px + Landscape
   Covers: iPad, Android tablets in horizontal mode
   =================================================================== */

@media screen and (min-width: 768px) and (max-height: 600px) and (orientation: landscape) {
    
    /* Tablets can handle 2-3 columns */
    .card-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Slightly less aggressive spacing reduction */
    .hero {
        padding: 40px 0 !important;
    }
    
    .section {
        padding: 30px 0 !important;
    }
}

/* ===================================================================
   MOBILE LANDSCAPE - SPECIFIC PAGE FIXES
   =================================================================== */

/* Company Detail Pages */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    /* Company header compact */
    .company-header,
    section[class*="company-header"] {
        padding: 20px 0 !important;
    }
    
    .company-name,
    .company-title {
        font-size: 1.75rem !important;
    }
    
    /* Company stats grid - 3 columns in landscape */
    .company-stats-grid,
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Product tables */
    .product-table,
    .policies-table {
        font-size: 0.75rem !important;
    }
    
    /* Similar companies section - 2 columns */
    .similar-companies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Comparison Pages */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    /* Comparison headers */
    .comparison-header {
        padding: 20px 0 !important;
    }
    
    /* vs badge */
    .vs-badge {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.9rem !important;
    }
    
    /* Side-by-side comparisons - keep 2 columns */
    .compare-companies,
    .company-comparison-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
}

/* Calculator Pages */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    /* Calculator grid - 2 columns */
    .calculator-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    
    /* Input section compact */
    .calculator-inputs {
        padding: 16px !important;
    }
    
    /* Results section */
    .calculator-results {
        padding: 16px !important;
    }
    
    /* Chart containers */
    .chart-container {
        max-height: 250px !important;
    }
}

/* Hub Pages (IUL Hub, Annuities Hub) */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    /* Hub hero sections */
    .hub-hero,
    section[class*="hub"] {
        padding: 25px 0 !important;
    }
    
    /* Hub cards grid - 2 columns */
    .hub-cards,
    .hub-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    
    /* Category cards */
    .category-card {
        padding: 16px !important;
    }
}

/* ===================================================================
   PRINT STYLES (Bonus - doesn't hurt to have)
   =================================================================== */

@media print {
    /* Hide navigation and CTAs when printing */
    .site-header,
    .site-footer,
    .btn,
    .cta-section,
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Ensure content is readable */
    body {
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
}