/* Neubrutalism Theme */

body.neubrutalism-mode {
    --primary-color: #0070F3; /* Vercel Blue */
    --accent-color: #FF0080;  /* Neon Pink */
    --highlight-color: #00F0FF; /* Electric Cyan */
    
    --base-bg-1: #F0F0F0; /* Light Gray Background */
    --base-bg-2: #E0E0E0; /* Slightly darker gray */
    
    --card-bg: #FFFFFF; /* White cards */
    --card-border: #000000; /* Black border */
    --card-shadow-offset: 8px; /* Prominent shadow offset */
    
    --text-color: #1A1A1A; /* Dark text */
    --header-bg: #FFFFFF; /* White Header */

    background-color: var(--base-bg-1);
    color: var(--text-color);
    font-family: 'Lexend Deca', sans-serif;
}

.neubrutalism-mode h1, .neubrutalism-mode h2, .neubrutalism-mode h3, .neubrutalism-mode h4, .neubrutalism-mode h5, .neubrutalism-mode h6 {
    font-family: 'Rubik', sans-serif;
    color: var(--text-color);
    text-transform: none;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.neubrutalism-mode h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary-color); /* Solid underline */
    transform: scaleX(1); /* Always visible */
    transform-origin: left;
    transition: none; /* No animation */
}

.neubrutalism-mode section {
    border: none;
    margin: 0;
    padding: 5rem 2rem;
}

.neubrutalism-mode header {
    /*background-color: var(--header-bg);*/
    /*border-bottom: 2px solid var(--card-border);*/
    /*backdrop-filter: none;*/
    /*box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);*/
}

.neubrutalism-mode .logo span {
    color: var(--text-color);
}

.neubrutalism-mode nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600;
    position: relative;
}

.neubrutalism-mode nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
}

.neubrutalism-mode nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.neubrutalism-mode .cta-button-small {
    background-color: var(--primary-color);
    color: white;
    border: 2px solid var(--card-border);
    border-radius: 0;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 4px 4px 0px var(--card-border);
    transition: all 0.1s ease-out;
}

.neubrutalism-mode .cta-button-small:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--card-border);
}

.neubrutalism-mode .theme-button .sun,
.neubrutalism-mode .theme-button .moon,
.neubrutalism-mode .theme-button .colorful,
.neubrutalism-mode .theme-button .brutalism {
    display: none;
}

.neubrutalism-mode .theme-button .neubrutalism {
    display: block !important;
}

/* Hero Section */
.neubrutalism-mode #hero {
    background-color: var(--base-bg-1);
    border: none;
}

.neubrutalism-mode .hero-background-image {
    opacity: 0.3; 
    filter: grayscale(100%) contrast(150%);
}

.neubrutalism-mode #hero::after {
    background: linear-gradient(45deg, var(--primary-color) 0%, var(--accent-color) 100%);
    opacity: 0.2;
}

.neubrutalism-mode .hero-heading {
    color: var(--text-color);
    text-shadow: none;
    -webkit-text-stroke: 1px var(--card-border);
}

.neubrutalism-mode .hero-subheading {
    color: var(--primary-color);
}

.neubrutalism-mode .hero-cta-button {
    background: var(--primary-color);
    color: white;
    border-radius: 0;
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
    border: 2px solid var(--card-border);
    transition: all 0.1s ease-out;
}

.neubrutalism-mode .hero-cta-button::after {
    display: none;
}

.neubrutalism-mode .hero-cta-button:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--card-border);
    background-color: var(--accent-color);
}

/* Intro Section */
.neubrutalism-mode #intro {
    background-color: var(--base-bg-2);
    color: var(--text-color);
}

.neubrutalism-mode #intro h2 {
    color: var(--text-color);
}

/* Why Different Section */
.neubrutalism-mode #why-different {
    background-color: var(--base-bg-1);
}

.neubrutalism-mode .feature-item {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
    transition: all 0.1s ease-out;
}

.neubrutalism-mode .feature-item:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--card-border);
    background-color: var(--highlight-color);
}

.neubrutalism-mode .feature-item .icon {
    color: var(--primary-color);
}

/* Services Section */
.neubrutalism-mode .card {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
    transition: all 0.1s ease-out;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.neubrutalism-mode .card:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--card-border);
    background-color: var(--highlight-color);
}

.neubrutalism-mode .card .icon {
    color: var(--primary-color);
}

.neubrutalism-mode .card .card-image {
    border-radius: 0;
    border: 2px solid var(--card-border);
    filter: grayscale(100%) contrast(150%);
}

/* Process Section */
.neubrutalism-mode .interactive-container {
    background-color: var(--base-bg-2);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
}

.neubrutalism-mode .interactive-list {
    border-right: 2px solid var(--card-border);
}

.neubrutalism-mode .interactive-item {
    border-radius: 0;
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.1s ease-out;
}

.neubrutalism-mode .interactive-item.active {
    background-color: var(--primary-color);
    color: white;
}

.neubrutalism-mode .interactive-item .icon {
    color: var(--primary-color);
}

.neubrutalism-mode .interactive-item.active .icon {
    color: white;
}

.neubrutalism-mode .display-image {
    border-radius: 0;
    border: 2px solid var(--card-border);
    filter: grayscale(100%) contrast(150%);
}

/* Technologies Section */
.neubrutalism-mode .tech-logo {
    color: var(--primary-color);
}

.neubrutalism-mode #industries {
    background-color: var(--base-bg-2);
}

.neubrutalism-mode #industries .tech-logo, 
.neubrutalism-mode #industries .tech-logo span, 
.neubrutalism-mode #industries .tech-logo svg {
    color: var(--text-color) !important;
}

/* Portfolio Section */
.neubrutalism-mode .portfolio-item {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
    transition: all 0.1s ease-out;
}

.neubrutalism-mode .portfolio-item:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--card-border);
    background-color: var(--highlight-color);
}

.neubrutalism-mode .portfolio-item img {
    border: 2px solid var(--card-border);
    border-radius: 0;
    filter: grayscale(100%) contrast(150%);
}

/* Testimonials Section */
.neubrutalism-mode .testimonial-slider {
    border: 2px solid var(--card-border);
    padding: 2rem;
    background-color: var(--card-bg);
    color: var(--text-color);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
}

.neubrutalism-mode .testimonial-author {
    color: var(--primary-color);
}

/* Pricing Section */
.neubrutalism-mode #pricing {
    background-color: var(--base-bg-1); /* Ensure background is set */
    color: var(--text-color); /* Ensure text is visible */
}

.neubrutalism-mode .pricing-card {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
    transition: all 0.1s ease-out;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.neubrutalism-mode .pricing-card.featured {
    transform: translate(-4px, -4px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow: calc(var(--card-shadow-offset) + 4px) calc(var(--card-shadow-offset) + 4px) 0px var(--card-border);
}

.neubrutalism-mode .pricing-card:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--card-border);
    background-color: var(--highlight-color);
}

.neubrutalism-mode .pricing-price {
    color: var(--primary-color);
}

.neubrutalism-mode .pricing-features li {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

/* CTA Section */
.neubrutalism-mode #cta {
    background: var(--primary-color);
    color: white;
    border-radius: 0;
    margin: 4rem 2rem;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
}

.neubrutalism-mode #cta h2 {
    color: white;
}

.neubrutalism-mode #cta .cta-button {
    background-color: var(--accent-color);
    color: black;
    border-radius: 0;
    box-shadow: 4px 4px 0px var(--card-border);
    border: 2px solid var(--card-border);
    transition: all 0.1s ease-out;
}

.neubrutalism-mode .cta-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--card-border);
}

/* Contact Form Section */
.neubrutalism-mode #contact-form {
    background-color: var(--base-bg-1);
    color: var(--text-color);
    display: block;
}

.neubrutalism-mode .contact-container {
    background-color: var(--card-bg);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
}

.neubrutalism-mode .contact-form label {
    color: var(--text-color);
    display: block;
}

.neubrutalism-mode .contact-form input[type="text"],
.neubrutalism-mode .contact-form input[type="email"],
.neubrutalism-mode .contact-form textarea {
    background-color: var(--base-bg-2);
    color: var(--text-color);
    border: 2px solid var(--card-border);
    border-radius: 0;
    box-shadow: 2px 2px 0px var(--card-border);
    display: block;
}

.neubrutalism-mode .contact-form input[type="text"]:focus,
.neubrutalism-mode .contact-form input[type="email"]:focus,
.neubrutalism-mode .contact-form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 4px 4px 0px var(--primary-color);
}

.neubrutalism-mode .contact-form .cta-button {
    background-color: var(--accent-color);
    color: black;
    display: inline-block;
}

.neubrutalism-mode .contact-info-sidebar {
    background-color: var(--base-bg-2);
    border-radius: 0;
    border: 2px solid var(--card-border);
    color: var(--text-color);
    box-shadow: 4px 4px 0px var(--card-border);
}

.neubrutalism-mode .contact-info-sidebar h3 {
    color: var(--primary-color);
}

.neubrutalism-mode .social-links a {
    color: var(--primary-color);
}

.neubrutalism-mode #why-choose-us {
    background-color: var(--base-bg-1);
}

.neubrutalism-mode .choose-us-item {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 0;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow-offset) var(--card-shadow-offset) 0px var(--card-border);
    transition: all 0.1s ease-out;
}

.neubrutalism-mode .choose-us-item:hover {
    transform: translate(4px, 4px);
    box-shadow: 4px 4px 0px var(--card-border);
    background-color: var(--highlight-color);
}

.neubrutalism-mode .choose-us-item .icon {
    color: var(--primary-color);
}

.neubrutalism-mode .choose-us-item h3 {
    color: var(--text-color);
}

.neubrutalism-mode .choose-us-item p {
    color: var(--text-color);
}

/* Footer Section */
.neubrutalism-mode footer {
    background-color: var(--base-bg-2);
    color: var(--text-color);
    border-top: 2px solid var(--card-border);
    display: block;
}

.neubrutalism-mode footer .logo span,
.neubrutalism-mode footer .contact-info p {
    color: var(--text-color);
}

.neubrutalism-mode footer .logo span,
.neubrutalism-mode footer .contact-info a {
    color: var(--text-color);
}

/* Accessibility overrides for Neubrutalism Theme */
body.neubrutalism-mode.high-contrast-mode {
    --header-bg: var(--base-bg-1) !important;
    --card-bg: var(--light-bg) !important;
    --border-color: var(--dark-text) !important;
    --interactive-bg: var(--base-bg-2) !important;
}

body.neubrutalism-mode.high-contrast-mode .choose-us-item,
body.neubrutalism-mode.high-contrast-mode .card,
body.neubrutalism-mode.high-contrast-mode .feature-item,
body.neubrutalism-mode.high-contrast-mode .portfolio-item,
body.neubrutalism-mode.high-contrast-mode .pricing-card,
body.neubrutalism-mode.high-contrast-mode .contact-container,
body.neubrutalism-mode.high-contrast-mode .contact-info-sidebar {
    border: 2px solid var(--dark-text) !important; /* Stronger border */
    box-shadow: none !important; /* Remove shadows */
}

body.neubrutalism-mode.high-contrast-mode .cta-button,
body.neubrutalism-mode.high-contrast-mode .cta-button-small,
body.neubrutalism-mode.high-contrast-mode .hero-cta-button {
    background-color: var(--dark-text) !important;
    color: var(--light-bg) !important;
    border: 2px solid var(--dark-text) !important;
}

body.neubrutalism-mode.high-contrast-mode .icon svg {
    color: var(--dark-text) !important;
}

body.neubrutalism-mode.high-contrast-mode h1,
body.neubrutalism-mode.high-contrast-mode h2,
body.neubrutalism-mode.high-contrast-mode h3,
body.neubrutalism-mode.high-contrast-mode h4,
body.neubrutalism-mode.high-contrast-mode h5,
body.neubrutalism-mode.high-contrast-mode h6 {
    color: var(--dark-text) !important;
    -webkit-text-stroke: 0 !important; /* Remove text stroke */
}

/* High Contrast Overrides for Neubrutalism */
body.neubrutalism-mode.high-contrast-mode .cta-button,
body.neubrutalism-mode.high-contrast-mode .cta-button-small,
body.neubrutalism-mode.high-contrast-mode .hero-cta-button,
body.neubrutalism-mode.high-contrast-mode .pricing-card button {
    color: #000 !important;
    background-color: #FFF !important;
    border-color: #FFF !important;
    box-shadow: none !important;
}

body.neubrutalism-mode.high-contrast-mode #industries .tech-logo,
body.neubrutalism-mode.high-contrast-mode #industries .tech-logo span {
    color: #FFF !important;
}

body.neubrutalism-mode.high-contrast-mode #industries .tech-logo svg * {
    stroke: #FFF !important;
    fill: #FFF !important;
}
