/*
  Editable homepage overrides.
  Keep custom index-page styles here instead of editing minified bundle files.
*/

/* Public homepage rhythm and responsive polish. */
#about,
#projects,
#resources,
#toolkit,
#safety-usage,
#trending,
#ai-readiness,
#contact {
  scroll-margin-top: 116px;
}

@media (min-width: 992px) {
  nav > div:first-of-type {
    gap: clamp(14px, 2vw, 28px) !important;
  }

  nav > div:first-of-type > button {
    font-size: clamp(15px, 1.05vw, 16px) !important;
    white-space: nowrap;
  }
}

@media (min-width: 992px) and (max-width: 1120px) {
  nav {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  nav > img {
    width: 190px !important;
    height: auto !important;
  }

  nav > div:first-of-type {
    gap: 14px !important;
  }

  nav > div:first-of-type > button {
    font-size: 14px !important;
  }

  nav > button:first-of-type {
    display: none !important;
  }
}

#about > div,
#projects > div,
#resources > div,
#toolkit > .ai-toolkit-section,
#trending > div,
#contact > div {
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

#about > div,
#projects > div,
#resources > div,
#toolkit > .ai-toolkit-section,
#trending > div,
#contact > div {
  padding-top: var(--site-section-y);
  padding-bottom: var(--site-section-y);
}

#projects > div > div,
#resources > div > div,
#toolkit .ai-toolkit-container {
  width: min(var(--site-container-wide), 100%);
  margin-left: auto;
  margin-right: auto;
}

#projects > div > div,
#resources > div > div {
  gap: 32px !important;
}

#projects h2,
#resources h2,
#toolkit h2,
#trending h2 {
  font-size: clamp(2rem, 8vw, 3rem) !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

#projects [data-testid="projects-subtitle"],
#resources [data-testid="learning-hub-subtitle"],
#toolkit .ai-toolkit-subtitle,
#trending p {
  max-width: 820px;
  line-height: 1.65;
}

#projects [data-testid="projects-subtitle"] br,
#resources [data-testid="learning-hub-subtitle"] br {
  display: none;
}

#projects #content-strategic,
#resources .grid {
  gap: clamp(18px, 3vw, 32px) !important;
}

#projects [data-testid^="project-card-"],
#resources [data-testid^="certification-card-"] {
  width: 100%;
  border-radius: var(--site-card-radius) !important;
}

#projects [data-testid^="project-card-"] {
  padding: clamp(20px, 4vw, 30px) !important;
  border: 1px solid rgba(187, 113, 100, 0.45) !important;
  background: linear-gradient(144deg, rgba(255,255,255,0.04), rgba(146,39,143,0.08)) !important;
}

#projects [data-testid^="project-card-"] h3,
#resources [data-testid^="certification-title-"] {
  line-height: 1.3;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

#projects button,
#resources button,
#toolkit button,
#toolkit a,
#trending a,
#contact a,
[data-testid="footer"] a {
  outline-offset: 3px;
}

#projects button:focus-visible,
#resources button:focus-visible,
#toolkit button:focus-visible,
#toolkit a:focus-visible,
#trending a:focus-visible,
#contact a:focus-visible,
[data-testid="footer"] a:focus-visible {
  outline: 2px solid var(--site-accent);
  box-shadow: var(--site-focus);
}

#projects #tab-strategic,
#projects #tab-academic {
  min-height: 44px;
}

#projects #content-academic {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Homepage footer responsive tuning (mobile only: 320px-767px). */
@media (max-width: 991px) {
  /* Remove fixed-height footer wrapper from bundled classes on small screens. */
  [data-testid="footer"] > div {
            height: auto !important;
        min-height: 0 !important;
        padding-top: 0;
        padding-bottom: 12px !important;
        align-items: flex-end !important;
        flex-flow: column;
  }


.footerimageWrap {
    height: auto;
    top: 0;
    position: relative;
}
  
}
@media (max-width: 767px) {
  #about > div,
  #projects > div,
  #resources > div,
  #toolkit > .ai-toolkit-section,
  #trending > div,
  #contact > div {
    padding-top: var(--site-section-y-compact);
    padding-bottom: var(--site-section-y-compact);
  }

  #projects > div > div,
  #resources > div > div {
    gap: 24px !important;
  }

  #projects > div > div > .flex.gap-4 {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px !important;
    margin-top: 0 !important;
  }

  #projects #tab-strategic,
  #projects #tab-academic {
    flex: 1 1 150px;
    min-width: min(100%, 150px);
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: normal;
  }

  [data-testid="footer"] .max-w-7xl {
       flex-flow: column;
    align-items: center;
  }

  [data-testid="footer"] .max-w-7xl > div {
    justify-content: center;
    align-self: center;
    flex-wrap: wrap;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  #about > div,
  #projects > div,
  #resources > div,
  #toolkit > .ai-toolkit-section,
  #trending > div,
  #contact > div {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }

  #resources [data-testid^="certification-card-"] .p-6 {
    padding: 18px !important;
  }

  #projects [data-testid^="project-card-"] {
    padding: 18px !important;
  }
}