/**
 * Blog Hero Widget Styles — Blog-specific overrides
 *
 * Structural/shared CSS lives in assets/css/shared/hero-shared.css.
 * This file contains only what is unique to the blog hero widget:
 * - min-height and background color
 * - Eyebrow sunrise color + link styles
 * - Elementor Kit link color override (white, not dark)
 * - Meta line (date, reading time, author)
 * - Social share icons
 * - Tag pills
 * - Blog-specific responsive adjustments
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Container Override (outer — removes container padding)
   ========================================================================== */

.e-con:has(.elementor-widget-zededa_blog_hero) {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* Override legacy single-post top padding (legacy-page-overrides.css sets
   --padding-top: --spacing-xl on .elementor-location-single > .e-con.e-parent).
   Blog hero must sit flush against the navigation bar — no gap. */
.elementor-location-single > .e-con.e-parent:has(.elementor-widget-zededa_blog_hero) {
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ==========================================================================
   2. Elementor Kit Specificity Overrides — Blog-specific
   Blog hero links stay white (contrast against teal background).
   ========================================================================== */

[class*="elementor-kit-"] .zededa-blog-hero a {
	color: var(--color-neutral-white);
	text-decoration: none;
}

/* ==========================================================================
   3. Root Container — Blog-specific properties
   ========================================================================== */

.zededa-blog-hero {
	min-height: 500px;
	background-color: #245868;
}

/* ==========================================================================
   4. Eyebrow — sunrise gold + link styles
   ========================================================================== */

.zededa-blog-hero-eyebrow {
	color: var(--color-brand-sunrise);
}

/* Link wrapping the eyebrow text (links to /blog) */
.zededa-blog-hero-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.zededa-blog-hero-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   5. Meta Line (date | reading time | author)
   ========================================================================== */

.zededa-blog-hero-meta {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(0.875rem, calc(0.19vw + 0.83rem), 1rem);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	color: var(--color-neutral-white);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-sm);
}

.zededa-blog-hero-meta a {
	color: var(--color-neutral-white);
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

.zededa-blog-hero-meta a:hover {
	opacity: 0.8;
}

/* ==========================================================================
   6. Social Sharing Icons
   ========================================================================== */

.zededa-blog-hero-share {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.zededa-blog-share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--color-neutral-white);
	transition: opacity 0.2s ease;
}

.zededa-blog-share-link:hover {
	opacity: 0.7;
}

.zededa-blog-share-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ==========================================================================
   7. Tags (inside hero)
   ========================================================================== */

.zededa-blog-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.zededa-blog-hero-tag {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--border-radius-full, 999px);
	padding: var(--spacing-xs) var(--spacing-md);
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: var(--typography-font-size-sm, 14px);
	color: var(--color-neutral-white);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.zededa-blog-hero-tag:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   8. Responsive: Tablet (max-width: 1024px) — Blog-specific
   ========================================================================== */

@media (max-width: 1024px) {

	.zededa-blog-hero {
		min-height: 420px;
	}

}

/* ==========================================================================
   9. Responsive: Mobile (max-width: 768px) — Blog-specific
   ========================================================================== */

@media (max-width: 768px) {

	.zededa-blog-hero {
		min-height: 400px;
	}

	.zededa-blog-hero-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs);
	}

	.zededa-blog-hero-meta .zededa-blog-meta-separator {
		display: none;
	}

	.zededa-blog-hero-tags {
		padding: 0;
	}

}