/**
 * Mobile typography and layout normalization.
 *
 * The legacy theme uses --nk-unit for both typography and geometry. That unit
 * intentionally stops shrinking below 1600px, so mobile type is normalized
 * here with semantic tokens instead of changing --nk-unit globally.
 */

@media (max-width: 768px) {
  :root {
    --nk-mobile-body: 16px;
    --nk-mobile-small: 14px;
    --nk-mobile-h1: clamp(28px, 7.5vw, 34px);
    --nk-mobile-h2: clamp(23px, 6.4vw, 27px);
    --nk-mobile-h3: clamp(18px, 5vw, 21px);
    --nk-mobile-h4: 17px;
    --nk-mobile-gutter: 16px;
    --nk-mobile-card-padding: 18px;
    --nk-mobile-section-space: 48px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: var(--nk-mobile-body);
    line-height: 1.65;
  }

  main .container,
  body.home .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: var(--nk-mobile-gutter);
    padding-left: var(--nk-mobile-gutter);
  }

  .btn,
  button,
  input[type="submit"] {
    min-height: 44px;
  }

  main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  main select,
  main textarea {
    max-width: 100%;
    font-size: 16px;
  }

  main img,
  main iframe,
  main video {
    max-width: 100%;
  }

  /* WordPress fallback templates and promotion archive. */
  body:not(.home) .site-main > .container {
    padding-right: var(--nk-mobile-gutter);
    padding-left: var(--nk-mobile-gutter);
  }

  body:not(.home) .site-main .entry-title,
  .post-type-archive-offer .site-main .no-content h2 {
    font-size: var(--nk-mobile-h1);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body:not(.home) .site-main .entry-content {
    font-size: var(--nk-mobile-body);
    line-height: 1.7;
    overflow-wrap: anywhere;
  }

  .nhakhoa-offers-section {
    gap: 16px;
    margin: 28px auto;
    padding-right: 0;
    padding-left: 0;
  }

  .nhakhoa-offers-section .offer-item img {
    border-radius: 10px;
  }

  /* Homepage: keep readable hierarchy and remove sub-12px testimonial copy. */
  body.home .hero-content h1 {
    font-size: var(--nk-mobile-h1);
    line-height: 1.2;
  }

  body.home .section-header h2,
  body.home .custom-section-header .custom-title,
  body.home .services-main-title,
  body.home .doctors-unified-title,
  body.home .cta-header h2 {
    font-size: var(--nk-mobile-h2);
    line-height: 1.28;
  }

  body.home .testimonial-text {
    font-size: 15px;
    line-height: 1.65;
  }

  body.home .testimonial-author .author-info h4 {
    font-size: 14px;
  }

  body.home .testimonial-author .author-info span,
  body.home .testimonial-stars {
    font-size: 13px;
  }

  body.home .service-name,
  body.home .detail-desc,
  body.home .detail-certs-list li {
    font-size: 15px;
    line-height: 1.6;
  }

  body.home .knowledge-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    margin-right: calc(-1 * var(--nk-mobile-gutter));
    margin-bottom: 24px;
    padding-right: var(--nk-mobile-gutter);
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
  }

  body.home .knowledge-tabs .tab-link {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 14px;
    font-size: var(--nk-mobile-small);
    white-space: nowrap;
    scroll-snap-align: start;
  }

  body.home .knowledge-card :is(.knowledge-info h3, .knowledge-info h3 a) {
    font-size: 17px;
    line-height: 1.4;
  }

  body.home .knowledge-meta {
    font-size: 13px;
  }

  /* Shared page hierarchy. Limited !important rules replace conflicting
     template-local font sizes while staying scoped to page content. */
  body main:is(
    .about-page-wrapper,
    .doctors-page-wrapper,
    .locations-page-wrapper,
    .page-facilities-modern,
    .page-lien-he,
    .page-nha-khoa-tong-quat,
    .page-customer-experience,
    .page-boc-rang-su,
    .page-trong-rang-implant,
    .page-nieng-rang-tham-my,
    .page-nho-rang-khon,
    .page-tin-tuc,
    .single-news-page
  ) h1 {
    font-size: var(--nk-mobile-h1) !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  body main:is(
    .about-page-wrapper,
    .doctors-page-wrapper,
    .locations-page-wrapper,
    .page-facilities-modern,
    .page-lien-he,
    .page-nha-khoa-tong-quat,
    .page-customer-experience,
    .page-boc-rang-su,
    .page-trong-rang-implant,
    .page-nieng-rang-tham-my,
    .page-nho-rang-khon,
    .page-tin-tuc,
    .single-news-page
  ) h2 {
    font-size: var(--nk-mobile-h2) !important;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  body main:is(
    .about-page-wrapper,
    .doctors-page-wrapper,
    .locations-page-wrapper,
    .page-facilities-modern,
    .page-lien-he,
    .page-nha-khoa-tong-quat,
    .page-customer-experience,
    .page-boc-rang-su,
    .page-trong-rang-implant,
    .page-nieng-rang-tham-my,
    .page-nho-rang-khon,
    .page-tin-tuc,
    .single-news-page
  ) h3 {
    font-size: var(--nk-mobile-h3) !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  body main:is(
    .about-page-wrapper,
    .doctors-page-wrapper,
    .locations-page-wrapper,
    .page-facilities-modern,
    .page-lien-he,
    .page-nha-khoa-tong-quat,
    .page-customer-experience,
    .page-boc-rang-su,
    .page-trong-rang-implant,
    .page-nieng-rang-tham-my,
    .page-nho-rang-khon,
    .page-tin-tuc,
    .single-news-page
  ) h4 {
    font-size: var(--nk-mobile-h4) !important;
    line-height: 1.4;
  }

  /* Service pages: common section headings and reading copy. */
  .page-boc-rang-su :is(
    .brs-teeth-issues-title,
    .brs-customer-slider-section .section-title,
    .brs-benefits-title,
    .brs-veneer-compare-title,
    .brs-popular-porcelain-title,
    .brs-process-title,
    .brs-types-title,
    .brs-commitment-title,
    .brs-trust-title
  ),
  .page-trong-rang-implant :is(
    .nr-teeth-issues-title,
    .nr-customer-slider-section .section-title,
    .nr-benefits-title,
    .nr-process-title,
    .nr-braces-types-title,
    .nr-consequences-title,
    .nr-commitment-title,
    .nr-trust-title
  ),
  .page-nieng-rang-tham-my :is(
    .nr-teeth-issues-title,
    .nr-customer-slider-section .section-title,
    .nr-benefits-title,
    .nr-process-title,
    .nr-braces-types-title,
    .nr-commitment-title,
    .nr-trust-title,
    .nr-metal-braces-intro-title,
    .nr-metal-braces-benefits-heading,
    .nr-metal-braces-types-compare-title,
    .nr-metal-braces-faq-title,
    .nr-child-golden-age-heading,
    .nr-child-methods-heading
  ),
  .page-nho-rang-khon :is(
    .nrk-customer-slider-section .section-title,
    .nrk-cases-title,
    .nrk-benefits-title,
    .nrk-process-title,
    .nrk-commitment-title,
    .nrk-trust-title
  ) {
    font-size: var(--nk-mobile-h2) !important;
    line-height: 1.28;
    letter-spacing: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .page-boc-rang-su :is(
    .brs-teeth-issues-desc,
    .brs-benefit-desc,
    .brs-veneer-compare-copy p,
    .brs-popular-porcelain-copy p,
    .brs-process-subtitle,
    .brs-process-desc,
    .brs-type-desc,
    .brs-commitment-item-desc,
    .brs-trust-slide-content p
  ),
  .page-trong-rang-implant :is(
    .nr-teeth-issues-desc,
    .nr-benefit-desc,
    .nr-process-subtitle,
    .nr-process-desc,
    .nr-braces-type-desc,
    .nr-consequence-desc,
    .nr-commitment-item-desc,
    .nr-trust-slide-content p
  ),
  .page-nieng-rang-tham-my :is(
    .nr-teeth-issues-desc,
    .nr-teeth-issue-desc-text,
    .nr-benefit-desc,
    .nr-process-subtitle,
    .nr-process-desc,
    .nr-braces-type-desc,
    .nr-commitment-item-desc,
    .nr-trust-slide-content p,
    .nr-metal-braces-intro-description,
    .nr-metal-braces-type-copy p,
    .nr-metal-braces-type-copy li
  ),
  .page-nho-rang-khon :is(
    .nrk-cases-desc,
    .nrk-benefit-desc,
    .nrk-process-subtitle,
    .nrk-process-desc,
    .nrk-commitment-copy li,
    .nrk-trust-slide-content p
  ) {
    font-size: var(--nk-mobile-body) !important;
    line-height: 1.65;
  }

  /* Service page vertical rhythm and stable single-column cards. */
  .page-boc-rang-su :is(
    .brs-teeth-issues-section,
    .brs-benefits-section,
    .brs-process-section,
    .brs-types-section,
    .brs-commitment-section,
    .brs-trust-section
  ),
  .page-trong-rang-implant :is(
    .nr-teeth-issues-section,
    .nr-benefits-section,
    .nr-process-section,
    .nr-braces-types-section,
    .nr-consequences-section,
    .nr-commitment-section,
    .nr-trust-section
  ),
  .page-nieng-rang-tham-my :is(
    .nr-teeth-issues-section,
    .nr-benefits-section,
    .nr-process-section,
    .nr-braces-types-section,
    .nr-commitment-section,
    .nr-trust-section
  ),
  .page-nho-rang-khon :is(
    .nrk-cases-section,
    .nrk-benefits-section,
    .nrk-process-section,
    .nrk-commitment-section,
    .nrk-trust-section
  ) {
    padding-top: var(--nk-mobile-section-space);
    padding-bottom: var(--nk-mobile-section-space);
  }

  /* Doctors page. */
  .doctors-page-wrapper .doctor-name {
    font-size: 24px;
    line-height: 1.25;
  }

  .doctors-page-wrapper :is(.hoidong-body, .hoidong-body p, .doctor-description) {
    font-size: var(--nk-mobile-body);
    line-height: 1.65;
  }

  .doctors-page-wrapper :is(.doctor-title, .doctor-specialty-badge, .doctor-certificates h4, .doctor-certificates li) {
    font-size: var(--nk-mobile-small);
    line-height: 1.5;
  }

  .doctors-page-wrapper :is(.pdf-badge-overlay, .pdf-title, .btn-pdf-view) {
    font-size: 12px;
  }

  .doctors-page-wrapper .doctor-card-content {
    gap: 20px;
    padding: 24px var(--nk-mobile-card-padding);
  }

  .doctors-page-wrapper .hoidong-section {
    overflow: hidden;
  }

  .doctors-page-wrapper .hoidong-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  .doctors-page-wrapper :is(.hoidong-image-col, .hoidong-text-col) {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  /* Facilities and locations. */
  .page-facilities-modern .hero-title {
    font-size: var(--nk-mobile-h1);
  }

  .page-facilities-modern .hero-subtitle {
    font-size: 17px;
  }

  .page-facilities-modern .highlight-text {
    font-size: 38px;
  }

  .page-facilities-modern :is(.section-title, .section-title-large) {
    font-size: var(--nk-mobile-h2);
  }

  .page-facilities-modern .equipment-title {
    font-size: var(--nk-mobile-h3);
  }

  .page-facilities-modern :is(.equipment-description, .facility-gallery-caption, .facility-lightbox-caption) {
    font-size: var(--nk-mobile-body);
    line-height: 1.6;
  }

  .page-facilities-modern .facility-gallery-grid,
  .page-facilities-modern .facility-gallery-grid.is-partial {
    gap: 8px;
  }

  /* News archives and articles. */
  .page-tin-tuc .news-layout,
  .single-news-page .news-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .single-news-page .single-news-title {
    font-size: var(--nk-mobile-h1) !important;
  }

  .single-news-page .single-news-content {
    font-size: var(--nk-mobile-body);
    line-height: 1.75;
    overflow-wrap: anywhere;
  }

  .single-news-page .single-news-content h2 {
    margin-top: 28px;
    font-size: var(--nk-mobile-h2) !important;
  }

  .single-news-page .single-news-content h3 {
    margin-top: 24px;
    font-size: var(--nk-mobile-h3) !important;
  }

  .single-news-page .single-news-meta,
  .page-tin-tuc .news-meta {
    gap: 8px 14px;
    font-size: var(--nk-mobile-small);
  }

  .single-news-page .latest-date,
  .page-tin-tuc .latest-date,
  .news-category-archive .latest-date {
    font-size: 13px;
  }

  .page-tin-tuc .news-grid,
  .news-category-archive .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-tin-tuc .news-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .page-tin-tuc .news-excerpt,
  .page-tin-tuc .news-excerpt-taxonomy {
    font-size: 15px;
    line-height: 1.65;
  }

  /* Contact, general dentistry, customer experience, and locations. */
  .page-lien-he :is(.lh-section-title, .lh-contact-title),
  .page-nha-khoa-tong-quat :is(.nktq-page-title, .nktq-services-heading),
  .page-customer-experience :is(.page-title, .section-title),
  .locations-page-wrapper :is(.locations-title, .facilities-main-title) {
    font-size: var(--nk-mobile-h2) !important;
    line-height: 1.28;
  }

  .page-lien-he :is(p, li),
  .page-nha-khoa-tong-quat :is(p, li),
  .page-customer-experience :is(p, li),
  .locations-page-wrapper :is(p, li) {
    line-height: 1.65;
  }

  .locations-page-wrapper .location-directions-link {
    min-height: 44px;
    padding: 10px 18px;
    font-size: var(--nk-mobile-small);
  }

  /* Footer remains readable without making the secondary legal copy dominant. */
  .site-footer {
    padding-top: 42px;
  }

  .site-footer .footer-grid-new {
    gap: 28px;
    padding-bottom: 32px;
  }

  .site-footer :is(.footer-contact-item, .footer-services ul li) {
    font-size: 15px;
    line-height: 1.6;
  }

  .site-footer .footer-license,
  .site-footer .footer-bottom {
    font-size: var(--nk-mobile-small);
    line-height: 1.55;
  }

  .site-footer :is(.footer-services h3, .footer-fanpage h3, .footer-social-links h4) {
    font-size: 16px;
    line-height: 1.4;
  }

  .site-footer .fb-page-wrapper,
  .site-footer .fb-page-wrapper iframe {
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 480px) {
  :root {
    --nk-mobile-h1: 27px;
    --nk-mobile-h2: 22px;
    --nk-mobile-h3: 18px;
    --nk-mobile-section-space: 42px;
  }

  main .container,
  body.home .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .page-facilities-modern .highlight-text {
    font-size: 34px;
  }

  .page-facilities-modern .facility-gallery-grid,
  .page-facilities-modern .facility-gallery-grid.is-partial {
    grid-template-columns: minmax(0, 1fr);
  }

  .doctors-page-wrapper .doctor-image-circle {
    width: min(220px, 72vw);
    height: min(220px, 72vw);
  }

  .page-boc-rang-su :is(.brs-trust-slider-container, .brs-trust-section .brs-slider-wrapper),
  .page-trong-rang-implant :is(.nr-trust-slider-container, .nr-trust-section .nr-slider-wrapper),
  .page-nieng-rang-tham-my :is(.nr-trust-slider-container, .nr-trust-section .nr-slider-wrapper),
  .page-nho-rang-khon :is(.nrk-trust-slider-container, .nrk-trust-section .nrk-slider-wrapper) {
    padding-right: 34px;
    padding-left: 34px;
  }
}