/* Links navigate; native buttons perform actions. Both may use this treatment. */
.button {
  --button-background: var(--color-action);
  --button-foreground: var(--color-on-action);
  --button-border: var(--color-action);
  --button-hover-background: var(--color-action-hover);
  --button-hover-foreground: var(--color-on-action);
  --button-hover-border: var(--color-action-hover);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  max-inline-size: 100%;
  padding: 0.75rem 1.25rem;
  border: var(--border-width) solid var(--button-border);
  border-radius: var(--radius-control);
  background-color: var(--button-background);
  color: var(--button-foreground);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.button:where(:hover, :active):not(:disabled) {
  border-color: var(--button-hover-border);
  background-color: var(--button-hover-background);
  color: var(--button-hover-foreground);
  text-decoration: none;
}

.button--secondary {
  --button-background: transparent;
  --button-foreground: var(--color-text);
  --button-border: var(--color-text);
  --button-hover-background: var(--color-control-hover);
  --button-hover-foreground: var(--color-text);
  --button-hover-border: var(--color-text);
}

.button:disabled {
  border-color: var(--color-stone);
  background-color: var(--color-stone);
  color: var(--color-charcoal);
  cursor: not-allowed;
}

/* Gold is decorative on light surfaces; text uses a readable semantic role. */
.detail-rule {
  inline-size: clamp(2rem, 4vw, 4rem);
  block-size: var(--border-width);
  border: 0;
  background-color: var(--color-architectural-gold);
}

.section-number {
  color: var(--color-detail-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  font-variant-numeric: tabular-nums;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--gutter);
  max-inline-size: calc(100% - 2 * var(--gutter));
  min-block-size: var(--target-min);
  padding: 0.75rem 1rem;
  border: var(--border-width) solid var(--color-urban-black);
  background-color: var(--color-white);
  color: var(--color-urban-black);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-100% - 2rem));
}

.skip-link:focus {
  color: var(--color-urban-black);
  transform: none;
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }

  .button:disabled {
    border-color: GrayText;
    color: GrayText;
  }
}