/*
 * Lynear Solutions — Custom Styles
 * Supplements Tailwind CDN. Keep additions minimal; prefer utility classes.
 */

/* ── Material Symbols default variation settings ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

/* ── Prevent horizontal overflow from background blurs + smooth scroll ── */
html {
  overflow-x: hidden;
  max-width: 100vw;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── Scroll offset for fixed nav (~72px tall) ── */
#about,
#contact {
  scroll-margin-top: 80px;
}

/* ── Hamburger → X animation ── */
#nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Active nav link highlight (JS sets this on scroll) ── */
.nav-link.active,
.mobile-nav-link.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

/* ── Selection colour (complements Tailwind class on body) ── */
::selection {
  background-color: rgba(108, 99, 255, 0.35);
}

/* ── Focus-visible ring for keyboard users ── */
:focus-visible {
  outline: 2px solid #6C63FF;
  outline-offset: 3px;
  border-radius: 4px;
}