/* Mobile-friendly overrides for Britsoft site
   Scoped to small screens only — desktop (>960px) keeps the original layout. */

.nav-toggle { display: none; }

/* paragraph gap spacer used inside page text */
.kp-gap { display: block; height: 22px; }

/* smaller logo */
.header_left img { height: 45px; width: auto; }

/* spread menu items evenly across the bar */
#nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
#nav ul li { float: none; margin-right: 0; }

@media (max-width: 960px) {

  /* hamburger button: pinned top-right of the header, opposite the logo */
  .nav-toggle {
    display: block;
    position: absolute;
    right: 10px;
    top: 12px;
    z-index: 5;
    background: none;
    border: 1px solid rgba(26,92,179,.45);
    border-radius: 4px;
    padding: 7px 9px;
    margin: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 3px;
    background: #1a5cb3;
    border-radius: 2px;
    margin: 4px 0;
  }
  #nav ul { display: none; }
  #nav.nav-open ul { display: block; padding-bottom: 6px; }

  img, video, iframe { max-width: 100%; height: auto; }

  body { font-size: 14px; }

  /* fluid page wrappers */
  #outer_wrap, .foot_wrap { width: 100%; max-width: 900px; box-sizing: border-box; }
  #outer_wrap { padding: 0 10px; }

  /* header: logo left, hamburger right (button is absolutely positioned), email below */
  .header_left, .ad_holder, .header_right {
    float: none; width: auto; margin: 8px auto; text-align: center; overflow: visible;
  }
  .header_left { float: left; text-align: left; margin: 8px 0 4px 12px; }
  .header_left img { margin: 0; max-height: 52px; }
  .header_right { clear: both; }

  /* nav: fluid bar, wraps the floated button, items wrap instead of overflowing */
  #nav { height: auto; background-color: #1a5cb3; background-image: none; overflow: hidden; }
  #nav ul li { float: left; margin-right: 0; }

  /* content columns stack */
  .new_left, .new_left1, .new_right { float: none; width: 100%; }
  .new_content { width: 100%; box-sizing: border-box; padding: 0 12px; }
  .main_contain { padding: 12px; }

  /* keep legacy fixed-width tables inside the fluid column */
  .new_content table { width: 100% !important; table-layout: fixed; }
  .new_content table td, .new_content table th { overflow-wrap: break-word; word-wrap: break-word; }

  /* fixed-width title block becomes fluid */
  .hdtitle2 { width: auto; box-sizing: border-box; }

  /* heading box: fluid so long titles don't run off-screen */
  .headingbox { width: 100% !important; float: none; box-sizing: border-box; }
  .headingbox h2 { font-size: 20px; }

  /* blue headline bar grows with wrapped text */
  div[style*="1a5cb3"] { height: auto !important; min-height: 50px; padding: 8px 6px; box-sizing: border-box; }

  /* gallery becomes fluid */
  #gallery, #gallery ul { width: 100% !important; box-sizing: border-box; padding-left: 2px; }

  /* photo rotator centers */
  .client_box, #photoShow { margin-left: auto; margin-right: auto; }

  /* hide the floated image in the About Us text on small screens */
  img[src*="showfour"] { display: none; }

  /* CTA buttons stack and center */
  .inner > div[style] {
    float: none !important; margin: 12px auto !important; text-align: center;
  }
  .inner > div[style] img { display: inline-block; }

  /* footer columns stack */
  .footer .new_left { width: 100%; border-right: 0; }
  table.featured { width: 100% !important; }
  table.featured tbody, table.featured tr { display: block; width: 100%; }
  table.featured td { display: block; width: auto; }
  .col1, .col2, .col3 { width: auto; margin: 0 0 15px; }
  .footer_bot p#copyright { float: none; width: auto; text-align: center; }
}

@media (max-width: 600px) {
  #nav ul li { width: 50%; text-align: center; border-bottom: 1px solid rgba(255,255,255,.18); box-sizing: border-box; }
  #nav ul li a { padding-left: 4px; padding-right: 4px; }
  .hdtitle2 { font-size: 22px; padding: 10px 8px; }
  .new_content div[style*="30px"] { font-size: 21px !important; }
  .new_content div[style*="28px"] { font-size: min(20px, 4.2vw) !important; line-height: 1.4; padding: 8px 12px; white-space: nowrap; display: flex; align-items: center; min-height: 50px; box-sizing: border-box; }
  .footer_bot p#copyright { font-size: 11px; }
}