/* mobile.css: the phone rules every page shares.
 *
 * Each page still owns its own layout CSS (the UI is duplicated per page by
 * design, see CLAUDE.md). This file holds only the few phone-size rules that
 * are identical everywhere, so they can't drift from page to page. Every page
 * links it last in <head>, so it wins ties with the page's own <style>; the
 * !important flags are there because most of what it overrides is inline
 * style on the element itself.
 *
 * Added 2026-10-17 for the site-wide phone pass. A new page should link it
 * the same way: <link rel="stylesheet" href="mobile.css"> (../mobile.css from
 * clubs/ and news/).
 */

/* The header search box turns into an icon on phones. global-search.js adds
   the button next to the box; it stays hidden at every other width. */
.ct-search-toggle { display: none; }

@media (max-width: 640px) {
  /* iOS Safari zooms the whole page in when a text field under 16px gets
     focus, and leaves it zoomed. Every field on the site was 12-15px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }

  /* Header controls big enough to hit with a thumb (they were 32px). */
  .theme-toggle-btn { width: 40px !important; height: 40px !important; flex: 0 0 40px; }

  /* Search: an icon in the header that opens the same box full-width just
     under it. global-search.js sets --ct-search-top to the header's bottom. */
  #global-search-wrap { display: none !important; }
  .ct-search-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px;
    width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
  }
  html.ct-search-open .ct-search-toggle { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
  html.ct-search-open #global-search-wrap {
    display: block !important; position: fixed !important; z-index: 1005;
    top: var(--ct-search-top, 72px) !important; left: 12px !important; right: 12px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important;
  }
  html.ct-search-open #global-search {
    width: 100% !important; height: 48px !important; box-sizing: border-box;
    background: #162236 !important; border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 12px !important; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  html.ct-search-open #global-search-results {
    position: static !important; width: 100% !important; max-width: none !important;
    max-height: 60vh !important; margin-top: 8px;
  }

  /* The bottom bar's labels were 9-10px. */
  .mobile-bottom-item, .mobile-app-item { font-size: 11px !important; }

  /* Share buttons on club and news pages were 28-32px. */
  [aria-label="Share on X"], [aria-label="Share on Facebook"], [aria-label="Copy link"] {
    width: 40px !important; height: 40px !important;
  }
}

/* Below 375px the header's last text link (Dashboard, Standings or Standings
   Predictor, marked .sub-nav-extra) no longer fits beside the logo, search
   and theme buttons, and pushed the page wider than the screen (added
   2026-10-17; 360px is a common Android width). The bottom bar's Clubs item
   goes to the dashboard, and the footer links the rest. */
@media (max-width: 374px) {
  .sub-nav-extra { display: none !important; }
}

/* The logo's "CT Soccer" text (the span in the header's home link) wrapped
   onto two lines on several pages at 320px, at 768px and, on the news and
   coaching pages, at 1280px (fixed 2026-10-17). From 768px up it stays on one
   line and the search box shrinks to make room; below 360px only the logo
   mark shows. Between 641 and 767px a page with three header links still
   needs the wrap, or the header runs off the edge. */
@media (min-width: 768px) {
  .nav-inner > a:first-child > span { white-space: nowrap; }
}
@media (max-width: 359px) {
  .nav-inner > a:first-child > span { display: none !important; }
}