/* ==========================================================================
   Page: Policy (Chính sách bảo mật / Điều khoản)
   Spec: pages/policy_page.md
   Chỉ chứa layout/style thực sự đặc thù cho page — không copy style của
   Navigation, Button, Breadcrumb hoặc Footer (theo pages/README.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   5. Policy Header — pages/policy_page.md §5
   -------------------------------------------------------------------------- */
.policy-header {
    padding-block: var(--space-8) var(--space-4);
    border-bottom: var(--border-width-sm) solid var(--color-border);
}

.policy-header__meta {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Layout wrapper — two-column (TOC + Sections) from desktop up,
   single column below. pages/policy_page.md §6.
   -------------------------------------------------------------------------- */
.policy-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 1024px) {
    .policy-layout {
        grid-template-columns: 260px minmax(0, 720px);
        gap: var(--space-12);
    }
}

/* --------------------------------------------------------------------------
   6. Table of Contents — pages/policy_page.md §6
   -------------------------------------------------------------------------- */
.policy-toc {
    order: -1;
}

.policy-toc__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.policy-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    font-size: var(--font-size-sm);
    counter-reset: policy-toc;
}

.policy-toc__list a {
    display: block;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding-block: var(--space-1);
}

.policy-toc__list a:hover {
    color: var(--color-text-link-hover);
}

/* Mobile: collapse into <details> instead of a permanently visible list,
   per spec — content editable in markup via <details><summary>. */
@media (max-width: 1023.98px) {
    .policy-toc {
        border: var(--border-width-sm) solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-4) var(--space-5);
    }

    .policy-toc__title {
        margin-bottom: 0;
    }

    .policy-toc[open] .policy-toc__title {
        margin-bottom: var(--space-3);
    }
}

@media (min-width: 1024px) {
    .policy-toc {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-6));
        order: 0;
    }
}

/* --------------------------------------------------------------------------
   7. Policy Sections — pages/policy_page.md §7
   Typography (h2/h3/p/ul) intentionally relies on typography.css defaults
   for a consistent reading experience; only spacing is page-specific.
   -------------------------------------------------------------------------- */
.policy-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 72ch;
}

.policy-section h2 {
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
    margin-bottom: var(--space-3);
}

.policy-section h3 {
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.policy-section p + p {
    margin-top: var(--space-3);
}

.policy-section ul,
.policy-section ol {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   8. Contact Note — pages/policy_page.md §8
   -------------------------------------------------------------------------- */
.policy-contact-note {
    padding-top: var(--space-6);
    border-top: var(--border-width-sm) solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.policy-contact-note a {
    font-size: inherit;
}