/* PFOA Cat Profiles: lightweight local styles only (no external assets). */
.pfoa-cat-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  max-width: 100%;
}

.pfoa-cat-card {
  border: 0;
  border-radius: 0;
  padding: 0.25rem;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  text-align: center;
}

.pfoa-cat-card-media {
  display: block;
  max-width: 100%;
}

.pfoa-cat-card-thumb,
.pfoa-cat-card-media img {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
  display: block;
  margin: 0 auto;
}

.pfoa-cat-card-title {
  color: #000080;
  font-size: 90%;
  font-weight: 400;
  margin: 0.25rem 0 0;
  overflow-wrap: break-word;
}

.pfoa-cat-card-title a {
  color: inherit;
  text-decoration: none;
}

.pfoa-cat-card-status,
.pfoa-cat-card-members,
.pfoa-cat-card-note {
  color: #000080;
  font-size: 90%;
  margin: 0;
  overflow-wrap: break-word;
}

/* Exactly two-member pairs read as one listing: left label right-aligned,
   right label left-aligned. Narrowly scoped to pair cards only. */
.pfoa-cat-card.pfoa-cat-pair-left .pfoa-cat-card-title {
  text-align: right;
}

.pfoa-cat-card.pfoa-cat-pair-right .pfoa-cat-card-title {
  text-align: left;
}

@media (max-width: 760px) {
  .pfoa-cat-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .pfoa-cat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pfoa-cat-dialog {
  position: fixed;
  inset: 0;
  z-index: 999999;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 50px 1rem 20px;
  background: rgba(0, 0, 0, 0.70);
  color: #000080;
}

.pfoa-cat-dialog[hidden] {
  display: none;
}

.pfoa-cat-dialog-container {
  position: relative;
  width: min(966px, calc(100vw - 2rem));
  max-height: calc(100vh - 70px);
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 10px 25px 4px rgba(2, 2, 2, 0.50);
}

.pfoa-cat-dialog-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  width: 28px;
  height: 28px;
  margin: -20px -20px 0 0;
  padding: 4px;
  border: 0;
  border-radius: 42px;
  color: #fff;
  background: rgba(49, 91, 124, 0.80);
  font-family: inherit;
  font-size: 15px;
  line-height: 15px;
  cursor: pointer;
}

.pfoa-cat-dialog-body {
  clear: both;
  max-width: 100%;
  outline: 0;
}

.pfoa-cat-profile {
  max-width: 100%;
  overflow-wrap: break-word;
  color: #000080;
}

.pfoa-cat-profile-status-pending {
  color: #000080;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.pfoa-cat-profile::after {
  content: "";
  display: table;
  clear: both;
}

/* Templated profiles only: .pfoa-cat-profile-image exists solely in
   pfoa_cat_render_templated_profile_html(); legacy markup has no such
   wrapper, so this cannot affect migrated profiles. Small left-floated
   Card Image (max 264x264, aspect preserved, no crop); description text
   wraps beside then full-width beneath; gallery/video clear below. */
.pfoa-cat-profile-image {
  float: left;
  max-width: min(264px, 100%);
  margin: 0 20px 14px 0;
}

.pfoa-cat-profile-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(264px, 100%);
  max-height: 264px;
}

.pfoa-cat-profile-video {
  clear: both;
}

.pfoa-cat-profile-members {
  list-style: disc;
  margin-left: 1.25rem;
  padding-left: 0;
}

.pfoa-cat-profile-description {
  color: #000080;
  font-size: 18px;
  line-height: 1.2;
}

.pfoa-cat-profile-description .pfoa-cat-short-description,
.pfoa-cat-profile-description .pfoa-cat-long-description {
  margin-top: 20px;
}

.pfoa-cat-profile-description img {
  max-width: 100%;
  height: auto;
}

.pfoa-cat-profile-description img.alignleft {
  float: left;
  margin: 0 20px 12px 0;
}

.pfoa-cat-profile-description iframe,
.pfoa-cat-profile-description video {
  max-width: 100%;
}

.pfoa-cat-profile-description::after {
  content: "";
  display: table;
  clear: both;
}

/* Native WordPress gallery markup; Photobox binds to the descendant links. */
.pfoa-cat-gallery {
  clear: both;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 12px 0;
}

.pfoa-cat-gallery .gallery-item {
  width: 20%;
  margin: 0;
  padding: 0.25rem;
  box-sizing: border-box;
}

.pfoa-cat-gallery .gallery-icon {
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px;
  box-sizing: border-box;
}

.pfoa-cat-gallery .gallery-icon a {
  display: block;
}

.pfoa-cat-gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
}

.pfoa-cat-gallery .gallery-caption {
  color: #000080;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 600px) {
  .pfoa-cat-dialog {
    padding: 20px 10px;
  }

  .pfoa-cat-dialog-container {
    width: 100%;
    max-height: calc(100vh - 40px);
    padding: 18px;
    border-radius: 3px;
  }

  .pfoa-cat-dialog-close {
    margin: -12px -12px 0 0;
  }

  .pfoa-cat-profile-description {
    font-size: 16px;
  }

  .pfoa-cat-profile-description img.alignleft {
    float: none;
    display: block;
    margin: 0 auto 12px;
  }

  .pfoa-cat-profile-image {
    float: none;
    max-width: 100%;
    margin: 0 auto 12px;
  }

  .pfoa-cat-profile-image img {
    margin: 0 auto;
    max-width: 100%;
  }
}

.pfoa-cat-admin-preview {
  display: block;
  margin: 8px 0;
  font-size: 0;
  line-height: 0;
}

.pfoa-cat-admin-preview::after {
  content: "";
  display: table;
  clear: both;
}

.pfoa-cat-admin-item {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  margin: 0 6px 6px 0;
  font-size: 14px;
  line-height: normal;
  cursor: move;
  cursor: grab;
}

.pfoa-cat-admin-item:active {
  cursor: grabbing;
}

.pfoa-cat-admin-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
  cursor: move;
  cursor: grab;
}

.pfoa-cat-admin-thumb:active {
  cursor: grabbing;
}

.pfoa-cat-admin-preview .ui-sortable-placeholder {
  display: inline-block;
  vertical-align: top;
  margin: 0 6px 6px 0;
  width: 100px;
  min-height: 130px;
  box-sizing: border-box;
  border: 2px dashed #2271b1;
  background: rgba(34, 113, 177, 0.08);
  visibility: visible !important;
}

.pfoa-cat-admin-preview .ui-sortable-helper {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  opacity: 0.9;
}

.pfoa-cat-admin-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  margin: 0;
  max-width: none;
}

.pfoa-cat-admin-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  text-align: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.pfoa-cat-admin-thumb-remove:hover,
.pfoa-cat-admin-thumb-remove:focus {
  background: #000;
}

.pfoa-cat-admin-card {
  display: block;
  width: 100%;
  margin: 4px 0 2px;
  font-size: 12px;
  line-height: normal;
  white-space: nowrap;
}

.pfoa-cat-admin-card input {
  margin: 0 4px 0 0;
  vertical-align: middle;
}

.pfoa-cat-admin-thumb-caption {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: normal;
}

/* PFOA Cat Profiles 0.1.25 admin only (Test): compact top-row
   [ Cat Name ] [ Cat ID ]. Scoped to pfoa-cat edit screens via body.post-type-pfoa_cat
   so frontend cards/dialogs/gallery are untouched. Cat Name is the native WP
   title (native light-gray prompt remains); Cat ID uses a light-gray
   placeholder with an accessible hidden label (no visible label above, no
   required asterisk/marker, no help text under). Cat Name constrained (not
   full width); Cat ID compact; horizontal alignment with responsive
   stacking. Identity errors render OUTSIDE the compact row and never move
   Cat ID relative to Cat Name. */
body.post-type-pfoa_cat #post-body-content:has(> #pfoa-cat-top-id-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 18px;
}
body.post-type-pfoa_cat #post-body-content > #titlediv {
  flex: 0 1 560px;
  max-width: 560px;
  min-width: min(100%, 360px);
  order: 1;
}
body.post-type-pfoa_cat #post-body-content > #pfoa-cat-top-id-row {
  flex: 0 0 110px;
  width: 110px;
  margin: 0;
  padding: 0;
  order: 2;
}
body.post-type-pfoa_cat #titlediv #title,
body.post-type-pfoa_cat #pfoa-cat-member-id-single {
  box-sizing: border-box;
  height: 42px;
}
body.post-type-pfoa_cat #pfoa-cat-member-id-single {
  display: block;
  width: 100%;
  margin: 0;
}
body.post-type-pfoa_cat #post-body-content:has(> #pfoa-cat-top-id-row) > :not(#titlediv):not(#pfoa-cat-top-id-row):not(#pfoa-cat-identity-error) {
  flex-basis: 100%;
  order: 10;
  min-width: 0;
}
/* Identity error lives outside the compact row: full-width stripe below the
   Name/ID row; hidden by default; never participates in the Name/ID flex
   alignment so it cannot move Cat ID relative to Cat Name. */
body.post-type-pfoa_cat #pfoa-cat-identity-error {
  flex: 1 1 100%;
  order: 9;
  box-sizing: border-box;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 4px solid #d63638;
  background: #fcf0f1;
  color: #1d2327;
  font-size: 13px;
  line-height: 1.5;
}
body.post-type-pfoa_cat #pfoa-cat-identity-error[hidden] {
  display: none;
}
@media screen and (max-width: 782px) {
  body.post-type-pfoa_cat #post-body-content:has(> #pfoa-cat-top-id-row) {
    overflow-x: hidden;
  }
  body.post-type-pfoa_cat #post-body-content > #titlediv {
    flex-basis: 100%;
    max-width: 100%;
  }
  body.post-type-pfoa_cat #post-body-content > #pfoa-cat-top-id-row {
    flex-basis: 110px;
    max-width: 100%;
  }
}

/* PFOA Cat Profiles 0.1.39 admin only: established/immutable Cat ID reads as locked (visual only, no behavior change). Scoped strictly to locked Cat ID controls so new/unestablished IDs keep the editable white field and unrelated readonly fields are untouched. */
body.post-type-pfoa_cat #pfoa-cat-member-id-single[readonly].pfoa-cat-locked,
body.post-type-pfoa_cat #pfoa-cat-member-ids[readonly]:not([disabled]) {
  background-color: #f0f0f1;
  color: #3c434a;
  cursor: default;
}

/* PFOA Cat Profiles 0.1.41 admin only (DEV): Adopted side-box alignment.
   Narrowly scoped to the pfoa_cat edit screen via body.post-type-pfoa_cat
   plus the box id, so general WP admin layout is untouched. Keeps the box
   compact at the top of the right sidebar, level with the Photos box in
   the main column. */
body.post-type-pfoa_cat #pfoa-cat-adopted .inside {
  margin-top: 6px;
  margin-bottom: 6px;
}
body.post-type-pfoa_cat #pfoa-cat-adopted .inside > p {
  margin: 0;
}