/**
 * Integria: Assessment Info Panel (styles)
 *
 * Paste into a WPCodeBox 2 CSS snippet. Loads site-wide or conditionally.
 * All tokens below are prefixed with --assessment-panel- so they don't collide
 * with any global brand tokens. Override them in your global stylesheet once
 * the Integria design tokens are finalized.
 */

:root {
    --assessment-panel-bg:           #ffffff;
    --assessment-panel-text:         #1a1a1a;
    --assessment-panel-muted:        #666666;
    --assessment-panel-accent:       #2b5cb9; /* replace with brand primary */
    --assessment-panel-backdrop:     rgba(15, 20, 30, 0.55);
    --assessment-panel-width:        767px;
    --assessment-panel-radius:       0px;
    --assessment-panel-nav-bg:       rgba(255, 255, 255, 0.9);
    --assessment-panel-nav-color:    #1a1a1a;
    --assessment-panel-shadow:       -10px 0 40px rgba(0, 0, 0, 0.15);
    --assessment-panel-transition:   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --assessment-panel-z:            999999;
}

/* Cursor hint on any element acting as an assessment trigger */
.assessment-card[data-assessment-id] {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Backdrop
 * -------------------------------------------------------------------------*/
.assessment-panel-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--assessment-panel-backdrop);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--assessment-panel-transition),
        visibility 0s linear var(--assessment-panel-transition);
    z-index: calc(var(--assessment-panel-z) - 1);
    pointer-events: none;
}

.assessment-panel-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--assessment-panel-transition), visibility 0s linear 0s;
    pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * Panel shell
 * -------------------------------------------------------------------------*/
.assessment-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--assessment-panel-width);
    max-width: 100vw;
    background-color: var(--assessment-panel-bg);
    color: var(--assessment-panel-text);
    transform: translateX(100%);
    transition: transform var(--assessment-panel-transition);
    z-index: var(--assessment-panel-z);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--assessment-panel-shadow);
    border-top-left-radius: var(--assessment-panel-radius);
    border-bottom-left-radius: var(--assessment-panel-radius);
}

.assessment-panel.is-open {
    transform: translateX(0);
}

@media (max-width: 767px) {
    .assessment-panel {
        width: 100vw;
    }
}

/* ---------------------------------------------------------------------------
 * Close button (floats over panel, top-right)
 * -------------------------------------------------------------------------*/
.assessment-panel__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--assessment-panel-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background-color 200ms ease, transform 200ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.assessment-panel__close:hover {
    background-color: #ffffff;
    transform: scale(1.05);
}

.assessment-panel__close:focus-visible {
    outline: 2px solid var(--assessment-panel-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Media area (featured image + nav arrows)
 * -------------------------------------------------------------------------*/
.assessment-panel__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f2f2f2;
    overflow: hidden;
    flex-shrink: 0;
}

.assessment-panel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 200ms ease;
}



/* Nav arrows (within the image) */
.assessment-panel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--assessment-panel-nav-bg);
    color: var(--assessment-panel-nav-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.assessment-panel__nav:hover:not(:disabled) {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.assessment-panel__nav:focus-visible {
    outline: 2px solid var(--assessment-panel-accent);
    outline-offset: 2px;
}

.assessment-panel__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.assessment-panel__nav--prev { left: 16px; }
.assessment-panel__nav--next { right: 16px; }

/* ---------------------------------------------------------------------------
 * Body (title + content)
 * -------------------------------------------------------------------------*/
.assessment-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    -webkit-overflow-scrolling: touch;
}

.assessment-panel__title {
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--assessment-panel-text);
}

.assessment-panel__content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--assessment-panel-text);
}

.assessment-panel__content > *:first-child { margin-top: 0; }
.assessment-panel__content > *:last-child  { margin-bottom: 0; }

.assessment-panel__content h2,
.assessment-panel__content h3,
.assessment-panel__content h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.assessment-panel__content p       { margin: 0 0 1em; }
.assessment-panel__content a       { color: var(--assessment-panel-accent); text-decoration: underline; }
.assessment-panel__content ul,
.assessment-panel__content ol      { padding-left: 1.5em; margin: 0 0 1em; }
.assessment-panel__content li      { margin-bottom: 0.35em; }
.assessment-panel__content img     { max-width: 100%; height: auto; border-radius: 4px; }
.assessment-panel__content blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 3px solid var(--assessment-panel-accent);
    color: var(--assessment-panel-muted);
}

@media (max-width: 480px) {
    .assessment-panel__body  { padding: 24px 20px; }
    .assessment-panel__title { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
 * Loading overlay
 * -------------------------------------------------------------------------*/
.assessment-panel__loading {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
    z-index: 4;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}



.assessment-panel__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--assessment-panel-accent);
    border-radius: 50%;
    animation: assessment-panel-spin 700ms linear infinite;
}

@keyframes assessment-panel-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Body scroll lock while panel is open
 * -------------------------------------------------------------------------*/
body.assessment-panel-open {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    .assessment-panel,
    .assessment-panel-backdrop,
    .assessment-panel__nav,
    .assessment-panel__close {
        transition-duration: 0.01ms !important;
    }
    .assessment-panel__spinner {
        animation-duration: 2s;
    }
}