/**
 * Public-facing CSS for Valtorta Plugin
 * Styles for the part header bar and other public elements
 *
 * All part colors are defined as CSS custom properties (variables) below.
 * To customize colors, override these variables in the plugin settings
 * under "Custom CSS" or edit this file directly.
 */

/* ================================================================
   PART HEADER BAR COLORS
   ================================================================
   These colors are used for the gradient background of the part
   indicator bar shown at the top of each chapter page.

   Part 1: Pre-Gospel (chapters 1-43)
   Part 2: First Year of Public Life (chapters 44-140)
   Part 3: Second Year of Public Life (chapters 141-312)
   Part 4: Third Year of Public Life (chapters 313-540)
   Part 5: Preparation for Passion (chapters 541-600)
   Part 6: Passion and Death (chapters 601-615)
   Part 7: Glorification (chapters 616-651)
   ================================================================ */

:root {
	--va-part-1-color: #669bbc;  /* Part 1: Pre-Gospel */
	--va-part-2-color: #336683;  /* Part 2: First Year */
	--va-part-3-color: #003049;  /* Part 3: Second Year */
	--va-part-4-color: #40606C;  /* Part 4: Third Year */
	--va-part-5-color: #a05157;  /* Part 5: Pre-Passion */
	--va-part-6-color: #c1121f;  /* Part 6: Passion */
	--va-part-7-color: #780000;  /* Part 7: Glorification */
}

/* Part Header Bar - Base Styles */
.va-part-header-bar {
	background: linear-gradient(90deg, var(--va-part-color, #8B0000) 0%, var(--va-part-color, #B22222) 100%);
	color: #fff;
	padding: 12px 20px;
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Part-specific background colors using CSS variables */
.va-part-header-bar.va-part-1 {
	--va-part-color: var(--va-part-1-color);
}

.va-part-header-bar.va-part-2 {
	--va-part-color: var(--va-part-2-color);
}

.va-part-header-bar.va-part-3 {
	--va-part-color: var(--va-part-3-color);
}

.va-part-header-bar.va-part-4 {
	--va-part-color: var(--va-part-4-color);
}

.va-part-header-bar.va-part-5 {
	--va-part-color: var(--va-part-5-color);
}

.va-part-header-bar.va-part-6 {
	--va-part-color: var(--va-part-6-color);
}

.va-part-header-bar.va-part-7 {
	--va-part-color: var(--va-part-7-color);
}

.va-part-header-bar .va-part-label {
	font-weight: 700;
}

.va-part-header-bar .va-part-title {
	font-weight: 400;
	opacity: 0.9;
}

/* ================================================================
   NOTE POPUP
   ================================================================ */

/* Clickable note numbers in chapter content */
sup.va-note-trigger {
	color: #c1121f;
	cursor: pointer;
	font-weight: bold;
	text-decoration: underline;
	position: relative;
}

sup.va-note-trigger:hover {
	color: #780000;
}

/* Note popup - positioned near the clicked note */
.va-note-popup {
	display: none;
	position: fixed;
	z-index: 9999;
	background-color: #fff;
	padding: 15px 20px;
	border-radius: 8px;
	width: 320px;
	max-width: 90vw;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	border: 1px solid #ddd;
	animation: va-note-fadein 0.2s ease;
}

/* Arrow pointing up to the note */
.va-note-popup.va-arrow-top::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 20px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #fff;
	z-index: 1;
}

.va-note-popup.va-arrow-top::after {
	content: '';
	position: absolute;
	top: -9px;
	left: 20px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #ddd;
	z-index: 0;
}

/* Arrow pointing down when popup is above the note */
.va-note-popup.va-arrow-bottom::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 20px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
	z-index: 1;
}

.va-note-popup.va-arrow-bottom::after {
	content: '';
	position: absolute;
	bottom: -9px;
	left: 20px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #ddd;
	z-index: 0;
}

/* Close button */
.va-note-popup-close {
	color: #aaa;
	position: absolute;
	right: 10px;
	top: 5px;
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
	line-height: 1;
}

.va-note-popup-close:hover,
.va-note-popup-close:focus {
	color: #000;
	text-decoration: none;
}

/* Popup body */
.va-note-popup-body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	padding-right: 15px;
}

.va-note-popup-body sup {
	color: #c1121f;
	font-weight: bold;
	margin-right: 4px;
}

/* Animations */
@keyframes va-note-fadein {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.va-note-popup {
		width: 280px;
		padding: 12px 15px;
	}
}

/* ================================================================
   ANCHOR SCROLL OFFSET
   ================================================================
   When navigating to paragraph anchors (e.g. #p2), offset the
   final scroll position so the fixed header doesn't cover content.
   ================================================================ */
#content sub[id] {
	scroll-margin-top: 200px;
}