/* ==============================
   Grayscale Light Theme - Custom CSS
   ============================== */

/* ----- Color Palette ----- */
:root {
    --gray-primary: #b8b8b8;
    --gray-primary-dark: #8f8f8f;
    --gray-accent: #666666;
    --gray-light-bg: #f2f2f2;
    --text-dark: #2A2A2A;
}

/* ----- Backgrounds ----- */
body {
    background-color: var(--gray-light-bg);
    color: var(--text-dark);
}

/* Hero overlay tint */
.hero-overlay {
    background: rgba(80, 80, 80, 0.55);
}

/* ----- Buttons ----- */
.btn-primary {
    background-color: var(--gray-primary);
    border-color: var(--gray-primary);
    color: #fff;
}
.btn-primary:hover {
    background-color: var(--gray-primary-dark);
    border-color: var(--gray-primary-dark);
}
/* Remove default blue highlight on click */
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus:active {
    background-color: var(--gray-primary-dark) !important;
    border-color: var(--gray-primary-dark) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Optional: smooth pressed effect */
.btn-primary:active {
    transform: scale(0.97);
}

/* ----- Navbar ----- */
.navbar {
    background-color: white !important;
    border-bottom: 2px solid var(--gray-primary);
}

.navbar-brand,
.nav-link {
    color: var(--text-dark) !important;
}

.nav-link:hover {
    color: var(--gray-accent) !important;
}

/* Active nav state */
.nav-link.active {
    color: var(--gray-accent) !important;
    font-weight: 600;
}

/* ----- Headings & Text ----- */
h1, h2, h3, h4, h5 {
    color: var(--gray-accent);
}

h1.display-4.fw-bold {
    color: var(--gray-light-bg);
}

/* Light background sections */
.bg-light {
    background-color: #f7f7f7 !important;
}

/* ----- Portfolio hover effect ----- */
.portfolio-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(102, 102, 102, 0.3);
}

/* ----- Form inputs ----- */
form .form-control {
    border: 1px solid var(--gray-primary);
}

form .form-control:focus {
    border-color: var(--gray-accent);
    box-shadow: 0 0 0 0.2rem rgba(102, 102, 102, 0.25);
}

/* ----- Footer ----- */
footer {
    border-top: 2px solid var(--gray-primary);
    background-color: white;
}

footer p {
    color: var(--text-dark);
}

/* ----- Logo ----- */
.navbar-brand img {
    content: url("img/logo-light.png");
}