/* ==========================================================================
   WatDoUKnow — app-like mobile polish
   Paste into: Blocksy > Customizer > Custom CSS (alongside the others)
   Sitewide — not scoped to a wrapper, since tap feedback and safe-area
   handling need to apply to the whole page, not just one template.
   ========================================================================== */

/* ---------- Kill the grey tap-flash Android/Chrome show on every link ----------
   This one change alone removes a huge amount of "this is a website" feel. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Smooth, native-feeling scrolling ---------- */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
body {
  overscroll-behavior-y: contain; /* stops the whole page "rubber-banding" past the top/bottom on iOS, which reads as janky rather than native */
}

/* ---------- Safe-area support for notched/pill-camera phones ----------
   Anything pinned to the very top or bottom needs this or it sits under
   the notch/home-indicator on iPhone. The mobile tab bar already has this
   from earlier — this extends it to the sticky header too. */
.ct-header, header {
  padding-top: env(safe-area-inset-top, 0);
}

/* ---------- Tap feedback on every interactive card/button ----------
   :active alone doesn't reliably fire on iOS Safari without SOME touch
   listener existing on the page — see wdk-app-interactions.js, a few
   lines that make :active actually work on iOS. Once that's in place,
   these rules give every card a satisfying, fast press-down feel. */
.qcard, .cat-tile, .format-card, .badge-tile, .start-chip, .format-chip,
.filter-chip, .other-cat-chip, .empty-chip, .tabbar-item, .icon-btn,
.wdk-badge-tile {
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s ease;
}
.qcard:active, .cat-tile:active, .format-card:active, .badge-tile:active,
.wdk-badge-tile:active {
  transform: scale(.96);
}
.start-chip:active, .format-chip:active, .filter-chip:active,
.other-cat-chip:active, .empty-chip:active, .tabbar-item:active,
.icon-btn:active {
  transform: scale(.9);
}
.daily-cta, .cta, .btn-random, .lo-cta, .empty-cta, button {
  transition: transform .1s ease;
}
.daily-cta:active, .cta:active, .btn-random:active, .lo-cta:active,
.empty-cta:active, button:active {
  transform: scale(.95);
}

/* ---------- Minimum comfortable touch target size ----------
   Apple/Google both recommend ~44px minimum. Several small elements
   (icon buttons, format chips) are close but not quite there on mobile —
   this pads the tap area without changing the visible size. */
@media (max-width: 900px) {
  .icon-btn, .share-btn, .tabbar-item, .page-numbers {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---------- Smooth cross-page transitions (View Transitions API) ----------
   Modern Chrome/Edge/Android WebView support this with just CSS — no JS
   framework, no SPA rewrite needed. Navigating between pages cross-fades
   instead of a hard white flash, which is most of what makes browsing
   feel "app-like" rather than "website-like." Safari/Firefox currently
   ignore this rule harmlessly — those browsers just keep their normal
   page-load behavior, nothing breaks. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: wdkFadeOut .15s ease forwards;
}
::view-transition-new(root) {
  animation: wdkFadeIn .18s ease backwards;
}
@keyframes wdkFadeOut { to { opacity: 0; } }
@keyframes wdkFadeIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Skeleton loading shimmer ----------
   For future use once category/search filtering goes AJAX-based (see
   BUILD-GUIDE's "not done yet" list) — add class="wdk-skeleton" to a
   placeholder div the same size as a .qcard while content loads, instead
   of a blank gap or a spinner. Native apps almost never show spinners for
   list content anymore; this is the modern equivalent. */
.wdk-skeleton {
  position: relative;
  overflow: hidden;
  background: #F1F1F5;
  border-radius: 16px;
}
.wdk-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: wdkShimmer 1.3s ease-in-out infinite;
}
@keyframes wdkShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- Install banner (paired with wdk-app-shell.php) ---------- */
.wdk-install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  z-index: 70;
  background: #12172B;
  color: #fff;
  border-radius: 16px;
  padding: 14px 14px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 40px -12px rgba(18,23,43,.5);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  font-family: 'Poppins', sans-serif;
}
.wdk-install-banner.show {
  transform: translateY(0);
  opacity: 1;
}
.wdk-install-icon { font-size: 24px; flex-shrink: 0; }
.wdk-install-text { flex: 1; min-width: 0; }
.wdk-install-text b { display: block; font-size: 13.5px; }
.wdk-install-text span { font-size: 11.5px; color: #AEB4D6; }
.wdk-install-btn {
  background: #E8A23B; color: #fff; border: none;
  padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 12.5px;
  flex-shrink: 0; cursor: pointer;
}
.wdk-install-dismiss {
  background: none; border: none; color: #7C82A8; font-size: 15px;
  padding: 4px; flex-shrink: 0; cursor: pointer; min-width: 32px; min-height: 32px;
}

/* Body has this class added once has_wdk_tabbar fires — nudge the install
   banner up above the tab bar on mobile so they don't overlap. */
body.has-wdk-tabbar .wdk-install-banner {
  bottom: calc(76px + env(safe-area-inset-bottom, 0));
}

@media (min-width: 901px) {
  .wdk-install-banner { display: none; } /* desktop install prompts belong in the browser's own UI, not a custom banner */
}