/**
 * Settlement Block Patterns Styles
 *
 * Styles for settlement-specific Gutenberg block patterns.
 * Simplified: Only appearance styles, no layout controls.
 * For column widths, use WordPress's native width attribute on Columns.
 *
 * @package Settlement_Manager
 * @since 2.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    --settlement-primary: #034B87;
    --settlement-primary-dark: #023460;
    --settlement-accent: #c9a86c;
    --settlement-warning: #d63638;
    --settlement-warning-bg: #fff5f5;
    --settlement-info: #2271b1;
    --settlement-info-bg: #f0f6fc;
    --settlement-success: #00a32a;
    --settlement-success-bg: #edfaef;
    --settlement-text: #1d2327;
    --settlement-text-secondary: #50575e;
    --settlement-border: #ccd0d4;
    --settlement-bg-light: #f6f7f7;
}

/* ==========================================================================
   Notice Section Pattern
   ========================================================================== */

.settlement-notice-section {
    border-color: var(--settlement-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.settlement-notice-section h2 {
    color: var(--settlement-primary);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.3;
}

.settlement-notice-section .wp-block-separator {
    border-color: var(--settlement-accent);
    margin: 1.5em auto;
    width: 60%;
}

/* ==========================================================================
   Block Style: Settlement Notice
   ========================================================================== */

.is-style-settlement-notice {
    border: 1px solid var(--settlement-primary);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Block Style: Settlement Warning
   ========================================================================== */

.is-style-settlement-warning {
    background-color: var(--settlement-warning-bg) !important;
    border-left: 4px solid var(--settlement-warning) !important;
    border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   Block Style: Info Box
   ========================================================================== */

.is-style-settlement-info-box {
    background-color: var(--settlement-info-bg) !important;
    border-left: 4px solid var(--settlement-info) !important;
    border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   Block Style: Contact Card
   ========================================================================== */

.is-style-settlement-contact-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.is-style-settlement-contact-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Important Dates Pattern
   ========================================================================== */

.settlement-important-dates {
    background-color: var(--settlement-bg-light) !important;
    border-color: var(--settlement-border) !important;
    border-radius: 4px;
}

.settlement-important-dates h3 {
    color: var(--settlement-primary);
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--settlement-accent);
}

/* Important Dates Sidebar Pattern - Spirit AeroSystems Style */
.settlement-important-dates-sidebar {
    background-color: #e8e8e8 !important;
    border: none !important;
    border-radius: 0;
    padding: 15px 20px !important;
    margin-top: 0 !important;
}

.settlement-important-dates-sidebar h3,
.settlement-important-dates-sidebar .wp-block-heading {
    color: var(--settlement-primary);
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0 0 8px 0 !important;
    padding: 0 0 6px 0 !important;
    border-bottom: 3px solid var(--settlement-accent);
}

/* Ensure columns align at top - Frontend & Editor */
.wp-block-columns:has(.settlement-important-dates-sidebar),
.wp-block-columns:has(.settlement-notice-section),
.wp-block-columns.are-vertically-aligned-top,
body .wp-block-columns,
.site-main .wp-block-columns,
.entry-content .wp-block-columns {
    align-items: flex-start !important;
}

/* Remove ALL possible top spacing from sidebar column */
.wp-block-column:has(.settlement-important-dates-sidebar),
body .wp-block-column:has(.settlement-important-dates-sidebar) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Remove ALL possible top spacing from sidebar itself */
.settlement-important-dates-sidebar,
.wp-block-group.settlement-important-dates-sidebar,
body .settlement-important-dates-sidebar,
.site-main .settlement-important-dates-sidebar,
.entry-content .settlement-important-dates-sidebar,
div.settlement-important-dates-sidebar {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
    padding: 0 20px 15px 20px !important;
}

/* Target the h3 specifically to remove theme's margin-top: 2rem */
.settlement-important-dates-sidebar h3,
.settlement-important-dates-sidebar .wp-block-heading,
.settlement-important-dates-sidebar > h3:first-child,
.settlement-important-dates-sidebar > .wp-block-heading:first-child,
body .settlement-important-dates-sidebar h3,
body .settlement-important-dates-sidebar .wp-block-heading,
.site-main .settlement-important-dates-sidebar h3,
.entry-content .settlement-important-dates-sidebar h3,
.settlement-important-dates-sidebar h3.wp-block-heading,
div.settlement-important-dates-sidebar h3,
.wp-block-group.settlement-important-dates-sidebar h3 {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}

/* Dates List - Spirit AeroSystems Style */
.settlement-important-dates-sidebar .settlement-dates-list,
.settlement-dates-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.settlement-important-dates-sidebar .settlement-dates-list li,
.settlement-dates-list li {
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #c0c0c0;
    line-height: 1.4;
}

.settlement-important-dates-sidebar .settlement-dates-list li:last-child,
.settlement-dates-list li:last-child {
    border-bottom: none !important;
}

.settlement-important-dates-sidebar .settlement-dates-list li strong,
.settlement-dates-list li strong {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 2px;
}

.settlement-important-dates-sidebar .settlement-dates-list li br + *,
.settlement-dates-list li br {
    font-size: 0.8rem;
    color: #666;
    font-weight: 400;
}

/* ==========================================================================
   Block Style: Important Dates Table
   ========================================================================== */

.is-style-settlement-dates-table {
    margin: 0;
}

.is-style-settlement-dates-table table {
    border-collapse: collapse;
    width: 100%;
}

.is-style-settlement-dates-table th {
    background-color: var(--settlement-primary) !important;
    color: #fff !important;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    border: none !important;
}

.is-style-settlement-dates-table td {
    padding: 12px 15px;
    border: none !important;
    border-bottom: 1px solid var(--settlement-border) !important;
    vertical-align: top;
}

.is-style-settlement-dates-table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.02);
}

.is-style-settlement-dates-table tbody tr:hover td {
    background-color: var(--settlement-info-bg);
}

.is-style-settlement-dates-table td strong {
    color: var(--settlement-primary);
}

/* ==========================================================================
   Rights & Options Table Pattern
   ========================================================================== */

.settlement-rights-options {
    background-color: #fff;
}

.settlement-rights-options h3 {
    color: var(--settlement-primary);
    margin-bottom: 1em;
}

/* ==========================================================================
   Block Style: Rights Table
   ========================================================================== */

.is-style-settlement-rights-table {
    margin: 0;
}

.is-style-settlement-rights-table table {
    border-collapse: collapse;
    width: 100%;
}

.is-style-settlement-rights-table th {
    background-color: var(--settlement-primary) !important;
    color: #fff !important;
    font-weight: 600;
    text-align: left;
    padding: 15px 20px;
    border: none !important;
}

.is-style-settlement-rights-table th:first-child {
    width: 25%;
}

.is-style-settlement-rights-table td {
    padding: 15px 20px;
    border: none !important;
    border-bottom: 1px solid var(--settlement-border) !important;
    vertical-align: top;
    line-height: 1.6;
}

.is-style-settlement-rights-table tbody tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.02);
}

.is-style-settlement-rights-table td:first-child {
    font-weight: 600;
    color: var(--settlement-primary);
}

.is-style-settlement-rights-table td strong {
    color: var(--settlement-primary);
    display: block;
    margin-bottom: 5px;
}

/* ==========================================================================
   Document List Pattern
   ========================================================================== */

.settlement-document-list {
    border-color: var(--settlement-border) !important;
    border-radius: 4px;
}

.settlement-document-list h3 {
    color: var(--settlement-primary);
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Block Style: Document List
   ========================================================================== */

.is-style-settlement-document-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
}

.is-style-settlement-document-list li {
    position: relative;
    padding: 15px 15px 15px 50px;
    border-bottom: 1px solid var(--settlement-border);
    line-height: 1.5;
}

.is-style-settlement-document-list li:last-child {
    border-bottom: none;
}

.is-style-settlement-document-list li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 18px;
    width: 24px;
    height: 24px;
    background-color: var(--settlement-warning);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

.is-style-settlement-document-list li strong {
    color: var(--settlement-primary);
    display: block;
    margin-bottom: 3px;
}

.is-style-settlement-document-list li:hover {
    background-color: var(--settlement-info-bg);
}

/* ==========================================================================
   FAQ Accordion Pattern
   ========================================================================== */

.settlement-faq {
    background-color: #fff;
}

.settlement-faq h3 {
    color: var(--settlement-primary);
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--settlement-accent);
}

.settlement-faq details {
    border: 1px solid var(--settlement-border);
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #fff;
}

.settlement-faq details summary {
    padding: 15px 20px;
    font-weight: 600;
    color: var(--settlement-primary);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 40px;
}

.settlement-faq details summary::-webkit-details-marker {
    display: none;
}

.settlement-faq details summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    color: var(--settlement-text-secondary);
    transition: transform 0.2s ease;
}

.settlement-faq details[open] summary::after {
    content: "-";
}

.settlement-faq details summary:hover {
    background-color: var(--settlement-info-bg);
}

.settlement-faq details[open] summary {
    border-bottom: 1px solid var(--settlement-border);
    background-color: var(--settlement-bg-light);
}

.settlement-faq details > :not(summary) {
    padding: 15px 20px;
}

.settlement-faq details p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Legal Warning Pattern
   ========================================================================== */

.settlement-legal-warning {
    border-radius: 0 4px 4px 0 !important;
}

.settlement-legal-warning p:first-child {
    margin-bottom: 0.5em;
}

.settlement-legal-warning p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Contact Info Pattern
   ========================================================================== */

.settlement-contact-info {
    border-color: var(--settlement-border) !important;
}

.settlement-contact-info h3 {
    color: var(--settlement-primary);
    margin-bottom: 0.5em;
}

.settlement-contact-info .wp-block-columns {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.settlement-contact-info p {
    line-height: 1.7;
}

.settlement-contact-info p strong {
    color: var(--settlement-primary);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 782px) {
    .is-style-settlement-dates-table th,
    .is-style-settlement-dates-table td,
    .is-style-settlement-rights-table th,
    .is-style-settlement-rights-table td {
        padding: 10px 12px;
        font-size: 14px;
    }

    .is-style-settlement-rights-table th:first-child {
        width: 30%;
    }

    .settlement-notice-section,
    .settlement-important-dates,
    .settlement-important-dates-sidebar,
    .settlement-rights-options,
    .settlement-document-list,
    .settlement-faq,
    .settlement-legal-warning,
    .settlement-contact-info {
        padding: 20px !important;
    }

    .settlement-faq details summary {
        padding: 12px 15px;
        padding-right: 35px;
    }

    .settlement-faq details > :not(summary) {
        padding: 12px 15px;
    }
}

@media screen and (max-width: 600px) {
    .is-style-settlement-dates-table table,
    .is-style-settlement-dates-table thead,
    .is-style-settlement-dates-table tbody,
    .is-style-settlement-dates-table th,
    .is-style-settlement-dates-table td,
    .is-style-settlement-dates-table tr {
        display: block;
    }

    .is-style-settlement-dates-table thead {
        display: none;
    }

    .is-style-settlement-dates-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--settlement-border);
        border-radius: 4px;
    }

    .is-style-settlement-dates-table td {
        border-bottom: 1px solid var(--settlement-border) !important;
        padding: 10px 15px;
    }

    .is-style-settlement-dates-table td:last-child {
        border-bottom: none !important;
    }

    .is-style-settlement-dates-table td::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 5px;
        color: var(--settlement-text-secondary);
        font-size: 12px;
        text-transform: uppercase;
    }

    .is-style-settlement-rights-table th:first-child {
        width: auto;
    }

    .settlement-contact-info .wp-block-columns {
        flex-direction: column;
    }

    .settlement-contact-info .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 1em;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .settlement-notice-section,
    .settlement-important-dates,
    .settlement-important-dates-sidebar,
    .settlement-rights-options,
    .settlement-document-list,
    .settlement-faq,
    .settlement-legal-warning,
    .settlement-contact-info {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    .settlement-faq details {
        display: block !important;
    }

    .settlement-faq details[open] > :not(summary) {
        display: block !important;
    }
}