/**
 * Document Styles — A4 Policy Document
 * Matches visual style of Lohiya Intelligent Technologies PDF
 */

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Root Variables ─────────────────────────────────────────── */
:root {
    --a4-width:        210mm;
    --margin-top:      20mm;
    --margin-bottom:   20mm;
    --margin-left:     25mm;
    --margin-right:    25mm;

    --font-body:       'Segoe UI', Calibri, Arial, sans-serif;
    --font-size-body:  10.5pt;
    --line-height:     1.55;

    --color-text:         #1a1a1a;
    --color-title:        #1f3864;   /* dark navy — matches PDF title */
    --color-heading:      #2e75b6;   /* steel blue — matches PDF section headings */
    --color-rule:         #2e75b6;
    --color-bg-page:      #ffffff;
    --color-bg-screen:    #c8c8c8;
    --color-table-head:   #dce6f1;
    --color-table-border: #9dc3e6;
    --color-table-stripe: #f2f7fc;
}

/* ─── Screen Chrome ──────────────────────────────────────────── */
html {
    background: var(--color-bg-screen);
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    color: var(--color-text);
    line-height: var(--line-height);
    padding: 16mm 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10mm;
}

/* ─── A4 Page ────────────────────────────────────────────────── */
.document-page {
    width: var(--a4-width);
    min-height: 297mm;
    background: var(--color-bg-page);
    box-shadow: 0 2px 10px rgba(0,0,0,.30), 0 0 0 1px rgba(0,0,0,.06);
    padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
    overflow: visible;
}

/* ─── Document Title Block ───────────────────────────────────── */
.doc-title-block {
    margin-bottom: 10pt;
}

.doc-title-block h1 {
    font-size: 22pt;
    font-weight: 700;
    color: var(--color-title);
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 14pt 0;
}

.doc-title-block .doc-dates {
    font-size: 10pt;
    color: var(--color-text);
    margin-bottom: 4pt;
    line-height: 1.8;
}

.doc-title-block .doc-dates strong {
    font-weight: 700;
}

/* Thin horizontal divider below dates (matches PDF) */
.doc-divider {
    border: none;
    border-top: 1.5px solid #bbb;
    margin: 12pt 0 18pt 0;
    width: 60%;
}

/* ─── Section Headings ───────────────────────────────────────── */
h2 {
    font-size: 11.5pt;
    font-weight: 700;
    color: var(--color-heading);
    margin-top: 16pt;
    margin-bottom: 5pt;
    text-transform: none;
    letter-spacing: 0;
}

h3 {
    font-size: 10.5pt;
    font-weight: 700;
    color: var(--color-text);
    margin-top: 10pt;
    margin-bottom: 4pt;
}

/* ─── Body Text ──────────────────────────────────────────────── */
p {
    font-size: var(--font-size-body);
    margin-bottom: 7pt;
    text-align: left;
    line-height: var(--line-height);
    orphans: 3;
    widows: 3;
}

/* ─── Lists ──────────────────────────────────────────────────── */
ul, ol {
    margin: 4pt 0 8pt 0;
    padding-left: 16pt;
}

ul.bullet-plain {
    list-style: none;
    padding-left: 0;
}

ul.bullet-plain > li {
    padding-left: 12pt;
    position: relative;
    margin-bottom: 5pt;
}

ul.bullet-plain > li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-text);
}

li {
    margin-bottom: 4pt;
    font-size: var(--font-size-body);
    line-height: var(--line-height);
}

/* Indented sub-list for nested service provider entries */
ul.sub-list {
    list-style: none;
    padding-left: 12pt;
    margin-top: 3pt;
    margin-bottom: 3pt;
}

ul.sub-list > li {
    padding-left: 16pt;
    position: relative;
    margin-bottom: 3pt;
    font-size: var(--font-size-body);
}

ul.sub-list > li::before {
    content: "–";
    position: absolute;
    left: 0;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.policy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8pt 0 14pt;
    font-size: 10pt;
}

.policy-table th,
.policy-table td {
    border: 1px solid var(--color-table-border);
    padding: 5pt 8pt;
    vertical-align: top;
    text-align: left;
    line-height: 1.45;
}

.policy-table thead th {
    background-color: var(--color-table-head);
    font-weight: 700;
    color: var(--color-text);
}

.policy-table tbody tr:nth-child(even) td {
    background-color: var(--color-table-stripe);
}

/* ─── Contact / Notice Block ─────────────────────────────────── */
.contact-block {
    margin: 8pt 0 10pt;
    padding: 8pt 12pt;
    border-left: 3px solid var(--color-heading);
    background: #f0f6fc;
    font-size: var(--font-size-body);
    line-height: 1.75;
}

/* ─── Document Footer ────────────────────────────────────────── */
.doc-footer {
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1px solid #ccc;
    font-size: 8.5pt;
    color: #666;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6pt;
}

.doc-footer p {
    font-size: 8.5pt;
    margin: 0;
    color: #666;
    text-align: left;
}

/* ─── Inline utilities ───────────────────────────────────────── */
strong { font-weight: 700; }
em     { font-style: italic; }

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
    html, body {
        background: white;
        padding: 0;
        margin: 0;
        display: block;
    }

    .document-page {
        width: 100%;
        min-height: 0;
        box-shadow: none;
        padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
        page-break-after: always;
    }

    a { color: inherit; text-decoration: none; }
    h2 { page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media screen and (max-width: 860px) {
    body { padding: 6mm 0; }
    .document-page {
        width: 100%;
        min-height: 0;
        box-shadow: none;
        padding: 12mm 10mm;
    }
}

@media screen and (max-width: 480px) {
    :root { --font-size-body: 10pt; }
    .document-page { padding: 8mm 6mm; }
    .doc-title-block h1 { font-size: 16pt; }
    .doc-footer { flex-direction: column; }
}