/* ============================================================
   Mobile enhancements — THEME ONLY (preview's odin.css untouched).
   Loaded after odin.css. Desktop (>760px) is unchanged.
   Goals: (1) no horizontal overflow, so the slate masthead + footer
   bars always span the full screen width even mid-scroll;
   (2) a hamburger nav + compact wordmark that fit small screens.
   ============================================================ */

/* Kill any horizontal overflow site-wide (root cause of the bars
   not reaching the screen edge when scrolled right). */
html, body { overflow-x: hidden; max-width: 100%; }

/* Hamburger is desktop-hidden by default. */
.nav-toggle { display: none; }

@media (max-width: 760px) {

  /* --- compact brand so the wordmark never clips --- */
  .masthead .container { flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: 0; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .wordmark { gap: var(--space-3); min-width: 0; }
  .wordmark .raven { height: 54px; }
  .wordmark .name { font-size: 1.55rem; }
  .brand-tag { font-size: 0.82rem; margin-top: 2px; }

  /* --- hamburger button --- */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: none; width: 44px; height: 44px; margin-left: auto; padding: 9px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--on-dark); transition: var(--transition); }
  .masthead.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .masthead.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .masthead.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- collapse nav + search into a dropdown panel --- */
  .masthead-right {
    display: none; flex-basis: 100%; width: 100%;
    flex-direction: column; align-items: stretch; padding-top: var(--space-3);
  }
  .masthead.nav-open .masthead-right { display: flex; }
  .mainnav ul { flex-direction: column; gap: 0; }
  .mainnav li { border-top: 1px solid var(--line-dark); }
  .mainnav a { display: block; padding: var(--space-3) 0; }
  .hsearch { width: 100%; margin-top: var(--space-3); }
  .hsearch input, .hsearch-results { width: 100%; }

  /* keep dense content from pushing width */
  .book-specs, .catalog, .services { max-width: 100%; }
  .book-specs td, .book-specs th { word-break: break-word; }
}