/*
 * WorkCampConnect — Legal Pages
 * Shared by /privacy-policy/ and /terms-of-service/
 * Builds on design-system.css variables.
 */

.legal-wrap {
    max-width:      768px;
    margin:         0 auto;
    padding:        var(--space-12) var(--space-6);
}
.legal-title {
    font-size:      var(--font-size-2xl);
    font-weight:    var(--font-weight-extrabold);
    color:          var(--color-heading);
    margin-bottom:  var(--space-2);
}
.legal-date {
    color:          var(--color-text-muted);
    font-size:      var(--font-size-sm);
    margin-bottom:  var(--space-10);
}

/* ── Accordion ───────────────────────────────────── */
.legal-accordion {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.accordion-item {}

/* Header */
.accordion-header {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    width:              100%;
    background:         var(--color-primary);
    border:             1px solid var(--color-primary);
    border-radius:      var(--radius-md);
    padding:            1.25rem 1.5rem;
    cursor:             pointer;
    color:              #FFFFFF;
    font-size:          var(--font-size-base);
    font-weight:        600;
    font-family:        inherit;
    line-height:        1.4;
    text-align:         left;
    transition:         background 0.2s ease, border-color 0.2s ease;
    min-height:         44px;
    -webkit-tap-highlight-color: transparent;
}
.accordion-header:hover {
    background:         var(--color-primary-dark);
    color:              #FFFFFF;
}

/* Open state header */
.accordion-item.is-open .accordion-header {
    background:         var(--color-primary-dark);
    color:              #FFFFFF;
    border-color:       var(--color-primary-dark);
    border-left:        3px solid var(--color-accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Chevron */
.accordion-chevron {
    flex-shrink:        0;
    width:              20px;
    height:             20px;
    margin-left:        var(--space-4);
    transition:         transform 0.2s ease, color 0.2s ease;
    color:              #FFFFFF;
}
.accordion-item.is-open .accordion-chevron {
    transform:          rotate(90deg);
    color:              var(--color-accent);
}

/* Content panel */
.accordion-content {
    max-height:         0;
    overflow:           hidden;
    transition:         max-height 0.3s ease;
}
.accordion-content-inner {
    background:         rgba(255,255,255,0.06);
    border:             1px solid var(--color-border);
    border-top:         none;
    border-radius:      0 0 var(--radius-md) var(--radius-md);
    padding:            1.5rem;
    color:              var(--color-text);
    font-size:          var(--font-size-base);
    line-height:        1.75;
}
.accordion-content-inner p {
    margin-bottom:      var(--space-4);
}
.accordion-content-inner p:last-child {
    margin-bottom:      0;
}
.accordion-content-inner ul {
    padding-left:       var(--space-6);
    margin-bottom:      var(--space-4);
}
.accordion-content-inner ul:last-child {
    margin-bottom:      0;
}
.accordion-content-inner li {
    margin-bottom:      var(--space-2);
}
.accordion-content-inner strong {
    font-weight:        var(--font-weight-semibold);
}

/* Links */
.legal-link,
.legal-link:visited { color: var(--color-link); text-decoration: underline; }
.legal-link:hover,
.legal-link:visited:hover { color: var(--color-link-hover); }

/* Footer */
.legal-footer {
    margin-top:     var(--space-12);
    padding-top:    var(--space-6);
    border-top:     1px solid var(--color-border);
    display:        flex;
    gap:            var(--space-4);
    flex-wrap:      wrap;
}
.legal-footer a {
    font-size:      var(--font-size-sm);
    color:          var(--color-heading);
    text-decoration: none;
}
.legal-footer a:hover { text-decoration: underline; }
.legal-footer-sep { color: var(--color-border); }

/* ── Cookie Policy Table ──────────────────────────── */
.legal-table {
    width:              100%;
    border-collapse:    collapse;
    margin:             var(--space-4) 0 var(--space-6);
    font-size:          var(--font-size-sm);
}
.legal-table th,
.legal-table td {
    text-align:         left;
    padding:            var(--space-3) var(--space-4);
    border-bottom:      1px solid var(--color-border);
}
.legal-table th {
    font-weight:        var(--font-weight-semibold);
    color:              var(--color-heading);
    background:         var(--color-surface);
}
.legal-table code {
    font-size:          var(--font-size-xs);
    background:         var(--color-surface);
    padding:            var(--space-1) var(--space-2);
    border-radius:      var(--radius-sm);
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 639px) {
    .legal-wrap {
        padding: var(--space-8) var(--space-4);
    }
    .accordion-header {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }
    .accordion-content-inner {
        padding: 1.25rem;
        font-size: 1rem;
    }
}