/* =========================================================================
   Navbar + console typewriter customisations for waxeem.com
   ========================================================================= */

/* ---- Text selection disabled site-wide ----
   (so dragging a magnifier circle never highlights the text underneath).
   Inputs stay selectable so the search box still works. */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}
html { -webkit-tap-highlight-color: transparent; }

/* ---- Anchor scrolling: land the section heading BELOW the sticky navbar ----
   Without this, clicking a navbar link (#about, #education "Few Words", etc.)
   scrolls the heading up under the fixed navbar where it's hidden. The padding
   reserves the navbar's height so the heading stays visible at the top. */
html {
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
}
@media (max-width: 767.98px) {
  html { scroll-padding-top: 76px; }   /* navbar is shorter on phones */
}

/* ---- Sticky navbar (always visible, not just on scroll-up) ---- */
#profileHeader {
  position: sticky !important;
  top: 0;
  z-index: 1020;            /* above page content + background */
}

/* ---- Search box: compact on the right (desktop), full width in the
        collapsed mobile menu ---- */
header .navbar-collapse { align-items: center; }
header .navbar-search { display: flex; }
header #search { width: 240px; max-width: 100%; }

@media (max-width: 991.98px) {
  header .navbar-search { width: 100%; }
  header #search { width: 100%; }
}

/* ---- Blinking console cursor: navbar brand "/>_" and hero typewriter ---- */
.term-cursor,
.type-cursor {
  display: inline-block;
  color: var(--primary-color);
  animation: term-blink 1.1s steps(1, end) infinite;
}
/* solid (no blink) while characters are actively being typed/erased */
.type-cursor.is-typing { animation: none; opacity: 1; }

@keyframes term-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ---- Brand console: the quote types after "waxeem.com />" on one line ---- */
/* flex keeps the brand text and the (smaller, overflow-clipped) quote on the
   same baseline-ish line; without it the clipped box drops below the brand. */
.navbar-brand { min-width: 0; display: inline-flex; align-items: center; }
.brand-prefix { margin-right: 0.4rem; }
.brand-typed-wrap {
  overflow: hidden;          /* clip + scroll so the cursor stays visible */
  white-space: nowrap;
  max-width: 46vw;           /* desktop: fits easily; mobile: shows the tail */
  font-size: 0.82em;         /* the quote reads a touch smaller than the brand */
}
.brand-typed { color: var(--text-secondary-color); font-weight: 400; }
.brand-typed-wrap .type-cursor { color: var(--primary-color); }

/* ---- Phone: shrink the brand + quote and FIX the console width ----
   On a phone the typed quote kept changing the brand's width, which crossed
   the navbar's wrap threshold and bounced the toggler onto a second line
   (the navbar "expanding and collapsing"). A fixed width makes the brand a
   constant size no matter what's being typed, so the bar never reflows. */
@media (max-width: 767.98px) {
  .navbar-brand { font-size: 1rem; }
  .brand-prefix { margin-right: 0.3rem; }
  .brand-typed-wrap {
    width: 40vw;
    max-width: 40vw;
    font-size: 0.7em;        /* quote noticeably smaller than the brand */
  }
}
@media (max-width: 400px) {
  .navbar-brand { font-size: 0.9rem; }
  .brand-typed-wrap {
    width: 38vw;
    max-width: 38vw;
    font-size: 0.66em;
  }
}