/*
 *
 * CityUHK SDG Report Website
 * ----------------------------
 * Site Specific CSS
 *
 * Ported to cityu-template-3
 *
 */

/* ==================== General ==================== */

.cityu-header {
    background-color: white !important;
}
html {
    overflow-x: clip !important;
    margin: 0 !important;
    padding: 0 !important;
}
body {
    background: transparent !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cityu {
    background: transparent !important;
    background-color: transparent !important;
    overflow-x: clip !important;
}
.cityu-main {
    min-height: auto !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
}
.cityu-main-inner {
    background: transparent !important;
    background-color: transparent !important;
}
.section-wrap:not(.section-dark) {
    background: transparent !important;
    background-color: transparent !important;
}
.section-wrap:not(.section-dark) > .section-content {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==================== /General ==================== */

/* ==================== SDG Dropdown Menu (single column) ==================== */

.sdg-dropdown .dropdown-menu.sdg-dropdown-menu {
    min-width: 480px !important;
}
.sdg-dropdown-menu > li {
    width: 100%;
}
/* Desktop: cap the dropdown to the viewport and scroll the overflow.
   (In the mobile offcanvas the whole panel already scrolls, so no cap.) */
@media (min-width: 1200px) {
    .sdg-dropdown .dropdown-menu.sdg-dropdown-menu {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* ==================== /SDG Dropdown Menu ==================== */

/* ==================== Brand & Utilities ==================== */

:root {
    --CityUHK-Black: rgba(35, 31, 32, 1);
    --CityUHK-Red: rgba(176, 17, 23, 1);
    --CityUHK-Orange: rgba(225, 117, 65, 1);
    --CityUHK-gradient: linear-gradient(90deg, rgba(223,116,51,1) 0%, rgba(218,86,43,1) 38%, rgba(204,16,60,1) 73%, rgba(166,33,86,1) 100%);
}
.text-color-CityUHK-Black { color: var(--CityUHK-Black) !important; }
.text-color-CityUHK-Red { color: var(--CityUHK-Red) !important; }
.text-color-CityUHK-Orange { color: var(--CityUHK-Orange) !important; }

.cityu h3 { font-size: 28px !important; }
.ciro-letter-space-2 { letter-spacing: 2px !important; }
.ciro-letter-space-4 { letter-spacing: 4px !important; }
.ciro-nowrap { white-space: nowrap !important; }
.text-source { font-size: .75rem !important; }

.cityu .image-banner-wrap { aspect-ratio: 1920/980 !important; }
.cityuhk-video-box-banner video { width: 100%; }
.cityuhk-video-box video { width: 100%; }

/* ==================== /Brand & Utilities ==================== */

/* ==================== Footer (match CIRO/red template) ==================== */

.cityu-footer-bottom-inner {
    justify-content: space-between !important;
}
.cityu-footer-media {
    display: flex;
    flex-grow: unset !important;
    list-style-type: none;
    column-gap: 1rem !important;
    margin: 10px 10px 10px 0 !important;
}
.cityu-footer-copyright {
    line-height: 20px !important;
    color: #aaaaaa !important;
    margin-bottom: 50px !important;
}

@media (max-width: 575.98px) {
    .cityu-footer-links {
        letter-spacing: -1px !important;
        margin-right: 0 !important;
        line-height: 1 !important;
    }
    .cityu-footer-links li a::after {
        display: none !important;
    }
    .cityu-footer-logo {
        display: block !important;
        width: 100% !important;
    }
    .cityu-footer-logo img {
        width: 130px !important;
        height: unset !important;
        float: right !important;
    }
}

/* ==================== /Footer ==================== */

/* ==================== Print ==================== */

@media print {
    .SDG-title img {
        height: 200px !important;
    }
}

/* ==================== /Print ==================== */

/* ==================== Non-sticky menu ==================== */
/* On mobile, cityu.base.css makes .cityu-menu a fixed 64x64 box pinned to
   the viewport's top-right (position: fixed), holding the hamburger
   toggler. Swap fixed for absolute: same top-right spot over the header,
   same 64x64 geometry, but anchored to the document so it scrolls away
   with the page. Desktop (>=1200px) is left untouched. */
@media (max-width: 1199px) {
  .cityu-menu.sticky-top {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
  }
}
/* ==================== /Non-sticky menu ==================== */