/* Responsive Containers */

.container {
  max-width: 67rem;
  margin: 0 auto;
  padding: 0 1.5rem; /* mobile gutter */
}

.container-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.flex-item {
  flex: 1 1 300px;
  min-width: 0;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .container-flex {
    flex-direction: column;
  }
}

/* Responsive Image */

.flex-item img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* TODO: Clean up CSS below */

.md-typeset .admonition.scenario,
.md-typeset details.scenario {
  /* border-left: 0.3rem solid #3b82f6; nice blue */
  /* background-color: var(--md-default-bg-color);
  box-shadow: 0 0 0 1px var(--md-primary-fg-color--transparent); */
  border-radius: .5rem;
}

.md-typeset .admonition.scenario > .admonition-title {
  font-weight: bold;
  font-size: 1rem;
  color: #3b82f6;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Poppins', sans-serif;
}

[data-md-color-scheme="default"] body,
[data-md-color-scheme="default"] .md-typeset {
  color: #0F222B;
}

[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-typeset {
  color: #dcdcdc;
}

.mdx-hero {
  padding-top:150px;
}

.fullwidth-table.md-typeset {
  margin: 100px auto;
  width: 100%;
  border-collapse: collapse;
}

.fullwidth-table.md-typeset th {
  font-weight: 700 !important;
}

.fullwidth-table.md-typeset th,
.fullwidth-table.md-typeset td {
  border-bottom: 1px solid var(--md-typeset-table-color);
  padding: 0.5em 1em;
  text-align: left;
}

.cmd-init        { background: #d1c4e9; color: #311b92; }
.cmd-agent       { background: #b2dfdb; color: #004d40; }
.cmd-plan        { background: #ffecb3; color: #ff6f00; }
.cmd-criteria    { background: #ffccbc; color: #bf360c; }
.cmd-conventions { background: #c8e6c9; color: #1b5e20; }
.cmd-compliance  { background: #f8bbd0; color: #880e4f; }
.cmd-io          { background: #b3e5fc; color: #01579b; }
.cmd-security    { background: #d7ccc8; color: #3e2723; }
.cmd-certify     { background: #e1bee7; color: #4a148c; }
.cmd-preview     { background: #cfd8dc; color: #263238; }
.cmd-compile     { background: #f0f4c3; color: #827717; }
.cmd-trace       { background: #b2ebf2; color: #006064; }
.cmd-compare     { background: #ffe0b2; color: #6d4c41; }
.cmd-keygen      { background: #dcedc8; color: #33691e; }
.cmd-mcp         { background: #f3e5f5; color: #6a1b9a; }
.cmd-tool-list   { background: #c5cae9; color: #1a237e; }
.cmd-audit       { background: #029BDE; color: #332654; }

[class^="cmd-"] {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.875em;
}

.doku-agent-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.doku-agent-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.doku-hero {
  min-height: 100vh;                 /* min-h-screen */
  display: flex;                     /* flex */
  align-items: center;              /* items-center */
  justify-content: center;          /* justify-center */
  background-color: #2d3748;        /* bg-gray-800 */
}

/* Hero section specific styles */

/* @media screen and (min-width: 60em) {
    .mdx-hero__content {
        max-width: 25rem !important; /* max-w-md */
    }
} */


/* #hero {
    position: relative;  Needed for absolute positioning of canvas
    overflow: hidden; Keep particles contained
}

#heroCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    vh: 100;
    z-index: 0; Behind hero content
}

.hero-content {
    position: relative; Ensure content is above canvas
    z-index: 1;
} */

/* Custom scrollbar for better aesthetics (optional) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #2d3748; /* dark-700 */
}
::-webkit-scrollbar-thumb {
    background: #4a5568; /* dark-600 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #718096; /* dark-500 */
}

/* .doku-why {
  background-color: #7e56c2;
  color: #edf2f7; text-gray-100
  text-align: center;
  padding: 240px 0;
} */

/* .doku-why-content {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.info-box {
  padding: 0 !important;
  margin: 0 !important;
}

.doku-feature-headline {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 100;
  color: #009485;
  text-align: center;
}

.doku-feature-subtext {
  text-align: center;
  padding: 0 1rem 2rem 1rem;
  font-size: .5rem;
}

.info-desc {
  font-size: .4rem;
}

a.shdw:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.2s ease-in-out;
} */

.md-typeset .emojione svg, .md-typeset .gemoji svg, .md-typeset .twemoji svg {
    fill: var(--md-accent-fg-color);
    max-height: 100%;
    width: var(--md-icon-size);
}

.doku-img {
  margin-top: -85px;
}

.md-banner .twemoji,
.threads .twemoji {
  box-shadow: inset 0 0 0 0 currentcolor !important;
  padding: .15rem .25rem 0 .25rem!important;
}

.announce {
  z-index: 9999 !important;
}