/*
 * Podrazumevani sablon stranice - sadrzaj iz Gutenberg editora.
 *
 * Reset u base.css namerno skida SVE margine (p, h1-h6), tacke i uvlacenje
 * listi, jer su sve ostale sekcije teme rucno komponovane i ne zele nasledjene
 * razmake. Slobodno unet sadrzaj bas to trazi, pa se ovde vraca - ali samo
 * unutar .civava-prose, da ostatak teme ostane netaknut.
 *
 * WP 7.x ucitava stilove po bloku (wp_should_load_separate_core_block_assets),
 * pa raspored blokova (kolone, galerija...) stize sam - ovde je tipografija,
 * ritam i ono sto reset odnese.
 */

.civava-page {
	padding-block: var(--section-padding-y);
}

/* Fallback sablon (index.php) zna da ispise vise unosa jedan za drugim. */
.civava-page__entry + .civava-page__entry {
	margin-top: 4em;
	padding-top: 4em;
	border-top: 1px solid var(--c-border);
}

/* --- Zaglavlje stranice --- */

.civava-page__head {
	margin-bottom: 48px;
}

.civava-page__title {
	font-family: var(--font-serif);
	/* Raste sa sirinom ekrana: 30px na telefonu, 44px na desktopu. */
	font-size: clamp(30px, 1.6vw + 20px, 44px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--c-ink);
}

/* Kratka zlatna crta ispod naslova - isti akcenat kao drugde na sajtu. */
.civava-page__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin-top: 20px;
	background: var(--c-gold);
}

/* --- Sadrzaj --- */

.civava-prose {
	/* Duzina reda: preko ~75 znakova oko se gubi pri prelasku u novi red.
	   Bez ovoga se pravni tekst razvlaci preko celih 1224px kontejnera. */
	max-width: 100%;
	font-size: 17px;
	line-height: 1.75;
	color: var(--c-text);
}

/* Ritam: svaki blok dobija razmak od prethodnog. Pokriva i blokove koje tema
   ne poznaje unapred, pa nista ne ostaje zalepljeno. */
.civava-prose > * + * {
	margin-top: 1.4em;
}

.civava-prose h2,
.civava-prose h3 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-ink);
}

.civava-prose h2 {
	font-size: 28px;
}

.civava-prose h3 {
	font-size: 22px;
}

.civava-prose h4,
.civava-prose h5,
.civava-prose h6 {
	font-family: var(--font-body);
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-ink);
}

.civava-prose h4 {
	font-size: 18px;
}

.civava-prose h5,
.civava-prose h6 {
	font-size: 16px;
}

/* Naslov trazi vise vazduha iznad nego ispod - tako pripada tekstu koji sledi. */
.civava-prose > h2 + *,
.civava-prose > h3 + *,
.civava-prose > h4 + *,
.civava-prose > h5 + *,
.civava-prose > h6 + * {
	margin-top: 0.6em;
}

.civava-prose > * + h2 {
	margin-top: 2.2em;
}

.civava-prose > * + h3,
.civava-prose > * + h4,
.civava-prose > * + h5,
.civava-prose > * + h6 {
	margin-top: 1.8em;
}

/* Na zatecenim stranicama podnaslovi su <strong> unutar pasusa, ne prava
   zaglavlja - ovo im daje bar malo tezine. */
.civava-prose strong,
.civava-prose b {
	font-weight: 600;
	color: var(--c-ink);
}

.civava-prose a {
	color: var(--c-bronze);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.15s ease;
}

/* Zlatna na beloj podlozi daje kontrast 2.4:1 i ne bi se dobro citala, pa
   hover ide na najtamniju boju umesto na uobicajeni zlatni akcenat. */
.civava-prose a:hover,
.civava-prose a:focus-visible {
	color: var(--c-ink);
}

/* --- Liste (reset ih skida u celosti) --- */

.civava-prose ul,
.civava-prose ol {
	padding-left: 1.4em;
	list-style: disc;
}

.civava-prose ol {
	list-style: decimal;
}

.civava-prose ul ul {
	list-style: circle;
}

.civava-prose li + li {
	margin-top: 0.5em;
}

.civava-prose li > ul,
.civava-prose li > ol {
	margin-top: 0.5em;
}

.civava-prose li::marker {
	color: var(--c-bronze);
}

/* --- Citat, crta, medija --- */

.civava-prose blockquote {
	margin-inline: 0;
	padding-left: 24px;
	border-left: 2px solid var(--c-gold);
	font-family: var(--font-serif);
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--c-ink);
}

.civava-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--font-body);
	font-size: 14px;
	font-style: normal;
	color: var(--c-gray);
}

.civava-prose hr,
.civava-prose .wp-block-separator {
	height: 1px;
	margin-block: 2.5em;
	border: 0;
	background: var(--c-border);
}

.civava-prose figure {
	margin: 0;
}

.civava-prose img {
	height: auto;
	border-radius: var(--radius-sm);
}

.civava-prose figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-gray);
}

.civava-prose .aligncenter {
	margin-inline: auto;
}

.civava-prose .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.civava-prose .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

/* Bez ovoga bi footer "upao" pored uz sliku sa float-om. */
.civava-prose::after {
	content: "";
	display: table;
	clear: both;
}

/* --- Tabele --- */

.civava-prose .wp-block-table {
	/* Uska tabela na telefonu skroluje unutar sebe umesto da razvuce stranicu. */
	overflow-x: auto;
}

.civava-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.civava-prose th,
.civava-prose td {
	padding: 12px 14px;
	border: 1px solid var(--c-border);
	text-align: left;
	vertical-align: top;
}

.civava-prose th {
	background: var(--c-cream-50);
	font-weight: 600;
	color: var(--c-ink);
}

/* --- Kod --- */

.civava-prose code {
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	background: var(--c-cream-100);
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.civava-prose pre {
	padding: 20px;
	overflow-x: auto;
	border-radius: var(--radius-sm);
	background: var(--c-cream-100);
	font-family: var(--font-mono);
	font-size: 14px;
	line-height: 1.6;
}

.civava-prose pre code {
	padding: 0;
	background: none;
}

/* --- Dugme-blok: isti izgled kao .civava-btn--primary --- */

.civava-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 24px;
	border-radius: 0;
	background: var(--c-bronze);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.civava-prose .wp-block-button__link:hover,
.civava-prose .wp-block-button__link:focus-visible {
	background: var(--c-gold);
	color: var(--c-white);
}

/* --- Numerisane stranice (wp_link_pages) --- */

.civava-page__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2.5em;
	font-size: 15px;
}

.civava-page__pages a,
.civava-page__pages > span {
	padding: 6px 12px;
	border: 1px solid var(--c-border);
	text-decoration: none;
}

.civava-page__pages a:hover {
	border-color: var(--c-bronze);
	color: var(--c-bronze);
}

@media (max-width: 600px) {
	.civava-page__head {
		margin-bottom: 32px;
	}

	.civava-page__title::after {
		margin-top: 16px;
	}

	.civava-prose {
		font-size: 16px;
		line-height: 1.7;
	}

	.civava-prose h2 {
		font-size: 24px;
	}

	.civava-prose h3 {
		font-size: 20px;
	}

	/* Na uskom ekranu float ostavlja premalo mesta tekstu pored slike. */
	.civava-prose .alignleft,
	.civava-prose .alignright {
		float: none;
		margin-inline: 0;
	}
}