@extends('layouts.master', [
    'title' => $page->title . ' - ' . config('app.name'),
])

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-md-10 mx-auto">
            <article class="page-content">
                <h1 class="page-title">{{ $page->title }}</h1>
                
                <div class="page-body">
                    {!! $page->content !!}
                </div>
            </article>
        </div>
    </div>
</div>

@push('styles')
<style>
.page-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.page-title {
    font-family: 'Noto Serif Bengali', serif;
    font-size: 32px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #c00;
}

.page-body {
    font-family: 'Noto Serif Bengali', 'Hind Siliguri', serif;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

.page-body p {
    margin-bottom: 16px;
}

.page-body h2 {
    font-size: 24px;
    margin-top: 32px;
    margin-bottom: 16px;
}

.page-body h3 {
    font-size: 20px;
    margin-top: 24px;
    margin-bottom: 12px;
}

.page-body ul, .page-body ol {
    margin: 16px 0;
    padding-left: 32px;
}

.page-body a {
    color: #c00;
}
</style>
@endpush
@endsection