/* Responsive layout corrections for the animated Abdul Karim portfolio. */
:root {
  --ak-shell: 72rem;
  --ak-page-pad: clamp(1rem, 4vw, 1.5rem);
  --ak-nav-height: 4.5rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
}

body {
  min-width: 320px;
}

img, picture, svg {
  max-width: 100%;
}

main, section, footer,
main > section > div,
nav > div {
  min-width: 0;
}

/* Keep the generated Tailwind containers consistent at every viewport. */
nav > div,
main > section > div.max-w-6xl,
main > section > div.max-w-4xl,
footer > div {
  width: min(100%, var(--ak-shell));
  padding-left: var(--ak-page-pad) !important;
  padding-right: var(--ak-page-pad) !important;
}

/* ---------------- Navigation ---------------- */
nav > div {
  min-height: var(--ak-nav-height);
  gap: 1rem;
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

nav > div > a:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

nav ul {
  min-width: 0;
}

nav ul a {
  white-space: nowrap;
}

.ak-menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: .85rem;
  color: #f8fafc;
  background: rgba(15, 23, 42, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.ak-menu-toggle:hover,
.ak-menu-toggle:focus-visible {
  border-color: rgba(251, 191, 36, .7);
  background: rgba(30, 41, 59, .92);
  outline: none;
}

.ak-menu-icon,
.ak-menu-icon::before,
.ak-menu-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .3s ease, opacity .25s ease;
}

.ak-menu-icon {
  position: relative;
}

.ak-menu-icon::before,
.ak-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.ak-menu-icon::before { transform: translateY(-.4rem); }
.ak-menu-icon::after { transform: translateY(.4rem); }
.ak-menu-toggle[aria-expanded="true"] .ak-menu-icon { background: transparent; }
.ak-menu-toggle[aria-expanded="true"] .ak-menu-icon::before { transform: rotate(45deg); }
.ak-menu-toggle[aria-expanded="true"] .ak-menu-icon::after { transform: rotate(-45deg); }

.ak-mobile-nav {
  position: absolute;
  top: calc(100% + .4rem);
  left: var(--ak-page-pad);
  right: var(--ak-page-pad);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: .65rem;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 1rem;
  background: rgba(2, 6, 23, .96);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.65rem) scale(.985);
  transform-origin: top;
  transition: opacity .28s ease, visibility .28s ease, transform .34s cubic-bezier(.22,1,.36,1);
}

.ak-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ak-mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8rem;
  padding: .7rem .85rem;
  border-radius: .7rem;
  color: #cbd5e1;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.ak-mobile-nav a::after {
  content: "›";
  color: #fbbf24;
  font-size: 1.15rem;
}

.ak-mobile-nav a:hover,
.ak-mobile-nav a:focus-visible,
.ak-mobile-nav a.ak-active {
  color: #fbbf24;
  background: rgba(30, 41, 59, .78);
  outline: none;
}

body.ak-menu-open {
  overflow: hidden;
}

/* ---------------- Hero ---------------- */
main > section:first-of-type {
  min-height: 100svh;
  padding-top: var(--ak-nav-height);
}

.ak-hero-inner {
  width: min(100%, var(--ak-shell));
  min-width: 0;
  padding-top: clamp(3.75rem, 8vh, 7rem) !important;
  padding-bottom: clamp(4.75rem, 9vh, 7rem) !important;
}

.ak-hero-inner > * {
  min-width: 0;
}

.ak-profile-wrap {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.ak-hero-copy {
  width: 100%;
  max-width: 43rem;
}

.ak-hero-copy h1 {
  font-size: clamp(2.8rem, 5.2vw, 4rem) !important;
  line-height: 1.04 !important;
  overflow-wrap: anywhere;
}

.ak-hero-copy > p:first-of-type {
  max-width: 38rem;
  line-height: 1.55;
}

.ak-hero-copy > p:nth-of-type(2) {
  max-width: 39rem;
}

.ak-hero-copy a {
  min-height: 3rem;
  justify-content: center;
}

/* The extra animated underline duplicated the built-in divider and made headings look misaligned. */
section[id] h2 {
  display: block;
}

section[id] h2::after {
  display: none !important;
}

/* ---------------- Sections and grids ---------------- */
section[id] {
  padding-top: clamp(4.5rem, 8vw, 6rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 6rem) !important;
}

section[id] > div > .text-center.mb-16 {
  margin-bottom: clamp(2.75rem, 5vw, 4rem) !important;
}

section[id] h2 {
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  line-height: 1.16;
  text-wrap: balance;
}

section[id] h3,
section[id] p,
section[id] li,
section[id] a,
section[id] span {
  overflow-wrap: break-word;
}

#about > div > .grid:first-of-type,
#skills > div > .grid:first-of-type {
  align-items: start !important;
}

#about > div > .grid:first-of-type > div:last-child,
#education .grid,
#achievements .grid,
#training .grid,
#references .grid,
#contact .grid {
  align-items: stretch;
}

#education .grid > div,
#achievements .grid > div,
#training .grid > div,
#references .grid > div,
#contact .grid > div {
  height: 100%;
}

/* About statistics remain aligned even when labels have different lengths. */
#about > div > .grid:first-of-type > div:last-child > div {
  display: flex;
  min-height: 8.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------------- Experience timeline ---------------- */
#experience > div > div:nth-of-type(2) {
  width: 100%;
}

#experience .relative.flex.gap-6 {
  min-width: 0;
}

#experience .relative.flex.gap-6 > div:last-child,
#experience .relative.flex.gap-6 > div:last-child > div {
  min-width: 0;
}

#experience h3 {
  line-height: 1.35;
}

#experience ul li {
  align-items: flex-start;
}

/* Disable the duplicate animation timeline; the original markup already contains a clean line and dots. */
.ak-timeline-list::before,
.ak-timeline-card::after {
  display: none !important;
}

.ak-timeline-card {
  overflow: hidden;
}

/* ---------------- Contact and footer ---------------- */
#contact .grid > div > div:last-child {
  min-width: 0;
}

#contact a.break-all {
  word-break: normal !important;
  overflow-wrap: anywhere;
}

footer .flex {
  min-width: 0;
}

footer a {
  overflow-wrap: anywhere;
}

@media (min-width: 901px) {
  .ak-hero-inner {
    display: grid !important;
    grid-template-columns: clamp(14rem, 23vw, 18rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5.25rem) !important;
    align-items: center;
  }

  .ak-hero-inner > div:first-of-type {
    justify-self: center;
  }

  .ak-hero-copy {
    text-align: left !important;
  }

  .ak-hero-copy > div.flex {
    justify-content: flex-start !important;
  }
}

@media (max-width: 1179px) {
  nav > div > ul,
  nav > div > a:last-child {
    display: none !important;
  }

  .ak-menu-toggle {
    display: inline-flex;
    margin-left: auto;
  }
}

@media (min-width: 1180px) {
  .ak-mobile-nav,
  .ak-menu-toggle {
    display: none !important;
  }

  nav > div > ul {
    gap: clamp(.9rem, 1.65vw, 1.5rem) !important;
  }
}

@media (max-width: 1000px) {
  #about > div > .mt-16.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #achievements .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .ak-hero-inner {
    flex-direction: column !important;
    gap: 2.25rem !important;
    text-align: center;
  }

  .ak-hero-copy {
    margin-inline: auto;
    text-align: center !important;
  }

  .ak-hero-copy > div.flex {
    justify-content: center !important;
  }

  #about > div > .grid:first-of-type,
  #education .grid,
  #skills > div > .grid:first-of-type {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #about > div > .grid:first-of-type {
    gap: 2.5rem !important;
  }

  #education .grid,
  #skills > div > .grid:first-of-type {
    gap: 1.5rem !important;
  }
}

@media (max-width: 719px) {
  #achievements .grid,
  #training .grid,
  #references .grid,
  #contact .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #achievements .grid > div,
  #training .grid > div,
  #references .grid > div,
  #contact .grid > div {
    width: 100%;
  }
}

@media (max-width: 639px) {
  :root {
    --ak-page-pad: 1.1rem;
  }

  main > section:first-of-type {
    min-height: auto;
  }

  .ak-hero-inner {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
    gap: 1.8rem !important;
  }

  .ak-profile-wrap img {
    width: 11.5rem !important;
    height: 11.5rem !important;
  }

  .ak-profile-wrap::before {
    inset: -10px;
  }

  .ak-hero-copy h1 {
    font-size: clamp(2.45rem, 13vw, 3.2rem) !important;
    margin-bottom: .8rem !important;
  }

  .ak-hero-copy > p:first-of-type {
    font-size: 1rem !important;
    margin-bottom: .8rem !important;
  }

  .ak-hero-copy > p:nth-of-type(2) {
    font-size: .94rem !important;
    margin-bottom: 1.5rem !important;
  }

  .ak-hero-copy > div.flex.flex-wrap.gap-4 {
    width: 100%;
    gap: .75rem !important;
  }

  .ak-hero-copy > div.flex.flex-wrap.gap-4 > a {
    flex: 1 1 100%;
    width: 100%;
    max-width: 25rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .ak-hero-copy > .mt-8 {
    margin-top: 1.35rem !important;
  }

  main > section:first-of-type > div:last-child {
    display: none !important;
  }

  section[id] {
    padding-top: 3.75rem !important;
    padding-bottom: 3.75rem !important;
  }

  section[id] > div > .text-center.mb-16 {
    margin-bottom: 2.35rem !important;
  }

  #about > div > .grid:first-of-type > div:last-child {
    gap: .75rem !important;
  }

  #about > div > .grid:first-of-type > div:last-child > div {
    min-height: 7.25rem;
    padding: 1rem !important;
  }

  #about > div > .mt-16.grid {
    margin-top: 2.5rem !important;
  }

  #experience .relative.flex.gap-6 {
    gap: .85rem !important;
  }

  #experience .relative.flex.gap-6 > div:first-child {
    width: 1rem;
    flex: 0 0 1rem;
  }

  #experience .relative.flex.gap-6 > div:last-child {
    padding-bottom: 1.5rem !important;
  }

  #experience .ak-timeline-card,
  #education .ak-card,
  #achievements .ak-card,
  #references .ak-card {
    padding: 1.1rem !important;
  }

  #experience .ak-timeline-card > div:first-child {
    display: block !important;
  }

  #experience .ak-timeline-card > div:first-child > span {
    display: inline-flex;
    max-width: 100%;
    margin-top: .8rem;
    white-space: normal;
    line-height: 1.35;
  }

  #experience ul {
    margin-top: .85rem !important;
  }

  #training .ak-card,
  #contact .ak-card {
    padding: 1rem !important;
  }

  #contact .grid > div {
    gap: .9rem !important;
    align-items: flex-start !important;
  }

  #contact .grid > div > div:first-child {
    width: 2.7rem !important;
    height: 2.7rem !important;
  }

  #contact > div > div:last-child {
    align-items: stretch !important;
    text-align: center;
  }

  #contact > div > div:last-child > div,
  #contact > div > div:last-child > a {
    width: 100%;
    justify-content: center;
  }

  footer {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  footer > div > div:first-child {
    text-align: center;
  }

  footer > div > div:first-child > div:last-child {
    width: 100%;
    flex-direction: column;
    gap: .65rem !important;
  }
}

@media (max-width: 419px) {
  #about > div > .grid:first-of-type > div:last-child,
  #about > div > .mt-16.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #about > div > .grid:first-of-type > div:last-child > div {
    min-height: 6.8rem;
  }

  .ak-mobile-nav {
    left: .75rem;
    right: .75rem;
  }
}

@media (hover: none) {
  .ak-card:hover {
    transform: none !important;
  }
}