/* Tooltips in a Nutshell — enqueued by the plugin. Nothing to paste anywhere.
   Colours and sizes are CSS custom properties with fallbacks; set them once on :root in your
   theme or in Appearance > Customize > Additional CSS, for example:

     :root { --nutshell-accent: #b0132e; --nutshell-width: 320px; }

   --nutshell-accent     border, underline and arrow      (#333333)
   --nutshell-bg         bubble background                 (#ffffff)
   --nutshell-text       bubble text                       (#111111)
   --nutshell-width      maximum bubble width              (300px)
   --nutshell-font-size  bubble text size                  (0.8em)
   --nutshell-radius     corner radius                     (4px)
*/

/* --- Trigger ------------------------------------------------------------------------ */
.nutshell-tip {
	position: relative;
	display: inline;
	cursor: help;
	border-bottom: 1px dotted var(--nutshell-accent, #333333);
}

/* Keyboard users get a focus ring; mouse users do not. */
.nutshell-tip:focus { outline: none; }
.nutshell-tip:focus-visible { outline: 2px solid var(--nutshell-accent, #333333); outline-offset: 2px; }

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

	width: max-content;
	max-width: min(var(--nutshell-width, 300px), calc(100vw - 16px));
	box-sizing: border-box;

	/* 6px top, 12px sides, 6px bottom plus the 8px gap to the trigger. The gap is part of the
	   bubble so the pointer can cross it (a margin would not be hoverable); the visible box
	   is drawn by ::before and stops above the gap. */
	padding: 6px 12px 14px 12px;
	color: var(--nutshell-text, #111111);

	/* Hidden with visibility, not only opacity, so a hidden bubble never swallows clicks
	   on whatever sits 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: var(--nutshell-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;
}

/* The visible box: border and background, the bubble's own box minus the gap. */
.nutshell-tip__bubble::before {
	content: '';
	position: absolute;
	inset: 0 0 8px 0;
	z-index: -1;
	background-color: var(--nutshell-bg, #ffffff);
	border: 1px solid var(--nutshell-accent, #333333);
	border-radius: var(--nutshell-radius, 4px);
}

/* Arrow, on the trigger, so it stays centred on the trigger even when the bubble shifts. */
.nutshell-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: var(--nutshell-accent, #333333) 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 -------------------------------------------- */
.nutshell-tip:hover .nutshell-tip__bubble,
.nutshell-tip:focus .nutshell-tip__bubble,
.nutshell-tip:hover::after,
.nutshell-tip:focus::after {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease, visibility 0s;
}

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

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

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