/* Shared mobile overrides for Whilo pages */

@media (max-width: 968px) {
 .header-top,
 .header-container,
 .section-bar,
 .footer-content,
 .top-inner {
 padding-left: 16px !important;
 padding-right: 16px !important;
 }

 .header-top {
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center !important;
 }

 .nav-menu,
 .user-menu {
 flex-wrap: wrap;
 justify-content: center;
 }

 .stats-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .admin-sub-nav {
 flex-wrap: wrap;
 }
}

@media (max-width: 768px) {
 nav {
 display: flex !important;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 }

 .header-container {
 flex-wrap: wrap;
 gap: 10px;
 justify-content: center !important;
 }

 .logo,
 .logo a {
 width: 100%;
 justify-content: center;
 }

 .whilo-nav-container {
 flex-wrap: wrap;
 gap: 12px;
 }

 .whilo-mobile-menu-btn {
 display: none !important;
 }

 .whilo-nav-links {
 display: flex !important;
 flex-wrap: wrap;
 width: 100%;
 justify-content: center;
 gap: 10px 16px !important;
 }

 .whilo-nav-cta {
 width: 100%;
 justify-content: center;
 flex-wrap: wrap;
 }

 .hero,
 .main-content,
 .dashboard-content,
 .shell {
 padding-left: 16px !important;
 padding-right: 16px !important;
 }

 .hero h1,
 .hero-content h1,
 .whilo-hero h1,
 .page-header h1 {
 font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
 line-height: 1.12;
 }

 .hero p,
 .whilo-hero-subtitle {
 font-size: 0.98rem !important;
 }

 .footer-content {
 flex-direction: column !important;
 align-items: center;
 text-align: center;
 gap: 16px;
 }

 .footer-links,
 .footer-nav {
 width: 100%;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 12px !important;
 }

 .data-table {
 min-width: 640px;
 }

 .table-wrap,
 .advance-table-wrap,
 .whilo-advance-panel {
 overflow-x: auto !important;
 -webkit-overflow-scrolling: touch;
 }

 main [style*="grid-template-columns"] {
 grid-template-columns: 1fr !important;
 }

 .toc ul {
 columns: 1 !important;
 }

 .cookie-pref-row {
 flex-direction: column;
 align-items: flex-start;
 }
}

@media (max-width: 480px) {
 .top-bar,
 .whilo-dev-bar,
 .whilo-dev-top {
 font-size: 11px !important;
 line-height: 1.45;
 padding: 8px 10px !important;
 }

 .dev-tag {
 font-size: 9px !important;
 padding: 3px 8px !important;
 }

 .header-top {
 padding-top: 10px !important;
 padding-bottom: 10px !important;
 }

 .nav-menu a,
 nav a,
 .nav-dropdown-toggle {
 font-size: 12px !important;
 padding: 6px 9px !important;
 }

 .stats-grid {
 grid-template-columns: 1fr !important;
 }

 .btn,
 .btn-primary,
 .btn-sm,
 .whilo-btn-primary,
 .whilo-btn-secondary {
 width: 100%;
 justify-content: center;
 }

 .scroll-to-top {
 right: 14px !important;
 bottom: 14px !important;
 }
}