@charset "utf-8";

/*
 * Keep the 1920px PC layout 1:1. Only text-like elements use responsive
 * variables so they remain readable after fit-viewport scales the page down.
 */

@media (max-width: 1200px) {
  #nav_content img {
    height: var(--rs-logo-height) !important;
  }

  #nav_content a {
    font-size: var(--rs-nav-font);
    line-height: var(--rs-nav-line);
  }

  #footer-left h3 {
    font-size: var(--rs-footer-title);
    white-space: nowrap;
  }

  #footer-left p,
  #footer-center p,
  #footer-right p {
    font-size: var(--rs-footer-text);
    line-height: var(--rs-footer-line);
  }

}

@media (max-width: 767px) {
  #nav,
  #nav_content {
    /* Keep the mobile nav row stable; the logo height is adjusted separately. */
    height: var(--rs-nav-height, 40px) !important;
    line-height: var(--rs-nav-height, 40px);
  }

  #nav_content img {
    content: url("../pics/optimized/weila_logo_nav.png");
    /* Center the smaller mobile logo inside the full nav row. */
    height: var(--rs-logo-height, 18px) !important;
    margin-top: max(0px, calc((var(--rs-nav-height, 40px) - var(--rs-logo-height, 18px)) / 2)) !important;
  }

  #nav_content ul,
  #nav_content li,
  #nav_content a {
    height: var(--rs-nav-height, 40px);
  }

  #nav_content a {
    /* Match link line-height to the nav row so text stays vertically centered. */
    line-height: var(--rs-nav-height, 40px) !important;
    margin-top: 0 !important;
  }

  #footer {
    position: relative;
    width: min(1720px, calc(100% - 80px)) !important;
    min-height: 480px;
    height: auto !important;
    display: block;
    padding: 52px 56px 46px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .about-page #footer {
    /* about_weila keeps its footer inside the background canvas; keep it pinned to the canvas bottom on mobile too. */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100% !important;
  }

  #footer-left {
    width: 820px;
    max-width: none;
    flex: none;
    min-width: 0;
    text-align: left;
  }

  #footer-center {
    /* Keep the ICP line centered along the footer bottom, matching the reference. */
    position: absolute !important;
    left: 50%;
    top: auto !important;
    bottom: 68px;
    width: auto;
    transform: translateX(-50%) !important;
  }

  #footer-center p {
    margin: 0 !important;
    white-space: nowrap;
    text-align: center;
  }

  #footer-right {
    position: absolute;
    right: 56px;
    top: 108px;
    text-align: center;
  }

  #footer-right img {
    width: 137px;
    height: auto;
  }

  #footer-right p {
    white-space: nowrap;
  }
}