/*
 * Brings the Wagtail admin's accent colors and page-title typography in line
 * with the public Next.js site's "night" theme (see src/app/globals.css for
 * the source values this is derived from). Loaded via the `insert_global_admin_css`
 * hook (cms/sitesettings/wagtail_hooks.py), Wagtail's own documented, supported
 * way to retheme the admin without touching its internal templates/JS.
 *
 * Scope, deliberately: only the brand accent color and page-title headings.
 * Wagtail's existing light/dark toggle, layout, and UI font for forms/tables/
 * body text are untouched — those exist for real day-to-day usability, and
 * the site's decorative display faces (Fragua/Rama Gothic) are meant for
 * large marketing headlines, not dense admin UI.
 *
 * --w-color-primary(-200) and --w-color-secondary* are composed from these
 * *-hue/-saturation/-lightness parts via calc() in Wagtail's own core.css,
 * so overriding just the three base components here is enough — every
 * derived shade (hover states, the -200/-400/etc. variants) recalculates
 * from them automatically, in both the light and dark theme variants
 * (only backgrounds/surfaces differ per theme, not this hue family).
 */

:root {
    /* Primary: the violet from the site's button/CTA gradient (#6B21A8 → #BE185D). */
    --w-color-primary-hue: 272.9;
    --w-color-primary-saturation: 67.2%;
    --w-color-primary-lightness: 39.4%;

    /* Secondary: the gold from the brand mark's gradient (#DAAD6A → #9A6AA7). */
    --w-color-secondary-hue: 35.9;
    --w-color-secondary-saturation: 60.2%;
    --w-color-secondary-lightness: 63.5%;

    /* Focus ring: the site's own --night-accent. */
    --w-color-focus: #e3b3f8;
}

@font-face {
    font-family: "Fragua";
    src: url("../fonts/Fragua-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Every content-section heading inside a page's edit form (MultiFieldPanel labels like
   "Hero", "Who we are", "Our work" etc. — confirmed present and consistent across every
   page type in this project) plus the login screen's heading (login.html gives it this
   class directly). Page-listing views (Documents, Images, ...) don't have an equivalent
   visible heading in this Wagtail version to style — their page <h1> is screen-reader-only
   by design, not a themeable visible element. */
.w-panel__heading,
.magistry-brand-heading {
    font-family: "Fragua", var(--w-font-sans);
    letter-spacing: 0.02em;
}

/* Publish confirmation toast (admin-theme/js/publish-toast.js). `.magistry-toast*` classes
   only exist once that script has moved our own publish message out of Wagtail's banner, so
   nothing here can touch any other Wagtail message — and without the script the message is
   simply Wagtail's normal success banner. Colors are Wagtail's own success green and button
   text color, the same pair its success banner uses. Top-right, 80px down: just below the
   admin header bar (at most 60px tall from Wagtail's 50em breakpoint up), so it never covers
   the search box or the header's status/actions. Below 50em the header stacks onto two rows
   (up to 140px, the page explorer with its search box), so the toast sits at 160px there. */
.magistry-toast-region {
    position: fixed;
    inset-block-start: 10rem;
    inset-inline-end: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(30rem, calc(100vw - 3rem));
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 50em) {
    .magistry-toast-region {
        inset-block-start: 5rem;
    }
}

.magistry-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0.75rem 1rem 1.25rem;
    border-radius: 0.375rem;
    background-color: var(--w-color-positive-100);
    color: var(--w-color-white);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
    font-size: 1.125rem;
    line-height: 1.4;
    animation: magistry-toast-in 0.25s ease-out;
}

.magistry-toast .messages-icon {
    flex-shrink: 0;
    margin: 0;
}

.magistry-toast__close {
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: inherit;
    font-size: 1.625rem;
    line-height: 1;
    cursor: pointer;
}

.magistry-toast__close:hover {
    background-color: rgb(255 255 255 / 0.15);
}

.magistry-toast__close:focus-visible {
    outline: 3px solid var(--w-color-focus);
    outline-offset: 1px;
}

.magistry-toast--leaving {
    animation: magistry-toast-out 0.2s ease-in forwards;
}

@keyframes magistry-toast-in {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
}

@keyframes magistry-toast-out {
    to {
        opacity: 0;
        transform: translateY(-1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .magistry-toast,
    .magistry-toast--leaving {
        animation: none;
    }
}