<script setup>
import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";

const props = defineProps({
    title: String,
    content: String,
})
</script>

<template>
    <AppLayout :title="props.title">
        <ShadowedBox class="legal-page-box">
            <h2 class="legal-page-title">{{ props.title }}</h2>
            <div class="legal-page-content" v-html="props.content"></div>
        </ShadowedBox>
    </AppLayout>
</template>

<style scoped>
.legal-page-box {
    width: 95%;
    margin: 20px auto;
    padding: 20px;
    overflow-x: hidden;
}

.legal-page-title {
    font-size: 1.5rem;
    margin: 0 0 20px 0;
    color: #333;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 12px;
}

.legal-page-content {
    line-height: 1.7;
    color: #374151;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.legal-page-content :deep(img) {
    max-width: 100%;
    height: auto;
}

.legal-page-content :deep(table) {
    width: 100%;
    overflow-x: auto;
    display: block;
}

.legal-page-content :deep(a) {
    color: #2563eb;
    word-break: break-all;
}

.legal-page-content :deep(h1),
.legal-page-content :deep(h2),
.legal-page-content :deep(h3) {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #1f2937;
}

.legal-page-content :deep(p) {
    margin-bottom: 1em;
}

@media (max-width: 639px) {
    .legal-page-box {
        width: 100%;
        margin: 0;
        padding: 16px 12px;
        border-radius: 0;
    }

    .legal-page-title {
        font-size: 1.2rem;
    }
}
</style>
