/* Custom overrides for navbar dropdown behavior */

/* Let expanded submenu match actual content height instead of fixed 250px */
.navbar .dropdown.nav-item .dropdown-menu-animation.show {
  height: auto !important;
}

/* Disable forced scroll behavior for nav-item dropdowns */
.navbar-toggler + .navbar-collapse .dropdown.nav-item .dropdown-menu {
  overflow: visible !important;
}

/* Align text start positions by giving navbar icons a fixed slot width */
.navbar .navbar-collapse .navbar-nav .nav-link .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  flex: 0 0 1.5rem;
  font-weight: 600;
  opacity: 0.9 !important;
}

/* Make navbar font bold */
.navbar .navbar-collapse .navbar-nav .nav-link {
  font-weight: 600;
  opacity: 0.9;
}

/* Header banner height tuning: compact on phones, taller on desktop */
.top-banner {
  min-height: 16vh;
}

@media (min-width: 768px) {
  .top-banner {
    min-height: 24vh;
  }
}

@media (min-width: 1200px) {
  .top-banner {
    min-height: 28vh;
  }
}

/* Swap desktop dropdown arrow color after navbar scroll state changes */
.navbar.navbar-transparent .navbar-nav .nav-link .arrow-dark {
  display: none !important;
}

.navbar:not(.navbar-transparent) .navbar-nav .nav-link .arrow-white {
  display: none !important;
}

@media (min-width: 992px) {
  .navbar:not(.navbar-transparent) .navbar-nav .nav-link .arrow-dark {
    display: inline-block !important;
  }
}

/* Make the posts dropdown divider visible on both transparent and white nav states */
.navbar .dropdown-menu .dropdown-divider.posts-divider {
  border-top: 1px solid rgba(38, 38, 38, 0.25);
  margin: 0.5rem 0;
  opacity: 1;
}

/* Keep hovered desktop submenus inside the viewport */
@media (min-width: 992px) {
  .navbar .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
    left: 0;
    right: auto;
    min-width: 22.5rem;
    margin-left: 0 !important;
    max-width: min(90vw, 30rem);
  }

  .navbar .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu:before {
    left: 28px !important;
    right: auto !important;
  }

  /* Keep right-edge dropdowns inside viewport */
  .navbar .navbar-collapse .navbar-nav > .nav-item.dropdown:nth-last-child(-n+3) .dropdown-menu {
    left: auto;
    right: 0;
  }

  .navbar .navbar-collapse .navbar-nav > .nav-item.dropdown:nth-last-child(-n+3) .dropdown-menu:before {
    left: auto !important;
    right: 28px !important;
  }

  .navbar .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Offset anchor jump targets so they are not hidden behind the fixed navbar */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 70px;
}

/* Reduce heading scale: h1->h3, h2->h4, h3->h5 */
h1 {
  font-size: calc(1.3125rem + 0.75vw);
}

h2 {
  font-size: calc(1.275rem + 0.3vw);
}

h3 {
  font-size: 1.25rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* Indent first line of body paragraphs on Japanese pages */
html[lang="ja"] .card-body p:not(.post-meta):not(.no-indent):not(.card-text) {
  text-indent: 1em;
}

/* Style markdown tables with alternating row colors inside page content */
.card-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  table-layout: fixed;
}

/* Allow text wrapping in the project name column */
.table-project-col {
  white-space: normal !important;
  width: 36%;
}

.card-body table th:first-child,
.card-body table td:first-child {
  width: 36%;
}

.card-body table th:not(:first-child),
.card-body table td:not(:first-child) {
  width: 8%;
}

.card-body table th,
.card-body table td {
  padding: 0.5rem 0.75rem;
  border-left: none;
  border-right: none;
}

/* Ensure text-dark tables stay dark even with Material Kit defaults */
.card-body table.text-dark th,
.card-body table.text-dark td,
.card-body table.text-dark small {
  color: var(--bs-dark) !important;
}

/* Use browser-default link colors in page content */
.page .card-body a,
.page .card-body a:visited,
.page .card-body a:hover,
.page .card-body a:active {
  color: revert;
}

/* Make only social cards use dark text; do not affect alerts */
.page .social-card p,
.page .social-card small {
  color: #262626 !important;
  opacity: 1;
}

/* Preserve image aspect ratio */
.card-img-top {
  height: auto;
}

/* Partial-collapse toggle trigger */
a[data-collapse-partial] {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

a[data-collapse-partial]::after {
  content: '\25BC'; /* ▼ */
  font-size: 0.65em;
  opacity: 0.5;
  transition: transform 0.3s ease, opacity 0.2s;
  display: inline-block;
}

a[data-collapse-partial][aria-expanded="true"]::after {
  transform: rotate(-180deg);
  opacity: 0.8;
}

a[data-collapse-partial]:hover::after,
a[data-collapse-partial]:focus::after {
  opacity: 1;
}

a[data-collapse-partial]:focus {
  outline: none;
}

/* Partial-collapse: show a preview with a gradient fade at the bottom */
.collapse-partial {
  max-height: 8em;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

.collapse-partial::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: linear-gradient(to bottom, transparent, var(--bs-card-bg, #fff));
  pointer-events: none;
}

.collapse-partial.is-expanded {
  max-height: 60em;
}

.collapse-partial.is-expanded::after {
  display: none;
}