/* ==========================================================================
   Pink Pen – tekst kolumne (Clanak.dc.html)
   Učitava se na siteu (.pp-content) i u editoru (.is-root-container), pa
   editor izgleda kao članak. U editoru WordPress ispred svakog selektora
   doda .editor-styles-wrapper.
   ========================================================================== */

/* Veličine su u rem (poštuju veličinu slova iz postavki preglednika/mobitela) i
   množe se faktorom iz postavki čitanja (--pp-skala na <html>, vidi main.css). */
:is(.pp-content, .is-root-container) {
	--pp-s: var(--pp-skala, 1);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: calc(1.3125rem * var(--pp-s));
	line-height: 1.75;
	color: var(--wp--preset--color--tekst);
}

/* Inicijal na prvom odlomku */
:is(.pp-content, .is-root-container) > p:first-of-type:not(.is-style-interludij)::first-letter {
	font-family: var(--wp--preset--font-family--instrument-serif);
	float: left;
	font-size: calc(6.5rem * var(--pp-s));
	line-height: 0.82;
	padding: 8px 14px 0 0;
	color: var(--wp--preset--color--srce);
	font-style: normal;
	font-weight: 400;
}

:is(.pp-content, .is-root-container) a {
	color: var(--wp--preset--color--srce);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:is(.pp-content, .is-root-container) a:hover {
	color: var(--wp--preset--color--srce-hover);
}

:is(.pp-content, .is-root-container) :is(h1, h2, h3, h4) {
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
	text-wrap: balance;
}

:is(.pp-content, .is-root-container) :is(h1, h2) {
	font-size: calc(2.5rem * var(--pp-s));
	line-height: 1.12;
}

:is(.pp-content, .is-root-container) :is(h3, h4) {
	font-size: calc(2rem * var(--pp-s));
	line-height: 1.15;
}

:is(.pp-content, .is-root-container) strong {
	font-weight: 500;
}

:is(.pp-content, .is-root-container) :is(ul, ol) {
	padding-left: 1.3em;
}

:is(.pp-content, .is-root-container) li + li {
	margin-top: 0.4em;
}

:is(.pp-content, .is-root-container) li::marker {
	color: var(--wp--preset--color--srce);
}

:is(.pp-content, .is-root-container) :is(figure, img) {
	max-width: 100%;
	height: auto;
}

:is(.pp-content, .is-root-container) figcaption {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: calc(0.8125rem * var(--pp-s));
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--sjena);
}

/* Odvajač: tanka linija */
:is(.pp-content, .is-root-container) hr {
	width: 100%;
	max-width: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--linija);
	background: none;
}

/* Odvajač „Nalivpero” – crta sa srcem (divider-pen) */
:is(.pp-content, .is-root-container) hr.is-style-nalivpero {
	margin-block: 24px;
	border: 0;
	height: auto;
	aspect-ratio: 820 / 160;
	background: url("../svg/pen-divider.svg") no-repeat center / contain;
	opacity: 1;
}

/* Citat „Pink Pen citat” (zadani stil) */
:is(.pp-content, .is-root-container) blockquote {
	margin: 24px 0;
	padding: 36px 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--tinta);
	border-bottom: 1px solid var(--wp--preset--color--tinta);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

:is(.pp-content, .is-root-container) blockquote::before {
	content: "";
	flex: none;
	width: 40px;
	height: 36px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M50 84 C 22 64, 6 46, 11 27 C 16 9, 41 7, 50 28 C 59 7, 84 9, 89 27 C 94 46, 78 64, 50 84' fill='none' stroke='%23D4147A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

:is(.pp-content, .is-root-container) blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: calc(2.5rem * var(--pp-s));
	line-height: 1.15;
	color: var(--wp--preset--color--tinta);
	text-wrap: balance;
}

:is(.pp-content, .is-root-container) blockquote cite {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: calc(0.75rem * var(--pp-s));
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sjena);
}

/* Citat „Obični citat” – za duže navode (npr. migrirani tekstovi) */
:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain) {
	margin: 0;
	padding: 4px 0 4px 26px;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--srce);
	display: block;
	text-align: left;
}

:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain)::before {
	content: none;
}

:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain) p {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: calc(1.3125rem * var(--pp-s));
	line-height: 1.75;
	color: var(--wp--preset--color--lead);
	text-wrap: pretty;
}

:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain) p + p {
	margin-top: 16px;
}

:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain) cite {
	display: block;
	margin-top: 12px;
}

/* Interludij („Ali isto tako…”) */
:is(.pp-content, .is-root-container) .is-style-interludij {
	margin: 16px 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-size: calc(2.75rem * var(--pp-s));
	line-height: 1.1;
	color: var(--wp--preset--color--srce);
	text-wrap: balance;
}

/* Ugrađeni sadržaji */
:is(.pp-content, .is-root-container) .wp-block-embed {
	margin-inline: 0;
}

@media (max-width: 640px) {
	:is(.pp-content, .is-root-container) {
		font-size: calc(1.1875rem * var(--pp-s));
		line-height: 1.7;
	}

	:is(.pp-content, .is-root-container) > p:first-of-type:not(.is-style-interludij)::first-letter {
		font-size: calc(5.25rem * var(--pp-s));
		padding: 6px 10px 0 0;
	}

	:is(.pp-content, .is-root-container) :is(h1, h2) {
		font-size: calc(2rem * var(--pp-s));
	}

	:is(.pp-content, .is-root-container) :is(h3, h4) {
		font-size: calc(1.6875rem * var(--pp-s));
	}

	:is(.pp-content, .is-root-container) blockquote {
		padding: 28px 0;
	}

	:is(.pp-content, .is-root-container) blockquote p {
		font-size: calc(1.875rem * var(--pp-s));
	}

	:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain) {
		padding-left: 20px;
	}

	:is(.pp-content, .is-root-container) blockquote:is(.is-style-obicni, .is-style-plain) p {
		font-size: calc(1.1875rem * var(--pp-s));
		line-height: 1.7;
	}

	:is(.pp-content, .is-root-container) .is-style-interludij {
		font-size: calc(2.25rem * var(--pp-s));
	}
}

/* Samo na siteu: razmak 30 px kao flex gap u dizajnu. */
.pp-content {
	display: flex;
	flex-direction: column;
	gap: calc(1.875rem * var(--pp-s));
}

.pp-content > * {
	margin-top: 0;
	margin-bottom: 0;
}

.pp-content > blockquote {
	margin: 24px 0;
}

.pp-content > .is-style-interludij {
	margin: 16px 0;
}

.pp-content > hr.is-style-nalivpero {
	margin: 24px 0;
}

.pp-content > blockquote:is(.is-style-obicni, .is-style-plain) {
	margin: 0;
}

@media (max-width: 640px) {
	.pp-content {
		gap: calc(1.5rem * var(--pp-s));
	}
}