/* ============================================================
   ICB MOBILE — responsive retrofit layer
   ------------------------------------------------------------
   Interim layer on top of the existing CSS, before the rebuild.
     PART 1  The floor — element-level safety net.
     PART 2  The grid — fluid #container + stacked columns.
     PART 3  The navigation — mobile menu (needs the button +
             script added to the template; see handover notes).
     PART 4  Component fixes — carousels, title bars, homepage feed.
   Deploy: load LAST in the template, after ICBMain and
   csDefault, so it wins equal-specificity ties.
   ============================================================ */


/* ===== PART 1: THE FLOOR ==================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-wrap: break-word;
}

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

input,
select,
textarea,
button {
  max-width: 100%;
}

table {
  max-width: 100%;
}

html,
body {
  overflow-x: hidden;
}


/* ===== PART 2: THE GRID LAYER ============================== */

#container {
  max-width: 100%;
}

@media (max-width: 768px) {
  .col1, .col2, .col3, .col4, .col5, .col6,
  .col7, .col8, .col9, .col10, .col11, .col12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
}


/* ===== PART 3: MOBILE NAVIGATION =========================== */

/* Toggle controls hidden on desktop; hover menu untouched. */
.icb-menu-toggle,
.icb-submenu-toggle {
  display: none;
}

@media (max-width: 768px) {

  /* The "Menu" button — styled to read clearly as a button and
     stand apart from the grey account links above it.
     NOTE: #c8102e is a placeholder — set it to the official ICB
     red from your brand-red work in ICBMain. */
  .icb-menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    color: #fff;
    background: #c8102e;       /* TODO: official ICB red */
    border: 0;
    cursor: pointer;
  }
  .icb-menu-toggle::before {
    content: "\2630";          /* hamburger icon */
    font-size: 1.25rem;
    line-height: 1;
  }
  .icb-menu-toggle[aria-expanded="true"]::before {
    content: "\2715";          /* becomes an × when open */
  }

  /* Collapse the nav; the script reveals it via .is-open. */
  #nav {
    display: none;
  }
  #nav.is-open {
    display: block;
  }

  /* HARD RESET. Neutralise the desktop bar's floats, absolute
     dropdowns and fixed height, then re-style below. Mobile-only. */
  #nav,
  #nav ul,
  #nav li,
  #nav a {
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  #nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #nav > ul > li {
    position: relative !important;   /* anchor for the + button */
    display: block;
    border-bottom: 1px solid #ddd;
  }
  #nav > ul > li > a {
    display: block;
    padding: 14px 56px 14px 16px;
  }

  #nav .icb-submenu-toggle {
    display: block;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.4rem;
    line-height: 48px;
    text-align: center;
    background: transparent;
    border: 0;
    border-left: 1px solid #eee;
    cursor: pointer;
  }

  #nav ul.childMenu {
    display: none !important;
    background: #f7f7f7;
  }
  #nav > ul > li.is-open > ul.childMenu {
    display: block !important;
  }
  #nav ul.childMenu li.sub {
    display: block;
    border-top: 1px solid #eee;
  }
  #nav ul.childMenu li.sub a {
    display: block;
    padding: 12px 16px 12px 32px;
  }
  #nav ul.childMenu li.seperator {
    display: none !important;
  }
}


/* ===== PART 4: COMPONENT FIXES ============================= */

@media (max-width: 768px) {

  /* Carousels (carouFredSel). Neither reflows on a phone, so
     both are hidden. Swap for a static image if a banner must
     show on mobile. */
  #carousel,
  #companies-carousel-container {
    display: none;
  }

  /* Title bars. A long heading wraps to two lines on mobile; the
     fixed-height bar clipped it, which is why the heading sat
     under the image beneath it. Let the bar grow. */
  .breadcrumb-title-container,
  #title-bar {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Homepage news / forum / tweets feed. Bespoke containers that
     don't use the .col grid, so they don't stack on their own.
     Stopgap until they're swapped for the standard feed
     component the interior pages use. */
  #news-container,
  #tab-boxes,
  #news-container .tab-content,
  #news-row-container,
  #news-row-container .news-row,
  #icb-newsletter-signup-container,
  #latest-updates-container,
  #latest-tweets-container {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}