/**
 * HD Notes — front end styles.
 *
 * The palette is the Warm Earth Tones preset, baked in rather than exposed as
 * settings. Override any of the custom properties from the theme to re-skin.
 */

:root {
	/* Marker */
	--hd-note-marker-bg: #fff8dc;
	/* cornsilk */
	--hd-note-marker-border: #cd853f;
	/* peru */
	--hd-note-marker-border-width: 1.5px;
	--hd-note-marker-radius: 0.5rem;
	--hd-note-marker-padding: 3px 10px;
	--hd-note-marker-color: #8b4513;
	/* saddlebrown */
	--hd-note-marker-hover-bg: #ffefd5;
	/* papayawhip */
	--hd-note-marker-hover-border: #b8860b;
	/* darkgoldenrod */
	--hd-note-marker-hover-color: #7a3d0f;
	--hd-note-marker-open-color: #8b4513;
	--hd-note-scroll-margin: 80px;

	/* Note body */
	--hd-note-bg: #fdf5e6;
	/* oldlace */
	--hd-note-border: #deb887;
	/* burlywood */
	--hd-note-accent: #d2691e;
	/* chocolate */
	--hd-note-accent-width: 5px;
	--hd-note-radius: 6px;
	--hd-note-shadow: 0 3px 6px rgba(139, 69, 19, 0.15);
	--hd-note-padding-y: 14px;
	--hd-note-padding-x: 18px;
	--hd-note-font-size: 0.95em;
	--hd-note-color: inherit;
	--hd-note-link-color: #7a3d0f;
}

/* ---------------------------------------------------------------- Marker */

.hd_note {
	align-items: center;
	background: var(--hd-note-marker-bg);
	border: var(--hd-note-marker-border-width) solid var(--hd-note-marker-border);
	border-radius: var(--hd-note-marker-radius);
	color: var(--hd-note-marker-color);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.8em;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	margin-inline-start: 0.15em;
	padding: var(--hd-note-marker-padding);
	scroll-margin-top: var(--hd-note-scroll-margin);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	user-select: none;
	vertical-align: 0.15em;
	white-space: nowrap;
}

.hd_note:hover,
.hd_note:focus-visible {
	background: var(--hd-note-marker-hover-bg);
	border-color: var(--hd-note-marker-hover-border);
	color: var(--hd-note-marker-hover-color);
}

.hd_note:focus-visible {
	outline: 2px solid var(--hd-note-marker-hover-border);
	outline-offset: 2px;
}

.hd_note[aria-expanded="true"] {
	background: var(--hd-note-marker-hover-bg);
	border-color: var(--hd-note-marker-hover-border);
	color: var(--hd-note-marker-open-color);
}

@media (prefers-reduced-motion: reduce) {
	.hd_note {
		transition: none;
	}
}

/* --------------------------------------------------------------- Tooltip */

.hd_note_tooltip {
	animation: hd-note-reveal 0.2s ease-out;
	background: var(--hd-note-bg);
	border: 1px solid var(--hd-note-border);
	border-radius: var(--hd-note-radius);
	box-shadow: var(--hd-note-shadow);
	color: var(--hd-note-color);
	font-size: var(--hd-note-font-size);
	line-height: 1.5;
	max-width: min(400px, calc(100vw - 32px));
	min-width: min(200px, calc(100vw - 32px));
	overflow-wrap: break-word;
	padding: var(--hd-note-padding-y) 2.5em var(--hd-note-padding-y) var(--hd-note-padding-x);
	position: fixed;
	transform-origin: top center;
	z-index: 10000;
}

.hd_note_tooltip:focus {
	outline: none;
}

.hd_note_tooltip:focus-visible {
	outline: 2px solid var(--hd-note-accent);
	outline-offset: 2px;
}

.hd_note_tooltip> :first-child {
	margin-top: 0;
}

/* The close button is always the last child, so the last content element is
   second from the end. */
.hd_note_tooltip> :nth-last-child(2) {
	margin-bottom: 0;
}

.hd_note_tooltip a {
	color: var(--hd-note-link-color);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* Arrow. --hd-arrow-x is written by view.js so the arrow keeps pointing at
   the marker even when the tooltip is clamped to a viewport edge. */
.hd_note_tooltip::after {
	border-inline-end: 8px solid transparent;
	border-inline-start: 8px solid transparent;
	content: "";
	height: 0;
	left: var(--hd-arrow-x, 50%);
	position: absolute;
	transform: translateX(-50%);
	width: 0;
}

.hd_note_tooltip--above::after {
	border-top: 8px solid var(--hd-note-bg);
	bottom: -8px;
	filter: drop-shadow(0 2px 1px rgba(139, 69, 19, 0.15));
}

.hd_note_tooltip--below::after {
	border-bottom: 8px solid var(--hd-note-bg);
	filter: drop-shadow(0 -2px 1px rgba(139, 69, 19, 0.15));
	top: -8px;
}

.hd_note_tooltip_close {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: var(--hd-note-marker-color);
	cursor: pointer;
	display: flex;
	font-size: 24px;
	height: 24px;
	inset-inline-end: 0.4em;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	top: 0.4em;
	transition: background 0.2s ease, color 0.2s ease;
	width: 24px;
}

.hd_note_tooltip_close:hover,
.hd_note_tooltip_close:focus {
	background: var(--hd-note-marker-hover-bg);
	color: var(--hd-note-marker-hover-color);
	outline: none;
}

.hd_note_tooltip_close:focus-visible {
	outline: 2px solid var(--hd-note-accent);
	outline-offset: 1px;
}

/* ------------------------------------------------------------ Animations */

@keyframes hd-note-reveal {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(-4px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes hd-note-hide {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	to {
		opacity: 0;
		transform: scale(0.96) translateY(-4px);
	}
}

.hd_note_tooltip.hd_note--closing {
	animation: hd-note-hide 0.15s ease-in forwards;
	pointer-events: none;
}

/* Covers the closing animation too, which the reference implementation
   leaves running under reduced motion. */
@media (prefers-reduced-motion: reduce) {

	.hd_note_tooltip,
	.hd_note_tooltip.hd_note--closing {
		animation: none !important;
	}
}

/* ------------------------------------------------- No-JS footnote section */

.hd_note_footnotes {
	border-top: 2px solid var(--hd-note-border);
	margin-top: 2em;
	padding-top: 1.5em;
}

.hd_note_footnotes h2 {
	font-size: 1.5em;
	margin-bottom: 1em;
}

.hd_note_footnotes ol {
	padding-inline-start: 20px;
}

.hd_note_footnotes li {
	margin-bottom: 1em;
}

.hd_note_backlink {
	display: inline-block;
	line-height: 1;
	margin-inline-start: 0.5em;
	text-decoration: none;
}

/* view.js adds `js` to <body>, so the section is only ever seen without
   JavaScript, in print, and by crawlers. */
.js .hd_note_footnotes {
	display: none;
}

/* ------------------------------------------------------------------ Print */

@media print {
	body {
		counter-reset: hd-note-counter;
	}

	.hd_note_tooltip {
		display: none !important;
	}

	/* font-size: 0 hides the "!" glyph; ::before restores a readable size for
	   the footnote number that replaces it. */
	.hd_note {
		background: none;
		border: none;
		color: inherit;
		cursor: default;
		font-size: 0;
		padding: 0;
		vertical-align: super;
	}

	.hd_note::before {
		content: "[" counter(hd-note-counter) "]";
		counter-increment: hd-note-counter;
		font-size: 0.8rem;
	}

	.js .hd_note_footnotes {
		display: block;
	}

	.hd_note_footnotes {
		page-break-inside: avoid;
	}

	.hd_note_footnotes a[href^="#"]::after {
		content: "";
	}

	.hd_note_footnotes a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	.hd_note_backlink {
		display: none;
	}
}