/* ==========================================================================
   Mobile header — The Sri COM
   --------------------------------------------------------------------------
   The header carries a logo, wordmark, search, language, theme toggle and
   Subscribe. That is a lot for a 320px phone, and adding the language button
   pushed Subscribe off the right edge — which also widened the document and
   made the whole page scroll sideways.

   The fix, in order of what gets sacrificed first:
     under 620px  tighter gaps and slightly smaller buttons
     under 420px  the wordmark goes; the logo still identifies the site

   Nothing is removed — search, language, theme and Subscribe all stay
   reachable at every width.

   Loaded LAST so it wins over the sizes set in screen.css,
   mobile-and-theme.css and translate.css.
   ========================================================================== */

@media (max-width: 620px) {
  .site-header {
    min-height: 60px;
    gap: 10px;
    padding-inline: 14px;
  }

  .header-actions { gap: 7px; }

  /* 36px keeps a usable touch target while still fitting on a 320px screen. */
  .site-header .search,
  .site-header .theme-toggle,
  .site-header .lang-toggle {
    width: 36px;
    height: 36px;
    flex: none;
  }

  .site-header .search svg { width: 19px; height: 19px; }
  .site-header .lang-toggle .lang-flag { width: 19px; height: 19px; }

  .site-header .subscribe {
    padding: 9px 13px;
    font-size: .8rem;
    white-space: nowrap;
  }

  .site-header .brand { min-width: 0; }
  .site-header .brand img { width: 34px; height: 34px; }
}

@media (max-width: 420px) {
  /* The wordmark is the one thing that can go: the logo still says whose site
     this is, and losing it keeps the Subscribe button fully on screen. */
  .site-header .brand span { display: none; }

  .site-header { gap: 8px; }
  .header-actions { gap: 6px; }
}

/* The header must stay stuck to the top at EVERY width.

   It was already `position: sticky`, but an earlier version of this file set
   `overflow-x: hidden` on html/body to stop sideways scrolling. That silently
   breaks sticky — an overflow value other than `visible` turns the element
   into a scroll container, and the header then scrolls away with the page.
   The header sizing above is what actually fixes the overflow, so the hidden
   is gone and sticky works again. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: 100%;
}