/*
  bankwindhoek.com.na: site-wide fixes, loaded LAST by the BW-CMS copy of the master page
  (_catalogs/masterpage/BW-CMS/BWHK-BWCMS.master = BWHK.master + this stylesheet). The original
  master page and BWHK.css are never edited; switching back to BWHK.master removes all of this.

  Only fixes and small refinements: the look stays the same.
  1. The page fills the screen: on a tall screen the ticker and footer sit at the bottom instead
     of leaving a white band under them.
  2. No sideways scrolling (nested Bootstrap rows inside .noclip were 15-30px too wide).
  3. Phones and tablets: a compact footer and ticker (they stacked into ~600px of loose lines).

  Page structure (BWHK.master): #s4-workspace (the scroll box SharePoint sizes to the window) >
  #s4-bodyContainer (header + the page, whose content is a floated column), div.row (ticker,
  #trdk), footer.
*/

/* ---- 1. Fill the screen ---- */
/* A flex column: each part now contains its own floats, and the free space goes above the
   ticker, so the ticker and footer end at the bottom of the window */
#s4-workspace {
  display: flex;
  flex-direction: column;
}

#s4-workspace > #s4-bodyContainer,
#s4-workspace > .row,
#s4-workspace > footer {
  flex: 0 0 auto;
  width: 100%;
}

#s4-workspace > #s4-bodyContainer {
  display: flow-root; /* holds the floated page column */
}

#s4-workspace > .row {
  margin-top: auto !important;
}

/* ---- 2. No sideways scrolling ---- */
#s4-workspace {
  overflow-x: hidden !important;
}

/* ---- 3. Phones and tablets ---- */
@media (max-width: 991px) {
  /* Ticker: one compact block instead of a figure per line */
  #trdk {
    padding: 8px 15px !important;
    text-align: center;
  }

  #trdk > div,
  #trdk #amounts > div {
    display: inline-block;
    float: none !important;
    width: auto !important;
    padding: 2px 8px !important;
  }

  #trdk #amounts {
    display: block;
    width: 100% !important;
  }

  /* Footer: two columns of links instead of six stacked blocks */
  footer .footerback {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin: 0 !important; /* the Bootstrap row's -15px pulled the text to the screen edge */
    padding: 16px 20px 20px !important;
  }

  /* The line breaks between the social icons were for the wide layout */
  footer .footerback > div:first-child br {
    display: none;
  }

  footer .footerback::before,
  footer .footerback::after {
    content: none;
  }

  footer .footerback > div {
    float: none !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 0 !important;
    text-align: left;
  }

  /* Social icons and copyright across the top: heading, icons, copyright, centred */
  footer .footerback > div:first-child {
    grid-column: 1 / -1;
    text-align: center !important;
  }

  footer .footerback > div:first-child .contactus,
  footer .footerback > div:first-child .copyright {
    display: block;
    margin: 0 0 4px;
  }

  /* Group links wrap onto a second line on phones: keep the lines together */
  footer .grouplink {
    display: inline-block;
    line-height: 1.35 !important;
    margin: 3px 0;
  }
}

/* Tablets: room for four columns of links */
@media (min-width: 600px) and (max-width: 991px) {
  footer .footerback {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 340px) {
  footer .footerback {
    grid-template-columns: 1fr;
  }
}