/* Page-owned styles for Felhasználási Feltételek */

.legal-page {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--space-lg);
    padding-block: var(--space-2xl);
}

.legal-page__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.legal-section h1,
.legal-section h2,
.legal-section h3 {
    margin-block-end: 0;
}

.legal-section h1 {
    font-size: var(--text-h1);
}

.legal-section h2 {
    font-size: var(--text-h2);
}

.legal-section h3 {
    font-size: var(--text-h4);
    color: var(--text-secondary);
}

.legal-section .gold-rule {
    margin-block-end: var(--space-sm);
}

.legal-intro {
    border-inline-start: 3px solid var(--accent-gold);
    padding-inline-start: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.legal-intro p {
    margin-block-end: 0;
}

.legal-acceptance {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.legal-acceptance p {
    margin-block-end: 0;
}

.legal-content-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.legal-content-block p,
.legal-content-block ul {
    margin-block-end: 0;
}

.legal-content-block ul {
    padding-inline-start: var(--space-lg);
    list-style: none;
}

.legal-content-block li {
    position: relative;
    padding-inline-start: var(--space-md);
    margin-block-end: var(--space-sm);
}

.legal-content-block li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background-color: var(--accent-gold);
    border-radius: 50%;
}

.legal-content-block--highlight {
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    background-color: var(--bg-surface);
}

.legal-contact-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 400px;
    align-self: flex-start;
}

.legal-contact-card h3 {
    margin-block-end: 0;
}

.legal-contact-card p,
.legal-contact-card ul {
    margin-block-end: 0;
}

.legal-contact-card ul {
    padding-inline-start: var(--space-lg);
    list-style: none;
}

.legal-contact-card li {
    position: relative;
    padding-inline-start: var(--space-md);
    margin-block-end: var(--space-sm);
}

.legal-contact-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background-color: var(--accent-gold);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .legal-page {
        padding-inline: var(--space-md);
        padding-block: var(--space-xl);
    }

    .legal-page__container {
        gap: var(--space-xl);
    }

    .legal-contact-card {
        max-width: 100%;
        align-self: stretch;
    }
}

@media (max-width: 480px) {
    .legal-page {
        padding-inline: var(--space-sm);
    }

    .legal-section h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .legal-section h2 {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .legal-intro,
    .legal-acceptance,
    .legal-content-block--highlight,
    .legal-contact-card {
        padding: var(--space-md);
    }
}