/*
 * ABP child theme CSS overrides.
 *
 * Strict policy: ONLY CSS that Elementor's native controls cannot produce.
 * Anything visible the client should adjust must go through a widget/container
 * setting (image_border_radius, border_border, _position, container_type=grid,
 * grid_columns_grid, etc.) so they can edit it in the Elementor UI.
 *
 * Remaining rules, by section, with a note on WHY they stay:
 *   1. html font-smoothing — not a widget setting; global Tailwind preflight parity.
 *   2. .abp-sm-only — utility for a <br> inside text-editor HTML; Elementor has
 *      no per-breakpoint visibility control on inline HTML nodes.
 *   3. .abp-aspect-4-3 — Image widget has no aspect-ratio crop control.
 *      image_custom_dimension scales rather than crops.
 *   4. .abp-fv-viewall white-space — button text wrap prevention at narrow
 *      widths; Elementor button widget has no white-space control.
 */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* The off-screen mobile menu panel uses `position: fixed; transform:
	   translateX(100%)` to hide itself at rest. The transformed bounding box
	   extends past the viewport's right edge and contributes to document
	   scrollWidth → visible horizontal scrollbar. `overflow-x: clip` blocks
	   the scroll without creating a scroll container (unlike `overflow: hidden`,
	   which breaks sticky positioning on descendants). */
	overflow-x: clip;
}

/* Tailwind parity: `<br class="abp-sm-only">` = `hidden sm:inline` (sm=640). */
.abp-sm-only { display: none; }
@media (min-width: 640px) { .abp-sm-only { display: inline; } }

/* Aspect-ratio utility for Image widgets. Elementor's image widget doesn't
   crop by default — this forces a 4:3 box with object-fit:cover. */
.abp-aspect-4-3 img,
.abp-aspect-4-3 .elementor-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* "BEKIJK VOLLEDIGE VOORRAAD →" — keep button text on one line at narrow widths. */
.abp-fv-viewall .elementor-button {
	white-space: nowrap;
}

/*
 * Scroll-triggered nav background. The NextJS navbar is transparent over the
 * Hero and fades to bg-dark/90 + backdrop-blur once the user scrolls past
 * ~50px. Elementor Pro's Sticky effect adds `.elementor-sticky--effects` when
 * the scroll threshold (sticky_effects_offset) is crossed — there's no native
 * control for per-state background styling, so this bridges that gap.
 */
.abp-navbar {
	transition: background-color 300ms ease, backdrop-filter 300ms ease;
}
.abp-navbar.elementor-sticky--effects {
	background-color: rgba(17, 24, 39, 0.9) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/*
 * News card hover zoom. NextJS uses `group-hover:scale-105` with a 500ms
 * transition on the <Image>, so hovering anywhere on the card zooms just the
 * image — not the date badge or title. Elementor has no "scale child on parent
 * hover" control, so the media layer is a separate inner container that we
 * position and animate here.
 *
 * z-index stacking (inside .abp-news-card):
 *   .abp-news-card__media  0  — image
 *   .abp-news-card::before 1  — Elementor's gradient overlay (forced above media)
 *   .date badge / title    2  — already set on the widgets themselves
 */
/* Specificity bump: Elementor's frontend.min.css ships
   `.e-con { position: var(--position); }` and loads AFTER the theme, so a plain
   `.abp-news-card__media` selector loses the cascade battle at equal specificity.
   `.abp-news-card .abp-news-card__media` (0,2,0) wins over `.e-con` (0,1,0). */
.abp-news-card .abp-news-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	transition: transform 500ms ease;
}
.abp-news-card:hover .abp-news-card__media {
	transform: scale(1.05);
}
.abp-news-card::before {
	z-index: 1;
}