/* ==========================================================================
   LitiGator Forms — Intake Form Styles
   Migrated from intake-form-styles.css with .nf-* → .lg-* selectors
   ==========================================================================
   TABLE OF CONTENTS
   1.  General Layout & Form Container
   2.  Typography & Required Fields
   3.  Multi-Step Navigation (Progress Bar & Breadcrumbs)
   4.  Standard Form Inputs (Text, Select, Textarea)
   5.  Card-Style Checkboxes (Checkbox Grid)
   6.  Special Field: Discrimination "Other" Input
   7.  Buttons (Next, Previous, Submit, Add)
   8.  Repeater Fields
   9.  File Upload Fields
   10. Intake Form Review Page
   11. Intro Page Specific Styles
   12. Error States
   13. Responsive Styles
*/

/* ==========================================================================
   1. General Layout & Form Container
   ========================================================================== */
.entry-content {
    background-color: #f7f8fa;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #dde2e7;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-family: 'Lato', sans-serif;
}

.page-template-page-intake .entry-content {
    margin-bottom: 1.5em;
}

.lg-form-container {
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    color: #333;
}

/* Dynamic Section Titles */
.section-info::before, .section-empl::before, .section-role::before, .section-discrimination::before, .section-events::before, .section-conduct::before, .section-evidence::before, .section-unemployment::before, .section-timeline::before, .section-document::before, .section-witness::before, .section-what::before, .section-medical::before {
    display: block;
    content: '';
    font-size: 20px;
    font-weight: 700;
    color: #3a506b;
    margin-top: 45px;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 4px solid #007bff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-info::before { content: 'Your Information'; }
.section-empl::before { content: 'Employer Info'; }
.section-role::before { content: 'Your Role & Position'; }
.section-discrimination::before { content: 'Discrimination'; }
.section-events::before { content: 'Employer\'s Actions'; }
.section-conduct::before { content: 'Workplace Environment'; }
.section-evidence::before { content: 'Supporting Evidence'; }
.section-unemployment::before { content: 'Post-Employment Status'; }
.section-timeline::before { content: 'Timeline of Events'; }
.section-document::before { content: 'Supporting Documents'; }
.section-witness::before { content: 'Witness Information'; }
.section-what::before { content: 'What Happened'; }
.section-medical::before { content: 'Employer\'s Actions'; }

/* ==========================================================================
   2. Typography & Required Fields
   ========================================================================== */
.lg-label {
    display: block;
    color: #212529;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 15px;
}

.lg-required-note {
    color: #6c757d;
    font-size: 13px;
    margin-bottom: 20px;
    text-align: right;
}

.lg-required {
    color: #dc3545;
    font-weight: bold;
    font-size: 1.1em;
    margin-left: 3px;
}

/* ==========================================================================
   3. Multi-Step Navigation (Progress Bar & Breadcrumbs)
   ========================================================================== */
.lg-progress-bar {
    background-color: #e9ecef;
    border-radius: 20px;
    margin-bottom: 20px;
    height: 8px;
}

.lg-progress {
    background-color: #007bff;
    height: 8px;
    border-radius: 20px;
    transition: width 0.4s ease-in-out;
}

.lg-breadcrumbs {
    margin-bottom: 35px;
}

.lg-breadcrumbs ol {
    display: flex;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #e9ecef;
    counter-reset: breadcrumb-counter;
    text-align: center;
    list-style: none;
}

.lg-breadcrumbs li {
    counter-increment: breadcrumb-counter;
    flex: 1;
    position: relative;
    padding-bottom: 15px;
}

.lg-breadcrumbs .lg-breadcrumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: #6c757d;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    padding: 5px 10px;
    line-height: 1.3;
}

.lg-breadcrumbs .lg-breadcrumb::before {
    content: 'Step ' counter(breadcrumb-counter);
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #868e96;
    margin-bottom: 4px;
}

.lg-breadcrumbs li.active .lg-breadcrumb,
.lg-breadcrumbs li.active .lg-breadcrumb::before {
    color: #007bff !important;
}

.lg-breadcrumbs li.active .lg-breadcrumb {
    border-bottom-color: #007bff !important;
}

/* Completed steps: green checkmark */
.lg-breadcrumbs li.completed .lg-breadcrumb::before {
    content: '\2714';
    color: #28a745;
    font-weight: bold;
}

/* ==========================================================================
   4. Standard Form Inputs (Text, Select, Textarea)
   ========================================================================== */
.lg-form .lg-input {
    width: 100%;
    height: auto;
    padding: 10px 14px;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    color: #495057;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
    font-size: inherit;
}

.lg-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

.lg-input::placeholder {
    color: #999;
}

select.lg-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1.2em;
}

hr.lg-hr {
    padding: 2px;
    background-color: black;
    border: none;
}

/* ==========================================================================
   5. Card-Style Checkboxes (Checkbox Grid)
   ========================================================================== */
.lg-checkbox-grid .lg-grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.lg-checkbox-grid .lg-grid-list li {
    position: relative;
}

.lg-checkbox-grid .lg-grid-list li label {
    display: block;
    position: relative;
    background-color: #ffffff;
    border: 2px solid #ced4da;
    border-radius: 8px;
    padding: 20px 20px 20px 55px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.lg-checkbox-grid .lg-grid-list li input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    margin: 0;
    z-index: 2;
}

.lg-checkbox-grid .lg-grid-list li label::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

.lg-checkbox-grid .lg-grid-list li label::after {
    content: '\2714';
    position: absolute;
    left: 23px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    transform-origin: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    transition: transform 0.2s ease-in-out;
}

.lg-checkbox-grid .lg-grid-list li input[type="checkbox"]:focus + label,
.lg-checkbox-grid .lg-grid-list li:hover label {
    border-color: #80bdff;
}

.lg-checkbox-grid .lg-grid-list li input[type="checkbox"]:checked + label {
    background-color: #eaf5ff;
    border-color: #007bff;
    color: #004a99;
}

.lg-checkbox-grid .lg-grid-list li input[type="checkbox"]:checked + label::before {
    background-color: #007bff;
    border-color: #007bff;
}

.lg-checkbox-grid .lg-grid-list li input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) scale(1);
}

/* ==========================================================================
   6. Special Field: Discrimination "Other" Input
   ========================================================================== */
.discrim-other {
    width: 95%;
    margin-top: -5px;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    float: right;
}

.discrim-other + .lg-field {
    clear: both;
}

.discrim-other .lg-input-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #ffffff;
    border: 2px solid #ced4da;
    border-radius: 8px;
    padding: 12px 20px;
    transition: all 0.2s ease-in-out;
}

.discrim-other .lg-label {
    display: none;
}

.discrim-other .lg-input-wrap::before {
    content: 'Other';
    font-weight: 600;
    color: #495057;
    flex-shrink: 0;
}

.discrim-other .lg-input-wrap input[type="text"].lg-input {
    flex-grow: 1;
    border: 2px solid #dee2e6;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 8px 12px;
    border-radius: 6px;
    height: auto;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.discrim-other .lg-input-wrap:focus-within {
    border-color: #80bdff;
}

.discrim-other .lg-input-wrap input[type="text"].lg-input:focus {
    outline: none;
    border-color: #8ab4f8;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 0.1rem rgba(0, 123, 255, .15);
}

/* ==========================================================================
   7. Buttons (Next, Previous, Submit, Add)
   ========================================================================== */
.lg-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.lg-next {
    background-color: #007bff;
    color: #ffffff;
    border: 2px solid #007bff;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.lg-next:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.lg-prev {
    display: inline-block;
    width: auto;
    margin-right: auto;
    padding: 12px 30px;
    background-color: transparent;
    color: #6c757d;
    border: 2px solid #ced4da;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.lg-prev:hover {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #6c757d;
}

.lg-submit {
    padding: 15px 30px;
    background-color: #28a745;
    color: #ffffff;
    border: 2px solid #28a745;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}

.lg-submit:hover {
    background-color: #218838;
    border-color: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}

.lg-submit:active {
    transform: translateY(0);
}

.submit-container {
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
    margin-top: 2rem;
}

.lg-add-row {
    background-color: #28a745;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.lg-add-row:hover {
    background-color: #218838;
}

.lg-add-row::before {
    content: '+ ';
    font-weight: bold;
    margin-right: 5px;
}

/* Date Picker Fixes */
input[type="date"] {
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    opacity: 0;
    cursor: pointer;
}

.inline-date {
    position: relative;
    display: inline-block !important;
    width: 65% !important;
    vertical-align: bottom !important;
}

.inline-approx {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 31% !important;
    margin-left: 2% !important;
    vertical-align: bottom !important;
}

.inline-approx .lg-label {
    margin-bottom: 8px;
    text-align: right;
    width: 100%;
}

.inline-approx .lg-input-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.inline-approx input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   8. Repeater Fields
   ========================================================================== */
.lg-repeater-row {
    position: relative;
    background-color: #fdfdfd;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 30px;
    padding-top: 40px;
    margin-top: 15px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04);
}

.lg-repeater-row legend {
    font-size: 1.1em;
    font-weight: 700;
    color: #333;
    padding: 0 5px;
    margin-left: 10px;
}

.lg-remove-row {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: transparent;
    border: none;
    color: #dc3545;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    padding: 5px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.lg-remove-row:hover {
    background-color: #f8f9fa;
}

/* ==========================================================================
   9. File Upload Fields
   ========================================================================== */
.lg-file-btn {
    height: auto;
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border: 2px solid #007bff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lg-file-btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.lg-upload-progress {
    background-color: #e9ecef;
    box-shadow: none;
    border-radius: 4px;
    margin-top: 10px;
}

.lg-file-list {
    margin-top: 10px;
}

.lg-file-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 8px;
}

.lg-file-name {
    font-weight: 600;
    color: #333;
    min-width: 150px;
    flex-shrink: 0;
}

.lg-file-desc {
    flex-grow: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.lg-file-desc:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .15);
}

.lg-file-remove {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
    flex-shrink: 0;
}

.lg-file-hint {
    font-size: 12px;
    color: #6c757d;
    margin-top: 8px;
}

/* ==========================================================================
   10. Intake Form Review Page
   ========================================================================== */
.review-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    max-width: 1140px;
    margin: 2rem auto;
    padding: 2rem 3rem;
    color: #333;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.review-container .review-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: left;
    margin-top: 0;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1.5rem;
}

.review-container .section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #34495e;
    margin-top: 0;
    margin-bottom: 2rem;
}

.review-container .form-part {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e9ecef;
}

.review-container .form-part:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.review-container .field-group {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    align-items: start;
    font-size: 16px;
    line-height: 1.6;
}

.review-container .field-label {
    font-weight: 400;
    color: #555;
}

.review-container .field-value {
    font-weight: 500;
    color: #212529;
    word-break: break-word;
}

/* ==========================================================================
   11. Intro Page Specific Styles
   ========================================================================== */

/* Hide breadcrumbs when on intro page */
.lg-form-container.on-intro .lg-breadcrumbs,
.lg-form-container.on-intro .lg-required-note {
    display: none !important;
}

/* Hide intro step from breadcrumbs always */
.lg-breadcrumbs li[data-page="0"] {
    display: none !important;
}

.lg-next.le-intro-btn {
    width: 100%;
    display: block;
    margin-top: 25px;
    padding: 15px 30px;
    background-color: #005A9C;
    color: #ffffff;
    border: 2px solid #005A9C;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0, 90, 156, 0.3);
    transition: all 0.2s ease-in-out;
    border-radius: 4px;
    cursor: pointer;
}

.lg-next.le-intro-btn:hover {
    background-color: #004275;
    border-color: #004275;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 90, 156, 0.4);
}

/* ==========================================================================
   12. Error States
   ========================================================================== */
.lg-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

.lg-field.has-error .lg-input {
    border-color: #dc3545;
}

.lg-field.has-error .lg-label {
    color: #dc3545;
}

/* Hidden field utility */
.lg-hidden {
    display: none !important;
}

/* Pages hidden by default */
.lg-page {
    display: none;
}

.lg-page.active {
    display: block;
}

/* Loading spinner */
.lg-loading {
    text-align: center;
    padding: 40px;
}

.lg-loading::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #e9ecef;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: lg-spin 0.8s linear infinite;
}

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

/* Success message */
.lg-success {
    text-align: center;
    padding: 40px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    color: #155724;
}

.lg-success h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

.lg-form-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 15px;
    line-height: 1.4;
}

.lg-form-banner--error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.lg-form-banner__close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 0 0 12px;
    line-height: 1;
}

.lg-form-banner__close:hover {
    opacity: 1;
}

/* ==========================================================================
   13. Responsive Styles
   ========================================================================== */

/* --- Mobile & Tablet Layout (up to 991px) --- */
@media (max-width: 991px) {
    .lg-breadcrumbs ol {
        border-bottom: none;
    }

    .lg-breadcrumbs li:not(.active) {
        display: none;
    }

    .lg-breadcrumbs li[data-page="0"] {
        display: none !important;
    }

    .lg-breadcrumbs li.active {
        width: 100%;
        text-align: center;
        padding-bottom: 0;
    }

    .lg-breadcrumbs li.active .lg-breadcrumb {
        flex-direction: column;
        border-bottom: none !important;
        font-size: 20px;
    }

    .lg-breadcrumbs li.active .lg-breadcrumb::before {
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #868e96;
        margin-bottom: 5px;
    }
}

/* --- Small Mobile Layout (up to 768px) --- */
@media (max-width: 768px) {
    .lg-breadcrumbs .lg-breadcrumb {
        font-size: 13px;
        padding: 5px;
    }
    .lg-breadcrumbs .lg-breadcrumb::before {
        font-size: 11px;
    }

    .review-container .field-group {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .entry-content {
        padding: 20px;
    }

    .lg-repeater-row {
        padding: 15px;
        padding-top: 35px;
    }
}

/* --- Desktop Layout (992px and up) --- */
@media (min-width: 992px) {
    .frm-100 { display: block; width: 100%; }
    .frm-75 { display: inline-block; width: 74.5%; }
    .frm-50 { display: inline-block; width: 49%; }
    .frm-33 { display: inline-block; width: 32.75%; }
    .frm-25 { display: inline-block; width: 24.5%; }

    .discrim-other {
        width: 100%;
    }
}

@media (min-width: 1400px) {
    .discrim-other {
        max-width: 42.5%;
        margin: 0 auto;
        float: none;
    }
}

/* Field vertical alignment */
.lg-field {
    vertical-align: top;
    margin-bottom: 15px;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .lg-field {
        padding-right: 10px;
    }
    .lg-field:last-child {
        padding-right: 0;
    }
}

/* ==========================================================================
   14. Brand Protection
   --------------------------------------------------------------------------
   Themes commonly apply letter-spacing to headings (e.g. "0.05em" or "1px"
   as a design flourish). Because the [litigator] shortcode outputs an inline
   SVG, inherited letter-spacing has no visible effect on the wordmark itself
   — the glyph outlines are fixed in path data. The resets below are a safety
   net in case any theme targets broader selectors that could still affect
   sibling text nodes rendered next to the SVG, or other LitiGator UI text.
   ========================================================================== */

/* Prevent inherited letter-spacing from the surrounding element bleeding into
   any inline text that appears next to the wordmark SVG. */
.litigator-wordmark {
    letter-spacing: normal;
    word-spacing: normal;
    /* SVG sizing is driven by the height style attribute set in the shortcode.
       width:auto lets the SVG maintain its 4230:800 aspect ratio. */
    width: auto;
    max-width: none;
    /* Prevent flex/grid containers from stretching the SVG. */
    flex-shrink: 0;
    align-self: baseline;
}

/* Site-wide heading letter-spacing reset.
   Many themes add letter-spacing to h1–h4 for aesthetic reasons. When the
   [litigator] shortcode is used inside a heading the SVG is unaffected (its
   glyphs are path data), but any surrounding text in that heading would
   inherit the spacing. This reset eliminates the inconsistency and keeps
   the wordmark context clean. Override in your theme if you need decorative
   heading spacing on non-LitiGator headings. */
h1 .litigator-wordmark,
h2 .litigator-wordmark,
h3 .litigator-wordmark,
h4 .litigator-wordmark,
h5 .litigator-wordmark,
h6 .litigator-wordmark {
    letter-spacing: normal;
}