/* ==========================================================
   GLOBAL RESET & BASIC TYPOGRAPHY
   ====================================================== */
* {
    box-sizing: border-box;
 margin: 0;
  padding: 0;
}

html {font-size:100%;}      /* 16 px base */
@media (max-width:768px) {html{font-size:95%;}}
@media (max-width:480px) {html{font-size:90%;}}

body {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

/* Headings – progressive scaling */
h1 {font-size:2.5rem; line-height:1.2; font-weight:600;}
h2 {font-size:2rem;   line-height:1.3; font-weight:600;}
h3 {font-size:1.5rem; line-height:1.4; font-weight:500;}
h4 {font-size:1.25rem;line-height:1.5; font-weight:500;}

/* Vertical rhythm for text */
h1, h2, h3, h4, h5, h6 {margin-top:2rem; margin-bottom:1rem;}
p, ul, ol, blockquote {margin-bottom:1.5rem; line-height:1.7;}

/* -----------------------------------------------
   Biography – centered, responsive portrait
   ----------------------------------------- */
.biography .bio-inner {
   display: flex;
    flex-direction: column;          /* stack on narrow screens */
    align-items: center;             /* horizontal centering */
    gap: 1.5rem;                     /* space between photo & text */
    max-width: 900px;                /* keep the block from stretching too far */
    margin: 0 auto;               /* centre the whole block within .container */
    padding: 1rem;
}

/* Photo itself */
.biography .bio-photo {
    width: 100%;
    max-width: 480px;             /* maximum size on large screens */
    height: auto;                    /* preserve aspect ratio */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Text side (keeps the original margins) */
.biography .bio-text {
    text-align: center;       /* centre headings & paragraphs */
}


/* Brand credit (small‑caps) */
.brand-credit {
    font-size:0.85rem;
    color:#bbb;
    font-variant:small-caps;
    margin-top:0.2rem;               /* fixed typo */
}

/* Buttons – used for forms and CTA */
button,
input[type="submit"] {
    font-size:1rem;
    background:#e67e22;
    color:#fff;
    border:none;
    border-radius:0.5rem;
    padding:0.75rem 1.5rem;
    cursor:pointer;
    transition:background .2s ease, transform .1s ease;
}
button:hover,
input[type="submit"]:hover {
    background:#cf711f;
    transform:scale(1.02);
}

/* Focus outlines – accessibility */
a:focus,
button:focus,
input:focus {
   outline:2px solid #e67e22;
    outline-offset:2px;
}

/* ==============================================================
   HEADER / NAVIGATION
   ============================================================== */
.nav-bar {
    background:#2c3e50;               /* primary colour */
    color:#fff;
   padding:1rem 0;
    text-align:center;
    position:sticky;
    top:0;
    width:100%;
    z-index:1;
    display:flex;
    align-items:center;
    gap:1rem;
    padding-inline:1.5rem;
}

/* Brand name */
.brand {
    font-size:1.2rem;
    font-weight:bold;
    margin-right:auto;
}

/* Language switcher */
.lang-switcher {
    margin-left:auto;
    display:flex;
    gap:0.5rem;
}
.lang-btn {
    background:transparent;
    border:1px solid #fff;
    color:#fff;
    padding:0.2rem 0.5rem;
    cursor:pointer;
    font-size:0.9rem;
}
.lang-btn.active,
.lang-btn:hover {
    background:#fff;
    color:#333;
}

/* Hamburger for mobile */
.nav-toggle {
    background:none;
    border:none;
    cursor:pointer;
    display:none;                     /* shown via media query */
    padding:0.5rem;
}
.nav-toggle span {
    display:block;
   height:3px;
    width:25px;
    background:#fff;
    margin-bottom:5px;
    transition:all .3s;
}

/* Navigation menu – desktop */
.nav-menu {
    list-style:none;
    display:flex;
   gap:1.5rem;
}
.nav-menu a {
    color:#fff;
    text-decoration:none;
    transition:color .2s ease;
}
.nav-menu a:hover,
.nav-menu a.active {color:#e67e22;}

/* Mobile navigation – hidden until .show is added */
@media (max-width:768px) {
    .nav-toggle {display:block;}

    .nav-menu {
        display:none;
        position:absolute;
      top:100%;                     /* just below the header */
        left:0;
        width:100%;
        background:#2c3e50;
        flex-direction:column;
        padding:0.5rem 0;
    }
    .nav-menu.show {display:flex;}

    .nav-menu li {
        margin:0;
       padding:0.5rem 1rem;
        border-bottom:1px solid #555;
    }
    .nav-menu li:last-child {border-bottom:none;}
}

/* ========================================================
   CONTAINER (max‑width wrapper)
   ============================================================== */
.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 1.5rem;
}

/* ==============================================================
   HERO SECTION (home page)
   ============================================================== */
.hero {
    background-image:linear-gradient(to bottom,#f9f9f9,#fff);
    min-height:30vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    padding:2rem 1rem;
}
.hero h2 {
    font-size:1.8rem;
    margin-bottom:1rem;
}
.hero button {
    font-size:1rem;
    font-weight:bold;
    padding:1rem 1.5rem;
    border-radius:.8rem;
    cursor:pointer;
    transition:background-color .3s ease;
}

/* ==============================================================
   PERSON / INTRO SECTION (home page)
   ============================================================== */
.person {
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    flex-wrap:wrap;
    gap:1rem;
    margin:.5rem 0;
}
.person img {
    max-width:30vw;
    height:auto;
    margin:.8rem;
}
.person h1 {
    font-size:2rem;
    margin:0;
}

/* ==============================================================
   FEATURED PROJECTS (home page)
   ============================================================== */
.featured-projects {
    background:#fff;
    padding:2rem;
}
.featured-projects h2 {margin-top:0;}

.project-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-top:2rem;
}
.project-card {
    background:#fff;
    border:1px solid #e0e0e0;
    border-radius:8px;
    padding:1.2rem;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    transition:transform .2s ease, box-shadow .2s ease;
}
.project-card:hover {
    transform:translateY(-4px);
    box-shadow:0 6px 12px rgba(0,0,0,0.15);
}
.project-card img {
    width:100%;
    height:150px;
    object-fit:cover;
    margin-bottom:1rem;
    transition:transform .3s ease;
}
.project-card img:hover {transform:scale(1.05);}
.project-card h3 {margin-top:0;}
.project-card a {
    color:#e67e22;
    text-decoration:none;
    font-weight:500;
}
.project-card a:hover {text-decoration:underline;}

/* ==============================================================
   ABOUT PAGE (shared styles)
   ============================================================== */
.about {
    background:#fff;
  padding:2rem;
    margin-top:2rem;
}
.about h2 {margin-top:0;}

/* ==============================================================
   CALL‑TO‑ACTION (if used)
   ============================================================== */
.call-to-action {
    background:#333;
    color:#fff;
    padding:2rem;
    text-align:center;
    margin-top:2rem;
}
.call-to-action h2 {margin-top:0;}

/* ==========================================================
   FOOTER
   ============================================================== */
footer {
    background:#333;
    color:#fff;
    padding:1rem;
    text-align:center;
    position:relative;
    height:auto;
}
.social-links a {
    margin:0 5px;
    color:#fff;
    transition:transform .2s ease;
}
.social-links a:hover {transform:scale(1.2);}

/* ==============================================================
   PORTFOLIO PAGE – HERO IMAGE WRAPPER
   ============================================================== */
.portfolio-hero {
    background-image:linear-gradient(to bottom,#f9f9f9,#fff);
  padding:3rem 1rem;
    text-align:center;
}

/* Wrapper that centers the hero image */
.hero-image-wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:2rem;
    max-height:60vh;              /* never taller than 60 % of viewport */
}
.hero-image {
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* ====================================================
   PORTFOLIO PAGE – PROJECT SHOWCASE GRID
   ============================================================== */
.project-showcase {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:1rem;
   padding:2rem 0;
}
.project-showcase img {
    width:100%;
    height:auto;
    cursor:pointer;
    border-radius:6px;
    transition:transform .2s ease;
}
.project-showcase img:hover {transform:scale(1.03);}

/* ==============================================================
   LIGHTBOX (fullscreen overlay)
   ========================================================== */
.lightbox {
    display:none;
    position:fixed;
  inset:0;
    background:rgba(0,0,0,0.85);
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.lightbox.is-active {display:flex;}

.lightbox__content {
    position:relative;
    max-width:90vw;
    max-height:90vh;
}
.lightbox__content img {
    width:100%;
    height:auto;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.lightbox__close {
    position:absolute;
    top:-12px;
    right:-12px;
    background:#fff;
    border-radius:50%;
    width:32px;
    height:32px;
    font-size:1.2rem;
    line-height:32px;
    text-align:center;
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.lightbox__close:hover {background:#f0f0f0;}
/* Toast notifications – simple fade */
.logo {
    display: inline-flex;               /* shrink‑wrap the image */
    align-items: center;
    text-decoration: none;           /* remove underline */
    margin-right: 1rem;        /* space between logo & nav items */
}

/* The image itself */
.logo img {
    display: block;
    max-width: 120px;
    height: auto;
}
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .8rem 1.2rem;
    border-radius: .4rem;
    font-weight: 500;
    color: #fff;
    opacity: .95;
    z-index: 2000;
    animation: slideUp .3s ease-out;
}
.toast.success { background:#27ae60; }
.toast.error   { background:#c0392b; }

@keyframes slideUp {
    from { transform: translate(-50%, 100%); }
    to   { transform: translate(-50%, 0); }
}

/* ==============================================================
   RESPONSIVE ADJUSTMENTS (additional tweaks)
   ============================================================== */
@media (max-width:1024px) {
    .project-grid {grid-template-columns:repeat(2,1fr);}
    .project-showcase {grid-template-columns:repeat(2,1fr);}
}
/* Larger screens – put image & text side‑by‑side */
@media (min-width: 768px) {
    .biography .bio-inner {
        flex-direction: row;        /* image left, text right */
        align-items: flex-start;    /* top‑align the text */
        text-align: left;           /* reset for readability */
    }
    .biography .bio-text {
        max-width: 600px;
    }
}
/* ---------------------------------------------
   HEADER – ultra‑compact mode for small screens (≤768 px)
   -------------------------------------------- */
@media (max-width:768px) {

    /* 1️⃣ Show the hamburger (already set to display:none earlier) */
    .nav-toggle {
       display: block;                 /* make the button visible */
    }

    /* 2️⃣ Hide everything that would crowd the bar */
    .brand,
    .brand-credit,
    .nav-menu,
    .nav-menu.show {             /* keep the “show” rule for the opened menu */
        display: none !important;
    }
    /* 3️⃣ Keep the language switcher visible and push it to the left */
    .lang-btn.active {
        background:#fff;
        color:#333;
    }
    .lang-switcher {
        margin-left: 0;          /* remove the auto‑margin that pushed it right */
     order: -1;               /* put it before the hamburger */
    }
    .logo img {
        max-width: 80px;
        height: auto;
    }
    /* 4️⃣ When the menu is opened (via .show) reveal the full list */
    .nav-menu.show {
        display: flex !important;       /* same as the desktop flex layout */
        flex-direction: column;
       position: absolute;
        top: 100%;                   /* directly under the header bar */
      left: 0;
      width: 100%;
        background: #2c3e50;
      padding: 0.5rem 0;
       z-index: 10;
    }
    /* 5️⃣ Optional – tighten spacing for the compact bar */
    .nav-bar {
        justify-content: space-between; /* language left, hamburger right */
        padding-inline: 1rem;
    }
        .logo {
        margin: 0 auto;                  /* center the logo horizontally */
    }
    /* 6️⃣ Reduce the height of the header bar (so it doesn’t dominate the screen) */
    .nav-bar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}
/* ------------------------------------------------------
   Ultra‑small screens (≤ 320 px) – no horizontal scrolling
   ------------------------------------------- */
@media (max-width: 320px) {

    /* Prevent any stray element from forcing a scrollbar */
    html { overflow-x: hidden; }

    /* ==== HERO ================================================= */
    .hero {
        height: auto;                     /* let content dictate height */
      padding: 3rem 1rem;               /* generous vertical padding */
        box-sizing: border-box;
    }
    .logo img {
        max-width: 60px;
        height: auto;
    }
    /* == PERSON / INTRO SECTION ========================= */
    .person {
        flex-direction: column;           /* stack image + heading */
        align-items: center;              /* centre everything */
        text-align: center;
    }
    .person img {
        max-width: 90%;          /* a bit larger than 80 % for better visibility */
       height: auto;
        margin-bottom: 1rem;
    }

    /* ==== NAVIGATION MENU ======================== */
    .nav-bar {
        justify-content: space-between;   /* language left, burger right */
        padding-inline: 0.8rem;
    }
    .nav-toggle {                         /* hamburger stays visible */
       display: block;
    }
    .nav-menu {
        width: 100%;                      /* full‑width dropdown */
        position: absolute;
       top: 100%;
   left: 0;
        background: #2c3e50;
        flex-direction: column;
        padding: 0.5rem 0;
        box-sizing: border-box;
    }
    .nav-menu li {
       margin: 0;
       width: 100%;
    }
    .nav-menu a {
        display: block;
        width: 100%;
        padding: .8rem 1rem;
        box-sizing: border-box;
    }

    /* ==== PORTFOLIO HERO IMAGE WRAPPER ======================= */
    .hero-image-wrapper {
        max-height: 35vh;                 /* slightly lower than 40vh for tighter fit */
        overflow: hidden;
    }
    .hero-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* ==== SKILLS / EXPERTISE LIST =========================== */
    .skills-expertise ul {
        columns: 1;                       /* force a single column */
        column-gap: 0;
        list-style-position: inside;
        padding-left: 0;
    }

    /* ==== GENERAL CONTAINER & GRID SAFETY =================== */
    .container {
        width: 100%;
        padding: 0 0.8rem;                /* keep a tiny gutter so text never touches the edge */
        box-sizing: border-box;
    }
    .project-grid,
    .project-showcase {
        grid-template-columns: 1fr !important;   /* force a single column for any grid */
    }

    /* ==== LIGHTBOX (full‑screen overlay) ==================== */
    .lightbox__content {
        max-width: 95vw;
        max-height: 95vh;
    }
}