/**
 * Core/query-pagination frontend styles
 *
 * Objectif: appliquer le design system (tokens) à la pagination des Query loops.
 * Compatible WP 6.9.
 */

:root {
  --sncf-query-pagination-item-size: var(--wp--custom--semantic--size--m, 40px);
  --sncf-query-pagination-radius: var(--wp--custom--semantic--border--radius--base, 10px);
  --sncf-query-pagination-gap: var(--wp--custom--semantic--spacing--200, 16px);
  --sncf-query-pagination-item-gap: var(--wp--custom--semantic--spacing--050, 4px);
  --sncf-query-pagination-item-padding-x: var(--wp--custom--semantic--spacing--base, 8px);
  --sncf-query-pagination-item-padding-y: var(--wp--custom--primitive--spacing--6, 6px);
}

.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sncf-query-pagination-gap) !important;
}

.wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sncf-query-pagination-item-gap) !important;
}

/* Base item (numbers + prev/next links) */
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers .page-numbers {
  box-sizing: border-box;
  min-width: var(--sncf-query-pagination-item-size);
  height: var(--sncf-query-pagination-item-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sncf-query-pagination-item-padding-y) var(--sncf-query-pagination-item-padding-x);
  border-radius: var(--sncf-query-pagination-radius);
  background-color: var(
    --wp--custom--semantic--color--background--action--tertiary--default,
    transparent
  );
  color: var(
    --wp--custom--semantic--color--text--tertiary,
    var(--wp--custom--semantic--color--text--secondary, currentColor)
  );
  text-decoration: none;
  border: none;
}

/* Typography (Label 01) */
.wp-block-query-pagination {
  font-size: var(--wp--custom--semantic--font--label--01--font-size, 16px);
  line-height: var(--wp--custom--semantic--font--label--01--line-height, 22px);
  letter-spacing: var(--wp--custom--semantic--font--label--01--letter-spacing, 0px);
}

/* Hover/press */
.wp-block-query-pagination a:hover,
.wp-block-query-pagination-numbers a.page-numbers:hover {
  background-color: var(
    --wp--custom--semantic--color--background--action--tertiary--hover,
    var(--wp--custom--semantic--color--background--action--secondary--selected--default, #f5f9fc)
  );
}

.wp-block-query-pagination a:active,
.wp-block-query-pagination-numbers a.page-numbers:active {
  background-color: var(
    --wp--custom--semantic--color--background--action--tertiary--press,
    #eaf2f9
  );
}

/* Focus (dashed border) */
.wp-block-query-pagination a:focus-visible,
.wp-block-query-pagination-numbers .page-numbers:focus-visible {
  outline: none;
  border: var(--wp--custom--semantic--border--width--large, 2px) dashed
    var(--wp--custom--semantic--color--border--focus--base--on-primary, currentColor);
}

/* Current page */
.wp-block-query-pagination-numbers .page-numbers.current {
  background-color: var(
    --wp--custom--semantic--color--background--action--secondary--selected--default,
    #f5f9fc
  );
  color: var(
    --wp--custom--semantic--color--foreground--action--tertiary--default,
    var(--wp--custom--semantic--color--text--link--default, currentColor)
  );
  font-weight: 800;
}

/* Dots / disabled-looking item */
.wp-block-query-pagination-numbers .page-numbers.dots {
  background-color: var(
    --wp--custom--semantic--color--background--action--tertiary--disabled,
    transparent
  );
  color: var(--wp--custom--semantic--color--text--disabled, #b9b9b9);
}

/* Prev/Next layout: align icon + label */
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
  height: var(--sncf-query-pagination-item-size);
  padding-left: var(--wp--custom--component--button--padding--with-icon--left-m, 16px);
  padding-right: var(--wp--custom--component--button--padding--with-icon--right-m, 16px);
  gap: var(--wp--custom--component--button--gap, 8px);
  justify-content: center;
}

/* Small screens: icon-only prev/next (requires arrow enabled) */
@media (max-width: 768px) {
  .wp-block-query-pagination-previous a,
  .wp-block-query-pagination-next a {
    width: var(--sncf-query-pagination-item-size);
    min-width: var(--sncf-query-pagination-item-size);
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    position: relative;
  }

  .wp-block-query-pagination-previous a .wp-block-query-pagination-previous-arrow,
  .wp-block-query-pagination-next a .wp-block-query-pagination-next-arrow {
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}