/* ============================================================
   MBC Technology Group — global styles
   Design tokens + base resets + responsive rules + nav behavior.
   Page bodies use inline styles (converted from the original
   design) and reference the CSS variables declared on .mbc below.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; }
input::placeholder, textarea::placeholder { color: #9AA3B2; }
/* iOS Safari zooms the page when focusing an input below 16px — clamp the floor. */
input, textarea, select { font-size: max(16px, 1rem); }

/* ---------- Design tokens ---------- */
.mbc {
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ink-900: #0B1626;
  --ink-800: #121826;
  --ink-700: #1A2440;
  --ink-600: #243047;
  --orange-700: #C4480F;
  --orange-600: #E65113;
  --orange-500: #FC601F;
  --orange-300: #FF8A5C;
  --orange-200: #FFD0BB;
  --orange-100: #FFE6D8;
  --orange-50: #FFF4EE;
  --white: #FFFFFF;
  --surface-card: #FBFCFE;
  --surface-muted: #F4F7FB;
  --border: #E5E7EB;
  --border-light: #EEF2F8;
  --text-strong: #121826;
  --text-body: #1F2937;
  --text-nav: #324867;
  --text-muted: #4A5568;
  --text-card: #5A6678;
  --text-label: #6B7280;
  --text-faint: #8A98B0;
  --on-dark-body: #AEB8C8;
  --on-dark-muted: #9FB1D6;
  --on-dark-faint: #7C8DB0;
  --crit: #d13438;
  --high: #e81123;
  --med: #f7630c;
  --low: #ffaa44;
  --info: #0078d4;
  --success: #16A34A;
  --success-bright: #16D97A;
  --color-brand: #FC601F;
  --color-brand-hover: #E65113;
  --color-brand-accent: #FF8A5C;
  --color-brand-tint: #FFE6D8;
  --color-brand-tint-soft: #FFF4EE;
  --container-max: 1180px;
  /* Fluid type scale (Utopia-style: rem + vw, scales 360px → 1200px). */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.13rem, 1.02rem + 0.49vw, 1.38rem);
  --step-2:  clamp(1.35rem, 1.13rem + 0.98vw, 1.88rem);
  --step-3:  clamp(1.62rem, 1.24rem + 1.68vw, 2.50rem);
  --step-4:  clamp(1.94rem, 1.34rem + 2.68vw, 3.25rem);
  /* Fluid spacing + layout rhythm. */
  --space-s: clamp(0.75rem, 0.69rem + 0.27vw, 0.88rem);
  --space-m: clamp(1rem, 0.91rem + 0.4vw, 1.25rem);
  --space-l: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --space-section: clamp(2.75rem, 1.6rem + 5vw, 4.5rem);
  --space-gutter: clamp(1.25rem, 0.6rem + 2.9vw, 3rem);
  --grid-dark: linear-gradient(rgba(255,138,92,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,138,92,0.06) 1px, transparent 1px);
  --grid-light: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--white);
  min-height: 100vh;
  min-height: 100svh;
  /* clip (not hidden) contains sideways overflow WITHOUT creating a scroll
     container that would break the sticky nav. */
  overflow-x: clip;
}

a { color: inherit; }

/* ---------- Layout utilities (intrinsic, fluid, mobile-first) ----------
   Reusable structural primitives. Grids use auto-fit + minmax so they reflow
   at ANY width (incl. tablet) with no per-breakpoint tuning; min(px,100%)
   prevents overflow below the track size. */
.mbc-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-gutter); }
.mbc-section { padding-block: var(--space-section); }
.mbc-grid { display: grid; gap: clamp(1rem, 0.6rem + 1.8vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.mbc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.mbc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.mbc-stack-s { display: flex; flex-direction: column; gap: var(--space-s); }

/* ---------- Keyframes ---------- */
@keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes sweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.mbctg-marquee:hover .mbctg-track { animation-play-state: paused; }

/* Respect users who prefer less motion — stop decorative loops. */
@media (prefers-reduced-motion: reduce) {
  .mbctg-track { animation: none !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
}

/* ---------- Nav: dropdown / mega menu + mobile menu ---------- */
.mbc-dropdown-menu { display: none; }
.mbc-dropdown:hover .mbc-dropdown-menu,
.mbc-dropdown:focus-within .mbc-dropdown-menu { display: block; animation: mbcMenuIn .16s ease; }
@keyframes mbcMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mbc-mega-item { transition: background .12s ease; }
.mbc-mega-item:hover { background: var(--surface-muted) !important; }

.mbc-burger { display: none; }
.mbc-mobile-menu { display: none; }
.mbc-mobile-menu.open { display: block; }
/* Guarantee 44px touch targets for the mobile menu links (not the CTA button). */
.mbc-mobile-menu a:not([style*="background: var(--color-brand)"]) { min-height: 44px; display: flex; align-items: center; }

.mbc-navlink { text-decoration: none; color: var(--text-nav); transition: color .15s ease; }
.mbc-navlink:hover, .mbc-navlink[aria-current="page"] { color: var(--color-brand); }

/* ---------- Intrinsic card grids (Layer 1 — no breakpoints) ----------
   Symmetric N-up card grids reflow continuously via auto-fit + minmax, so
   they show 3-up on desktop, 2-up on tablet, 1-up on phones with NO media
   query and no single collapse cliff. min(px,100%) prevents overflow under
   the track width. Asymmetric content/visual pairs are handled structurally
   in the media query below. */
.mbc [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
.mbc [style*="grid-template-columns: repeat(2, 1fr)"],
.mbc [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)) !important; }
.mbc [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }

/* ---------- Article (Markdown) prose ---------- */
.article-body { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 27px; letter-spacing: -0.01em; line-height: 1.2; color: var(--text-strong); margin: 44px 0 0; }
.article-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--text-strong); margin: 32px 0 0; }
.article-body p { margin: 18px 0 0; }
.article-body a { color: var(--color-brand); text-underline-offset: 2px; }
.article-body ul, .article-body ol { margin: 18px 0 0; padding-left: 22px; }
.article-body li { margin: 8px 0 0; }
.article-body li::marker { color: var(--color-brand); }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 28px 0 0; border: 1px solid var(--border); display: block; }
.article-body blockquote { margin: 28px 0 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--color-brand); font-size: 19px; line-height: 1.6; color: var(--text-strong); font-style: italic; }
.article-body code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-muted); padding: 2px 6px; border-radius: 5px; color: var(--ink-700); }
.article-body pre { margin: 24px 0 0; padding: 18px 20px; background: var(--ink-900); color: #e6edf3; border-radius: 12px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.article-body pre code { background: none; padding: 0; color: inherit; font-size: 14px; }
.article-body hr { border: none; border-top: 1px solid var(--border-light); margin: 36px 0 0; }
.article-body strong { color: var(--text-strong); font-weight: 600; }
.article-body table { width: 100%; border-collapse: collapse; margin: 24px 0 0; font-size: 15px; }
.article-body th, .article-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-light); }
.article-body th { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }

/* ---------- Pagefind search ---------- */
:root { --pagefind-ui-primary: #FC601F; --pagefind-ui-font: 'IBM Plex Sans', system-ui, sans-serif; --pagefind-ui-border-radius: 10px; }

/* ---------- Responsive (Layer 3 — structural shifts only) ---------- */
@media (max-width: 900px) {
  .mbc-navlinks, .mbc-actions { display: none !important; }
  .mbc-burger { display: inline-flex !important; }
  /* Asymmetric content+visual pairs stack (the symmetric card grids above
     reflow on their own and are intentionally NOT forced here). */
  .mbc [style*="grid-template-columns: 1.05fr 0.95fr"],
  .mbc [style*="grid-template-columns: 1.02fr 0.98fr"],
  .mbc [style*="grid-template-columns: 0.38fr 1fr"],
  .mbc [style*="grid-template-columns: 0.9fr 1.1fr"],
  .mbc [style*="grid-template-columns: 1fr 1.1fr"],
  .mbc [style*="grid-template-columns: 1fr 1.05fr"],
  .mbc [style*="grid-template-columns: 1.1fr 0.9fr"],
  .mbc [style*="grid-template-columns: 56px 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
  .mbc [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  .mbc [style*="padding: 72px 48px"] { padding: 52px 20px !important; }
  .mbc [style*="padding: 64px 48px 72px"] { padding: 44px 20px 52px !important; }
  .mbc [style*="padding: 64px 48px 70px"] { padding: 44px 20px 48px !important; }
  .mbc [style*="padding: 64px 48px 56px"] { padding: 44px 20px 40px !important; }
  .mbc [style*="padding: 64px 48px 64px"] { padding: 44px 20px 48px !important; }
  .mbc [style*="padding: 60px 48px 70px"] { padding: 40px 20px 48px !important; }
  .mbc [style*="padding: 60px 48px 64px"] { padding: 40px 20px 48px !important; }
  .mbc [style*="padding: 64px 48px"] { padding: 44px 20px !important; }
  .mbc [style*="padding: 56px 48px 72px"] { padding: 40px 20px 52px !important; }
  .mbc [style*="padding: 56px 48px 80px"] { padding: 40px 20px 56px !important; }
  .mbc [style*="padding: 56px 48px"] { padding: 40px 20px !important; }
  .mbc [style*="padding: 52px 48px 30px"] { padding: 44px 20px 28px !important; }
  .mbc [style*="padding: 26px 48px"] { padding: 22px 20px !important; }
  .mbc [style*="padding: 22px 48px"] { padding: 16px 20px !important; }
  .mbc [style*="padding: 18px 48px"] { padding: 14px 18px !important; }
  .mbc [style*="padding: 9px 48px"] { padding: 9px 16px !important; }
  .mbc [style*="padding: 0 48px"] { padding: 0 20px !important; }
  /* Fluid headings on small screens: scale smoothly 320→900, never overflow. */
  .mbc h1 { font-size: clamp(1.9rem, 1.1rem + 3.6vw, 2.4rem) !important; line-height: 1.08 !important; }
  .mbc h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 1.9rem) !important; }
  .mbc [style*="font-size: 40px"] { font-size: clamp(1.6rem, 1rem + 3vw, 2rem) !important; }
}
@media (max-width: 560px) {
  .mbc [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .mbc [style*="justify-content: space-between"] { flex-wrap: wrap; gap: 14px; }
}