/* ============================================================
   Mindshield — shared stylesheet
   Loaded by every page via <link rel="stylesheet" href="styles.css">.
   Single source of truth for tokens, base styles, and the
   responsive layer that drives all .ms-* class layouts.
   ============================================================ */

/* Cross-document View Transitions: smooth cross-fade on every <a> nav.
   Supported in Chrome/Edge 126+ and Safari 18+; falls back to instant
   in Firefox until that ships. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Header and footer share their own transition group so they appear
   to persist across navigation instead of cross-fading with the body. */
::view-transition-group(site-header),
::view-transition-group(site-footer) { animation-duration: 280ms; }

:root {
  --bg: #F6F4EE;
  --bg-glass: rgba(246, 244, 238, 0.82);
  --surface: #FFFFFF;
  --surface-deep: #EFECE3;
  --fg: #0A1628;
  --fg-muted: #5A6678;
  --line: rgba(10, 22, 40, 0.10);
  --accent: #2C5F7F;
  --accent-soft: rgba(44, 95, 127, 0.4);
  --accent-bg: rgba(44, 95, 127, 0.06);
  --accent-glow: rgba(44, 95, 127, 0.18);
}
[data-theme="dark"] {
  --bg: #0A1628;
  --bg-glass: rgba(10, 22, 40, 0.78);
  --surface: #0F1D33;
  --surface-deep: #08111F;
  --fg: #E8ECF2;
  --fg-muted: #8A98AE;
  --line: rgba(232, 236, 242, 0.09);
  --accent: #5FB3B3;
  --accent-soft: rgba(95, 179, 179, 0.35);
  --accent-bg: rgba(95, 179, 179, 0.08);
  --accent-glow: rgba(95, 179, 179, 0.25);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 250ms ease, color 250ms ease;
  scroll-behavior: smooth;
}
body { overflow-x: hidden; }
button { font-family: inherit; }
::selection { background: var(--accent); color: var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }

.ms-page-top { padding-top: 72px; }

/* ============================================================
   RESPONSIVE LAYER — drives all .ms-* class layouts on tablet/mobile.
   ============================================================ */

/* TABLET & SMALL DESKTOP (≤ 980px) ---------------------------- */
@media (max-width: 980px) {
  /* Hero: stack copy over shield, soften shield */
  .ms-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; min-height: auto !important; padding-top: 48px !important; padding-bottom: 64px !important; }
  .ms-hero-shield-wrap { min-height: 360px !important; justify-content: center !important; }

  /* Generic 2-col stacker */
  .ms-2col { grid-template-columns: 1fr !important; gap: 32px !important; align-items: flex-start !important; }

  /* Footer: 4-col → 2-col */
  .ms-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Services accordion */
  .ms-svc-trigger { grid-template-columns: 48px 1fr auto !important; gap: 16px !important; padding: 24px 20px !important; }
  .ms-svc-panel { grid-template-columns: 1fr !important; padding: 4px 20px 32px 20px !important; gap: 28px !important; }

  /* About: founder + posts grids */
  .ms-founder { grid-template-columns: 1fr !important; }
  .ms-founder-row { flex-direction: column !important; gap: 28px !important; }
  .ms-founder-row > div:first-child { width: 100% !important; max-width: 320px; }
  .ms-certs-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .ms-posts { grid-template-columns: 1fr !important; }
  .ms-post { grid-row: auto !important; }

  /* Asset landscape (services) — stack rows, drop side borders on chips */
  .ms-asset-layer { grid-template-columns: 1fr !important; gap: 20px !important; padding: 22px 22px !important; }
  .ms-asset-chips { border-left: 0 !important; border-right: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; padding: 16px 0 !important; }

  /* Assessment finding rows: stack severity to bottom */
  .ms-finding { grid-template-columns: 40px 1fr !important; gap: 16px !important; padding: 22px 24px !important; }
  .ms-finding > :last-child { grid-column: 1 / -1 !important; text-align: left !important; align-self: flex-start !important; margin-top: 4px !important; }
}

/* TABLET (≤ 768px) ----------------------------------------------- */
@media (max-width: 768px) {
  .ms-asset-layer { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ms-founder-row { flex-direction: column !important; gap: 28px !important; }
  .ms-founder-row > div:first-child { width: 100% !important; max-width: 320px; }
  .ms-certs-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .ms-footer-grid { grid-template-columns: 1fr 1fr !important; }
  /* Contain the spinning shield so its halo doesn't blow out the layout */
  .ms-hero-shield-wrap { overflow: hidden !important; }
}

/* MOBILE (≤ 640px) -------------------------------------------- */
@media (max-width: 640px) {
  /* Hide wordmark text — keep only shield icon in header */
  .ms-wordmark-text { display: none !important; }

  /* Hero: drop forced full-height, tighten paddings, soften lede */
  #home { min-height: auto !important; padding-top: 96px !important; padding-bottom: 56px !important; }
  .ms-hero-grid { min-height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 32px !important; }
  .ms-hero-br { display: none !important; }
  .ms-hero-title { letter-spacing: -0.025em !important; line-height: 1.02 !important; margin-bottom: 20px !important; }
  .ms-hero-lede { font-size: 16px !important; margin-bottom: 28px !important; }
  .ms-hero-shield-wrap { min-height: 240px !important; }

  /* Page padding */
  .ms-page-top { padding-top: 56px !important; }

  /* Footer: 2-col → 1-col */
  .ms-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Hero shield smaller on phones */
  .ms-hero-shield-wrap { min-height: 280px !important; }
  .ms-shield-stage { transform: scale(0.62); transform-origin: center; }

  /* Tighter container padding (1320 max + 32px → 20px) */
  header > div, .ms-hero-grid, .ms-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Services list: smaller header column, tighter padding */
  .ms-svc-trigger { padding: 20px 16px !important; gap: 14px !important; grid-template-columns: 40px 1fr auto !important; }
  .ms-svc-panel { padding: 4px 16px 28px 16px !important; gap: 24px !important; }

  /* Assessment finding rows: full-width, stacked */
  .ms-finding { grid-template-columns: 1fr !important; gap: 12px !important; padding: 20px !important; }
  .ms-finding > :first-child { grid-column: auto !important; }

  /* Asset chips: tighter wrap */
  .ms-asset-chips { gap: 6px !important; min-height: auto !important; }

  /* Footer link rows: looser tap targets */
  .ms-footer-link { padding: 4px 0 !important; display: inline-block; }

  /* Bold CTA button: full-width on phones */
  .ms-btn { white-space: normal !important; }

  /* Section vertical padding: 120px → 72px on phones */
  .ms-section { padding-top: 72px !important; padding-bottom: 72px !important; }
  /* Inner containers: 32px side → 20px */
  .ms-container { padding-left: 20px !important; padding-right: 20px !important; }
  /* Contact form card tighter padding */
  .ms-contact-card { padding: 20px !important; }
  /* Assessment screens */
  .ms-assess-wrap { padding: 80px 20px 56px !important; }
}

/* TINY (≤ 380px) ---------------------------------------------- */
@media (max-width: 380px) {
  .ms-shield-stage { transform: scale(0.5); }
}