/* ═══════════════════════════════════════════════════════
   BEST CALCULATORS HUB - COMPLETE STYLESHEET
   All fixes applied - Ready to use
   ═══════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ─── */
:root {
    --navy:         #0f172a;
    --slate:        #1e293b;
    --slate-light:  #334155;
    --muted:        #64748b;
    --muted-light:  #94a3b8;
    --border:       #e2e8f0;
    --bg:           #f8fafc;
    --white:        #ffffff;
    --teal:         #0d9488;
    --teal-light:   #14b8a6;
    --teal-pale:    #ccfbf1;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --max-width:    1200px;
    --radius:       12px;
    --radius-lg:    16px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}

html { 
    scroll-behavior:smooth; 
    -webkit-tap-highlight-color:transparent; 
}

body { 
    font-family:var(--font-body); 
    background:var(--bg); 
    color:var(--slate); 
    line-height:1.6; 
    -webkit-font-smoothing:antialiased; 
    -moz-osx-font-smoothing:grayscale; 
    overflow-x:hidden; 
}

a { 
    color:inherit; 
    text-decoration:none; 
    -webkit-tap-highlight-color:transparent; 
}

button { 
    font-family:var(--font-body); 
    cursor:pointer; 
    border:none; 
    -webkit-tap-highlight-color:transparent; 
}

/* Touch-friendly targets */
.nav-link, .category-card { 
    min-height:44px; 
    display:flex; 
    align-items:center; 
}

.nav-brand, .hamburger, .back-to-top { 
    -webkit-user-select:none; 
    user-select:none; 
}

* { 
    -webkit-overflow-scrolling:touch; 
}

/* ═══ HEADER ═══ */
.header { 
    background:var(--white); 
    border-bottom:1px solid var(--border); 
    position:sticky; 
    top:0; 
    z-index:1000; 
    box-shadow:var(--shadow-sm); 
}

.nav { 
    max-width:var(--max-width); 
    margin:0 auto; 
    padding:0 24px; 
    height:64px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
}

.nav-brand { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    font-weight:700; 
    font-size:1.3em; 
    color:var(--navy); 
}

.nav-brand-icon { 
    font-size:1.2em; 
}

.nav-links { 
    display:flex; 
    gap:8px; 
    align-items:center; 
}

.nav-link { 
    color:var(--muted); 
    font-size:0.9em; 
    font-weight:500; 
    padding:8px 16px; 
    border-radius:8px; 
    transition:all 0.2s; 
    justify-content:center; 
}

.nav-link:hover { 
    background:var(--bg); 
    color:var(--teal); 
}

.nav-link.active { 
    color:var(--teal); 
    background:var(--teal-pale); 
}

.hamburger { 
    display:none; 
    flex-direction:column; 
    gap:5px; 
    background:none; 
    padding:8px; 
}

.hamburger span { 
    display:block; 
    width:22px; 
    height:2.5px; 
    background:var(--slate); 
    border-radius:2px; 
    transition:all 0.3s; 
}

.hamburger.active span:nth-child(1) { 
    transform:translateY(7.5px) rotate(45deg); 
}

.hamburger.active span:nth-child(2) { 
    opacity:0; 
}

.hamburger.active span:nth-child(3) { 
    transform:translateY(-7.5px) rotate(-45deg); 
}

/* ═══ HERO ═══ */
.hero { 
    background:linear-gradient(135deg, var(--navy) 0%, #1e3a5f 100%); 
    padding:64px 24px 56px; 
    text-align:center; 
}

.hero-content { 
    max-width:800px; 
    margin:0 auto; 
}

.hero-badge { 
    display:inline-block; 
    background:rgba(13,148,136,0.15); 
    color:var(--teal-light); 
    padding:6px 18px; 
    border-radius:24px; 
    font-size:0.85em; 
    font-weight:600; 
    margin-bottom:20px; 
    border:1px solid rgba(13,148,136,0.3); 
}

.hero h1 { 
    font-family:var(--font-heading); 
    font-size:3em; 
    font-weight:700; 
    color:var(--white); 
    line-height:1.2; 
    margin-bottom:16px; 
}

.hero-highlight { 
    color:var(--teal-light); 
}

.hero-text { 
    color:var(--muted-light); 
    font-size:1.1em; 
    margin-bottom:32px; 
    line-height:1.7; 
}

/* Search Box */
.search-container { 
    max-width:600px; 
    margin:0 auto; 
}

.search-box { 
    display:flex; 
    align-items:center; 
    background:var(--white); 
    border-radius:12px; 
    padding:6px 6px 6px 20px; 
    box-shadow:0 8px 24px rgba(0,0,0,0.15); 
}

.search-icon { 
    font-size:1.2em; 
    color:var(--muted); 
}

.search-input { 
    flex:1; 
    border:none; 
    outline:none; 
    font-size:1em; 
    padding:10px 16px; 
    color:var(--slate); 
}

.search-input::placeholder { 
    color:var(--muted-light); 
}

.search-btn { 
    background:var(--teal); 
    color:var(--white); 
    padding:12px 28px; 
    border-radius:8px; 
    font-weight:600; 
    transition:all 0.2s; 
}

.search-btn:hover { 
    background:#0f766e; 
    transform:translateY(-1px); 
}

/* ═══ TRUST BAR ═══ */
.trust-bar { 
    background:var(--white); 
    border-bottom:1px solid var(--border); 
}

.trust-inner { 
    max-width:var(--max-width); 
    margin:0 auto; 
    padding:20px 24px; 
    display:flex; 
    justify-content:center; 
    gap:48px; 
    flex-wrap:wrap; 
}

.trust-item { 
    display:flex; 
    align-items:center; 
    gap:12px; 
}

.trust-icon { 
    font-size:1.8em; 
}

.trust-text { 
    display:flex; 
    flex-direction:column; 
}

.trust-number { 
    font-size:1.2em; 
    font-weight:700; 
    color:var(--navy); 
    line-height:1; 
}

.trust-label { 
    font-size:0.75em; 
    color:var(--muted); 
    font-weight:500; 
    text-transform:uppercase; 
    letter-spacing:0.5px; 
}

/* ═══ MAIN CONTAINER ═══ */
.main-container { 
    max-width:var(--max-width); 
    margin:0 auto; 
    padding:56px 24px; 
}

/* Section Title */
.section-title { 
    text-align:center; 
    margin-bottom:40px; 
}

.section-title h2 { 
    font-family:var(--font-heading); 
    font-size:2.2em; 
    font-weight:700; 
    color:var(--navy); 
    margin-bottom:12px; 
}

.section-title p { 
    color:var(--muted); 
    font-size:1.05em; 
}

/* ═══ CATEGORY GRID ═══ */
.category-grid { 
    display:grid; 
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); 
    gap:20px; 
    margin-bottom:48px; 
}

.category-card { 
    background:var(--white); 
    border:1px solid var(--border); 
    border-radius:var(--radius-lg); 
    padding:32px 24px; 
    text-align:center; 
    transition:all 0.3s ease; 
    cursor:pointer; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center; 
}

.category-card:hover { 
    box-shadow:var(--shadow-lg); 
    transform:translateY(-4px); 
    border-color:var(--teal-light); 
}

.category-icon { 
    font-size:3em; 
    margin-bottom:16px; 
    display:block; 
    line-height:1; 
}

.category-name { 
    font-size:1.15em; 
    font-weight:600; 
    color:var(--navy); 
    margin-bottom:8px; 
    display:block; 
}

.category-count { 
    font-size:0.9em; 
    color:var(--muted); 
    font-weight:500; 
}

/* Icon Colors */
.category-card:nth-child(1) .category-icon { color:#10b981; }
.category-card:nth-child(2) .category-icon { color:#8b5cf6; }
.category-card:nth-child(3) .category-icon { color:#f59e0b; }
.category-card:nth-child(4) .category-icon { color:#3b82f6; }
.category-card:nth-child(5) .category-icon { color:#84cc16; }
.category-card:nth-child(6) .category-icon { color:#ec4899; }
.category-card:nth-child(7) .category-icon { color:#0d9488; }
.category-card:nth-child(8) .category-icon { color:#f97316; }
.category-card:nth-child(9) .category-icon { color:#ef4444; }
.category-card:nth-child(10) .category-icon { color:#6366f1; }
.category-card:nth-child(11) .category-icon { color:#06b6d4; }
.category-card:nth-child(12) .category-icon { color:#f59e0b; }
.category-card:nth-child(13) .category-icon { color:#8b5cf6; }
.category-card:nth-child(14) .category-icon { color:#0ea5e9; }
.category-card:nth-child(15) .category-icon { color:#64748b; }

/* ═══ CTA SECTION ═══ */
.cta-section { 
    background:linear-gradient(135deg, var(--teal), #0f766e); 
    border-radius:var(--radius-lg); 
    padding:48px 32px; 
    text-align:center; 
    margin-top:64px; 
}

.cta-section h3 { 
    font-family:var(--font-heading); 
    font-size:1.8em; 
    font-weight:700; 
    color:var(--white); 
    margin-bottom:12px; 
    line-height:1.3; 
}

.cta-section p { 
    color:rgba(255,255,255,0.95); 
    font-size:1.05em; 
    margin-bottom:28px; 
    line-height:1.7; 
}

.cta-btn { 
    display:inline-block; 
    background:var(--white); 
    color:var(--teal); 
    font-weight:600; 
    padding:14px 36px; 
    border-radius:10px; 
    transition:all 0.2s; 
}

.cta-btn:hover { 
    box-shadow:0 6px 20px rgba(255,255,255,0.3); 
    transform:translateY(-2px); 
}

/* ═══ CONTENT SECTION - WITH ALL FIXES ═══ */
.content-section { 
    background:var(--white); 
    border-radius:var(--radius-lg); 
    border:1px solid var(--border); 
    padding:48px 40px; 
    margin-top:48px; 
    box-shadow:var(--shadow-sm); 
}

.content-section h2 { 
    font-family:var(--font-heading); 
    font-size:1.8em; 
    font-weight:600; 
    color:var(--navy); 
    margin-bottom:24px; 
    text-align:center; 
}

.content-text { 
    color:var(--slate-light); 
    font-size:0.95em; 
    line-height:1.9; 
}

.content-text p { 
    margin-bottom:18px; 
    color:var(--muted);
}

/* H3 Headings - Main Sections */
.content-text h3 { 
    font-family:var(--font-heading);
    font-size:1.4em; 
    font-weight:600; 
    color:var(--navy); 
    margin-top:32px; 
    margin-bottom:16px; 
    line-height:1.3;
}

/* H4 Headings - FIXED: Was missing! */
.content-text h4 { 
    font-family:var(--font-body);
    font-size:1.1em; 
    font-weight:600; 
    color:var(--slate); 
    margin-top:24px; 
    margin-bottom:12px; 
    line-height:1.4;
}

/* Content More Section - FIXED: Increased max-height from 2000px to 15000px */
.content-more { 
    max-height:0; 
    overflow:hidden; 
    transition:max-height 0.5s ease-out;
    opacity:0;
}

.content-more.expanded { 
    max-height:15000px; /* FIXED: Was 2000px, now 15000px */
    opacity:1;
    transition:max-height 0.6s ease-in, opacity 0.3s ease-in 0.1s;
}

/* Read More Button */
.read-more-btn { 
    display:block; 
    margin:24px auto 0; 
    background:var(--teal); 
    color:var(--white); 
    padding:12px 32px; 
    border-radius:8px; 
    font-weight:600; 
    font-size:0.95em; 
    transition:all 0.2s; 
}

.read-more-btn:hover { 
    background:#0f766e; 
    transform:translateY(-1px); 
    box-shadow:var(--shadow-md); 
}

/* ═══ FOOTER ═══ */
.footer { 
    background:var(--navy); 
    color:var(--muted-light); 
    margin-top:64px; 
}

.footer-inner { 
    max-width:var(--max-width); 
    margin:0 auto; 
    padding:56px 24px 24px; 
}

.footer-grid { 
    display:grid; 
    grid-template-columns:2fr 1fr 1fr 1fr; 
    gap:40px; 
    padding-bottom:40px; 
    border-bottom:1px solid var(--slate-light); 
}

.footer-brand { 
    font-size:1.3em; 
    font-weight:700; 
    color:var(--white); 
    margin-bottom:12px; 
}

.footer-brand-desc { 
    font-size:0.85em; 
    color:var(--muted); 
    line-height:1.7; 
    margin-bottom:20px; 
    max-width:280px; 
}

.footer-social { 
    display:flex; 
    gap:10px; 
    flex-wrap:wrap; 
}

.social-link { 
    background:rgba(255,255,255,0.08); 
    color:var(--muted-light); 
    font-size:0.8em; 
    padding:8px 16px; 
    border-radius:8px; 
    transition:all 0.2s; 
}

.social-link:hover { 
    background:var(--teal); 
    color:var(--white); 
}

.footer-title { 
    color:var(--white); 
    font-size:0.85em; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:0.8px; 
    margin-bottom:16px; 
}

.footer-links { 
    display:flex; 
    flex-direction:column; 
    gap:10px; 
}

.footer-links a { 
    color:var(--muted); 
    font-size:0.9em; 
    transition:color 0.2s; 
}

.footer-links a:hover { 
    color:var(--teal-light); 
}

.footer-bottom { 
    padding-top:24px; 
    text-align:center; 
}

.footer-copy { 
    font-size:0.85em; 
    color:var(--muted); 
}

/* ═══ BACK TO TOP ═══ */
.back-to-top { 
    display:none; 
    position:fixed; 
    bottom:32px; 
    right:32px; 
    width:48px; 
    height:48px; 
    background:var(--teal); 
    color:var(--white); 
    border-radius:50%; 
    font-size:1.4em; 
    box-shadow:var(--shadow-lg); 
    z-index:999; 
    transition:all 0.2s; 
    align-items:center; 
    justify-content:center; 
}

.back-to-top.visible { 
    display:flex; 
}

.back-to-top:hover { 
    background:var(--navy); 
    transform:translateY(-3px); 
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE OPTIMIZATION FOR ALL DEVICES
   ═══════════════════════════════════════════════════════ */

/* Tablets & Small Laptops (768px - 1024px) */
@media (max-width:1024px) {
    .category-grid { 
        grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); 
        gap:18px; 
    }
    
    .hero h1 { 
        font-size:2.5em; 
    }
    
    .section-title h2 { 
        font-size:2em; 
    }
}

/* Tablets (640px - 960px) */
@media (max-width:960px) {
    .category-grid { 
        grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); 
        gap:16px; 
    }
    
    .footer-grid { 
        grid-template-columns:1fr 1fr; 
        gap:32px; 
    }
    
    .content-section { 
        padding:40px 32px; 
    }
}

/* Mobile & Tablets (640px and below) */
@media (max-width:640px) {
    .hamburger { 
        display:flex; 
    }
    
    .nav-links { 
        display:none; 
        position:absolute; 
        top:64px; 
        left:0; 
        right:0; 
        background:var(--white); 
        flex-direction:column; 
        padding:12px; 
        gap:4px; 
        box-shadow:var(--shadow-md); 
        border-top:1px solid var(--border); 
        z-index:999; 
    }
    
    .nav-links.active { 
        display:flex; 
    }
    
    .nav-link { 
        padding:14px 16px; 
        width:100%; 
        text-align:center; 
        font-size:0.95em; 
    }
    
    .hero { 
        padding:48px 20px 40px; 
    }
    
    .hero h1 { 
        font-size:2em; 
        line-height:1.2; 
    }
    
    .hero h1 br { 
        display:none; 
    }
    
    .hero-text { 
        font-size:1em; 
    }
    
    .hero-badge { 
        font-size:0.8em; 
        padding:5px 14px; 
    }
    
    .search-box { 
        flex-direction:column; 
        padding:12px; 
        gap:10px; 
    }
    
    .search-input { 
        width:100%; 
        padding:12px 16px; 
        font-size:16px; 
    }
    
    .search-btn { 
        width:100%; 
        padding:14px; 
    }
    
    .trust-inner { 
        gap:24px; 
        padding:16px 20px; 
    }
    
    .trust-item { 
        flex-direction:column; 
        text-align:center; 
    }
    
    .main-container { 
        padding:40px 20px; 
    }
    
    .section-title h2 { 
        font-size:1.8em; 
    }
    
    .section-title p { 
        font-size:0.95em; 
    }
    
    .category-grid { 
        grid-template-columns:1fr; 
        gap:12px; 
    }
    
    .category-card { 
        padding:28px 20px; 
    }
    
    .cta-section { 
        padding:36px 24px; 
        margin-top:48px; 
    }
    
    .cta-section h3 { 
        font-size:1.5em; 
    }
    
    .cta-section p { 
        font-size:0.95em; 
    }
    
    .cta-btn { 
        padding:12px 28px; 
    }
    
    .content-section { 
        padding:32px 20px; 
        margin-top:40px; 
    }
    
    .content-section h2 { 
        font-size:1.5em; 
    }
    
    .content-text { 
        font-size:0.9em; 
    }
    
    .content-text h3 { 
        font-size:1.2em; 
        margin-top:28px;
    }
    
    /* FIXED: Added h4 mobile styles */
    .content-text h4 { 
        font-size:1.05em;
        margin-top:20px;
    }
    
    .footer-grid { 
        grid-template-columns:1fr; 
        gap:28px; 
    }
    
    .footer-inner { 
        padding:40px 20px 20px; 
    }
    
    .back-to-top { 
        bottom:20px; 
        right:20px; 
        width:44px; 
        height:44px; 
        font-size:1.2em; 
    }
}

/* Small Mobile (480px and below) */
@media (max-width:480px) {
    .nav-brand { 
        font-size:1.1em; 
    }
    
    .hero h1 { 
        font-size:1.7em; 
    }
    
    .hero-text { 
        font-size:0.9em; 
    }
    
    .trust-number { 
        font-size:1.1em; 
    }
    
    .section-title h2 { 
        font-size:1.6em; 
    }
    
    .cta-section h3 { 
        font-size:1.3em; 
    }
    
    .content-section h2 { 
        font-size:1.3em; 
    }
    
    .content-text h3 { 
        font-size:1.15em;
    }
    
    /* FIXED: Added h4 mobile styles */
    .content-text h4 { 
        font-size:1em;
    }
    
    .footer-brand { 
        font-size:1.1em; 
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width:360px) {
    .hero { 
        padding:36px 16px 32px; 
    }
    
    .hero h1 { 
        font-size:1.5em; 
    }
    
    .main-container { 
        padding:32px 16px; 
    }
    
    .content-section { 
        padding:24px 16px; 
    }
    
    .category-card { 
        padding:24px 16px; 
    }
}

/* Landscape Mode Optimization */
@media (max-height:500px) and (orientation:landscape) {
    .hero { 
        padding:32px 20px; 
    }
    
    .hero h1 { 
        font-size:1.8em; 
    }
    
    .main-container { 
        padding:32px 20px; 
    }
}

/* Print Optimization */
@media print {
    .header, 
    .footer, 
    .back-to-top, 
    .search-box, 
    .cta-section, 
    .read-more-btn { 
        display:none; 
    }
    
    .hero { 
        background:none; 
        color:var(--navy); 
    }
    
    .category-grid { 
        grid-template-columns:repeat(3, 1fr); 
    }
    
    .content-more { 
        max-height:none !important; 
    }
}