/* mobile-fixes.css - phone layout fixes for the old collager.ai template (16.10.2026).
   Loaded LAST on index.php and via linksbeforeheader.php (signup, login, forgot, privacy, terms...).
   Found by mobile-check in a clean profile: hero CTA cut off ("MAKE COLLAGE FOR FR"), sign-up/login table wider
   than the screen (labels and the header "Log in" button cut off on the left). Rules only for narrow screens. */

@media (max-width: 480px) {
  /* hero / CTA buttons: allow wrapping, keep inside the screen */
  .button.button-xlarge {
    white-space: normal !important;
    max-width: calc(100vw - 32px);
    height: auto !important;
    line-height: 1.3 !important;
    padding: 12px 20px !important;
    font-size: 18px !important;
    box-sizing: border-box;
  }

  /* sign-up / login / forgot form: label above field, one column */
  form.submitform { margin: 0 !important; }
  form.submitform > table,
  form.submitform > table > tbody,
  form.submitform > table > tbody > tr,
  form.submitform > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  form.submitform > table { float: none !important; border-spacing: 0; }
  form.submitform > table > tbody > tr > td {
    text-align: left !important;
    padding: 2px 16px !important;
  }
  form.submitform > table > tbody > tr > td:empty { display: none !important; }
  form.submitform input.text1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  form.submitform td.password-toggle { position: relative; }
  form.submitform #validEmail { display: none; }
  form.submitform h1 { font-size: 30px !important; line-height: 1.15 !important; margin-left: 0 !important; }
  form.submitform p { margin-left: 0 !important; }

  /* header of the logged-out pages: "Log in" + "Sign up" + arrow in one row did not fit */
  #main-nav2, #main-menu2 { max-width: 100%; }
  #main-menu2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0; margin: 0; }
  #main-menu2 > li { float: none !important; }
  #main-menu2 > li:nth-child(4), #main-menu2 > li:nth-child(5) { display: none !important; }   /* arrow "for new users" */

  .wrapper, .row-fluid { max-width: 100%; box-sizing: border-box; }
  footer, #footer { max-width: 100%; box-sizing: border-box; }
}

/* ---- cabinet (logged in), 16.10.2026: found with mobile-check --logged-in, tried on the live page before deploy ---- */
@media (max-width: 600px) {
  /* cabinet (index.php, logged in): project body and task rows are fixed-layout tables with px columns (165+100+20+200+...),
     on a phone the right half was cut off. Rows wrap cell by cell instead. */
  .collage-body table.table,
  .collage-body table.table > tbody { display: block !important; width: 100% !important; table-layout: auto !important; }
  .collage-body table.table > tbody > tr,
  .collage-body table.table > tr { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; }
  .collage-body table.table td { display: block !important; width: auto !important; max-width: 100%; box-sizing: border-box; padding: 6px !important; }
  .collage-body table.table td:empty { display: none !important; }
  .flx-wrapper, .wrapper { overflow-x: hidden; }   /* 4 px of margins only - no content beyond the screen */
  .collage-body img { max-width: 100% !important; height: auto !important; }
}

/* ---- landing header on privacy/terms for a LOGGED-IN user, 16.10.2026 ----
   Logged in, these pages also load the cabinet styles (linksbeforeheader.php), which show #primary-menu > ul
   expanded on a phone: white items over the text, page 391 px at 360. Restore the theme's mobile behaviour:
   the list is hidden until the hamburger (#primary-menu-trigger) adds .show. */
@media (max-width: 991px) {
  body.device-sm #primary-menu > ul:not(.show),
  body.device-xs #primary-menu > ul:not(.show),
  body.device-xxs #primary-menu > ul:not(.show) { display: none !important; }
  body.device-sm #primary-menu-trigger,
  body.device-xs #primary-menu-trigger,
  body.device-xxs #primary-menu-trigger { display: flex !important; opacity: 1 !important; }
  #primary-menu > ul.show { max-width: 100%; box-sizing: border-box; }
  /* only where the cabinet styles sit on top of the landing theme (privacy/terms logged in): logo under the hamburger */
  html:has(link[href*="/css_internal/bootstrap.css"]) #header-wrap #logo { margin-left: 56px !important; }
  /* footer: e-mail links carry margin-right 80px inline - stretched the page by ~30 px; stack the two halves */
  #copyrights .col_half { width: 100% !important; float: none !important; margin-right: 0 !important; text-align: center !important; }
  #copyrights .col_half a { margin-right: 0 !important; }
}