html,
body {
  overflow-x: hidden;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* --- Header --- */
.header {
  display: flex;
  position: fixed;
  z-index: 1000;
  inset: 0;
  border-radius: 62.4375rem;
  margin-top: 2px;
  align-items: center;
  flex-flow: row nowrap;
  justify-content: center;
  background: var(--header-background);
  width: 100%;
  height: 3.75rem;
}

/* --- Logo --- */
.logoWrap {
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  justify-content: center;
  inset: 0;
  flex-wrap: wrap;
  width: 10rem;
  position: relative;
  left: 0;
  margin-right: auto;
  margin-left: 1rem;
  height: 3.75rem;
}

.logoWrap img {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  position: absolute;
  height: 100%;
  width: auto;
  top: 50%;
  left: 50%;
  transform: translate(-49%, -50%);
  cursor: pointer;
  border-radius: 30rem;
}

/* --- Lawyer Name --- */
.lawyerName {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.lawyerName h2:nth-child(1) {
  font-size: small;
  font-family: var(--heading-font);
  font-optical-sizing: auto;
  font-weight: 400;
  height: auto;
  position: absolute;
  margin-left: 0.4rem;
  left: 0;
}

.lawyerName h2:nth-child(2) {
  font-size: small;
  font-family: var(--heading-font);
  font-optical-sizing: auto;
  font-weight: 400;
  height: auto;
  position: absolute;
  right: 0;
}

/* --- Nav Bar Row --- */
.navBarRow {
  display: inline-flex;
  position: absolute;
  height: 3.75rem;
  right: 0;
  top: 0;
  margin-left: 0;
}

@media (max-width: 47.9375rem) {
  #nav-bar {
    display: none;
  }
}

/* --- Nav Links (Desktop) --- */
.nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 3.75rem;
  overflow-wrap: normal;
  overflow-x: auto;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding-right: 1.5rem;
  flex-flow: row wrap;
  text-align: center;
  list-style: none;
}

a .nav-link {
  left: 0;
}

.nav-link {
  padding: 8px;
  border-radius: 99px;
  transition: background 0.3s ease;
}

.nav-links a:hover {
  color: #000000f7;
  background: #e4c25d;
  text-decoration: none;
}

.nav-links a {
  color: var(--nav-link-color);
  font-weight: 350;
  text-decoration: none;
  font-size: var(--title-size-font);
  font-family: var(--nav-head-font);
}

@media (min-width: 48rem) and (max-width: 57.1875rem) {
  .nav-links {
    gap: clamp(0.5rem, 1.2vw, 1rem);
    padding-right: clamp(0.5rem, 1.2vw, 1rem);
  }

  .nav-link {
    padding: clamp(4px, 0.6vw, 6px);
  }

  .nav-links a {
    font-size: clamp(0.7rem, 0.5vw + 0.6rem, 0.85rem);
  }
}

/* --- Button Wrap --- */
.btnWrap {
  display: none;
}

@media (max-width: 47.9375rem) {
  .btnWrap {
    display: flex;
    outline: none;
    margin-right: 0.75rem;
    background: #f5000000;
    flex-direction: column;
    margin-left: auto;
    justify-items: center;
    align-items: center;
  }
}

/* --- Menu Button --- */
.menuBtn {
  display: flex;
  width: 2.45rem;
  height: 2.2rem;
  cursor: pointer;
  outline: none;
  border-radius: 0.426rem;
  border: 2px solid var(--nav-link-hover-color);
  background: var(--primary-background);
}

.menuBtn:hover {
  background: var(--primary-gradient);
}

/* --- Bars (Hamburger Icon) --- */
.bars {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  height: 1.9rem;
  width: 2.45rem;
  gap: 0.27rem;
  overflow: hidden;
}

.bars span {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  background: var(--text-color);
  overflow: hidden;
  height: 0.16rem;
  width: 1.65rem;
  border-radius: 999px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Hamburger → X Animation --- */
.bars.active span:nth-child(1) {
  transform: translateY(0.43rem) rotate(-45deg);
}

.bars.active span:nth-child(2) {
  opacity: 0;
}

.bars.active span:nth-child(3) {
  transform: translateY(-0.43rem) rotate(45deg);
}

/* ============================================================
   COMPACT MENU — Scroll Reveal Animation
   ============================================================ */

/* --- Keyframes: Opening (scroll down reveal) --- */
@keyframes menuReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-10px);
  }
  60% {
    opacity: 1;
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
  }
}

/* --- Keyframes: Link stagger fade in --- */
@keyframes linkAppear {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Compact Menu Base --- */
.compactMenu {
  display: none;
}

/* --- Compact Menu Active State --- */
.compactMenu.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 3.95rem;
  left: 0;
  right: 0;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: fit-content;
  min-height: fit-content;
  max-height: calc(100dvh - 3.95rem);
  overflow-y: hidden;
  overflow-x: hidden;
  background: var(--primary-background);
  border: 0.25rem solid rgba(92, 148, 245, 0.645);
  border-radius: 2rem;
  box-sizing: border-box;
  z-index: 9999;
  /* Animation */
  animation: menuReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Landscape small screens --- */
@media (max-height: 31.25rem) and (orientation: landscape) {
  .compactMenu.active {
    max-height: calc(100dvh - 3.95rem);
    overflow-y: auto;
  }
}

/* --- Compact Links --- */
#dwarfMenu.compactMenu.active .compactLinks {
  position: relative;
}

.compactLinks {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: var(--primary-background);
  width: fit-content;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0;
}

.compactLinks li {
  display: flex;
  align-items: center;
  list-style: none;
  text-decoration: none;
}

/* --- Link Stagger Animation --- */
.compactMenu.active .compactLinks li {
  opacity: 0;
  animation: linkAppear 0.4s ease forwards;
}

.compactMenu.active .compactLinks li:nth-child(1) { animation-delay: 0.15s; }
.compactMenu.active .compactLinks li:nth-child(2) { animation-delay: 0.2s; }
.compactMenu.active .compactLinks li:nth-child(3) { animation-delay: 0.25s; }
.compactMenu.active .compactLinks li:nth-child(4) { animation-delay: 0.3s; }
.compactMenu.active .compactLinks li:nth-child(5) { animation-delay: 0.35s; }
.compactMenu.active .compactLinks li:nth-child(6) { animation-delay: 0.4s; }

/* --- Compact Link Styles --- */
a.navCompact {
  margin: 0.25rem;
  padding: 0.55rem;
  border-radius: 2.5rem;
  text-decoration: none;
  list-style: none;
  font-family: var(--nav-head-font);
  font-size: var(--title-size-font);
  font-weight: 400;
  color: var(--link-color);
  transition: background 0.3s ease-in-out;
}

a.navCompact:hover {
  background: #e4c25d;
  color: #000000f7;
  text-decoration: none;
}

/* ============================================================
   REDUCED MOTION — Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bars span {
    transition-duration: 0.01ms !important;
  }

  .compactMenu.active {
    animation: none !important;
    opacity: 1;
    clip-path: none;
  }

  .compactMenu.active .compactLinks li {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

:is(html.dark-mode, body.dark-mode) .menuBtn {
    background: var(--accent-gradient);
    border: 2px solid #aac8ff;
}

:is(html.dark-mode, body.dark-mode) .menuBtn:hover {
    background: var(--nav-compact-hover-color);
}

:is(html.dark-mode, body.dark-mode) .lawyerName,
:is(html.dark-mode, body.dark-mode) .lawyerName h2 {
    color: #ffffff;
}

:is(html.dark-mode, body.dark-mode) .logoWrap img {
    filter: brightness(0) invert(1);
}
/* ============================================================
   READING PROGRESS BAR
   ============================================================ */

#reading-progress-bar { position:fixed; top:0; left:0; width:0%; height:3px; background:linear-gradient(90deg,#3b4cca 0%,#6c78e0 50%,#3b4cca 100%); background-size:200% 100%; z-index:9999; border-radius:0 2px 2px 0; transition:width 0.1s linear; animation:shimmer 2s infinite linear; box-shadow:0 0 8px rgba(59,76,202,0.6); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
#reading-progress-bar::after { content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:6px; height:6px; background:#6c78e0; border-radius:50%; box-shadow:0 0 6px 2px rgba(108,120,224,0.8); transition:opacity 0.3s ease; }
#reading-progress-bar.complete { opacity:0; transition:width 0.1s linear,opacity 0.6s ease 0.4s; }
#reading-progress-bar.complete::after { opacity:0; }