/* Phone and small-tablet layout.
 *
 * The page came out of a design tool that wrote every rule as an inline
 * style attribute, so each override here needs !important to win. Kept in
 * its own file so that regenerating index.html from the design source only
 * costs one <link> line rather than re-deriving all of this.
 *
 * 720px is just above the point where the nav and main columns stop fitting
 * side by side and the flex container wraps. */

@media (max-width: 720px) {

  /* The sidebar is min-height:100vh, so once it wraps it became a full
     screen of nav links with the content pushed below the fold. Collapse it
     to a compact header strip instead. */
  body nav {
    position: static !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 18px 20px 0 !important;
    gap: 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #DAE6E6 !important;
  }

  body nav img { max-width: 132px !important; }

  /* Section links become a horizontally scrollable strip. */
  #rail-nav {
    margin-top: 0 !important;
    flex-direction: row !important;
    gap: 0 20px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #rail-nav::-webkit-scrollbar { display: none; }

  #rail-nav a {
    padding: 4px 0 12px !important;
    border-bottom: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  /* The "Follow LogiDCT" link is the nav's second child. Dropped here to keep
     the header short. */
  body nav > a { display: none !important; }

  .site-footer { right: 12px !important; bottom: 12px !important; }

  /* 64px of side padding leaves very little room for text on a phone. */
  main > section {
    padding: 34px 20px 48px !important;
  }

  /* Two grids ask for three hard columns, which is unreadable at this width. */
  main [style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* The study-phase bars are a staggered Gantt-style diagram positioned with
     percentage offsets. Narrow screens clip the labels (the pills are
     nowrap + overflow:hidden), so square them up to full width and keep the
     stagger for wider viewports only. */
  main div[style*="height:40px"] { height: auto !important; }

  main div[style*="border-radius:999px"] {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 18px !important;
  }

  /* Cards that opt out of wrapping overflow their container on a phone. */
  main [style*="white-space:nowrap"]:not([style*="border-radius:999px"]) {
    white-space: normal !important;
  }

  /* Tap targets on the two call-to-action buttons. */
  main a[style*="padding:13px 24px"] {
    flex: 1 1 auto !important;
    text-align: center !important;
  }
}