/*
 * Eldren custom stylesheet (WEB-225 Module 9)
 * Theme:   Blocksy Child (Eldren)
 * Loaded:  functions.php -> wp_enqueue_style( 'eldren-custom', ... )
 *
 * Colors come from the --eldren-* design tokens defined in the Elementor kit
 * (Site Settings). Fallback values match the kit so archive templates that are
 * not built in Elementor still render correctly if the kit CSS is missing.
 */

/* Shared motion and glow values used by the sections below. */
:root {
	--eldren-speed: 0.25s;
	--eldren-speed-fast: 0.2s;
	--eldren-card-glow: 0 18px 40px -18px rgba(93, 62, 249, 0.55);
	/* Quoted on purpose: the kit's --eldren-font-body is an unquoted
	   Source Sans 3, which is invalid as a font-family value. */
	--eldren-font-label: "Source Sans 3", sans-serif;
}

/* ---------------------------------------------------------------------------
 * 1. Blog and archive post cards (Blocksy archive template)
 *    Blocksy's default card shadow is tuned for light themes and disappears on
 *    the dark background, and the cards have no hover or focus feedback.
 *    Blocksy reads these custom properties, so overriding them is cleaner than
 *    overriding its declarations. Blocksy prints entries.min.css in the footer,
 *    after this file, so these selectors rely on specificity, not order.
 * ------------------------------------------------------------------------ */
.entries[data-cards="boxed"] .entry-card {
	--card-border: 1px solid var(--eldren-border, #3B3252);
	--theme-border-radius: 8px;
	--theme-box-shadow: none;
}

.entries[data-cards="boxed"] .entry-card:hover,
.entries[data-cards="boxed"] .entry-card:focus-within {
	border-color: var(--eldren-gold, #D4AF5F);
	transform: translateY(-4px);
}

.entries[data-cards="boxed"] .entry-card:hover .entry-title a,
.entries[data-cards="boxed"] .entry-card:focus-within .entry-title a {
	color: var(--eldren-gold, #D4AF5F);
}

/* Slow zoom on the featured image, clipped to its frame. */
.entries[data-cards="boxed"] .entry-card .ct-media-container {
	overflow: hidden;
}

.entries[data-cards="boxed"] .entry-card .ct-media-container img {
	transition: transform 0.5s ease;
}

.entries[data-cards="boxed"] .entry-card:hover .ct-media-container img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
 * 2. Archive page titles (Blog, category, tag, author, search)
 *    Blocksy renders these at 30px, while every Elementor page opens with a
 *    40-64px display heading. This brings the archives in line and adds a
 *    short gold rule like the ones used across the Elementor sections.
 * ------------------------------------------------------------------------ */
:is(.blog, .archive, .search) .hero-section .entry-header .page-title {
	--theme-font-size: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
	--theme-line-height: 1.1;
}

:is(.blog, .archive, .search) .hero-section .entry-header .page-title::after {
	content: "";
	display: block;
	width: 5rem;
	height: 2px;
	margin-block-start: 0.75rem;
	background: linear-gradient(90deg, var(--eldren-gold, #D4AF5F) 40%, transparent);
}

/* The "Category" / "Tag" prefix. Blocksy only styles it for the type-2 hero,
   so with the larger title it read as part of the name. Match the site's
   eyebrow labels (.eldren-eyebrow) instead. */
:is(.blog, .archive, .search) .hero-section .page-title .ct-title-label {
	display: block;
	margin-block-end: 0.5rem;
	font-family: var(--eldren-font-label);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--eldren-gold, #D4AF5F);
}

/* ---------------------------------------------------------------------------
 * 3. Card motion shared by the archive cards and the Elementor .eldren-card
 *    class. .eldren-card already moves up 4px and turns gold on hover, but it
 *    had no transition, so the card jumped. Easing it and adding a soft violet
 *    glow makes the existing effect read as intentional.
 * ------------------------------------------------------------------------ */
.entries[data-cards="boxed"] .entry-card,
.elementor .eldren-card {
	transition:
		transform var(--eldren-speed) ease,
		border-color var(--eldren-speed) ease,
		box-shadow var(--eldren-speed) ease;
}

.entries[data-cards="boxed"] .entry-card:hover,
.entries[data-cards="boxed"] .entry-card:focus-within,
.elementor .eldren-card:hover {
	box-shadow: var(--eldren-card-glow);
}

/* ---------------------------------------------------------------------------
 * 4. Eldren buttons (Elementor global classes)
 *    Hover already swaps the colors; a short lift and a glow in the button's
 *    own accent color make the calls to action feel clickable.
 * ------------------------------------------------------------------------ */
.elementor :is(.eldren-btn-primary, .eldren-btn-secondary) {
	--eldren-btn-glow: rgba(139, 120, 255, 0.8);
	transition:
		color var(--eldren-speed-fast) ease,
		background-color var(--eldren-speed-fast) ease,
		box-shadow var(--eldren-speed-fast) ease,
		transform var(--eldren-speed-fast) ease;
}

.elementor .eldren-btn-secondary {
	--eldren-btn-glow: rgba(212, 175, 95, 0.7);
}

.elementor :is(.eldren-btn-primary, .eldren-btn-secondary):hover {
	box-shadow: 0 10px 24px -10px var(--eldren-btn-glow);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
 * 5. Gradient heading safety net
 *    The Home hero H1 uses an Elementor gradient with "background-clip: text"
 *    and a transparent text color. Elementor outputs only the unprefixed
 *    property; in a browser that does not support it the text would be
 *    invisible on a gold box, so fall back to solid parchment text.
 * ------------------------------------------------------------------------ */
@supports not (background-clip: text) {
	.elementor h1.eldren-title {
		background-image: none;
		color: var(--eldren-parchment, #F0E5C8);
	}
}

/* ---------------------------------------------------------------------------
 * 6. Reduced motion
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	:root {
		--eldren-speed: 0s;
		--eldren-speed-fast: 0s;
	}

	.entries[data-cards="boxed"] .entry-card .ct-media-container img {
		transition: none;
	}

	.entries[data-cards="boxed"] .entry-card:hover,
	.entries[data-cards="boxed"] .entry-card:focus-within,
	.entries[data-cards="boxed"] .entry-card:hover .ct-media-container img,
	.elementor .eldren-card:hover,
	.elementor :is(.eldren-btn-primary, .eldren-btn-secondary):hover {
		transform: none;
	}
}