/* ============================================================
   Ray Bridge — wp-custom.css
   WordPress environment fixes ONLY. Never restyle approved
   components; all approved styles live in the copied master CSS.
   ============================================================ */

/* ---------- WP Admin Bar vs sticky header ----------
   The approved master has no admin bar; core pins it at the top.
   Offset the sticky header accordingly (46px mobile, 32px desktop). */
body.admin-bar .site-header { top: 46px; }
@media screen and (min-width: 783px) {
  body.admin-bar .site-header { top: 32px; }
}

/* ---------- Stage 1 fallback loop (index.php) ----------
   WP-only markup with no master equivalent. Styled with theme tokens. */
.rb-fallback-list {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.rb-fallback-list > li {
  border: 1px solid var(--rb-line);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  background: var(--rb-white);
}
.rb-fallback-list h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin: 0 0 0.35rem;
}
.rb-fallback-list h2 a { color: var(--c-heading); }
.rb-fallback-list p { margin: 0; color: var(--c-text); }

/* ============================================================
   Stage 7 — article content (Gutenberg / editor compatibility)
   ------------------------------------------------------------
   The master article body already uses `.prose` (components.css
   styles h2/h3/p/ul/ol/table/figure). These rules only bridge
   WordPress block output inside `.prose` / `.entry-content` and
   keep tables / long links / pre / iframes from overflowing the
   document. No typography redesign.
   ============================================================ */
.prose img,
.entry-content img { max-width: 100%; height: auto; }
.prose figure,
.entry-content figure { max-width: 100%; }
.prose .wp-block-image,
.prose .wp-block-table,
.entry-content .wp-block-image,
.entry-content .wp-block-table { margin: 1.4rem 0; }
.prose .wp-block-table,
.entry-content .wp-block-table { overflow-x: auto; }
.prose table,
.entry-content table { border-collapse: collapse; max-width: 100%; }
.prose td,
.prose th,
.entry-content td,
.entry-content th { border: 1px solid var(--rb-line); padding: 0.6rem 0.8rem; }
.prose a,
.entry-content a { word-break: break-word; overflow-wrap: anywhere; }
.prose pre,
.entry-content pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 1rem;
  background: var(--rb-surface);
  border: 1px solid var(--rb-line);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  word-break: break-word;
}
.prose code,
.entry-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.prose iframe,
.entry-content iframe { max-width: 100%; }
.prose .alignwide,
.prose .alignfull,
.entry-content .alignwide,
.entry-content .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }

/* ============================================================
   Stage 7 — Insights pagination (native the_posts_pagination)
   Matches the master's `.pagination-lite` chip look.
   ============================================================ */
.pagination { margin-top: 2rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.pagination .page-numbers {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  padding: 0 0.7rem;
  border: 1px solid var(--rb-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--rb-text);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--rb-blue-deep); color: #fff; border-color: var(--rb-blue-deep); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--rb-blue); color: var(--rb-blue); }

/* ============================================================
   Stage 8 — WPForms theme compatibility layer
   ------------------------------------------------------------
   Never restyles the whole plugin; only aligns inputs/selects/
   textareas/submit with Ray Bridge tokens (radius, height, spacing,
   button). No document overflow: fields stack naturally on mobile.
   ============================================================ */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
  min-height: 48px;
  border: 1px solid var(--rb-line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font: inherit;
  max-width: 100%;
}
.wpforms-container .wpforms-field textarea { min-height: 120px; }
.wpforms-container .wpforms-field { margin-bottom: 1rem; }
.wpforms-container .wpforms-field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rb-ink);
  margin-bottom: 0.3rem;
}
.wpforms-container .wpforms-submit-container { margin-top: 1.25rem; }
.wpforms-container button.wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72em 1.5em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.wpforms-container button.wpforms-submit:hover { background: var(--c-accent-hover); }
/* Two-column WPForms layouts must collapse instead of overflowing. */
.wpforms-container .wpforms-field-row,
.wpforms-container .wpforms-field-row > div {
  max-width: 100%;
}
.wpforms-container * { box-sizing: border-box; }

/* ============================================================
   RUNTIME-FIX-002 — Product quick menu sticky offset
   ------------------------------------------------------------
   The product-detail anchor nav (`.pd-anchor-nav`) is sticky, but
   the master's `top: var(--header-h-scroll)` did not account for the
   WordPress admin bar, so the sticky main header covered it when an
   admin was logged in. One unified variable drives both the nav's
   `top` and the section `scroll-margin-top`.

   Values (reuse the master's header metrics, not magic numbers):
   - base        = --header-h-scroll (62px, the shrunk sticky header)
   - admin-bar   = +46px (<=782px) / +32px (>=783px), matching the
                   header offset already applied above.
   - anchor extra= +4rem ≈ quick-nav height + breathing room.
   ============================================================ */
:root {
  --rb-sticky-header-offset: var(--header-h-scroll, 62px);
  --rb-sticky-anchor-offset: calc(var(--rb-sticky-header-offset) + 4rem);
}

body.admin-bar {
  --rb-sticky-header-offset: calc(var(--header-h-scroll, 62px) + 46px);
}
@media screen and (min-width: 783px) {
  body.admin-bar {
    --rb-sticky-header-offset: calc(var(--header-h-scroll, 62px) + 32px);
  }
}

/* Quick menu sits directly below the sticky header (never underneath it). */
.pd-anchor-nav {
  top: var(--rb-sticky-header-offset);
}

/* Anchored product sections + bottom inquiry clear the header AND the
   sticky quick menu. `scroll-margin-top` (CSS-only; no JS scrollTop math). */
.pd-section[id],
.pd-inquiry {
  scroll-margin-top: var(--rb-sticky-anchor-offset);
}

/* RUNTIME-FIX-002 — Cases filter: put Reset and "projects found" count on the
   same visual middle line (the count already uses `align-self:center`; the
   reset button was bottom-aligned by the panel's `align-items:end`). */
.case-filter-panel__reset {
  align-self: center;
}