/* ============================================================
   Responsive fixes — mobile-first overrides
   Loaded AFTER the vendor stylesheet; only adds, never removes.
   Targets: iPhone SE (375), Galaxy S8+ (360), Surface Duo (540).
   ============================================================ */

/* 1. Safety net — never allow horizontal scroll on the page */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2. Long words (GPT-5.5, ConvoSuite, ChatGPT, URLs) must wrap on narrow screens */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.title,
p, li, a, span {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}

/* 3. Gradient-text spans are inline children of headings — make them wrap with the rest */
.text-gradient-primary,
.text-gradient-warning,
.text-gradient-info,
.text-gradient-success,
.text-gradient-danger {
  display: inline;
  overflow-wrap: break-word;
}

/* 4. Fluid heading sizes capped at the viewport — eliminates clipping on 360–540px screens.
      The vendor uses calc(rem + vw) which gets aggressive on small screens; clamp() bounds it. */
@media (max-width: 767.98px) {
  h1, .h1, .title.h1 {
    font-size: clamp(1.5rem, 5.5vw + 0.5rem, 2.25rem);
    line-height: 1.2;
  }
  h2, .h2 {
    font-size: clamp(1.35rem, 4.5vw + 0.4rem, 1.875rem);
    line-height: 1.25;
  }
  h3, .h3 {
    font-size: clamp(1.2rem, 3.5vw + 0.4rem, 1.5rem);
    line-height: 1.3;
  }
  .display-1 { font-size: clamp(2rem, 8vw + 0.5rem, 3rem); line-height: 1.15; }
  .display-2 { font-size: clamp(1.875rem, 7vw + 0.5rem, 2.75rem); line-height: 1.15; }
  .display-3 { font-size: clamp(1.75rem, 6.5vw + 0.5rem, 2.5rem); line-height: 1.2; }
  .display-4 { font-size: clamp(1.65rem, 6vw + 0.5rem, 2.25rem); line-height: 1.2; }
  .display-5 { font-size: clamp(1.55rem, 5.5vw + 0.5rem, 2rem); line-height: 1.2; }
  .display-6 { font-size: clamp(1.5rem, 5vw + 0.5rem, 1.875rem); line-height: 1.2; }
}

/* 5. Container padding on narrow screens — prevent edge-clipping */
@media (max-width: 575.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 6. Images never blow past their column */
img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* 7. Tables and pre blocks become horizontally scrollable on tiny screens
      instead of expanding the page */
@media (max-width: 575.98px) {
  table,
  pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* 8. Hero stacks vertically on mobile, no negative margins pulling content off-screen */
@media (max-width: 767.98px) {
  .nk-hero {
    padding-left: 0;
    padding-right: 0;
  }
  .nk-hero-content {
    padding: 0 0.5rem;
  }
}

/* 9. Footer columns stack cleanly on mobile */
@media (max-width: 575.98px) {
  .nk-footer .row > [class*="col-"] {
    margin-bottom: 1.5rem;
  }
}

/* 10. Buttons in btn-list don't overflow on tiny screens */
@media (max-width: 400px) {
  .btn-list-inline {
    flex-wrap: wrap;
    justify-content: center;
  }
  .btn-list-inline > li {
    margin-bottom: 0.5rem;
  }
}

/* Hide dark-mode toggle on mobile */
@media (max-width: 991.98px) {
  .dark-mode-toggle { display: none !important; }
}