/* =========================================================================
   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%; }
}

/* ---- Mobile: hamburger toggler to the far RIGHT; slightly smaller wordmark brand ----
   The brand sits on the left (margin-right:auto) and pushes the menu icon to the right
   edge; the collapsed menu wraps to its own row underneath. Desktop (≥992px) is untouched —
   the toggler is hidden there. */
@media (max-width: 991.98px) {
  header .navbar > .container-fluid { justify-content: flex-start; }
  header .navbar-brand { margin-right: auto; }                  /* push the toggler to the far right */
  header .navbar-toggler { margin-left: 0.6rem; }
  header .navbar-brand .wx-wordmark { transform: scale(0.68); transform-origin: left center; }
}

/* ---- 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;
  }
}

/* ---- Table of Contents active state (for JS-built TOC on HTML posts) ----
   static/js/html-toc.js fills the theme's sidebar TOC for HTML (non-Markdown)
   posts and adds `.active` to the link of the section currently in view. The
   theme already styles the TOC links; we only add the in-view highlight — and
   it needs to beat the theme's `color: … !important` on those links. */
#single aside.toc .toc-content a.active {
  color: var(--primary-color) !important;
  opacity: 1;
  font-weight: 700;
}

/* =========================================================================
   Polished "More" dropdown — dark glass panel, amber hover, and right-aligned
   (dropdown-menu-end) so it never runs off the right edge of the screen.
   Overrides the theme's plain `.dropdown-menu` (which is !important).
   ========================================================================= */
header .navbar .dropdown-menu.wx-dropdown {
  margin-top: .6rem;
  min-width: 12.5rem;
  padding: .4rem !important;
  background: rgba(18, 18, 20, .98) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
header .navbar .dropdown-menu.wx-dropdown.show { animation: wx-dd-in .16s ease-out; }
@keyframes wx-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
header .navbar .dropdown-menu.wx-dropdown .wx-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  margin: 1px 0;
  padding: .6em .9em;
  border-radius: 9px;
  color: var(--text-color) !important;
  font-size: .95rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
header .navbar .dropdown-menu.wx-dropdown .wx-dropdown-item:hover,
header .navbar .dropdown-menu.wx-dropdown .wx-dropdown-item:focus {
  background: rgba(251, 191, 36, .15) !important;     /* amber tint */
  color: var(--primary-color) !important;
}
header .navbar .dropdown-menu.wx-dropdown .wx-dropdown-item:active { transform: scale(.98); }