/* debug.css  —  ONEMOBILE layout helpers
   Toggle via URL ?debug=1 or Alt+D (Option+D on Mac)
   Nothing here ships to users; it’s disabled by default. */

/* ===== GLOBAL GRID (screen overlay) ===== */
.debug-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  /* 100px grid with 10px minor ticks */
  background:
    repeating-linear-gradient(
      to right,
      rgba(0, 140, 255, .08) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      to right,
      rgba(0, 140, 255, .18) 0,
      rgba(0, 140, 255, .18) 1px,
      transparent 1px 100px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 140, 255, .08) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 140, 255, .18) 0,
      rgba(0, 140, 255, .18) 1px,
      transparent 1px 100px
    );
}

/* ===== PER-PAGE GUIDES (hero logo) ===== */
/* Uses your existing CSS variables; adjust them live in DevTools → :root */
.hero::before,
.hero::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index: 9998;
}
.hero::before { /* horizontal axis (center line) */
  top: var(--hero-logo-center-y);
  left: 0; right: 0;
  border-top: 1px dashed rgba(255, 60, 0, .65);
}
.hero::after {  /* vertical guide pair (left/right bounds) */
  top: 0; bottom: 0;
  left: var(--hero-logo-left);
  width: var(--hero-logo-width);
  border-left: 1px dashed rgba(0, 200, 120, .65);
  border-right: 1px dashed rgba(0, 200, 120, .65);
}

/* Small crosshair where the box center lands (for sanity-checks) */
.hero .debug-cross {
  position:absolute;
  left: calc(var(--hero-logo-left) + var(--hero-logo-width) / 2 - 6px);
  top:  calc(var(--hero-logo-center-y) - 6px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255, 60, 0, .9);
  box-shadow: 0 0 0 3px rgba(255, 60, 0, .25);
  pointer-events: none;
  z-index: 9999;
}

/* ===== OPTIONAL: box outlines to see layout boxes quickly ===== */
* { outline: 1px dashed rgba(0, 128, 255, .12); outline-offset: -1px; }
.header, .hero, .section, .footer { outline-color: rgba(255, 120, 0, .25); }

/* Debug badge (bottom-left) so you always know it’s ON) */
.debug-badge {
  position: fixed; left: 10px; bottom: 10px;
  z-index: 10000; pointer-events: none;
  background: rgba(0,0,0,.55); color:#fff; font: 12px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 6px 8px; border-radius: 8px;
  letter-spacing: .3px;
}