/* ============================================================
   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.
     PART 6  October 2026 fixes: side margins, homepage news and
             events, loading overlay, footer, booking box.
     PART 7  All screen sizes: partner carousel on load.
   All breakpoints are screen-only so printing uses the desktop
   layout (fixes the Client Record print problem).
   Deploy: load LAST in the template, after ICBMain and
   csDefault, so it wins equal-specificity ties.
   ============================================================ */


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

/* border-box applies on mobile screens only. The desktop layout was
   built with the browser default, and switching it site-wide shrank
   every fixed-height box (shop titles, Forum tab, events panel). */
@media screen and (max-width: 768px) {
  *,
  *::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%;
}

/* Stop sideways scrolling. "clip" does this without turning the
   page into a scrolling box; "hidden" did, and because ICBMain sets
   html and body to 100% height, the page became one screen tall and
   printing only showed the visible part. */
html,
body {
  overflow-x: clip;
}

/* Printing: always let the page run its full length. */
@media print {
  html,
  body,
  #body-inner,
  #container {
    height: auto !important;
    overflow: visible !important;
  }
}


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

#container {
  max-width: 100%;
}

@media screen and (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 screen and (max-width: 768px) {

  /* The "Menu" button, in ICB red. */
  .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: #c83238;
    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 screen and (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 screen and (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;
  }
}


/* ===== PART 6: OCTOBER 2026 FIXES ========================== */

@media screen and (max-width: 768px) {

  /* Side margins so text doesn't run to the screen edge. */
  #container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Loading overlay. Sodalis shows a full-page overlay while the
     homepage widgets load, and it swallowed taps on the Menu button
     until loading finished. Let taps pass straight through it. */
  .overlay-container,
  .overlay-image {
    pointer-events: none !important;
  }

  /* Homepage news / forum tabs. The desktop panel has fixed
     heights and absolutely positioned tab content; on a phone
     the rows need to size to their text. */
  #tab-boxes,
  #news-container .tab-content-news-rows,
  #news-container .tab-content-forum-rows {
    height: auto !important;
  }
  #tab-boxes div.tab-content {
    position: static !important;
    padding: 0 12px !important;
  }
  .news-row,
  .news-row a,
  .news-row a:visited {
    height: auto !important;
  }
  .news-row > a {
    padding: 12px 0 !important;
  }
  .news-row-date h4,
  .news-row-date span {
    padding: 0 !important;
    white-space: nowrap;
  }
  #tab-navigation li {
    width: 49% !important;
  }

  /* Homepage Upcoming Events panel. */
  #latest-tweets-container,
  #latest-tweets-inner,
  #latest-tweets-rows {
    width: 100% !important;
    height: auto !important;
  }
  #latest-tweets-container {
    margin-top: 24px;
  }
  #latest-tweets-container .top-border {
    width: 100% !important;
  }
  #latest-tweets-inner {
    padding: 12px 16px 16px !important;
  }
  #divHomeEvents {
    max-height: none;
  }
  /* Social links: "Social Media" on its own line, then the three
     links in one row underneath. */
  #latest-tweets-social ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
  }
  #latest-tweets-social ul li,
  #latest-tweets-social ul li.title {
    float: none !important;
    padding: 0 !important;
  }
  #latest-tweets-social ul li.title {
    flex: 0 0 100%;
  }

  /* Footer: side margins to match the page. */
  #footer-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Event and shop booking box. The custom radio buttons and
     ticks have a fixed width that includes room for the circle
     image, so on a phone only a sliver was left for "Yes"/"No".
     Measure them the original way. */
  input[type="radio"].replace + label,
  input[type="checkbox"].replace + label {
    box-sizing: content-box !important;
    width: auto !important;
    margin-right: 20px;
  }
  /* Quantity and Price rows: label left, value right, and no
     fixed heights or widths, so "Members only" stays whole. */
  .buy-options dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .buy-options dl dt,
  .buy-options dl dd {
    float: none !important;
    width: auto !important;
    height: auto !important;
  }
  .buy-options dl dd {
    text-align: right;
    overflow-wrap: normal;
  }
  .special-requirements textarea {
    width: 100%;
  }
}


/* ===== PART 7: ALL SCREEN SIZES ============================ */

/* Partner logo carousel: keep the logos hidden until the carousel
   script has arranged them, so visitors never see the unarranged
   row. The box keeps its size, so nothing below moves. */
#companies-carousel {
  visibility: hidden;
}
.caroufredsel_wrapper > #companies-carousel {
  visibility: visible;
}