/* GitelCare app-feel layer. Mpower Sourcing, 2026-09-04.
   Loaded after gc-mobile.css. Pure CSS, no layout changes on desktop.
   Purpose: make page-to-page navigation and taps feel like a native app.
   Revert: delete this file (and the enqueue in gc-progressive-load.php). */

/* 1. Cross-document view transitions: pages fade/slide into each other
      instead of flashing white. Chrome 126+, Edge, Safari 18.2+. Others ignore it. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: gc-out 180ms cubic-bezier(.2,.7,.2,1) both; }
  ::view-transition-new(root) { animation: gc-in  220ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes gc-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes gc-in  { from { opacity: 0; transform: translateY(8px); } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* 2. Instant tap response: no 300ms click delay, no grey flash, no text-select on press. */
html { -webkit-text-size-adjust: 100%; }
a, button, [role="button"], input[type="submit"], .dt-btn, .vc_btn3, .menu-item > a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* 3. Press feedback: buttons and menu rows visibly react on touch. */
@media (hover: none) and (pointer: coarse) {
  a.dt-btn:active, .vc_btn3:active, button:active, input[type="submit"]:active,
  .modal-trigger:active, .mobile-main-nav a:active, .sub-nav a:active, nav a:active {
    transform: scale(.985);
    filter: brightness(.94);
    transition: transform 80ms ease, filter 80ms ease;
  }
}

/* 4. Scrolling: native momentum, no rubber-band bleed under fixed headers,
      and a gentle scroll-padding so anchor jumps do not hide under the header. */
html, body { overscroll-behavior-y: none; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.mobile-main-nav, .dt-mobile-menu, .modal { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* 5. Images: no layout jump while lazy images arrive. */
img[loading="lazy"] { background: #f3f4f6; }
img { height: auto; }

/* 6. Focus that is visible for keyboard users, invisible for mouse/touch. */
:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* 7. Skeleton-free "already there" feel: reserve the header height so the
      page never shifts when the sticky header initialises. */
@media (max-width: 1023px) {
  .masthead, .dt-mobile-header { min-height: 64px; }
}

/* 8. Small phones (iPhone SE/mini, 375px): keep logo and Start here on one row.
      Jordan's Tailwind build marks its utilities !important inside @layer utilities,
      and layered !important beats unlayered !important, so this lives in the same layer. */
@layer utilities {
  @media (max-width: 420px) {
    header .justify-between.gap-6.py-4 { gap: 10px !important; flex-wrap: nowrap !important; }
    header button.bg-accent.px-5 { padding-left: 14px !important; padding-right: 14px !important; gap: 10px !important; }
    header .shrink-0 img { height: 1.6rem !important; width: auto !important; }
  }
}