/* ==========================================================================
   WOOLLEMIA INFOSEC — mobile-fix.css
   Load this file LAST (just before </body>) on every page.
   Fixes: edge-to-edge sections, inconsistent gutters, clipped cards,
   sideways scroll, oversized buttons and cramped hero on phones.
   Nothing here affects screens wider than 768px.
   ========================================================================== */

/* ---------- 0. Never allow sideways scrolling (all screen sizes) ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas, iframe { max-width: 100%; }

/* Decorative glows / rings must not stretch the page */
.why-mob-v2, .hero-section, .vapt-hero, [class*="hero"] { overflow-x: clip; }

@media (max-width: 768px) {

  :root { --m-gutter: 20px; }

  /* stops the 3px sideways wobble ("Swipe to browse" hint + glow rings) */
  .svcm, .why-mob-v2, .wv-bg { overflow-x: clip; }
  .svcm__hint { max-width: 100%; margin-left: 0; margin-right: 0; }

  /* ---------- 1. ROOT CAUSE: woollemia.css has
         section{padding:80px 0!important}  which wipes left/right padding
         on every section. Give the sections that rely on it a gutter. ----- */
  body section.cs-section,
  body section.certs-section,
  body section.wm-faq,
  body section.wm-scope {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* ---------- 2. One consistent 20px gutter for every other section ----- */
  body .hero-section > .container,
  body footer.footer > .container,
  body .footer .container,
  body .poc-section__inner,
  body .wm-samples__inner,
  body .wf8__inner,
  body .wv-wrap,
  body .bi-container,
  body .tools-section .wrap {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Tighter vertical rhythm on phones (80px is too tall) */
  body section.cs-section,
  body section.certs-section,
  body section.wm-faq,
  body section.wm-scope,
  body section.wm-samples,
  body section.wf8,
  body section.bi-blog {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ---------- 3. Case-study carousel (bi-blog) ---------- */
  .bi-blog-grid.bi-scrollable .bi-blog-card {
    flex: 0 0 82%;            /* was a fixed 340px -> overflowed 335px box */
    max-width: 320px;
  }
  .bi-blog-grid.bi-scrollable { margin-right: calc(var(--m-gutter) * -1); padding-right: var(--m-gutter); }
  .bi-scroll-arrow { display: none; }      /* it covered the card text; swipe instead */
  .bi-section-head { margin-bottom: 28px; }
  .bi-eyebrow { width: auto; }

  /* ---------- 4. Hero: keep the orbit graphic + chips inside the screen ---------- */
  .hero-visual { max-width: 100%; padding: 8px 0 16px; }
  .cyber-shield-graphic { margin: 0 auto; }
  .floating-tech-badge { white-space: nowrap; }
  .badge-3 { right: auto !important; left: -6px !important; top: 52% !important; }   /* "Compliance" was positioned off-screen */
  .badge-2 { right: -4px !important; }

  /* Case-study thumbnails: fill the whole image box (no blue strip) */
  .bi-blog-thumb { overflow: hidden; }
  .bi-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---------- 5. Headings, text and tap targets ---------- */
  h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 6.6vw, 30px) !important; line-height: 1.2 !important; }
  p, li { overflow-wrap: break-word; }
  .btn, button, .cs-btn, [class*="-btn"] { min-height: 44px; }

  /* Buttons with long labels must wrap instead of running off screen */
  [class*="btn"] { white-space: normal !important; max-width: 100%; text-align: center; }
  .nsx-btn { width: 100%; justify-content: center; }

  /* ---------- 6. Cards / forms / grids ---------- */
  .poc-section__inner, .cs-container, .wm-faq__inner, .wm-scope__inner,
  .certs-scene, .certs-header { max-width: 100%; }
  .wm-faq__inner, .wm-scope__inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  input, select, textarea { font-size: 16px !important; max-width: 100%; }   /* stops iOS zoom-on-focus */

  table { display: block; overflow-x: auto; max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* ---------- 7. Floating WhatsApp button must not cover content ---------- */
  .whatsapp-float, [class*="whatsapp"][class*="float"], .wa-float {
    width: 48px !important; height: 48px !important;
    right: 14px !important; bottom: 14px !important;
  }
}

/* Very small phones (iPhone SE / 320px) */
@media (max-width: 360px) {
  :root { --m-gutter: 16px; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}

/* ==========================================================================
   BLOG PAGES (Blog/*)  — article layout fixes
   ========================================================================== */
@media (max-width: 900px) {
  /* "1fr" lets one wide child stretch the whole page past the screen edge */
  .page-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .page-grid > * { min-width: 0; max-width: 100%; }
  .art-card, .right-sidebar { max-width: 100%; }
  /* tables: scroll sideways inside the card instead of crushing the words */
  .art-card table, .art-body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .art-body table th, .art-body table td { padding: 10px 8px !important; font-size: 13px !important; word-break: normal; overflow-wrap: normal; hyphens: auto; }
  /* "Label: text" tick lists were flex rows that squeezed the label into a thin column */
  .ck li { display: block !important; }
  .ck li::before { display: inline-block; margin-right: 8px; }
  .ck li strong { display: inline; }
  .art-body, .art-card { overflow-wrap: break-word; word-break: normal; }   /* only wraps a word if it cannot fit */
  .art-body img, .art-card img { height: auto; }
}

@media (max-width: 900px) {
  /* one matching side margin for header, hero and article cards (was 28px vs 16px) */
  .wrap, .hero-inner { padding-left: 16px !important; padding-right: 16px !important; }
  /* hero had a fixed height, so long titles overflowed it on small phones */
  .hero { height: auto !important; min-height: 440px; padding: 40px 0 36px; }
  .hero h1 { max-width: 100%; }
  .hero-btns > * { flex: 1 1 100%; justify-content: center; }
  .hero-eyebrow { max-width: 100%; white-space: normal; padding: 7px 14px; }
  .topbar .wrap { justify-content: center; text-align: center; }
  /* keep the floating WhatsApp button smaller so it covers less text */
  .whatsapp-float { width: 44px !important; height: 44px !important; right: 12px !important; bottom: 12px !important; font-size: 22px; }
}

/* ==========================================================================
   Grids with a fixed minimum column width (310px / 280px / 270px) were wider
   than a small phone, so the right edge of the cards was cut off.
   ========================================================================== */
@media (max-width: 480px) {
  .apisec-svc-grid, .apisec-adv-grid, .apisec-process,
  .grid-cards-container, .services-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .apisec-svc-grid > *, .apisec-adv-grid > *, .apisec-process > *,
  .grid-cards-container > *, .services-grid > * { min-width: 0; max-width: 100%; }
}
* ==========================================================================
   WOOLLEMIA INFOSEC — mobile-fix.css
   Load this file LAST (just before </body>) on every page.
   Fixes: edge-to-edge sections, inconsistent gutters, clipped cards,
   sideways scroll, oversized buttons and cramped hero on phones.
   Nothing here affects screens wider than 768px.
   ========================================================================== */

/* ---------- 0. Never allow sideways scrolling (all screen sizes) ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, video, canvas, iframe { max-width: 100%; }

/* Decorative glows / rings must not stretch the page */
.why-mob-v2, .hero-section, .vapt-hero, [class*="hero"] { overflow-x: clip; }

@media (max-width: 768px) {

  :root { --m-gutter: 20px; }

  /* stops the 3px sideways wobble ("Swipe to browse" hint + glow rings) */
  .svcm, .why-mob-v2, .wv-bg { overflow-x: clip; }
  .svcm__hint { max-width: 100%; margin-left: 0; margin-right: 0; }

  /* ---------- 1. ROOT CAUSE: woollemia.css has
         section{padding:80px 0!important}  which wipes left/right padding
         on every section. Give the sections that rely on it a gutter. ----- */
  body section.cs-section,
  body section.certs-section,
  body section.wm-faq,
  body section.wm-scope {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* ---------- 2. One consistent 20px gutter for every other section ----- */
  body .hero-section > .container,
  body footer.footer > .container,
  body .footer .container,
  body .poc-section__inner,
  body .wm-samples__inner,
  body .wf8__inner,
  body .wv-wrap,
  body .bi-container,
  body .tools-section .wrap {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Tighter vertical rhythm on phones (80px is too tall) */
  body section.cs-section,
  body section.certs-section,
  body section.wm-faq,
  body section.wm-scope,
  body section.wm-samples,
  body section.wf8,
  body section.bi-blog {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* ---------- 3. Case-study carousel (bi-blog) ---------- */
  .bi-blog-grid.bi-scrollable .bi-blog-card {
    flex: 0 0 82%;            /* was a fixed 340px -> overflowed 335px box */
    max-width: 320px;
  }
  .bi-blog-grid.bi-scrollable { margin-right: calc(var(--m-gutter) * -1); padding-right: var(--m-gutter); }
  .bi-scroll-arrow { display: none; }      /* it covered the card text; swipe instead */
  .bi-section-head { margin-bottom: 28px; }
  .bi-eyebrow { width: auto; }

  /* ---------- 4. Hero: keep the orbit graphic + chips inside the screen ---------- */
  .hero-visual { max-width: 100%; padding: 8px 0 16px; }
  .cyber-shield-graphic { margin: 0 auto; }
  .floating-tech-badge { white-space: nowrap; }
  .badge-3 { right: auto !important; left: -6px !important; top: 52% !important; }   /* "Compliance" was positioned off-screen */
  .badge-2 { right: -4px !important; }

  /* Case-study thumbnails: fill the whole image box (no blue strip) */
  .bi-blog-thumb { overflow: hidden; }
  .bi-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---------- 5. Headings, text and tap targets ---------- */
  h1 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(24px, 6.6vw, 30px) !important; line-height: 1.2 !important; }
  p, li { overflow-wrap: anywhere; }
  .btn, button, .cs-btn, [class*="-btn"] { min-height: 44px; }

  /* Buttons with long labels must wrap instead of running off screen */
  [class*="btn"] { white-space: normal !important; max-width: 100%; text-align: center; }
  .nsx-btn { width: 100%; justify-content: center; }

  /* ---------- 6. Cards / forms / grids ---------- */
  .poc-section__inner, .cs-container, .wm-faq__inner, .wm-scope__inner,
  .certs-scene, .certs-header { max-width: 100%; }
  .wm-faq__inner, .wm-scope__inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  input, select, textarea { font-size: 16px !important; max-width: 100%; }   /* stops iOS zoom-on-focus */

  table { display: block; overflow-x: auto; max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* ---------- 7. Floating WhatsApp button must not cover content ---------- */
  .whatsapp-float, [class*="whatsapp"][class*="float"], .wa-float {
    width: 48px !important; height: 48px !important;
    right: 14px !important; bottom: 14px !important;
  }
}

/* Very small phones (iPhone SE / 320px) */
@media (max-width: 360px) {
  :root { --m-gutter: 16px; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
}@media (min-width: 769px) {
  .hero-section .hero-title { min-height: 90px; }
}
@media (max-width: 992px) {
  .dropdown > a.nav-link .fa-chevron-down {
    padding: 10px 14px;
    margin-left: auto;
  }
}