/* ============================================================================
   TSC Teen Mobile - v1.0 - October 2026
   Teen Driving Online: phone layout for Register, Home (student menu) and
   Chapter view.
   ----------------------------------------------------------------------------
   WHAT THIS SHEET DOES AND DOESN'T DO
   - Layout only. It changes widths, floats, stacking and tap-target size.
     It sets NO colours, backgrounds, borders, fonts or button styles, so the
     site keeps its current look and its orange buttons exactly as they are.
   - Everything is inside media queries on Foundation 5's own breakpoints
     (small <= 40em / 640px, medium <= 64em / 1024px). Desktop is unchanged.
   - It adds no new classes. It only re-flows the ids/classes already on the
     pages (register.php, menu_page.php / menu.css, display_remake.inc /
     chapters.css).

   LOAD
   Link it LAST in <head>, after style.css. register.css is linked inside the
   page body (so it loads after this sheet); the register rules below are
   anchored on body + ids so they still win.

   REQUIRED, OR NOTHING HERE TAKES EFFECT: the header record has no viewport
   tag. Without it phones render a 980px desktop page and Foundation's own
   mobile menu never switches on. Add to <head>:
     <meta name="viewport" content="width=device-width, initial-scale=1">
   ========================================================================= */


/* ============================== SITE CHROME ============================== */
@media only screen and (max-width:40em){

  /* ORDER ON PHONES: logo bar first, then Log In / Register.
     The logo lives in #nav-container, which comes AFTER the super-nav in the
     markup, so the page's top-level blocks become a column and the logo bar
     is moved to the top. flex-shrink:0 matters: Foundation sets body
     height:100%, and without it the blocks would squash to fit the screen. */
  body{display:flex;flex-direction:column}
  body > *{flex-shrink:0;min-width:0}
  body > #nav-container{order:-1}

  /* super-nav keeps only the two buttons, side by side, equal width.
     Parents' Corner and Just for Teens stay in the footer link lists. */
  #super-nav-container #super-nav .super-nav-list{
    /* Foundation's .right is float:right !important, so take the full width
       instead of fighting the float */
    width:100%;float:none;display:flex;justify-content:center;align-items:stretch;gap:10px;
    margin:0;padding:10px 12px;max-width:100%;list-style:none;box-sizing:border-box}
  #super-nav-container #super-nav .super-nav-list li{float:none;margin:0}
  #super-nav-container #super-nav .super-nav-list li:not(#login-button):not(#register-button){display:none}
  #super-nav-container #super-nav #login-button,
  #super-nav-container #super-nav #register-button{flex:1 1 0;min-width:0}
  #super-nav-container #super-nav #login-button a,
  #super-nav-container #super-nav #register-button a{display:block;width:100%;margin:0;
    text-align:center;white-space:nowrap;box-sizing:border-box}

  /* logo has inline width:279px; height:95px. Shrink it so it and
     Foundation's menu icon fit on one line on a 360px phone. */
  #nav-container .top-bar .title-area #logo{
    width:auto!important;height:auto!important;max-width:calc(100vw - 110px);max-height:60px;
    margin:6px 0}
  #nav-container .top-bar .title-area .name h1{line-height:1}
  /* Foundation's collapsed bar is 45px with overflow hidden, which cut the
     bottom of the logo ("ONLINE.com"). Make the collapsed bar logo-height;
     the expanded menu still opens to its natural height. */
  #nav-container .top-bar:not(.expanded),
  #nav-container .top-bar .title-area .name{height:72px}
  #nav-container .top-bar .title-area .name h1,
  #nav-container .top-bar .title-area .name h1 a{height:72px;display:flex;align-items:center}

  /* footer: Foundation stacks the columns; keep long lines inside */
  #footer_container #footer{overflow-wrap:anywhere}
  #footer_container #footer img{max-width:100%;height:auto}
}


/* =============================== REGISTER =============================== */
@media only screen and (max-width:40em){

  body #registration_left_panel,
  body #registration_panel,
  body #registration_container{
    float:none;clear:both;width:auto;max-width:100%;margin-left:0;margin-right:0;
    box-sizing:border-box}
  body #registration_panel{padding-left:0;padding-right:0}

  /* left panel: title, then the steps in one row */
  body #registration_left_panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;margin-bottom:16px}
  body #registration_left_panel > *{grid-column:1 / -1}
  body #registration_left_panel > br{display:none}
  body #registration_left_panel > #reg_bread,
  body #registration_left_panel > .reg_bread{grid-column:auto;width:auto;margin:0;
    min-width:0;overflow:hidden}
  body #registration_left_panel #bread_container,
  body #registration_left_panel .bread_container{white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}

  body #registration_container .registration_subdivision{width:auto;max-width:100%;
    box-sizing:border-box;margin-left:0;margin-right:0}
  body #registration_container .registration_subdivision table{width:100%}

  /* each row: label on top, field full width */
  body #registration_container .frm_row{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    width:auto;max-width:100%;height:auto;box-sizing:border-box;text-align:left}
  body #registration_container .frm_row > br{display:none}
  body #registration_container .frm_row label.form{
    float:none;display:block;flex:0 0 100%;width:auto;margin:0;text-align:left}
  body #registration_container .frm_row .desc{flex:0 0 100%}

  /* 16px on fields stops iPhones zooming in on focus; 44px is the tap
     target. Colours and borders are left to the site's own sheets. */
  body #registration_container .frm_row .contact_field{
    flex:1 1 100%;width:100%;max-width:100%;height:auto;min-height:44px;margin:0;
    font-size:16px;box-sizing:border-box}
  body #registration_container .frm_row select{
    flex:1 1 0;min-width:0;width:auto;max-width:100%;min-height:44px;margin:0;
    font-size:16px;box-sizing:border-box}
  body #registration_container .frm_row select:only-of-type{flex-basis:100%}

  /* "Check here if under 18" sits on its own line under the DOB selects */
  body #registration_container .frm_row label.form input[type="checkbox"]{
    width:22px;height:22px;margin:0 0 0 6px;vertical-align:middle}
  body #registration_container input[type="radio"]{width:20px;height:20px;vertical-align:middle}

  /* "Other (please specify)" */
  body #registration_container #refer{flex:0 0 100%;max-width:100%}
  body #registration_container #refer input{display:block;width:100%;max-width:100%;
    min-height:44px;margin:6px 0 0;font-size:16px;box-sizing:border-box}

  /* Next button: style untouched, only kept inside the screen */
  body #registration_container .button,
  body #registration_container input[type="submit"]{max-width:100%;box-sizing:border-box}
}
@media only screen and (max-width:23.75em){ /* 380px: month gets its own line */
  body #registration_container .frm_row select[name="dobMonth"]{flex-basis:100%}
}


/* ======================= HOME / STUDENT MENU (home.php) ======================= */
@media only screen and (max-width:40em){

  #menu_container,#menu_header,#change_reg{width:auto;max-width:100%;box-sizing:border-box}
  #menu_header{min-height:0}

  /* stoplight menu (red/yellow/green) and profile box stack */
  #menu_header #stoplight_container,
  #menu_header #profile_container{float:none;width:auto;height:auto;max-width:100%;
    box-sizing:border-box}
  #menu_header #profile_container{margin-top:10px}
  #red_light,#yellow_light,#green_light{width:auto;max-width:100%}

  /* chapter/status table: scroll sideways inside itself, never the page */
  #menu_table,#menu_container table{display:block;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  #prog_bar,#prog_bar img{max-width:100%}
}

/* chapter-review pop-up and the notice box are positioned for an ~890px
   desktop window (left:50% with a fixed negative margin) */
@media only screen and (max-width:64em){
  #chapreview{left:8px;right:8px;width:auto;margin-left:0;height:80vh;max-width:none}
  #chapreview iframe{width:100%;height:calc(100% - 21px);box-sizing:border-box}
  #reviewbar{width:auto;box-sizing:border-box}
  #notice{left:8px;right:8px;margin-left:0;max-width:none;box-sizing:border-box}
}


/* ========================= CHAPTER VIEW (show.php) ========================= */
@media only screen and (max-width:40em){

  #content_container,#template_container,#course_content,#content_chapter_container{
    max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
  #course_content,#content_chapter_container{padding-left:6px;padding-right:6px}

  /* images and media fit the screen */
  #course_content img{max-width:100%;height:auto}
  #course_content iframe,#course_content video,
  #course_content embed,#course_content object{max-width:100%}
  #course_content video{height:auto}
  /* video embeds keep 16:9 instead of their fixed pixel height */
  #course_content iframe[src*="youtube"],#course_content iframe[src*="youtu.be"],
  #course_content iframe[src*="vimeo"]{width:100%;height:auto;aspect-ratio:16 / 9}

  /* floated images drop above their text instead of squeezing it */
  #course_content .img_lt,#course_content .img_rt,
  #course_content .left,#course_content .right,
  #course_content .img_l,#course_content .img_r{
    float:none;display:block;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}

  /* tables keep their layout and scroll inside themselves */
  #course_content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overflow-wrap:normal}

  /* fixed-width boxes from chapters.css */
  .chapter_title{width:auto;max-width:100%;height:auto;min-height:40px;box-sizing:border-box}
  div#transcript1,div#transcript2,div#transcript3,
  div#transcript4,div#transcript5,div#transcript6{width:auto;max-width:100%;box-sizing:border-box}
  .one_liners,.insurance_claims,.real_jokes{float:none;width:auto;max-width:100%;box-sizing:border-box}
  div.joke_container{width:auto;max-width:100%;margin-left:0;margin-right:0}
  .movie_container,.movie_label,.movie_sub{width:auto;max-width:100%}
  .joke_guy,.joke_image,.trivia_image,.smiley_face{float:none}
  .joke_time{margin-left:0;width:auto}
  #course_content ul,#course_content ol{margin-left:22px}

  /* bottom dock (back / next links) */
  html>body #dock{width:auto;height:auto;padding:6px 10px;overflow:hidden;box-sizing:border-box}
  .dock_content{width:auto;float:none;padding:4px 0}
  .dock_content a{display:inline-block;min-height:44px;line-height:44px;margin:0 15px 0 0}

  /* quiz answers: bigger radio targets */
  #course_content .answer input[type="radio"],
  .answer input[type="radio"]{width:20px;height:20px;vertical-align:middle}
}


/* ============================ LOGIN (login.php) ============================
   The login page sets #login_panel to a fixed 350px (with a 350x250
   background image) and its inputs to 240px, which runs ~20px off a 360px
   phone. Below 400px the panel shrinks to the screen and its background
   scales with it. Colours and the Log In button are untouched.
   ========================================================================= */
@media only screen and (max-width:25em){
  #login_container{margin-top:20px}
  #login_container #login_panel{width:100%;max-width:350px;height:auto;min-height:250px;
    padding-bottom:16px;background-size:100% 100%;box-sizing:border-box}
  /* inputs are 70% wide and centred, so labels start 15% in to line up */
  #login_container #login_panel .label{padding-left:15%}
  #login_container #login_panel .login_form{width:70%;max-width:240px;margin:0 auto 10px;font-size:16px;min-height:44px;
    box-sizing:border-box}
  /* sized to its label: short and wide, not a tall square */
  #login_container #login_panel input[type="submit"]{min-height:0;height:auto;width:auto;
    padding:8px 22px;line-height:1.2}
}