/* ============================================================
   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, search,
             homepage feed, news date.
     PART 5  Footer.
   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 =========================== */

.icb-menu-toggle,
.icb-submenu-toggle {
  display: none;
}

@media (max-width: 768px) {

  /* The "Menu" button. 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";
    font-size: 1.25rem;
    line-height: 1;
  }
  .icb-menu-toggle[aria-expanded="true"]::before {
    content: "\2715";
  }

  #nav {
    display: none;
  }
  #nav.is-open {
    display: block;
  }

  /* HARD RESET. Neutralise the desktop bar, then re-style. */
  #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;
    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; hidden. */
  #carousel,
  #companies-carousel-container {
    display: none;
  }

  /* Google Custom Search widget. Google renders it as its own
     nested table with inline styles it controls, so it won't fit
     a narrow header and spills over the menu bar. Hidden on
     mobile; reinstate a responsive search in the rebuild. */
  #search {
    display: none;
  }

  /* Title bars — let a wrapped heading grow instead of being
     clipped by the fixed-height bar. */
  .breadcrumb-title-container,
  #title-bar {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Homepage news / forum / tweets feed — bespoke containers off
     the .col grid. Stopgap until 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;
  }

  /* News date tile. The day sits in a bare <span> with a big
     desktop font that overflowed the row. Lay the date out as a
     small fixed tile beside the text and cap the number. */
  .news-row > a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .news-row-date {
    flex: 0 0 auto;
    width: 48px;
    text-align: center;
  }
  .news-row-date h4 {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
  }
  .news-row-date span {
    display: block;
    font-size: 1.6rem !important;   /* was desktop-huge */
    font-weight: 700;
    line-height: 1.1;
  }
  .news-row-text {
    flex: 1;
    min-width: 0;
  }
}


/* ===== PART 5: FOOTER ====================================== */

@media (max-width: 768px) {
  /* The navy is a fixed-size background IMAGE, not a colour, so
     when the stacked columns make the footer taller the image
     stays its original height and the grey shows below it.
     height:auto lets the footer grow; background-size:cover
     scales the navy image to fill it. */
  #footer,
  #footer-inner {
    height: auto !important;
    background-size: cover !important;
  }
}