/* Theme switcher overrides */
/* Body gets either .theme-light or .theme-dark class */

body.theme-dark {
  color: #fff;
}

body.theme-light {
  color: #000;
}

/* Mobile menu colors follow theme */
body.theme-light .main-header .main-menu.vismobmenu a,
body.theme-light .main-header .main-menu.vismobmenu a:hover {
  color: #000 !important;
}
body.theme-dark .main-header .main-menu.vismobmenu a,
body.theme-dark .main-header .main-menu.vismobmenu a:hover {
  color: #fff !important;
}

/* Navigation menu colors */
body.theme-dark .main-header .main-menu a,
body.theme-dark .main-header .main-menu a:hover {
  color: #fff !important;
}

/* Active state for main menu (dark theme) */
body.theme-dark .main-header .main-menu a.act-link {
  color: #B3E5FF !important; /* baby blue text */
  background: rgba(255, 255, 255, 0.15) !important; /* subtle highlight */
  border-radius: 6px;
  padding: 8px 12px;
}

body.theme-light .main-header .main-menu a,
body.theme-light .main-header .main-menu a:hover {
  color: #000 !important;
}

/* Active state for main menu (light theme) */
body.theme-light .main-header .main-menu a.act-link {
  color: #000 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px;
  padding: 8px 12px;
}

/* Mobile menu panel background follows theme */
body.theme-light .main-header .main-menu.vismobmenu {
  background: #B3E5FF !important; /* baby blue */
}
body.theme-dark .main-header .main-menu.vismobmenu {
  background: #0e1b2b !important; /* dark */
}

/* Hero slider headline & meta */
body.theme-dark .fs-slider_align_title h2,
body.theme-dark .fs-slider_align_title h2 a,
body.theme-dark .fs-slider_align_title h2 span,
body.theme-dark .fs-slider_align_title p,
body.theme-dark .hero_date,
body.theme-dark .half-hero-wrap_link,
body.theme-dark .half-hero-wrap_link2,
body.theme-dark .grid-carousel-title h3,
body.theme-dark .grid-carousel-title h3 a,
body.theme-dark .grid-carousel-title h4 {
  color: #fff !important;
}

body.theme-dark .fs-slider_align_title h2 a:hover,
body.theme-dark .half-hero-wrap_link:hover,
body.theme-dark .half-hero-wrap_link2:hover,
body.theme-dark .grid-carousel-title h3 a:hover {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Details panel on slider */
body.theme-dark .hero-slider_details li,
body.theme-dark .hero-slider_details li span {
  color: #fff !important;
}

body.theme-light .hero-slider_details li,
body.theme-light .hero-slider_details li span {
  color: #000 !important;
}

/* Toggle icon style */
.main-header .main-menu .theme-toggle {
  display: inline-block;
  padding: 10px 14px;
  cursor: pointer;
}

.main-header .main-menu .theme-toggle i {
  font-size: 18px;
  line-height: 1;
}

/* Dark mode header background */
body.theme-dark .main-header {
  background: #0e1b2b !important; /* darker blue tone */
}

/* Preserve left white pill shape */
body.theme-dark .main-header:before {
  background: #fff !important;
}

/* Dark mode footer background */
body.theme-dark .main-footer {
  background: #0e1b2b !important;
}

body.theme-dark .main-footer:before {
  background: #fff !important;
}

/* Dark mode for hero slider info panel (blue box) */
body.theme-dark .hero-slider_details_wrap.color-bg {
  background: #0e1b2b !important;
}

/* Footer text color follows theme */
body.theme-light .main-footer,
body.theme-light .main-footer .copy-right,
body.theme-light .main-footer .copy-right span,
body.theme-light .main-footer .footer-contacts li,
body.theme-light .main-footer .footer-contacts li span,
body.theme-light .main-footer .footer-contacts a { color: #000 !important; }

body.theme-dark .main-footer,
body.theme-dark .main-footer .copy-right,
body.theme-dark .main-footer .copy-right span,
body.theme-dark .main-footer .footer-contacts li,
body.theme-dark .main-footer .footer-contacts li span,
body.theme-dark .main-footer .footer-contacts a { color: #B3E5FF !important; }

/* Footer social inline layout */
.main-footer .footer-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}
.main-footer .footer-social li { display: inline-block; }
.main-footer .footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.main-footer .footer-social a:hover { opacity: 0.85; }

/* Brand colors */
.main-footer .footer-social .fa-facebook-f { color: #1877F2; }
.main-footer .footer-social .fa-instagram { color: #FCAF45; }
.main-footer .footer-social .fa-chrome { color: #4285F4; }
.main-footer .footer-social .icon-x { color: #000; width: 20px; height: 20px; }
/* New brand icons */
.main-footer .footer-social .fa-youtube { color: #FF0000; }
.main-footer .footer-social .icon-tiktok { color: #000; width: 20px; height: 20px; }
/* Force TikTok SVG path to black fill */
.main-footer .footer-social .icon-tiktok path { fill: #000 !important; }
/* Match FB/IG icon size with X (20px) */
.main-footer .footer-social i { font-size: 20px; }

/* --- Circle brand buttons per request --- */
.main-footer .footer-social a.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.main-footer .footer-social a.social-btn i,
.main-footer .footer-social a.social-btn .icon-x { color: #fff !important; }
.main-footer .footer-social a.website { background: #0f172a; }
.main-footer .footer-social a.facebook { background: #1877F2; }
.main-footer .footer-social a.instagram { 
  background: radial-gradient(circle at 30% 30%, #fdf497 0%, #fdf497 10%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.main-footer .footer-social a.x { background: #000; }
.main-footer .footer-social a.youtube { background: #FF0000; }
.main-footer .footer-social a.tiktok { background: #000; }
/* TikTok: tanpa dropshadow, tanpa degradasi, tanpa efek hover */
.main-footer .footer-social a.tiktok {
  box-shadow: none !important;
}
.main-footer .footer-social a.tiktok:hover {
  background: #000 !important;
  opacity: 1 !important;
}
/* Override tema agar hover tidak mengubah latar TikTok */
body.theme-light .main-footer .footer-social a.tiktok:hover,
body.theme-dark .main-footer .footer-social a.tiktok:hover {
  background: #000 !important;
}
/* Ensure TikTok/X icons are white inside their circles */
.main-footer .footer-social a.tiktok .icon-tiktok path { fill: #fff !important; }
.main-footer .footer-social a.x .icon-x { color: #fff !important; }
/* Increase icon size inside circles */
.main-footer .footer-social a.social-btn i { font-size: 22px; }
.main-footer .footer-social a.social-btn .icon-x,
.main-footer .footer-social a.social-btn .icon-tiktok { width: 22px; height: 22px; }

/* Hover feedback per theme */
body.theme-light .main-footer .footer-social a { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
body.theme-light .main-footer .footer-social a:hover { background: rgba(0,0,0,0.08); }
body.theme-dark .main-footer .footer-social a:hover { background: rgba(255,255,255,0.08); }

/* Footer row alignment rules rolled back per request */

/* Motif Dayak background set to white */
.bg.dec-bg {
  background-color: #fff !important;
  background-blend-mode: normal !important;
  opacity: 1 !important;
}

/* --- Override motif per tema untuk .social-container --- */
/* Mode terang: gunakan gambar 3.png */
body.theme-light .social-container {
  background-image: url(../images/bg/3.png) !important;
  background-repeat: repeat !important;
  background-size: 80px auto !important;
}

/* Mode gelap: gunakan gambar 3_dark.png */
body.theme-dark .social-container {
  background-image: url(../images/bg/3_dark.png) !important;
  background-repeat: repeat !important;
  background-size: 80px auto !important;
}

/* --- Samakan strip atas .social-container:before per tema --- */
/* Mode terang: gradasi putih di atas, motif 3.png di belakang */
body.theme-light .social-container:before {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.9) 10%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%), url(../images/bg/3.png) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 80px auto !important;
}

/* Mode gelap: gradasi putih di atas, motif 3_dark.png di belakang */
body.theme-dark .social-container:before {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.9) 10%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%), url(../images/bg/3_dark.png) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 80px auto !important;
}

/* --- Override motif per tema untuk .right-dec --- */
/* Mode terang: gunakan gambar 3.png */
body.theme-light .right-dec {
  background-image: url(../images/bg/3.png) !important;
  background-repeat: repeat !important;
  background-size: 80px auto !important;
}

/* Mode gelap: gunakan gambar 3_dark.png */
body.theme-dark .right-dec {
  background-image: url(../images/bg/3_dark.png) !important;
  background-repeat: repeat !important;
  background-size: 80px auto !important;
}

/* --- Samakan strip atas .right-dec:before per tema --- */
/* Pertahankan arah gradasi asli (to top) */
body.theme-light .right-dec:before {
  background-image: linear-gradient(to top, rgba(255,255,255,0.9) 10%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%), url(../images/bg/3.png) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 80px auto !important;
}

body.theme-dark .right-dec:before {
  background-image: linear-gradient(to top, rgba(255,255,255,0.9) 10%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%), url(../images/bg/3_dark.png) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, 80px auto !important;
}