/* === Mobile Responsive Enhancements === */

/* Global fluid widths */
body, html {
  width: 100%;
  overflow-x: hidden;
}

/* Make text sizes responsive */
@media (max-width: 768px) {
  h1, .h1 { font-size: 36px !important; line-height: 44px !important; }
  h2, .h2 { font-size: 30px !important; line-height: 38px !important; }
  h3, .h3 { font-size: 26px !important; line-height: 34px !important; }
  p, .body-2, .body-3 {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  /* Responsive container padding */
  .tf-container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Hide large fonts or text blocks */
  .section-about-right h3 .title {
    font-size: 36px !important;
    line-height: 44px !important;
  }

  /* Fix popup full width */
  #popupForm > div,
  #enquiryForm > div {
    width: 90% !important;
    padding: 20px !important;
  }

  /* Responsive header menu stacking */
  .header-content {
    flex-direction: column;
    gap: 10px;
  }

  .main-menu {
    flex-direction: column !important;
    text-align: center;
  }

  .custom-header-buttons {
    margin-left: 0 !important;
    margin-top: 15px;
  }

  .section-about-left,
  .section-about-right {
    width: 100% !important;
    text-align: center;
  }

  .section-about-inner {
    flex-direction: column !important;
  }

  /* Resize logo */
  .logo-header img {
    max-width: 160px !important;
  }
}

/* FONT OVERRIDE: Outfit for body (copy), Roboto for headings */
html, body {
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.heading, .site-title, .page-title, .section-title,
[class*="title"], [class*="heading"] {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}
p, li, ul, ol, dl, blockquote, figcaption, small,
.card-text, .lead, .meta, .desc, .copy, .content, .text,
input, textarea, select, button, label, a:not([class*="title"]):not([class*="heading"]) {
  font-family: inherit !important;
}
body { font-weight: 400; }
strong, b { font-weight: 600; }