/**
 * SIA Blocks breakpoint definitions.
 *
 * This file is the single source of truth for all breakpoints.
 * It serves two roles:
 *
 *   1. BUILD-TIME: postcss.config.js points postcss-custom-media here
 *      via `importFrom`, so these definitions are available to all
 *      block SCSS files during compilation without needing to import
 *      a separate partial.
 *
 *   2. RUNTIME: This file is enqueued as the plugin stylesheet, making
 *      the CSS custom properties (colors, spacing, etc.) below available
 *      to all blocks on the front end.
 *
 * NOTE: @custom-media queries cannot be used in @media conditions at
 * runtime — browsers do not support them natively. They are resolved to
 * plain pixel values at build time by postcss-custom-media and are not
 * overridable by themes at runtime.
 *
 * To add a new breakpoint, add it here. No other files need to be updated.
 */
@custom-media --sia-blocks-bp-sm       (min-width: 480px);
@custom-media --sia-blocks-bp-md       (min-width: 768px);
@custom-media --sia-blocks-bp-below-md (max-width: 767px);
@custom-media --sia-blocks-bp-md-max   (max-width: 768px);
@custom-media --sia-blocks-bp-lg       (min-width: 992px);
@custom-media --sia-blocks-bp-below-lg (max-width: 991px);
@custom-media --sia-blocks-bp-xl       (min-width: 1200px);

/**
 * SIA Blocks — Plugin-level CSS custom property defaults.
 *
 * These provide fallback values for all --sia-blocks-* variables so
 * blocks render correctly in any theme. The active theme overrides
 * these by redefining the same variables in its own stylesheet (theme
 * stylesheets load later, so the theme wins via cascade at equal :root
 * specificity).
 *
 * Icon URLs use ../../assets/icons/ — resolves correctly from both this
 * file (assets/css/) and the compiled block CSS files (build/[block]/).
 */

:root {

	/* Icons */
	--sia-blocks-icon-back: url(../../assets/icons/arrow-left.svg);
	--sia-blocks-icon-next: url(../../assets/icons/arrow-right.svg);
	--sia-blocks-icon-chevron: url(../../assets/icons/chevron-down.svg);
	--sia-blocks-icon-close: url(../../assets/icons/x-lg.svg);
	--sia-blocks-icon-burger: url(../../assets/icons/list.svg);
	--sia-blocks-icon-search: url(../../assets/icons/search.svg);
	--sia-blocks-icon-checkmark: url(../../assets/icons/check.svg);
	--sia-blocks-icon-toggle-off: url(../../assets/icons/toggle-off.svg);
	--sia-blocks-icon-toggle-on: url(../../assets/icons/toggle2-on.svg);
	--sia-blocks-icon-plus: url(../../assets/icons/plus.svg);
	--sia-blocks-icon-dash: url(../../assets/icons/dash.svg);
	--sia-blocks-icon-facebook: url(../../assets/icons/facebook.svg);
	--sia-blocks-icon-x: url(../../assets/icons/twitter-x.svg);
	--sia-blocks-icon-email: url(../../assets/icons/envelope.svg);
	--sia-blocks-icon-link: url(../../assets/icons/arrow-up-right.svg);
	--sia-blocks-swoop-left: url(../../assets/icons/swoop-left.svg);
	--sia-blocks-swoop-right: url(../../assets/icons/swoop-right.svg);
	--sia-blocks-icon-color: currentcolor;
	--sia-blocks-icon-size: 1.5rem;

	/* Animation */
	--sia-blocks-speed: 0.2s;
	--sia-blocks-easing: ease-in-out;

	/* Borders */
	--sia-blocks-border-radius: 4px;

	/* Spacing */
	--sia-blocks-large-padding: 2rem;
	--sia-blocks-medium-padding: 1rem;
	--sia-blocks-small-margin: 0.5rem;
	--sia-blocks-medium-margin: 1rem;
	--sia-blocks-grid-gap: 0.75rem;
	--sia-blocks-grid-gap-medium: 1rem;
	--sia-blocks-grid-gap-large: 1.5rem;
	--sia-blocks-grid-gap-xlarge: 2rem;
	--sia-blocks-global-spacing: 1.5rem;
	--sia-blocks-block-element-margin-bottom: 1rem;
	--sia-blocks-block-element-small-gap: 0.5rem;
	--sia-blocks-block-element-medium-gap: 1rem;
	--sia-blocks-block-element-large-gap: 1.5rem;
	--sia-blocks-block-element-standard-gap: 1rem;
	--sia-blocks-main-navigation-items-gap: 0.5rem;

	/* Buttons */
	--sia-blocks-button-vertical-padding: 0.5rem;
	--sia-blocks-button-horizontal-padding: 1rem;
	--sia-blocks-button-border-radius: 0;

	/* Colors — inherit from active theme; fallback to neutral
	   defaults when standalone */
	--sia-blocks-color-base: var(--sia-color-base, #fff);
	--sia-blocks-color-contrast: var(--sia-color-contrast, #1a1a1a);
	--sia-blocks-color-primary: var(--sia-color-primary, #1a5276);
	--sia-blocks-color-primary-dark: var(--sia-color-primary-dark, #087a91);
	--sia-blocks-color-primary-light: var(--sia-color-primary-light, #d6eaf8);
	--sia-blocks-color-secondary-dark: var(--sia-color-secondary-dark, #333);
	--sia-blocks-color-secondary: var(--sia-color-secondary, #888);
	--sia-blocks-color-secondary-light: var(--sia-color-secondary-light, #ddd);
	/* stylelint-disable-next-line @stylistic/max-line-length */
	--sia-blocks-color-secondary-light-alt: var(--sia-color-secondary-light-alt, #f5f5f5);

	/* Typography */
	--sia-blocks-font-size-base: 1rem;
	--sia-blocks-font-size-small: 0.875rem;
	--sia-blocks-font-size-subhead-3: 1.125rem;
	--sia-blocks-font-weight-bold: 700;
	--sia-blocks-font-family-base: sans-serif;

	/* Table */
	--table-heading-background-color: #edf7f9;
}