/* Global site background matching homepage mood */
body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  /* Base dark + semi-transparent lemon-green overlay */
  background: #f2f2f0; /* dark base color */
}


/* — Fixed header styling — */
#fixed-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: #d8d8d5;
  z-index: 1000;
  padding: 20px 20px;
  text-align: center;
}
/* flex container inside header */
#fixed-header .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* allow nav to move below logo */
}
/* site title/logo style */
.site-logo {
  white-space: nowrap;
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}
.site-logo a {
  text-decoration: none;
  color: #7b7e76;
}
.site-logo a:hover {
  color: #31352a; /* */
}
/* nav list — horizontal, spaced out */
#fixed-header nav ul {
  list-style: none;
  display: flex;
  flex-shrink: 1;
  margin: 0;
  padding: 0;
}
#fixed-header nav li + li {
  margin-left: 2rem;
}
#fixed-header nav a {
  text-decoration: none;
  font-size: 1rem;
  color: #7b7e76; /* home, portfolio, about, contact in the header */
}
#fixed-header nav a:hover {
  color: #31352a; /* */
}



header h1 {
  font-family: 'Lato', serif;
  font-size: 3rem;
  margin-bottom: 10px;
  color: #fefff2;
}

header h2 {
  font-family: 'Lato', sans-serif;
  font-size: 2rem; /* Or whatever looks good */
  margin-bottom: 1em;
  color: #7b7e76;
  text-align: center;
}

header h3 {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;     /* whatever size feels right for H3 */
  margin: 0.5em 0;
  color: #f2f5d0;         /* or your chosen overlay color */
  text-align: center;
}

header h4 {
  font-family: 'Lato', sans-serif;
  font-size: 1rem; 
  margin: 0.5em 0;
  color: #90927e; 
  text-align: center;
}


main {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}


.portfolio-text {
 text-align: center;
  font-size: 1.2rem;
  color: #7b7e76;
  line-height: 1.6;
  max-width: 800px;
  margin: 0px auto; /* adds clear space above/below */
  padding: 0px;
}

.about-text, .contact-text, .resume-text {
 text-align: center;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0px auto; /* adds clear space above/below */
  padding: 0px;
}

footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #596446;
}


/* Better spacing for portfolio collection titles */
.collection-title {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 60px;
  color: #596446;
}


/* Left side with layered background (dark + transparent lemon green) */
.hero-text {
  flex: 1;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.hero-text h1 {
  font-family: 'Lato', sans-serif;
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fefff2;
}



/* --- Fade-in animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fade-in for all page content */
main, #fixed-header nav ul, .about-text, .resume-content .contact-text, .portfolio-grid, .portfolio-collections-grid, .lightbox-img-wrapper, h1, h2, h3, h4 {
  opacity: 0;
  animation: fadeInUp 1.2s ease-out forwards;
}

/* Small delay for smoother load */
main {
  animation-delay: 0.2s;
}

.about-text, .contact-text {
  animation-delay: 0.4s;
}

.portfolio-grid {
  animation-delay: 0.6s;
}

.portfolio-text, .portfolio-text a {
  color: #8f9388;
}
/* Fade-in keyframes already in your CSS */
.about-text p, .contact-text p {
  color: #8f9388; /* softer light gray */
}
.about-text, .about-text a {
  color: #8f9388;
}
.resume-text, .resume-text a {
  color: #8f9388;
}
.contact-text, .contact-text a {
  color: #8f9388;
}
.collection-title {
  color: #8f9388;
}

.portfolio-grid img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}



/* --- GLOBAL NAV LINK STYLE (works on all pages) --- */
nav a {
  margin: 0 12px;
  text-decoration: none;
  color: #31352a; /* light by default */
  font-size: 1rem;
  transition: color 0.3s ease;
}



/* Subtle delay for content in main sections */
main.fade-in-container {
  animation-delay: 0.3s;
}



/* — Collection‐cards grid on Portfolio */
.portfolio-collections-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 250px);
  justify-content: center;  /* center the 480px-wide grid */
  gap: 20px;
  margin: 40px auto;
}
.collection-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.collection-card img {
  width: 100%;
  display: block;
  transition: transform .3s ease;
}
.collection-card:hover img {
  transform: scale(1.05);
}
.collection-card .overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.7);
  color: #8f9388;
  text-align: center;
  padding: 10px 0;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
}

/* — Modal overlay for each collection */
.collection-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  /* allow internal scrolling */
  overflow-y: auto;
  padding: 40px;
  padding-top: 80px;  /* adjust based on actual header height */
  z-index: 2001;
  /* stack content from the top */
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

.collection-modal .close-modal {
  position: absolute;
  top: 20px; right: 30px;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: #7b7e76;
  cursor: pointer;
  z-index: 3000;  /* Make sure this is above the modal and header */
}
/* Masonry layout via CSS columns */
.collection-modal .portfolio-grid {
  display: block !important;       /* override the grid display */
  column-width: 200px;             /* each column min-width */
  column-gap: 20px;                /* gutter between columns */
  width: 100%;
  max-width: 1200px;
  margin-top: 40px;
  /* no overflow here — modal handles scrolling */
}
.collection-modal .portfolio-grid img {
  display: inline-block;           /* flow images into columns */
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 20px;                /* space below each image */
  break-inside: avoid;             /* keep each image intact */
}



/* full-screen lightbox overlay */
#lightbox-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(255, 255, 255, 0.97);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3000;
  cursor: pointer;
}
.lightbox-img-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 98vw;
  max-height: 90vh;
}
#lightbox-img {
  max-width: 98vw;
  max-height: calc(90vh - 80px);
  height: auto;
  width: auto;
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  padding-top: 30px;  /* adjust based on actual header height */
}
#lightbox-overlay img {
  max-width: 90%;
  max-height: 95%;
}
#lightbox-overlay .lightbox-close {
  position: absolute;
  top: 20px; right: 30px;
  color: #7b7e76;
  font-size: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 4000;
}

#lightbox-caption {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  margin-top: 10px;
  border-top: 1px solid #bfc1a9;
  padding-top: 6px;
  color: #888;
  text-align: center;
  font-size: 1em;
  font-family: 'Lato', sans-serif;
  line-height: 1.3;
}

#lightbox-caption .art-title {
  font-weight: bold;
  color: #888;
  font-size: 1.08em;
}


#lightbox-caption .art-details {
  font-weight: normal;
  color: #888;
  font-size: 0.96em;
}


@media (max-width: 600px) {
  #lightbox-img {
    max-height: calc(85vh - 60px);
    padding-top: 40px;
  }
  #lightbox-overlay img {
  max-width: 90%;
  max-height: 85%;
}
  #lightbox-caption {
    font-size: 0.93em;
    padding-top: 5px;
    padding-bottom: 10px;
    max-width: 94vw;
  }
  .portfolio-collections-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* smaller cards */
    gap: 10px;
    margin: 20px auto;
    width: 65vw;
  }
 .collection-modal {
    padding: 18px 10px 10px 10px;    /* Less top/right/bottom/left padding */
    padding-top: 90px;            /* Keep space for header if needed */
  }
  .collection-modal .portfolio-grid {
    column-width: 100px;
    column-gap: 10px;
    max-width: 90vw;
    margin-top: 8px;
    padding: 10px 20px 20px 20px;    /* top/right/bottom/left padding */
  }
  .collection-card .overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.7);
    color: #8f9388;
    text-align: center;
    padding: 10px 0;
    font-family: 'Lato', sans-serif;
    font-size: 0.6rem;
  }
  .header-inner {
    display: flex;               
    flex-direction: row;         /* keep logo and hamburger side by side */
    justify-content: space-between; /* logo on the left, toggle on the right */
    align-items: center;         /* vertical centering */
  }

  .site-logo {
    margin-bottom: 10px;
  }
  #fixed-header nav ul {
    flex-direction: column;
    gap: 8px;
    margin-left: 0;
  }
  #fixed-header nav li + li {
    margin-left: 0;
  }
  #fixed-header {
    padding: 10px 0;   /* Less padding looks nicer on mobile */
    /* height: auto;   <-- Usually not needed, but you can add */
  }
  .portfolio-text,
  .about-text,
  .resume-text,
  .contact-text {
    font-size: 1rem;     /* Smaller than desktop (was 1.2rem) */
    padding: 10px;       /* Tighter padding on mobile */
    max-width: 85vw;    /* Don't limit width on mobile */
  }
  h2 {
    font-size: 1.5rem;   /* Make section headings smaller too */
  }
}

/* 1) Hide the hamburger on desktop, show on mobile */
.hamburger {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 24px;
  cursor: pointer;
  padding: 0;
  z-index: 1100;            /* above your nav drawer */
}
.hamburger span {
  display: flex;
  width: 100%;              /* fill the 28px width */
  height: 3px;
  background: #f2f2f0;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

/* 2) Hide nav by default on mobile, show hamburger */
@media (max-width: 768px) {
  .header-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  .hamburger {
    display: flex;
    z-index: 1100; /* above the sliding menu */
  }

  /* slide-menu off screen to the right */
  #fixed-header nav {
    position: absolute;
    top: 100%;         /* just below header */
    right: 0;
    background: #d8d8d5;
    width: 200px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    flex-direction: column; /* stack links */
  }
  #fixed-header nav ul {
    flex-direction: column;
    margin: 0;
  }
  #fixed-header nav li + li {
    margin-left: 0;
    margin-top: 1rem;
  }
  #fixed-header nav a {
    display: block;
    padding: 0.75rem 1rem;
  }

  /* when nav-open on <body>, slide it back into view */
  body.nav-open #fixed-header nav {
    transform: translateX(0);
  }
}


/* Prevent modal images from re-flowing or transforming */
.collection-modal .portfolio-grid img {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}
.collection-modal .portfolio-grid img:hover {
  opacity: 0.9; /* subtle hover, no reflow */
}

#home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* or height: 100vh if you want full page */
}


.fp-nav {
  opacity: 0.5;
  transition: opacity 0.5s ease-in-out;
}


/* -------------------
   HAMBURGER TOGGLE
   ------------------- */
.hamburger {
  display: none;            /* hide by default */
  flex-direction: column;   /* stack the spans vertically */
  justify-content: space-around;
  align-items: center;
  width: 28px;              /* total width of the icon */
  height: 24px;             /* total height of the icon */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1100;            /* above your nav drawer */
}

.hamburger span {
  display: block;
  width: 100%;              /* fill the 28px width */
  height: 3px;              /* bar thickness */
  background-color: #7b7e76;/* light color that contrasts your header (#90927e) */
  border-radius: 2px;
  transition: background-color 0.2s ease;
}
/* show hamburger & hide normal nav on small screens */
@media (max-width: 768px) {
  /* show hamburger */
  .hamburger {
    display: flex;
  }
  /* push the real nav off-screen by default */
  #fixed-header nav {
    transform: translateX(100%);
  }
  /* nav slides in when you toggle .nav-open on <body> */
  body.nav-open #fixed-header nav {
    transform: translateX(0);
  }
}

/* Resume section */
.resume-text {
  text-align: center;
  max-width: 800px;
  margin: 80px auto;
  color: #7b7e76;
  padding: 20px;
}

/* Header block */
.resume-header {
  text-align: center;
  margin-bottom: 2rem;
  color: #828b75;
}
.resume-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0.2em;
  color: #828b75;
}
.resume-header p {
  font-size: 1rem;
  margin-bottom: 0.5em;
  color: #828b75;
}

/* Social badges row */
.social-badges {
  display: inline-flex;
  gap: 1rem;
}
.icon-link {
  font-size: 1.5rem;
  color: #828879;        /* ← new base color */
  transition: color 0.2s;
}
.icon-link:hover,
.icon-link:focus {
  color: #31352a;
}
/* Content headings/lists */
.resume-content h4 {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5em;
  color: #828879;
}
.resume-content ul {
  list-style: none;
  padding-left: 0;
}
.resume-content li {
  margin-bottom: 1em;
  line-height: 1.4;
}
.resume-content strong {
  font-weight: 600;
}

/* 1) Make all main section headings (h2) the same green */
.section h2 {
  color: #828879;   /* matches your About/Contact headings */
}

/* 2) Ensure Portfolio body text stays grey, not green */
.portfolio-text p {
  color: #90927e;   /* softer light gray for portfolio copy */
}

/* 3) Reset Resume’s overall text color so we can target headings vs. details */
.resume-text {
  color: inherit;   /* don’t force everything to olive */
}

/* 4) Style Resume’s main heading (h2) and sub-headings (h4) */
.resume-text h2,
.resume-text h4 {
  color: #828b75;   /* same green as other section titles */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* 5) Make the sub-heading text a bit smaller (your name & each section title) */
.resume-text h4 {
  font-size: 1.25rem;  /* tweak to taste—smaller than h2 but larger than body */
}

/* 6) Style the detail copy (location, education items, list items) */
.resume-text p,
.resume-content li {
  color: #8f9388;     /* same light gray as About/Contact copy */
  font-size: 1rem;    /* smaller than your 1.2rem body size */
  line-height: 1.5;
}

/* Hide the scroll-bar on any fullPage overflow container */
.fp-overflow,
.fp-scrollable {
  /* Firefox */
  scrollbar-width: none;
  /* IE 10+ */
  -ms-overflow-style: none;
}
/* WebKit (Chrome/Safari/Edge) */
.fp-overflow::-webkit-scrollbar,
.fp-scrollable::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
.social-badges .icon-link svg,
.social-badges .icon-link svg path {
  fill: #828879 !important;
}
.social-badges .icon-link:hover svg,
.social-badges .icon-link:hover svg path {
  fill: #31352a !important;
}

/* give all full-screen sections a little side-padding */
.section {
  padding: 50px 10px;
  padding-left: 20px;
  padding-right: 20px;
}

/* tighten up on very small screens if you need */
@media (max-width: 400px) {
  .section {
    padding-left: 35px;
    padding-right: 35px;
  }
}