/**
 * Mobile Premium Polish — additive + late overrides for public mobile UX.
 * Loaded LAST — desktop untouched outside these breakpoints.
 */

/* ── 1. Tap feedback — premium app-jasto press response ───────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn,
  button:not(.no-tap-fx),
  a.btn,
  .card,
  .nav-link,
  .mem-nav-item,
  .sidebar-nav a,
  .admin-header-icon,
  .public-mobile-footer a,
  .public-mobile-footer button,
  .mob-bn-item {
    transition: transform .12s ease, opacity .12s ease;
  }

  .btn:active,
  button:not(.no-tap-fx):active,
  a.btn:active,
  .mob-bn-item:active {
    transform: scale(0.97);
    opacity: 0.92;
  }

  .card:active {
    transform: scale(0.995);
  }

  .public-mobile-footer a:active,
  .public-mobile-footer button:active,
  .mem-nav-item:active {
    transform: scale(0.93);
  }

  .btn, button, a.btn, .card, .nav-link, .mem-nav-item,
  .sidebar-nav a, .public-mobile-footer a, .public-mobile-footer button,
  .mob-bn-item {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── 2. Safe-area for fixed bottom bars ───────────────────────────────── */
@supports (padding: max(0px)) {
  .public-mobile-footer,
  .mem-bottom-nav,
  .admin-mobile-bottom-nav,
  .mob-bottomnav {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  }
}

/* ── 3. Very small screens (< 380px) — extra breathing room ───────────── */
@media (max-width: 379px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .card {
    padding-left: 12px;
    padding-right: 12px;
  }

  .btn {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── 4. Smoother card elevation on mobile ─────────────────────────────── */
@media (max-width: 899.98px) {
  .card,
  .auth-card {
    transition: box-shadow .2s ease, transform .2s ease;
  }
}

/* ── 5. Prevent accidental horizontal scroll ──────────────────────────── */
@media (max-width: 899.98px) {
  html, body {
    overflow-x: clip;
  }
}

/* ── 6. Respect reduced-motion users ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  button:active,
  a.btn:active,
  .card:active,
  .public-mobile-footer a:active,
  .public-mobile-footer button:active,
  .mem-nav-item:active,
  .mob-bn-item:active {
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. PUBLIC MOBILE UX PASS (≤899.98) — high-impact fixes
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899.98px) {

  /* Single bottom nav: keep .mob-bottomnav, hide legacy duplicate */
  .public-mobile-footer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.has-mobile-footer {
    padding-bottom: 0 !important;
  }

  /* Header brand — leave room for hamburger + gutters */
  .pfl-brand-content.has-logo .pfl-brand-logo,
  .pfl-brand-logo {
    max-width: min(210px, calc(100vw - 118px)) !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .pfl-brand-area {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Touch targets ≥44px */
  .pfl-mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .pfl-top-right > li > a,
  .pfl-bell-btn,
  .pfl-dark-wrap > a,
  .pfl-top-right .pfl-lang-wrap a,
  .pfl-top-right .pfl-lang-wrap .pfl-lang-link {
    min-width: 40px !important;
    min-height: 40px !important;
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .pfl-top-right .pfl-lang-wrap a {
    font-size: 11px !important;
  }

  /* Declutter top utility on phones — Install lives in QH / PWA flow */
  .pfl-top-right .pfl-pwa-wrap,
  .pfl-top-right #topbarSearchBtn {
    display: none !important;
  }

  /* Drawer labels wrap; readable touch rows */
  body.header-v2 #mainNavV2 .nav-menu > li > a,
  body.header-v2 #mainNavV2 .nav-menu > li > a > .mnav-main-label,
  .main-nav .nav-menu > li > a,
  .main-nav .nav-menu > li > a > .mnav-main-label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }

  /* Tables must scroll horizontally, not clip */
  .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
  }

  /* Hero: one height stack + readable overlay (image text often competes) */
  .hero-inner-modern,
  .hero-slide-modern {
    height: auto !important;
    min-height: clamp(300px, 52vh, 400px) !important;
  }
  .hero-slide-modern .slider-bg,
  .slider-bg.hero-bg-modern {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
  }
  .slider-overlay,
  .hero-overlay-modern {
    background: linear-gradient(
      165deg,
      rgba(6, 40, 18, 0.78) 0%,
      rgba(10, 60, 25, 0.62) 48%,
      rgba(0, 0, 0, 0.55) 100%
    ) !important;
  }
  .hero-content-modern,
  .slider-content.hero-content-modern {
    padding: 1.15rem 1rem 2.75rem !important;
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-text-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    overflow-wrap: anywhere !important;
  }
  .hero-title-modern,
  .slider-content h1,
  .slider-content .hero-title-modern {
    font-size: clamp(1.15rem, 5.2vw, 1.45rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.55rem !important;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-subtitle-modern,
  .slider-content p,
  .slider-content .hero-subtitle-modern {
    font-size: clamp(0.82rem, 3.6vw, 0.95rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 0.9rem !important;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions-modern,
  .slider-content .hero-actions-modern {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .hero-btn-modern,
  .slider-content .btn.hero-btn-modern {
    min-height: 44px !important;
    max-width: 100%;
    z-index: 4;
  }
  /* Side arrows collide with CTA on narrow screens — dots only */
  .hero-slider .carousel-control-prev,
  .hero-slider .carousel-control-next {
    display: none !important;
  }

  /* Footer social + policy: real tap size */
  .main-footer .footer-social a,
  .footer-social a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .main-footer .footer-policy-links a,
  .footer-policy-links a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 4px !important;
  }
  .main-footer .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .main-footer .footer-links .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Legacy scroll-nav sat under bottom bar */
  body.has-bottomnav .scroll-nav {
    bottom: calc(var(--mobile-bottom-nav-h, 64px) + 18px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }

  /* Contact / public forms — full-width CTAs, less card padding */
  .contact-form-modern {
    padding: 1.25rem !important;
  }
  .ct-quick-card .btn,
  .contact-form-modern .btn,
  .section-padding .btn-sm {
    min-height: 44px !important;
  }
  .ct-quick-card .btn {
    width: 100%;
  }

  /* Notices titles wrap cleanly */
  .notice-card h3,
  .notice-card h4,
  .notice-card .notice-title,
  .notices-section .section-header h2 {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 480px) {
  .pfl-brand-content.has-logo .pfl-brand-logo,
  .pfl-brand-logo {
    max-width: min(180px, calc(100vw - 112px)) !important;
    max-height: 36px !important;
  }
  .hero-title-modern,
  .slider-content h1 {
    font-size: 1.12rem !important;
  }
  /* Top bar: keep login + lang + menu; hide bell (notices in bottom nav) */
  .pfl-top-right .pfl-bell-wrap {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. CROSS-PANEL MOBILE COMPAT (≤899.98) — unify with shell polish
   Public/Admin often hid bottom nav at 769px while shell kept padding to 900.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --mobile-bottom-nav-h: 64px;
  --pub-bottom-nav-h: var(--mobile-bottom-nav-h);
  --admin-bottom-nav-h: var(--mobile-bottom-nav-h);
  --mem-bottom-nav-h: var(--mobile-bottom-nav-h);
}

@media (max-width: 899.98px) {
  html, body {
    overflow-x: clip;
  }

  /* iOS: avoid auto-zoom on focus (needs ≥16px) */
  .form-control,
  .form-select,
  .admin-fancy-input,
  .team-filter-select,
  .vp-input,
  .afb-input,
  .afb-select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  #publicChatPanel input,
  #publicChatPanel textarea,
  .auth-card input:not([type="checkbox"]):not([type="radio"]),
  .auth-card select,
  .auth-card textarea {
    font-size: 16px !important;
  }

  /* Touch-friendly bottom nav rows */
  .mob-bn-item,
  .mp-bottom-nav a,
  .mp-bottom-nav__item,
  .mp-bn-more,
  .member-mobile-footer a,
  .member-mobile-footer button {
    min-height: 44px;
  }

  /* Tables: prefer horizontal scroll over page blowout */
  .table-responsive,
  .admin-table-card .table-responsive,
  .mem-container .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}