/* Dev-only overlay for the brand grid (see brand-grid.css). Never
   shipped enqueued on production — gate behind WP_DEBUG.

   Draws thin lines at each of the 7 column boundaries (6 columns) +
   the 3 row boundaries (top/middle/bottom, same --theme-grid-row-top /
   --theme-grid-row-bottom used by .brand-grid), so you can check
   content against the grid without filled bands getting in the way.

   Toggle by adding .show-grid to <body> — pair with grid-debug.js to
   bind that to the "G" key. */

body.show-grid::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  margin: var(--theme-section-padding);
  background-image:
    linear-gradient(
      to right,
      rgb(255 0 0 / 40%) 0, rgb(255 0 0 / 40%) 1px, transparent 1px,
      transparent calc((100% / 6) * 1 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 1 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 1), transparent calc((100% / 6) * 1),
      transparent calc((100% / 6) * 2 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 2 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 2), transparent calc((100% / 6) * 2),
      transparent calc((100% / 6) * 3 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 3 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 3), transparent calc((100% / 6) * 3),
      transparent calc((100% / 6) * 4 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 4 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 4), transparent calc((100% / 6) * 4),
      transparent calc((100% / 6) * 5 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 5 - 1px), rgb(255 0 0 / 40%) calc((100% / 6) * 5), transparent calc((100% / 6) * 5),
      transparent calc(100% - 1px), rgb(255 0 0 / 40%) calc(100% - 1px), rgb(255 0 0 / 40%) 100%
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--theme-grid-row-top) - 1px), rgb(255 0 0 / 40%) calc(var(--theme-grid-row-top) - 1px), rgb(255 0 0 / 40%) var(--theme-grid-row-top), transparent var(--theme-grid-row-top),
      transparent calc(100% - var(--theme-grid-row-bottom) - 1px), rgb(255 0 0 / 40%) calc(100% - var(--theme-grid-row-bottom) - 1px), rgb(255 0 0 / 40%) calc(100% - var(--theme-grid-row-bottom)), transparent calc(100% - var(--theme-grid-row-bottom))
    );
}