/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(90deg,rgba(0, 31, 11, 1) 0%, rgba(0, 10, 6, 1) 35%, rgba(0, 30, 31, 1) 100%);
    color: #fff;
    font-family: "Inter", sans-serif;
    padding: 0;
    scroll-behavior: smooth;
}

/* NAV LEFT */
.nav-left {
    display: flex;
    gap: 26px;
    align-items: center;
}

/* NAVBAR */
.navbar {
    width: 100%;
    padding: 0 36px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    z-index: 999;
}

/* NAV LINKS */
.nav-link {
    font-size: 1.15rem;
    color: #eaeaea;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.22s ease, color 0.22s ease;
    cursor: pointer;
    display: inline-block; /* ensures transform works */
}
.nav-link:hover {
    color: #00ff62;
    transform: translateY(-3px);
}

/* NAVBAR LOGO */
.nav-logo {
    font-family: 'Dancing Script', cursive;
    font-size: 3.5rem;
    font-weight: 700;
    color: #00ff62;
    text-shadow: 0 0 10px #00ff62;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
}

/* STATUS / FOR HIRE (desktop) */
.for-hire-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-label {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
}
.for-hire {
    font-family: "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    color: #07ff09;
    text-shadow: 0 0 6px #2bff3d;
}

/* SPACER FOR NAVBAR */
.navbar-spacer {
    height: 80px; /* same as navbar height */
}

/* HEADER */
.header {
    text-align: center;
    margin-bottom: 50px;
}
.header h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 25px;
}
.description {
    font-size: 1.4rem;
    max-width: 1200px;
    margin: 0 auto;
    color: #d0d0d0;
    line-height: 1.85;
}

/* GENERAL SECTION SPACING */
section, header {
    scroll-margin-top: 90px; /* match navbar height */
}

/* CONTAINERS */
.big-section,
.info-box,
.container-box {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
}

/* INFO BOXES */
.info-box {
    background: rgba(0,0,0,0.45);
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    padding: 34px 40px;
    backdrop-filter: blur(4px);
    margin-bottom: 40px;
}
.info-box h2 { font-size: 2.1rem; margin-bottom: 20px; }
.info-box p { font-size: 1.35rem; color: #d2d2d2; line-height: 1.65; }

/* CONTACT SOCIAL CARDS */
.social-links { display: flex; flex-direction: column; gap: 20px; }
.social-card {
    background: #141414;
    padding: 18px 22px;
    border-radius: 12px;
    border: 2px solid #1f1f1f;
    font-size: 1.3rem;
    color: white;
    text-decoration: none;
    transition: 0.25s ease;
}
.social-card:hover { background: #1c1c1c; transform: translateY(-3px); }
.no-link { cursor: default; }

/* PAST WORK CONTAINER */
.container-box {
    max-width: 90%;
    width: 80%;
    background: rgba(0,0,0,0.45);
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    padding: 34px 40px;
    backdrop-filter: blur(4px);
}
.container-box h2 { font-size: 2.1rem; text-align: center; margin-bottom: 30px; }

/* GALLERY */
/* ===== PAST WORK GALLERY FIX ===== */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px; /* smaller gap for mobile readability */
}

.gallery-item {
    width: calc(50% - 12px); /* two images per row with gap accounted for */
    max-width: 500px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid #1f1f1f;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,.6);
}

/* MOBILE: single column images */
@media (max-width: 640px) {
    .gallery-item {
        width: 100%;
        max-width: 100%;
    }
}

/* LIGHTBOX */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
#lightbox img { max-width: 90%; max-height: 90%; border-radius: 12px; }
#close {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

/* ===== LIGHTBOX ZOOM SUPPORT ===== */
#lightbox {
    overflow: hidden;
}

#lightbox img {
    cursor: grab;
    transition: transform 0.15s ease;
    transform-origin: center center;
}


/* REVEAL ANIMATION */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0px); }

/* ===================== MOBILE MENU & RESPONSIVE ===================== */

/* mobile hamburger toggle (hidden on desktop) */
.mobile-toggle {
  display: none;
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.9rem;
  color: #eaeaea;
  cursor: pointer;
  z-index: 1100;
}

/* mobile menu (drawer) */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 78%;
  max-width: 340px;
  height: 100vh;
  background: rgba(6,6,6,0.98);
  backdrop-filter: blur(6px);
  z-index: 1200;
  transition: left 0.28s cubic-bezier(.2,.9,.2,1);
  box-shadow: 10px 0 30px rgba(0,0,0,0.6);
}
.mobile-menu.open { left: 0; }

.mobile-menu-inner { padding: 20px 18px; display:flex; flex-direction:column; gap:12px; color:#fff; }
.mobile-close { align-self:flex-end; background:none; border:none; font-size:2.4rem; color:#fff; cursor:pointer; }

.mobile-link { font-size:1.05rem; padding:10px 6px; text-decoration:none; color:#eaeaea; font-weight:700; display:block; cursor:pointer; }
.mobile-link:hover { color:#00ff62; }

.mobile-contact { margin-top:6px; color:#d2d2d2; display:flex; flex-direction:column; gap:8px; font-size:0.98rem; }
.mobile-divider { height:1px; background:rgba(255,255,255,0.04); margin:6px 0 10px; }

/* hide desktop status on small screens */
.desktop-status { display: flex; align-items:center; gap:10px; }

/* responsive adjustments */
@media (max-width: 900px) {
  .navbar { height: 64px; padding: 0 18px; }
  .navbar-spacer { height: 64px; }
  .nav-left { gap: 12px; }
  .nav-link { font-size: 1rem; }
  .nav-logo { font-size: 2.8rem; } /* note: class is nav-logo; keep consistent above */
  .nav-logo { font-size: 2.8rem; } /* redundant safe */
  .desktop-status { display: none; }
  .mobile-toggle { display: block; }
  .nav-left { overflow:hidden; white-space:nowrap; }
}

/* phones: hide left links, show hamburger */
@media (max-width: 640px) {
  .nav-left { display: none; }
  .mobile-toggle { display: block; }
  .nav-logo { font-size: 2.2rem; }
  .desktop-status { display: none; }
}

/* accessibility focus outlines */
.mobile-toggle:focus, .mobile-close:focus, .mobile-link:focus, .nav-link:focus { outline: 2px solid rgba(0,255,98,0.12); outline-offset: 3px; }

/* ensure nav-logo pointer-events none */
.nav-logo { pointer-events: none; }

/* ===================== VOUCHES SIDEBAR ===================== */
.vouches-panel {
    position: fixed;
    top: 100px; /* clears navbar */
    right: 24px; /* padding from edge */
    width: min(20vw, 280px); /* wider than before */
    min-width: 200px;

    background: rgba(0,0,0,0.45);
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    padding: 18px 16px;

    backdrop-filter: blur(4px);
    z-index: 500;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vouches-panel h3 {
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    color: #00ff62;
    text-shadow: 0 0 6px rgba(0,255,98,0.6);
}

/* Container for client vouches/screenshots */
.vouches-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 140px); /* viewport minus navbar + spacing */
    padding-right: 4px;
}

/* Example styling for screenshots */
.vouches-container img {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #1f1f1f;
    object-fit: cover;
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.vouches-container img:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Hide on smaller screens */
/* MOBILE: turn sidebar into normal section */
@media (max-width: 1100px) {

    .vouches-panel {
        position: static;
        width: 95%;
        margin: 40px auto;
        right: auto;
        top: auto;
    }

    .vouches-container {
        max-height: none;
        overflow: visible;
    }

}

.mobile-vouches {
display:none;
}

@media (max-width:1100px){

.mobile-vouches{
display:block;
}

.vouches-panel{
display:none;
}

}