/*
 * Charlie PIK Four Page Media Fix v1.4.0
 * Scope: ONLY the four selected PIK pages.
 * Changes: images / image wrappers / content tables only.
 * Intentionally DOES NOT set width, max-width, margin, padding, typography,
 * or layout on #main-content itself or any page-level container.
 */

.cc-pik-media-fix {
  --cc-pik-table-border: rgba(15, 23, 42, 0.16);
  --cc-pik-table-head: rgba(15, 23, 42, 0.055);
  --cc-pik-table-alt: rgba(15, 23, 42, 0.025);
  --cc-pik-table-radius: 10px;
}

/* --------------------------------------------------------------------------
   IMAGE SAFETY — never change the existing #main-content container width.
   -------------------------------------------------------------------------- */

.cc-pik-media-fix #main-content :where(img:not(.avatar):not(.emoji):not(.custom-logo)) {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

.cc-pik-media-fix #main-content :where(
  .wp-block-image,
  .wp-block-gallery,
  .wp-caption,
  .wp-block-media-text__media,
  figure,
  picture
) {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Classic editor captions may have a hard-coded pixel width. */
.cc-pik-media-fix #main-content .wp-caption {
  max-width: 100% !important;
}

/* Wide/full media must respect the existing content container, not the viewport. */
.cc-pik-media-fix #main-content :where(
  .wp-block-image.alignwide,
  .wp-block-image.alignfull,
  .wp-block-gallery.alignwide,
  .wp-block-gallery.alignfull,
  figure.alignwide,
  figure.alignfull,
  .wp-caption.alignwide,
  .wp-caption.alignfull
) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/*
 * Primary content image. JS marks only the first real image inside #main-content.
 * This fixes /id/pik-2/: start exactly at the left edge of the current container
 * and fill that existing container. The container itself is never resized.
 */
.cc-pik-media-fix #main-content .cc-pik-primary-media {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.cc-pik-media-fix #main-content .cc-pik-primary-media > :where(a, picture),
.cc-pik-media-fix #main-content .cc-pik-primary-media > img,
.cc-pik-media-fix #main-content .cc-pik-primary-media :where(picture > img, a > img) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* If the actual first media node is the image itself. */
.cc-pik-media-fix #main-content img.cc-pik-primary-media {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Runtime-only fallback for a media wrapper that still overflows its container. */
.cc-pik-media-fix #main-content .cc-pik-media-overflow {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.cc-pik-media-fix #main-content .cc-pik-media-overflow :where(img, picture) {
  max-width: 100% !important;
  height: auto !important;
}

.cc-pik-media-fix #main-content :where(figcaption, .wp-caption-text, .wp-element-caption) {
  max-width: 100% !important;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   TABLES — same visual treatment on the four pages only.
   The wrapper stays at the existing content width. On small screens the table
   scrolls inside that wrapper instead of widening the page/container.
   -------------------------------------------------------------------------- */

.cc-pik-media-fix #main-content .cc-pik-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin-block: 1.5rem;
  border: 1px solid var(--cc-pik-table-border);
  border-radius: var(--cc-pik-table-radius);
  box-sizing: border-box;
}

.cc-pik-media-fix #main-content .wp-block-table > .cc-pik-table-scroll {
  margin-block: 0;
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll table {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent;
  box-sizing: border-box;
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll :where(th, td) {
  padding: 0.78rem 0.88rem;
  border: 0 !important;
  border-right: 1px solid var(--cc-pik-table-border) !important;
  border-bottom: 1px solid var(--cc-pik-table-border) !important;
  text-align: left;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll :where(th, td):last-child {
  border-right: 0 !important;
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll tr:last-child > :where(th, td) {
  border-bottom: 0 !important;
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll thead th,
.cc-pik-media-fix #main-content .cc-pik-table-scroll tr:first-child > th {
  background: var(--cc-pik-table-head);
  font-weight: 700;
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll tbody tr:nth-child(even) > :where(th, td) {
  background: var(--cc-pik-table-alt);
}

.cc-pik-media-fix #main-content .cc-pik-table-scroll:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 782px) {
  .cc-pik-media-fix #main-content .cc-pik-table-scroll table {
    min-width: 560px;
  }

  .cc-pik-media-fix #main-content .cc-pik-table-scroll :where(th, td) {
    padding: 0.7rem 0.76rem;
  }
}