/* ============================================================
   Connect the Dots — Frontend Map Styles
   WCAG AAA | Professional | No emojis | Fully responsive
   ============================================================ */

/* ---- Custom properties ------------------------------------ */
:root {
	--ctd-focus-color:     #005fcc;
	--ctd-focus-width:     3px;
	--ctd-modal-bg:        #fff;
	--ctd-modal-overlay:   rgba(0, 0, 0, 0.55);
	--ctd-text:            #1a1a1a;
	--ctd-text-muted:      #4a4a4a;
	--ctd-border:          #c0c0c0;
	--ctd-surface:         #f5f5f5;
	--ctd-link:            #005fcc;
	--ctd-radius:          6px;
	--ctd-transition:      0.18s ease;
}

/* ---- Section wrapper (skip link + keyboard help + map) ---- */
/* position:relative anchors the absolutely-positioned skip link.
 * Owns the vertical margin so the skip link sits at the section's top-left. */
.ctd-map-outer {
	position: relative;
	margin:   1.5rem 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	             Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-size:  1rem;
	color:      var(--ctd-text);
}

/* ---- Map wrapper ------------------------------------------ */
.ctd-map-wrapper {
	position:   relative;   /* anchors absolutely-positioned tooltip */
	width:      100%;
	max-width:  100%;
}

/* ---- Skip-map link (WCAG 2.4.1 Bypass Blocks) ------------- */
/* Hidden until focused — gives keyboard users a way to jump past 20 dots.
 * !important on color overrides WordPress admin's link colour inheritance. */
.ctd-skip-map {
	position:    absolute;
	top:         0;
	left:        0;
	z-index:     200;
	padding:     0.5rem 1rem;
	background:  var(--ctd-focus-color, #005fcc) !important;
	color:       #fff !important;
	font-size:   0.9375rem;
	font-weight: 600;
	border-radius: 0 0 var(--ctd-radius) 0;
	text-decoration: none;
	/* Visually hidden until focused */
	clip:        rect(0 0 0 0);
	clip-path:   inset(50%);
	overflow:    hidden;
	white-space: nowrap;
	width:       1px;
	height:      1px;
}

.ctd-skip-map:focus {
	/* Reveal when focused */
	clip:      auto;
	clip-path: none;
	width:     auto;
	height:    auto;
	overflow:  visible;
	color:     #fff !important;
	outline:   3px solid #fff;
	outline-offset: -3px;
}

/* ---- Admin toolbar ---------------------------------------- */
.ctd-admin-toolbar {
	display:         flex;
	align-items:     center;
	gap:             1rem;
	padding:         0.625rem 0.875rem;
	background:      #f0f4ff;
	border:          2px solid #1a4fcc;
	border-radius:   var(--ctd-radius);
	margin-bottom:   0.75rem;
}

.ctd-drag-btn {
	padding:        0.45rem 0.875rem;
	background:     #1a4fcc;
	color:          #fff;
	border:         2px solid transparent;
	border-radius:  var(--ctd-radius);
	font-weight:    600;
	font-size:      0.875rem;
	cursor:         pointer;
	transition:     background var(--ctd-transition), outline var(--ctd-transition);
	white-space:    nowrap;
}

.ctd-drag-btn:hover {
	background: #103ea3;
}

.ctd-drag-btn:focus-visible {
	outline:        var(--ctd-focus-width) solid var(--ctd-focus-color);
	outline-offset: 3px;
}

.ctd-drag-btn.ctd-drag-active {
	background: #005c00;
}

.ctd-drag-btn.ctd-drag-active:hover {
	background: #004400;
}

.ctd-drag-status {
	font-size:   0.85rem;
	font-weight: 600;
	color:       #1a1a1a;
}

/* ---- Map canvas ------------------------------------------- */
/*
 * KEY FIX: position:relative sets the stacking context.
 * overflow:visible lets dots near edges stay visible.
 * The SVG sits above the <img> in DOM order — no z-index needed.
 */
.ctd-map-canvas {
	position:   relative;
	width:      100%;
	line-height: 0;    /* prevents phantom whitespace under <img> */
	overflow:   visible;
	border:     1px solid var(--ctd-border);
	border-radius: var(--ctd-radius);
	background: #fff;
}

.ctd-map-img {
	display:    block;
	width:      100%;
	height:     auto;
	border-radius: calc(var(--ctd-radius) - 1px);
	user-select: none;
	-webkit-user-drag: none;
}

.ctd-map-svg {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
	overflow: visible;     /* dots at edges are never clipped */
	cursor:   default;
}

.ctd-map-svg.ctd-draggable {
	cursor: grab;
}

.ctd-map-svg.ctd-draggable:active {
	cursor: grabbing;
}

/* ---- SVG dot elements ------------------------------------- */
.ctd-dot {
	cursor:     pointer;
}

/* Focus ring — 2-ring pattern for WCAG-compliant visibility on any background:
 *   halo  (white, 7 px wide): 2 px peek outside and inside the focus ring
 *   ring  (blue,  3 px wide): the colour-coded focus indicator
 * Both hidden at opacity:0, both revealed on :focus/:focus-visible.
 * The white halo ensures the blue ring reads on both light and dark map areas.
 */
.ctd-dot-ring-halo,
.ctd-dot-ring {
	opacity:    0;
	transition: opacity var(--ctd-transition);
}

.ctd-dot:focus-visible .ctd-dot-ring-halo,
.ctd-dot:focus         .ctd-dot-ring-halo,
.ctd-dot:focus-visible .ctd-dot-ring,
.ctd-dot:focus         .ctd-dot-ring {
	opacity: 1;
}

.ctd-dot:focus {
	outline: none;  /* SVG ring handles focus indication */
}

/* Hover scale using CSS on the circles */
.ctd-dot-circle {
	transition: r var(--ctd-transition);
}

.ctd-dot:hover .ctd-dot-circle,
.ctd-dot:focus-visible .ctd-dot-circle,
.ctd-dot:focus .ctd-dot-circle {
	r: 20px;  /* slight grow on hover AND keyboard focus */
}

.ctd-dot.ctd-dragging {
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
	cursor: grabbing;
}

/* Size modifier classes exposed for custom CSS targeting */
.ctd-dot--sm .ctd-dot-circle { /* r=12 */ }
.ctd-dot--md .ctd-dot-circle { /* r=18, default */ }
.ctd-dot--lg .ctd-dot-circle { /* r=26 */ }

/* ---- Tooltip ---------------------------------------------- */
.ctd-tooltip {
	position:       absolute;   /* relative to .ctd-map-wrapper */
	background:     #fff;
	border:         2px solid #1a4fcc;
	border-radius:  var(--ctd-radius);
	padding:        0.5rem 0.75rem;
	font-size:      0.8125rem;
	line-height:    1.4;
	pointer-events: none;
	white-space:    nowrap;
	box-shadow:     0 3px 12px rgba(0, 0, 0, 0.18);
	z-index:        100;
	max-width:      220px;
	white-space:    normal;
}

.ctd-tooltip-title {
	font-weight: 700;
	color:       #1a4fcc;
	margin-bottom: 0.125rem;
}

.ctd-tooltip-meta {
	color:          var(--ctd-text-muted);
	font-size:      0.75rem;
	display:        flex;
	flex-direction: column;
	gap:            2px;
	margin-top:     2px;
}

/* ---- Modal ------------------------------------------------ */
/* Hidden by default. Shown only by adding .ctd-modal--active via JS.
 * Also force-hide via [hidden] with !important — Avada overrides the
 * browser default for [hidden], which caused the overlay (position:fixed,
 * inset:0, z-index:100000) to sit on top of the page at load, trapping users. */
.ctd-modal-overlay,
.ctd-modal-overlay[hidden] {
	display: none !important;
}

.ctd-modal,
.ctd-modal[hidden] {
	display: none !important;
}

/* z-index 100000+ clears Avada panels, off-canvas menus, sticky headers */
.ctd-modal-overlay.ctd-modal--active {
	display: block !important;
	position: fixed;
	inset:    0;
	background: var(--ctd-modal-overlay);
	z-index:  100000;
}

.ctd-modal.ctd-modal--active {
	display:    flex !important;
	position:   fixed;
	inset:      0;
	z-index:    100001;
	align-items:     center;
	justify-content: center;
	padding:    1rem;
	pointer-events: none;
}

.ctd-modal-inner {
	position:      relative;
	background:    var(--ctd-modal-bg);
	border-radius: var(--ctd-radius);
	box-shadow:    0 8px 32px rgba(0, 0, 0, 0.28);
	max-width:     520px;
	width:         100%;
	max-height:    85vh;
	overflow-y:    auto;
	padding:       2rem;
	pointer-events: auto;
}

.ctd-modal-close {
	position:      absolute;
	top:           0.75rem;
	right:         0.75rem;
	width:         2.25rem;
	height:        2.25rem;
	background:    transparent;
	border:        2px solid var(--ctd-border);
	border-radius: 50%;
	font-size:     1.125rem;
	line-height:   1;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	color:         var(--ctd-text-muted);
	transition:    background var(--ctd-transition), color var(--ctd-transition);
}

.ctd-modal-close:hover {
	background: #1a4fcc;
	border-color: #1a4fcc;
	color:      #fff;
}

.ctd-modal-close:focus-visible {
	outline:        var(--ctd-focus-width) solid var(--ctd-focus-color);
	outline-offset: 3px;
}

.ctd-modal-dot-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            0.5rem;
	margin-bottom:  0.625rem;
}

.ctd-modal-dot-swatch {
	width:        1rem;
	height:       1rem;
	border-radius: 50%;
	flex-shrink:  0;
}

.ctd-modal-title {
	font-size:    1.375rem;
	font-weight:  700;
	color:        var(--ctd-text);
	margin:       0 0 1rem;
	padding-right: 2rem; /* clear close btn */
	line-height:  1.3;
}

.ctd-modal-body {
	color:       var(--ctd-text);
	line-height: 1.65;
}

.ctd-modal-body p {
	margin: 0 0 0.75rem;
}

.ctd-modal-body a {
	color:            var(--ctd-link);
	text-decoration:  underline;
	text-underline-offset: 2px;
}

.ctd-modal-body a:hover {
	color: #003d99;
}

.ctd-modal-body a:focus-visible {
	outline:        var(--ctd-focus-width) solid var(--ctd-focus-color);
	outline-offset: 2px;
	border-radius:  2px;
}

.ctd-modal-body .ctd-modal-body-text {
	margin-bottom: 0.75rem;
}

/* ---- Keyboard help ---------------------------------------- */
/* Above the map so keyboard users can read controls before tabbing into dots. */
.ctd-key-help {
	margin-bottom: 0.75rem;
	border:     1px solid var(--ctd-border);
	border-radius: var(--ctd-radius);
	background: var(--ctd-surface);
	overflow:   hidden;
}

/* Button-controlled disclosure toggle. */
.ctd-key-help-toggle {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	width:       100%;
	padding:     0.625rem 0.875rem;
	background:  transparent;
	border:      none;
	text-align:  left;
	cursor:      pointer;
	font-weight: 600;
	font-size:   0.875rem;
	color:       #1a4fcc !important;
	font-family: inherit;
	line-height: 1.4;
	user-select: none;
	box-sizing:  border-box;
}

.ctd-key-help-toggle:hover {
	background: #e8eeff !important;
}

/* Explicit :focus (not just :focus-visible) so it is always visible on keyboard */
.ctd-key-help-toggle:focus {
	outline:        3px solid #005fcc !important;
	outline-offset: -3px !important;
}

.ctd-key-help-chevron {
	display:    inline-block;
	font-size:  0.75rem;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

/* Content hidden by default — use BOTH [hidden] attribute AND class so themes
 * that override [hidden] { display:block } are also handled. */
.ctd-key-help-content {
	display: none;
	padding: 0.5rem 0.875rem 0.875rem;
}

.ctd-key-help-content.ctd-key-help-open {
	display: block !important;
}

.ctd-key-help ul {
	margin:  0.25rem 0 0;
	padding: 0 0 0 1.25rem;
}

.ctd-key-help li {
	margin:      0.375rem 0;
	font-size:   0.85rem;
	color:       var(--ctd-text-muted);
	line-height: 1.5;
}

.ctd-key-help kbd {
	display:       inline-block;
	background:    #fff;
	border:        1px solid #aaa;
	border-radius: 3px;
	padding:       0.1em 0.45em;
	font-family:   'Courier New', monospace;
	font-size:     0.8em;
	line-height:   1.4;
	box-shadow:    0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ---- Screen-reader only ----------------------------------- */
.ctd-sr-only {
	position:   absolute !important;
	width:      1px !important;
	height:     1px !important;
	color:      #000 !important;
	background: #fff !important;
	padding:    0 !important;
	margin:     -1px !important;
	overflow:   hidden !important;
	clip:       rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border:     0 !important;
}

/* ---- Prevent body scroll when modal is open -------------- */
/* Apply to both html and body — Avada (and many frameworks) control scroll
 * on the html element, not just body. */
html.ctd-modal-open,
body.ctd-modal-open {
	overflow: hidden;
}

/* Map title heading */
.ctd-map-title {
	font-size:   1.25rem;
	font-weight: 700;
	margin:      0 0 0.625rem;
	color:       var(--ctd-text);
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 600px) {
	.ctd-modal-inner {
		padding:    1.25rem;
	}
	.ctd-modal-title {
		font-size:  1.125rem;
	}
	.ctd-admin-toolbar {
		flex-wrap:  wrap;
		gap:        0.5rem;
	}
}

/* ---- Print ------------------------------------------------ */
@media print {
	.ctd-admin-toolbar,
	.ctd-key-help,
	.ctd-modal,
	.ctd-modal-overlay {
		display: none !important;
	}
}

/* ---- Forced colors / High Contrast (WCAG 1.4.11) -------- */
@media (forced-colors: active) {
	/* Dot circles — use system colors so they're visible */
	.ctd-dot-circle {
		fill: ButtonText !important;
		stroke: ButtonFace !important;
		stroke-width: 2px;
		forced-color-adjust: none;
	}

	/* Number labels inside dots — system background color for contrast */
	.ctd-dot text {
		fill: ButtonFace !important;
		forced-color-adjust: none;
	}

	/* Focus rings — use system highlight */
	.ctd-dot-ring-halo {
		stroke: Highlight !important;
		stroke-width: 7 !important;
		forced-color-adjust: none;
	}
	.ctd-dot-ring {
		stroke: Highlight !important;
		stroke-width: 3 !important;
		forced-color-adjust: none;
	}

	/* Hover/focus — outline fallback since SVG fill won't show */
	.ctd-dot:hover .ctd-dot-circle,
	.ctd-dot:focus .ctd-dot-circle,
	.ctd-dot:focus-visible .ctd-dot-circle {
		stroke: Highlight !important;
		stroke-width: 3px;
	}
}

/* ---- Reduced motion (WCAG 2.3.3 AAA) -------------------- */
@media (prefers-reduced-motion: reduce) {
	.ctd-dot-ring-halo,
	.ctd-dot-ring,
	.ctd-dot-circle,
	.ctd-tooltip,
	.ctd-modal,
	.ctd-modal-overlay {
		transition: none !important;
	}
}