/* HRWork Website - Base & Mobile Responsive Styles */
/* External file so CSS fixes apply instantly without republishing pages */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #202124; line-height: 1.6; background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; width: 100%; max-width: 100vw;
}
img { max-width: 100%; height: auto; }
a { transition: opacity 0.2s; }
a:hover { opacity: 0.85; }
.section { max-width: 1200px; margin: 0 auto; width: 100%; }
main, nav, footer, section { max-width: 100vw; overflow-x: hidden; }

/* Mobile hamburger menu - hidden on desktop */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: #202124; margin: 5px 0; border-radius: 2px; transition: 0.3s; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-cta { display: block; }
.mobile-overlay { display: none; }

/* ========== MOBILE (max-width: 768px) ========== */
@media (max-width: 768px) {
    /* Grids stack to single column */
    .grid-3 { grid-template-columns: 1fr !important; }
    .grid-2 { grid-template-columns: 1fr !important; }
    .grid-4 { grid-template-columns: 1fr 1fr !important; }

    /* Nav - show hamburger, hide links by default */
    nav { padding: 0 16px !important; }
    .mobile-menu-btn { display: block; }
    .nav-links {
        display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: 16px; gap: 0; z-index: 999; overflow-y: auto;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 14px 16px !important; font-size: 16px !important; border-bottom: 1px solid #f1f3f4; }
    .nav-cta { display: none; }
    .mobile-overlay { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 998; }
    .mobile-overlay.open { display: block; }

    /* Fallback for old pages without .nav-links class */
    nav > div:nth-child(2) { display: none !important; }

    /* Hero */
    .hero-section { padding: 40px 16px !important; }
    .hero-section h1 { font-size: 28px !important; line-height: 1.3 !important; }
    .hero-section p { font-size: 16px !important; }
    .hero-section a { padding: 12px 28px !important; font-size: 14px !important; }

    /* All section padding */
    section { padding-left: 16px !important; padding-right: 16px !important; }
    section h2 { font-size: 24px !important; }

    /* Footer */
    footer { padding: 32px 16px 20px !important; }
    footer > div:first-child, .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    footer a, footer p, footer span { word-break: break-word; }

    /* Newsletter */
    .newsletter-form { flex-direction: column !important; }
    .newsletter-form input, .newsletter-form button { width: 100% !important; }

    /* Comparison table */
    .comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Pricing */
    .pricing-grid { grid-template-columns: 1fr !important; max-width: 400px !important; margin: 0 auto !important; }

    /* CTA */
    .cta-section h2 { font-size: 24px !important; }
    .cta-section p { font-size: 15px !important; }

    /* Logos */
    .logos-text { font-size: 14px !important; letter-spacing: 1px !important; word-break: break-word; }

    /* FAQ */
    details summary { padding: 14px 16px !important; font-size: 14px !important; }
    details > div { padding: 12px 16px !important; font-size: 14px !important; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .stats-grid > div > div:first-child { font-size: 28px !important; }

    /* Image + Text */
    .image-text-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .image-text-grid h2 { font-size: 24px !important; }

    /* Video */
    .video-wrap { border-radius: 12px !important; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr !important; }

    /* Divider */
    .divider-wrap { padding: 16px !important; }

    /* Timeline */
    .timeline-section { max-width: 100% !important; }

    /* ---- FALLBACK: catch inline styles on old/any pages ---- */
    [style*="grid-template-columns: 2fr"],
    [style*="grid-template-columns:2fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr;"],
    [style*="grid-template-columns:1fr 1fr;"] { grid-template-columns: 1fr !important; }

    [style*="padding: 64px 40px"], [style*="padding:64px 40px"] { padding: 40px 16px !important; }
    [style*="padding: 80px 40px"], [style*="padding:80px 40px"] { padding: 40px 16px !important; }
    [style*="padding: 48px 40px"], [style*="padding:48px 40px"] { padding: 32px 16px !important; }
    [style*="padding: 0 40px"], [style*="padding:0 40px"] { padding: 0 16px !important; }

    [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 28px !important; line-height: 1.3 !important; }
    [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 28px !important; }
    [style*="font-size: 36px"], [style*="font-size:36px"] { font-size: 24px !important; }
    [style*="font-size: 32px"], [style*="font-size:32px"] { font-size: 22px !important; }
}

@media (max-width: 480px) {
    .grid-4 { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .hero-section h1 { font-size: 24px !important; }
    [style*="font-size: 48px"], [style*="font-size:48px"] { font-size: 24px !important; }
    [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }
}