/**
 * Zuriyat — SEO and page structure: the styling its own markup needs.
 *
 * Three jobs, nothing more:
 *
 *   1. Give the homepage's promoted h1 the exact type scale of the h2 it
 *      replaced, so a semantic fix costs nothing visually.
 *   2. Style the internal-linking block added under articles and products.
 *   3. Style the category introductions.
 *
 * No colour decisions are made here. Everything reuses the tokens the design
 * system already publishes, with the measured fallbacks the site is using
 * today, so this file cannot start a second palette.
 *
 * The idiom is the footer's: hairlines rather than boxes, no shadows, no
 * radii, nothing filled that is not filled elsewhere on the site.
 */

/* -------------------------------------------------------------------------
 * 1. The homepage h1
 *
 * The hero headline carries no class — it was styled by tag alone — so
 * promoting h2 to h1 would otherwise inherit Bootstrap's h1 (48px, normal
 * letter-spacing, 15px bottom margin) and the hero would visibly change.
 *
 * These values are measured from the live h2 at each of the template's three
 * breakpoints, not derived from the stylesheet:
 *
 *     >= 992px   55px / 60.5px   (line-height 1.1, letter-spacing -0.02em)
 *   768-991px    48px / 52.8px
 *     <= 767px   36px / 39.6px
 *
 * The animation delays match farmi's own, so the entrance timing is unchanged.
 * ---------------------------------------------------------------------- */

.sui-farmi .banner-area .carousel-item .content h1 {
	font-size: 55px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
	margin: 0 0 40px;
	animation-delay: 0.5s;
}

.sui-farmi .banner-area .carousel-item .content h1:nth-child(2) {
	animation-delay: 0.7s;
}

@media (max-width: 991px) {
	.sui-farmi .banner-area .carousel-item .content h1 {
		font-size: 48px;
	}
}

@media (max-width: 767px) {
	.sui-farmi .banner-area .carousel-item .content h1 {
		font-size: 36px;
	}
}

/* -------------------------------------------------------------------------
 * 2. The internal-linking block
 *
 * Two variants that share a frame: the product an article is about, and where
 * to read next. Both sit at the end of the body copy at the copy's own
 * measure, separated from it by a rule rather than by a card.
 * ---------------------------------------------------------------------- */

/* No max-width: the block aligns with the body copy it follows. Constraining
   it to a ch measure left it 611px against the article's 772px column, which
   read as a misalignment rather than as a deliberate narrower measure. */
.zf-cluster {
	margin: 40px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--zf-border, #e9e1cf);
}

.zf-cluster + .zf-cluster {
	margin-top: 28px;
}

/* The doubled class and the !important are both deliberate.

   The site carries an inline, database-generated rule:

       .blog-content p { color: #000 !important }

   pasted into the Customizer or Elementor custom CSS at some point. It forces
   every paragraph of every article to pure black, overriding the design
   system’s own body colour, and no amount of specificity beats !important.
   Matching it is the only way for this block to keep its colours.

   That rule is worth deleting at source - it is defeating the type colour on
   fourteen articles, not just here - and when it goes, these two !importants
   can go with it. Noted in the implementation report. */
.zf-cluster .zf-cluster__kicker {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sui-gold, #c89b2c) !important;
}

/* The product line reads as a sentence, because that is what it is. */
.zf-cluster .zf-cluster__lede {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--zf-charcoal, #252820) !important;
}

.zf-cluster__lede a {
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--sui-gold, #c89b2c);
}

.zf-cluster__lede a:hover {
	color: var(--zf-forest, #2a491d);
}

/* Outline, matching the footer's call to action rather than inventing a
   third button style. */
.zf-cluster__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 16px;
	padding: 11px 20px;
	border: 1px solid var(--sui-gold, #c89b2c);
	background: transparent;
	color: var(--zf-forest, #2a491d);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.zf-cluster__cta:hover,
.zf-cluster__cta:focus-visible {
	background: var(--sui-gold, #c89b2c);
	color: #ffffff;
}

.zf-cluster__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zf-cluster__list li {
	margin: 0;
	border-bottom: 1px solid var(--zf-border, #e9e1cf);
}

.zf-cluster__list li:last-child {
	border-bottom: 0;
}

.zf-cluster .zf-cluster__list a {
	display: block;
	padding: 11px 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--zf-charcoal, #252820);
	text-decoration: none;
	transition: color 0.2s ease;
}

.zf-cluster .zf-cluster__list a::after {
	content: "→";
	margin-left: 8px;
	color: var(--sui-gold, #c89b2c);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	display: inline-block;
}

.zf-cluster__list a:hover,
.zf-cluster__list a:focus-visible {
	color: var(--zf-forest, #2a491d);
}

.zf-cluster__list a:hover::after,
.zf-cluster__list a:focus-visible::after {
	opacity: 1;
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.zf-cluster__cta,
	.zf-cluster__list a,
	.zf-cluster .zf-cluster__list a::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Category introductions
 *
 * One paragraph between the category heading and the product grid. It is set
 * at the body measure and given the room the grid does not need, so it reads
 * as an introduction rather than as an SEO paragraph parked above the
 * products.
 * ---------------------------------------------------------------------- */

.zf-cat-intro {
	max-width: 62ch;
	margin: 0 0 34px;
}

.zf-cat-intro.zf-cat-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
	color: var(--zf-earth, #56544a);
}

@media (max-width: 767px) {
	.zf-cat-intro {
		margin-bottom: 26px;
	}

	.zf-cat-intro.zf-cat-intro p {
		font-size: 16px;
	}
}