/**
 * Koredge Agenda - Fallback styles for theme structural classes.
 *
 * The plugin templates reuse a handful of structural class names that belong to
 * the host theme (kg-article, kg-editable-content, kg-button, kg-badge,
 * kg-slider…). When the plugin runs on a theme that does not provide them, the
 * markup would render completely unstyled. This file supplies a neutral,
 * deliberately plain baseline for those classes only.
 *
 * Everything lives in the `koredge-agenda-fallback` cascade layer: unlayered
 * CSS — which is what themes ship — always wins over layered CSS whatever the
 * specificity, so a theme that defines these classes keeps full control without
 * having to fight `!important` or selector weight.
 *
 * Disable entirely with:
 *   add_filter( 'koredge_agenda_enqueue_fallback_css', '__return_false' );
 */

@layer koredge-agenda-fallback {

	/* ---------------------------------------------------------------------
	   Design tokens consumed by the plugin stylesheets.
	   Redeclared here so the fallback layer is self-sufficient even if
	   front-agenda.css is dequeued or loaded out of order.
	   --------------------------------------------------------------------- */
	:root {
		--kg--spacing: 1rem;
		--kg--spacing--xsmall: 0.5rem;
		--kg--spacing--small: 0.75rem;
		--kg--spacing--smedium: 1rem;
		--kg--spacing--medium: 1.5rem;
		--kg--spacing--large: 2rem;
		--kg--spacing--xlarge: 3rem;
		--kg--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		--kg--font-family-medium: var(--kg--font-family);
		--kg-header-height: 0px;
	}

	/* ---------------------------------------------------------------------
	   Page shell
	   --------------------------------------------------------------------- */
	.kg-content {
		width: 100%;
	}

	.kg-article {
		position: relative;
		margin: 0;
	}

	.kg-article__header {
		position: relative;
	}

	.kg-article__header-image {
		display: block;
		width: 100%;
		margin: 0;
	}

	.kg-article__header-image img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.kg-container-title {
		width: min(100%, 1200px);
		margin-inline: auto;
		padding: var(--kg--spacing--large) var(--kg--spacing);
	}

	.kg-article__header__page__title {
		margin: 0;
		font-family: var(--kg--font-family);
		font-size: clamp(1.75rem, 4vw, 2.75rem);
		line-height: 1.15;
	}

	.kg-article__content {
		width: min(100%, 1200px);
		margin-inline: auto;
		padding: var(--kg--spacing--large) var(--kg--spacing);
	}

	/* Decorative background pattern — purely ornamental in the theme. */
	.kg-patern-content {
		display: none;
	}

	/* Generic rich-text wrapper. Kept minimal on purpose: it must not fight
	   the host theme's typography when one is present. */
	.kg-editable-content {
		font-family: var(--kg--font-family);
		line-height: 1.6;
	}

	.kg-editable-content img {
		max-width: 100%;
		height: auto;
	}

	/* ---------------------------------------------------------------------
	   Inline SVG icons
	   The plugin markup drives icon sizing/colour through these two custom
	   properties; without a rule reading them the icons keep their hardcoded
	   width/height attributes.
	   --------------------------------------------------------------------- */
	.kg-svg-icon {
		width: var(--icon-size, 1em);
		height: var(--icon-size, 1em);
		color: var(--icon-color, currentColor);
		flex-shrink: 0;
		vertical-align: middle;
	}

	/* ---------------------------------------------------------------------
	   Buttons & badges
	   --------------------------------------------------------------------- */
	.kg-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--kg--spacing--xsmall);
		padding: var(--kg--spacing--small) var(--kg--spacing);
		border: 1px solid var(--kg-events-color-primary, #dc6e4c);
		border-radius: 5px;
		background-color: var(--kg-events-color-primary, #dc6e4c);
		color: var(--kg-events-color-light, #fff);
		font-family: var(--kg--font-family);
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.kg-button:hover,
	.kg-button:focus-visible {
		background-color: var(--kg-events-color-light, #fff);
		color: var(--kg-events-color-primary, #dc6e4c);
		text-decoration: none;
	}

	.kg-button-reset {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		line-height: 1;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
	}

	.kg-badge {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 4px;
		background-color: var(--kg-events-color-primary, #dc6e4c);
		color: var(--kg-events-color-light, #fff);
		font-family: var(--kg--font-family);
		font-size: 0.875rem;
		line-height: 1.2;
	}

	/* ---------------------------------------------------------------------
	   Slider shell (Swiper-driven, see related-events-slider.js)
	   Swiper needs the wrapper to be a flex row and the slides to be
	   flex-shrink:0; without the theme's slider CSS the markup collapses.
	   --------------------------------------------------------------------- */
	.kg-slider {
		position: relative;
		overflow: hidden;
	}

	.kg-slider__wrapper {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.kg-slider__slide {
		flex-shrink: 0;
		margin: 0;
		list-style: none;
	}

	.kg-slider__controls {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--kg--spacing--small);
	}

	.kg-slider__navigation {
		display: flex;
		align-items: center;
		gap: var(--kg--spacing--xsmall);
	}

	.kg-slider__navigation-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--kg-events-color-primary, #dc6e4c);
		border-radius: 50%;
		background: var(--kg-events-color-primary, #dc6e4c);
		color: var(--kg-events-color-light, #fff);
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.kg-slider__navigation-button:hover,
	.kg-slider__navigation-button:focus-visible {
		background: var(--kg-events-color-light, #fff);
		color: var(--kg-events-color-primary, #dc6e4c);
	}

	.kg-slider__pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	/* ---------------------------------------------------------------------
	   Accessibility helper — also declared in front-agenda.css, repeated here
	   so the single-event template never leaks visually-hidden labels.
	   --------------------------------------------------------------------- */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}