/* ═══════════════════════════════════════════════════ */
/* TCM Legal Pages — Content Styles Only               */
/* Uses style.css for nav, footer, and fonts           */
/* ═══════════════════════════════════════════════════ */

body.legal-body { overflow: hidden; }
body.legal-body.loaded { overflow: auto; }

/* LOADER */
.page-loader {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-icon {
    font-size: 80px;
    color: var(--gold);
    animation: loaderPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(201,168,76,0.4));
    margin-bottom: 24px;
}

/* Force solid nav background on legal pages (no hero behind it) */
.legal-body .nav { background: rgba(0,0,0,0.95) !important; backdrop-filter: blur(20px); }
.loader-bar { width: 120px; height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), #fff); border-radius: 2px; animation: loaderFill 1.2s ease-out forwards; }
@keyframes loaderPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} }
@keyframes loaderFill { 0%{width:0%} 100%{width:100%} }

/* PAGE CONTENT */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 140px 24px 80px;
}
.legal-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--gold);
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.15);
    padding: 6px 14px; border-radius: 50px; margin-bottom: 20px;
}
.legal-title {
    font-size: clamp(32px, 5vw, 52px); font-weight: 800; color: #fff;
    font-family: var(--font-display); line-height: 1.1; margin-bottom: 12px;
}
.legal-subtitle { font-size: 16px; color: rgba(255,255,255,0.4); margin-bottom: 48px; }

/* Section blocks */
.legal-section {
    margin-bottom: 48px; padding: 32px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px; transition: border-color 0.3s;
}
.legal-section:hover { border-color: rgba(201,168,76,0.1); }
.legal-section h2 {
    font-size: 22px; font-weight: 700; color: var(--gold);
    font-family: var(--font-display); margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.legal-section h2 .section-icon { font-size: 20px; }
.legal-section h3 { font-size: 17px; font-weight: 600; color: #fff; margin: 20px 0 8px; }
.legal-section p { margin-bottom: 12px; color: rgba(255,255,255,0.7); line-height: 1.7; }
.legal-section ul { list-style: none; padding: 0; margin: 12px 0; }
.legal-section ul li { padding: 6px 0 6px 24px; position: relative; color: rgba(255,255,255,0.7); }
.legal-section ul li::before {
    content: ''; position: absolute; left: 6px; top: 14px;
    width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}

/* Table of contents */
.legal-toc {
    margin-bottom: 48px; padding: 28px 32px;
    background: rgba(201,168,76,0.03);
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 12px;
}
.legal-toc h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 16px; }
.legal-toc a {
    display: block; padding: 8px 0; color: rgba(255,255,255,0.7); text-decoration: none;
    font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: color 0.3s, padding-left 0.3s;
}
.legal-toc a:last-child { border-bottom: none; }
.legal-toc a:hover { color: var(--gold); padding-left: 8px; }

/* Risk banner (disclaimer page) */
.risk-banner {
    background: linear-gradient(135deg, rgba(239,83,80,0.08), rgba(201,168,76,0.05));
    border: 1px solid rgba(239,83,80,0.15);
    border-radius: 12px; padding: 32px; margin-bottom: 48px; text-align: center;
}
.risk-banner h2 { font-size: 24px; font-weight: 800; color: #ef5350; font-family: var(--font-display); margin-bottom: 12px; }
.risk-banner p { color: rgba(255,255,255,0.6); font-size: 15px; max-width: 600px; margin: 0 auto; }

@media (max-width: 768px) {
    .legal-page { padding: 120px 16px 60px; }
    .legal-section { padding: 24px 20px; }
    .legal-title { font-size: clamp(28px, 7vw, 40px); }
}