/* ==========================================================================
   RS Motors — Legal & CMS pages
   Long-form article layout, sticky policy navigation and help card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.legal-hero {
    padding-bottom: clamp(34px, 5vw, 56px);
    border-bottom: 1px solid var(--rs-line);
    background:
        radial-gradient(720px 420px at 92% 4%, rgba(var(--rs-accent-rgb), 0.08), transparent 64%),
        var(--rs-bg-soft);
}

.legal-hero h1 {
    max-width: 22ch;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
}

.legal-hero p {
    max-width: 70ch;
}

.legal-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius-pill);
    background: var(--rs-surface);
    color: var(--rs-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.legal-updated i {
    color: var(--rs-accent);
    font-size: 0.82rem;
}

/* --------------------------------------------------------------------------
   2. Article
   -------------------------------------------------------------------------- */
.legal-content-section {
    padding-top: clamp(34px, 5vw, 60px);
}

.legal-article {
    padding: clamp(26px, 4vw, 52px);
    border-radius: var(--rs-radius-lg);
}

.legal-article .rich-content {
    font-size: 0.96rem;
    line-height: 1.9;
}

.legal-article .rich-content > h2:first-child {
    margin-top: 0;
}

.legal-article .rich-content h2 {
    margin-top: 2em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--rs-line);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

.legal-article .rich-content h3 {
    margin-top: 1.6em;
    font-family: var(--rs-font-body);
    font-size: 1rem;
    font-weight: 800;
}

.legal-article .rich-content p,
.legal-article .rich-content li {
    color: var(--rs-ink-soft);
}

.legal-article .rich-content ul,
.legal-article .rich-content ol {
    margin-bottom: 1.2rem;
}

.legal-article .rich-content li {
    margin-bottom: 0.5rem;
}

.legal-article .rich-content a {
    color: var(--rs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-article .rich-content strong {
    color: var(--rs-ink);
}

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */
.legal-sidebar {
    position: sticky;
    top: calc(var(--rs-header-height) + 20px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-nav {
    padding: 24px 22px;
    border-radius: var(--rs-radius-md);
}

.legal-nav h2 {
    margin-bottom: 0.6em;
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}

.legal-nav ul {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-nav li + li {
    border-top: 1px solid var(--rs-line);
}

.legal-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    color: var(--rs-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
}

.legal-nav a i {
    color: var(--rs-muted);
    font-size: 0.72rem;
    transition: color var(--rs-speed) var(--rs-ease), transform var(--rs-speed) var(--rs-ease);
}

.legal-nav a:hover,
.legal-nav a.active {
    color: var(--rs-accent);
}

.legal-nav a:hover i,
.legal-nav a.active i {
    color: var(--rs-accent);
    transform: translateX(3px);
}

.legal-help {
    padding: 24px 22px;
    border-radius: var(--rs-radius-md);
    background:
        radial-gradient(280px 180px at 90% 0%, rgba(var(--rs-accent-rgb), 0.08), transparent 68%),
        var(--rs-glass);
}

.legal-help > i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 13px;
    background: rgba(var(--rs-success-rgb), 0.1);
    color: var(--rs-success);
    font-size: 1.1rem;
}

.legal-help h3 {
    margin-bottom: 0.35em;
    font-family: var(--rs-font-body);
    font-size: 0.94rem;
    font-weight: 800;
}

.legal-help p {
    margin-bottom: 16px;
    color: var(--rs-muted);
    font-size: 0.8rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .legal-sidebar {
        position: static;
        margin-top: 8px;
    }

    .legal-updated {
        margin-top: 6px;
    }
}

@media (max-width: 767.98px) {
    .legal-article {
        padding: 22px 18px;
    }

    .legal-article .rich-content {
        font-size: 0.92rem;
    }

    .legal-nav,
    .legal-help {
        padding: 20px 18px;
    }
}

@media (max-width: 575.98px) {
    .legal-updated {
        white-space: normal;
    }
}