/* Shared theme + mobile layout for every SI GlobalMedCare page */
:root {
  --parchment: #ffffff;
  --paper: #ffffff;
  --rule: #E3E8E6;
}

html, body { max-width: 100%; overflow-x: hidden; }
body { background: #ffffff !important; font-size: 18px; font-weight: 500; }

.wrap { max-width: 1220px; }

.data-points {
  display: grid;
  gap: 12px;
}
.data-point {
  overflow: visible !important;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.5;
  padding: 14px 16px !important;
}
.data-point b {
  white-space: normal;
  letter-spacing: 0.06em;
}

.table-wrap, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.dropdown-menu a:hover { background-color: #F4F7F6; }
.field input,
.field select,
.field textarea { background: #F4F7F6 !important; }

@media (max-width: 1100px) {
  nav.main-nav,
  .header-phone { display: none !important; }
  .hamburger { display: flex !important; }

  .header-row {
    padding: 8px 14px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .brand { min-width: 0; flex: 0 0 auto !important; }
  .brand img.site-logo,
  .brand img {
    height: 70px !important;
    max-width: none !important;
    max-height: 70px !important;
    width: auto !important;
  }
  .mobile-nav-header img {
    height: 64px !important;
    width: auto !important;
    max-width: none !important;
  }
  /* Keep header to logo + menu only; review is in the menu and floating buttons */
  .header-actions .btn,
  .header-actions a.btn { display: none !important; }
  .header-actions { gap: 0 !important; }
}

@media (max-width: 980px) {
  .page-grid,
  .article-layout,
  .grid-2,
  .silo-links,
  .footer-grid,
  .data-points,
  .hero-grid,
  .hospital-grid,
  .country-grid,
  .spec-grid,
  .service-grid,
  .contact-grid,
  .form-row { grid-template-columns: 1fr !important; }

  .toc-box { display: none !important; }
  .sidebar-box { position: static !important; }

  .wrap { padding-left: 18px !important; padding-right: 18px !important; }

  .subpage-hero,
  .pillar-hero { padding: 36px 0 !important; }
  .subpage-hero h1,
  .pillar-hero h1,
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    word-wrap: break-word;
    font-weight: 650 !important;
  }
  .subpage-hero p,
  .hero-lead,
  .hero-sub { font-size: 1.08rem !important; font-weight: 500 !important; }

  .hero-stats .stat b { font-size: 2.4rem !important; font-weight: 700 !important; }
  .hero-stats .stat span { font-size: 0.92rem !important; font-weight: 600 !important; }

  .page-grid { padding: 28px 0 96px !important; gap: 24px !important; }
  main { padding-bottom: 24px; }
  footer { padding-bottom: 100px !important; }

  .btn { min-height: 44px; }
  .field input,
  .field select,
  .field textarea { font-size: 16px !important; width: 100%; }

  .floating-btn {
    width: 50px !important;
    height: 50px !important;
    bottom: 14px !important;
  }
  .floating-call { left: 12px !important; }
  .floating-whatsapp { right: 12px !important; }

  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  .hero { padding: 0 0 36px !important; }
  .hero-banner { margin-bottom: 20px !important; }
  .hero-banner img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  .hero-media { display: none !important; }
}

@media (max-width: 600px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .data-points { grid-template-columns: 1fr !important; }
  .silo-links { grid-template-columns: 1fr !important; }
  .spec-grid { grid-template-columns: 1fr 1fr !important; }
  .hospital-grid,
  .country-grid,
  .service-grid { grid-template-columns: 1fr !important; }

  h2 { font-size: 1.55rem !important; font-weight: 650 !important; }
  h3 { font-size: 1.22rem !important; font-weight: 650 !important; }

  .hero-media { display: none !important; }
  .hero-banner { margin-bottom: 16px !important; }
  .hero-banner img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  .hero { padding: 0 0 32px !important; }
  .section { padding: 48px 0 !important; }
}