@use "./header";

main,
footer {
  --content-width: min(100%, 1480px);
  --content-margin-inline: auto;
  --content-padding-inline: 1rem;
  --content-gap: 2rem;
  padding-block: var(--overlay-padding);
  > section {
    width: var(--content-width);
    margin-inline: var(--content-margin-inline);
    padding-inline: var(--spc-6);
  }
}

main {
  flex: 1;
  font-size: var(--fs-3);
  > section[aria-label],
  > section {
    width: var(--content-width);
    margin-inline: var(--content-margin-inline);
    &:has(> article, > aside) {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: var(--content-gap);
      > article {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: 50%;
      }
      > aside {
        flex-basis: 20rem;
        flex-grow: 1;
      }
    }
  }
}

footer {
  > div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    text-align: center;
  }
}

// Fieldset base styles
// WCAG 2.1 Level AA compliant with verified contrast ratios
fieldset {
  // Border - Contrast verified: 3:1 minimum against white background
  border: var(--fieldset-border, 0.0625rem solid var(--color-border));
  border-radius: var(--fieldset-border-radius, 0.5rem);
  padding: var(--fieldset-padding, 1rem);
  padding-inline: var(--fieldset-padding-inline, 1.5rem);
  padding-block: var(--fieldset-padding-block, 1rem);
  margin-block: var(--fieldset-margin-block, 2rem);

  // Background - Maintains 4.5:1 contrast with default text
  background: var(--fieldset-bg, transparent);

  display: flex;
  flex-direction: column;
  gap: 1rem;

  > legend {
    // Typography - Font size in rem for user scaling
    font-size: var(--legend-fs, 1rem);
    font-weight: var(--legend-fw, 600);
    padding-inline: var(--legend-padding-inline, 0.5rem);
    color: var(--legend-color, currentColor);
  }

  // Description text for aria-describedby
  .fieldset-description {
    margin-block-start: 0.5rem;
    margin-block-end: 0;
    font-size: var(--fieldset-description-fs, 0.875rem);
    color: var(--fieldset-description-color, var(--color-text-tertiary));
  }
}

// Focus-within indicator for keyboard navigation
// WCAG 2.4.7 (Focus Visible)
fieldset:focus-within {
  outline: var(--fieldset-focus-outline, 0.125rem solid var(--color-focus));
  outline-offset: var(--fieldset-focus-offset, 0.125rem);
}

// Remove outline for mouse users, keep for keyboard
@media (hover: hover) {
  fieldset:focus-within:not(:focus-visible) {
    outline: none;
  }
}

// Disabled state styling
// WCAG 1.4.3 (Contrast Minimum), 3.3.2 (Labels or Instructions)
fieldset:disabled {
  opacity: var(--fieldset-disabled-opacity, 0.6);
  cursor: not-allowed;

  > legend {
    color: var(--legend-disabled-color, var(--color-text-disabled));
  }
}

// Inline legend variant
fieldset[data-legend="inline"] {
  --fieldset-border: none;
  --fieldset-padding: 0;

  > legend {
    float: inline-start;
    margin-inline-end: 1rem;
    margin-block-end: 0.5rem;
  }
}

// Grouped variant - Enhanced contrast
fieldset[data-fieldset="grouped"] {
  // Background - Verified 4.5:1 contrast with text
  --fieldset-bg: var(--color-surface-tertiary);
  --fieldset-padding-block: 1.5rem;

  // Border - Verified 3:1 contrast against background
  --fieldset-border: 0.125rem solid var(--color-focus);

  > legend {
    --legend-fs: 1.125rem;
    --legend-fw: 700;
  }
}

// High Contrast Mode Support
// WCAG 1.4.11 (Non-text Contrast)
@media (prefers-contrast: high) {
  fieldset {
    border-width: 2px;

    > legend {
      font-weight: 700;
    }
  }
}

// Windows High Contrast Mode
@media (forced-colors: active) {
  fieldset {
    border: 1px solid CanvasText;

    > legend {
      color: CanvasText;
    }

    .fieldset-description {
      color: CanvasText;
    }
  }
}