/* ═══════════════════════════════════════════════════════ JOBNEST — GLOBAL RESPONSIVE OVERRIDES Loaded last in , overrides inline page styles to make all pages mobile-friendly. ═══════════════════════════════════════════════════════ */ /* Prevent horizontal overflow on any page */ html,body{max-width:100%;overflow-x:hidden} img,video,iframe{max-width:100%;height:auto} /* ════ TABLET & BELOW (≤1024px) ════ */ @media(max-width:1024px){ /* Landing pricing/value-prop grids */ .vp-grid{grid-template-columns:repeat(2,1fr) !important} .testimonials-grid{grid-template-columns:repeat(2,1fr) !important} .pricing-grid{grid-template-columns:1fr !important;max-width:420px;margin-left:auto;margin-right:auto} /* App sidebars */ .jobs-r-sidebar,.profile-r-sidebar,.coach-r-sidebar,.feed-r-sidebar{display:none !important} } /* ════ SMALL TABLET / LARGE PHONE (≤900px) ════ */ @media(max-width:900px){ /* Fluid hero typography (pages that haven't already opted into clamp) */ h1{font-size:clamp(28px,6vw,44px) !important;line-height:1.15 !important;letter-spacing:-1px !important} h2{font-size:clamp(24px,5vw,36px) !important;line-height:1.2 !important;letter-spacing:-.5px !important} .hero h1,.cta-sec h2,.cta-h2,.section-h2,.hero-h1{line-height:1.15 !important} /* Generic nav adjustments */ nav,.nav,#landing-nav{padding-left:18px !important;padding-right:18px !important;gap:12px !important} .nav-links{gap:10px !important} .nav-links a{font-size:12px !important} /* Landing hero stacking */ .hero-inner{grid-template-columns:1fr !important;text-align:center;gap:40px} .hero-cards{display:none !important} .hero-sub{margin:0 auto 28px !important} .hero-btns,.hero-social{justify-content:center !important} /* Landing feature/step/recruiter grids */ .features-grid{grid-template-columns:1fr !important} .feat-card-big,.feat-card-right{grid-column:span 1 !important} .steps-row{flex-direction:column !important;gap:16px !important} .step-arrow{transform:rotate(90deg) !important} .rec-split{grid-template-columns:1fr !important;gap:36px !important} /* Stats bar */ .stats-bar{flex-wrap:wrap;gap:16px;justify-content:center;padding:20px 18px !important} .stat-div{display:none !important} /* Landing nav actions → hamburger */ .ln-links{display:none !important} .ln-actions{display:none !important} .ln-hamburger{display:block !important} /* Top #nav (app pages) — compact, scrollable */ #nav{padding:0 10px !important;gap:2px} .ntag{display:none} .nlinks{overflow-x:auto !important;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none} .nlinks::-webkit-scrollbar{display:none} .nb{padding:6px 8px !important;font-size:11px !important;flex-shrink:0} /* Section padding on narrow screens */ section[class*="section"],.section,.hero-sec,.cta-sec,.hero{padding-left:20px !important;padding-right:20px !important} /* Footer */ .lf,footer{padding-left:20px !important;padding-right:20px !important} .lf-inner{gap:28px !important} /* Blog/article TOC */ .toc ul{grid-template-columns:1fr !important} } /* ════ PHONE (≤640px) ════ */ @media(max-width:640px){ /* Body typography */ body{font-size:15px} /* Headings */ h1{font-size:clamp(26px,7.5vw,34px) !important} h2{font-size:clamp(22px,6vw,30px) !important} /* Hero layout */ .hero-pill{font-size:11px;padding:6px 14px;margin-bottom:18px} .hero-sub{font-size:15px !important;line-height:1.65 !important;margin-bottom:22px !important;padding:0 4px} .hero-btns{flex-direction:column;gap:10px;width:100%;max-width:320px;margin-left:auto;margin-right:auto} .hero-cta,.hero-signin,.btn-cta{width:100% !important;padding:13px 22px !important;font-size:14px !important} /* Section padding */ .section,section.hero-sec,section.cta-sec,.hero,section[class*="-sec"]{padding-top:44px !important;padding-bottom:44px !important;padding-left:16px !important;padding-right:16px !important} /* Landing CTA section */ .cta-btns{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto;gap:10px} /* Pricing / testimonials / features / value-props — single column */ .vp-grid,.testimonials-grid,.pricing-grid,.features-grid,.plans-grid{grid-template-columns:1fr !important;gap:12px !important;max-width:420px !important;margin-left:auto !important;margin-right:auto !important} .vp-card-wide{grid-column:span 1 !important} .vp-card,.testimonial-card,.feat-card,.price-card{padding:18px !important} /* Price numbers shouldn't dominate */ .price-num{font-size:36px !important} /* Generic form rows stacking */ .frow,.jf-row{grid-template-columns:1fr !important} /* App inner grids commonly used — force 1 column */ .jobs-wrap,.profile-wrap,.prof-wrap,.coach-wrap,.feed-wrap,.chat-wrap,.rec-wrap,.has-session,.app-shell,.rec-split{grid-template-columns:1fr !important;height:auto !important} /* Admin/analytics grids */ .charts,.tri{grid-template-columns:1fr !important;gap:12px !important} .kpis{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important} /* Footer columns → vertical stack */ .lf-inner,footer > div{flex-direction:column !important;gap:20px !important} .lf-brand{min-width:0 !important;width:100% !important} /* Modal full-width on phones */ .mo,.modal{padding:12px !important} .mb,.modal-body{max-width:100% !important;padding:20px !important;border-radius:16px !important} /* Buttons: bigger tap targets */ .btn{min-height:42px;padding:9px 16px} .btn-sm{min-height:36px} .btn-xs{min-height:32px} /* Form inputs: bigger text so iOS doesn't auto-zoom */ input,textarea,select,.fi,.fta,.fsel{font-size:16px !important} /* Blog article typography */ article,.article,.post,.blog-post{padding-left:16px !important;padding-right:16px !important} article p,.article p,.post p{font-size:15px !important;line-height:1.75 !important} /* Cookie/legal pages wide text columns */ .legal-wrap,.privacy-wrap,.policy-wrap{padding:18px !important} } /* ════ SMALL PHONE (≤420px) ════ */ @media(max-width:420px){ .section,section.hero-sec,section.cta-sec,.hero,section[class*="-sec"]{padding-left:12px !important;padding-right:12px !important;padding-top:36px !important;padding-bottom:36px !important} h1{font-size:clamp(24px,8.5vw,30px) !important} h2{font-size:clamp(20px,7vw,26px) !important} .nicon,.logo-icon{width:30px !important;height:30px !important;font-size:14px !important} .nname,.logo{font-size:14px !important} .ntag{display:none !important} .btn{padding:8px 14px;font-size:12px} .btn-p{padding:10px 16px} .hero-cta,.hero-signin,.btn-cta{padding:12px 18px !important;font-size:13px !important} .faq-item h2{font-size:16px !important;padding:16px 18px 10px !important} .faq-item p{padding:0 18px 16px !important;font-size:14px !important} } /* ════ TOUCH DEVICES — 44×44 MINIMUM TAP TARGETS ════ */ @media(hover:none) and (pointer:coarse){ .btn,.nb,.hero-cta,.hero-signin,.btn-cta,.price-btn,.lf-link,a.btn,button,.nav-links a{min-height:44px} .btn-sm{min-height:40px} .mc,.modal-close{min-width:36px;min-height:36px} } /* ════ LANDSCAPE PHONES — prevent hero from being ≥100vh ════ */ @media(max-height:500px) and (orientation:landscape){ .hero-sec,.hero{min-height:auto !important} }