/* ========================================
   HIDE ALL ORGANISATION LOGO VARIATIONS
   ======================================== */

/* Hide original logos */
.rounded-full.bg-white.md\:border-4 {
    display: none !important;
}

.col-span-3.-mb-4.ml-auto.sm\:col-span-2.sm\:col-start-1.sm\:mb-0 {
    display: none !important;
}

a.absolute.top-4.rounded-full.bg-white.shadow-2xl,
a.absolute.top-4.m-1.rounded-full.bg-white.shadow-2xl {
    display: none !important;
}

div[class*="logo"] img[src*="avatar-500x500-2a09a581-0ab9-4824-bd4a-bfd0615960c1"] {
    display: none !important;
}

div.rounded-full.bg-white.p-1.shrink-0,
div.rounded-full.bg-white.p-1.md\:absolute.md\:top-2.shrink-0 {
    display: none !important;
}

/* Hide article page logo */
span.logo-link {
    display: none !important;
}

img.rounded-circle,
img.rounded-full[src*="avatar-500x500"] {
    display: none !important;
}

/* ========================================
   HIDE ELEMENTS
   ======================================== */
.relative.flex.justify-center.px-4.py-2.font-medium.text-slate-300 {
    display: none !important;
}

.back-band {
    display: none !important;
}

/* ========================================
   BACKGROUND COLOURS
   ======================================== */

/* Body background is white */
body.hct-publication,
body.hct-article {
    background-color: white !important;
}

/* Top sections have brand colour background */
#nav-menu-container,
.brand-banner-container {
    background-color: #28366a !important;
}

/* Keep brand banner container transparent */
.brand-banner-container .container-xl {
    background-color: transparent !important;
}

/* Article content area white */
.brand-banner-container ~ .container-xl {
    background-color: white !important;
}

/* ========================================
   ADD SPACING AFTER BRAND BANNER
   ======================================== */
.brand-banner-container {
    margin-bottom: 2rem !important;
}

/* ========================================
   ADD BANNER AT TOP OF PAGE
   ======================================== */
body.hct-publication::before,
body.hct-article::before {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background-image: url('https://hail-internal.s3.amazonaws.com/hail-custom-blocks/tahatu/3.png');
    background-size: 100% auto;
    background-position: centre top;
    background-repeat: no-repeat;
    background-color: #28366a;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

/* Push content down for banner */
body.hct-publication,
body.hct-article {
    padding-top: 200px !important;
}

/* ========================================
   RESPONSIVE HEIGHT ADJUSTMENTS
   ======================================== */
@media (max-width: 639px) {
    body.hct-publication::before,
    body.hct-article::before {
        height: 100px;
    }
    body.hct-publication,
    body.hct-article {
        padding-top: 100px !important;
    }
    .brand-banner-container {
        margin-bottom: 1rem !important;
    }
}

@media (min-width: 640px) and (max-width: 768px) {
    body.hct-publication::before,
    body.hct-article::before {
        height: 120px;
    }
    body.hct-publication,
    body.hct-article {
        padding-top: 120px !important;
    }
    .brand-banner-container {
        margin-bottom: 1.5rem !important;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    body.hct-publication::before,
    body.hct-article::before {
        height: 140px;
    }
    body.hct-publication,
    body.hct-article {
        padding-top: 140px !important;
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    body.hct-publication::before,
    body.hct-article::before {
        height: 160px;
    }
    body.hct-publication,
    body.hct-article {
        padding-top: 160px !important;
    }
}

@media (min-width: 1025px) {
    body.hct-publication::before,
    body.hct-article::before {
        height: 200px;
    }
    body.hct-publication,
    body.hct-article {
        padding-top: 200px !important;
    }
}