/* parts/footer.css — NOVI footer udruženja „Poželi želju".
   Jedini izvor istine za footer (#colophon). Tamna pozadina,
   svetli tekst, brend akcenti, Phosphor inline social ikonice.
   Sve boje iz --pz-* tokena (def. u child style.css :root).
   ============================================================ */


/* ============================================================
   1) OKVIR — #colophon: tamna traka sa gornjom akcentnom linijom.
   (id selektor nadjačava roditeljski footer stil.)
   ============================================================ */

#colophon,
footer#colophon {
	position: relative;
	margin-top: 48px;
	padding: 52px 20px 22px;
	background-color: var(--pz-header-dark);
	color: var(--pz-line-soft);
	border-top: 0;
	font-family: var(--pz-font);
	line-height: 1.7;
}

/* Suptilna gornja akcentna linija (narandžasta → zlatna). */
#colophon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pz-accent), var(--pz-gold));
}

/* Roditeljski .site-info je samo omotač — bez sopstvenog stila. */
#colophon .site-info {
	margin: 0;
	padding: 0;
}


/* ============================================================
   2) MREŽA — 3 kolone (brend+social | kontakt | podaci).
   ============================================================ */

.pz-footer {
	max-width: var(--pz-maxw);
	margin: 0 auto;
}

.pz-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 32px 40px;
	align-items: start;
}


/* ============================================================
   3) BREND KOLONA
   ============================================================ */

.pz-footer__name {
	margin: 0 0 6px;
	color: var(--pz-surface);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pz-footer__tagline {
	margin: 0 0 18px;
	color: var(--pz-line-soft);
	font-size: 14px;
	opacity: .85;
}


/* ============================================================
   4) SOCIAL IKONICE — Phosphor inline SVG.
   ~22px, zlatne → hover narandžaste sa okruglom pozadinom i liftom.
   ============================================================ */

.pz-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pz-footer__social li {
	margin: 0;
	padding: 0;
	border: 0;
}

.pz-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--pz-gold);
	transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.pz-footer__social-link svg {
	width: 23px;
	height: 23px;
	display: block;
	fill: currentColor;   /* ikonica prati color linka (default zlatna, hover bela) */
}

.pz-footer__social-link:hover,
.pz-footer__social-link:focus {
	/* Ikonica UVEK vidljiva: bela na akcentnoj pozadini — boja ikonice i
	   boja pozadine nikad nisu iste. */
	color: #fff !important;   /* nadjačava roditeljski plavi hover i --pz-surface */
	background-color: var(--pz-accent);
	transform: translateY(-2px);
}


/* ============================================================
   5) KONTAKT / PODACI KOLONE
   ============================================================ */

.pz-footer__col-title {
	margin: 0 0 12px;
	color: var(--pz-surface);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pz-footer__contact ul,
.pz-footer__legal ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pz-footer__contact li,
.pz-footer__legal li {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: var(--pz-line-soft);
	font-size: 14px;
}

.pz-footer__contact li:last-child,
.pz-footer__legal li:last-child {
	margin-bottom: 0;
}

/* Footer linkovi — zlatni, hover u narandžastoj. */
#colophon .pz-footer a {
	color: var(--pz-gold);
	transition: color .18s ease;
}
#colophon .pz-footer a:hover,
#colophon .pz-footer a:focus {
	color: var(--pz-accent) !important;   /* nadjačava roditeljski plavi hover */
}
/* Social link ne sme da postane zlatan tekst — on nosi ikonicu. */
#colophon .pz-footer .pz-footer__social-link {
	color: var(--pz-gold);
}


/* ============================================================
   6) DONJA LINIJA — copyright.
   ============================================================ */

.pz-footer__bottom {
	max-width: var(--pz-maxw);
	margin: 34px auto 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pz-footer__bottom p {
	margin: 0;
	color: var(--pz-line-soft);
	font-size: 13px;
	opacity: .8;
}


/* ============================================================
   7) RESPONSIVNOST — kolone se slažu na manjim ekranima.
   ============================================================ */

@media (max-width: 860px) {
	.pz-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px 32px;
	}
	.pz-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	#colophon,
	footer#colophon {
		padding: 44px 18px 20px;
	}
	.pz-footer__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}


/* ============================================================
   8) DUGME „NA VRH" (.ir-arriba > i.fa.fa-arrow-up)
   Moderno okruglo dugme u akcentu, bela ikonica, hover lift.
   (JS i dalje kontroliše prikaz/skrivanje.)
   ============================================================ */

.ir-arriba {
	display: none;                 /* JS ga prikazuje na skrolu — ne diramo */
	right: 20px;
	bottom: 20px;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: var(--pz-accent);
	color: var(--pz-surface);
	border: 0;                     /* poništava roditeljski beli okvir */
	border-radius: 50%;
	box-shadow: var(--pz-shadow-lg);
	line-height: 46px;
	text-align: center;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ir-arriba:hover,
.ir-arriba:focus {
	background-color: var(--pz-accent-700);
	transform: translateY(-3px);
	box-shadow: var(--pz-shadow-lg);
}
.ir-arriba i.fa.fa-arrow-up {
	color: var(--pz-surface);
	font-size: 18px;
	line-height: 46px;
	vertical-align: middle;
}