/*
 * WordPress integration fixes for the ported header.
 *
 * The header CSS came across verbatim from the Avada child theme, which means it
 * still carries three assumptions that are no longer true. Rather than edit the
 * ported file — it is deliberately byte-identical to its origin — the corrections
 * live here, each with the reason it exists.
 *
 * @package Fixfactor
 */

/* =============================================================================
   1. ADMIN BAR STACKING
   .fixfactor-header sits at z-index 999999. The WordPress admin bar sits at
   99999 — four digits shorter. So the header renders above the admin bar, and
   the bar's drop-down submenus open into that space and disappear behind it.
   That is the "submenus do not show" bug.
   The admin bar is chrome and belongs on top of everything the site draws.
   ========================================================================== */

#wpadminbar {
	z-index: 1000000;
}

/* =============================================================================
   2. FIXED HEADER vs ADMIN BAR
   Below 767px the header becomes position: fixed; top: 0. A fixed element is
   positioned against the viewport, so the `html { margin-top }` WordPress adds
   for the admin bar does not move it — the header slides underneath the bar.
   WordPress uses 46px for the bar below 783px and 32px above it.
   ========================================================================== */

@media screen and (max-width: 767px) {
	body.admin-bar .fixfactor-header {
		top: 46px;
	}
}

/*
 * NO desktop rule here, deliberately.
 *
 * Above 767px the header is position: relative, and `top` on a relative element
 * offsets it visually without freeing the space it occupied — which produced a
 * 32px band of white above the header for logged-in users. The offset is only
 * ever needed while the header is actually fixed, which is below 767px.
 */

/* =============================================================================
   3. CONTENT OFFSET UNDER THE FIXED HEADER
   The original rule was `#wrapper { padding-top: 70px }`. #wrapper was an Avada
   element and no longer exists, so on mobile the fixed header overlapped the top
   of every page with nothing reserving space for it.
   ========================================================================== */

@media screen and (max-width: 767px) {
	body {
		padding-top: 70px;
	}
}

/* =============================================================================
   4. HOMEPAGE BLOG CARDS
   Keep the three editorial cards balanced on desktop, give them one clear CTA,
   and stack them on phones instead of squeezing all three into the viewport.
   ========================================================================== */

body.home #ff-home .fixfactor-blog-section {
	background:
		linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
	border-top: 1px solid rgba(0, 170, 196, 0.1);
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts {
	align-items: stretch;
	gap: 1.75rem;
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts > li {
	min-width: 0;
	border-color: rgba(0, 122, 146, 0.22);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(17, 24, 39, 0.07);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease;
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts > li:hover {
	border-color: rgba(0, 122, 146, 0.55);
	box-shadow: 0 18px 42px rgba(17, 24, 39, 0.12);
	transform: translateY(-4px);
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__featured-image {
	height: 220px;
	background: #eaf4f6;
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__featured-image img {
	transition: transform 0.35s ease;
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts > li:hover
	.wp-block-latest-posts__featured-image img {
	transform: scale(1.025);
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__post-title {
	margin: 1.4rem 1.5rem 0.75rem;
	color: #111827;
	font-size: 1.15rem;
	line-height: 1.35;
	letter-spacing: -0.015em;
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__post-excerpt {
	margin: 0 1.5rem 1.25rem;
	color: #4b5563;
	line-height: 1.65;
	-webkit-line-clamp: 3;
	max-height: 4.95em;
}

body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__read-more {
	display: none;
}

body.home #ff-home .fixfactor-blog-section .fixfactor-blog-read-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: auto 1.5rem 1.5rem;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(0, 122, 146, 0.14);
	color: #007a92;
	font-size: 0.9rem;
	font-weight: 750;
	line-height: 1.2;
	text-decoration: none;
}

body.home #ff-home .fixfactor-blog-section .fixfactor-blog-read-more:hover {
	color: #005f73;
	text-decoration: none;
}

body.home #ff-home .fixfactor-blog-section .fixfactor-blog-read-more:focus-visible {
	border-radius: 4px;
	outline: 3px solid rgba(0, 170, 196, 0.35);
	outline-offset: 4px;
}

body.home #ff-home .fixfactor-blog-section .fixfactor-blog-read-more-arrow {
	font-size: 1.15rem;
	transition: transform 0.2s ease;
}

body.home #ff-home .fixfactor-blog-section .fixfactor-blog-read-more:hover
	.fixfactor-blog-read-more-arrow {
	transform: translateX(3px);
}

@media screen and (max-width: 768px) {
	body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts {
		grid-template-columns: 1fr;
	}

	body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__featured-image {
		height: 210px;
	}

	body.home #ff-home .fixfactor-blog-section .wp-block-latest-posts__post-title {
		margin-top: 1.25rem;
	}
}