/* ===========================================================================
 * mcleod-tooltips.css — McLeod Photography Tooltip System
 *
 * Design tokens match the McLeod brand:
 *   - Background  : #0A0A0A (near-black)
 *   - Surface     : #1a1a1a (panel)
 *   - Border      : #383838
 *   - Accent      : #C9A84C (gold)
 *   - Body text   : #ccc
 *   - Sub-text    : #aaa
 *   - Display     : Cormorant Garamond (term + heading)
 *   - Body        : Raleway (paragraph text)
 *
 * Prefix .mcleod-tt- to prevent collision with Storefront / Elementor.
 * SSR-friendly: text is in DOM from load (Google reads it). CSS controls
 * visibility on hover, focus, and .is-open (mobile tap state).
 *
 * @version 1.0.0
 * @since   2026-05-25
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Inline term (the underlined word in the running text)
 * --------------------------------------------------------------------------- */

.mcleod-tt {
	position: relative;
	display: inline-block;
	cursor: help;
	outline: none;
}

.mcleod-tt-term {
	border-bottom: 1px dotted #C9A84C;
	color: inherit;
	transition: border-color 200ms ease, color 200ms ease;
}

.mcleod-tt:hover .mcleod-tt-term,
.mcleod-tt:focus-visible .mcleod-tt-term,
.mcleod-tt.is-open .mcleod-tt-term {
	border-bottom-color: #C9A84C;
	border-bottom-style: solid;
	color: #C9A84C;
}

.mcleod-tt:focus-visible {
	outline: 2px solid #C9A84C;
	outline-offset: 2px;
	border-radius: 2px;
}


/* ---------------------------------------------------------------------------
 * 2. Popover panel (the floating tooltip body)
 * --------------------------------------------------------------------------- */

.mcleod-tt-pop {
	position: absolute;
	z-index: 9000;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: min(360px, calc(100vw - 32px));
	max-width: 92vw;

	background: #0e0e0e;
	border: 1px solid #383838;
	border-radius: 6px;
	box-shadow:
		0 18px 48px rgba(0, 0, 0, 0.65),
		0 2px 6px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: 16px 18px 14px;
	text-align: left;
	direction: ltr;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 180ms ease,
		visibility 180ms ease,
		transform 200ms ease;
}

.mcleod-tt:hover .mcleod-tt-pop,
.mcleod-tt:focus-visible .mcleod-tt-pop,
.mcleod-tt.is-open .mcleod-tt-pop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}


/* ---------------------------------------------------------------------------
 * 3. Arrow / connector pointing back to the term
 * --------------------------------------------------------------------------- */

.mcleod-tt-pop::before,
.mcleod-tt-pop::after {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
}

.mcleod-tt-pop::before {
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #383838 transparent;
	margin-bottom: 0;
}

.mcleod-tt-pop::after {
	border-width: 0 7px 7px 7px;
	border-color: transparent transparent #0e0e0e transparent;
	margin-bottom: -1px;
}


/* ---------------------------------------------------------------------------
 * 4. Inner content (title, body, link)
 * --------------------------------------------------------------------------- */

.mcleod-tt-title {
	display: block;
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	color: #C9A84C;
	letter-spacing: 0.01em;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

.mcleod-tt-body {
	display: block;
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: 13.5px;
	line-height: 1.55;
	color: #ccc;
	letter-spacing: 0.01em;
}

.mcleod-tt-link {
	display: inline-block;
	margin-top: 12px;
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C9A84C;
	text-decoration: none;
	border-bottom: 1px solid rgba(201, 168, 76, 0.35);
	padding-bottom: 1px;
	transition: border-color 180ms ease, color 180ms ease;
}

.mcleod-tt-link:hover,
.mcleod-tt-link:focus-visible {
	color: #d8b85c;
	border-bottom-color: #d8b85c;
	outline: none;
}


/* ---------------------------------------------------------------------------
 * 5. Tone-based subtle accent (optional — keeps a visual cue)
 * --------------------------------------------------------------------------- */

.mcleod-tt--legal .mcleod-tt-title {
	color: #b89a46;       /* slightly desaturated gold for legal */
	border-bottom-color: rgba(184, 154, 70, 0.18);
}

.mcleod-tt--editorial .mcleod-tt-title {
	font-style: italic;   /* editorial reads with italic display */
}


/* ---------------------------------------------------------------------------
 * 6. Flip when near right edge of viewport
 *     Applied by JS via .is-flipped-left / .is-flipped-up
 * --------------------------------------------------------------------------- */

.mcleod-tt.is-flipped-up .mcleod-tt-pop {
	top: auto;
	bottom: calc(100% + 12px);
	transform: translateX(-50%) translateY(-4px);
}

.mcleod-tt.is-flipped-up:hover .mcleod-tt-pop,
.mcleod-tt.is-flipped-up:focus-visible .mcleod-tt-pop,
.mcleod-tt.is-flipped-up.is-open .mcleod-tt-pop {
	transform: translateX(-50%) translateY(0);
}

.mcleod-tt.is-flipped-up .mcleod-tt-pop::before,
.mcleod-tt.is-flipped-up .mcleod-tt-pop::after {
	bottom: auto;
	top: 100%;
	border-width: 8px 8px 0 8px;
}

.mcleod-tt.is-flipped-up .mcleod-tt-pop::before {
	border-color: #383838 transparent transparent transparent;
	margin-bottom: 0;
	margin-top: 0;
}

.mcleod-tt.is-flipped-up .mcleod-tt-pop::after {
	border-width: 7px 7px 0 7px;
	border-color: #0e0e0e transparent transparent transparent;
	margin-top: -1px;
}

.mcleod-tt.is-flipped-left .mcleod-tt-pop {
	left: auto;
	right: 0;
	transform: translateX(0) translateY(4px);
}

.mcleod-tt.is-flipped-left:hover .mcleod-tt-pop,
.mcleod-tt.is-flipped-left:focus-visible .mcleod-tt-pop,
.mcleod-tt.is-flipped-left.is-open .mcleod-tt-pop {
	transform: translateX(0) translateY(0);
}

.mcleod-tt.is-flipped-left .mcleod-tt-pop::before,
.mcleod-tt.is-flipped-left .mcleod-tt-pop::after {
	left: auto;
	right: 14px;
	transform: translateX(0);
}


/* ---------------------------------------------------------------------------
 * 7. Mobile — full-width modal-style behaviour
 * --------------------------------------------------------------------------- */

@media (max-width: 600px) {

	.mcleod-tt-pop {
		position: fixed;
		top: auto;
		bottom: 20px;
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
		transform: translateY(8px);
		padding: 18px 20px 16px;
		font-size: 14px;
	}

	.mcleod-tt:hover .mcleod-tt-pop,
	.mcleod-tt:focus-visible .mcleod-tt-pop,
	.mcleod-tt.is-open .mcleod-tt-pop {
		transform: translateY(0);
	}

	/* Hide the arrow on mobile — modal-style, no connector needed */
	.mcleod-tt-pop::before,
	.mcleod-tt-pop::after {
		display: none;
	}

	/* Larger title/body for readability on small screens */
	.mcleod-tt-title {
		font-size: 19px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}

	.mcleod-tt-body {
		font-size: 14px;
		line-height: 1.6;
	}

	.mcleod-tt-link {
		font-size: 12px;
		margin-top: 14px;
	}

	/* Suppress hover on mobile — only tap (.is-open) triggers */
	.mcleod-tt:hover .mcleod-tt-pop {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.mcleod-tt.is-open .mcleod-tt-pop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}


/* ---------------------------------------------------------------------------
 * 8. Mobile backdrop (rendered by JS when a tooltip opens)
 * --------------------------------------------------------------------------- */

.mcleod-tt-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 8999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.mcleod-tt-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}


/* ---------------------------------------------------------------------------
 * 9. Reduced motion — respect user preference
 * --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mcleod-tt-pop,
	.mcleod-tt-term,
	.mcleod-tt-link,
	.mcleod-tt-backdrop {
		transition: none !important;
	}

	.mcleod-tt-pop {
		transform: translateX(-50%) translateY(0) !important;
	}

	@media (max-width: 600px) {
		.mcleod-tt-pop {
			transform: translateY(0) !important;
		}
	}
}


/* ---------------------------------------------------------------------------
 * 10. High-contrast / forced-colors mode
 * --------------------------------------------------------------------------- */

@media (forced-colors: active) {

	.mcleod-tt-pop {
		border: 2px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	.mcleod-tt-title {
		color: CanvasText;
		border-bottom-color: CanvasText;
	}

	.mcleod-tt-body {
		color: CanvasText;
	}

	.mcleod-tt-link {
		color: LinkText;
		border-bottom-color: LinkText;
	}
}


/* ---------------------------------------------------------------------------
 * 11. Print — show tooltips inline as expanded text (no popovers)
 * --------------------------------------------------------------------------- */

@media print {

	.mcleod-tt-pop {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
		background: transparent;
		border: 1px solid #ccc;
		box-shadow: none;
		margin-top: 6px;
		break-inside: avoid;
	}

	.mcleod-tt-pop::before,
	.mcleod-tt-pop::after {
		display: none;
	}

	.mcleod-tt-title,
	.mcleod-tt-body,
	.mcleod-tt-link {
		color: #000 !important;
		border-color: #666 !important;
	}

	.mcleod-tt-backdrop {
		display: none;
	}
}