/* Trikala Tooltips 1.1.0 — shipped and enqueued by the plugin. Nothing of this belongs in
   Divi > Theme Options > Custom CSS any more; delete the 1.0.0 block there. */

/* --- Trigger ------------------------------------------------------------------------ */
.trikala-tip {
	position: relative;
	display: inline;
	cursor: help;
	border-bottom: 1px dotted #b0132e;
}

/* Keyboard users get the browser's focus ring; mouse users do not. */
.trikala-tip:focus { outline: none; }
.trikala-tip:focus-visible { outline: 2px solid #b0132e; outline-offset: 2px; }

/* --- Bubble ------------------------------------------------------------------------- */
.trikala-tip__bubble {
	position: absolute;
	bottom: 100%;
	left: 50%;
	z-index: 9999;
	/* --trikala-shift is set by the script when the bubble would leave the viewport. */
	transform: translateX(calc(-50% + var(--trikala-shift, 0px)));

	/* The 8px gap to the trigger is part of the bubble (a transparent margin area is not
	   hoverable; padding on a wrapper is). The border is drawn by the inner box below. */
	width: max-content;
	max-width: min(300px, calc(100vw - 16px));
	box-sizing: border-box;

	/* Hidden: visibility, not just opacity, so the invisible bubble never swallows clicks
	   on the box above the trigger. */
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;

	/* Typography: inherit the page font so it blends in. */
	font-family: inherit;
	font-size: 0.8em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	white-space: pre-line;   /* newlines from the shortcode text become line breaks */
	cursor: default;
	padding: 6px 12px 14px 12px;   /* 6px top, 12px sides, 6px bottom + the 8px gap */
	color: #000000;
}

/* The visible box (border, background) is the bubble's own box minus the gap. */
.trikala-tip__bubble::before {
	content: '';
	position: absolute;
	inset: 0 0 8px 0;
	z-index: -1;
	background-color: #ffffff;
	border: 1px solid #b0132e;
	border-radius: 4px;
}
/* Arrow, on the trigger so it stays centred on the trigger even when the bubble shifts. */
.trikala-tip::after {
	content: '';
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: #b0132e transparent transparent transparent;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* --- Show on hover and on keyboard focus -------------------------------------------- */
.trikala-tip:hover .trikala-tip__bubble,
.trikala-tip:focus .trikala-tip__bubble,
.trikala-tip:hover::after,
.trikala-tip:focus::after {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease, visibility 0s;
}

/* Escape pressed: stay hidden until the pointer leaves the trigger (script toggles the class). */
.trikala-tip.tip-dismissed .trikala-tip__bubble,
.trikala-tip.tip-dismissed::after {
	visibility: hidden;
	opacity: 0;
}

/* --- Flip below the trigger (script sets the class near the top of the viewport) ---- */
.trikala-tip.tip-below .trikala-tip__bubble {
	bottom: auto;
	top: 100%;
	padding: 14px 12px 6px 12px;
}
.trikala-tip.tip-below .trikala-tip__bubble::before {
	inset: 8px 0 0 0;
}
.trikala-tip.tip-below::after {
	bottom: auto;
	top: calc(100% + 2px);
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #b0132e transparent;
}

/* --- Divi stacking context fix ------------------------------------------------------
   Divi columns are siblings; a later column paints over an earlier one and would cover a
   bubble that overflows into it. Lift the column that holds the open tooltip. :has() is
   supported since Chrome 105, Safari 15.4 and Firefox 121. */
.et_pb_column:has(.trikala-tip:hover),
.et_pb_column:has(.trikala-tip:focus) {
	position: relative;
	z-index: 100 !important;
}