/* PLANIGRAPH global UI components – v1.0.8
   Frontend only. Keeps Gutenberg editor overlays out of the editor. */

/* Entire-card navigation for components that explicitly declare themselves as link cards. */
.pg-link-card,
.pg-gutenberg-tile,
.pg-proto-product-card,
.pg-proto-choice,
.pg-proto-audience,
.pg-job-card {
  position: relative;
}

.pg-link-card:has(a),
.pg-gutenberg-tile:has(a),
.pg-proto-product-card:has(a),
.pg-proto-choice:has(a),
.pg-proto-audience:has(a),
.pg-job-card:has(a) {
  cursor: pointer;
}

/* Gutenberg stores the visible destination link inside a paragraph on many PLANIGRAPH cards.
   Stretch that one link over the whole card instead of requiring a click on the text only. */
.pg-link-card .pg-card-overlay-link,
.pg-link-card .pg-card-link,
.pg-gutenberg-tile .pg-tile-link,
.pg-proto-product-card .pg-product-link {
  position: static !important;
}

.pg-link-card .pg-card-overlay-link a,
.pg-link-card .pg-card-link a,
.pg-gutenberg-tile .pg-tile-link a,
.pg-proto-product-card .pg-product-link a,
.pg-proto-choice p:last-child a,
.pg-proto-audience .wp-block-button__link,
.pg-job-card > a:last-child {
  position: static !important;
}

.pg-link-card .pg-card-overlay-link a::after,
.pg-link-card .pg-card-link a::after,
.pg-gutenberg-tile .pg-tile-link a::after,
.pg-proto-product-card .pg-product-link a::after,
.pg-proto-choice p:last-child a::after,
.pg-proto-audience .wp-block-button__link::after,
.pg-job-card > a:last-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

.pg-link-card:focus-within,
.pg-gutenberg-tile:focus-within,
.pg-proto-product-card:focus-within,
.pg-proto-choice:focus-within,
.pg-proto-audience:focus-within,
.pg-job-card:focus-within {
  outline: 2px solid var(--pg-red, #d71920);
  outline-offset: 3px;
}

/* Global FAQ standard – canonical component.
 * v7.30.87: every normal FAQ uses the same visual rules. `pg-pilot-faq`
 * remains only as a temporary backward-compatible alias while the one-time
 * Gutenberg migration converts it to `pg-faq`.
 *
 * Reference spacing is the currently approved service FAQ: 21px on the
 * details row plus 2px on the summary itself.  This is deliberately identical
 * for service and Tore pages.
 */
main .pg-faq > .wp-block-details,
main .pg-pilot-faq > .wp-block-details {
  margin: 0 !important;
  padding: 21px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--pg-line, #d3d3d6) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

main .pg-faq > .wp-block-details:last-child,
main .pg-pilot-faq > .wp-block-details:last-child {
  border-bottom: 1px solid var(--pg-line, #d3d3d6) !important;
}

main .pg-faq > .wp-block-details > summary,
main .pg-pilot-faq > .wp-block-details > summary {
  cursor: pointer;
  list-style: none !important;
  position: relative;
  margin: 0 !important;
  padding: 2px 0 2px 34px !important;
  font-weight: 700;
  line-height: 1.35;
}

main .pg-faq > .wp-block-details > summary::-webkit-details-marker,
main .pg-pilot-faq > .wp-block-details > summary::-webkit-details-marker {
  display: none !important;
}

main .pg-faq > .wp-block-details > summary::marker,
main .pg-pilot-faq > .wp-block-details > summary::marker {
  content: "";
}

main .pg-faq > .wp-block-details > summary::before,
main .pg-pilot-faq > .wp-block-details > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--pg-red, #d71920);
  transform: translateY(-50%);
  transform-origin: 4px 50%;
  transition: transform .18s ease;
}

main .pg-faq > .wp-block-details[open] > summary::before,
main .pg-pilot-faq > .wp-block-details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

main .pg-faq > .wp-block-details > summary::after,
main .pg-pilot-faq > .wp-block-details > summary::after {
  content: none !important;
  display: none !important;
}

main .pg-faq > .wp-block-details > :not(summary),
main .pg-pilot-faq > .wp-block-details > :not(summary) {
  margin-left: 34px;
  margin-right: 0;
}

main .pg-faq > .wp-block-details > p,
main .pg-pilot-faq > .wp-block-details > p {
  padding: 0 0 8px !important;
  color: var(--pg-muted, #66666b);
  line-height: 1.65;
}

.pg-faq,
.pg-pilot-faq {
  display: block !important;
  gap: 0 !important;
  max-width: 920px;
  margin-top: 32px;
}

/* Global Gutenberg grid normalization. These containers are explicitly grid components,
   so WordPress flow block-gap margins must not offset cards 2..n. */
.wp-block-post-content .pg-card-grid > *,
.wp-block-post-content .pg-grid > *,
.wp-block-post-content .pg-tore-grid > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Global contrast contract for semantic dark/red background utilities.
   Red surfaces use opaque white text; dark surfaces use a high-contrast brand accent for eyebrows. */
.wp-block-post-content .pg-bg-red :is(p,h1,h2,h3,h4,h5,h6,li,.pg-eyebrow),
.wp-block-post-content .pg-tore-final-cta :is(p,h1,h2,h3,h4,h5,h6,li,.pg-eyebrow) {
  color: #fff !important;
}
.wp-block-post-content .pg-bg-dark .pg-eyebrow,
.wp-block-post-content .pg-tore-industry-bridge .pg-eyebrow {
  color: #ff6f72 !important;
}