/*
Template Name: Pet Love
Color scheme: Cuccioli per Sempre — coordinato al depliant a 3 ante
Palette: verde salvia + rosa corallo
 */
:root {
	--bs-primary: #6f9a5a;         /* verde salvia medio — bottoni, titoli, accenti */
	--bs-primary-rgb: 111, 154, 90;
	--bs-secondary: #3f5a35;       /* verde foresta scuro — titoli forti ("uno di famiglia") */
	--bs-dark: #d99a8a;            /* rosa corallo — accenti decorativi, bordi */
	--bs-border-color: #cde0bd;    /* verde salvia chiarissimo — bordi soft */
	--bs-light: #edf4e4;           /* verde pastello — sfondo sezioni chiare */
}

/* Coordinamento con il depliant: rifiniture visive */

/* Nav-link: mantieni testo bianco anche in hover/active */
#main-nav .nav-link:hover,
#main-nav .nav-link:focus,
#main-nav .navbar-nav .nav-link.active,
#main-nav .navbar-nav .nav-link.show {
	color: #fff !important;
}

/* Titoli "hero" in verde foresta come sul depliant */
h1, h2, .h1, .h2 {
	color: var(--bs-primary);
}

/* Lead eyebrow in verde salvia */
.lead {
	color: var(--bs-secondary) !important;
}

/* Link in verde primario, hover corallo */
a {
	color: var(--bs-primary);
}
a:hover, a:active {
	color: var(--bs-dark);
}

/* Icone "check" dei bullet come pallino rotondo verde (come nel depliant) */
.list-unstyled .fa-check {
	background: var(--bs-primary);
	color: #fff !important;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	margin-right: 8px !important;
	flex-shrink: 0;
}

/* Sezione "perché sceglierci" in rosa corallo come la fascia bassa del depliant */
#donate-section {
	background: linear-gradient(180deg, #f3c9bf 0%, #e9ae9e 100%) !important;
	position: relative;
}
/* Zig-zag in cima: denti bianchi (colore sezione sopra) che tagliano il rosa */
#donate-section.zig-zag-top::before {
	top: 0;
	background: linear-gradient(135deg, white 25%, transparent 25%),
	            linear-gradient(-135deg, white 25%, transparent 25%);
	background-size: 12px 12px;
	background-position: -50px;
}
#donate-section h2,
#donate-section .lead {
	color: #fff !important;
}
#donate-section .fa-check {
	background: #fff;
	color: var(--bs-dark) !important;
}
#donate-section .btn-primary {
	background: #fff;
	border-color: #fff;
	color: var(--bs-secondary);
}
#donate-section .btn-primary:hover {
	background: var(--bs-secondary);
	border-color: var(--bs-secondary);
	color: #fff;
}

/* Icon-features più morbide: cerchio verde salvia chiaro */
.feature-with-icon .icon-features {
	background: var(--bs-light);
	color: var(--bs-primary);
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}
.feature-with-icon:hover .icon-features {
	background: var(--bs-primary);
	color: #fff;
}

/* CTA bar con overlay verde scuro (senza immagine cta1.jpg) */
#cta-1 {
	background: linear-gradient(135deg, var(--bs-secondary) 0%, var(--bs-primary) 100%) !important;
}


/* Clouds divider in verde pastello */
#clouds path {
	fill: var(--bs-light);
	stroke: var(--bs-light);
}

/* Footer: logo in cerchio bianco */
.footer-logo-link {
	display: inline-block;
}
.footer-logo-circle {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.10);
	margin: 0 auto;
	overflow: hidden;
}
.footer-logo-circle img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Immagini circolari davvero tonde (non ovali): forza rapporto 1:1 */
img.rounded-circle {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	max-width: 440px;
	height: auto;
}

/* Navbar: bordo inferiore a zig-zag (denti verdi, interstizi trasparenti) */
#template-header {
	position: relative;
}
#main-nav {
	position: relative;
}
#main-nav::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 12px;
	background:
		linear-gradient(-135deg, var(--bs-primary) 6px, transparent 0) 0 0,
		linear-gradient(135deg, var(--bs-primary) 6px, transparent 0) 0 0;
	background-size: 12px 12px;
	background-repeat: repeat-x;
	pointer-events: none;
	z-index: 3;
}

/* Brand badge: box bianco che contiene il logo e sporge sopra top-bar e navbar.
   Allineato al bordo sinistro del .container Bootstrap (non del row full-width) */
.brand-badge {
	position: absolute !important;
	top: 0;
	left: calc(50% - 570px);      /* xl: .container max-width 1140px */
	width: 200px;
	min-height: calc(100% + 30px);
	background: #fff;
	padding: 18px 20px 28px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 4;
	margin: 0 !important;
}
@media (min-width: 1400px) {
	.brand-badge {
		left: calc(50% - 660px);  /* xxl: .container max-width 1320px */
	}
}
.brand-badge img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 !important;
}
/* Zig-zag inferiore sul box bianco, denti bianchi coerenti con quelli della navbar */
.brand-badge::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 12px;
	background:
		linear-gradient(-135deg, #fff 6px, transparent 0) 0 0,
		linear-gradient(135deg, #fff 6px, transparent 0) 0 0;
	background-size: 12px 12px;
	background-repeat: repeat-x;
	pointer-events: none;
}
@media (max-width: 1199px) {
	.brand-badge {
		position: static !important;
		left: auto;
		width: auto;
		min-height: 0;
		padding: 6px 10px;
	}
	.brand-badge img {
		max-width: 56px;
	}
	.brand-badge::after {
		display: none;
	}
}

/* Hero: testi in chiaro su foto (box trasparente) */
#home-main .box-main,
#home-main .box-main h1,
#home-main .box-main .h1,
#home-main .box-main h2,
#home-main .box-main .h2,
#home-main .box-main h3,
#home-main .box-main .h3,
#home-main .box-main p,
#home-main .box-main span {
	color: #fff !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
#home-main .box-main .btn-outline-primary {
	color: #fff;
	border-color: #fff;
}
#home-main .box-main .btn-outline-primary:hover {
	background: #fff;
	color: var(--bs-secondary);
}

/* Hero slideshow: slide 2 (uomo-golden) riflessa orizz. */
.ken-burns-slideshow .bg:nth-child(2) {
	transform: scale(1.2) scaleX(-1);
	animation-name: kenburns-mirror;
}
@keyframes kenburns-mirror {
	10% { opacity: 1; }
	25% { opacity: 1; transform: scale(1) scaleX(-1); }
	40% { opacity: 0; transform: scale(1) scaleX(-1); }
}

/* Sezione Contatti: stessa fascia rosa del donate-section, con zig-zag superiore */
#contatti {
	background: linear-gradient(180deg, #f3c9bf 0%, #e9ae9e 100%);
	position: relative;
}
#contatti.zig-zag-top::before {
	top: 0;
	background: linear-gradient(135deg, white 25%, transparent 25%),
	            linear-gradient(-135deg, white 25%, transparent 25%);
	background-size: 12px 12px;
	background-position: -50px;
}
#contatti h2,
#contatti h3,
#contatti .h5,
#contatti .lead,
#contatti p,
#contatti strong,
#contatti a {
	color: #fff !important;
	text-shadow: none;
}
#contatti a:hover {
	color: var(--bs-secondary) !important;
	text-shadow: none;
}
#contatti .social-icons a {
	background: rgba(255,255,255,0.25);
	color: #fff !important;
}
#contatti .social-icons a:hover {
	background: #fff;
	color: var(--bs-primary) !important;
}

/* Card servizi: bordo tondeggiante pulito, ombra soffusa */
#servizi .wrapper {
	background: #fff;
	border: 1px solid var(--bs-border-color);
}
#servizi .adopt-wrapper h3 {
	color: var(--bs-secondary);
}