/**
 * Custom Overrides CSS
 * Custom styling for theme elements
 */

/* Header title - solid text, no background */
#site-title-header {
    /* background-color: #d3d3d3 !important; */
    color: #2a2a2a !important;
    padding: 8px 16px;
    border-radius: 4px;
}

/* =============================================
   Project Hero Section
   ============================================= */
.project-hero {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hero-aspect, 4 / 1); /* auto height based on image ratio */
    background-size: contain !important; /* show full image */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 35vh; /* fallback minimum */
    display: flex;
    align-items: center;
}
.project-hero .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 0;
}
.project-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.25));
    z-index: 1;
    display: flex;
    align-items: center;
}
.project-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35); /* overlay for readability */
}
.project-hero .container {
    position: relative;
    z-index: 1;
}
.project-hero .project-hero-title {
    color: #ffffff !important;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0.25rem 0 0;
}
.project-hero .breadcrumbs,
.project-hero .breadcrumbs a {
    color: #f5f5f5 !important;
}
.project-hero .breadcrumbs a:hover {
    color: #ffffff !important;
}

@media (max-width: 991px) {
    .project-hero { min-height: 32vh; }
}
@media (max-width: 768px) {
    .project-hero { min-height: 28vh; }
    .project-hero .project-hero-title { font-size: 2rem; }
}

/* =============================================
   Portfolio Hero (page & archive)
   ============================================= */
.portfolio-hero {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hero-aspect, 4 / 1); /* auto height based on image ratio */
    background-size: contain !important; /* show full image */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 30vh; /* fallback minimum */
    display: flex;
    align-items: center;
}
.portfolio-hero .hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 0;
}
.portfolio-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.25));
    z-index: 1;
    display: flex;
    align-items: center;
}
.portfolio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25); /* subtle overlay for readability */
}
.portfolio-hero .container { position: relative; z-index: 1; }
.portfolio-hero .portfolio-hero-title { color: #ffffff !important; font-weight: 800; font-size: 2rem; }
.portfolio-hero .breadcrumbs, .portfolio-hero .breadcrumbs a { color: #f5f5f5 !important; }
.portfolio-hero .breadcrumbs a:hover { color: #ffffff !important; }

@media (max-width: 991px) {
    .portfolio-hero { min-height: 28vh; }
    .portfolio-hero .portfolio-hero-title { font-size: 1.75rem; }
}
@media (max-width: 768px) {
    .portfolio-hero { min-height: 26vh; }
    .portfolio-hero .portfolio-hero-title { font-size: 1.5rem; }
}
@media (max-width: 480px) {
    .portfolio-hero { min-height: 24vh; }
    .portfolio-hero .portfolio-hero-title { font-size: 1.35rem; }
}

/* View All Projects Button - Light gray solid color */
#view-all-projects-btn {
    background: #d3d3d3 !important;
    background-color: #d3d3d3 !important;
    background-image: none !important;
    border-color: #d3d3d3 !important;
    color: #2a2a2a !important;
}

#view-all-projects-btn:hover {
    background: #b8b8b8 !important;
    background-color: #b8b8b8 !important;
    background-image: none !important;
    border-color: #b8b8b8 !important;
    color: #2a2a2a !important;
}

/* Footer credits text - Lighter color */
#footer-credits-text {
    color: #999 !important;
    font-size: 0.9rem;
}

/* Services card description - Left aligned text */
.services-item .description,
.service-item .description {
    text-align: left !important;
}

/* About section alignment - Match other sections */
#about .container {
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

#about .about-content {
    max-width: 100%;
}

#about .section-title {
    text-align: left;
    margin-bottom: 2rem;
}

/* Ensure about section doesn't extend to full width */
#about.about.section {
    padding-left: 0;
    padding-right: 0;
}

/* Hero section - Center content vertically */
.hero .hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
}

/* Hero logo styling */
.hero .hero-logo {
    margin-bottom: 2rem;
}

.hero .hero-logo img {
    max-width: 200px;
    height: auto;
}

/* Spacing between logo and title when both are present */
.hero .hero-container h2 {
    margin: 0 auto 1rem auto;
}

/* When title is hidden, adjust logo spacing */
.hero .hero-container.hero-title-hidden .hero-logo {
    margin-bottom: 1rem;
}

.hero .hero-container p {
    margin: 0 auto;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
    .hero .hero-logo img {
        max-width: 150px;
    }
    
    .hero .hero-logo {
        margin-bottom: 1.5rem;
    }
    
    .hero .hero-container.hero-title-hidden .hero-logo {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .hero .hero-logo img {
        max-width: 120px;
    }
    
    .hero .hero-logo {
        margin-bottom: 1rem;
    }
    
    .hero .hero-container.hero-title-hidden .hero-logo {
        margin-bottom: 0.75rem;
    }
}

/* Hero section - Darker tagline */
.hero .hero-container p,
.hero .hero-container .typed {
    color: #2a2a2a !important;
    font-weight: 600;
}

/* Logo section in hero when hero is hidden */
.hero-logo-section {
    text-align: center;
    padding: 3rem 0;
    background: #f8f8f8;
}

.hero-logo-section img {
    max-width: 200px;
    height: auto;
}

/* Mobile social media icons visibility */
@media (max-width: 768px) {
    body.hide-mobile-social .header-social-links {
        display: none !important;
    }
}

/* Contact section - Full width cards when form is hidden */
#contact .contact-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* When form is hidden (col-lg-12), show cards side by side on desktop */
@media (min-width: 992px) {
    #contact .col-lg-12 .contact-cards {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        max-width: 100%;
        margin: 0;
    }
    
    #contact .col-lg-12 .contact-card {
        flex: 1;
        max-width: 350px;
    }
}

/* On mobile, always stack vertically */
@media (max-width: 991px) {
    #contact .col-lg-12 .contact-cards {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* =============================================
   Global Contrast & Buttons
   ============================================= */
/* Ensure strong contrast for buttons across the theme */
.btn,
.btn-primary,
.read-more-btn,
.project-link,
#view-all-projects-btn,
.page-title .btn,
.page-title a.btn,
.contact .btn,
.contact button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: #2a2a2a !important; /* dark bg */
    color: #ffffff !important;            /* light text */
    border-color: #2a2a2a !important;
}

.btn:hover,
.btn-primary:hover,
.read-more-btn:hover,
.project-link:hover,
#view-all-projects-btn:hover,
.page-title .btn:hover,
.contact .btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: #1f1f1f !important; /* slightly darker */
    color: #ffffff !important;
    border-color: #1f1f1f !important;
}

/* Force Read More button to light gray */
.read-more-btn {
    background: #d3d3d3 !important;
    background-color: #d3d3d3 !important;
    border-color: #d3d3d3 !important;
    color: #2a2a2a !important;
}
.read-more-btn:hover {
    background: #b8b8b8 !important;
    background-color: #b8b8b8 !important;
    border-color: #b8b8b8 !important;
    color: #2a2a2a !important;
}

/* Page title text contrast on banners */
.page-title,
.page-title h1,
.page-title .breadcrumbs,
.page-title .breadcrumbs a {
    color: #ffffff !important;
}
.page-title .breadcrumbs a:hover {
    color: #f0f0f0 !important;
}

/* Make sure banner image is clearly visible */
.page-title.has-banner {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
.page-title.has-banner::before {
    /* soften or remove heavy overlays coming from other stylesheets */
    background: rgba(0, 0, 0, 0.25) !important; /* subtle dark for text legibility */
}

/* Project hero meta (date) styling within banner */
.page-title .project-hero-meta {
    margin-top: 0.5rem;
}
.page-title .project-hero-meta .project-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0,0,0,0.35);
    color: #ffffff !important;
    font-weight: 600;
}
.page-title .project-hero-meta .project-date i {
    color: #ffffff !important;
}

/* =============================================
   Mission & Vision Tabs: Active == Hover
   ============================================= */
/* Match active tab style to hover for consistent UX */
.mission-vision-tabs .nav-link:hover,
.mission-vision-tabs .nav-link.active {
    background-color: var(--grayscale-gray, #808080) !important;
    border-color: var(--grayscale-gray, #808080) !important;
    color: var(--grayscale-white, #ffffff) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* Remove earlier white active style if loaded before */
.mission-vision-tabs .nav-link.active {
    background-image: none !important;
}

/* =============================================
   Mission & Vision Tabs - Reverse Active/Inactive Colors
   ============================================= */
/* Inactive tabs: dark style (like previous hover) */
.mission-vision-tabs .nav-tabs .nav-link:not(.active),
.mission-vision-tabs .nav-link:not(.active) {
  background-color: var(--grayscale-gray, #808080) !important;
  border-color: var(--grayscale-gray, #808080) !important;
  color: var(--grayscale-white, #ffffff) !important;
}
.mission-vision-tabs .nav-tabs .nav-link:not(.active):hover,
.mission-vision-tabs .nav-link:not(.active):hover {
  background-color: #6e6e6e !important;
  border-color: #6e6e6e !important;
  color: #ffffff !important;
}

/* Active tab: light style */
.mission-vision-tabs .nav-tabs .nav-link.active,
.mission-vision-tabs .nav-link.active {
  background-color: #000000 !important; /* black */
  border-color: #000000 !important;
  color: #d0d0d0 !important; /* light gray text */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* =============================================
   Header title: solid light gray (no gradient)
   ============================================= */
.top-logo h1 {
    background: none !important;
    -webkit-text-fill-color: #d3d3d3 !important;
    color: #d3d3d3 !important;
}
.top-logo h1::after {
    background: none !important;
}

/* =============================================
   Contact section: stack and center on tablet/mobile
   ============================================= */
@media (max-width: 991px) {
    .contact .contact-cards,
    #contact .contact-cards {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    .contact .contact-card,
    #contact .contact-card {
        width: 100%;
        max-width: 560px;
    }

    .contact .contact-card .services-item {
        text-align: center !important;
    }

    .contact .info-item,
    #contact .info-item {
        justify-content: center !important;
    }

    .contact .info-item h3,
    .contact .info-item p {
        text-align: center !important;
    }
}

/* =============================================
   Contact title lighter color
   ============================================= */
.contact .section-title h2,
#contact .section-title h2 {
    color: #bcbcbc !important; /* lighter heading */
}