/**
 * Editor content typography — shared by single posts, pages and the block editor.
 *
 * Two roots so one file drives both contexts:
 *   .entry-content          → front end (single.php / page.php wrappers)
 *   .editor-styles-wrapper  → block editor canvas (loaded into the iframe via
 *                             enqueue_block_assets, see inc/enqueue.php)
 */

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content .wp-block-quote,
.entry-content .wp-block-inweb-left-border,
.entry-content .wp-block-inweb-highlight-bordered,
.entry-content .principles,
.entry-content .team,
.entry-content .cta-bar,
.entry-content .arrow-list,
.entry-content .telegram-block-2,
.entry-content .quote-author,
.entry-content .gallery-slider,
.editor-styles-wrapper p,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
.editor-styles-wrapper .wp-block-quote,
.editor-styles-wrapper .wp-block-inweb-left-border,
.editor-styles-wrapper .wp-block-inweb-highlight-bordered,
.editor-styles-wrapper .principles,
.editor-styles-wrapper .team,
.editor-styles-wrapper .cta-bar,
.editor-styles-wrapper .arrow-list,
.editor-styles-wrapper .telegram-block-2,
.editor-styles-wrapper .quote-author,
.editor-styles-wrapper .gallery-slider {
	margin-top: 10px;
	margin-bottom: 20px;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

/* Inline links — pink, underlined, semibold. */
.entry-content a,
.editor-styles-wrapper a {
	color: var(--color-pink);
	font-weight: var(--font-weight-semibold);
	text-decoration: underline;
}

/* Inline highlight (inweb/highlight formats) — filled, white text. */
.entry-content mark.inweb-highlight,
.entry-content mark.inweb-highlight-green,
.editor-styles-wrapper mark.inweb-highlight,
.editor-styles-wrapper mark.inweb-highlight-green {
	padding: 0 4px;
	color: var(--color-white);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.entry-content mark.inweb-highlight,
.editor-styles-wrapper mark.inweb-highlight {
	background: var(--color-pink);
}

.entry-content mark.inweb-highlight-green,
.editor-styles-wrapper mark.inweb-highlight-green {
	background: var(--color-hub);
}

/* Tooltip (inweb/tooltip format) — an info icon after the phrase (drawn as the
   span's own background so both pseudo-elements are free for the bubble + tail),
   and a hover bubble drawn from the data-tooltip attribute, centered on the icon
   with a comic-style tail pointing down at it. */
.entry-content .inweb-tooltip,
.editor-styles-wrapper .inweb-tooltip {
	position: relative;
	padding-right: 21px;
	cursor: help;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ff006e'/%3E%3Ccircle cx='8' cy='4.6' r='1.15' fill='%23fff'/%3E%3Crect x='6.85' y='6.6' width='2.3' height='5.6' rx='1.15' fill='%23fff'/%3E%3C/svg%3E") right center / 16px 16px no-repeat;
}

/* Bubble — centered horizontally on the icon (icon centre ≈ 8px from the span's
   right edge). */
.entry-content .inweb-tooltip::before,
.editor-styles-wrapper .inweb-tooltip::before {
	content: attr(data-tooltip);
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	z-index: 5;
	width: max-content;
	max-width: 260px;
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--color-white);
	color: var(--color-black);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: var(--font-weight-regular);
	line-height: 1.3;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(50% - 16px));
	transition:
		opacity var(--transition-hover),
		visibility var(--transition-hover);
	pointer-events: none;
}

/* Tail — downward triangle just under the bubble, centered on the icon. */
.entry-content .inweb-tooltip::after,
.editor-styles-wrapper .inweb-tooltip::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(100% + 5px);
	z-index: 6;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--color-white);
	opacity: 0;
	visibility: hidden;
	transform: translateX(50%);
	transition:
		opacity var(--transition-hover),
		visibility var(--transition-hover);
	pointer-events: none;
}

.entry-content .inweb-tooltip:hover::before,
.entry-content .inweb-tooltip:hover::after,
.entry-content .inweb-tooltip:focus-within::before,
.entry-content .inweb-tooltip:focus-within::after,
.editor-styles-wrapper .inweb-tooltip:hover::before,
.editor-styles-wrapper .inweb-tooltip:hover::after,
.editor-styles-wrapper .inweb-tooltip:focus-within::before,
.editor-styles-wrapper .inweb-tooltip:focus-within::after {
	opacity: 1;
	visibility: visible;
}

/* When the front-end tooltip script is active it renders a real, viewport-aware
   bubble (assets/js/tooltip.js) — suppress the CSS-pseudo bubble/tail so they
   don't double up. The editor canvas keeps the pseudo preview (no body class). */
.inweb-tt-ready .inweb-tooltip::before,
.inweb-tt-ready .inweb-tooltip::after {
	content: none;
}

/* Front-end tooltip bubble (built by assets/js/tooltip.js, appended to body,
   fixed-positioned and clamped to the viewport so it never overflows). */
.inweb-tt {
	position: fixed;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--transition-hover),
		visibility var(--transition-hover);
}

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

.inweb-tt__box {
	max-width: 260px;
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--color-white);
	color: var(--color-black);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: var(--font-weight-regular);
	line-height: 1.3;
	text-align: center;
}

.inweb-tt__tail {
	position: absolute;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--color-white);
	transform: translateX(-50%);
}

/* Ordered list — pink Raleway SemiBold numbers, top-aligned with the line. */
.entry-content ol,
.editor-styles-wrapper ol {
	padding-left: 30px;
	list-style: none;
	counter-reset: article-ol;
}

.entry-content ol > li,
.editor-styles-wrapper ol > li {
	position: relative;
	margin-bottom: 2px;
	counter-increment: article-ol;
}

.entry-content ol > li:last-child,
.editor-styles-wrapper ol > li:last-child {
	margin-bottom: 0;
}

.entry-content ol > li::before,
.editor-styles-wrapper ol > li::before {
	content: counter(article-ol) ".";
	position: absolute;
	left: -30px;
	color: var(--color-pink);
	font-family: var(--font-family);
	font-weight: var(--font-weight-semibold);
}

/* Unordered list — pink dash markers (15×2), centered on the text line. */
.entry-content ul,
.editor-styles-wrapper ul {
	margin-left: 3px;
	padding-left: 30px;
	list-style: none;
}

.entry-content ul > li,
.editor-styles-wrapper ul > li {
	position: relative;
	margin-bottom: 2px;
}

.entry-content ul > li:last-child,
.editor-styles-wrapper ul > li:last-child {
	margin-bottom: 0;
}

.entry-content ul > li::before,
.editor-styles-wrapper ul > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: -30px;
	width: 15px;
	height: calc(1em * var(--line-height-base));
	background: linear-gradient(var(--color-pink), var(--color-pink)) left center / 15px 2px no-repeat;
}

/* Left-bordered highlight block. */
.entry-content .wp-block-inweb-left-border,
.editor-styles-wrapper .wp-block-inweb-left-border {
	padding: 20px;
	border-left: 5px solid var(--color-pink);
	background: #f3f3f3b2;
}

/* Square-bracketed highlight block — full-height pink bars left/right ([ ... ]). */
.entry-content .wp-block-inweb-highlight-bordered,
.editor-styles-wrapper .wp-block-inweb-highlight-bordered {
	--bracket-thickness: 2px;
	--bracket-arm: 18px;
	padding: 15px 18px;
	border-left: var(--bracket-thickness) solid var(--color-pink);
	border-right: var(--bracket-thickness) solid var(--color-pink);
	background:
		linear-gradient(var(--color-pink), var(--color-pink)) 0 0 / var(--bracket-arm) var(--bracket-thickness) no-repeat,
		linear-gradient(var(--color-pink), var(--color-pink)) 100% 0 / var(--bracket-arm) var(--bracket-thickness) no-repeat,
		linear-gradient(var(--color-pink), var(--color-pink)) 0 100% / var(--bracket-arm) var(--bracket-thickness) no-repeat,
		linear-gradient(var(--color-pink), var(--color-pink)) 100% 100% / var(--bracket-arm) var(--bracket-thickness) no-repeat;
}

/* Blockquote — pink quote marks at top-left and bottom-right. */
.entry-content .wp-block-quote,
.editor-styles-wrapper .wp-block-quote {
	position: relative;
	margin-inline: 0;
	padding: 40px 0;
	font-size: 18px;
	font-weight: var(--font-weight-bold);
}

.entry-content .wp-block-quote::before,
.entry-content .wp-block-quote::after,
.editor-styles-wrapper .wp-block-quote::before,
.editor-styles-wrapper .wp-block-quote::after {
	content: "";
	position: absolute;
	width: 45px;
	height: 30px;
	background: url(../../images/quotes.svg) no-repeat center / contain;
}

.entry-content .wp-block-quote::before,
.editor-styles-wrapper .wp-block-quote::before {
	top: 0;
	left: 0;
}

.entry-content .wp-block-quote::after,
.editor-styles-wrapper .wp-block-quote::after {
	right: 0;
	bottom: 0;
	transform: rotate(180deg);
}

.entry-content .wp-block-quote p,
.editor-styles-wrapper .wp-block-quote p {
	margin: 0;
}

/* Native image captions (figcaption). */
.entry-content .wp-element-caption,
.entry-content .wp-caption-text,
.editor-styles-wrapper .wp-element-caption,
.editor-styles-wrapper .wp-caption-text {
	margin-top: 8px;
	font-family: var(--font-family);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
}

@media (max-width: 767px) {
	.entry-content .wp-block-quote {
		padding: 25px 0;
		font-size: 16px;
	}

	.entry-content .wp-block-quote::before,
	.entry-content .wp-block-quote::after {
		width: 30px;
		height: 20px;
	}
}