/* ==========================================================================
   Project Carnation — Reset, base, and global application rules
   ========================================================================== */

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

* {
    margin: 0;
}

html {
    /* The brand theme is light only. `only` opts out of browser auto-darkening
       (Chromium Auto Dark Mode, Brave Night Mode, Edge page colours), which would
       otherwise invert the ivory surface to dark brown under OS/browser dark mode. */
    color-scheme: only light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Keep in-page anchor targets clear of the sticky site header */
    scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    min-height: 100vh;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-leading);
    font-weight: var(--text-body-weight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

hr {
    border: 0;
    border-top: var(--keyline);
}

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

/* ---- Links ------------------------------------------------------------- */
a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
    color: var(--color-link-hover);
}

/* ---- Focus ------------------------------------------------------------- */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Elements focused programmatically (e.g. <h1 tabindex="-1"> via FocusOnNavigate)
   do not show a ring for pointer users; keyboard focus still shows :focus-visible. */
[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

/* FocusOnNavigate moves focus to the page <h1> (tabindex="-1") on load so screen
   readers announce the page. The heading is not an interactive control and cannot
   be reached with Tab, so no ring is drawn for it. Interactive controls keep theirs. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* ---- Accessibility utilities ------------------------------------------ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 1100;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--text-label-md-size);
    font-weight: var(--text-label-weight);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
    color: var(--color-on-primary);
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ---- Blazor framework UI ---------------------------------------------- */
.blazor-error-boundary {
    padding: var(--space-md) var(--space-lg);
    border: var(--border-width) solid var(--color-danger);
    border-left-width: 4px;
    border-radius: var(--radius);
    background-color: var(--color-surface-raised);
    color: var(--color-danger);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.validation-message {
    color: var(--color-danger);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-leading);
}

.invalid {
    outline: var(--border-width) solid var(--color-danger);
}