/* =========================================================
   MOBILE
   ---------------------------------------------------------
   This file applies EXCLUSIVELY to windows narrower than
   900 pixels. On a desktop screen it has no effect at all -
   every rule sits inside an @media block.

   To switch it off: remove the line
   <link rel="stylesheet" href="css/mobile.css"> from the
   HTML files.

   To test it: drag the browser window narrow, or press F12
   in Chrome and click the phone icon at the top left.
   ========================================================= */


/* =========================================================
   TABLET AND PHONE  (up to 900px)
   ========================================================= */
@media (max-width: 900px) {

  /* ---- Title: grows with the window width --------------
     6rem would be wider than a phone screen */
  header h1:first-child {
    font-size: clamp(1.8rem, 8vw, 3.4rem);
    padding: 1.5rem 1rem;
  }

  /* ---- Margins: 5rem is too much at 600px width ------- */
  .bar__inner {
    padding: 0 1rem;
  }

  main.custom_main {
    padding: 1rem 1.25rem;
    font-size: 18px;
  }

  .custom_main h2 {
    font-size: 30px;
    margin: 0 0 1.5rem;
  }

  .custom_main h3 {
    font-size: 22px;
  }

  /* ---- Navigation: wrap instead of scrolling sideways --
     Otherwise only the first two items show, and nobody
     suspects that four more are sitting off to the right. */
  nav.bar {
    margin: 0 0 2rem;
  }

  nav.bar ul {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  nav.bar a {
    font-size: 16px;
    padding: 0.6rem 0.75rem;
  }

  /* ---- Switch the freezing off ------------------------
     Title, navigation bar and text block would take up
     almost the whole screen on a phone. Here everything
     scrolls along normally again. */
  body.page-equipment > header,
  body.page-learning > header,
  body.page-equipment > nav.bar,
  body.page-learning > nav.bar {
    position: static;
  }

  body.page-equipment .fog-head,
  body.page-learning .fog-head {
    position: static;
    width: auto;
    max-width: none;
  }

  /* The hard line breaks in the text block produce double
     breaks on narrow screens - the text should wrap by
     itself here. */
  .fog-head br {
    display: none;
  }

  /* ---- Background logo ---------------------------------
     900x900 fixed would fill a phone completely. */
  body.page-equipment::before,
  body.page-learning::before,
  body::before {
    position: absolute;
    width: 90vw;
    height: 90vw;
    right: 0;
  }

  /* ---- Galleries: one calm column ----------------------
     The scroll effects switch themselves off below 900px
     (see the scripts). This only tidies up the fixed
     dimensions they might leave behind. */
  .vk-gallery {
    width: auto !important;
    max-width: 100% !important;
    margin: 2rem 0 3rem !important;
  }

  .vk-slot {
    height: auto !important;
    margin-bottom: 3rem !important;
  }

  .vk-frame {
    position: static !important;
    width: 100% !important;
    opacity: 1 !important;
  }

  /* The rune wheel becomes a grid (the script sets the class) */
  .rune-stage {
    height: auto !important;
  }

  .rune-wheel {
    position: static !important;
    height: auto !important;
  }

  .rune-static .rune-wheel {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
  }

  /* ---- Footer ------------------------------------------
     The fixed bar is 67 px high on narrow screens instead of
     50 - the copyright text wraps onto two lines there. So keep
     more room free, otherwise the last paragraph slips behind it. */
  .page-wrapper {
    padding-bottom: 6rem;
  }
}


/* =========================================================
   PHONE ONLY  (up to 600px)
   ========================================================= */
@media (max-width: 600px) {

  main.custom_main {
    padding: 1rem;
    font-size: 17px;
  }

  .custom_main h2 {
    font-size: 26px;
  }

  nav.bar a {
    font-size: 15px;
    padding: 0.55rem 0.6rem;
  }

  .copyright-box {
    font-size: 14px;
  }
}