/*
 * Fluffy Feather Farm Animals: front end.
 * Loaded only on animal pages and pages that use an [fff_...] shortcode.
 *
 * Show/hide rules for an Elementor template. Add these to a widget or container's
 * Advanced > CSS Classes:
 *   fff-dna-button          hidden when the animal has no DNA report
 *   fff-facetime-button     hidden when "Show FaceTime button" is off
 *   fff-pricing             hidden when status isn't Available
 *   fff-status-badge-block  shown only when status is Sold or Reserved
 *   fff-pricing-section     the whole pricing block, hidden for "Not for sale"
 *   fff-pricing-detail      price/deposit/transport/contact, hidden when Sold or Reserved
 *   fff-parents-section     hidden when no parents are picked
 *   fff-mother / fff-father hidden when that parent isn't picked
 */

body.fff-no-dna .fff-dna-button,
body.fff-facetime-off .fff-facetime-button,
body.fff-pricing-off .fff-pricing,
body.fff-pricing-off .fff-pricing-detail,
body.fff-status-not-for-sale .fff-pricing-section,
body.fff-no-parents .fff-parents-section,
body.fff-no-mother .fff-mother,
body.fff-no-father .fff-father,
body:not(.fff-status-sold):not(.fff-status-reserved) .fff-status-badge-block {
	display: none !important;
}

/* ---------- Shared pieces (shortcodes) ---------- */

.fff-label {
	font-family: "Jost", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #b24b32;
	font-size: 1rem;
	margin: 1.4em 0 0.35em;
}

.fff-button {
	display: inline-block;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #c67d34;
	color: #fff !important;
	text-decoration: none !important;
	padding: 0.8em 1.6em;
	border: 2px solid #c67d34;
	border-radius: 4px;
	line-height: 1.2;
	transition: background 0.15s, color 0.15s;
}
.fff-button:hover,
.fff-button:focus { background: #384168; border-color: #384168; }
.fff-button.is-outline { background: transparent; color: #384168 !important; border-color: #384168; }
.fff-button.is-outline:hover { background: #384168; color: #fff !important; }

.fff-features { list-style: none; margin: 0 0 1em; padding: 0; }
.fff-features li { margin: 0 0 0.4em; padding-left: 1.5em; position: relative; }
.fff-features.has-icon li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: #c67d34;
}
.fff-feature-label { font-weight: 700; }

.fff-parents { margin: 2.5em 0; text-align: center; }
.fff-parents-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: 2em; max-width: 760px; margin: 0 auto; }
.fff-parent-photo { width: 100%; height: auto; border-radius: 6px; display: block; margin: 0 auto 0.6em; }
.fff-parent p { margin: 0.15em 0; }
.fff-parent-role { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #b24b32; font-size: 0.85rem; }
.fff-parent-name { font-family: "Jost", sans-serif; font-weight: 600; text-transform: uppercase; color: #384168; font-size: 1.5rem; }

.fff-pricing-block {
	max-width: 520px;
	margin: 2.5em auto;
	padding: 1.6em 1.8em;
	border: 3px solid #384168;
	border-radius: 8px;
	text-align: center;
}
.fff-pricing-block p { margin: 0 0 0.5em; }
.fff-pricing-status { font-family: "Jost", sans-serif; font-weight: 600; text-transform: uppercase; color: #c67d34; font-size: 1.5rem; letter-spacing: 0.05em; }
.fff-pricing-row .fff-label { display: block; margin: 0.6em 0 0; font-size: 0.85rem; }
.fff-pricing-value { font-family: "Jost", sans-serif; font-weight: 600; font-size: 2rem; color: #384168; }
.fff-pricing-note { font-size: 0.95rem; margin-top: 0.8em !important; }
.fff-pricing-block .fff-button { margin-top: 0.6em; }
.fff-pricing-block.is-badge { border: 0; padding: 0; }

.fff-status-badge {
	display: inline-block;
	font-family: "Jost", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 2.4rem;
	line-height: 1;
	padding: 0.35em 0.8em;
	border: 5px solid #b24b32;
	color: #b24b32;
	border-radius: 8px;
	transform: rotate( -4deg );
}
.fff-status-badge.fff-badge-reserved { border-color: #c67d34; color: #c67d34; }

.fff-gallery { display: grid; grid-template-columns: repeat( var( --fff-cols, 3 ), 1fr ); gap: 10px; margin: 2em 0; }
.fff-gallery img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* ---------- Built-in page layout ---------- */

.fff-page { color: #353535; font-family: "Arvo", serif; }
.fff-page img { max-width: 100%; height: auto; }

.fff-hero {
	position: relative;
	margin: 0 0 2.5em;
	padding: 5em 1.5em;
	background: #384168 center / cover no-repeat;
	border-radius: 6px;
	text-align: center;
	color: #fff;
	overflow: hidden;
}
.fff-hero.has-image::before { content: ""; position: absolute; inset: 0; background: rgba( 30, 34, 56, 0.45 ); }
.fff-hero-inner { position: relative; }
.fff-hero-title {
	font-family: "Jost", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	font-size: clamp( 2.2rem, 6vw, 4rem );
	line-height: 1.05;
	margin: 0;
}
.fff-hero-line { font-family: "Jost", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.6em 0 0; font-size: 1.1rem; }

.fff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5em; align-items: start; margin: 0 0 2.5em; }
.fff-headline { font-family: "Jost", sans-serif; font-weight: 600; text-transform: uppercase; color: #384168; font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.6em; }
.fff-intro-text { margin-bottom: 1.2em; }
.fff-col-photo img { width: 100%; border-radius: 6px; display: block; }
.fff-details .fff-label:first-child { margin-top: 0; }
.fff-value { margin: 0 0 0.6em; }
.fff-things p:last-child { margin-bottom: 1.2em; }

.fff-shared-section { margin: 2em 0; }
.fff-contact { scroll-margin-top: 100px; margin: 2em 0; }
.fff-page-buttons { display: flex; gap: 0.8em; flex-wrap: wrap; justify-content: center; margin: 2em 0 1em; }

@media ( max-width: 767px ) {
	.fff-row { grid-template-columns: 1fr; gap: 1.5em; }
	.fff-details .fff-col-photo { order: 2; }
	.fff-hero { padding: 3.5em 1em; }
}