/**
 * Dews Blog Template — frontend styles
 * Applied globally but only touch elements that use these markers:
 *   - .elementor-button[data-filter]  → filter pills
 *   - .e-loop-item                    → Elementor Loop Grid cards
 *   - .dbt-btn-row                    → optional wrapper for button rows
 *
 * Change the accent color in ONE place: --dbt-accent
 */

:root {
	--dbt-accent:      #F09F43;
	--dbt-accent-ink:  #000000;
	--dbt-bg:          #000000;
	--dbt-text:        #FFFFFF;
	--dbt-text-soft:   #cccccc;
	--dbt-text-mute:   #b8b8b8;
	--dbt-card-border: #333333;
}

/* ── Filter buttons (Elementor button widget with data-filter="slug") ── */
.elementor-button[data-filter] {
	transition: all .2s ease;
}
.elementor-button[data-filter].active,
.elementor-button[data-filter].active:hover {
	background-color: var(--dbt-accent) !important;
	border-color:     var(--dbt-accent) !important;
}
.elementor-button[data-filter].active,
.elementor-button[data-filter].active .elementor-button-text {
	color: var(--dbt-accent-ink) !important;
}

/* ── Hidden loop items when a category filter is applied ── */
.e-loop-item.blog-hidden {
	display: none !important;
}

/* ── Fix broken flex gaps on rows of buttons (Elementor default eats gap) ── */
.dbt-btn-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	justify-content: center !important;
}
.dbt-btn-row > .elementor-widget {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
}
.dbt-btn-row > .elementor-widget .elementor-button-wrapper {
	display: inline-flex !important;
}

/* ── Force 16:9 aspect ratio + cover on loop card featured images ── */
.e-loop-item .elementor-widget-image img {
	aspect-ratio: 16 / 9 !important;
	object-fit:   cover !important;
	width:  100% !important;
	height: auto !important;
	display: block !important;
	background: var(--dbt-card-border) !important;
}

/* ── Card look on dark bg (readable defaults; override in Elementor if needed) ── */
.e-loop-item {
	background: var(--dbt-bg);
	border: 1px solid var(--dbt-card-border);
	border-radius: 14px;
	overflow: hidden;
}