/* /public/css/base/utilities.css */

/*
  Visually hide an element, but leave it available for screen readers.
  Useful for accessibility.
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* Text alignment utilities */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  
  /* Display utilities */
  .d-block { display: block; }
  .d-flex { display: flex; }
  .d-none { display: none; }

  /*
    Safe-area utilities for mobile-app feel.

    iOS notch + home-indicator clearance. Use these on full-bleed fixed
    elements (mobile headers, bottom tab bars, sheet-style modals) so
    nothing renders under the notch or behind the home indicator.

    Per design-system-spec.md §4 (mobile composition).
  */
  .safe-area-pad-top    { padding-top:    env(safe-area-inset-top,    0px); }
  .safe-area-pad-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .safe-area-pad-left   { padding-left:   env(safe-area-inset-left,   0px); }
  .safe-area-pad-right  { padding-right:  env(safe-area-inset-right,  0px); }

  /* Convenience: add safe-area padding on all four edges of a full-bleed
     container. Most common use is on a fixed bottom bar or a sheet
     modal. */
  .safe-area-pad-all {
    padding-top:    env(safe-area-inset-top,    0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left,   0px);
    padding-right:  env(safe-area-inset-right,  0px);
  }

/* ============================================================
 * Global click loader (2026-05-21, tightened 2026-05-22)
 *
 * The .cp-click-loading class is applied by the global handler in
 * base_members.twig to any anchor that the user just clicked AND that
 * is about to navigate (modal-opening anchors skipped via
 * requestAnimationFrame + defaultPrevented gating). Fills the visual
 * gap between click and unload so slow-network users (Indian 3G/4G,
 * in-app webviews, etc.) don't rage-click.
 *
 * iOS-native pattern (founder requirement): dim the spot the user
 * tapped, block further clicks, and let the browser's own URL-bar
 * progress indicator handle the global "page loading" signal. NO
 * inline spinner glyph appended to the anchor (the earlier ::after
 * approach inflated card height in flex layouts and sat awkwardly in
 * narrow sidebar pills — both founder-screenshotted regressions on
 * 2026-05-22). NO custom page-top progress bar (not iOS-native; would
 * duplicate the browser's URL-bar indicator and feel "web-y" in PWA
 * standalone mode).
 *
 * Affordance is intentionally minimal:
 *   1. The anchor dims to opacity 0.7 (soft, native-button-feel).
 *   2. cursor switches to `wait`.
 *   3. pointer-events: none blocks a second click landing during the
 *      navigation window.
 *
 * 30-second safety timeout (JS-side) removes the class if the page
 * never navigates. `pageshow` listener also strips the class on
 * bfcache restore so the link is never locked after Back-navigation.
 *
 * To strengthen the tap-down moment site-wide, the follow-up scope is
 * a :active-state audit + iOS-native instant-press-dim per
 * design-and-ux.md, NOT a top progress bar.
 * ============================================================ */

.cp-click-loading {
    pointer-events: none;
    cursor: wait;
    opacity: 0.7;
}