/* ============================================================
   Simple Assessment — Frontend v7
   ============================================================ */

.sa-assessment-wrap {
    position: relative;
    width: 100%;
}

.sa-fe-error {
    color: #c00;
    padding: 16px;
    text-align: center;
}


/* ============================================================
   INTRO PAGE
   ============================================================ */

.sa-intro-page {
    font-family: var(--font-rale);
    background: var(--e-global-color-d75f0a4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.sa-intro-title {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 28px;
    line-height: 1.25;
    /* max-width: 620px; */
}

.sa-intro-desc {
    width: 100%;
    /* max-width: 700px; */
    margin: 0 auto 28px;
    font-size: 17px;
    color: #000;
    line-height: 1.6;
}

/* Announcement message  shown below description, above Start button */
.sa-intro-announcement {
    width: 100%;
    /* max-width: 600px; */
    margin: 0 auto 28px;
    font-size: 15px;
    color: #000;
    line-height: 1.65;
    text-align: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.sa-intro-announcement p {
    margin: 0;
}

.sa-intro-announcement strong,
.sa-intro-announcement b {
    font-weight: 700;
    font-style: normal;
}

.sa-intro-desc iframe,
.sa-intro-desc video {
    width: 100%;
    max-width: 680px;
    aspect-ratio: 16 / 9;
    display: block;
    margin: 0 auto 16px;
    border-radius: 4px;
    background: #111;
}

.sa-btn-start {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
    letter-spacing: .3px;
    font-family: var(--font-rale);
    border: 1px solid var(--blue);
}

.sa-btn-start:hover {
    background: transparent;
    color: var(--blue) !important;
}


/* ============================================================
   QUESTION STAGE
   ============================================================ */

.sa-question-stage {
    background: #fff;
    /* padding: 0 0 60px; */
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: var(--font-rale);
}


/* Progress */

.sa-progress-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-bottom: 1px solid var(--border);
    /* margin-bottom: 4px; */
}

.sa-progress-bar {
    flex: 1;
    height: 6px;
    background: #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
}

.sa-progress-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 6px;
    transition: width .4s ease;
}

.sa-progress-label {
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    font-family: 'Inter';
}


/* Slide */

.sa-slide {
    padding: 30px 40px 20px;
    animation: sa-fadein .3s ease;
}

@keyframes sa-fadein {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .sa-slide {
        padding: 20px 16px;
    }
}

.sa-slide-image {
    text-align: center;
    margin-bottom: 24px;
}

.sa-slide-image img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 12px !important;
}


/* Question title */

.sa-question-title {
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 12px;
    line-height: 1.4;
}

.sa-req-star {
    color: #d63638;
    margin-left: 3px;
    font-size: 18px;
    vertical-align: top;
}


/* Question description — shown BELOW title, proper styling */

.sa-question-desc {
    text-align: center;
    font-size: 16px;
    color: #000;
    line-height: 24px;
    margin: 0 auto 10px;
    max-width: 680px;
}


/* Make sure rich content inside desc renders cleanly */

.sa-question-desc p {
    margin: 6px 0;
}

.sa-question-desc strong {
    font-weight: 700;
}

.sa-select-hint {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin: 0 0 20px;
    font-style: italic;
}


/* ============================================================
   ANSWER LIST — centered, full-width vertical stack
   ============================================================ */


/* The slide body is the centering column for all question content */

.sa-slide-question .sa-slide-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers children horizontally */
    width: 100%;
}


/* Question title and description stay centered */

.sa-slide-question .sa-question-title,
.sa-slide-question .sa-question-desc {
    width: 100%;
    max-width: 680px;
}


/* The answer list: centered column, fills up to 640px */

.sa-answers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 640px;
    margin: 24px 0 28px;
    /* top/bottom spacing; left/right handled by parent flex */
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}


/* Each answer option — full width of its container */

.sa-answer-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    font-family: var(--font-rale);
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
    line-height: 1.45;
    min-height: 56px;
    position: relative;
}


/* Hover — lift + accent border */

.sa-answer-btn:hover {
    border-color: var(--blue);
    background: #E8EDF9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}


/* Focus — keyboard accessible */

.sa-answer-btn:focus-visible {
    /* outline: 2px solid #1a1a1a; */
    /* outline-offset: 2px; */
}


/* Selected — filled dark */

.sa-answer-btn.sa-selected {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    transform: translateY(0);
}


/* Radio-style indicator dot */

.sa-answer-indicator {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c8c8c8;
    background: #fff;
    transition: border-color .15s, background .15s;
    position: relative;
}


/* Inner dot — hidden by default */

.sa-answer-indicator::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: transparent;
    transition: background .15s;
}


/* Indicator on hover */

.sa-answer-btn:hover .sa-answer-indicator {
    border-color: #1a1a1a;
}


/* Indicator on selected */

.sa-answer-btn.sa-selected .sa-answer-indicator {
    border-color: rgba(255, 255, 255, .5);
    background: transparent;
}

.sa-answer-btn.sa-selected .sa-answer-indicator::after {
    background: #fff;
}


/* Answer text — takes remaining space */

.sa-answer-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.45;
}


/* Next / action buttons — centered below the list */

.sa-slide-question .sa-question-actions {
    width: 100%;
    max-width: 640px;
    text-align: center;
    margin-top: 8px;
}


/* Required hint — centered below actions */

.sa-slide-question .sa-required-hint {
    width: 100%;
    max-width: 640px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #d63638;
    margin: 8px 0 0;
    font-style: italic;
}


/* Mobile */

@media (max-width: 600px) {
    .sa-answers-list {
        gap: 8px;
        margin: 16px 0 20px;
    }

    .sa-answer-btn {
        padding: 14px 16px;
        font-size: 14px;
        gap: 12px;
        min-height: 52px;
    }
}


/* Remove the old grid and letter styles */

.sa-answers-grid {
    display: none;
}

.sa-answer-letter {
    display: none;
}

.sa-select-hint {
    display: none;
}


/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.sa-question-actions,
.sa-content-actions {
    text-align: center;
    margin-top: 16px;
}

.sa-required-hint {
    text-align: center;
    font-size: 12px;
    color: #d63638;
    margin: 8px 0 0;
    font-style: italic;
}

.sa-btn-action {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 13px 48px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
    letter-spacing: .3px;
}

.sa-btn-action:hover {
    background: transparent;
    color: var(--blue);
}


/* Nav arrows */

.sa-nav-arrows {
    /* position: fixed; */
    /* bottom: 26px;
    right: 26px; */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    gap: 5px;
    border-top: 1px solid var(--border);
    /* z-index: 999; */
}

.sa-arrow {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.sa-arrow:hover {
    background: transparent;
    color: var(--blue);
}

.sa-arrow:disabled {
    background: #666;
    cursor: default;
    pointer-events: none;
    opacity: .6;
    border-color: #666;
}

.sa-nav-counter {
    background: #fff;
    color: #000000;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 52px;
    text-align: center;
    font-family: 'Inter';
}


/* ============================================================
   CONTENT SLIDE — WYSIWYG typography
   Scoped to .sa-content-body so it never bleeds into question
   slides or any other part of the plugin.
   apply_filters('the_content') runs wpautop + shortcodes,
   so paragraphs, headings, lists, and embeds all render
   exactly as they do in the post editor.
   ============================================================ */

.sa-content-body {
    width: 100%;
    max-width: 720px;
    margin: 16px auto 28px;
    text-align: left;
    font-size: 16px;
    line-height: 1.75;
    color: #2c2c2c;
    word-break: break-word;
    overflow-wrap: break-word;
}


/* Paragraphs — restore the browser default that themes often reset */

.sa-content-body p {
    margin: 0 0 10px 0 !important;
    line-height: 1.75;
}

.sa-content-body p:last-child {
    margin-bottom: 0;
}


/* Headings */

.sa-content-body h1,
.sa-content-body h2,
.sa-content-body h3,
.sa-content-body h4,
.sa-content-body h5,
.sa-content-body h6 {
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.4em 0 0.5em;
}

.sa-content-body h1 {
    font-size: 1.75em;
}

.sa-content-body h2 {
    font-size: 1.4em;
}

.sa-content-body h3 {
    font-size: 1.2em;
}

.sa-content-body h4 {
    font-size: 1.05em;
}


/* Inline formatting */

.sa-content-body strong,
.sa-content-body b {
    font-weight: 700;
    color: #1a1a1a;
}

.sa-content-body em,
.sa-content-body i {
    font-style: italic;
}

.sa-content-body u {
    text-decoration: underline;
}


/* Lists */

.sa-content-body ul,
.sa-content-body ol {
    margin: 0 0 1.2em 1.5em;
    padding: 0;
}

.sa-content-body ul {
    list-style: disc;
}

.sa-content-body ol {
    list-style: decimal;
}

.sa-content-body li {
    margin-bottom: 0.4em;
    line-height: 1.65;
}


/* Blockquote */

.sa-content-body blockquote {
    margin: 1.2em 0;
    padding: 12px 20px;
    border-left: 4px solid #d8d8d8;
    background: #f9f9f9;
    color: #555;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}


/* Links */

.sa-content-body a {
    color: #1a1a1a;
    text-decoration: underline;
}

.sa-content-body a:hover {
    color: #444;
}


/* Images */

.sa-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 1em auto;
}


/* Embedded video (iframe from YouTube/Vimeo via wpautop) */

.sa-content-body iframe {
    max-width: 100%;
    display: block;
    margin: 1em auto;
    border-radius: 4px;
}


/* Responsive video wrapper that wpautop generates */

.sa-content-body .wp-video,
.sa-content-body .wp-audio {
    max-width: 100%;
    margin: 1em 0;
}


/* Tables */

.sa-content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.95em;
}

.sa-content-body th,
.sa-content-body td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.sa-content-body th {
    background: #f5f5f5;
    font-weight: 700;
    color: #1a1a1a;
}

.sa-content-body tr:nth-child(even) td {
    background: #fafafa;
}


/* Horizontal rule */

.sa-content-body hr {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 1.5em 0;
}


/* Mobile */

@media (max-width: 600px) {
    .sa-content-body {
        font-size: 15px;
        margin: 12px auto 20px;
    }
}


/* Remove the old thin override — replaced by .sa-content-body above */

.sa-slide-content .sa-question-desc {
    display: none;
}


/* ============================================================
   LEAD CAPTURE FORM
   ============================================================ */

.sa-lead-body {
    max-width: 680px;
    margin: 0 auto;
}

.sa-lead-title {
    font-size: clamp(20px, 3.5vw, 32px);
    line-height: 1.3;
    margin-bottom: 16px;
}

.sa-lead-desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 28px;
    text-align: center;
}

.sa-lead-form {
    width: 100%;
}

.sa-lead-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.sa-lead-field {
    flex: 1;
    min-width: 160px;
}

.sa-lead-field-full {
    margin-bottom: 14px;
}

.sa-lead-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #c8c8c8;
    border-radius: 6px;
    font-size: 15px;
    color: #1a1a1a;
    transition: border-color .15s;
    background: #fff;
}

.sa-lead-input:focus {
    border-color: #1a1a1a;
    outline: none;
}

.sa-lead-input::placeholder {
    color: #aaa;
}

.sa-lead-actions {
    text-align: center;
    margin-top: 8px;
}

/* ---- Email capture notice (gift + privacy) ---- */
.sa-lead-notice {
    background: #f0f4ff;
    border: 1px solid #d0d9f5;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 22px;
    text-align: left;
}

.sa-lead-notice p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.sa-lead-notice p:last-child {
    margin-bottom: 0;
}

.sa-lead-notice-gift strong {
    color: #1e2d6b;
    font-weight: 700;
}

.sa-lead-notice-privacy {
    color: #555 !important;
    font-size: 13px !important;
}

.sa-lead-disclaimer {
    font-size: 12px;
    color: #666;
    text-align: left;
    margin-top: -12px;
    margin-bottom: 15px;
    line-height: 1.4;
}


/* ============================================================
   LOADING SPINNER
   ============================================================ */

.sa-loading {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.sa-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid #e0e0e0;
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: sa-spin .7s linear infinite;
    margin-bottom: 12px;
}

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


/* ============================================================
   RESULT PAGE
   ============================================================ */

.sa-result-page {
    /* background: #fff; */
    padding: 30px;
    text-align: center;
    animation: sa-fadein .4s ease;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}


/* ---- Score circle ---- */

.sa-result-score-wrap {
    margin-bottom: 28px;
}

.sa-result-score-circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}

.sa-result-score-num {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}

.sa-result-score-lbl {
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-top: 4px;
    opacity: .75;
}


/* ---- Matched result category ---- */

.sa-result-cat {
    margin-bottom: 28px;
}

.sa-result-title {
    font-size: clamp(20px, 3vw, 30px);
    color: #1a1a1a;
    margin: 0 auto 20px;
    max-width: 680px;
    line-height: 1.3;
}


/* Category description — left-aligned article-style content */

.sa-result-cat-desc {
    border-top: 1px solid #eee;
    padding-top: 24px;
    margin-top: 4px;
}


/* ---- Shared result content block (category desc + global content) ---- */

.sa-result-desc {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 28px;
    text-align: left;
    font-size: 15px;
    line-height: 1.75;
    color: #333;
    box-sizing: border-box;
}

.sa-result-desc p {
    margin: 0 0 1.1em;
}

.sa-result-desc p:last-child {
    margin-bottom: 0;
}

.sa-result-desc h1,
.sa-result-desc h2,
.sa-result-desc h3 {
    color: #1a1a1a;
    margin-top: 24px;
}

.sa-result-desc strong,
.sa-result-desc b {
    font-weight: 700;
    color: #1a1a1a;
}

.sa-result-desc ul,
.sa-result-desc ol {
    margin: 0 0 1.1em 1.5em;
    padding: 0;
}

.sa-result-desc ul {
    list-style: disc;
}

.sa-result-desc ol {
    list-style: decimal;
}

.sa-result-desc li {
    margin-bottom: 0.4em;
}


/* Table wrapper — horizontal scroll on small screens */

.sa-result-desc table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
    table-layout: auto;
}


/* Wrap tables in a scrollable container */

.sa-result-desc table,
.sa-result-global-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
}

.sa-result-desc table th,
.sa-result-desc table td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    min-width: 80px;
    word-break: normal;
    white-space: normal;
}

.sa-result-desc table th {
    background: #f5f5f5;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

.sa-result-desc table tr:nth-child(even) td {
    background: #fafafa;
}


/* Global result content — separator from category content */

.sa-result-global-content {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    margin-top: 4px;
    text-align: left;
    color: #000;
}


/* ---- Retake button ---- */

.sa-result-actions {
    margin-top: 36px;
    /* padding-bottom: 20px; */
    text-align: center;
    position: relative;
    z-index: 1;
}

.sa-btn-retake, .sa-btn-print {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    border: 1px solid var(--blue);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.sa-btn-retake:hover, .sa-btn-print:hover {
    background: transparent;
    color: var(--blue);
}


/* Mobile */

@media (max-width: 600px) {
    .sa-result-page {
        padding: 28px 12px 60px;
    }

    .sa-result-score-circle {
        width: 96px;
        height: 96px;
    }

    .sa-result-score-num {
        font-size: 30px;
    }

    .sa-result-desc table th,
    .sa-result-desc table td {
        padding: 8px 10px;
        font-size: 13px;
    }
}


/* Assessments list */

.sa-assessments-list {
    padding: 24px 0;
}

.sa-list-title {
    font-size: 22px;
    margin-bottom: 16px;
}

.sa-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sa-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    flex-wrap: wrap;
}

.sa-list-id {
    font-size: 12px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
}

.sa-list-name {
    font-weight: 600;
    flex: 1;
}

.sa-list-shortcode {
    font-size: 12px;
    background: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}


/* ============================================================
   ASSESSMENT GRID  [sa_assessment_grid]
   Styled to match site typography — Raleway font, navy var(--blue)
   ============================================================ */

.sa-grid-wrap {
    display: grid;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
}


/* Column variants */

.sa-grid-cols-1 {
    grid-template-columns: 1fr;
}

.sa-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.sa-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sa-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}


/* Card */

.sa-grid-card {
    background: #ffffff;
    border: 1px solid #dde1e7;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    box-shadow: 0 2px 8px rgba(30, 45, 107, .06);
    padding: 15px;
}

.sa-grid-card:hover {
    box-shadow: 0 8px 28px rgba(30, 45, 107, .12);
    transform: translateY(-3px);
}

.sa-grid-card-body {
    padding: 0;
    flex: 1;
}


/* Title — navy, bold, Raleway to match site headings */

.sa-grid-title {
    font-family: var(--font-rale);
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--blue);
    margin: 0 0 12px;
    line-height: 1.35;
}


/* Description — regular weight, muted grey */

.sa-grid-desc {
    font-size: 14px;
    font-weight: 400;
    color: #555e6d;
    line-height: 1.65;
    margin: 0 0 14px;
}

.sa-grid-meta {
    margin: 0 0 4px;
    font-size: 12px;
}


/* Question count pill */

.sa-grid-q-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f2f7;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: .2px;
}

.sa-grid-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e2f0d9;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    color: #385723;
    letter-spacing: .2px;
    margin-left: 8px;
}

.sa-grid-card-footer {
    padding: 0;
    margin-top: 15px;
}


/* Base button — navy, Raleway, full width */

.sa-grid-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--blue);
    color: #ffffff !important;
    font-family: var(--font-rale);
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--blue);
    text-decoration: none !important;
    transition: background .2s, color .2s, border-color .2s;
    letter-spacing: .3px;
    cursor: pointer;
}

.sa-grid-btn:hover {
    background: transparent;
    border-color: var(--blue);
    color: var(--blue) !important;
}


/* "Take Assessment" — solid navy (same as base) */

.sa-grid-btn--pending {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff !important;
}

.sa-grid-btn--pending:hover {
    /* background: var(--blue);
    border-color: var(--blue);
    color: #ffffff !important; */
}


/* "View Assessment" — navy outline to signal completion */

.sa-grid-btn--completed {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff !important;
}

.sa-grid-btn--completed:hover {
    background: transparent;
    color: var(--blue) !important;
}

.sa-grid-empty {
    color: #888;
    font-size: 15px;
    text-align: center;
    padding: 40px 0;
}


/* Responsive breakpoints */

@media (max-width: 900px) {
    .sa-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .sa-grid-cols-4,
    .sa-grid-cols-3,
    .sa-grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .sa-grid-card-body {
        /* padding: 20px 20px 14px; */
    }

    .sa-grid-card-footer {
        /* padding: 0 20px 20px; */
    }

    .sa-grid-title {
        font-size: 16px;
    }
}