/**
 * -------------------------------------------------------------
 *  LockedGPT — Secure GPT Access & Monetization Platform
 * -------------------------------------------------------------
 *  File: marketing.css
 *  Path: /public/assets/css/marketing.css
 *
 *  Description:
 *  Shared marketing styles for LockedGPT.com (dark theme).
 *  Used by index.php, pricing.php, policies.php.
 *
 *  Author: Andy Delgado
 *  Company: Apollos Development
 *  Website: https://lockedgpt.com
 *
 *  Created: 2025-12-26
 *  Last Updated: 2025-12-26
 *  Version: 1.0.1
 *
 *  Notes:
 *  - Include AFTER Bootstrap in head_common.php so overrides win.
 *  - Keep page-specific one-offs in the page file only if truly unique.
 *
 *  © 2025 Andy Delgado, Apollos Development. All rights reserved.
 * -------------------------------------------------------------
 */

/* =============================================================
   Theme tokens
   ============================================================= */
:root{
  --lg-bg: #0f1115;
  --lg-surface: #151922;
  --lg-border: #262c39;
  --lg-text: #e8ecf1;
  --lg-muted: #b4bcc8;
  --lg-link: #4da3ff;
  --lg-primary: #0d6efd;
  --lg-accent: #ffc107;
  --lg-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* =============================================================
   Base
   ============================================================= */
body{
  background: var(--lg-bg);
  color: var(--lg-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color: var(--lg-link); }
a:hover{ color: var(--lg-text); }

.fw-semibold{ font-weight: 600 !important; }
.fw-bold{ font-weight: 700 !important; }

.lead{ color: var(--lg-muted); }
.muted{ color: var(--lg-muted); }

/* Bootstrap helpers forced to our muted color */
.text-muted,
.text-secondary{
  color: var(--lg-muted) !important;
}

/* =============================================================
   Navbar / Footer
   ============================================================= */
.navbar{ background: var(--lg-surface); }

footer{
  border-top: 1px solid var(--lg-border);
}

footer a{
  color: var(--lg-muted);
  text-decoration: none;
}
footer a:hover{
  color: var(--lg-text);
  text-decoration: underline;
}

.text-xs{ font-size: .875rem; }

/* =============================================================
   Buttons / Badges
   ============================================================= */
.btn-primary{
  background-color: var(--lg-primary);
  border-color: var(--lg-primary);
}

.btn-outline-light{
  border-color: var(--lg-text);
  color: var(--lg-text);
}

.badge-soft{
  background: rgba(13,110,253,.18);
  border: 1px solid rgba(13,110,253,.28);
  color: var(--lg-text);
}

/* =============================================================
   Cards / Surfaces
   ============================================================= */
.shadow-soft{ box-shadow: var(--lg-shadow); }

.feature-card{
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  transition: transform .15s ease, border-color .15s ease;
}

.feature-card p{ color: var(--lg-muted); }

.feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,193,7,.35);
}

@media (prefers-reduced-motion: reduce){
  .feature-card{ transition: none; }
  .feature-card:hover{ transform: none; }
}

/* Policies "surface" blocks (also useful site-wide) */
.surface{
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  border-radius: 16px;
}

/* Used on policies.php */
.policy-nav a{
  color: var(--lg-text);
  text-decoration: none;
}
.policy-nav a:hover{ text-decoration: underline; }

.policy-section{
  scroll-margin-top: 96px; /* keeps headings visible under sticky nav */
}

/* =============================================================
   Hero (index + pricing)
   ============================================================= */
.hero{
  padding: 6rem 1rem;
  position: relative;
  overflow: hidden;
}

.hero h1 span{ color: var(--lg-accent); }

.hero::before{
  content:"";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(13,110,253,.25), transparent 60%),
    radial-gradient(700px 280px at 80% 20%, rgba(255,193,7,.18), transparent 55%);
  pointer-events: none;
}

.hero > .container{
  position: relative;
  z-index: 1;
}

/* If a page needs a tighter hero, add class="hero hero-compact" */
.hero.hero-compact{
  padding: 5rem 1rem 3rem;
}

/* =============================================================
   Tables (pricing plan comparison)
   ============================================================= */
.table-responsive{
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  border-radius: 16px;
  padding: 0;
}

.table{
  --bs-table-bg: var(--lg-surface);
  --bs-table-color: var(--lg-text);
  --bs-table-border-color: var(--lg-border);
  --bs-table-striped-bg: var(--lg-bg);
  --bs-table-striped-color: var(--lg-text);
  --bs-table-hover-bg: rgba(255,193,7,.08);
  --bs-table-hover-color: var(--lg-text);

  background: var(--lg-surface) !important;
  color: var(--lg-text) !important;
}

.table thead th{
  background: var(--lg-surface) !important;
  color: var(--lg-text) !important;
  border-bottom: 1px solid var(--lg-border) !important;
}

.table tbody th,
.table tbody td{
  background: var(--lg-surface) !important;
  color: var(--lg-text) !important;
  border-top: 1px solid var(--lg-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
  background: var(--lg-bg) !important;
  color: var(--lg-text) !important;
}

.table-hover > tbody > tr:hover > *{
  background: rgba(255,193,7,.08) !important;
  color: var(--lg-text) !important;
}

/* Comparison table alignment */
.table thead th:first-child,
.table tbody th[scope="row"]{
  text-align: left;
  white-space: nowrap;
}

.table thead th:not(:first-child),
.table tbody td{
  text-align: center;
  vertical-align: middle;
}

.table td i.bi-check2,
.table td i.bi-check2-circle{
  font-size: 1.05rem;
}

/* Darken "light" badges used on pricing cards */
.text-bg-light.border{
  background: var(--lg-bg) !important;
  border-color: var(--lg-border) !important;
  color: var(--lg-text) !important;
}

/* =============================================================
   Accordion (pricing FAQ)
   ============================================================= */
.accordion{
  --bs-accordion-bg: var(--lg-surface);
  --bs-accordion-border-color: var(--lg-border);
  --bs-accordion-color: var(--lg-text);
  --bs-accordion-btn-color: var(--lg-text);
  --bs-accordion-btn-bg: var(--lg-surface);
  --bs-accordion-active-color: var(--lg-bg);
  --bs-accordion-active-bg: var(--lg-accent);
}

.accordion-item{
  border: 1px solid var(--lg-border) !important;
  background: var(--lg-surface) !important;
}

.accordion-button{
  background: var(--lg-surface);
  color: var(--lg-text);
  border-color: var(--lg-border);
}

.accordion-button:not(.collapsed){
  color: var(--lg-bg);
  background: var(--lg-accent);
}

.accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(255,193,7,.25);
  border-color: var(--lg-accent);
}

.accordion-body{
  color: var(--lg-muted);
  background: var(--lg-surface);
}

/* Ensure the caret is visible in dark mode */
.accordion-button::after{ filter: invert(1); }
.accordion-button:not(.collapsed)::after{ filter: none; }

/* =============================================================
   Code / mono (policies)
   ============================================================= */
code,
.small-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
}