/**
 * MAXXINFRA — Mobile / responsive overrides
 * Loaded site-wide. Overrides inline styles via media queries + !important.
 *
 * Breakpoints
 *   ≤ 1024px  small laptop / large tablet  (.mx-bp-lg)
 *   ≤  900px  tablet portrait              (.mx-bp-md)
 *   ≤  640px  phone                        (.mx-bp-sm)
 *   ≤  420px  small phone                  (.mx-bp-xs)
 */

/* ── GLOBAL: prevent horizontal scroll, smooth touch behaviour ─────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}
* { -webkit-tap-highlight-color: rgba(212, 43, 43, 0.2); }

/* Inputs: keep 16px font-size on mobile so iOS Safari doesn't zoom on focus */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET BREAKPOINT (≤ 1024px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .container-siemens {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }

  /* 5-column feature grids → 3 cols */
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 4-column "What We Build" → 2 cols on tablet */
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Footer 4-col → 2-col on tablet */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Services page sidebar+content (1fr 2fr) → 1 col */
  [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PHONE BREAKPOINT (≤ 768px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── HEADER & NAV ──────────────────────────────────────────────────── */
  header[style*="position:fixed"] {
    background: #1B2B7A !important;
    border-bottom: 1px solid rgba(212, 43, 43, 0.15) !important;
  }
  /* Shrink the header bar — covers both the 70px and 80px markup variants. */
  header[style*="position:fixed"] [style*="height:80px"],
  header[style*="position:fixed"] [style*="height:70px"] {
    height: 60px !important;
    gap: 0.5rem !important;
  }
  /* Slightly smaller logo so it sits comfortably in the 60px bar. */
  header[style*="position:fixed"] a[href="/"] img {
    height: 38px !important;
  }
  /* Legacy text-logo spans (kept harmless for any older exports). */
  header a[href="/"] span[style*="background:#D42B2B"] {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  header a[href="/"] span[style*="font-weight:800"] {
    font-size: 0.875rem !important;
  }
  /* The desktop nav and mega-menus are replaced by the hamburger drawer. */
  header[style*="position:fixed"] nav {
    display: none !important;
  }
  .mx-mega { display: none !important; }
  /* The header's right-side cluster (Get a Quote + Contact + hamburger) is too
     wide for phones and pushed the hamburger off-screen. On mobile we drop the
     redundant "Get a Quote" button (it lives in the sticky bottom bar) and keep
     a compact "Contact" plus the menu button. */
  header[style*="position:fixed"] a[href="/rfq/"] {
    display: none !important;
  }
  header[style*="position:fixed"] a[href="/contact/"] {
    font-size: 0.72rem !important;
    padding: 0.5rem 0.8rem !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
  }
  /* Hamburger button must be visible, tappable and never clipped. */
  .mobile-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 0.15rem;
    flex-shrink: 0;
  }

  /* ─── CONTAINER ─────────────────────────────────────────────────────── */
  .container-siemens {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ─── SECTION PADDING — vertical breathing room reduced on mobile ──── */
  section[style*="padding:6rem 0"],
  section[style*="padding: 6rem 0"] {
    padding: 3.5rem 0 !important;
  }
  section[style*="padding:5rem 0"],
  section[style*="padding: 5rem 0"] {
    padding: 2.75rem 0 !important;
  }
  section[style*="padding:4rem 0"] {
    padding: 2.5rem 0 !important;
  }

  /* ─── HERO ──────────────────────────────────────────────────────────── */
  section[id="home"][style*="min-height:100vh"] {
    min-height: auto !important;
    padding: 100px 0 2.5rem !important;
  }
  section[id="home"] [style*="padding-top:2rem"] {
    padding-top: 0 !important;
  }
  /* Hero headline: scale tighter to fit small phones */
  h1[style*="clamp(3rem"] {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }
  /* Hero subheadline / lead text */
  p[style*="font-size:1.1875rem"] {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }
  /* Hero eyebrow row — wrap the deco line cleanly */
  section[id="home"] [style*="margin-bottom:2rem"][style*="display:flex"][style*="gap:1rem"] {
    margin-bottom: 1.25rem !important;
  }
  /* CTA group — full width buttons */
  section[id="home"] [style*="display:flex;flex-wrap:wrap;gap:1rem"] {
    flex-direction: column !important;
    gap: 0.625rem !important;
    align-items: stretch !important;
  }
  section[id="home"] a.btn-primary,
  section[id="home"] a.btn-secondary {
    justify-content: center !important;
    width: 100% !important;
    padding: 0.9rem 1rem !important;
  }
  /* Hide the scroll indicator on mobile (clutter) */
  section[id="home"] [style*="bottom:2rem"][style*="transform:translateX(-50%)"] {
    display: none !important;
  }
  /* Soften dark left-gradient on hero so background image is visible */
  section[id="home"] [style*="linear-gradient(90deg, #1B2B7A"] {
    background: linear-gradient(180deg, rgba(27,43,122,0.85) 0%, rgba(27,43,122,0.7) 60%, rgba(27,43,122,0.5) 100%) !important;
  }

  /* ─── STATS STRIP ───────────────────────────────────────────────────── */
  [style*="grid-template-columns:repeat(3, 1fr)"][style*="gap:0"],
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:0"] {
    grid-template-columns: 1fr !important;
  }
  section[style*="background:#1B2B7A"] [style*="padding:2.5rem 2.5rem"] {
    padding: 1.5rem 1.25rem !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  section[style*="background:#1B2B7A"] [style*="padding:2.5rem 2.5rem"]:last-of-type {
    border-bottom: none !important;
  }
  /* Stat number font scaling */
  span[style*="font-size:clamp(2.5rem, 5vw, 4rem)"] {
    font-size: 2.25rem !important;
  }

  /* ─── SECTION HEADINGS ──────────────────────────────────────────────── */
  h2[style*="clamp(1.75rem, 4vw, 2.75rem)"],
  h2[style*="clamp(2rem, 4vw, 3rem)"] {
    font-size: 1.625rem !important;
    line-height: 1.15 !important;
  }
  /* "Section header + actions" rows: stack to vertical */
  [style*="display:flex"][style*="flex-wrap:wrap"][style*="justify-content:space-between"][style*="align-items:flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }

  /* ─── GENERIC GRID STACKING ─────────────────────────────────────────── */
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ─── CARD PADDING ──────────────────────────────────────────────────── */
  .siemens-card,
  [style*="padding:2.5rem"][class*="card"] {
    padding: 1.5rem !important;
  }
  [style*="padding:2.5rem"] {
    padding: 1.5rem !important;
  }
  [style*="padding:1.75rem"] {
    padding: 1.25rem !important;
  }
  /* "Big number" decorative chunks in engagement cards */
  span[style*="font-size:8rem"] {
    font-size: 4.5rem !important;
    bottom: -0.25rem !important;
  }
  /* Engagement-card header (label + icon) row: prevent icon overflow */
  [style*="display:flex"][style*="justify-content:space-between"][style*="align-items:flex-start"] {
    gap: 0.75rem !important;
  }
  span[style*="font-size:2.5rem"][class*="material-symbols-outlined"] {
    font-size: 2rem !important;
    flex-shrink: 0;
  }
  /* Tag chips in cards: wrap nicely */
  [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:0.5rem"] {
    gap: 0.4rem !important;
  }

  /* ─── DIFFERENCE SECTION: "industry problem" + "solution" cards ────── */
  [style*="background:#1B2B7A"][style*="position:relative"][style*="overflow:hidden"] p[style*="font-size:1.375rem"] {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }

  /* ─── FOOTER ────────────────────────────────────────────────────────── */
  footer .container-siemens[style*="padding-top:4rem"] {
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  footer [style*="display:grid"][style*="gap:3rem"] {
    gap: 2rem !important;
  }
  footer p[style*="max-width:280px"] {
    max-width: 100% !important;
  }
  footer [style*="display:flex"][style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    justify-content: center !important;
    text-align: center !important;
  }
  footer [style*="display:flex;gap:2rem"] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem !important;
  }
  footer nav a {
    padding: 0.25rem 0;
  }
  /* Address blocks: prevent long emails breaking layout */
  footer { word-break: break-word; }

  /* ─── PROJECTS PAGE — sticky filter bar ─────────────────────────────── */
  [style*="sticky"][style*="top:70px"] {
    top: 60px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [style*="sticky"][style*="top:70px"]::-webkit-scrollbar { display: none; }
  [style*="sticky"][style*="top:70px"] [style*="display:flex"] {
    flex-wrap: nowrap !important;
    min-width: max-content;
  }
  [style*="sticky"][style*="top:70px"] button {
    white-space: nowrap;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.75rem !important;
  }
  /* Project cards: image height reduced */
  .project-card div[style*="height:200px"] {
    height: 170px !important;
  }

  /* ─── KNOWLEDGE BASE — search bar full width ────────────────────────── */
  #kb-search,
  input[type="search"][id="kb-search"] {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ─── SERVICES PAGE — sidebar tabs becomes horizontal scroll ────────── */
  .mx-service-tab,
  [class*="mx-service-tab"] {
    min-width: 80%;
  }
  [style*="display:grid;grid-template-columns:1fr 2fr"] > div:first-child {
    display: flex !important;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── CONTACT PAGE FORM ─────────────────────────────────────────────── */
  form {
    width: 100%;
  }
  form input,
  form select,
  form textarea {
    padding: 0.85rem 1rem !important;
    border-radius: 4px;
  }
  form button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.95rem 1rem !important;
  }
  /* Two-column form rows → stacked */
  form [style*="display:grid;grid-template-columns:1fr 1fr"],
  form [style*="display:grid;grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* ─── BLOG ARTICLE BODY ─────────────────────────────────────────────── */
  .article-hero {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }
  .article-title {
    font-size: 1.85rem !important;
  }
  .article-body {
    padding: 2.5rem 1.25rem !important;
  }
  .article-body h2 { font-size: 1.4rem !important; }
  .article-body h3 { font-size: 1.1rem !important; }
  .article-body p,
  .article-body li {
    font-size: 1rem !important;
  }

  /* ─── SEO CONTENT BLOCK (above footer on every page) ────────────────── */
  .mx-seo-content {
    padding: 3rem 0 !important;
  }
  .mx-seo-content h2 {
    font-size: 1.5rem !important;
  }
  .mx-seo-content p {
    font-size: 0.95rem !important;
  }

  /* ─── TOUCH TARGETS (≥ 44px tap area) ───────────────────────────────── */
  nav a, .btn-primary, .btn-secondary, .btn-outline-dark,
  footer a, a.btn-text {
    min-height: 44px;
    line-height: 1.3;
  }
  footer nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  /* ─── MOBILE BOTTOM CTA BAR (injected by mobile.js) ─────────────────── */
  #mx-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: #1B2B7A;
    border-top: 1px solid rgba(212, 43, 43, 0.2);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.4);
    padding: 0.5rem 0.75rem;
    display: flex;
    gap: 0.5rem;
  }
  #mx-mobile-cta a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    min-height: 44px;
  }
  #mx-mobile-cta a.cta-primary {
    background: #D42B2B;
    color: #1B2B7A;
  }
  #mx-mobile-cta a.cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  /* Reserve space so footer/content isn't hidden behind sticky bar */
  body.mx-has-mobile-cta { padding-bottom: 70px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SMALL PHONE (≤ 420px)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {

  .container-siemens {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Headlines tighter on really small screens */
  h1[style*="clamp(3rem"] {
    font-size: 1.75rem !important;
  }
  h2[style*="clamp"] {
    font-size: 1.35rem !important;
  }

  /* 4-col stays 2-col but with smaller gap */
  [style*="grid-template-columns:repeat(4"] {
    gap: 0.5rem !important;
  }
  [style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce service-card icon size */
  span[style*="font-size:2rem"][class*="material-symbols-outlined"] {
    font-size: 1.5rem !important;
  }

  /* Stat number on stat strip */
  span[style*="font-size:clamp(2.5rem, 5vw, 4rem)"] {
    font-size: 1.85rem !important;
  }

  /* Mobile CTA bar: compact labels */
  #mx-mobile-cta a {
    font-size: 0.7rem;
    padding: 0.6rem 0.4rem;
    letter-spacing: 0.02em;
  }
  #mx-mobile-cta a .material-symbols-outlined {
    font-size: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY & PERFORMANCE
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast mode: ensure visible focus */
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible {
    outline: 2px solid CanvasText !important;
  }
}

/* Landscape phone: shorten hero so CTAs are reachable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  section[id="home"] {
    padding: 80px 0 1.5rem !important;
    min-height: auto !important;
  }
  h1[style*="clamp(3rem"] {
    font-size: 1.75rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PRINT
   ════════════════════════════════════════════════════════════════════════ */
@media print {
  header, footer, .mobile-hamburger, #mx-mobile-cta, .mx-mega { display: none !important; }
  main { padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}