/*
 * Base UI layer for Bricks child theme.
 * Keep effects subtle and performance-safe.
 */

:root {
  /* Bridge variables mapped to Bricks variables only. */
  --ui-primary: var(--primary, var(--bricks-color-primary, var(--secondary)));
  --ui-secondary: var(--secondary, var(--bricks-color-secondary, var(--primary)));
  --ui-white: var(--blanco, var(--white, var(--ui-secondary)));
  --ui-black: var(--negro, var(--black, var(--bricks-color-text, var(--ui-secondary))));
  --ui-text: var(--negro, var(--black, var(--bricks-color-text, var(--ui-secondary))));
  --ui-muted: var(--gris, var(--bricks-color-text-muted, var(--ui-secondary)));

  --ui-bg-page: var(--ui-white);
  --ui-bg-contrast: var(--ui-black);
  --ui-surface: var(--ui-white);
  --ui-border: var(--ui-muted);

  --ui-focus-ring: var(--ui-primary);
  --ui-selection-bg: var(--ui-black);
  --ui-selection-text: var(--ui-white);
  --ui-anchor-offset: var(--header-height, clamp(5rem, 8vw, 7rem));

  --ui-radius-sm: 0.5rem;
  --ui-duration-fast: 160ms;
  --ui-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  --ui-scrollbar-thumb: var(--ui-bg-contrast);
  --ui-scrollbar-track: var(--ui-bg-page);
}

::selection {
  background: var(--ui-selection-bg);
  color: var(--ui-selection-text);
}

::-moz-selection {
  background: var(--ui-selection-bg);
  color: var(--ui-selection-text);
}

/* Accessible focus ring: never remove default focus without replacement. */
:where(
  a,
  button,
  input:not([type="hidden"]),
  textarea,
  select,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--ui-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ui-radius-sm);
}

/* Link polish without forcing color overrides. */
:where(a[href]):not(:where(.bricks-button, .wp-block-button__link)) {
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  transition-property: text-underline-offset;
  transition-duration: var(--ui-duration-fast);
  transition-timing-function: var(--ui-ease-standard);
}

:where(a[href]):not(:where(.bricks-button, .wp-block-button__link)):hover {
  text-underline-offset: 0.2em;
}

:where([id]) {
  scroll-margin-top: var(--ui-anchor-offset);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]),
  textarea,
  select
) {
  max-width: 100%;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  color: var(--ui-text);
  transition-property: border-color, color, background-color;
  transition-duration: var(--ui-duration-fast);
  transition-timing-function: var(--ui-ease-standard);
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]),
  textarea,
  select
)::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}

:where(textarea) {
  resize: vertical;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]),
  textarea,
  select
):focus-visible {
  border-color: var(--ui-primary);
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--ui-primary);
}

/* Scrollbar: subtle and neutral. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track {
  background-color: var(--ui-scrollbar-track);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--ui-scrollbar-thumb);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.is-wysiwyg > :first-child {
  margin-top: 0;
}

.is-wysiwyg > :last-child {
  margin-bottom: 0;
}

.is-wysiwyg :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.4em;
  margin-bottom: 0.55em;
  line-height: 1.15;
}

.is-wysiwyg :where(p, ul, ol, blockquote, table, figure, pre) {
  margin-top: 0;
  margin-bottom: 1em;
}

.is-wysiwyg :where(ul, ol) {
  padding-inline-start: 1.25em;
}

.is-wysiwyg li + li {
  margin-top: 0.35em;
}

.is-wysiwyg :where(blockquote) {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--ui-primary);
}

.is-wysiwyg :where(table) {
  width: 100%;
  border-collapse: collapse;
}

.is-wysiwyg :where(th, td) {
  padding: 0.75em 0.9em;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--ui-border);
}

.is-wysiwyg :where(hr) {
  border: 0;
  border-top: 1px solid var(--ui-border);
  margin: 1.5em 0;
}

/* Accessibility: reduced motion users get immediate content. */
@media (prefers-reduced-motion: reduce) {
  :where(a[href]) {
    transition-duration: 0ms;
  }
}