/* ═══════════════════════════════════════════════════════════════════
   Safe System diagram — interactive SVG shortcode styles
   All selectors are scoped under .safe-system-diagram so they cannot
   collide with the surrounding theme or Elementor styles.
   ═══════════════════════════════════════════════════════════════════ */

.safe-system-diagram,
.safe-system-diagram *,
.safe-system-diagram *::before,
.safe-system-diagram *::after { box-sizing: border-box; }

.safe-system-diagram {
  width: 100%;
  display: flex;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.safe-system-diagram .ssd-wrap { width: 100%; max-width: 1480px; position: relative; }

/* The aspect-ratio is load-bearing: JS swaps the SVG viewBox between
   desktop (16:9) and a mobile crop (~1:1) at runtime, which changes the
   SVG's intrinsic height after the browser/Elementor has already laid
   out the page. Setting an explicit aspect-ratio (and overriding it in
   the mobile media query below) means the box height is correct on
   first paint, so the surrounding container measures the right size and
   the next section doesn't overlap the diagram. */
.safe-system-diagram .ssd-diagram {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1920 / 1080;
}

/* Visually hidden but available to assistive tech */
.safe-system-diagram .ssd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Interactive overlay segments */
.safe-system-diagram .ssd-seg {
  cursor: pointer;
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  transition: fill 0.18s ease, stroke-width 0.12s ease;
  outline: none;
}
.safe-system-diagram .ssd-seg:hover { fill: rgba(255, 255, 255, 0.18); }

/* Visible keyboard focus — strong dashed outline drawn as a stroke
   so it follows the segment's actual shape (paths, circles, rects). */
.safe-system-diagram .ssd-seg:focus-visible {
  fill: rgba(255, 255, 255, 0.18);
  stroke: #ffd400;
  stroke-width: 5;
  stroke-dasharray: 8 6;
}

/* Linkage highlights — used to visually emphasise which Safe System
   elements are related. Two classes drive the same visual:
     .ssd-highlighted — applied/removed on hover/focus of any
                        .ssd-show-{key} trigger (transient).
     .ssd-pinned      — applied/removed based on URL hash so a link
                        with href="#ssd-diagram-svg" can pin the
                        highlight after scrolling to the diagram.
   Kept on separate classes so hover-mouseleave doesn't accidentally
   clear the URL-pinned state. Mirrors the segment's cursor-hover
   effect for consistent visual language. */
.safe-system-diagram .ssd-seg.ssd-highlighted,
.safe-system-diagram .ssd-seg.ssd-pinned {
  fill: rgba(255, 255, 255, 0.18);
}

/* Focus rings for the HTML controls */
.safe-system-diagram .ssd-m-btn:focus-visible,
.ssd-overlay .ssd-close-btn:focus-visible,
.ssd-overlay .ssd-read-more:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(2, 21, 35, 0.65);
}

@media (prefers-reduced-motion: reduce) {
  .ssd-overlay .ssd-modal { animation: none; }
  .safe-system-diagram .ssd-seg,
  .safe-system-diagram .ssd-m-btn,
  .ssd-overlay .ssd-read-more,
  .ssd-overlay .ssd-close-btn { transition: none; }
}

/* Mobile groups — hidden on desktop */
.safe-system-diagram .ssd-m-top,
.safe-system-diagram .ssd-m-bottom { display: none; }

/* Popup overlay (rendered as a sibling of .safe-system-diagram but
   styled here so the shortcode owns everything). */
.ssd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 21, 35, 0.55);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  padding: 16px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.ssd-overlay.open { display: flex; }

.ssd-overlay .ssd-modal {
  background: #fff;
  border-radius: 0 0 18px 18px;
  padding: 38px 44px 34px;
  max-width: 540px;
  width: 100%;
  /* Cap the modal height to the viewport (allowing for the overlay's
     16px padding on each side) so it never extends off-screen on long
     content. The inner <p> becomes the scrollable region — see below. */
  max-height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  animation: ssd-popIn 0.22s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
}

@keyframes ssd-popIn {
  from { transform: scale(0.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.ssd-overlay .ssd-modal-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
}

.ssd-overlay .ssd-modal h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #021523;
  margin: 8px 0 14px;
  padding-right: 30px;
  line-height: 1.3;
  flex-shrink: 0;
}

/* The text area is the scroll region. flex: 1 1 auto lets it absorb the
   remaining modal height; min-height: 0 is the magic value that allows
   a flex child to actually shrink below its content height (without it
   the modal stretches indefinitely instead of scrolling internally).
   The container is a <div> so the ACF WYSIWYG output (which can contain
   <p>, <ul>, <img>, etc.) is rendered as legal HTML. */
.ssd-overlay .ssd-modal-text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #2c3e50;
  margin-bottom: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Small right padding so text doesn't sit flush against the scrollbar. */
  padding-right: 6px;
  /* Subtle scrollbar styling so it doesn't dominate the modal visually. */
  scrollbar-width: thin;
  scrollbar-color: rgba(2, 21, 35, 0.25) transparent;
}
.ssd-overlay .ssd-modal-text::-webkit-scrollbar { width: 8px; }
.ssd-overlay .ssd-modal-text::-webkit-scrollbar-track { background: transparent; }
.ssd-overlay .ssd-modal-text::-webkit-scrollbar-thumb {
  background: rgba(2, 21, 35, 0.25);
  border-radius: 4px;
}
.ssd-overlay .ssd-modal-text:focus-visible {
  outline: 2px solid #ffd400;
  outline-offset: 2px;
}

/* Rich content (ACF WYSIWYG output) inside the modal text region.
   Trim leading/trailing margins so the container's own spacing isn't
   doubled up by the first/last child. */
.ssd-overlay .ssd-modal-text > *:first-child { margin-top: 0; }
.ssd-overlay .ssd-modal-text > *:last-child  { margin-bottom: 0; }

.ssd-overlay .ssd-modal-text p { margin: 0 0 16px; }

.ssd-overlay .ssd-modal-text ul,
.ssd-overlay .ssd-modal-text ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}
.ssd-overlay .ssd-modal-text li { margin-bottom: 6px; }
.ssd-overlay .ssd-modal-text li:last-child { margin-bottom: 0; }
.ssd-overlay .ssd-modal-text li > ul,
.ssd-overlay .ssd-modal-text li > ol { margin-top: 6px; margin-bottom: 0; }

.ssd-overlay .ssd-modal-text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 12px 0;
  border-radius: 8px;
}

.ssd-overlay .ssd-modal-text a {
  color: #0955a0;
  text-decoration: underline;
}
.ssd-overlay .ssd-modal-text a:hover { text-decoration: none; }

.ssd-overlay .ssd-modal-text h4,
.ssd-overlay .ssd-modal-text h5,
.ssd-overlay .ssd-modal-text h6 {
  color: #021523;
  margin: 18px 0 8px;
  line-height: 1.3;
  font-weight: 700;
}
.ssd-overlay .ssd-modal-text h4 { font-size: 1.1rem; }
.ssd-overlay .ssd-modal-text h5 { font-size: 1rem; }
.ssd-overlay .ssd-modal-text h6 { font-size: 0.95rem; }

.ssd-overlay .ssd-modal-text strong { font-weight: 700; color: #021523; }
.ssd-overlay .ssd-modal-text em     { font-style: italic; }

.ssd-overlay .ssd-modal-text blockquote {
  margin: 16px 0;
  padding-left: 14px;
  border-left: 3px solid rgba(2, 21, 35, 0.15);
  font-style: italic;
}

.ssd-overlay .ssd-modal-text figure { margin: 16px 0; }
.ssd-overlay .ssd-modal-text figcaption {
  font-size: 0.85rem;
  color: rgba(44, 62, 80, 0.75);
  margin-top: 6px;
  text-align: center;
}

.ssd-overlay .ssd-read-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 10px;
  color: #fff;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
  align-self: flex-start;
}
.ssd-overlay .ssd-read-more:hover { opacity: 0.88; transform: translateY(-1px); }

.ssd-overlay .ssd-close-btn {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  color: #95a3b3;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.12s;
}
.ssd-overlay .ssd-close-btn:hover { color: #021523; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT — kicks in at <= 900px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .safe-system-diagram .ssd-m-top,
  .safe-system-diagram .ssd-m-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .safe-system-diagram .ssd-m-top    { margin-bottom: 14px; }
  .safe-system-diagram .ssd-m-bottom { margin-top: 14px; }

  .safe-system-diagram .ssd-m-top-row {
    display: flex;
    gap: 10px;
  }
  .safe-system-diagram .ssd-m-top-row .ssd-m-btn { flex: 1; }

  .safe-system-diagram .ssd-m-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    color: #fff;
    transition: filter 0.15s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .safe-system-diagram .ssd-m-btn:active { transform: scale(0.98); }
  .safe-system-diagram .ssd-m-btn svg { width: 22px; height: 22px; flex-shrink: 0; }

  .safe-system-diagram .ssd-m-btn.blue  { background: #0955a0; color: #ffffff; }
  /* Dark navy on bright green ≈ 7.9:1 (passes AAA).
     White on this green fails AA (≈2.3:1). */
  .safe-system-diagram .ssd-m-btn.green { background: #68bd47; color: #021523; }

  /* Hide the SVG twin overlays from the accessibility tree on mobile
     so screen readers don't announce duplicate buttons. */
  .safe-system-diagram rect.ssd-seg[data-id="road-safety-management"],
  .safe-system-diagram rect.ssd-seg[data-id="rescue-medical"],
  .safe-system-diagram rect.ssd-seg[data-id="safe-road-users"],
  .safe-system-diagram rect.ssd-seg[data-id="principles"],
  .safe-system-diagram rect.ssd-seg[data-id="linkages"] {
    display: none;
  }

  .safe-system-diagram .ssd-diagram {
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 730 / 740;  /* matches the mobile viewBox swap in JS */
  }

  .ssd-overlay .ssd-modal { padding: 30px 24px 26px; border-radius: 0 0 14px 14px; }
  .ssd-overlay .ssd-modal h3 { font-size: 1.2rem; }
  .ssd-overlay .ssd-modal p  { font-size: 0.95rem; }
}