// revealjs-base.scss — mkdocs-revealjs default corrections
// =========================================================
// PURPOSE:
//   Minimal opinionated fixes for elements that the plugin injects
//   (e.g. admonitions pre-rendered by _preprocess_admonitions) and
//   that don't behave well under Reveal.js's default text-align:center.
//
//   This file is loaded AUTOMATICALLY by the plugin, before any
//   user-supplied starter / hack / custom layers.
//   Users can override everything here via their own custom: CSS.
//
//   Keep this file SHORT. Only fix things that are clearly broken
//   by default. Do not style presentation content here.

// ── Admonitions & collapsible details ─────────────────────────────────────
// Reveal.js centers all slide content via flex + text-align:center on
// <section>. Admonitions are block-level information boxes — they must
// always be left-aligned internally regardless of slide alignment.

.reveal .slides section {

  ul, ol {
      display: inline-block;   // shrink-wrap to content width
      text-align: left;        // keep bullet text left-aligned inside the box
    }

  .admonition,
  details[class] {

    // Sizing & layout
    width:         var(--admon-width,      80%);
    max-width:     var(--admon-max-width,  none);
    margin:        var(--admon-margin,     1.5625em auto);
    padding:       var(--admon-padding,    0 .6rem);

    // Typography
    font-size:     var(--admon-font-size,  0.85em);
    text-align:    var(--text-align, left,);

    // Visual
    box-shadow: var(--admon-box-shadow,   none);
    // border-radius: var(--admon-radius,     .2rem);
    opacity:       var(--admon-opacity,    1);
    
    .danger {
      border: var(--admon-border,   .075rem solid #ff1744);
    }
    .note {
      border: var(--admon-border,   .075rem solid #448aff);
    }
    .tip {
      border: var(--admon-border,   .075rem solid #00bfa5);
    }
    .warning {
      border: var(--admon-border,   .075rem solid #ff9100);
    }
    
    p,
    .admonition-title,
    summary,
    ul,
    ol,
    li,
    pre,
    code {
      text-align: left;
    }
  }

  .twemoji {
    vertical-align:middle;
  }
}