/* Web Awesome font family overrides to match Figma designs */
:root {
    --wa-font-family-body: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
    --wa-font-family-heading: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
    --wa-font-family-longform: 'Source Serif 4', ui-serif, serif;
    --wa-font-family-code: 'Source Code Pro', ui-monospace, monospace;
}

html,
body {
    font-family: var(--wa-font-family-body);
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}

a {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
}

a:hover {
    text-decoration: var(--wa-link-decoration-hover);
}

.footer-text {
    font-size: var(--wa-font-size-2xs);
    line-height: 1.5;
}

/* ── Universe tile (wa-card) ──────────────────────────────────────── */

.universe-tile-name {
    text-decoration: none;
}

.universe-tile-name:hover {
    text-decoration: var(--wa-link-decoration-hover);
}

/* wa-skeleton defaults to border-radius: pill. The cover-image skeleton
   inside a loading tile should match wa-card's own corner rounding instead. */
wa-card[aria-busy] [slot="media"] wa-skeleton::part(indicator) {
    border-radius: var(--wa-border-radius-s);
}

/* wa-skeleton's shadow DOM does not honour prefers-reduced-motion.
   Pause the sheen/pulse animation for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    wa-skeleton::part(indicator) {
        animation: none;
    }
}

wa-page {
    padding: 8px;
}

/* The wa-page shadow-DOM .base grid uses min-height:100vh, but it sits inside
   the host's padding box.  Subtract the vertical padding so the footer stays
   in view when content is short. */
wa-page::part(base) {
    min-height: calc(100dvh - 16px);
}

/* wa-page sets an explicit height on the menu and aside parts (via an inline
   --main-height CSS variable) for sticky-sidebar behaviour.  When those slots
   are empty the fixed height still inflates the grid row, pushing the footer
   past the viewport.  Resetting to auto lets empty slots collapse. */
wa-page::part(aside),
wa-page::part(menu) {
    height: auto;
    max-height: none;
}

wa-page::part(navigation-toggle) {
    margin-inline-start: 0;
    margin-inline-end: var(--wa-space-xs);
}

wa-page::part(header) {
    border-bottom: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

wa-page::part(footer) {
    border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

wa-page[view='desktop']::part(main-content) {
    height: 100%;
}

wa-page::part(menu) {
    height: 100%;
}

wa-page>header[slot="header"] {
    padding-block-start: 0;
    padding-block-end: var(--wa-space-3xs);
    padding-inline: 0;
}

wa-page>main[data-testid="main-content"] {
    padding-block: var(--wa-space-xs);
    padding-inline-end: 0;
    padding-inline-start: 0;
    height: 100%;
}

wa-page>footer[slot="footer"] {
    padding-block-start: var(--wa-space-xs);
    padding-block-end: 0;
    padding-inline: 0;
}

wa-page>nav[slot="navigation"] {
    border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    height: 100%;
    margin-inline-end: var(--wa-space-xs);
    padding-block: var(--wa-space-xs);
    padding-inline-start: 0;
    padding-inline-end: var(--wa-space-s);
}

wa-page>nav[slot="navigation"] wa-divider {
    margin-block: var(--wa-space-2xs);
}

/* ── Form validation ─────────────────────────────────────────────── */

wa-input[aria-invalid="true"]::part(base),
wa-textarea[aria-invalid="true"]::part(base),
wa-file-input[aria-invalid="true"]::part(base) {
    border-color: var(--wa-color-danger-on-quiet);
}

wa-input[aria-invalid="true"]::part(hint),
wa-textarea[aria-invalid="true"]::part(hint),
wa-file-input[aria-invalid="true"]::part(hint) {
    color: var(--wa-color-danger-on-quiet);
}

@media (forced-colors: active) {

    wa-input[aria-invalid="true"]::part(base),
    wa-textarea[aria-invalid="true"]::part(base),
    wa-file-input[aria-invalid="true"]::part(base) {
        border-color: Mark;
    }

    wa-input[aria-invalid="true"]::part(hint),
    wa-textarea[aria-invalid="true"]::part(hint),
    wa-file-input[aria-invalid="true"]::part(hint) {
        color: Mark;
    }
}