/* Targeted additions only. The legacy theme remains the visual source of truth. */
:root {
    --ui-primary: #147fa0;
    --ui-primary-dark: #0d6384;
    --ui-accent: #1ca9be;
    --ui-text: #30465a;
    --ui-muted: #6b7d8e;
    --ui-line: #e4edf2;
    --ui-surface-soft: #f5f9fb;
    --ui-shadow-sm: 0 8px 24px rgba(28, 68, 91, .08);
    --ui-radius: 16px;
}

/* English replacements for source diagrams that contain Chinese labels. */
.confirmed-pmtt-source {
    display: none !important;
}

.confirmed-pmtt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.confirmed-pmtt-card {
    min-height: 190px;
    padding: 24px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(28, 151, 176, .24);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(17, 74, 89, .08);
}

.confirmed-pmtt-number {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    color: #fff;
    background: #198aa5;
    border-radius: 50%;
    font-weight: 700;
    line-height: 42px;
}

.confirmed-pmtt-title {
    color: #12748b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.confirmed-pmtt-copy {
    margin-top: 12px;
    color: #596a72;
    line-height: 1.5;
}

.confirmed-pmtt-emphasis {
    margin-top: 8px;
    color: #16a7bd;
    font-weight: 700;
}

.confirmed-graphic-source-title {
    display: none;
}

.confirmed-process-title {
    margin: 20px 0;
    color: #13758c;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
}

.confirmed-method-label {
    margin-top: 12px;
    color: #13758c;
    font-weight: 600;
    line-height: 1.4;
}

.hmt-clinical-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 18px;
    margin: 20px 0 55px;
}

.hmt-clinical-card {
    min-width: 0;
    text-align: center;
}

.hmt-clinical-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
    color: #fff;
    background: #0392ad;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .03em;
}

.hmt-clinical-card h3 {
    min-height: 46px;
    margin: 0 0 10px;
    color: #10748b;
    font-size: 17px;
    line-height: 1.35;
}

.hmt-clinical-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hmt-clinical-card li {
    margin: 3px 0;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Homepage additions requested for direct mobile access. */
.home-map-visual {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border-radius: var(--ui-radius);
}

.home-map-image {
    display: block;
    width: 100%;
    height: auto;
}

.home-entry-section {
    background: #fff;
}

.home-entry-heading {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.home-entry-heading > span {
    color: var(--ui-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.home-entry-heading h2 {
    margin: 8px 0 10px;
    color: var(--ui-primary-dark);
}

.home-entry-heading p {
    margin: 0;
    color: var(--ui-muted);
}

.home-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.home-entry-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px 20px;
    color: var(--ui-text);
    background: var(--ui-surface-soft);
    border: 1px solid rgba(20, 127, 160, .11);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(18, 78, 101, .08);
}

.home-entry-card > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.home-entry-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    object-fit: contain;
}

.home-entry-card h3 {
    margin-bottom: 9px;
    color: var(--ui-primary-dark);
    font-size: 20px;
}

.home-entry-card p {
    min-height: 72px;
    margin-bottom: 14px;
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.75;
}

.home-entry-card span {
    margin-top: auto;
    color: var(--ui-primary);
    font-size: 14px;
    font-weight: 700;
}

.development-map-image,
.development-map-embed {
    display: block;
    width: 100%;
}

.history-scroll-hint {
    display: none;
}

@media (max-width: 1180px) {
    .home-entry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .hmt-clinical-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /* Animated content must remain visible when mobile browsers skip WOW initialization. */
    .wow {
        visibility: visible !important;
        animation-name: none !important;
    }

    .confirmed-pmtt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .confirmed-pmtt-card {
        min-height: 168px;
        padding: 16px 10px;
    }

    .confirmed-pmtt-title {
        font-size: 14px;
    }

    .confirmed-pmtt-copy,
    .confirmed-pmtt-emphasis,
    .confirmed-method-label {
        font-size: 12px;
    }

    .home-map-column {
        margin-bottom: 0 !important;
        padding-top: 4px;
        padding-bottom: 0;
    }

    .home-map-visual {
        height: min(88vw, 350px);
        border-radius: 15px;
    }

    .home-map-image {
        width: 112% !important;
        max-width: none !important;
        transform: translate(-5.35%, -9.5%);
    }

    .home-entry-section.padding {
        padding: 46px 0;
    }

    .home-entry-heading {
        margin-bottom: 24px;
        padding: 0 8px;
    }

    .home-entry-heading h2 {
        font-size: 27px;
        line-height: 1.35;
    }

    .home-entry-grid {
        gap: 14px;
    }

    .home-entry-card {
        padding: 20px 18px;
    }

    .home-entry-card p {
        min-height: 0;
    }

    .area-left-right .row > [class*="col-"],
    .intro .row > [class*="col-"],
    .intro2 .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .area-left-right-info-title,
    .intro-info-title,
    .intro2-info-title {
        max-width: 100%;
        margin: 4px 0 8px;
        padding: 8px 0 10px;
        font-size: 21px !important;
        line-height: 1.45;
    }

    .area-left-right-desc,
    .intro-desc,
    .intro2-desc {
        min-width: 0;
        margin-top: 8px !important;
        font-size: 15px !important;
        line-height: 1.9 !important;
        text-indent: 0 !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .page-meta {
        padding: 7px;
    }

    .page-meta > a {
        display: flex;
        min-height: 118px;
        padding: 16px 8px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .page-meta .page-meta-title h5 {
        margin: 9px 0 0;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Preserve the complete history timeline on phones and let users swipe it horizontally. */
    .section-history {
        display: block !important;
        overflow: visible;
    }

    .section-history .container {
        width: calc(100% - 20px);
        max-width: none;
        margin-right: 10px;
        margin-left: 10px;
        padding: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #dbe4e8;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 32, 56, .08);
        -webkit-overflow-scrolling: touch;
        scrollbar-color: var(--ui-primary) #edf2f4;
        scrollbar-width: thin;
    }

    .section-history .container::-webkit-scrollbar {
        height: 8px;
    }

    .section-history .container::-webkit-scrollbar-track {
        background: #edf2f4;
        border-radius: 999px;
    }

    .section-history .container::-webkit-scrollbar-thumb {
        background: var(--ui-primary);
        border-radius: 999px;
    }

    .section-history .row {
        width: 590px;
        min-width: 590px;
        margin: 0 !important;
    }

    .history-scroll-hint {
        position: sticky;
        z-index: 3;
        left: 0;
        display: block;
        width: calc(100vw - 46px);
        margin-bottom: 8px;
        padding: 5px 8px;
        color: #268EA8;
        background: #eef8fa;
        border: 1px solid #cde8ee;
        border-radius: 6px;
        font-size: 11px;
        line-height: 1.4;
        text-align: center;
        white-space: nowrap;
    }

    .history-timeline {
        display: flex !important;
        width: 590px;
        min-width: 590px;
        align-items: stretch;
    }

    .history-images {
        display: flex !important;
        flex: 0 0 136px;
        width: 136px;
        min-width: 136px;
        margin-right: 5px !important;
    }

    .history-images > div,
    .history-images > div[style] {
        width: 136px !important;
        max-width: 136px !important;
    }

    .history-line {
        display: flex !important;
        flex: 0 0 36px;
        width: 36px !important;
        min-width: 36px;
        margin: 20px 0 !important;
    }

    .history-line img {
        display: block;
        width: 36px !important;
        max-width: 36px !important;
        height: auto;
    }

    .history-images img,
    .history-images img[style] {
        display: block;
        width: 136px !important;
        max-width: 136px !important;
        height: auto;
        object-fit: contain;
        border-radius: 8px;
    }

    .history-years {
        display: flex !important;
        flex: 0 0 66px;
        width: 66px !important;
        min-width: 66px;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }

    .history-years > div {
        font-size: 14px !important;
        line-height: 1.4;
        text-align: center;
    }

    .history-descriptions {
        display: flex !important;
        flex: 0 0 330px;
        width: 330px;
        min-width: 330px;
        margin-left: 5px !important;
    }

    .history-descriptions .ptx {
        width: 100%;
        padding: 8px;
    }

    .history-descriptions .ptx p {
        font-size: 13px;
        line-height: 24px;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    #po5 .section-title-bg + img {
        width: 100%;
        height: auto;
        margin-top: 14px;
    }

    /* The desktop artwork contains very small embedded labels. Replace it on
       phones with readable cards that can flow into as many rows as needed. */
    #po5 .hmt-applications-desktop {
        display: none;
    }

    #po5 .hmt-applications-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
        margin-top: 18px;
        align-items: start;
    }

    .hmt-application-card {
        min-width: 0;
        text-align: center;
    }

    .hmt-mobile-icon {
        position: relative;
        width: 72px;
        height: 72px;
        margin: 0 auto 8px;
        overflow: hidden;
        border-radius: 50%;
        background-image: url('/uploads/20211029/HMT-en.svg');
        background-repeat: no-repeat;
        background-size: 626px 354px;
    }

    .hmt-mobile-icon-1 { background-position: -22px -1px; }
    .hmt-mobile-icon-2 { background-position: -149px -1px; }
    .hmt-mobile-icon-3 { background-position: -277px -1px; }
    .hmt-mobile-icon-4 { background-position: -404px -1px; }
    .hmt-mobile-icon-5 { background-position: -531px -1px; }
    .hmt-mobile-icon-6 { background-position: -22px -244px; }
    .hmt-mobile-icon-7 { background-position: -149px -244px; }
    .hmt-mobile-icon-8 { background-position: -277px -244px; }
    .hmt-mobile-icon-9 { background-position: -404px -244px; }

    body[data-site-language="zh-CN"] .hmt-mobile-icon {
        background-image: url('/uploads/20211029/HMT.jpg');
        background-size: 542px 338px;
    }

    body[data-site-language="zh-CN"] .hmt-mobile-icon-1 { background-position: -3px 0; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-2 { background-position: -117px 0; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-3 { background-position: -229px 0; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-4 { background-position: -340px 0; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-5 { background-position: -452px 0; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-6 { background-position: -3px -232px; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-7 { background-position: -117px -232px; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-8 { background-position: -229px -232px; }
    body[data-site-language="zh-CN"] .hmt-mobile-icon-9 { background-position: -340px -232px; }

    .hmt-application-card h3 {
        margin: 0 0 7px;
        color: #168aa5;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .hmt-application-card ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hmt-application-card li {
        margin: 0 0 3px;
        color: #5d6872;
        font-size: 12.5px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .alliance-development-layout {
        display: flex;
        margin: 0 !important;
        align-items: stretch;
    }

    .development-list-column {
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%;
        padding: 0 4px 0 0 !important;
    }

    .development-map-column {
        display: flex;
        flex: 0 0 80%;
        width: 80%;
        max-width: 80%;
        padding: 0 !important;
        align-items: center;
    }

    .development-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 0 !important;
    }

    .development-list .develop {
        width: 100%;
        height: auto !important;
        min-width: 0;
        margin: 0 !important;
        line-height: normal;
    }

    .development-list .develop span {
        display: flex;
        min-height: 26px;
        margin: 0;
        padding: 3px 2px;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: var(--ui-primary);
        border-radius: 7px;
        font-size: 11px;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
    }

    .development-map-frame,
    .development-map-frame > div {
        width: 100%;
        height: auto;
        padding: 0 !important;
        overflow: visible;
        border: 0;
    }

    .development-map-image {
        width: 130% !important;
        max-width: 130% !important;
        height: auto !important;
        object-fit: contain;
        transform: translateX(-11.538%);
    }

    .development-map-embed {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .partner {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        margin-bottom: 12px !important;
        padding: 6px;
    }

    .partner img {
        width: 100%;
        height: 112px;
        padding: 10px;
        object-fit: contain;
    }

    .pjs[style] {
        padding: 18px 4px !important;
        font-size: 15px !important;
    }

    .pjs p {
        line-height: 1.85 !important;
    }

    /* Keep the original diet page artwork, but prevent its fixed intrinsic
       width from being cropped on phones. */
    .page-main img[src="/uploads/dietaryguidance.png"] {
        width: 100%;
        max-width: 600px;
        height: auto;
    }
}

@media (min-width: 769px) {
    .hmt-applications-mobile {
        display: none;
    }
}

@media (max-width: 575px) {
    .hmt-clinical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
        margin-bottom: 36px;
    }

    .hmt-clinical-icon {
        width: 72px;
        height: 72px;
        font-size: 17px;
    }

    .hmt-clinical-card h3 {
        min-height: 40px;
        font-size: 14px;
    }

    .hmt-clinical-card li {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .home-entry-grid {
        grid-template-columns: 1fr;
    }

    .home-entry-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .home-entry-card img {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
        margin: 2px 0 0;
    }

    .home-entry-card h3 {
        font-size: 18px;
    }

    .history-years > div,
    .history-descriptions .ptx p {
        font-size: 12px !important;
    }

    .history-descriptions .ptx {
        padding: 8px;
    }
}