/* The saved pages on a telephone and a tablet.

   Three things the owner saw on a phone on 13 September 2026:

   1. No way to any other page. The copied stylesheet hides the desktop menu
      below 991px and expects LearnWorlds' own script to draw a hamburger in
      its place. That script was stripped with the rest, so the placeholder
      stayed empty. site-mobile.js fills it with a button and a plain list of
      the same links.

   2. The logo touched the left edge. The logo column carries no padding of
      its own on a phone.

   3. The four headline counters sat in one row of four, each tile only as
      wide as its label, so the numbers came out in four sizes and the labels
      wrapped into three lines. On a narrow screen they are a two-by-two grid
      with one number size.

   Nothing here applies above 990px, so the desktop pages are untouched. */

@media screen and (max-width: 990.9px) {

  /* 2. Breathing room for the logo. */
  .lw-topbar .lw-topbar-logo-col { padding-left: 16px; }
  .lw-topbar .lw-logo { max-height: 56px; width: auto; }

  /* 1. The menu button and the sheet it opens. */
  .lw-topbar .lw-cols { position: relative; align-items: center; }
  .hx-menu-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; background: transparent;
    padding: 0; cursor: pointer; z-index: 20;
  }
  /* Three bars drawn at fixed positions, so the open state folds cleanly
     into a cross: the outer two turn about the centre, the middle fades. */
  .hx-menu-toggle span {
    position: absolute; left: 10px; width: 24px; height: 3px;
    background: #000; border-radius: 2px; transition: transform .2s, opacity .2s;
  }
  .hx-menu-toggle span:nth-child(1) { top: 13px; }
  .hx-menu-toggle span:nth-child(2) { top: 21px; }
  .hx-menu-toggle span:nth-child(3) { top: 29px; }
  .hx-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hx-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hx-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hx-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid #e5e5e5; box-shadow: 0 12px 24px rgba(0,0,0,.12);
    list-style: none; margin: 0; padding: 8px 0 12px; z-index: 19;
  }
  .hx-menu[data-open="true"] { display: block; }
  .hx-menu li { margin: 0; }
  .hx-menu a, .hx-menu a:visited {
    display: block; padding: 14px 24px; font-family: "Roboto", sans-serif;
    font-size: 1.7rem; color: #000200 !important; text-decoration: none;
  }
  .hx-menu a:active, .hx-menu a:hover { background: #f4f6f4; }
  .hx-menu li.hx-menu-account a { color: #005198 !important; font-weight: 500; }
  .hx-menu li.hx-menu-divider { border-top: 1px solid #e5e5e5; margin-top: 6px; padding-top: 6px; }
}

/* 3. The counter band. The tiles' own classes put them in one row at every
   width; below 768px they become two by two, and the number is set once. */
@media screen and (max-width: 767.9px) {
  .lw-cols:has(> .col > .lw-progress-wrapper) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .lw-cols:has(> .col > .lw-progress-wrapper) > .col {
    width: auto !important; max-width: none !important; flex: none !important;
    margin: 0 !important; min-width: 0;
  }
  .lw-progress-wrapper [data-node-type="counter-text"] {
    font-size: 3.4rem !important; line-height: 1.1; white-space: nowrap;
  }
  .lw-progress-wrapper .learnworlds-main-text-very-small {
    padding-right: 0 !important;
  }
}