/* ==========================================================================
   Section 8 — Native Mobile App Feel
   Stack: Bootstrap 5 + jQuery + Tabler/Flaticon icons (Jobhunt theme)
   Builds on the design tokens in global-core.css (:root / [data-theme="dark"]).
   "Mobile" = < 768px (Bootstrap md and below). Everything here is scoped so the
   desktop treatment is never affected.
   ========================================================================== */

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --jr-sheet-radius: 18px;
  --jr-action-bar-h: 64px;
}

/* 8.0 — Foundations -------------------------------------------------------- */

/* Ensure Bootstrap Icons are visible */
.bi, [class*="bi-"] {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Instant taps, no native grey/blue flash on touch */
a, button, .btn, [role="button"], .card-grid-2, .card-list-4,
.btn-apply-now, .cb-container, label.cb-container {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Safe-area aware bottom padding utility */
.pb-safe { padding-bottom: calc(1rem + var(--safe-bottom)) !important; }

/* Touch-target floor (WCAG 2.5.5 / iOS HIG) — icon-only controls on mobile */
@media (max-width: 767.98px) {
  .burger-icon,
  .theme-toggle,
  .btn-apply-now,
  .mobile-header-content-area .mobile-search i {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Hidden-scrollbar horizontal scroller utility (8.5) */
.jr-scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  padding-bottom: .25rem;
}
.jr-scroller::-webkit-scrollbar { display: none; }   /* WebKit */
.jr-scroller > * { scroll-snap-align: start; flex: 0 0 82%; }

/* 8.6 — Touch feedback (press state). Gated on reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
  .touchable,
  .btn-apply-now,
  .btn-default,
  .card-grid-2,
  .jr-fab,
  .jr-action-bar .btn {
    transition: transform .08s ease;
  }
  .touchable:active,
  .btn-apply-now:active,
  .btn-default:active,
  .card-grid-2:active,
  .jr-fab:active,
  .jr-action-bar .btn:active {
    transform: scale(.97);
  }
}

/* ==========================================================================
   8.2 — Filter bottom sheet
   ========================================================================== */

/* Floating Filter FAB — mobile only */
.jr-filter-fab {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--safe-bottom));
  z-index: 1045;                  /* above content, below offcanvas backdrop */
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: var(--accent-orange-gold, #F5A623);
  color: #1a1300;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(7, 48, 79, .25);
}
.jr-filter-fab .jr-fab-count {
  display: none;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-navy, #002D5B);
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
.jr-filter-fab.has-filters .jr-fab-count { display: inline-block; }

@media (max-width: 767.98px) {
  .jr-filter-fab { display: inline-flex; }
}

/* The bottom-sheet shell (Bootstrap offcanvas-bottom) */
#jrFilterSheet.offcanvas-bottom {
  height: auto;
  max-height: 85vh;
  border-top-left-radius: var(--jr-sheet-radius);
  border-top-right-radius: var(--jr-sheet-radius);
  background: var(--bg-white, #fff);
}
#jrFilterSheet .offcanvas-body { padding-bottom: 96px; }   /* clear sticky footer */

/* Drag-handle affordance */
.jr-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-slate-500, #94a3b8);
  opacity: .4;
  margin: 6px auto 10px;
}

/* Sticky two-button footer inside the sheet */
.jr-sheet-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: .75rem;
  padding: .75rem 1rem calc(.75rem + var(--safe-bottom));
  margin: 0 -1rem -1rem;
  background: var(--bg-white, #fff);
  border-top: 1px solid var(--border, #e2e8f2);
}
.jr-sheet-footer .btn { flex: 1; }

/* When filters are relocated into the sheet, neutralise the desktop sidebar
   chrome so they read as sheet content, not a floating card. */
#jrFilterSheet .sidebar-shadow { box-shadow: none; margin: 0; padding: 0; }

/* ==========================================================================
   8.3 — Sticky bottom action bar (Job Detail / Course Detail)
   ========================================================================== */

.jr-action-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  align-items: center;
  gap: .75rem;
  min-height: var(--jr-action-bar-h);
  padding: .6rem 1rem calc(.6rem + var(--safe-bottom));
  background: var(--bg-white, #fff);
  border-top: 1px solid var(--border, #e2e8f2);
  box-shadow: 0 -6px 24px rgba(7, 48, 79, .10);
}
.jr-action-bar .jr-action-meta {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.jr-action-bar .jr-action-meta .label {
  display: block;
  font-size: 11px;
  color: var(--text-slate-500, #64748b);
}
.jr-action-bar .jr-action-meta .value {
  font-weight: 700;
  color: var(--text-slate-900, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jr-action-bar .jr-action-cta { display: flex; gap: .5rem; align-items: center; }
.jr-action-bar .jr-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-md, 10px);
  border: 1px solid var(--border, #e2e8f2);
  color: var(--text-slate-900, #1e293b);
}

@media (max-width: 767.98px) {
  .jr-action-bar { display: flex; }
  /* Reserve space so the bar never covers the page footer / last block */
  body.jr-has-action-bar .main {
    padding-bottom: calc(var(--jr-action-bar-h) + var(--safe-bottom) + 12px);
  }
  /* Hide the bar while the in-flow CTA is on screen (no double CTA) */
  .jr-action-bar.is-hidden {
    transform: translateY(110%);
    transition: transform .2s ease;
  }
}

/* ==========================================================================
   Dark mode — Section 8 surfaces (cf. global-core.css [data-theme="dark"])
   ========================================================================== */
[data-theme="dark"] #jrFilterSheet.offcanvas-bottom,
[data-theme="dark"] .jr-sheet-footer,
[data-theme="dark"] .jr-action-bar {
  background: var(--bg-white);   /* token already flips to dark navy */
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .jr-action-bar .jr-save {
  border-color: rgba(255, 255, 255, .12);
}

/* =========================================
   NATIVE MOBILE APP FEEL & BOTTOM NAV
   ========================================= */

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-white, #ffffff);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1040;
    border-top: 1px solid var(--border-light, #e2e8f0);
    transition: transform 0.3s ease;
}

/* Hide on larger screens */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Pad the bottom of the body so content isn't hidden under the nav */
@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s ease;
    min-width: 60px;
}

.mobile-bottom-nav .nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

/* Active State */
.mobile-bottom-nav .nav-item.active {
    color: var(--brand, #0D609E);
}

.mobile-bottom-nav .nav-item.active i {
    transform: translateY(-2px);
    font-weight: 600;
}

/* Dark Mode Support */
[data-theme="dark"] .mobile-bottom-nav {
    background: var(--bg-light, #1E293B);
    border-top-color: var(--border-light, #334155);
}

[data-theme="dark"] .mobile-bottom-nav .nav-item.active {
    color: #60a5fa;
}

/* Footer Styling */
.footer-brand p {
    color: #ffffff;
    opacity: 0.9;
}

/* Social Icons - Footer */
.footer-socials {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-socials a:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.4);
    transform: translateY(-2px);
}

.footer-socials svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}