/* W2 visual authority lives in theme.json; this file maps its semantic roles. */
:root {
  --cic-color-background: var(--wp--custom--cic--modes--light--background);
  --cic-color-surface: var(--wp--custom--cic--modes--light--surface);
  --cic-color-elevated: var(--wp--custom--cic--modes--light--elevated);
  --cic-color-text-primary: var(--wp--custom--cic--modes--light--text-primary);
  --cic-color-text-secondary: var(--wp--custom--cic--modes--light--text-secondary);
  --cic-color-text-muted: var(--wp--custom--cic--modes--light--text-muted);
  --cic-color-border: var(--wp--custom--cic--modes--light--border);
  --cic-color-border-strong: var(--wp--custom--cic--modes--light--border-strong);
  --cic-color-action-primary: var(--wp--custom--cic--modes--light--action-primary);
  --cic-color-action-secondary: var(--wp--custom--cic--modes--light--action-secondary);
  --cic-color-accent: var(--wp--custom--cic--modes--light--accent);
  --cic-color-on-action: var(--wp--custom--cic--modes--light--on-action);
  --cic-color-focus: var(--wp--custom--cic--modes--light--focus);
  --cic-color-success: var(--wp--custom--cic--modes--light--success);
  --cic-color-warning: var(--wp--custom--cic--modes--light--warning);
  --cic-color-error: var(--wp--custom--cic--modes--light--error);
  --cic-color-product-available: var(--wp--custom--cic--modes--light--product-available);
  --cic-color-product-on-request: var(--wp--custom--cic--modes--light--product-on-request);
  --cic-color-product-unavailable: var(--wp--custom--cic--modes--light--product-unavailable);
  --cic-gutter: var(--wp--preset--spacing--40);
  --cic-motion-duration: var(--wp--custom--cic--motion--duration);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --cic-color-background: var(--wp--custom--cic--modes--dark--background);
  --cic-color-surface: var(--wp--custom--cic--modes--dark--surface);
  --cic-color-elevated: var(--wp--custom--cic--modes--dark--elevated);
  --cic-color-text-primary: var(--wp--custom--cic--modes--dark--text-primary);
  --cic-color-text-secondary: var(--wp--custom--cic--modes--dark--text-secondary);
  --cic-color-text-muted: var(--wp--custom--cic--modes--dark--text-muted);
  --cic-color-border: var(--wp--custom--cic--modes--dark--border);
  --cic-color-border-strong: var(--wp--custom--cic--modes--dark--border-strong);
  --cic-color-action-primary: var(--wp--custom--cic--modes--dark--action-primary);
  --cic-color-action-secondary: var(--wp--custom--cic--modes--dark--action-secondary);
  --cic-color-accent: var(--wp--custom--cic--modes--dark--accent);
  --cic-color-on-action: var(--wp--custom--cic--modes--dark--on-action);
  --cic-color-focus: var(--wp--custom--cic--modes--dark--focus);
  --cic-color-success: var(--wp--custom--cic--modes--dark--success);
  --cic-color-warning: var(--wp--custom--cic--modes--dark--warning);
  --cic-color-error: var(--wp--custom--cic--modes--dark--error);
  --cic-color-product-available: var(--wp--custom--cic--modes--dark--product-available);
  --cic-color-product-on-request: var(--wp--custom--cic--modes--dark--product-on-request);
  --cic-color-product-unavailable: var(--wp--custom--cic--modes--dark--product-unavailable);
  color-scheme: dark;
}

/* With JS unavailable, system preference is the only available automatic signal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cic-color-background: var(--wp--custom--cic--modes--dark--background);
    --cic-color-surface: var(--wp--custom--cic--modes--dark--surface);
    --cic-color-elevated: var(--wp--custom--cic--modes--dark--elevated);
    --cic-color-text-primary: var(--wp--custom--cic--modes--dark--text-primary);
    --cic-color-text-secondary: var(--wp--custom--cic--modes--dark--text-secondary);
    --cic-color-text-muted: var(--wp--custom--cic--modes--dark--text-muted);
    --cic-color-border: var(--wp--custom--cic--modes--dark--border);
    --cic-color-border-strong: var(--wp--custom--cic--modes--dark--border-strong);
    --cic-color-action-primary: var(--wp--custom--cic--modes--dark--action-primary);
    --cic-color-action-secondary: var(--wp--custom--cic--modes--dark--action-secondary);
    --cic-color-accent: var(--wp--custom--cic--modes--dark--accent);
    --cic-color-on-action: var(--wp--custom--cic--modes--dark--on-action);
    --cic-color-focus: var(--wp--custom--cic--modes--dark--focus);
    --cic-color-success: var(--wp--custom--cic--modes--dark--success);
    --cic-color-warning: var(--wp--custom--cic--modes--dark--warning);
    --cic-color-error: var(--wp--custom--cic--modes--dark--error);
    --cic-color-product-available: var(--wp--custom--cic--modes--dark--product-available);
    --cic-color-product-on-request: var(--wp--custom--cic--modes--dark--product-on-request);
    --cic-color-product-unavailable: var(--wp--custom--cic--modes--dark--product-unavailable);
    color-scheme: dark;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-block-start: var(--cic-gutter);
}

body {
  margin: 0;
  background: var(--cic-color-background);
  color: var(--cic-color-text-primary);
}

:where(p, h1, h2, h3, h4, h5, h6, li, a, td, th) {
  overflow-wrap: anywhere;
}

:where(img, video, svg, iframe) {
  max-inline-size: 100%;
}

:where(img, video) {
  block-size: auto;
}

:where(button, input, select, textarea) {
  max-inline-size: 100%;
  min-inline-size: 0;
  font: inherit;
}

:where(button, select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
  min-block-size: 2.75rem;
  padding: var(--wp--preset--spacing--20);
  border: 1px solid var(--cic-color-border);
  background: var(--cic-color-surface);
  color: var(--cic-color-text-primary);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cic-color-focus);
  outline-offset: 3px;
}

a {
  color: var(--cic-color-text-primary);
  text-underline-offset: 0.18em;
}

:where(.wp-element-button, .cic-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  background: var(--cic-color-action-primary);
  color: var(--cic-color-on-action);
  text-align: center;
}

.cic-container {
  inline-size: min(calc(100% - 2 * var(--cic-gutter)), var(--wp--style--global--wide-size));
  margin-inline: auto;
}

.cic-main,
.cic-header,
.cic-footer {
  padding-block: var(--wp--preset--spacing--40);
}

.cic-stack > * + * {
  margin-block-start: var(--wp--preset--spacing--40);
}

.cic-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}

.cic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--wp--preset--spacing--40);
}

:where(.cic-grid, .cic-cluster, .cic-sidebar-layout) > * {
  min-inline-size: 0;
}

.cic-sidebar-layout {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

/* Sole layout breakpoint: enough space for filters plus readable main content. */
@media (min-width: 64rem) {
  .cic-sidebar-layout {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  }
}

.cic-table-region {
  max-inline-size: 100%;
  overflow-x: auto;
}

.cic-table-region table {
  inline-size: 100%;
  border-collapse: collapse;
}

:where(th, td) {
  padding: var(--wp--preset--spacing--20);
  border-block-end: 1px solid var(--cic-color-border);
  text-align: start;
}

.cic-mode-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
}

.cic-color-mode[hidden] {
  display: none;
}

.cic-mode-status {
  display: block;
  color: var(--cic-color-text-secondary);
}

.cic-header .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

.cic-skip-link {
  position: absolute;
  inset-inline-start: var(--cic-gutter);
  inset-block-start: var(--cic-gutter);
  z-index: 100000;
  padding: var(--wp--preset--spacing--30);
  background: var(--cic-color-surface);
  color: var(--cic-color-text-primary);
}

.cic-skip-link:not(:focus) {
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.skip-link.screen-reader-text:focus {
  background: var(--cic-color-surface);
  color: var(--cic-color-text-primary);
  outline: 3px solid var(--cic-color-focus);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cic-motion-duration: 0ms;
  }

  html {
    scroll-behavior: auto;
  }
}