/* mobile.css, Claude, 27 September 2026 (Azmat, 27 Sept: "make the top pages render on a mobile better, don't break the desktop").
   Every rule sits inside a max-width media query, so nothing here can touch a desktop or a tablet in landscape.
   Loaded after style.css by one line in views/theme/general/master.php (see the README).
   Tested by injection at 375 x 812 on the home page, agency-membership, personal-certification, star,
   recruiter-certification, employment-rights-hub, a hub guide, latest-news, a news item, blogs, reports,
   certified, verify, split-fee, contact, recruiter-support. */

@media (max-width: 767.98px) {

  /* 1. The cookie notice. On a phone the dark-top bar covered the logo and the menu button on every page until it
        was dismissed. It now sits at the foot of the screen, one line high, and the page starts at the top. */
  .cc_banner-wrapper .cc_container.cc_banner {
    top: auto !important;
    bottom: 0 !important;
    padding: 10px 12px !important;
  }
  .cc_banner-wrapper .cc_container .cc_message {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 90px 0 0 !important;
  }
  .cc_banner-wrapper .cc_container .cc_btn {
    font-size: 12px !important;
    padding: 6px 10px !important;
    right: 12px !important;
    top: 8px !important;
    bottom: auto !important;
  }
  body { padding-top: 0 !important; }

  /* 2. The page-title band. A three-line uppercase title at 32px pushed the first paragraph off the first screen. */
  .page-title { min-height: 0 !important; padding: 22px 0 !important; }
  .page-title-heading { font-size: 24px !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
  .page-title-sub-heading { font-size: 17px !important; line-height: 1.35 !important; margin-top: 8px !important; }
  .page-title-heading .sfn-beta { font-size: 11px !important; vertical-align: middle !important; }

  /* 3. The members directory (ior.org/certified). Its two tables were 776px wide, so a phone zoomed the whole page
        out to fit them. Each row now stacks as a block: name, then the other cells beneath it. */
  .bior-certified table, .bior-certified tbody, .bior-certified tr, .bior-certified td { display: block !important; width: 100% !important; }
  .bior-certified thead { display: none !important; }
  .bior-certified tr { padding: 10px 0 !important; border-bottom: 1px solid #e3e3e3 !important; }
  .bior-certified td { padding: 2px 0 !important; border: 0 !important; white-space: normal !important; }
  .bior-certified td:first-child { font-size: 16px !important; padding-bottom: 4px !important; }
  .bior-certified form { flex-wrap: wrap !important; }
  .bior-certified form input[type="text"] { flex: 1 1 100% !important; margin-bottom: 8px !important; }
  .bior-certified nav a { display: inline-block !important; margin: 0 6px 6px 0 !important; }
  .bior-certified section, .bior-certified { padding-left: 4px !important; padding-right: 4px !important; }

  /* 4. Anything in a Page Builder page that is wider than a phone: pictures, embedded videos, tables. */
  .container.page img, .container.page iframe, .container.page video { max-width: 100% !important; height: auto !important; }
  .container.page table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .container.page iframe[src*="youtube"] { aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; }

  /* 5. Buttons that fit their words instead of clipping them. */
  .container.page .btn, .container.page .btn-bior { white-space: normal !important; line-height: 1.3 !important; }

  /* 6. The footer. The four columns already stack; this tightens the long Useful links list and the sign-up form. */
  footer .widget-list li, footer ul li { padding: 4px 0 !important; }
  footer .widget-title { margin-top: 18px !important; }
  footer form .input-group, footer form .form-control { width: 100% !important; }
}

/* Small tablets in portrait keep the desktop look with one change: the page-title band is shorter. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-title { min-height: 0 !important; padding: 28px 0 !important; }
  .page-title-heading { font-size: 30px !important; }
}