/* Only affects the logo modal and the badge cursor; no site color changes */

/* make the round badge show it's clickable */
.brand-badge { cursor: zoom-in; }

/* lock page scroll when modal is open */
body.ph-no-scroll { overflow: hidden; }

/* modal shell */
.ph-logo-modal {
  position: fixed;
  inset: 0;
  display: none;                 /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.ph-logo-modal.show { display: flex; }
.ph-logo-modal[aria-hidden="true"] { display: none; }

.ph-logo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}

/* modal content card */
.ph-logo-card {
  position: relative;
  z-index: 1;
  width: min(900px, 92vw);
  background: #0f1219;              /* local to modal */
  border: 1px solid #222838;        /* local to modal */
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* close button */
.ph-logo-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #2a2f3f;
  background: #141827;
  color: #e9eefc;
  cursor: pointer;
}

/* layout inside card */
.ph-logo-grid { display: grid; gap: 14px; }

/* --- Mockup-style frame for the logo ---------------------------------- */
.ph-logo-frame {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px;
  background: #0b0f18;
  border: 1px solid #222838;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* White circular disk BEHIND the image (so the image is not cropped) */
.ph-logo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(520px, 80vw);   /* disk diameter */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* The logo image itself: no rounding, no padding, no background */
.ph-logo-frame img {
  position: relative;
  z-index: 1;
  width: min(440px, 68vw);   /* ~85% of the disk so full logo shows */
  height: auto;
  object-fit: contain;
  border-radius: 0;          /* important: do NOT mask the image */
  padding: 0;                /* important: prevents inner crop */
  background: transparent;
  box-shadow: none;
}

/* caption + CTAs */
.ph-logo-caption { display: grid; gap: 8px; }
.ph-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ph-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #2a2f3f;
  background: #141827;
  color: inherit; text-decoration: none;
}
.ph-cta:hover { background: #1a2130; }