/* ==========================================================================
   CCNSW Research Diagram — Frontend Styles
   All rules are scoped to .ccnsw-diagram-wrap to avoid conflicts with
   WordPress themes and page builders.
   ========================================================================== */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */

.ccnsw-diagram-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;  /* padding-top/bottom stay inside the wrapper width */
  font-family: 'Foco', Georgia, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Diagram container ───────────────────────────────────────────────────── */

.ccnsw-diagram-container {
  position: relative;
  width: min(852px, 100%);
  aspect-ratio: 1;
  flex-shrink: 0;
  margin: 0 auto;  /* centres when a max-width inline style is applied */
}

.ccnsw-diagram-container img,
.ccnsw-hotspot-wrap img {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.ccnsw-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ccnsw-ring {
  position: absolute;
  left: 12.56%;
  top:  12.21%;
  width:  74.27%;
  height: 74.27%;
}

/* ── Hotspot wrappers ────────────────────────────────────────────────────── */
/*
   Positions are set here so they can be overridden by the theme or
   child plugin CSS without touching plugin files.
   Transforms (rotate / translate) are also here for easy fine-tuning.
*/

.ccnsw-hotspot-wrap {
  position: absolute;
}

.hotspot-community    { left: 23.59%; top: 23.24%; width: 52.02%; height: 52.02%; }
.hotspot-partnerships { left: 31.65%; top:  4.93%; width: 34.93%; height:  6.51%; }
.hotspot-survivorship { left: 17.17%; top: 18.45%; width: 22.99%; height: 21.86%; }
.hotspot-prevention   { left: 61.89%; top: 19.63%; width: 22.42%; height: 49.13%; z-index: 2; transform: rotate(-0.5deg); }
.hotspot-diagnosis    { left: 20.07%; top: 58.22%; width: 43.35%; height: 26.09%; z-index: 2; transform: rotate(3.5deg); }
.hotspot-focus        { left:  5.25%; top: 49.80%; width: 25.77%; height: 41.80%; z-index: 1; }
.hotspot-unmet-needs  { left: 70.71%; top: 59.64%; width: 21.34%; height: 28.75%; z-index: 1; }

/* ── Hotspot interactive element ─────────────────────────────────────────── */

.ccnsw-hotspot {
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  outline: none;
  width: 100%;
  height: 100%;
  display: block;
}

.ccnsw-hotspot:hover,
.ccnsw-hotspot:focus-visible {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0  8px rgba(255,255,255,1.0))
    drop-shadow(0 0 18px rgba(255,255,255,0.9))
    drop-shadow(0 0 32px rgba(255,255,255,0.5));
  z-index: 3;
}

/* Subtler glow for segments that are partly behind others */
.ccnsw-hotspot[data-section="survivorship"]:hover,
.ccnsw-hotspot[data-section="survivorship"]:focus-visible,
.ccnsw-hotspot[data-section="diagnosis"]:hover,
.ccnsw-hotspot[data-section="diagnosis"]:focus-visible {
  filter:
    drop-shadow(0 0  6px rgba(255,255,255,0.7))
    drop-shadow(0 0 14px rgba(255,255,255,0.4));
}

.ccnsw-hotspot:active { transform: scale(1.02); }

.ccnsw-hotspot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
/*
  The overlay is a native <dialog> opened with showModal(). The browser renders
  it in the top layer — a special paint surface above ALL stacking contexts,
  sticky headers, page-builder transforms, and z-index values. No z-index
  fighting, no element suppression, no sticky-header glitches.

  OPEN  sequence: ::backdrop fades IN (0.5s, no delay)
                  → content slides + fades IN (0.5s, 0.15s delay)

  CLOSE sequence (exact reverse):
                  content slides + fades OUT (0.4s, no delay)
                  → ::backdrop fades OUT (0.5s, 0.3s delay)
                  → dialog.close() called at 850ms (after all transitions complete)
*/

dialog.ccnsw-overlay {
  /* Reset every browser default for <dialog> */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  color: inherit;
  /* No z-index needed — top layer renders above everything automatically */
}

/* White backdrop lives on ::backdrop so it never affects the stacking context */
dialog.ccnsw-overlay::backdrop {
  background-color: rgba(255,255,255,0);
  /* EXIT: backdrop lingers after content has gone */
  transition: background-color 0.5s ease 0.3s;
}

dialog.ccnsw-overlay.is-open::backdrop {
  background-color: rgba(255,255,255,1);
  /* ENTRY: backdrop fades in first, then content follows */
  transition: background-color 0.5s ease;
}

/* ── Overlay logo — top-left, ~150px wide ────────────────────────────────── */

.ccnsw-overlay-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  width: 150px;
  max-width: calc(50% - 60px); /* never overlaps the close button */
}

.ccnsw-overlay-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Close button — CSS-drawn × for pixel-perfect centering ─────────────── */

.ccnsw-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #0F1E64;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  color: #0F1E64;
  flex-shrink: 0;
  padding: 0;
}

.ccnsw-close-btn::before,
.ccnsw-close-btn::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.ccnsw-close-btn::before { transform: rotate(45deg); }
.ccnsw-close-btn::after  { transform: rotate(-45deg); }
.ccnsw-close-btn:hover   { background-color: #0F1E64; color: #ffffff; }

/* ── Overlay scroll container ────────────────────────────────────────────── */

.ccnsw-overlay-scroll {
  position: absolute; /* inside a full-viewport dialog — absolute fills the same area */
  inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px;
  opacity: 0;
  transform: translateY(30px);
  /* EXIT — no delay, text slides down and fades immediately */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ccnsw-overlay-scroll::-webkit-scrollbar { display: none; }

.ccnsw-overlay.is-open .ccnsw-overlay-scroll {
  opacity: 1;
  transform: translateY(0);
  /* ENTRY — slight delay so backdrop fades in first */
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

/* ── Overlay inner content ───────────────────────────────────────────────── */

.ccnsw-overlay-inner {
  max-width: 680px;
  width: 100%;
  text-align: center;
}

/* Panel title */
.ccnsw-overlay-title {
  font-family: 'Foco Black', 'Foco Bold', Georgia, sans-serif !important;
  font-size: 3.2rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.1rem !important;
  color: #0F1E64 !important;
  text-align: center !important;
  margin: 0 0 2.5rem !important;
  padding: 0 !important;
  opacity: 0;
  animation: ccnsw-fade-up 0.6s ease forwards 0.1s;
}

/* Panel body */
.ccnsw-overlay-body {
  font-family: 'Foco', Georgia, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  color: #4D4D4D;
  text-align: left;
}

/* Staggered entry animation for each direct child */
.ccnsw-overlay-body > * {
  opacity: 0;
  animation: ccnsw-fade-up 0.5s ease forwards;
}
.ccnsw-overlay-body > *:nth-child(1)  { animation-delay: 0.20s; }
.ccnsw-overlay-body > *:nth-child(2)  { animation-delay: 0.35s; }
.ccnsw-overlay-body > *:nth-child(3)  { animation-delay: 0.50s; }
.ccnsw-overlay-body > *:nth-child(4)  { animation-delay: 0.65s; }
.ccnsw-overlay-body > *:nth-child(5)  { animation-delay: 0.80s; }
.ccnsw-overlay-body > *:nth-child(6)  { animation-delay: 0.95s; }
.ccnsw-overlay-body > *:nth-child(7)  { animation-delay: 1.10s; }
.ccnsw-overlay-body > *:nth-child(8)  { animation-delay: 1.25s; }
.ccnsw-overlay-body > *:nth-child(9)  { animation-delay: 1.40s; }
.ccnsw-overlay-body > *:nth-child(10) { animation-delay: 1.55s; }

@keyframes ccnsw-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Typography inside body */
.ccnsw-overlay-body h3 {
  font-family: 'Foco Bold', Georgia, sans-serif !important;
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #0F1E64 !important;
  margin: 0.25rem 0 1rem !important;
}

.ccnsw-overlay-body p       { margin: 0 0 1.25rem !important; }
.ccnsw-overlay-body ul      { margin: 1rem 0 1.5rem !important; padding-left: 1.5rem !important; list-style-type: disc !important; }
.ccnsw-overlay-body ul ul   { margin: 0.5rem 0 !important; list-style-type: circle !important; }
.ccnsw-overlay-body ol      { margin: 1rem 0 1.5rem !important; padding-left: 1.5rem !important; list-style-type: decimal !important; }
.ccnsw-overlay-body li      { margin-bottom: 0.6rem !important; line-height: 1.8 !important; }
.ccnsw-overlay-body a       { color: #0F1E64 !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 500 !important; transition: color 0.2s ease; }
.ccnsw-overlay-body a:hover { color: #009BDC !important; }
.ccnsw-overlay-body strong  { font-weight: 700 !important; color: #4D4D4D !important; }
/* strong inside a link inherits link colour */
.ccnsw-overlay-body a strong { color: inherit !important; }

/* ── Mobile breakpoint ───────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .ccnsw-overlay-logo {
    width: 110px;
  }
}