/*
 * Global student-facing canvas. Semantic cards keep the solid surfaces from
 * theme-integrity.css; only page canvases receive the administrator background.
 */
/* Standalone plugin documents paint the composition once on body. */
body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background:is(
    .ilc-standalone-learning-page,
    .ilc-standalone-lesson-player-page,
    .ilc-standalone-project-page,
    .ilc-account-page,
    .ilc-auth-page,
    .ilc-email-confirm-error-page
) {
    background-color: var(--ilc-global-bg-color, var(--ilc-theme-page, #f3f6f8)) !important;
    background-image: var(--ilc-global-bg-image, none) !important;
    background-position: var(--ilc-global-bg-position, center center) !important;
    background-size: var(--ilc-global-bg-size, cover) !important;
    background-repeat: var(--ilc-global-bg-repeat, no-repeat) !important;
    background-attachment: var(--ilc-global-bg-attachment, scroll) !important;
}

body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background:is(
    .ilc-standalone-learning-page,
    .ilc-standalone-lesson-player-page,
    .ilc-standalone-project-page,
    .ilc-account-page,
    .ilc-auth-page,
    .ilc-email-confirm-error-page
) {
    min-height: 100vh;
}

/* Existing route styles are opaque; canvases reveal the single body layer. */
body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background .ilc-global-background-canvas {
    background-color: transparent !important;
    background-image: none !important;
}

/* Inside a regular WordPress theme the top plugin canvas owns the composition. */
body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background:not(:is(
    .ilc-standalone-learning-page,
    .ilc-standalone-lesson-player-page,
    .ilc-standalone-project-page,
    .ilc-account-page,
    .ilc-auth-page,
    .ilc-email-confirm-error-page
))
    .ilc-global-background-canvas {
    background-color: var(--ilc-global-bg-color, var(--ilc-theme-page, #f3f6f8)) !important;
    background-image: var(--ilc-global-bg-image, none) !important;
    background-position: var(--ilc-global-bg-position, center center) !important;
    background-size: var(--ilc-global-bg-size, cover) !important;
    background-repeat: var(--ilc-global-bg-repeat, no-repeat) !important;
    background-attachment: var(--ilc-global-bg-attachment, scroll) !important;
}

/* Landing headings can otherwise sit directly on a photograph. */
body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background :is(
    .ilc-landing-hero__content,
    .ilc-landing-section-head
) {
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid color-mix(in srgb, var(--ilc-theme-border, #d8e0e8) 84%, transparent) !important;
    border-radius: 20px;
    background: var(--ilc-theme-surface-1, #ffffff) !important;
    background: color-mix(in srgb, var(--ilc-theme-surface-1, #ffffff) 92%, transparent) !important;
    box-shadow: var(--ilc-theme-shadow, 0 12px 34px rgba(15, 23, 42, .08));
    backdrop-filter: blur(12px);
}

/* A nested lesson/catalog canvas must never paint the same image twice. */
body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background
    .ilc-global-background-canvas .ilc-global-background-canvas {
    background-color: transparent !important;
    background-image: none !important;
}

@media (max-width: 782px) {
    body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background,
    body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background .ilc-global-background-canvas {
        background-attachment: scroll !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background,
    body.ilc-ui-enhanced.ilc-ui-context-frontend.ilc-ui-has-global-background .ilc-global-background-canvas {
        background-attachment: scroll !important;
    }
}