/*
 * ==========================================================================
 * Traven Editor Custom Shortcodes & Components CSS Cheat Sheet
 * ==========================================================================
 *
 * This stylesheet serves as a reference, styling guide, and copy-paste 
 * boilerplate for theme developers styling Traven's custom [image] and 
 * [component] shortcode outputs in custom skins, site themes, or CMS layouts.
 *
 * To ensure visual parity between the WYSIWYM editor and the HTML preview:
 * 1. Target the ".traven-preview" class for the compiled HTML preview styles.
 * 2. Target the CodeMirror editor space using ".cm-editor" if you want to
 *    customize the editor's live WYSIWYM widget wrappers.
 *
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   1. Modern Theme Design System Variables
   -------------------------------------------------------------------------- */
:root {
  --traven-border-radius-sm: 6px;
  --traven-border-radius-md: 10px;
  --traven-border-radius-lg: 16px;
  
  --traven-color-text-main: #0f172a;       /* Slate 900 */
  --traven-color-text-muted: #64748b;      /* Slate 500 */
  --traven-color-text-blockquote: #475569;  /* Slate 600 */
  --traven-color-border: #e2e8f0;           /* Slate 200 */
  
  /* Component Colors */
  --traven-blockquote-border: #cbd5e1;
  --traven-blockquote-quote-mark: #cbd5e1;
  
  --traven-color-info-border: #1a1a1a;
  --traven-color-info-bg: #fafafa;
  --traven-color-info-text: #1a1a1a;
  
  --traven-color-warning-border: #1a1a1a;
  --traven-color-warning-bg: rgba(250, 204, 21, 0.25);
  --traven-color-warning-text: #1a1a1a;
}

/* Dark Mode Scheme (Prefers-Color-Scheme & CM Dark Class integration) */
@media (prefers-color-scheme: dark) {
  :root {
    --traven-color-text-main: #f8fafc;       /* Slate 50 */
    --traven-color-text-muted: #94a3b8;      /* Slate 400 */
    --traven-color-text-blockquote: #cbd5e1;  /* Slate 300 */
    --traven-color-border: #334155;           /* Slate 700 */
    
    --traven-blockquote-border: #475569;
    --traven-blockquote-quote-mark: #475569;
    
    --traven-color-info-border: #cbd5e1;
    --traven-color-info-bg: #1e293b;
    --traven-color-info-text: #cbd5e1;
    
    --traven-color-warning-border: #cbd5e1;
    --traven-color-warning-bg: rgba(250, 204, 21, 0.15);
    --traven-color-warning-text: #f8fafc;
  }
}

/* Also support editor's dark mode toggle class (.cm-wysiwym-dark) */
.cm-wysiwym-dark,
.traven-preview.cm-wysiwym-dark {
  --traven-color-text-main: #f8fafc;
  --traven-color-text-muted: #94a3b8;
  --traven-color-text-blockquote: #cbd5e1;
  --traven-color-border: #334155;
  
  --traven-blockquote-border: #475569;
  --traven-blockquote-quote-mark: #475569;
  
  --traven-color-info-border: #cbd5e1;
  --traven-color-info-bg: #1e293b;
  --traven-color-info-text: #cbd5e1;
  
  --traven-color-warning-border: #cbd5e1;
  --traven-color-warning-bg: rgba(250, 204, 21, 0.15);
  --traven-color-warning-text: #f8fafc;
}

/* --------------------------------------------------------------------------
   2. Custom [image] Shortcode Styles
   --------------------------------------------------------------------------
   Markup Options Generated by Fallback HTML Compiler:
   
   A. Without Caption:
      <img src="..." alt="..." class="traven-image-shortcode align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
      
   B. With Caption:
      <figure class="traven-image-figure align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
        <img src="..." alt="..." class="traven-image-shortcode">
        <figcaption class="traven-image-caption">Caption Text</figcaption>
      </figure>
   -------------------------------------------------------------------------- */

/* Base container/image rules in preview container */
.traven-preview img.traven-image-shortcode,
.traven-preview figure.traven-image-figure {
  max-width: 100%;
  height: auto;
  border-radius: var(--traven-border-radius-sm);
  margin: 16px auto;
  display: block;
  box-sizing: border-box;
}

.traven-preview figure.traven-image-figure img.traven-image-shortcode {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: block;
  border-radius: var(--traven-border-radius-sm);
}

/* Figcaption Caption styling */
.traven-preview figure.traven-image-figure figcaption.traven-image-caption {
  font-size: 0.85em;
  color: var(--traven-color-text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
  font-style: italic;
}

/* Alignments (Preserves visual flows) */
.traven-preview img.traven-image-shortcode.align-left,
.traven-preview figure.traven-image-figure.align-left {
  float: left;
  margin: 12px 20px 12px 0;
  clear: left;
}

.traven-preview img.traven-image-shortcode.align-right,
.traven-preview figure.traven-image-figure.align-right {
  float: right;
  margin: 12px 0 12px 20px;
  clear: right;
}

.traven-preview img.traven-image-shortcode.align-center,
.traven-preview figure.traven-image-figure.align-center {
  margin: 20px auto;
  display: block;
  float: none;
  clear: both;
}

/* Fullbleed image breakout (forces content to 100% viewport width) */
.traven-preview img.traven-image-shortcode.align-fullbleed,
.traven-preview figure.traven-image-figure.align-fullbleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  height: auto !important;
}

.traven-preview figure.traven-image-figure.align-fullbleed img.traven-image-shortcode {
  border-radius: 0 !important;
}

/* Sizing Configurations */
.traven-preview img.traven-image-shortcode.size-small,
.traven-preview figure.traven-image-figure.size-small {
  width: 180px;
}

.traven-preview img.traven-image-shortcode.size-medium,
.traven-preview figure.traven-image-figure.size-medium {
  width: 380px;
}

.traven-preview img.traven-image-shortcode.size-large,
.traven-preview figure.traven-image-figure.size-large {
  width: 680px;
}

.traven-preview img.traven-image-shortcode.size-full,
.traven-preview figure.traven-image-figure.size-full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. Custom [blockquote] / [quote] Component Styles
   --------------------------------------------------------------------------
   Markup Generated:
   <blockquote class="traven-component-blockquote">
     <p>Quote text...</p>
     [<footer><cite>— Author Name, Source Title</cite></footer>]
   </blockquote>
   -------------------------------------------------------------------------- */

.traven-preview .traven-component-blockquote {
  border-left: none !important;
  padding: 12px 40px !important;
  margin: 24px 0 !important;
  position: relative;
  font-style: italic;
  color: var(--traven-color-text-blockquote);
  background-color: transparent !important;
}

.traven-preview .traven-component-blockquote::before {
  content: "“";
  font-family: Georgia, serif;
  font-size: 3em;
  line-height: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  color: var(--traven-blockquote-quote-mark);
}

.traven-preview .traven-component-blockquote p {
  margin: 0 !important;
  line-height: 1.6 !important;
}

.traven-preview .traven-component-blockquote p:not(:last-of-type) {
  margin-bottom: 8px !important;
}

.traven-preview .traven-component-blockquote footer {
  margin-top: 8px;
  text-align: right;
}

.traven-preview .traven-component-blockquote cite {
  display: block;
  font-family: Georgia, serif;
  font-size: 0.85em;
  color: var(--traven-color-text-muted);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   4. Custom [pullquote] Component Styles
   --------------------------------------------------------------------------
   Markup Generated:
   <blockquote class="traven-component-pullquote">
     <p>Editorial emphasized text...</p>
   </blockquote>
   -------------------------------------------------------------------------- */

.traven-preview .traven-component-pullquote {
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 32px 0 !important;
  padding: 0 !important;
  font-size: 1.35em !important;
  font-weight: bold !important;
  font-style: normal !important;
  text-align: center;
  color: var(--traven-color-text-main);
  background-color: transparent !important;
}

.traven-preview .traven-component-pullquote p {
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Centered visual wave or line dividers above/below the pullquote */
.traven-preview .traven-component-pullquote::before {
  content: "";
  display: block;
  width: 60%;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 6'%3E%3Cpath d='M0 3 C 40 1.5, 70 4.5, 100 3 S 160 1.5, 200 3' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  margin: 0 auto 20px auto;
  border: none;
}

.traven-preview .traven-component-pullquote::after {
  content: "";
  display: block;
  width: 60%;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 6'%3E%3Cpath d='M0 3 C 40 1.5, 70 4.5, 100 3 S 160 1.5, 200 3' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  margin: 20px auto 0 auto;
  border: none;
}

/* Dark mode divider updates */
.traven-preview.cm-wysiwym-dark .traven-component-pullquote::before,
.traven-preview.cm-wysiwym-dark .traven-component-pullquote::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 200 6'%3E%3Cpath d='M0 3 C 40 1.5, 70 4.5, 100 3 S 160 1.5, 200 3' stroke='%23cbd5e1' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100% !important;
}

/* --------------------------------------------------------------------------
   5. Custom [component="info" | "warning"] Generic Cards
   --------------------------------------------------------------------------
   Markup Generated:
   <div class="traven-component traven-component-[info|warning]">
     <p>Card content paragraph...</p>
   </div>
   -------------------------------------------------------------------------- */

/* Standard fallback container wrapper for unknown components */
.traven-preview .traven-component {
  border: 1px solid var(--traven-color-border);
  background-color: var(--traven-color-info-bg);
  color: var(--traven-color-text-main);
  padding: 16px;
  border-radius: var(--traven-border-radius-md);
  margin: 20px 0;
}

/* Info Box - Hand-drawn organic border radius */
.traven-preview .traven-component-info {
  border: 2px solid var(--traven-color-info-border) !important;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  background-color: var(--traven-color-info-bg) !important;
  color: var(--traven-color-info-text) !important;
  padding: 18px 24px !important;
  margin: 24px 0 !important;
}

.traven-preview .traven-component-info p {
  font-size: 0.95em !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.traven-preview .traven-component-info p:not(:last-child) {
  margin-bottom: 8px !important;
}

/* Warning Box - Yellow tint background with hand-drawn organic border */
.traven-preview .traven-component-warning {
  border: 2px solid var(--traven-color-warning-border) !important;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  background-color: var(--traven-color-warning-bg) !important;
  color: var(--traven-color-warning-text) !important;
  padding: 18px 24px !important;
  margin: 24px 0 !important;
}

.traven-preview .traven-component-warning p {
  font-size: 0.95em !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.traven-preview .traven-component-warning p:not(:last-child) {
  margin-bottom: 8px !important;
}

/* --------------------------------------------------------------------------
   6. Custom [video] Shortcode Styles
   --------------------------------------------------------------------------
   Markup Options Generated by Fallback HTML Compiler:
   
   A. Without Caption:
      <div class="traven-video-container align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
        <iframe src="..." ...></iframe> <!-- for YouTube/Vimeo -->
        <!-- OR -->
        <video src="..." controls></video> <!-- for direct video files -->
      </div>
      
   B. With Caption:
      <figure class="traven-video-figure align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
        <div class="traven-video-container">
          <iframe src="..." ...></iframe> <!-- for YouTube/Vimeo -->
          <!-- OR -->
          <video src="..." controls></video> <!-- for direct video files -->
        </div>
        <figcaption class="traven-video-caption">Caption Text</figcaption>
      </figure>
   -------------------------------------------------------------------------- */

.traven-preview .traven-video-container,
.traven-preview figure.traven-video-figure {
  max-width: 100%;
  border-radius: var(--traven-border-radius-sm);
  margin: 16px auto;
  display: block;
  box-sizing: border-box;
}

/* Aspect-ratio responsive container */
.traven-preview .traven-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--traven-border-radius-sm);
  background-color: #000000;
}

.traven-preview .traven-video-container iframe,
.traven-preview .traven-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--traven-border-radius-sm);
}

/* Figure wrapping adjustment */
.traven-preview figure.traven-video-figure .traven-video-container {
  margin: 0;
}

.traven-preview figure.traven-video-figure figcaption.traven-video-caption {
  font-size: 0.85em;
  color: var(--traven-color-text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
  font-style: italic;
}

/* Alignments */
.traven-preview .traven-video-container.align-left,
.traven-preview figure.traven-video-figure.align-left {
  float: left;
  margin: 12px 20px 12px 0;
  clear: left;
}

.traven-preview .traven-video-container.align-right,
.traven-preview figure.traven-video-figure.align-right {
  float: right;
  margin: 12px 0 12px 20px;
  clear: right;
}

.traven-preview .traven-video-container.align-center,
.traven-preview figure.traven-video-figure.align-center {
  margin: 20px auto;
  display: block;
  float: none;
  clear: both;
}

/* Fullbleed breakout */
.traven-preview .traven-video-container.align-fullbleed,
.traven-preview figure.traven-video-figure.align-fullbleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding-bottom: calc(100vw * 9 / 16) !important;
}

.traven-preview .traven-video-container.align-fullbleed iframe,
.traven-preview .traven-video-container.align-fullbleed video {
  border-radius: 0 !important;
}

/* Sizing Configurations */
.traven-preview .traven-video-container.size-small,
.traven-preview figure.traven-video-figure.size-small {
  width: 240px;
}

.traven-preview .traven-video-container.size-medium,
.traven-preview figure.traven-video-figure.size-medium {
  width: 420px;
}

.traven-preview .traven-video-container.size-large,
.traven-preview figure.traven-video-figure.size-large {
  width: 680px;
}

.traven-preview .traven-video-container.size-full,
.traven-preview figure.traven-video-figure.size-full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. Custom [audio] Shortcode Styles
   --------------------------------------------------------------------------
   Markup Options Generated by Fallback HTML Compiler:
   
   A. Without Caption:
      <div class="traven-audio-container align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
        <audio src="..." controls></audio>
      </div>
      
   B. With Caption:
      <figure class="traven-audio-figure align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
        <div class="traven-audio-container">
          <audio src="..." controls></audio>
        </div>
        <figcaption class="traven-audio-caption">Caption Text</figcaption>
      </figure>
   -------------------------------------------------------------------------- */

.traven-preview .traven-audio-container,
.traven-preview figure.traven-audio-figure {
  max-width: 100%;
  border-radius: var(--traven-border-radius-sm);
  margin: 16px auto;
  display: block;
  box-sizing: border-box;
}

.traven-preview .traven-audio-container {
  position: relative;
  width: 100%;
  border-radius: var(--traven-border-radius-sm);
  background-color: transparent;
}

.traven-preview .traven-audio-container audio {
  display: block;
  width: 100%;
  border-radius: var(--traven-border-radius-sm);
}

/* Figure wrapping adjustment */
.traven-preview figure.traven-audio-figure .traven-audio-container {
  margin: 0;
}

.traven-preview figure.traven-audio-figure figcaption.traven-audio-caption {
  font-size: 0.85em;
  color: var(--traven-color-text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
  font-style: italic;
}

/* Alignments */
.traven-preview .traven-audio-container.align-left,
.traven-preview figure.traven-audio-figure.align-left {
  float: left;
  margin: 12px 20px 12px 0;
  clear: left;
}

.traven-preview .traven-audio-container.align-right,
.traven-preview figure.traven-audio-figure.align-right {
  float: right;
  margin: 12px 0 12px 20px;
  clear: right;
}

.traven-preview .traven-audio-container.align-center,
.traven-preview figure.traven-audio-figure.align-center {
  margin: 20px auto;
  display: block;
  float: none;
  clear: both;
}

/* Fullbleed breakout */
.traven-preview .traven-audio-container.align-fullbleed,
.traven-preview figure.traven-audio-figure.align-fullbleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  height: auto !important;
}

.traven-preview .traven-audio-container.align-fullbleed audio {
  border-radius: 0 !important;
}

/* Sizing Configurations */
.traven-preview .traven-audio-container.size-small,
.traven-preview figure.traven-audio-figure.size-small {
  width: 240px;
}

.traven-preview .traven-audio-container.size-medium,
.traven-preview figure.traven-audio-figure.size-medium {
  width: 380px;
}

.traven-preview .traven-audio-container.size-large,
.traven-preview figure.traven-audio-figure.size-large {
  width: 500px;
}

.traven-preview .traven-audio-container.size-full,
.traven-preview figure.traven-audio-figure.size-full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. Custom [figure] Shortcode Styles
   --------------------------------------------------------------------------
   Markup Options Generated by Fallback HTML Compiler:
   
   <figure class="traven-figure align-[left|right|center|fullbleed] size-[small|medium|large|full] [custom-classes]">
     <!-- Nested block elements (e.g. images, tables, code blocks) -->
     <figcaption class="traven-figure-caption">Caption Text</figcaption>
   </figure>
   -------------------------------------------------------------------------- */

.traven-preview figure.traven-figure {
  max-width: 100%;
  border: 1px solid var(--traven-color-border);
  border-radius: var(--traven-border-radius-md);
  padding: 16px;
  background-color: var(--traven-color-info-bg);
  margin: 20px auto;
  display: block;
  box-sizing: border-box;
}

/* Ensure nested children elements format correctly */
.traven-preview figure.traven-figure img,
.traven-preview figure.traven-figure pre,
.traven-preview figure.traven-figure table {
  margin-top: 0;
  margin-bottom: 12px;
}

.traven-preview figure.traven-figure figcaption.traven-figure-caption {
  font-size: 0.85em;
  color: var(--traven-color-text-muted);
  border-top: 1px solid var(--traven-color-border);
  padding-top: 8px;
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
  font-style: italic;
}

/* Alignments */
.traven-preview figure.traven-figure.align-left {
  margin: 12px auto 12px 0;
}

.traven-preview figure.traven-figure.align-left.size-small,
.traven-preview figure.traven-figure.align-left.size-medium {
  float: left;
  margin: 12px 20px 12px 0;
  clear: left;
}

.traven-preview figure.traven-figure.align-right {
  margin: 12px 0 12px auto;
}

.traven-preview figure.traven-figure.align-right.size-small,
.traven-preview figure.traven-figure.align-right.size-medium {
  float: right;
  margin: 12px 0 12px 20px;
  clear: right;
}

.traven-preview figure.traven-figure.align-center {
  margin: 20px auto;
  display: block;
  float: none;
  clear: both;
}

/* Fullbleed breakout */
.traven-preview figure.traven-figure.align-fullbleed {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  display: block !important;
  float: none !important;
  clear: both !important;
}

/* Sizing Configurations */
.traven-preview figure.traven-figure.size-small {
  width: 280px;
}

.traven-preview figure.traven-figure.size-medium {
  width: 460px;
}

.traven-preview figure.traven-figure.size-large {
  width: 720px;
}

.traven-preview figure.traven-figure.size-full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. Custom Theme Visual Integration Guide
   --------------------------------------------------------------------------
   * WYSIWYM PARITY WARNING:
     To keep the CodeMirror coordinate mapping engine stable and prevent cursor 
     displacement bugs:
     - DO NOT use CSS "float" properties inside primary editor WYSIWYM containers.
     - DO NOT apply vertical margins ("margin-top" or "margin-bottom") to editor 
       components or widget containers. Use top/bottom "padding" instead.
     - You may use "float" and margins freely inside the ".traven-preview" block
       as shown in this stylesheet.
   -------------------------------------------------------------------------- */