/* ==========================================================
   Public typography: Traditional/Simplified Chinese + engineering Latin.
   This file is scoped to MainLayout so the admin theme remains unchanged.
   ========================================================== */

:root {
    --ks-font-public: 'IBM Plex Sans Variable', 'Noto Sans HK Variable', 'Noto Sans SC Variable', 'PingFang HK', 'Microsoft JhengHei', system-ui, sans-serif;
    --ks-type-body-size: 1.0625rem;
    --ks-type-body-size-mobile: 1rem;
    --ks-type-weight-copy: 450;
    --ks-type-weight-glass: 500;
    --ks-type-weight-label: 600;
    --ks-type-weight-card: 650;
    --ks-type-weight-heading: 700;
}

.public-layout {
    font-family: var(--ks-font-public);
    font-size: var(--ks-type-body-size);
    font-weight: var(--ks-type-weight-copy);
    line-height: 1.72;
    -webkit-font-smoothing: auto;
    font-synthesis-weight: none;
}

.public-layout :where(button, input, textarea, select, option) {
    font-family: inherit;
}

.public-layout :where(.mud-button-root, .mud-nav-link, .mud-chip-root, label, input, textarea, select) {
    font-size: max(0.96875rem, 15.5px);
}

.public-layout :where(.mud-typography-body1, p, li, dd) {
    font-weight: var(--ks-type-weight-copy);
}

/* Dark glass needs slightly more stroke mass than a solid reading surface. */
.public-layout :where(
    .home-page-shell,
    .services-page,
    .projects-page,
    .news-page,
    .about-intro,
    .about-why-us,
    .about-services,
    .contact-page,
    .public-page-masthead,
    .service-detail-page,
    .project-detail-page,
    .news-detail-page
) :where(.mud-typography-body1, .mud-typography-body2, p, li, dd) {
    font-weight: var(--ks-type-weight-glass) !important;
}

.public-layout .home-page-shell :where(.service-item, .item-text) {
    font-weight: var(--ks-type-weight-glass) !important;
}

.public-layout :where(h1, h2, .hero-title, .section-title, .about-section-title, .contact-section-title, .cta-title) {
    font-weight: var(--ks-type-weight-heading) !important;
}

.public-layout :where(h3, h4, h5, h6, .card-title, .item-title, .project-title, .news-title, .gallery-card-title) {
    font-weight: var(--ks-type-weight-card) !important;
}

.public-layout :where(
    .mud-button-label,
    .mud-nav-link,
    .mud-chip-content,
    label,
    .meta-label,
    .info-label,
    .service-title,
    .item-label
) {
    font-weight: var(--ks-type-weight-label) !important;
}

.public-layout :where(.mud-typography-caption, .caption, .meta-label, .info-label) {
    font-size: max(0.90625rem, 14.5px) !important;
    font-weight: var(--ks-type-weight-glass) !important;
    line-height: 1.45;
}

.public-layout .mud-typography-body1 {
    font-size: var(--ks-type-body-size);
    line-height: 1.72;
}

.public-layout .mud-typography-body2 {
    font-size: max(0.96875rem, 15.5px) !important;
    font-weight: var(--ks-type-weight-glass) !important;
    line-height: 1.65;
}

.public-layout :where(.gallery-card-title, .gallery-card .project-title) {
    font-size: clamp(1rem, 1.2vw, 1.0625rem) !important;
    line-height: 1.35 !important;
}

.public-layout :where(.gallery-card-subtitle, .gallery-card-date, .gallery-card-badge) {
    font-size: max(0.90625rem, 14.5px) !important;
    font-weight: var(--ks-type-weight-glass) !important;
    line-height: 1.4;
}

.public-layout .services-page .service-chip,
.public-layout .services-page .service-chip .mud-chip-content {
    font-weight: var(--ks-type-weight-label) !important;
}

.public-layout .services-page :where(.detail-actions, .item-content) :where(.mud-button-root, .mud-button-label) {
    font-size: max(0.90625rem, 14.5px) !important;
}

.public-layout .gallery-card-overlay {
    background: linear-gradient(
        to top,
        rgba(3, 13, 20, 0.94) 0%,
        rgba(4, 18, 28, 0.72) 30%,
        rgba(4, 18, 28, 0.28) 58%,
        transparent 78%
    );
}

.public-layout .copyright {
    font-size: 0.78125rem !important;
    font-weight: var(--ks-type-weight-copy) !important;
    line-height: 1.4;
}

.public-layout .recaptcha-notice {
    font-size: 0.71875rem !important;
    font-weight: var(--ks-type-weight-copy) !important;
    line-height: 1.4;
}

html:lang(zh-HK) .public-layout :is(h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .card-title, .item-title) {
    letter-spacing: -0.01em !important;
}

html:lang(zh-HK) .public-layout :where(p, li, dd, label, button) {
    letter-spacing: 0;
}

html:lang(zh-CN) .public-layout {
    --ks-font-public: 'IBM Plex Sans Variable', 'Noto Sans SC Variable', 'Noto Sans HK Variable', 'Microsoft YaHei', system-ui, sans-serif;
    font-family: 'IBM Plex Sans Variable', 'Noto Sans SC Variable', 'Noto Sans HK Variable', 'Microsoft YaHei', system-ui, sans-serif;
}

html:lang(zh-CN) .public-layout :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, a, button, input, textarea, select, option, small, strong, span, .mud-typography):not(.fa):not([class*="fa-"]):not(.mud-icon-root) {
    font-family: var(--ks-font-public) !important;
}

html:lang(zh-CN) .public-layout :is(h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .card-title, .item-title) {
    letter-spacing: -0.01em !important;
}

html:lang(zh-CN) .public-layout :where(p, li, dd, label, button) {
    letter-spacing: 0;
}

html:lang(en) .public-layout :where(.meta-label, .info-label, .mud-chip-content, .service-title, .item-label) {
    letter-spacing: 0.03em;
}

@media (max-width: 959.95px) {
    .public-layout {
        font-size: var(--ks-type-body-size-mobile);
        line-height: 1.68;
    }

    .public-layout .mud-typography-body1 {
        font-size: var(--ks-type-body-size-mobile);
        line-height: 1.68;
    }

    .public-layout :where(.mud-button-root, .mud-nav-link, .mud-chip-root, label, input, textarea, select) {
        font-size: max(0.9375rem, 15px);
    }
}