/* Theme styles based on CSS variables */

body {
  background-color: var(--body-bg);
  color: var(--text-color);
}

body p,
body li,
body label,
body input,
body textarea,
body select {
  color: var(--text-color);
}

body a {
  color: var(--primary-color);
}

body a:hover {
  color: var(--secondary-color);
}

/* Restore a visible keyboard focus ring across the site */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body .form-control:focus-visible,
body [tabindex]:focus-visible {
  outline: 3px solid var(--primary-color) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent);
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Header styles */
.header_wrap {
  background-color: var(--header-bg);
  box-shadow: 0 0 5px var(--shadow-color);
  transition: background-color 0.3s ease;
}

/* Keep header content readable regardless of base skin classes */
body:not(.dark-theme) .header_wrap .navbar-nav .nav-link {
  color: #1f2937 !important;
}

body:not(.dark-theme) .header_wrap,
body:not(.dark-theme) .header_wrap.nav-fixed,
body:not(.dark-theme) .header_wrap.transparent-header,
body:not(.dark-theme) .header_wrap.transparent-header.nav-fixed,
body:not(.dark-theme) .header_wrap:not([class*="bg_"]):not([class*="bg-"]).transparent-header,
body:not(.dark-theme) .header_wrap:not([class*="bg_"]):not([class*="bg-"]).transparent-header.nav-fixed,
body:not(.dark-theme) .header_wrap:not([class*="bg_"]):not([class*="bg-"]).transparent-header.light_skin.nav-fixed {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

body.dark-theme .header_wrap .navbar-nav .nav-link {
  color: #e5e7eb !important;
}

/* Single logo presentation across both themes */
body .header_wrap .logo_default {
  display: block !important;
  transform: scale(1.08);
}

body .header_wrap .logo_light,
body .header_wrap .logo_dark {
  display: none !important;
}

/* Keep the same logo readable on dark header */
body.dark-theme .header_wrap .logo_default {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.navbar-nav .nav-link {
  color: var(--text-color) !important;
  transition: color 0.3s ease;
}

.nav-item.active .nav-link,
.navbar-nav .nav-link:hover {
  color: var(--primary-color) !important;
}

/* Banner/Home section */
.banner_section {
  background-color: var(--section-bg);
}

.banner_content h2, 
.banner_content .typed-cursor {
  color: var(--title-color);
}

.cd-headline {
  color: var(--text-color);
}

.about_wrap p,
.timeline_content p,
.timeline_content span,
.portfolio_content p,
.contact_info_style1 li,
.contact_info_style1 li a,
.contact_info_style1 li span,
.footer .copyright,
.footer .copyright a {
  color: var(--text-color);
}

.portfolio_content p,
.timeline_content p,
.sub_title,
.contact_info_style1 li span {
  color: var(--subtitle-color);
}

/* Section backgrounds and titles */
section {
  background-color: var(--section-bg);
  transition: background-color 0.3s ease;
}

body.dark-theme .bg_gray,
body.dark-theme .bg_light_gray,
body.dark-theme .bg_light_gray2 {
  background-color: var(--section-bg) !important;
}

.title_default_light, 
.title_default_dark,
.title_border {
  color: var(--title-color);
}

.sub_title {
  color: var(--subtitle-color);
}

body.dark-theme .heading_s1 h1,
body.dark-theme .heading_s1 h2,
body.dark-theme .heading_s1 h3,
body.dark-theme .heading_s1 h4,
body.dark-theme .heading_s1 h5,
body.dark-theme .heading_s1 h6,
body.dark-theme .title_default_light,
body.dark-theme .title_default_dark,
body.dark-theme .title_border {
  color: #ffffff !important;
}

body.dark-theme .sub_title {
  color: var(--primary-color) !important;
}

body.dark-theme .bg_gray .heading_s1 h2,
body.dark-theme .bg_gray .heading_s1 h3,
body.dark-theme .bg_gray .heading_s1 h4,
body.dark-theme .bg_gray .heading_s1 h5,
body.dark-theme .bg_gray .heading_s1 h6,
body.dark-theme .bg_gray p,
body.dark-theme .bg_light_gray .heading_s1 h2,
body.dark-theme .bg_light_gray .heading_s1 h3,
body.dark-theme .bg_light_gray .heading_s1 h4,
body.dark-theme .bg_light_gray .heading_s1 h5,
body.dark-theme .bg_light_gray .heading_s1 h6,
body.dark-theme .bg_light_gray p,
body.dark-theme .bg_light_gray2 .heading_s1 h2,
body.dark-theme .bg_light_gray2 .heading_s1 h3,
body.dark-theme .bg_light_gray2 .heading_s1 h4,
body.dark-theme .bg_light_gray2 .heading_s1 h5,
body.dark-theme .bg_light_gray2 .heading_s1 h6,
body.dark-theme .bg_light_gray2 p {
  color: #f8f9fa !important;
}

/* About section */
.about_wrap {
  color: var(--text-color);
}

.about_img img {
  border-color: var(--border-color);
}

.count_pr {
  color: var(--count-color);
}

/* Timeline and experience */
.timeline_box {
  background-color: var(--timeline-bg);
  border-color: var(--border-color);
  transition: background-color 0.3s ease;
}

.timeline_content h6 {
  color: var(--text-color);
}

/* Project/Portfolio items */
.portfolio_style_1 .portfolio_item {
  background-color: var(--card-bg);
  transition: background-color 0.3s ease;
}

.portfolio_style_1 .portfolio_content {
  background-color: var(--portfolio-overlay);
}

.portfolio_style_1 .portfolio_title a {
  color: var(--text-color);
}

/* Service boxes */
.bg_white, 
.icon_box_style_1, 
.icon_box_style_2, 
.icon_box_style_3 {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body:not(.dark-theme) .bg_white,
body:not(.dark-theme) .icon_box_style_1,
body:not(.dark-theme) .icon_box_style_2,
body:not(.dark-theme) .icon_box_style_3,
body:not(.dark-theme) .timeline_box,
body:not(.dark-theme) .portfolio_style_1 .portfolio_item {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.icon_box_style_1 .icon,
.icon_box_style_2 .icon,
.icon_box_style_3 .icon {
  color: var(--primary-color);
}

.icon_box_style_1 .service_desc h5,
.icon_box_style_2 .service_desc h5,
.icon_box_style_3 .service_desc h5 {
  color: var(--title-color);
}

.icon_box_style_1 .service_desc p,
.icon_box_style_2 .service_desc p,
.icon_box_style_3 .service_desc p {
  color: var(--text-color);
}

/* Contact section */
.contact_wrap {
  background-color: var(--section-bg);
}

.contact_info_style1 i {
  color: var(--primary-color);
}

.contact_info_style1 span {
  color: var(--text-color);
}

.contact_form .form-control {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

/* Footer */
.footer {
  background-color: var(--footer-bg);
  transition: background-color 0.3s ease;
}

/* Make footer match active theme instead of always dark template skin */
body .footer_dark {
  background-color: var(--footer-bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--border-color);
}

body .footer_dark.overlay_bg_blue_90::before {
  background: transparent !important;
}

body:not(.dark-theme) .footer_dark p,
body:not(.dark-theme) .footer_dark a,
body:not(.dark-theme) .footer_dark .copyright,
body:not(.dark-theme) .footer_dark .copyright a {
  color: #1f2937 !important;
}

body.dark-theme .footer_dark p,
body.dark-theme .footer_dark a,
body.dark-theme .footer_dark .copyright,
body.dark-theme .footer_dark .copyright a {
  color: #e5e7eb !important;
}

body.dark-theme .footer_dark img {
  filter: brightness(0) invert(1);
}

.footer p, .footer a {
  color: var(--text-color);
}

.social_icons li a {
  background-color: var(--card-bg);
  color: var(--text-color);
}

.social_icons li a:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* Progress bars */
.progress {
  background-color: var(--progress-bar-bg);
  transition: background-color 0.3s ease;
}

.progress-bar {
  background-color: var(--primary-color);
}

/* Buttons */
.btn-default {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-default:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Image adjustments for dark mode */
body.dark-theme img:not(.preserve-colors):not(.logo_light):not(.logo_dark):not(.logo_default) {
  filter: brightness(0.85) contrast(1.1);
}

/* Logo handling */
body.dark-theme .logo_dark,
body.dark-theme .logo_default {
  opacity: 0.85;
}

/* Preserve Logo Colors */
.logo_light,
.logo_dark,
.logo_default {
  transition: opacity 0.3s ease;
}

/* Fix for specific images that shouldn't be darkened */
body.dark-theme img.preserve-colors {
  filter: none;
}

/* Additional dark mode enhancements to make changes more noticeable */

/* Banner section specific styles */
body.dark-theme .banner_section .banner_content h2 {
  text-shadow: 0 0 10px rgba(132, 94, 247, 0.3);
}

body.dark-theme .cd-headline .cd-words-wrapper b {
  color: var(--primary-color);
}

/* About section dark mode specifics */
body.dark-theme .about_wrap {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

body.dark-theme .about_img img {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  border: 3px solid var(--border-color);
}

/* Progress bar enhancements */
body.dark-theme .progress {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-theme .progress-bar {
  box-shadow: 0 0 10px rgba(132, 94, 247, 0.5);
}

/* Service box enhancements */
body.dark-theme .icon_box_style_1,
body.dark-theme .icon_box_style_2,
body.dark-theme .icon_box_style_3 {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

body.dark-theme .icon_box_style_1:hover,
body.dark-theme .icon_box_style_2:hover,
body.dark-theme .icon_box_style_3:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

body.dark-theme .icon_box_style_1 .icon,
body.dark-theme .icon_box_style_2 .icon,
body.dark-theme .icon_box_style_3 .icon {
  color: var(--secondary-color);
  text-shadow: 0 0 10px rgba(56, 217, 169, 0.3);
}

/* Project/Portfolio enhancements */
body.dark-theme .portfolio_style_1 .portfolio_item {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

body.dark-theme .portfolio_style_1 .portfolio_item:hover img {
  filter: brightness(0.7) contrast(1.2);
}

body.dark-theme .portfolio_style_1 .portfolio_content {
  background-color: rgba(18, 18, 18, 0.9);
  border-top: 3px solid var(--primary-color);
}

/* Timeline enhancements */
body.dark-theme .timeline_box:before {
  background-color: var(--primary-color);
  box-shadow: 0 0 10px rgba(132, 94, 247, 0.5);
}

body.dark-theme .timeline_content h6 {
  color: var(--primary-color);
}

body.dark-theme .timeline_box {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Contact form enhancements */
body.dark-theme .contact_form .form-control {
  background-color: rgba(30, 30, 30, 0.8);
  border: 1px solid var(--border-color);
}

body.dark-theme .contact_form .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(132, 94, 247, 0.5);
}

/* Scrollbar customization for dark mode */
body.dark-theme::-webkit-scrollbar {
  width: 10px;
}

body.dark-theme::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark-theme::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 10px;
}

/* Fix for header in dark mode */
body.dark-theme .header_wrap.fixed-top {
  background-color: rgba(18, 18, 18, 0.95);
  border-bottom: 1px solid var(--border-color);
}

/* Light mode home section facelift */
body:not(.dark-theme) #home_section {
  background-color: #000000;
}

body:not(.dark-theme) #home_section.overlay_bg_blue_90::before {
  background-color: rgba(0, 0, 0, 0.94);
}

body:not(.dark-theme) #home_section .banner_content {
  color: #ffffff;
}

body:not(.dark-theme) #home_section .banner_content h2 {
  color: #ffffff !important;
  text-shadow: none;
}

body:not(.dark-theme) #home_section .banner_content h4,
body:not(.dark-theme) #home_section .banner_content .text_default,
body:not(.dark-theme) #home_section .cd-headline,
body:not(.dark-theme) #home_section #typed-text,
body:not(.dark-theme) #home_section .typed-cursor {
  color: #ffffff !important;
}

body.dark-theme #home_section .banner_content,
body.dark-theme #home_section .banner_content h2,
body.dark-theme #home_section .banner_content h4,
body.dark-theme #home_section #typed-text,
body.dark-theme #home_section .typed-cursor {
  color: #f8fafc !important;
}

body.dark-theme #home_section .banner_content p,
body.dark-theme #home_section .banner_content.text_white p {
  color: #cbd5e1 !important;
}

body.dark-theme .about_wrap p,
body.dark-theme .timeline_content p,
body.dark-theme .portfolio_content p,
body.dark-theme .contact_info_style1 li,
body.dark-theme .contact_info_style1 li a,
body.dark-theme .contact_info_style1 li span {
  color: #d1d5db !important;
}

body:not(.dark-theme) #home_section .banner_content p,
body:not(.dark-theme) #home_section .banner_content.text_white p {
  color: #e5e7eb !important;
}

body:not(.dark-theme) #home_section .down_white .mouse {
  border-color: rgba(255, 255, 255, 0.5);
}

body:not(.dark-theme) #home_section .down_white .mouse span {
  background: rgba(255, 255, 255, 0.7);
}

/* Footer social icons in dark mode */
body.dark-theme .social_icons li a {
  background-color: rgba(30, 30, 30, 0.5);
  border: 1px solid var(--border-color);
}

body.dark-theme .social_icons li a:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  transform: translateY(-3px);
}