/**
 * Partner Page Styles
 *
 * Fixes rendering issues on partner child pages (/partners/{slug}/):
 *   1. Cream background throughout — eliminates white gaps between sections
 *   2. Consistent section spacing using Zededa spacing tokens
 *   3. Learn More cards styled as feature cards (dark teal, accent bar)
 *
 * Scoped to .zededa-partner-page body class (added by functions.php filter).
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Page Background — Cream throughout
   Legacy Elementor sections use margin (not padding) for vertical spacing,
   which exposes the page background between sections. Setting the page
   background to cream ensures seamless color continuity.
   ========================================================================== */

.zededa-partner-page {
	background-color: var(--color-container-cream) !important;
}

/* Legacy sections without a Zededa container class inherit white background.
   Force cream on all top-level sections within partner pages. */
.zededa-partner-page .elementor-top-section {
	background-color: var(--color-container-cream);
}

/* ==========================================================================
   2. Section Spacing — Consistent with Zededa theme
   Legacy Elementor sections use arbitrary margin values (200px, 80px, 25px)
   set per-element in the editor. Override to use the design system spacing
   token (--spacing-4xl = 64px) for uniform vertical rhythm.
   ========================================================================== */

.zededa-partner-page .elementor-top-section {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: var(--spacing-4xl) !important;
	padding-bottom: var(--spacing-4xl) !important;
}

/* Container sections (.e-con) already have spacing from container-styles.css.
   Ensure partner page containers sit flush (no extra margins). */
.zededa-partner-page .e-con.e-parent {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   3. Learn More Cards — Feature Card Styling
   Cards are <a> containers linking to resources (models, briefs, videos).
   Styled to match the Zededa feature card pattern: dark teal background,
   white text, orange accent bar on top.
   ========================================================================== */

.zededa-partner-page a.e-con.e-child {
	background-color: var(--color-container-blue) !important;
	border: var(--border-width-thin) solid var(--color-brand-primary);
	border-top: 12px solid var(--color-brand-primary);
	border-radius: var(--border-radius-lg);
	transition: background-color 0.3s ease, border-color 0.3s ease;
	overflow: clip;
}

/* Card text — white on dark teal */
.zededa-partner-page a.e-con.e-child p,
.zededa-partner-page a.e-con.e-child span,
.zededa-partner-page a.e-con.e-child .elementor-heading-title {
	color: var(--color-neutral-white) !important;
}

/* Card hover — orange background */
.zededa-partner-page a.e-con.e-child:hover {
	background-color: var(--color-brand-primary) !important;
	border-color: var(--color-brand-primary);
}

.zededa-partner-page a.e-con.e-child:hover p,
.zededa-partner-page a.e-con.e-child:hover span,
.zededa-partner-page a.e-con.e-child:hover .elementor-heading-title {
	color: var(--color-neutral-white) !important;
}

/* Card focus — accessibility */
.zededa-partner-page a.e-con.e-child:focus-visible {
	outline: 2px solid var(--color-neutral-white);
	outline-offset: 2px;
}

/* ==========================================================================
   4. Learn More Grid — Consistent gap using spacing tokens
   The card parent containers use 80px gaps set in Elementor. Override
   to use the standard card grid gap (--spacing-xl = 32px).
   ========================================================================== */

.zededa-partner-page .e-con.e-parent:has(> a.e-con.e-child) {
	gap: var(--spacing-xl) !important;
	--gap: var(--spacing-xl) !important;
	--row-gap: var(--spacing-xl) !important;
	--column-gap: var(--spacing-xl) !important;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.zededa-partner-page .elementor-top-section {
		padding-top: var(--spacing-3xl) !important;
		padding-bottom: var(--spacing-3xl) !important;
	}

	/* Stack cards vertically on mobile */
	.zededa-partner-page .e-con.e-parent:has(> a.e-con.e-child) {
		flex-direction: column !important;
		gap: var(--spacing-lg) !important;
		--gap: var(--spacing-lg) !important;
		--row-gap: var(--spacing-lg) !important;
	}
}