/* ============================================================
   SABC header fix – load this AFTER all other stylesheets.
   Puts logo / DSIR badge / Donate on the left and the menu on
   the right, on one row, with no overlap. Works with both the
   old header markup (cell-4 + cell-9) and the new .header-flex.
   ============================================================ */

.top-head .container > .row {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: space-between; justify-content: space-between;
    -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.top-head .container > .row:before,
.top-head .container > .row:after { display: none !important; }

/* brand block (logo, DSIR, donate) */
.top-head .container > .row > .cell-4,
.top-head .container > .row > .header-brand {
    display: -webkit-flex !important; display: flex !important;
    -webkit-align-items: center; align-items: center;
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    float: none !important;
    width: auto !important;
    padding: 8px 12px !important;
    margin: 0 !important;
}
.top-head .container > .row > .cell-4 > .logo,
.top-head .container > .row > .header-brand > .logo {
    margin: 0 !important; padding: 0 !important; float: none !important;
}
.top-head .container > .row > span,
.top-head .container > .row > a { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.top-head .container > .row > span { margin-right: auto; }

/* image sizes – matched by file name so markup doesn't matter */
.top-head .container > .row img[src*="dsir"] {
    display: block; width: 60px !important; max-width: 60px !important; height: auto !important; margin: 0 0 0 12px;
}
.top-head img.donate-btn,
.top-head .container > .row img[src*="donation"] {
    display: block; width: 110px !important; max-width: 110px !important; height: auto !important; margin: 0 0 0 12px;
}
.top-head .container > .row > .cell-4 img,
.top-head .container > .row > .header-brand img,
.top-head .container > .row > span img,
.top-head .container > .row > a img { max-width: 120px; height: auto; }

/* menu */
.top-head .container > .row > .top-menu {
    float: none !important;
    -webkit-flex: 0 1 auto; flex: 0 1 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.top-head .container > .row > .top-menu .top-nav { float: none !important; }
.top-head .container > .row > .top-menu .top-nav > ul {
    display: -webkit-flex; display: flex;
    -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
}
.top-head .container > .row > .top-menu .top-nav > ul > li > a { white-space: nowrap; }

/* tablet: shrink brand images / menu padding so 8 items still fit */
@media (max-width: 1199px) and (min-width: 992px) {
    header.top-head .logo a { width: 200px !important; }
    .top-head .container > .row img[src*="dsir"] { width: 48px !important; }
    .top-head img.donate-btn,
    .top-head .container > .row img[src*="donation"] { width: 90px !important; }
    .top-head .container > .row > .top-menu .top-nav > ul > li > a { padding: 22px 6px 0 !important; }
}

/* mobile: centre the brand block; hamburger menu from script.js takes over */
@media (max-width: 991px) {
    .top-head .container > .row { -webkit-justify-content: center; justify-content: center; }
    .top-head .container > .row > .cell-4,
    .top-head .container > .row > .header-brand {
        -webkit-flex-wrap: wrap; flex-wrap: wrap;
        -webkit-justify-content: center; justify-content: center;
    }
    .top-head .container > .row > span { margin-right: 0; }
}