/* ============================================================
   getcifa — mobile-only layout fixes
   ------------------------------------------------------------
   Everything lives inside a media query, so the desktop layout
   is byte-for-byte unchanged. index.html styles elements with
   inline style="" attributes, which beat any stylesheet rule —
   so the overrides here need !important and target the inline
   declarations themselves ([style*="..."]).
   ============================================================ */

@media (max-width: 768px) {

  body { overflow-x: hidden; }
  h1, h2, h3, p, div, td, th, li, span { overflow-wrap: break-word; }

  /* ---- 1. Nav: wrap onto its own rows instead of overlapping ---- */
  nav { padding: 10px 12px !important; }
  nav > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
  }
  /* logo + tool buttons: full-width first row, centered */
  nav > div > div:first-child {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  /* the tool-button group inside it */
  nav > div > div:first-child > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  nav img { height: 36px !important; }
  nav button { font-size: 12px !important; min-width: 0 !important; }
  nav > div > div button { padding: 6px 10px !important; }
  .lang-toggle button { padding: 4px 9px !important; }

  /* ---- 2. Hero ---- */
  #heroAnon { padding: 28px 16px 24px !important; }
  #heroAnon > div:first-child { margin-bottom: 26px !important; }

  /* ---- 3. Multi-column grids collapse to one column ---- */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 100px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* key-numbers strip: 5 tiles -> 2 per row */
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ---- 4. Usage-map matrix: fit the screen instead of being cut ---- */
  [style*="min-width:560px"] { min-width: 0 !important; }
  [style*="min-width:560px"] > div {
    padding: 10px 5px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* ---- 5. Type scale ---- */
  [style*="font-size:40px"] { font-size: 27px !important; }
  [style*="font-size:36px"] { font-size: 25px !important; }
  [style*="font-size:32px"] { font-size: 24px !important; }
  [style*="font-size:28px"] { font-size: 21px !important; }
  [style*="font-size:24px"] { font-size: 19px !important; }
  [style*="font-size:22px"] { font-size: 18px !important; }
  [style*="font-size:18px"] { font-size: 16px !important; }

  /* ---- 6. Section / container padding ---- */
  [style*="max-width:1200px"],
  [style*="max-width: 1200px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  [style*="padding:40px"],
  [style*="padding: 40px"]   { padding: 24px 16px !important; }
  [style*="padding:48px"]    { padding: 26px 18px !important; }
  [style*="padding:32px 24px"] { padding: 24px 18px !important; }
  [style*="padding:0 24px 80px"] { padding: 0 14px 48px !important; }
  [style*="margin-bottom:48px"] { margin-bottom: 28px !important; }

  /* ---- 6b. Button/tab rows wrap instead of running off-screen ----
     (Should Cost demo buttons, CCC tab bar, card header actions).
     Wrapping only engages when the row no longer fits, so rows that
     already fit are untouched. */
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  /* keep genuinely inline pairs (icon + number) from breaking apart */
  [style*="display:flex"][style*="border-radius:50%"] { flex-wrap: nowrap !important; }

  /* ---- 7. Data tables: scroll rather than clip ---- */
  table { font-size: 12px !important; }
  [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 8. Footer ---- */
  footer { padding: 24px 14px !important; }
  footer > div {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
  }

  /* ---- 9. Tap targets ---- */
  button { min-height: 38px; }
}