/* ============================================
   THEME.CSS — PT. Surya Bangkit Cemerlang
   Premium Luxury Redesign
   ============================================ */

/* ─────────────────────────────────────────────
   LIGHT MODE — Cream & Gold
───────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg-body:           #FAFAF5;
  --bg-section-alt:    #F3EDE3;
  --bg-card:           #FFFFFF;
  --bg-navbar:         rgba(250,250,245,0.96);
  --bg-navbar-scrolled: rgba(250,250,245,0.98);
  --bg-footer:         #1A1208;
  --bg-overlay:        rgba(255,255,255,0.6);

  --text-heading:      #1A1208;
  --text-body:         #4A3E2E;
  --text-muted:        #7A6858;
  --text-navbar:       #1A1208;
  --text-footer:       #A09070;

  --accent:            #8A4E0F;
  --accent-hover:      #A0621A;
  --accent-light:      #C8972A;
  --accent-bg:         rgba(138, 78, 15, 0.07);
  --accent-border:     rgba(138, 78, 15, 0.2);

  --border-soft:       #E8DEC8;
  --border-card:       #DDD0B8;
  --shadow-card:       rgba(0,0,0,0.06);
  --shadow-navbar:     rgba(0,0,0,0.04);

  --input-bg:          #F3EDE3;
  --input-border:      rgba(138, 78, 15, 0.2);
  --input-text:        #1A1208;
  --input-placeholder: #B0A090;

  --dropdown-bg:       #FFFFFF;
  --dropdown-border:   #E8DEC8;

  --footer-heading:    #DED0B0;
  --footer-text:       #A09070;
  --footer-muted:      #706050;
  --footer-link:       #A09070;
  --footer-link-hover: #C8972A;
  --footer-border:     rgba(200,151,42,0.15);
  --footer-strong:     #DED0B0;
  --footer-bottom:     #5A4A38;
}

/* ─────────────────────────────────────────────
   DARK MODE — Premium Luxury
───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-body:           #080808;
  --bg-section-alt:    #0E0E0E;
  --bg-card:           #111111;
  --bg-navbar:         rgba(8,8,8,0.92);
  --bg-navbar-scrolled: rgba(5,5,5,0.96);
  --bg-footer:         #050505;
  --bg-overlay:        rgba(12,12,12,0.5);

  --text-heading:      #EDE5D5;
  --text-body:         #9A9080;
  --text-muted:        #6A6050;
  --text-navbar:       #C8C0B0;
  --text-footer:       #5A5248;

  --accent:            #C8972A;
  --accent-hover:      #E0B04A;
  --accent-light:      #E8C47A;
  --accent-bg:         rgba(200,151,42,0.08);
  --accent-border:     rgba(200,151,42,0.22);

  --border-soft:       rgba(200,151,42,0.12);
  --border-card:       rgba(200,151,42,0.12);
  --shadow-card:       rgba(0,0,0,0.4);
  --shadow-navbar:     rgba(0,0,0,0.3);

  --input-bg:          rgba(200,151,42,0.05);
  --input-border:      rgba(200,151,42,0.18);
  --input-text:        #EDE5D5;
  --input-placeholder: #3A3028;

  --dropdown-bg:       rgba(12,12,12,0.97);
  --dropdown-border:   rgba(200,151,42,0.12);

  --footer-heading:    #EDE5D5;
  --footer-text:       #5A5248;
  --footer-muted:      #3A3028;
  --footer-link:       #5A5248;
  --footer-link-hover: #C8972A;
  --footer-border:     rgba(200,151,42,0.1);
  --footer-strong:     #9A9080;
  --footer-bottom:     #3A3028;
}

/* ─────────────────────────────────────────────
   SMOOTH TRANSITIONS
───────────────────────────────────────────── */
body, .navbar, .about-section, .product-section,
.gallery-section, .site-footer, .product-card,
.about-info, .stat-box, .vm-card, .stat-card,
.value-card, .highlight-card, .benefit-card,
.process-step-card, .event-card, .cert-card,
.contact-form-box, .cta-box, .component-card,
.dropdown-content, .faq-question, .faq-answer {
  transition:
    background-color 0.35s ease,
    border-color      0.35s ease,
    color             0.25s ease,
    box-shadow        0.25s ease !important;
}

/* ─────────────────────────────────────────────
   BODY
───────────────────────────────────────────── */
body {
  background-color: var(--bg-body) !important;
  color: var(--text-body) !important;
}

/* ─────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────── */
.navbar {
  background: var(--bg-navbar) !important;
  border-bottom-color: var(--border-soft) !important;
}
.navbar.scrolled { background: var(--bg-navbar-scrolled) !important; }
.brand-title  { color: var(--text-heading) !important; }
.brand-tagline { color: var(--text-muted) !important; }
.navbar-menu > a,
.navbar-menu .dropdown > a { color: var(--text-navbar) !important; }
.navbar-menu > a:hover,
.navbar-menu .dropdown > a:hover { color: var(--accent) !important; }
.navbar-menu > a.nav-active,
.navbar-menu .dropdown > a.nav-active { color: var(--accent) !important; }
.navbar-icon-btn {
  border-color: var(--border-soft) !important;
  color: var(--text-navbar) !important;
}
.navbar-icon-btn:hover,
.navbar-icon-btn:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.dropdown-content {
  background: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
.dropdown-content a { color: var(--text-navbar) !important; }
.dropdown-content a:hover { color: var(--accent) !important; }
.dropdown-content a.nav-active {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
}

/* ─────────────────────────────────────────────
   THEME TOGGLE BUTTON
───────────────────────────────────────────── */
.theme-toggle {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 30px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex; align-items: center; gap: 6px;
  color: var(--text-navbar);
  margin-left: 8px;
  user-select: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s !important;
}
.theme-toggle:hover {
  background: var(--accent-border);
  border-color: var(--accent);
}
@media (max-width: 950px) { .theme-toggle { margin-left: 0; } }

/* ─────────────────────────────────────────────
   MARQUEE
───────────────────────────────────────────── */
.marquee-strip { background: var(--accent) !important; }
[data-theme="light"] .marquee-track span { color: #fff !important; }
[data-theme="dark"]  .marquee-track span { color: #080808 !important; }

/* ─────────────────────────────────────────────
   ABOUT SECTION
───────────────────────────────────────────── */
.about-section { background: var(--bg-body) !important; }
.section-title,
.section-title-product,
.section-title-gallery { color: var(--text-heading) !important; }
.section-eyebrow { color: var(--accent) !important; }
.section-divider { background: linear-gradient(90deg, var(--accent), transparent) !important; }
.about-info h3  { color: var(--text-heading) !important; }
.about-tagline  { color: var(--accent) !important; }
.about-description { color: var(--text-muted) !important; }
.about-stats {
  border-color: var(--border-card) !important;
}
.stat-box {
  background: var(--accent-bg) !important;
  border-right-color: var(--border-card) !important;
}
.stat-number { color: var(--accent) !important; }
.stat-label  { color: var(--text-muted) !important; }
.about-btn   { border-color: var(--accent-border) !important; color: var(--accent) !important; }
.about-btn:hover { background: var(--accent) !important; color: var(--bg-body) !important; }

/* ─────────────────────────────────────────────
   PRODUCT SECTION
───────────────────────────────────────────── */
.product-section {
  background: var(--bg-section-alt) !important;
}
.product-intro { color: var(--text-muted) !important; }
.product-grid {
  background: var(--border-card) !important;
  border-color: var(--border-card) !important;
}
.product-card { background: var(--bg-card) !important; }
.product-card:hover { background: var(--bg-body) !important; }
.product-info h3 { color: var(--text-heading) !important; }
.product-info p  { color: var(--text-muted) !important; }
.view-all-btn {
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
.view-all-btn:hover { background: var(--accent) !important; color: var(--bg-body) !important; }

/* ─────────────────────────────────────────────
   GALLERY SECTION
───────────────────────────────────────────── */
.gallery-section { background: var(--bg-body) !important; }
.gallery-intro   { color: var(--text-muted) !important; }
.view-more-gallery-btn {
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
.view-more-gallery-btn:hover { background: var(--accent) !important; color: var(--bg-body) !important; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer {
  background: var(--bg-footer) !important;
  border-top-color: var(--footer-border) !important;
}
.footer-brand h3,
.footer-contact h3,
.footer-nav h3  { color: var(--footer-heading) !important; }
.footer-description { color: var(--footer-muted) !important; }
.footer-bottom p    { color: var(--footer-bottom) !important; }
.contact-list li div { color: var(--footer-text) !important; }
.contact-list strong { color: var(--footer-strong) !important; }
.nav-list li a       { color: var(--footer-link) !important; }
.nav-list li a:hover { color: var(--footer-link-hover) !important; }
.social-icon-footer  {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

/* ─────────────────────────────────────────────
   INNER PAGE SECTIONS
───────────────────────────────────────────── */
.about-section.company-profile,
.cp-vision-mission, .cert-intro, .cert-cta,
.cap-intro, .cap-cta, .process-intro, .process-cta,
.featured-video-section, .video-cta,
.contact-main-section, .contact-map-section,
.product-detail-simple, .faq-section,
.events-intro, .events-cta { background: var(--bg-body) !important; }

.cp-stats, .core-values-section,
.cert-grid-section, .cert-benefits,
.cap-category, .cap-stats,
.process-timeline-visual, .process-steps-section,
.process-stats, .events-section, .event-stats,
.video-highlights, .product-components-section { background: var(--bg-section-alt) !important; }

/* Cards */
.vm-card, .stat-card, .value-card,
.highlight-card, .benefit-card,
.process-step-card, .event-card, .cert-card,
.contact-form-box, .video-info,
.component-card, .product-simple-specs,
.cta-box {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
}
.stats-grid, .about-stats-grid,
.values-grid, .highlights-grid,
.benefits-grid, .component-grid, .components-grid {
  background: var(--border-card) !important;
  border-color: var(--border-card) !important;
}
.about-stats-grid .stat-box,
.stat-card { background: var(--bg-card) !important; }
.stat-card:hover { background: var(--bg-section-alt) !important; }

/* Headings in cards */
.vm-card h3, .value-name, .value-card h4,
.highlight-card h4, .benefit-card h4,
.step-info h3, .event-content h3,
.cert-info h3, .component-label h4,
.video-info h3, .cta-box h2, .cta-content h2,
.contact-form-box h2, .contact-info-box h2,
.product-simple-info h1,
.product-components-section h2 { color: var(--text-heading) !important; }

/* Accent headings */
.cp-stats h2, .core-title, .category-subtitle,
.cert-intro h2, .cert-grid-section h2, .cert-benefits h2,
.cap-intro h2, .cap-stats h2,
.process-intro h2, .process-steps-section h2, .process-timeline-visual h2,
.process-stats h2,
.events-intro h2, .events-section h2,
.featured-video-section h2, .video-highlights h2,
.about-section.company-profile .section-title { color: var(--accent) !important; }

/* Text in cards */
.vm-card p, .vm-card ul li,
.value-text, .value-card p,
.highlight-card p, .benefit-card p,
.step-description, .step-details li,
.event-description, .cert-description,
.category-text p, .capability-list li,
.detail-item p, .cta-box p, .cta-content p,
.about-text p, .product-desc p,
.contact-text p, .map-note,
.detail-value, .event-detail-item,
.product-simple-specs li { color: var(--text-muted) !important; }

.detail-label, .cert-title,
.product-subtitle { color: var(--text-muted) !important; }
.product-tag { color: var(--accent) !important; border-color: var(--accent-border) !important; background: var(--accent-bg) !important; }
.product-divider { background: var(--accent) !important; }

/* Accent elements */
.stat-card .stat-number,
.about-stats-grid .stat-number { color: var(--accent) !important; }
.stat-card .stat-label,
.about-stats-grid .stat-label { color: var(--text-muted) !important; }
.vm-card ul li::before,
.capability-list li::before { background: var(--accent) !important; }
.vm-card ul li::before { color: var(--accent) !important; }
/* .flow-* and .step-num[-badge] use theme tokens directly in style.css */
.category-header h2 { color: var(--text-heading) !important; }
.category-subtitle  { color: var(--accent) !important; }
.capability-list li strong { color: var(--accent) !important; }
.capability-badge,
.badge-item { color: var(--accent) !important; border-color: var(--accent-border) !important; background: var(--accent-bg) !important; }
.category-image { border-color: var(--border-card) !important; }
.cert-logo-badge { background: var(--accent-bg) !important; border-color: var(--accent-border) !important; }
.cert-details { border-top-color: var(--border-card) !important; }
.view-cert-btn, .cta-btn.primary, .hero-btn-primary, .view-detail-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.cta-btn.secondary, .hero-btn-secondary {
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}
.about-btn { background: transparent !important; }

/* FAQ */
.faq-question {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--border-card) !important;
}
.faq-answer { background: var(--bg-section-alt) !important; border-color: var(--border-card) !important; }
.faq-answer p { color: var(--text-muted) !important; }

/* Forms */
.form-group label { color: var(--accent) !important; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
select { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; }
select option { background-color: var(--bg-card) !important; color: var(--input-text) !important; }
.contact-icon-box,
.map-info { background: var(--accent-bg) !important; border-color: var(--accent-border) !important; }
.contact-text h4 { color: var(--accent) !important; }
.map-note strong  { color: var(--accent) !important; }

/* Inner hero text */
.cp-hero-content p,
.video-hero-content p,
.cert-hero-content p,
.cap-hero-content p,
.process-hero-content p,
.events-hero-content p,
.contact-hero-content p { color: var(--accent) !important; }

/* Intro text */
.intro-text, .video-intro, .map-subtitle,
.contact-intro, .stats-intro, .components-intro,
.core-subtitle, .core-subtitle { color: var(--text-muted) !important; }

/* Certification + Process intro paragraphs read too dim against the near-black dark background */
[data-theme="dark"] .cert-intro .intro-text,
[data-theme="dark"] .process-intro .intro-text { color: var(--text-body) !important; }
/* Process step-card body copy — lift off the too-dim muted token on near-black */
[data-theme="dark"] .process-steps-section .step-description,
[data-theme="dark"] .process-steps-section .step-details li { color: var(--text-body) !important; }

/* ─────────────────────────────────────────────
   FOOTER (dark footer on light site)
───────────────────────────────────────────── */
.site-footer {
  background: var(--bg-footer) !important;
  border-top-color: var(--footer-border) !important;
}
.footer-brand h3,
.footer-contact h3,
.footer-nav h3    { color: var(--footer-heading) !important; }
.footer-description { color: var(--footer-muted) !important; }
.footer-bottom p  { color: var(--footer-bottom) !important; }
.contact-list li div  { color: var(--footer-text) !important; }
.contact-list strong  { color: var(--footer-strong) !important; }
.nav-list li a        { color: var(--footer-link) !important; }
.nav-list li a:hover  { color: var(--footer-link-hover) !important; }
.social-icon-footer {
  background: rgba(200,151,42,0.1) !important;
  border-color: rgba(200,151,42,0.2) !important;
  color: #C8972A !important;
}
.contact-icon { color: var(--footer-link) !important; }

/* ─────────────────────────────────────────────
   CAPABILITIES PAGE — Immersive Panels
───────────────────────────────────────────── */
.cap-intro-strip {
  background: var(--bg-body) !important;
  border-bottom-color: var(--border-card) !important;
}
.cap-intro-text  { color: var(--text-muted) !important; }
.cap-intro-label { color: var(--accent) !important; }
.cap-count-num   { color: var(--accent) !important; }
.cap-count-label { color: var(--text-muted) !important; }
.cap-intro-counts { border-left-color: var(--border-card) !important; }

/* Panel: image fade adapts to bg color */
.cap-panel-fade {
  background: linear-gradient(to right, transparent 50%, var(--bg-body) 100%) !important;
}
.cap-panel-fade-right {
  background: linear-gradient(to left, transparent 50%, var(--bg-body) 100%) !important;
}
.cap-panel-content { background: var(--bg-body) !important; }
.cap-panel::before {
  background: linear-gradient(90deg, transparent, var(--border-card), transparent) !important;
}

/* Panel text */
.cap-panel-num   { color: var(--accent-bg) !important; }
.cap-panel-tag   { color: var(--accent) !important; }
.cap-panel-tag::before { background: var(--accent) !important; }
.cap-panel-title { color: var(--text-heading) !important; }
.cap-panel-desc  { color: var(--text-muted) !important; }
.cf-name { color: var(--text-heading) !important; }
.cf-desc { color: var(--text-muted) !important; }
.cap-feature-list li  { border-color: var(--border-card) !important; }
.cap-cert-badge {
  background: var(--accent-bg) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
.cap-cert-badge svg { stroke: var(--accent) !important; }

/* Stats strip */
.cap-stats-strip {
  background: var(--bg-section-alt) !important;
  border-color: var(--border-card) !important;
}
.cap-stat-num    { color: var(--accent) !important; }
.cap-stat-label  { color: var(--text-muted) !important; }
.cap-stat-divider { background: var(--border-card) !important; }

/* CTA section */
.cap-cta-section   { background: var(--bg-body) !important; }
.cap-cta-title     { color: var(--text-heading) !important; }
.cap-cta-sub       { color: var(--text-muted) !important; }
.cap-cta-eyebrow   { color: var(--accent) !important; }
.cap-cta-section::before {
  background: radial-gradient(circle, var(--accent-bg) 0%, transparent 70%) !important;
}

/* ─────────────────────────────────────────────
   PRODUCT CARDS (new overlay design)
───────────────────────────────────────────── */
.product-grid  { background: transparent !important; border: none !important; }
.product-card  { background: transparent !important; }
.product-card:hover { background: transparent !important; }
.product-card-cat { color: var(--accent-light) !important; }
.product-card-body h3 { color: #EDE5D5 !important; }
.product-card-body p  { color: rgba(237,229,213,0.75) !important; }

/* ─────────────────────────────────────────────
   INDEX HERO INTRO
───────────────────────────────────────────── */
/* Hero stays dark (background image) — hero-intro text keeps cream */

/* ─────────────────────────────────────────────
   GENERAL WARM ACCENTS
───────────────────────────────────────────── */
.section-eyebrow { color: var(--accent) !important; }
.section-divider {
  background: linear-gradient(90deg, var(--accent), transparent) !important;
}
.about-image-card { border-color: var(--border-card) !important; }
.image-label { color: var(--text-muted) !important; }

/* Stats ticker on index */
.stats-ticker {
  background: var(--bg-section-alt) !important;
  border-color: var(--border-card) !important;
}
.stats-ticker-item { border-right-color: var(--border-card) !important; }
.ticker-number { color: var(--accent) !important; }
.ticker-label  { color: var(--text-muted) !important; }

/* Marquee reverse strip */
.marquee-strip-reverse {
  background: var(--bg-section-alt) !important;
  border-color: var(--border-card) !important;
}
.marquee-track-reverse span { color: var(--accent-border) !important; }

/* Scroll progress bar — warm gold */
#scroll-progress {
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent)) !important;
}

/* Page loader */
#page-loader { background: var(--bg-body) !important; }
.loader-logo  { color: var(--text-heading) !important; }
.loader-bar   { background: var(--border-card) !important; }
.loader-bar::after { background: var(--accent) !important; }

/* Breadcrumbs */
.page-breadcrumb { color: var(--text-muted) !important; }
.page-breadcrumb a { color: var(--accent) !important; }

/* Cursor — warm gold */
.cursor-dot  { background: var(--accent) !important; }
.cursor-ring { border-color: rgba(138,78,15,0.5) !important; }
.cursor-ring.hovered { border-color: var(--accent) !important; }

/* Gallery section */
.gallery-section { background: var(--bg-section-alt) !important; }
.gallery-intro   { color: var(--text-muted) !important; }

/* View-all button */
.view-all-btn {
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
.view-all-btn:hover { background: var(--accent) !important; color: #fff !important; }

/* CTA box on inner pages */
.cta-box {
  background: var(--bg-section-alt) !important;
  border-color: var(--border-card) !important;
}
.cta-box h2 { color: var(--text-heading) !important; }
.cta-box p  { color: var(--text-muted) !important; }
.cta-btn.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.cta-btn.secondary {
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  background: transparent !important;
}
.cta-btn.secondary:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Inner eyebrow */
.inner-hero-eyebrow { color: rgba(200,151,42,0.75) !important; }

/* About btn */
.about-btn {
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}
.about-btn:hover { background: var(--accent) !important; color: #fff !important; }