/* ===========================================================================
   GaDangme — two-tone (blue → purple) accent layer.
   Loaded after style.css. Adds the prototype's signature gradient, applied
   "bold where it counts, restrained elsewhere". Colours sampled from the
   approved prototype.
   ========================================================================== */

:root {
	--brand-blue:    #3E79DF;
	--brand-purple:  #7C3AED;
	--brand-gradient: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-purple) 100%);
	--brand-gradient-dark: linear-gradient(120deg, #356bcb 0%, #6d28d9 100%);
}

/* --- Gradient wordmark / accent text -------------------------------------- */
.text-accent,
.logo-text strong {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* --- Primary CTAs → gradient fill ----------------------------------------- */
.btn-primary {
	background: var(--brand-gradient);
	border: 0;                                          /* no transparent border to show a ring */
	padding: calc(0.75rem + 2px) calc(1.75rem + 2px);   /* keep outer size equal to outline buttons */
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--brand-gradient-dark);
	color: #fff;
}

/* --- Ghost / outline buttons pick up the blue end ------------------------- */
.btn-ghost,
.btn-outline {
	border-color: var(--brand-blue);
	color: var(--brand-blue);
}
.btn-ghost:hover,
.btn-outline:hover,
.btn-ghost:focus-visible,
.btn-outline:focus-visible {
	background: var(--brand-gradient);
	border-color: transparent;
	color: #fff;
}

/* --- Event date badges → gradient ----------------------------------------- */
.event-header__badge,
.event-row__date {
	background: var(--brand-gradient);
}
.event-header__badge,
.event-header__badge *,
.event-row__date,
.event-row__date * {
	color: #fff;
}

/* --- Section landing: featured "Explore" card gets the gradient edge ------- */
.subcategory-card-featured {
	border-color: var(--brand-blue);
}
.subcategory-card-featured .subcategory-icon {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- On-image badges (article hero, magazine card) -----------------------
   Translucent-white-on-photo was unreadable; use a solid white pill with
   brand-purple text so the label is legible over any featured image. */
.badge-light,
.magazine-card-overlay .badge {
	background: #fff;
	color: var(--brand-purple);
	border-color: #fff;
}
.badge-light:hover,
.magazine-card-overlay .badge:hover {
	background: #fff;
	color: var(--brand-blue);
}