/* Phone-first responsive and PWA polish layer for Abdelmohsen portfolio */
:root {
  --app-bg: #050505;
  --app-surface: rgba(11, 10, 8, 0.88);
  --app-surface-soft: rgba(255, 255, 255, 0.035);
  --app-border: rgba(255, 255, 255, 0.12);
  --app-border-soft: rgba(255, 255, 255, 0.08);
  --app-gold: #d7b77d;
  --app-text: #f6f1ea;
  --app-muted: #b7aa9e;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  background: var(--app-bg);
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

#root {
  min-height: 100dvh;
  isolation: isolate;
}

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

a,
button,
input,
textarea {
  touch-action: manipulation;
}

input,
textarea,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

input,
textarea {
  font-size: 16px;
}

button,
a {
  min-height: 44px;
}

.portfolio-brand {
  min-height: 48px;
}

/* ---------- Phone layout fix ---------- */
@media (max-width: 767px) {
  html {
    scroll-padding-top: 76px;
  }

  body {
    padding-bottom: calc(84px + var(--safe-bottom));
    overscroll-behavior-y: contain;
  }

  body::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    height: calc(90px + var(--safe-bottom));
    pointer-events: none;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0));
  }

  header.sticky {
    position: sticky;
    top: 0;
    z-index: 95;
    padding-top: var(--safe-top);
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(5, 5, 5, 0.9) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  header.sticky > div {
    height: 62px !important;
    padding-inline: 16px !important;
  }

  .portfolio-brand {
    gap: 0.62rem;
    max-width: calc(100vw - 32px);
  }

  .brand-logo-shell {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
    border-radius: 15px !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.035) inset,
      0 10px 26px rgba(0, 0, 0, 0.42),
      0 0 20px rgba(215, 183, 125, 0.12) !important;
  }

  .brand-name {
    max-width: min(60vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    font-size: 0.93rem !important;
    line-height: 1.05 !important;
  }

  /* Hide the desktop header nav on phones. The JS file injects a dedicated phone nav at body level. */
  header nav,
  .portfolio-brand + nav {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + var(--safe-bottom));
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    border: 1px solid rgba(215, 183, 125, 0.2);
    border-radius: 999px;
    background: rgba(8, 8, 7, 0.92);
    box-shadow:
      0 16px 45px rgba(0, 0, 0, 0.58),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .mobile-bottom-nav::-webkit-scrollbar {
    display: none;
  }

  .mobile-bottom-nav a {
    flex: 0 0 auto;
    min-width: 68px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(246, 241, 234, 0.78) !important;
    font-size: 9px !important;
    font-weight: 800;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    scroll-snap-align: start;
  }

  .mobile-bottom-nav a:active,
  .mobile-bottom-nav a:focus-visible,
  .mobile-bottom-nav a.nav-current {
    border-color: rgba(215, 183, 125, 0.58) !important;
    background: rgba(215, 183, 125, 0.13) !important;
    color: var(--app-gold) !important;
    outline: none;
  }

  main > section {
    max-width: 100vw;
  }

  #home {
    min-height: calc(100svh - 62px) !important;
    padding: 44px 18px 56px !important;
  }

  #home > p:first-child {
    letter-spacing: 0.24em !important;
    font-size: 10px !important;
  }

  /* Critical mobile hero fix: no breaking inside the name. */
  #home h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    font-size: clamp(2.72rem, 11.6vw, 3.65rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.06em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  #home h1,
  #home h1 span {
    white-space: nowrap !important;
  }

  #home h1 span {
    display: block;
    letter-spacing: -0.055em !important;
  }

  #home > div:nth-of-type(1) {
    margin-top: 24px !important;
    width: 100%;
    justify-content: center;
    gap: 12px !important;
    letter-spacing: 0.18em !important;
    font-size: 10px !important;
  }

  #home > div:nth-of-type(1) span {
    width: clamp(24px, 10vw, 38px) !important;
    flex: 0 0 auto;
  }

  #home > p:nth-of-type(2) {
    margin-top: 24px !important;
    max-width: 34rem;
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
  }

  #home > div:last-child {
    width: 100%;
    margin-top: 30px !important;
    gap: 12px !important;
  }

  #home > div:last-child a {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 18px !important;
    text-align: center;
    letter-spacing: 0.16em !important;
  }

  section {
    padding: 66px 18px !important;
  }

  section > .mx-auto.max-w-3xl.text-center {
    text-align: left !important;
  }

  section > .mx-auto.max-w-3xl.text-center p:first-child,
  #about > div:first-child > p:first-child,
  #about > div:first-child > p:last-child {
    letter-spacing: 0.22em !important;
    font-size: 10px !important;
  }

  section h2,
  #about h2 {
    max-width: 100% !important;
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em;
  }

  section h3 {
    line-height: 1.14 !important;
  }

  section p,
  article p,
  label span,
  footer {
    letter-spacing: normal;
  }

  [class*="tracking-[0.55em]"],
  [class*="tracking-[0.5em]"],
  [class*="tracking-[0.45em]"],
  [class*="tracking-[0.42em]"],
  [class*="tracking-[0.38em]"],
  [class*="tracking-[0.35em]"],
  [class*="tracking-[0.32em]"] {
    letter-spacing: 0.16em !important;
  }

  /* Projects filters become a horizontal chip bar instead of cramped wrapped buttons. */
  #projects > div:nth-of-type(2) {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    margin-inline: -18px !important;
    margin-top: 32px !important;
    overflow-x: auto;
    padding: 0 18px 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #projects > div:nth-of-type(2)::-webkit-scrollbar {
    display: none;
  }

  #projects > div:nth-of-type(2) button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px !important;
    border-radius: 999px;
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
    scroll-snap-align: start;
  }

  #projects > div:nth-of-type(3) {
    margin-top: 34px !important;
    gap: 18px !important;
  }

  #projects article,
  #education article,
  #contact form,
  #contact a,
  #services > div:nth-of-type(2),
  #skills span {
    border-radius: 22px;
  }

  #projects article {
    min-height: auto !important;
    padding: 22px !important;
    background: rgba(255, 255, 255, 0.032) !important;
  }

  #projects article > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px !important;
  }

  #projects article h3 {
    margin-top: 24px !important;
    font-size: 1.45rem !important;
  }

  #projects article p {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }

  #projects article button {
    width: 100%;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding-inline: 14px !important;
  }

  #about {
    display: block !important;
  }

  #about > div:first-child,
  #about > div:last-child {
    max-width: none !important;
  }

  #about > div:last-child {
    margin-top: 30px !important;
  }

  #about > div:last-child p {
    font-size: 1rem !important;
    line-height: 1.85 !important;
  }

  #services > div:nth-of-type(2) {
    margin-top: 34px !important;
    gap: 0 !important;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  #services > div:nth-of-type(2) > div {
    min-height: auto !important;
    padding: 24px !important;
    border-right: 0 !important;
  }

  #services > div:nth-of-type(2) > div:last-child {
    border-bottom: 0 !important;
  }

  #skills > div:nth-of-type(2) {
    margin-top: 34px !important;
  }

  #skills > div:nth-of-type(2) > div {
    gap: 18px !important;
    padding: 24px 0 !important;
  }

  #skills h3 {
    font-size: 1.35rem !important;
  }

  #skills .flex.flex-wrap {
    gap: 10px !important;
  }

  #skills span,
  #education span {
    padding: 10px 12px !important;
    line-height: 1.35;
  }

  #education > div:nth-of-type(2),
  #contact > div:nth-of-type(2) {
    margin-top: 34px !important;
    gap: 18px !important;
  }

  #education article {
    padding: 24px !important;
  }

  #education article h3 {
    font-size: 1.75rem !important;
  }

  #contact a {
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px !important;
    background: rgba(255, 255, 255, 0.032) !important;
  }

  #contact a > span:first-child {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
  }

  #contact a span span:last-child {
    word-break: break-word;
    line-height: 1.45;
  }

  #contact form {
    padding: 22px !important;
    background: rgba(255, 255, 255, 0.032) !important;
  }

  #contact form .grid {
    grid-template-columns: 1fr !important;
  }

  label {
    min-width: 0;
  }

  input,
  textarea {
    min-height: 52px;
    border-radius: 16px !important;
    padding: 15px 14px !important;
    background: rgba(255, 255, 255, 0.025) !important;
  }

  textarea {
    min-height: 148px;
  }

  form button[type="submit"] {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    border-radius: 999px;
    letter-spacing: 0.16em !important;
  }

  footer {
    padding: 30px 18px calc(96px + var(--safe-bottom)) !important;
    font-size: 10px !important;
    line-height: 1.8;
    letter-spacing: 0.18em !important;
  }

  /* Project brief modal becomes a bottom sheet on phones. */
  .fixed.inset-0.z-50 {
    align-items: flex-end !important;
    padding: 12px !important;
  }

  .fixed.inset-0.z-50 > .relative {
    max-height: calc(100svh - 24px - var(--safe-top)) !important;
    border-radius: 26px 26px 18px 18px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .fixed.inset-0.z-50 button[aria-label="Close project details"] {
    position: sticky !important;
    top: 12px !important;
    float: right;
    margin: 12px 12px 0 0;
    border-radius: 999px;
  }
}

@media (max-width: 390px) {
  #home h1 {
    font-size: clamp(2.48rem, 10.9vw, 3.15rem) !important;
    letter-spacing: -0.07em !important;
  }

  #home h1 span {
    letter-spacing: -0.065em !important;
  }

  #home > div:last-child a {
    letter-spacing: 0.13em !important;
  }

  .mobile-bottom-nav a {
    min-width: 62px;
    padding-inline: 10px;
    letter-spacing: 0.1em !important;
  }
}

@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}