/*
 * dark-theme.css
 * Applied to all Website/pages/* to match the index.html dark palette.
 * Import AFTER style.css.
 */

/* ── BODY & BACKGROUND ───────────────────────────────── */
body { background: var(--bg-mid); color: var(--text-light); }

/* ── NAVBAR ──────────────────────────────────────────── */
.navbar { background: var(--bg-dark); border-bottom-color: var(--border-dark); }
.nav-brand { color: var(--primary) !important; }
.nav-link { color: rgba(242,242,240,0.5); }
.nav-link:hover,
.nav-link.active { color: var(--text-light); border-bottom-color: var(--primary); }
.nav-toggle span { background: var(--text-light); }
.nav-menu { background: var(--bg-dark); border-bottom-color: var(--border-dark); }
/* Mobile link overrides from base CSS */
@media (max-width: 768px) {
    .nav-link, .btn-nav {
        color: var(--text-light) !important;
        border-color: var(--border-dark);
    }
    .nav-menu li { border-bottom-color: var(--border-dark); }
}

/* ── PAGE HEROES ─────────────────────────────────────── */
.page-hero-dark { background: var(--bg-dark); }
.page-hero-dark h1 { color: var(--text-light); }
.page-hero-dark p { color: rgba(242,242,240,0.58); }
.breadcrumb { color: rgba(242,242,240,0.35); }
.breadcrumb a { color: var(--primary); }

/* ── SECTIONS ────────────────────────────────────────── */
.content-section          { background: var(--bg-dark-2); }
.content-section--alt     { background: var(--bg-dark);
                             border-top-color: var(--border-dark);
                             border-bottom-color: var(--border-dark); }
.cta-section              { background: var(--bg-dark-2); }

/* ── TYPOGRAPHY ──────────────────────────────────────── */
h2               { color: var(--text-light); }
h3               { color: var(--text-light); }
p                { color: rgba(242,242,240,0.6); }
.subtitle        { color: rgba(242,242,240,0.5); max-width: 600px; }
.section-label   { color: var(--primary); }

/* ── CARDS ───────────────────────────────────────────── */
.card {
    background: rgba(26,28,31,0.55);
    border-color: var(--border-dark);
}
.card h3 { color: var(--text-light); }
.card p  { color: rgba(242,242,240,0.52); }
.card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(207,169,123,0.1);
}
.card-link { color: var(--primary); }

/* ── PROCESS STEPS ───────────────────────────────────── */
.step-icon {
    background: var(--bg-dark);
    border-color: rgba(242,242,240,0.1);
}
.step-icon svg { stroke: rgba(242,242,240,0.45); }
.step:hover .step-icon {
    border-color: var(--primary);
    background: rgba(207,169,123,0.08);
}
.step:hover .step-icon svg { stroke: var(--primary); }
.step-body h3 { color: var(--text-light); }
.step-body p  { color: rgba(242,242,240,0.55); }

/* ── DELIVERABLE CARDS ───────────────────────────────── */
.deliverable-card {
    background: var(--bg-dark);
    border-color: var(--border-dark);
}
.deliverable-card h3 { color: var(--text-light); }
.deliverable-card ul li { color: rgba(242,242,240,0.55); }
.deliverable-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(207,169,123,0.1);
}
.deliverable-icon {
    background: rgba(207,169,123,0.12);
}
.deliverable-icon svg { stroke: var(--primary); }

/* ── TABLES ──────────────────────────────────────────── */
.product-table th {
    background: var(--bg-dark);
    color: rgba(242,242,240,0.45);
    border-bottom-color: var(--border-dark);
}
.product-table td {
    border-bottom-color: var(--border-dark);
    color: rgba(242,242,240,0.72);
}
.product-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ── SPEC LIST ───────────────────────────────────────── */
.spec-list li { color: rgba(242,242,240,0.62); }
.spec-list li::before { color: var(--primary); }

/* ── STAT ROW ────────────────────────────────────────── */
.stat-row { border-color: var(--border-dark); }
.stat-row-item { background: var(--bg-dark); border-right-color: var(--border-dark); }
.stat-row-item:hover { background: rgba(255,255,255,0.04); }
.stat-row-item .stat-desc { color: rgba(242,242,240,0.4); }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary { color: var(--bg-dark); }
.btn-nav     { color: var(--bg-dark) !important; }
.btn-secondary {
    background: transparent;
    color: var(--text-light);
    border-color: rgba(242,242,240,0.2);
}
.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}
.btn-outline { border-color: var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--bg-dark); }

/* ── CTA BOX ─────────────────────────────────────────── */
.cta-box { background: var(--primary); }
.cta-box h2  { color: var(--bg-dark) !important; }
.cta-box p   { color: rgba(26,28,31,0.72) !important; }
.cta-box .btn-primary { background: var(--bg-dark); color: var(--primary); }
.cta-box .btn-primary:hover { background: var(--bg-dark-2); }

/* ── CONTACT FORM ────────────────────────────────────── */
.contact-item-icon { background: rgba(207,169,123,0.12); color: var(--primary); }
.contact-item h4   { color: var(--text-light); }
.contact-item p, .contact-item a { color: rgba(242,242,240,0.55); }
.contact-item a:hover { color: var(--primary); }
.contact-item { border-bottom-color: var(--border-dark); }

.response-card { background: var(--bg-dark); border-color: var(--border-dark); }
.response-card .time { color: var(--primary); }
.response-card .type { color: rgba(242,242,240,0.45); }
.response-card:hover { border-color: var(--primary); }

.form-card {
    background: var(--bg-dark);
    border-color: var(--border-dark);
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.form-card h2 { color: var(--text-light); }
.form-card > p { color: rgba(242,242,240,0.55); }

.form-group label { color: rgba(242,242,240,0.52); }
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-dark-2);
    border-color: var(--border-dark);
    color: var(--text-light);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(242,242,240,0.2); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(207,169,123,0.15);
}
.form-group select option { background: var(--bg-dark-2); color: var(--text-light); }

/* ── ABOUT HERO ──────────────────────────────────────── */
.about-hero { background: var(--bg-dark) !important; }
.stat-dark-box { background: rgba(58,63,69,0.6) !important; border-color: rgba(242,242,240,0.06) !important; }

/* ── TIMELINE ────────────────────────────────────────── */
.timeline::before { background: var(--border-dark); }
.timeline-item::before { border-color: var(--bg-dark-2); }
.timeline-year { color: var(--primary); }
.timeline-item h3 { color: var(--text-light); }
.timeline-item p  { color: rgba(242,242,240,0.52); }

/* ── VALUE CARDS ─────────────────────────────────────── */
.value-card {
    background: rgba(26,28,31,0.55);
    border-color: var(--border-dark);
}
.value-card h3 { color: var(--text-light); }
.value-card p  { color: rgba(242,242,240,0.52); }
.value-card:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(207,169,123,0.1); }
.value-icon { background: rgba(207,169,123,0.12); }
.value-icon svg { stroke: var(--primary); }

/* ── TEAM CARDS ──────────────────────────────────────── */
.team-card-new {
    background: var(--bg-dark);
    border-color: var(--border-dark);
}
.team-card-new h3 { color: var(--text-light); }
.team-role { color: var(--primary); }
.team-skill {
    background: rgba(58,63,69,0.8);
    border-color: var(--border-dark);
    color: rgba(242,242,240,0.55);
}

/* ── TOOL TAGS ───────────────────────────────────────── */
.tool-tag {
    background: var(--bg-dark-2) !important;
    border-color: var(--border-dark) !important;
    color: rgba(242,242,240,0.72) !important;
}
.tool-tag:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.tool-cat { color: rgba(242,242,240,0.38) !important; }

/* ── HOVER LIFT ──────────────────────────────────────── */
.hover-lift:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.35); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer { background: var(--bg-dark); border-top-color: var(--border-dark); }
.footer-content { border-bottom-color: var(--border-dark); }
.footer-brand p { color: rgba(242,242,240,0.38); }
.footer-section h4 { color: var(--text-light); }
.footer-section ul li a { color: rgba(242,242,240,0.42); }
.footer-section ul li a:hover { color: var(--primary); }
.footer-bottom { color: rgba(242,242,240,0.28); }