/* Coding Classroom v0.10.1.4 — Mobile Responsive Hotfix
   Scope: mobile header/navigation + safe-area polish only.
   No account, assessment, progress, classroom, or lab logic is changed. */

@media (max-width: 780px){
  /* Respect notches / standalone mode while keeping browser mode compact. */
  .site-header{
    padding-top:max(10px, env(safe-area-inset-top));
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
    padding-bottom:8px;
    column-gap:10px;
    row-gap:6px;
  }

  .site-brand-new{flex:0 0 auto}
  .header-right{
    flex:0 1 auto;
    margin-left:auto;
    flex-wrap:nowrap;
    gap:7px;
  }
  .header-right select{min-width:0}

  /* On normal mobile pages the fixed bottom nav already contains the same
     destinations. Hide the duplicate top row so it cannot overflow or steal
     vertical space. Lab/Robot/Assessment keep the top row because the bottom
     nav is intentionally hidden on those focused learning screens. */
  body:not([data-route="lab"]):not([data-route="robot"]):not([data-route="assessment"]) .site-header .main-nav{
    display:none!important;
  }

  /* Focused learning screens still need top navigation: make every item fully
     reachable with touch scrolling and protect the first/last item from edge clipping. */
  body[data-route="lab"] .site-header .main-nav,
  body[data-route="robot"] .site-header .main-nav,
  body[data-route="assessment"] .site-header .main-nav{
    width:calc(100% + max(24px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    max-width:none;
    margin-left:calc(-1 * max(12px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(12px, env(safe-area-inset-right)));
    padding:7px max(14px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left));
    gap:6px;
    border-top:1px solid rgba(255,255,255,.18);
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:max(14px, env(safe-area-inset-left));
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  body[data-route="lab"] .site-header .main-nav::-webkit-scrollbar,
  body[data-route="robot"] .site-header .main-nav::-webkit-scrollbar,
  body[data-route="assessment"] .site-header .main-nav::-webkit-scrollbar{display:none}

  body[data-route="lab"] .site-header .main-nav a,
  body[data-route="robot"] .site-header .main-nav a,
  body[data-route="assessment"] .site-header .main-nav a{
    flex:0 0 auto!important;
    min-height:40px;
    padding:7px 12px;
    font-size:.82rem;
    scroll-snap-align:start;
  }

  /* Keep the fixed mobile nav inside safe areas and away from browser edges. */
  .mobile-bottom-nav{
    left:max(8px, env(safe-area-inset-left));
    right:max(8px, env(safe-area-inset-right));
    bottom:max(8px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px){
  .site-header{
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
  }
  .site-brand-new{min-width:52px}
  .site-brand-new .brand-logo-new{width:54px;max-height:46px}
  .header-right{gap:6px}
  .sound-button{width:40px;min-width:40px;height:40px}
  .header-right select{max-width:104px!important;min-height:40px}

  body[data-route="lab"] .site-header .main-nav a,
  body[data-route="robot"] .site-header .main-nav a,
  body[data-route="assessment"] .site-header .main-nav a{
    padding-inline:10px;
    font-size:.80rem;
  }

  .mobile-bottom-nav{
    left:max(5px, env(safe-area-inset-left));
    right:max(5px, env(safe-area-inset-right));
  }
}