/**
 * Sarbon Proceedings — mobile / responsive polish
 * UI only; complements the compiled Tailwind stylesheet.
 */

/* ─── Brand logos (wordmark SVGs, scale with viewport) ─── */
.sarbon-logo__img {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sarbon-footer-logo {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .sarbon-logo__img {
    height: 2.5rem;
  }
}

/* Skip link: fully off-screen until keyboard focus
   (compiled -top-10 leaves its bottom edge peeking above the header) */
.skip-to-content:not(:focus) {
  transform: translateY(-150%);
}

/* Icon-only header buttons: square padding
   (compiled .btn-icon inherits the wide text-button padding) */
#search-toggle,
#mobile-menu-toggle {
  padding: 0.625rem;
  border-radius: 0.625rem;
}

/* Make the menu button an obvious tap target */
#mobile-menu-toggle {
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 32, 55, 0.06);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#mobile-menu-toggle:hover {
  border-color: #1e3a5f;
  color: #1e3a5f;
}

#mobile-menu-toggle[aria-expanded="true"] {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

/* Mobile navigation panel: scrollable, softly detached from the header */
#mobile-menu {
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0 24px 40px -20px rgba(11, 23, 41, 0.25);
}

@media (max-width: 1023.98px) {
  /* Comfortable touch targets in the mobile nav */
  #mobile-menu nav a {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: 0.95rem;
  }

  /* Long words (URLs, emails) must not overflow small screens */
  main {
    overflow-wrap: break-word;
  }
}

@media (max-width: 639.98px) {
  /* Slightly tighter hero blocks on phones */
  .page-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Wordmark logo must never collide with the header buttons */
  .sarbon-logo__img {
    height: 1.75rem;
    max-width: 100%;
  }

  /* Tables inside article/prose content scroll instead of breaking layout */
  .prose table,
  .prose-academic table {
    display: block;
    overflow-x: auto;
  }
}