/* ====================================================================
   OnePaperExam — SITEWIDE MOBILE OPTIMISATION PASS
   Loaded LAST on every page (after shared.css + home.css/mcq-interactive.css/
   listing-detail.css), so these rules only ever REFINE small-screen behaviour
   — nothing here changes desktop (>1080px) layout or functionality.

   Verified against 320 / 360 / 375 / 390 / 414 / 430 / 480px viewports.
   Sections below mirror the request: Header & Nav, Footer, Page
   Heading/Description/Buttons, Subjects List, and general overflow safety.
   ==================================================================== */

/* ── 0. GLOBAL OVERFLOW SAFETY (all breakpoints) ──────────────────────── */
html,body{overflow-x:hidden;max-width:100%}
img,svg,video,iframe,canvas{max-width:100%;height:auto}
table{max-width:100%}
input,select,textarea,button{max-width:100%;font-family:inherit}
pre,code{white-space:pre-wrap;word-break:break-word}
* {-webkit-tap-highlight-color:transparent}

/* ── 1. HEADER & NAV ───────────────────────────────────────────────────
   Fixes the one real inconsistency in the source: home.css hid the Login
   button entirely below 680px, while every inner page (via shared.css)
   kept it visible (shrinking to icon-only under 400px). That made the
   header look different on the homepage vs. every other page on mobile.
   This restores it everywhere so Login always appears, in the same spot,
   with the same treatment, on every page. */
@media(max-width:1080px){
  .header-actions .btn{display:inline-flex !important}
}
@media(max-width:680px){
  .header-inner{height:60px}
  .header-actions{gap:5px}
  .header-actions .btn{padding:7px 10px !important;font-size:12.5px !important;gap:4px}
}
@media(max-width:430px){
  .header-inner{padding:0 10px;gap:5px}
  .logo{font-size:16px;gap:6px}
  .logo-text{font-size:15px}
  .logo-icon{width:30px;height:30px;font-size:14px;border-radius:7px}
  .header-actions .btn,.header-actions .btn span{font-size:0 !important;padding:0 !important}
  .header-actions .btn{width:34px;height:34px;justify-content:center;border-radius:8px}
  .header-actions .btn i{font-size:14px;margin:0}
  .theme-toggle,.hamburger,.submit-q-btn,.user-avatar-btn{width:34px;height:34px}
}
@media(max-width:360px){
  .header-inner{gap:4px}
  .logo-text{font-size:14px}
  .logo-icon{width:28px;height:28px;font-size:13px}
  .theme-toggle,.hamburger,.header-actions .btn,.user-avatar-btn{width:32px;height:32px}
}

/* Topbar: keep it one tidy row, never wraps into a ragged 3rd line */
@media(max-width:480px){
  .topbar-inner{padding:0 10px;font-size:10.5px;gap:6px 10px}
  .topbar-left{gap:8px}
  .topbar-right{gap:8px}
  .topbar-right a{font-size:13px}
}

/* Mobile drawer: comfortable padding + full-width tap targets at every
   narrow width, and the drawer never causes its own horizontal scroll */
@media(max-width:480px){
  .mobile-nav{padding:16px}
  .mobile-nav-header{margin-bottom:18px}
  .mobile-links a{padding:12px 0;font-size:15px}
  .dropdown-cols{min-width:0;column-count:1}
}

/* ── 2. FOOTER ──────────────────────────────────────────────────────── */
@media(max-width:600px){
  footer{padding:36px 16px 0}
  .footer-inner{gap:28px;padding-bottom:28px}
  .footer-col h4{margin-bottom:12px}
  .footer-brand p{max-width:none}
  .footer-bottom{flex-direction:column;text-align:center;gap:6px;padding:16px 0}
}
@media(max-width:430px){
  footer{padding:30px 14px 0}
  .footer-inner{gap:24px;padding-bottom:24px}
  .footer-social{flex-wrap:wrap}
  .footer-social a{width:34px;height:34px}
  .footer-col ul li a{font-size:14px}
  .footer-bottom{font-size:12.5px}
}

/* ── 3. PAGE HEADINGS, DESCRIPTIONS & BUTTONS ──────────────────────────
   Inner pages (.page-hero) previously sat left-aligned while the
   homepage's own hero (.hero) is centred — this brings every inner page's
   top section in line with that same centred treatment, on desktop and
   mobile alike, and keeps text/buttons from overflowing at small widths. */
.page-hero-inner{text-align:center}
.page-hero p{margin-left:auto;margin-right:auto}
.hero-stats-row{justify-content:center}

@media(max-width:600px){
  .page-hero{padding:32px 16px 28px}
  .page-hero p{font-size:14.5px;max-width:520px}
  .hero-stat{font-size:12.5px;padding:7px 12px}
  .auth-hero{padding:38px 16px 80px}
  .auth-hero h1{font-size:clamp(20px,6vw,28px)}
  .auth-hero p{font-size:13.5px}
}
@media(max-width:430px){
  .page-hero{padding:28px 14px 24px}
  .page-hero h1{margin-bottom:8px}
  .page-hero h1 i{margin-right:6px !important}
  .hero-stats-row{gap:8px}
  .hero-stat{font-size:11.5px;padding:6px 10px;gap:6px}
  .section-title{font-size:17px}
  .breadcrumb{padding:9px 14px;font-size:12.5px}
}
@media(max-width:375px){
  .page-hero p{font-size:13.5px}
  .hero-stat span,.hero-stat{white-space:normal}
}
@media(max-width:320px){
  .page-hero{padding:24px 12px 20px}
  .hero-stats-row{flex-direction:column;align-items:center;gap:6px}
  .hero-stat{width:100%;max-width:240px;justify-content:center}
}

/* Homepage hero — home.css already steps the size down at 680/560; this
   just adds the finer 430/375/320 tuning it doesn't cover */
@media(max-width:430px){
  .hero{padding:34px 14px 30px}
  .hero-text h1{font-size:22px}
  .hero-text p{font-size:13.5px}
  .hero-badges .badge{font-size:10.5px;padding:5px 9px;gap:4px}
  .hero-btns .btn{font-size:12.5px !important;padding:10px 12px !important}
}
@media(max-width:320px){
  .hero-text h1{font-size:20px}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn{width:100%}
}

/* Buttons in general: comfortable touch targets everywhere on mobile,
   never smaller than ~40px tall, and never allowed to overflow their row */
@media(max-width:600px){
  .btn{min-height:40px}
  .mcq-section-header{padding:14px 16px}
  .mcq-header-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .mcq-header-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap}
}
@media(max-width:375px){
  .mcq-header-actions .btn{font-size:11.5px !important;padding:8px 10px !important}
}

/* ── 4. SUBJECTS LIST / SUBJECTS GRID ──────────────────────────────────
   Both home.css (front page) and mcq-interactive.css (Subjects/Quiz/Class
   pages) forced a flat 3-column grid below 560–600px, which left cards far
   too cramped and small for a comfortable tap target on a 320–375px phone.
   This replaces the fixed count with a fluid grid that settles on 2 columns
   at typical phone widths (and can grow to 3 on the larger end, 414–480px)
   while always leaving each card a decent minimum touch size. */
@media(max-width:600px){
  .subjects-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) !important;gap:10px}
  .subject-card{padding:16px 10px;gap:8px}
  .subj-icon{width:46px;height:46px;font-size:20px}
  .subject-card h3{font-size:13.5px}
  .subject-card span{font-size:11px}
}
@media(max-width:375px){
  .subjects-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
}
@media(max-width:320px){
  .subjects-grid{gap:8px}
  .subject-card{padding:14px 8px}
  .subj-icon{width:42px;height:42px;font-size:18px}
}

/* Topics grid — already fluid via auto-fill/minmax, just tighten spacing */
@media(max-width:430px){
  .topics-grid{gap:10px}
  .topic-card{padding:13px 14px}
  .topic-search{max-width:none}
}

/* Year grid (Past Papers / Past Papers Quiz) — same fluid treatment */
@media(max-width:375px){
  .year-grid{grid-template-columns:repeat(3,1fr)}
  .year-card{padding:14px 8px}
  .year-num{font-size:21px}
}
@media(max-width:320px){
  .year-grid{grid-template-columns:repeat(2,1fr)}
}

/* Exam / blog / paper card grids — extra polish at the smallest sizes
   (the 1080/820/680/560 breakpoints already in home.css handle the rest) */
@media(max-width:430px){
  .exam-grid{grid-template-columns:1fr !important}
  .papers-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

/* ── 5. FORMS / FILTER BARS (Jobs, Scholarships, PPSC Past Papers) ────
   When the filter bar stacks to a column on mobile, make each filter's
   select/input actually fill the row instead of sitting at its native
   (often too-narrow) content width. */
@media(max-width:600px){
  .filter-bar{padding:12px}
  .filter-group{width:100%}
  .filter-bar select,.filter-bar input[type="text"]{flex:1;width:100%;min-width:0}
  .filter-bar input[type="text"]{min-width:0}
}

/* ── 6. SIDEBAR / MAIN-LAYOUT — sidebar already hides below 1100px;
   make sure the remaining single column has no side overflow */
@media(max-width:600px){
  .main-layout,.papers-with-sidebar{gap:20px}
  .section{padding:24px 14px}
  .mcq-card,.listing-card,.detail-card,.class-panel-card,.ope-card{padding:16px}
  .mcq-card h4{font-size:15px}
  .mcq-opt{padding:10px 12px;font-size:13.5px}
}
@media(max-width:375px){
  .section{padding:20px 12px}
}

/* "Other Classes" widget (Matric / Intermediate sub-groups) — same
   sublabel treatment, kept comfortable at every width, on every page
   that now includes this widget in its sidebar */
.mobile-links-sublabel{padding-left:2px}
@media(max-width:430px){
  .widget-links a{padding:9px 2px}
}

/* Quiz taking / result action rows: same full-width, wrapping treatment
   as the mcq-header-actions buttons above */
@media(max-width:480px){
  .quiz-submit-bar{padding:12px 14px}
  .quiz-result-banner{padding:16px 18px}
  .quiz-result-score{font-size:28px}
}

/* Class page tab bar: confirm comfortable scroll snapping on touch */
@media(max-width:600px){
  .class-tab-bar-inner{padding:0 12px}
  .class-tab{padding:12px 12px;font-size:12.5px}
}

/* Daily quiz timer bar */
@media(max-width:375px){
  .daily-timer-bar{padding:9px 12px;font-size:12.5px}
}

/* ── 7. MISC PAGES: 404 / fallback (index.php) / blog article detail ── */
@media(max-width:480px){
  main[style*="max-width:700px"]{margin-top:60px !important}
  main[style*="max-width:700px"] h1{font-size:42px !important}
  main[style*="max-width:700px"] p{font-size:15px !important}
  main.ope-fallback-content{margin-top:32px !important;padding:0 16px !important}
  .article-body{padding:18px}
  .article-body h1{font-size:20px}
  .article-thumb{height:160px;font-size:38px}
  .article-meta-row{gap:10px;margin-bottom:14px;padding-bottom:14px}
}