/* ============================================================
   Dualis -- Legal Pages Styles
   Applies to: tracker-privacy-policy.html
               tracker-terms-conditions.html
               tracker-sms-opt-in.html
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
    --navy:          #1d2f6f;
    --navy-light:    #2d3f8f;
    --red:           #c03535;
    --red-dark:      #9a2525;
    --text-primary:  #1a1a2e;
    --text-secondary:#64748b;
    --light-bg:      #f8f9fa;
}

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    line-height: 1.7;
    background: var(--light-bg);
}

/* ---- Page Header ---- */
.page-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: white;
    padding: 3rem 0;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.page-header .home-link {
    color: var(--red);
    text-decoration: none;
    font-size: 0.9rem;
}

.page-header .home-link:hover { text-decoration: underline; }

/* ---- Content Card ---- */
.content-section {
    background: white;
    border-radius: 0.5rem;
    padding: 3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin: 3rem 0;
}

/* ---- Typography ---- */
h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }

h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--navy);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* ---- Info / Warning Boxes ---- */
.info-box {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.info-box h3,
.info-box h4 {
    color: #1e40af;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.warning-box {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.warning-box h2,
.warning-box h3 {
    color: #92400e;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border: none;
    margin-top: 0;
    padding-bottom: 0;
}

/* ---- Lists ---- */
ul, ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
li     { margin-bottom: 0.5rem; }

/* ---- Tables ---- */
table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
th, td { padding: 0.75rem; text-align: left; border: 1px solid #e5e7eb; }
th { background: #f8f9fa; font-weight: 600; }

/* ---- Footer ---- */
footer {
    background: var(--navy);
    color: rgba(255,255,255,0.8);
    padding: 2rem 0;
    margin-top: 4rem;
}

footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
footer a:hover { color: var(--red); }

/* ---- SMS Opt-In: Consent Language Box ---- */
.consent-box {
    background: #f0f9ff;
    border: 2px solid #3b82f6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.consent-box p { margin: 0; font-size: 0.95rem; }
.consent-box hr { margin: 0.75rem 0; }
.consent-box .consent-label { font-size: 0.95rem; margin-bottom: 0; }
.consent-box .consent-text  { margin: 0; }

/* ---- SMS Opt-In: Sample Messages ---- */
.sample-messages {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.sample-messages .sample-label { margin: 0 0 1rem; }
.sample-messages .sample-label:not(:first-child) { margin-top: 1.5rem; }

.sample-message {
    background: white;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    margin: 0 0 1.5rem;
    font-family: monospace;
    font-size: 0.9rem;
}

.sample-message:last-child { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .content-section { padding: 1.5rem; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .content-section { padding: 1rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
}