/* ================================================================
   VaultMTD — Legal Pages
   ================================================================
   File    : app/static/css/legal.css
   Used by : templates/privacy.html
             templates/terms.html
   Phase   : 20 Clean-up

   Standalone stylesheet — zero dependency on theme.css or sky.css.
   These pages are served before login so the theme system is not
   available. All tokens are hardcoded here.

   Sections
   ────────
   §1  Reset
   §2  Base / body
   §3  Top bar & navigation
   §4  Content wrapper & typography
   §5  Info / highlight boxes  (privacy + terms)
   §6  Rights grid             (privacy page only)
   §7  Footer
   ================================================================ */


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


/* ── §2  Base ─────────────────────────────────────────────────── */
body {
    background: #0a1929;
    color: #c9d9eb;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.75;
}


/* ── §3  Top bar & navigation ─────────────────────────────────── */
.legal-topbar {
    background: #0d1b2e;
    border-bottom: 1px solid #1a2e4a;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.legal-brand {
    font-size: 1rem;
    font-weight: 700;
    color: #f97316;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SVG logo image in topbar (replaces FA icon) */
.legal-brand-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Wrapper for the nav links on the right of the topbar */
.legal-nav-group {
    display: flex;
    gap: 20px;
}

.legal-nav-link {
    color: #8faec4;
    text-decoration: none;
    font-size: 0.85rem;
}
.legal-nav-link:hover { color: #f97316; }

/* Applied to the link matching the current page */
.legal-nav-link--active {
    color: #f97316;
    font-weight: 600;
}


/* ── §4  Content wrapper & typography ─────────────────────────── */
.legal-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #e8f0fb;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

.legal-meta {
    font-size: 0.83rem;
    color: #4a6a82;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid #1a2e4a;
}

h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #e8f0fb;
    margin: 32px 0 10px;
}

h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #c9d9eb;
    margin: 20px 0 8px;
}

p  { margin-bottom: 12px; color: #c9d9eb; }
ul { padding-left: 20px; margin-bottom: 12px; }
li { margin-bottom: 6px; color: #c9d9eb; }
a  { color: #f97316; text-decoration: none; }
a:hover { color: #ea6a00; }


/* ── §5  Info / highlight boxes ───────────────────────────────── */

/* Orange — used on Privacy page for data-controller callout */
.highlight-box {
    background: rgba(249, 115, 22, 0.07);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.9rem;
}
.highlight-box strong { color: #fdba74; }

/* Red — used on Terms page for legal disclaimers */
.warning-box {
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.9rem;
    color: #fca5a5;
}
.warning-box strong { color: #f87171; }

/* Sky blue — used on Terms page for informational callouts */
.info-box {
    background: rgba(56, 189, 248, 0.07);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 0.9rem;
    color: #7dd3fc;
}


/* ── §6  Rights grid (Privacy page only) ─────────────────────── */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.right-card {
    background: #0d1b2e;
    border: 1px solid #1a2e4a;
    border-radius: 8px;
    padding: 14px 16px;
}

.right-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e8f0fb;
    margin-bottom: 4px;
}

.right-card-desc {
    font-size: 0.78rem;
    color: #8faec4;
    line-height: 1.5;
}

/* Icon inside .right-card-title */
.legal-icon {
    color: #f97316;
    margin-right: 5px;
}


/* ── §7  Footer ───────────────────────────────────────────────── */
footer {
    border-top: 1px solid #1a2e4a;
    padding: 24px 32px;
    text-align: center;
    color: #4a6a82;
    font-size: 0.8rem;
}
footer a { color: #8faec4; }

.legal-footer-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Status Page (Phase 33 Part 4) ──────────────────────────────────────────
   Styles specific to /status — appended to legal.css so the status page can
   reuse the legal-topbar, legal-wrap, and legal-footer-inner chrome without
   needing a new standalone stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */

/* Hero section: centered heading + overall status badge */
.status-hero {
    text-align : center;
    padding    : 2.5rem 0 1.5rem;
}

.status-hero h1 {
    margin-bottom : 1rem;
    font-size     : 1.75rem;
    color         : #1e293b;
}

/* Overall status badge pill */
.status-badge {
    display       : inline-flex;
    align-items   : center;
    gap           : 0.5rem;
    padding       : 0.5rem 1.25rem;
    border-radius : 999px;
    font-weight   : 700;
    font-size     : 1rem;
}

.status-badge--ok {
    background : #dcfce7;
    color      : #166534;
}

.status-badge--degraded {
    background : #fef3c7;
    color      : #92400e;
}

/* Check list */
.status-checks {
    list-style : none;
    padding    : 0;
    margin     : 2rem 0;
    border     : 1px solid #e5e7eb;
    border-radius: 8px;
    overflow   : hidden;
}

.status-check {
    display     : flex;
    align-items : center;
    gap         : 0.75rem;
    padding     : 0.85rem 1.1rem;
    background  : #fff;
    border-bottom: 1px solid #f1f5f9;
    font-size   : 0.9rem;
}

.status-check:last-child {
    border-bottom: none;
}

/* Health indicator icon (left-most — large circle-check / circle-xmark) */
.status-check__icon {
    font-size  : 1.15rem;
    flex-shrink: 0;
    width      : 1.25rem;
    text-align : center;
}

.status-check__icon--ok      { color: #16a34a; }
.status-check__icon--fail    { color: #dc2626; }
.status-check__icon--unknown { color: #9ca3af; }

/* Small service-type icon (fa-server, fa-database, etc.) */
.status-check__service-icon {
    font-size  : 0.85rem;
    color      : #94a3b8;
    flex-shrink: 0;
    width      : 1rem;
    text-align : center;
}

/* Subsystem name */
.status-check__name {
    font-weight : 600;
    color       : #1e293b;
    flex        : 1;
    min-width   : 0;
}

/* Status detail (Connected, Status unknown, etc.) */
.status-check__detail {
    font-size : 0.85rem;
    color     : #64748b;
}

/* Pill badge on the right */
.status-check__pill {
    font-size     : 0.75rem;
    font-weight   : 600;
    padding       : 0.2rem 0.6rem;
    border-radius : 999px;
    white-space   : nowrap;
    flex-shrink   : 0;
}

.status-check__pill--ok      { background: #dcfce7; color: #166534; }
.status-check__pill--fail    { background: #fee2e2; color: #991b1b; }
.status-check__pill--unknown { background: #f1f5f9; color: #64748b; }

/* "Last checked" + refresh/privacy links */
.status-meta {
    text-align : center;
    font-size  : 0.8rem;
    color      : #94a3b8;
    margin-top : 1.5rem;
}

.status-meta a {
    color           : #3b82f6;
    text-decoration : none;
}

.status-meta a:hover { text-decoration: underline; }

/* Responsive — collapse detail text on very narrow screens */
@media (max-width: 480px) {
    .status-check__detail { display: none; }
    .status-check { gap: 0.5rem; }
}


/* ── §8  Contact form (contact.html only) ─────────────────────── */

/* Flash messages */
.contact-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 18px 0;
    font-size: 14px;
    line-height: 1.5;
}
.contact-flash--success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}
.contact-flash--error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* Form layout */
.contact-form { margin: 18px 0 8px; max-width: 640px; }
.contact-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-form-row .contact-field { flex: 1 1 240px; }
.contact-field { margin-bottom: 16px; }
.contact-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #9fb3cc;
    margin-bottom: 6px;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    background: #0d1b2e;
    border: 1px solid #1a2e4a;
    border-radius: 8px;
    color: #e6eef8;
    padding: 11px 13px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: #38bdf8;
}
.contact-field textarea { resize: vertical; min-height: 120px; }

/* Cloudflare Turnstile widget */
.cf-turnstile-wrap { margin: 8px 0 18px; }

/* Submit button */
.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #38bdf8;
    color: #0a1929;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.contact-submit-btn:hover { filter: brightness(1.08); }

/* Honeypot — hidden from humans (Layer 2 bot protection).
   Six !important declarations for CSS-override safety, mirroring auth.css §18. */
.hp-field {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}