/**
 * COMPREHENSIVE GRAYSCALE COLOR-ONLY OVERRIDE
 * This file ONLY overrides colors, keeping all original design elements intact
 * Catches ALL earthtone colors and converts them to grayscale
 */

/*--------------------------------------------------------------
# COLOR VARIABLES ONLY — NO LAYOUT CHANGES
# Keeps your original design 100%; only replaces color values.
--------------------------------------------------------------*/
:root {
  /* Grayscale palette */
  --grayscale-black: #000000 !important;
  --grayscale-dark-gray: #2a2a2a !important;
  --grayscale-gray: #555555 !important;
  --grayscale-mid-gray: #808080 !important;
  --grayscale-light-gray: #aaaaaa !important;
  --grayscale-pale-gray: #d0d0d0 !important;
  --grayscale-white: #ffffff !important;

  /* Map theme variables to grayscale (colors only) */
  --earthtone-almond: var(--grayscale-pale-gray) !important;
  --earthtone-khaki: var(--grayscale-mid-gray) !important;
  --earthtone-ebony: var(--grayscale-gray) !important;
  --earthtone-blackolive: var(--grayscale-dark-gray) !important;
  --earthtone-black-olive: var(--grayscale-dark-gray) !important; /* support alt var name */
  --earthtone-black: var(--grayscale-black) !important;

  --background-color: var(--grayscale-dark-gray) !important;
  --default-color: var(--grayscale-dark-gray) !important;
  --heading-color: var(--grayscale-black) !important;
  --accent-color: var(--grayscale-gray) !important;
  --surface-color: var(--grayscale-pale-gray) !important;
  --contrast-color: var(--grayscale-white) !important;
  --secondary-text: var(--grayscale-mid-gray) !important;
  --border-color: var(--grayscale-light-gray) !important;
  --shadow-color: rgba(0, 0, 0, 0.1) !important;

  /* Nav variables */
  --nav-color: var(--grayscale-gray) !important;
  --nav-hover-color: var(--grayscale-black) !important;
  --nav-mobile-background-color: var(--grayscale-dark-gray) !important;
  --nav-dropdown-background-color: var(--grayscale-dark-gray) !important;
  --nav-dropdown-color: var(--grayscale-light-gray) !important;
  --nav-dropdown-hover-color: var(--grayscale-white) !important;

  /* Theme token variables used by footer social, etc. */
  --theme-accent-bg: var(--grayscale-gray) !important;
  --theme-light-text: var(--grayscale-white) !important;
  --theme-dark-bg: var(--grayscale-dark-gray) !important;
  --theme-secondary-text: var(--grayscale-mid-gray) !important;
  --theme-shadow: rgba(0, 0, 0, 0.15) !important;
  --theme-primary-bg: var(--grayscale-dark-gray) !important;
  --theme-secondary-bg: var(--grayscale-pale-gray) !important;
  --theme-primary-text: var(--grayscale-dark-gray) !important;
  --theme-accent-text: var(--grayscale-gray) !important;
  --theme-border: rgba(170, 170, 170, 0.2) !important;
}

/*--------------------------------------------------------------
# OVERRIDE SPECIFIC COLOR PROPERTIES - PRESERVE ALL STYLING
--------------------------------------------------------------*/

/* Header colors */
.top-header {
  background-color: var(--grayscale-dark-gray) !important;
  border-bottom-color: var(--grayscale-gray) !important;
}

.top-header .top-logo h1,
.top-header .top-logo a {
  color: var(--grayscale-white) !important;
}

.top-nav-menu a {
  color: var(--grayscale-white) !important;
}

.top-nav-menu a:hover,
.top-nav-menu a.active {
  color: var(--grayscale-pale-gray) !important;
}

.top-nav-menu a::after {
  background-color: var(--grayscale-white) !important;
}

/* Header social icons */
.header-social-links .social-icon {
  color: var(--grayscale-white) !important;
  border-color: var(--grayscale-white) !important;
}

.header-social-links .social-icon:hover {
  color: var(--grayscale-pale-gray) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--grayscale-pale-gray) !important;
}

/* Service cards - keep all design, change only colors */
.services .services-item {
  background-color: var(--grayscale-pale-gray) !important;
  border-color: var(--grayscale-light-gray) !important;
}

.service-item .services-item i {
  background: linear-gradient(135deg, var(--grayscale-gray) 0%, var(--grayscale-dark-gray) 100%) !important;
  color: var(--grayscale-white) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

.service-item:hover .services-item {
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.25) !important;
  border-color: var(--grayscale-gray) !important;
}

.service-item:hover .services-item i {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
}

.service-item .services-item i::after {
  border-color: rgba(0, 0, 0, 0.25) !important;
}

/* Contact form */
.contact .php-email-form {
  background-color: var(--grayscale-pale-gray) !important;
  border-color: var(--grayscale-light-gray) !important;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  background-color: var(--grayscale-white) !important;
  border-color: var(--grayscale-light-gray) !important;
  color: var(--grayscale-dark-gray) !important;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--grayscale-gray) !important;
  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.2) !important;
}

/* Buttons */
.btn,
button,
input[type="submit"],
input[type="button"],
.contact .php-email-form button[type=submit] {
  background-color: var(--grayscale-gray) !important;
  border-color: var(--grayscale-gray) !important;
  color: var(--grayscale-white) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.contact .php-email-form button[type=submit]:hover {
  background-color: var(--grayscale-black) !important;
  border-color: var(--grayscale-black) !important;
  color: var(--grayscale-white) !important;
}

/* Stats section */
.stats .stats-item i {
  color: var(--grayscale-gray) !important;
}

.stats .stats-item .purecounter {
  color: var(--grayscale-black) !important;
}

.stats .stats-item p {
  color: var(--grayscale-mid-gray) !important;
}

/* Mobile menu colors */
.top-navigation {
  background: linear-gradient(135deg, var(--grayscale-dark-gray) 0%, var(--grayscale-black) 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.sidebar-header {
  background: linear-gradient(135deg, var(--grayscale-black) 0%, var(--grayscale-dark-gray) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar-title {
  color: var(--grayscale-white) !important;
}

.sidebar-close {
  color: var(--grayscale-white) !important;
}

.top-navigation .top-nav-menu a {
  color: var(--grayscale-white) !important;
}

.top-navigation .top-nav-menu a:hover,
.top-navigation .top-nav-menu a.active {
  color: var(--grayscale-white) !important;
  background: linear-gradient(135deg, var(--grayscale-gray) 0%, var(--grayscale-mid-gray) 100%) !important;
}

/* Footer social links */
.footer-social-links .social-link {
  background: var(--grayscale-gray) !important;
  border-color: var(--grayscale-gray) !important;
  color: var(--grayscale-white) !important;
}

.footer-social-links .social-link:hover {
  background: var(--grayscale-black) !important;
  border-color: var(--grayscale-black) !important;
  color: var(--grayscale-white) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Portfolio and other sections */
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--grayscale-black) !important;
}

.portfolio .portfolio-content .portfolio-info h4 {
  background-color: var(--grayscale-gray) !important;
}

.hero p span {
  border-bottom-color: var(--grayscale-gray) !important;
}

.hero .social-links a {
  color: var(--grayscale-mid-gray) !important;
}

.hero .social-links a:hover {
  color: var(--grayscale-black) !important;
}

/* Scroll top button */
.scroll-top {
  background-color: var(--grayscale-gray) !important;
}

.scroll-top:hover {
  background-color: var(--grayscale-black) !important;
}

.scroll-top i {
  color: var(--grayscale-white) !important;
}

/* Section titles */
.section-title h2:after {
  background: var(--grayscale-gray) !important;
}

/* Resume section */
.resume .resume-item {
  border-left-color: var(--grayscale-gray) !important;
}

.resume .resume-item::before {
  background: var(--grayscale-white) !important;
  border-color: var(--grayscale-gray) !important;
}

/* Body and headings */
body {
  background-color: var(--grayscale-white) !important;
  color: var(--grayscale-dark-gray) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--grayscale-black) !important;
}

/* Links */
a {
  color: var(--grayscale-gray) !important;
}

a:hover {
  color: var(--grayscale-black) !important;
}

/*--------------------------------------------------------------
/* Targeted section color overrides (no layout changes) */

/* Top header */
.top-header { background-color: var(--grayscale-dark-gray) !important; border-bottom-color: var(--grayscale-gray) !important; }
.top-header .top-logo, .top-header .top-logo h1, .top-header .top-logo a { color: var(--grayscale-white) !important; }
.top-nav-menu a { color: var(--grayscale-white) !important; }
.top-nav-menu a:hover, .top-nav-menu a.active { color: var(--grayscale-pale-gray) !important; }
.top-nav-menu a::after { background-color: var(--grayscale-white) !important; }
.top-menu-toggle .hamburger span { background-color: var(--grayscale-white) !important; }

/* Page title */
.page-title { background-color: var(--grayscale-dark-gray) !important; color: var(--grayscale-white) !important; }
.page-title.has-banner::before { background: rgba(255,255,255,0.7) !important; }

/* Portfolio section */
.portfolio .portfolio-filters li { color: var(--grayscale-mid-gray) !important; }
.portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active { color: var(--grayscale-black) !important; }
.portfolio .portfolio-content .portfolio-info h4 { background-color: var(--grayscale-gray) !important; color: var(--grayscale-white) !important; }

/* Project content: hero underline */
.hero p span { border-bottom-color: var(--grayscale-gray) !important; }

/* Mobile navigation */
.top-navigation { background: linear-gradient(135deg, var(--grayscale-dark-gray) 0%, var(--grayscale-black) 100%) !important; }
.sidebar-header { background: linear-gradient(135deg, var(--grayscale-black) 0%, var(--grayscale-dark-gray) 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.sidebar-title, .sidebar-close { color: var(--grayscale-white) !important; }
.top-navigation .top-nav-menu a { color: var(--grayscale-white) !important; }
.top-navigation .top-nav-menu a:hover, .top-navigation .top-nav-menu a.active { color: var(--grayscale-white) !important; background: linear-gradient(135deg, var(--grayscale-gray) 0%, var(--grayscale-mid-gray) 100%) !important; }
.mobile-menu-overlay { background-color: rgba(0,0,0,0.6) !important; }

/* Portfolio details */
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { background-color: var(--grayscale-white) !important; border-color: var(--grayscale-gray) !important; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--grayscale-gray) !important; }
.portfolio-details .portfolio-info h3 { border-bottom-color: var(--grayscale-light-gray) !important; }

/* Neutralize earthtone shimmer/overlay on page title */
.page-title::before { background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.10) 50%, transparent 70%) !important; }

/* Remove green tint from shadows (use black shadows) */
.portfolio-post:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important; border-color: var(--grayscale-gray) !important; }
.read-more-btn { box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; }
.read-more-btn:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important; }
.image-container:hover { box-shadow: 0 12px 35px rgba(0,0,0,0.2) !important; }
.services-item:hover { box-shadow: 0 16px 45px rgba(0,0,0,0.25) !important; border-color: rgba(0,0,0,0.35) !important; }
.service-item .services-item::after, .services-item::after { background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.18), transparent 60%) !important; }
.service-item .services-item i::after { border-color: rgba(0,0,0,0.25) !important; }

/* Hero section to grayscale gradient only */
.hero { background: linear-gradient(135deg, var(--grayscale-dark-gray) 0%, var(--grayscale-gray) 100%) !important; }
.hero h2 { color: var(--grayscale-white) !important; }
.hero p, .hero .typed { color: var(--grayscale-mid-gray) !important; }

/* Homepage portfolio section */
.portfolio { background-color: var(--grayscale-pale-gray) !important; }
.homepage-portfolio-post { border-color: rgba(170,170,170,0.2) !important; box-shadow: 0 6px 25px rgba(0,0,0,0.15) !important; }
.homepage-portfolio-post:hover { box-shadow: 0 12px 35px rgba(0,0,0,0.2) !important; border-color: var(--grayscale-gray) !important; }

/* Project page content containers */
.project-overview-section, .project-info-section, .project-tech-section, .project-links-section { background: var(--grayscale-white) !important; border-color: rgba(170,170,170,0.2) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important; }
.project-overview-section h3, .project-tech-section h4 { color: var(--grayscale-dark-gray) !important; border-bottom-color: var(--grayscale-gray) !important; }
.project-content, .project-date, .post-excerpt { color: var(--grayscale-mid-gray) !important; }

/* Project header and title on dark background */
.portfolio-single .project-header, .portfolio-single .project-title { color: var(--grayscale-white) !important; }
.portfolio-single .project-meta, .portfolio-single .project-date { color: var(--grayscale-mid-gray) !important; }
.portfolio-single .project-date i { color: var(--grayscale-gray) !important; }

/* Info grid items */
.portfolio-single .project-info-grid .info-item { background: var(--grayscale-pale-gray) !important; border-left: 4px solid var(--grayscale-gray) !important; }

/* Technology and category badges */
.portfolio-single .category-badge,
.portfolio-single .tech-tag,
.tech-tags .tech-tag { background: linear-gradient(135deg, var(--grayscale-gray) 0%, var(--grayscale-dark-gray) 100%) !important; color: var(--grayscale-white) !important; }

/* Footer */
.footer { background-color: var(--grayscale-white) !important; color: var(--grayscale-dark-gray) !important; border-top-color: var(--grayscale-light-gray) !important; }

/* Force by ID: make sure gradients are removed and dark gray applied where requested */
#stats, .stats { background: var(--grayscale-dark-gray) !important; background-image: none !important; }
#contact, .contact { background: var(--grayscale-dark-gray) !important; background-image: none !important; }
#footer, .footer { background: var(--grayscale-dark-gray) !important; background-image: none !important; }
#top-header, #header, .top-header { background: var(--grayscale-dark-gray) !important; background-image: none !important; }
/* Remove header overlay tint */
.top-header::before { background: none !important; }

/* Global outer background */
html, body { background: var(--grayscale-dark-gray) !important; background-image: none !important; }

/* Ensure text/button/link colors adapt on dark sections */
#stats, #contact, #footer, .footer, .page-title {
  color: var(--grayscale-white) !important;
}
#stats a, #contact a, #footer a, .footer a, .page-title a { color: var(--grayscale-pale-gray) !important; }
#stats a:hover, #contact a:hover, #footer a:hover, .footer a:hover, .page-title a:hover { color: var(--grayscale-white) !important; }
#stats .section-title p,
#contact .section-title p,
#footer .section-title p,
.page-title .breadcrumbs,
.page-title p { color: var(--grayscale-light-gray) !important; }
#stats p, #contact p, #footer p { color: var(--grayscale-light-gray) !important; }

#stats .btn, #contact .btn, #footer .btn, .footer .btn, .page-title .btn,
#stats button, #contact button, #footer button, .footer button, .page-title button,
#stats input[type="submit"], #contact input[type="submit"], #footer input[type="submit"], .footer input[type="submit"], .page-title input[type="submit"] {
  background-color: var(--grayscale-gray) !important;
  color: var(--grayscale-white) !important;
  border-color: var(--grayscale-gray) !important;
}
#stats .btn:hover, #contact .btn:hover, #footer .btn:hover, .footer .btn:hover, .page-title .btn:hover,
#stats button:hover, #contact button:hover, #footer button:hover, .footer button:hover, .page-title button:hover,
#stats input[type="submit"]:hover, #contact input[type="submit"]:hover, #footer input[type="submit"]:hover, .footer input[type="submit"]:hover, .page-title input[type="submit"]:hover {
  background-color: var(--grayscale-black) !important;
  border-color: var(--grayscale-black) !important;
}
/* Force override ALL possible earthtone color references */

/* Any element with earthtone hex colors in CSS properties */
*[style*="color: #E3D5C5"],
*[style*="color: #e3d5c5"],
*[style*="background: #E3D5C5"],
*[style*="background: #e3d5c5"],
*[style*="background-color: #E3D5C5"],
*[style*="background-color: #e3d5c5"] {
  color: #d0d0d0 !important;
  background: #d0d0d0 !important;
  background-color: #d0d0d0 !important;
}

*[style*="color: #9E9B88"],
*[style*="color: #9e9b88"],
*[style*="background: #9E9B88"],
*[style*="background: #9e9b88"],
*[style*="background-color: #9E9B88"],
*[style*="background-color: #9e9b88"] {
  color: #808080 !important;
  background: #808080 !important;
  background-color: #808080 !important;
}

*[style*="color: #59614B"],
*[style*="color: #59614b"],
*[style*="background: #59614B"],
*[style*="background: #59614b"],
*[style*="background-color: #59614B"],
*[style*="background-color: #59614b"] {
  color: #555555 !important;
  background: #555555 !important;
  background-color: #555555 !important;
}

*[style*="color: #2D3126"],
*[style*="color: #2d3126"],
*[style*="background: #2D3126"],
*[style*="background: #2d3126"],
*[style*="background-color: #2D3126"],
*[style*="background-color: #2d3126"] {
  color: #2a2a2a !important;
  background: #2a2a2a !important;
  background-color: #2a2a2a !important;
}

/* Override any remaining earthtone gradients */
*[style*="linear-gradient"] {
  background: linear-gradient(135deg, #555555 0%, #2a2a2a 100%) !important;
}

/* Force override any CSS that might have earthtone colors */
.earthtone-light,
.earthtone-medium,
.earthtone-dark,
[class*="earthtone"],
[class*="almond"],
[class*="khaki"],
[class*="ebony"],
[class*="blackolive"] {
  background-color: #d0d0d0 !important;
  color: #2a2a2a !important;
  border-color: #aaaaaa !important;
}


/* Override any specific earthtone color classes that might exist */
.text-almond { color: #d0d0d0 !important; }
.text-khaki { color: #808080 !important; }
.text-ebony { color: #555555 !important; }
.text-blackolive { color: #2a2a2a !important; }
.bg-almond { background-color: #d0d0d0 !important; }
.bg-khaki { background-color: #808080 !important; }
.bg-ebony { background-color: #555555 !important; }
.bg-blackolive { background-color: #2a2a2a !important; }

/* Force any border colors to grayscale */
.border-almond { border-color: #d0d0d0 !important; }
.border-khaki { border-color: #808080 !important; }
.border-ebony { border-color: #555555 !important; }
.border-blackolive { border-color: #2a2a2a !important; }

/* Ensure .post-content matches page/section colors via variables */
.post-content { color: var(--default-color) !important; }
.post-content p, .post-content li { color: var(--secondary-text) !important; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { color: var(--heading-color) !important; }
.post-content a { color: var(--accent-color) !important; }
.post-content a:hover { color: var(--grayscale-black) !important; }

/* Portfolio post meta boxes: adapt to page/section tone variables */
.portfolio-post .post-meta,
.portfolio-post .post-meta-info,
.homepage-portfolio-post .post-meta {
  background: var(--surface-bg, var(--theme-primary-bg, var(--grayscale-pale-gray))) !important;
  border-left: 4px solid var(--accent-color) !important;
  color: var(--secondary-text) !important;
}
.portfolio-post .post-meta i,
.portfolio-post .post-meta-info i,
.homepage-portfolio-post .post-meta i {
  color: var(--accent-color) !important;
}
.portfolio-post .post-meta strong,
.portfolio-post .post-meta-info strong,
.homepage-portfolio-post .post-meta .technologies {
  color: var(--default-color) !important;
}

/* Stats cards: remove earthtone tints, use section tone */
.stats .stats-item {
  background: var(--surface-bg, rgba(255,255,255,0.06)) !important;
  border: 1px solid var(--surface-border, var(--grayscale-light-gray)) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}
.stats .stats-item i { color: var(--accent-color) !important; }
.stats .stats-item p, .stats .stats-item span { color: var(--secondary-text) !important; }

/* Generic cards/surfaces */
.card, .surface, .services-item, .service-item .services-item {
  background: var(--surface-bg, var(--grayscale-white)) !important;
  border-color: var(--surface-border, var(--grayscale-light-gray)) !important;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
}
.card:hover, .surface:hover, .services-item:hover, .service-item:hover .services-item {
  box-shadow: 0 12px 35px rgba(0,0,0,0.2) !important;
  border-color: var(--accent-color) !important;
}

/* Block quotes */
.wp-block-quote, blockquote {
  background: var(--surface-bg, var(--grayscale-white)) !important;
  border-left: 4px solid var(--accent-color) !important;
  color: var(--secondary-text) !important;
}

/* Form focus rings to grayscale */
.php-email-form .form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(85,85,85,0.25) !important; /* grayscale focus ring */
}

/* Services: reduce left spacing for description to 8px */
.services .service-item .services-item .description {
  margin-left: 8px !important;
}

/* Make Technologies list text dark black */
.homepage-portfolio-post .post-meta .technologies,
.portfolio-post .post-meta .technologies {
  color: var(--grayscale-black) !important;
}

/* Technologies as light gray chips */
.homepage-portfolio-post .tech-tags,
.portfolio-post .tech-tags,
.tech-tags-horizontal {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.homepage-portfolio-post .tech-tag,
.portfolio-post .tech-tag,
.tech-tags-horizontal .tech-tag {
  background: var(--grayscale-pale-gray) !important;
  color: var(--grayscale-dark-gray) !important;
  border: 1px solid var(--grayscale-light-gray) !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}