/******************************************************************************
    WYSIWYG-Embed Widget
    Dieterle Programmierung
    https://www.dieterle-programmierung.de

    Version : 1.0.0

    Bettet den HTML-WYSIWYG-Editor (/_eigenes/tools/wysiwyg-editor.html)
    als eigenstaendiges Dokument in eine Zeta-Seite ein.

    Der Editor ist ein VOLLSTAENDIGES HTML-Dokument mit
    body{height:100vh;overflow:hidden}. Direkt in ein Sourcecode-Widget
    gepastet trifft dieses CSS den <body> der Webseite, kappt die Seite auf
    Bildschirmhoehe und verschluckt alles, was darunter steht. Deshalb
    zwingend als <iframe> - der bekommt seinen eigenen Viewport.

    Im Markup wird nur ein Variablenblock gepflegt, wysiwyg.js baut daraus
    die Rahmung:

        <div class="WysiwygEmbed" data-src="..." data-title="..."></div>

    Geometrie ueber die Tokens unten:
        --MaxWidth   Breite des Blocks, wie .TalkList bei 1000px
        --FrameH     Hoehe des Editorfensters
        --FrameMinH  Mindesthoehe, greift auf niedrigen Bildschirmen

    Kein sandbox-Attribut am iframe: der Editor nutzt localStorage,
    Clipboard-API, FileReader, Blob-Download und print(). Die Datei liegt
    auf derselben Domain, same-origin ohne Sandbox ist hier korrekt.

    Passend zu project-widget.css, article.css, talks.css und shop.css.
******************************************************************************/


/******************************************************************************
    Design Tokens
******************************************************************************/

.WysiwygEmbed {

    --Accent      : #FFC439;   /* brand gold                        */
    --AccentSoft  : #ffd15f;

    --Heading     : #ffffff;
    --Text        : #e6e8eb;
    --TextMuted   : #aab0b7;

    --Surface     : #3c3f43;   /* = Seitenhintergrund               */
    --SurfaceAlt  : #474b50;   /* Leiste ueber dem Editor           */
    --Line        : #565b61;

    /* Geometrie - Breite exakt wie .TalkList in talks.css, damit der Block
       buendig unter den Talks- und Shop-Widgets steht.                     */
    --MaxWidth    : 1000px;            /* wie talks.css                    */
    --FrameH      : min(88vh, 1200px); /* Hoehe des Editorfensters         */
    --FrameMinH   : 720px;             /* Mindesthoehe                     */
    --Radius      : 14px;

    color       : var(--Text);
    font-family : "Segoe UI", Arial, sans-serif;
    font-size   : 16px;
    line-height : 1.6;
}


/******************************************************************************
    Block

    Bleibt in der Inhaltsspalte, genau wie .TalkList: max-width plus
    automatische Seitenraender. Die Spalte von Zeta ist rund 1100px breit
    (#wrapper max-width:1220px minus 2x40px Polster, minus 2x20px in
    #webboxplus), 1000px passen also immer hinein.

    KEIN Full-Bleed ueber negative Raender und 100vw: 100vw zaehlt die
    senkrechte Scrollleiste mit, und Prozentwerte in den Raendern beziehen
    sich auf die Spalte, nicht auf das Fenster. Beides zusammen schiebt den
    Block ueber den rechten Seitenrand hinaus. Echte volle Breite bietet
    Zeta selbst ueber die Container-Option "Breakout" (.zpBreakout).
******************************************************************************/

.WysiwygEmbed {

    display       : block;
    position      : relative;
    width         : auto;
    max-width     : var(--MaxWidth);
    margin        : 30px auto;

    background    : var(--Surface);
    border        : 1px solid var(--Line);
    border-radius : var(--Radius);
    overflow      : hidden;
    box-shadow    : 0 18px 40px rgba(0, 0, 0, .28);
}


/******************************************************************************
    Kopfleiste
******************************************************************************/

.WysiwygBar {

    display       : flex;
    align-items   : center;
    gap           : 10px;
    padding       : 9px 14px;
    background    : var(--SurfaceAlt);
    border-bottom : 1px solid var(--Line);
}


.WysiwygTitle {

    margin        : 0;
    margin-right  : auto;
    min-width     : 0;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;

    color         : var(--Heading);
    font-size     : 15px;
    font-weight   : 600;
    line-height   : 1.3;
}


/* Kleiner goldener Punkt vor dem Titel - wie die Fensterknoepfe der
   Talks-Karten, damit die Leiste als Fensterrahmen lesbar bleibt. */
.WysiwygTitle::before {

    content       : "";
    display       : inline-block;
    width         : 9px;
    height        : 9px;
    margin-right  : 9px;
    border-radius : 50%;
    background    : var(--Accent);
    vertical-align: middle;
}


.WysiwygBtn {

    flex-shrink     : 0;
    padding         : 5px 14px;
    border          : 1px solid var(--Line);
    border-radius   : 999px;
    background      : transparent;
    color           : var(--Text);
    cursor          : pointer;

    font-family     : inherit;
    font-size       : 13px;
    font-weight     : 600;
    line-height     : 1.4;
    text-decoration : none;
    white-space     : nowrap;

    transition      : background .2s, color .2s, border-color .2s;
}


.WysiwygBtn:hover,
.WysiwygBtn:focus-visible {

    background   : var(--Accent);
    border-color : var(--Accent);
    color        : #2a2c2f;
}


/******************************************************************************
    Editorfenster

    resize:vertical gibt dem Besucher einen Ziehgriff unten rechts, falls die
    Standardhoehe nicht reicht. Dafuer muss overflow gesetzt sein.
******************************************************************************/

.WysiwygStage {

    position   : relative;
    height     : var(--FrameH);
    min-height : var(--FrameMinH);
    overflow   : hidden;
    resize     : vertical;
    background : #e9edf5;
}


.WysiwygFrame {

    display    : block;
    width      : 100%;
    height     : 100%;
    border     : 0;
    background : #e9edf5;
}


/******************************************************************************
    Vollbild
******************************************************************************/

.WysiwygEmbed:fullscreen {

    width         : 100%;
    max-width     : none;
    margin        : 0;
    border        : 0;
    border-radius : 0;
    box-shadow    : none;
}


.WysiwygEmbed:fullscreen .WysiwygStage {

    height     : calc(100vh - 45px);
    min-height : 0;
    resize     : none;
}


/******************************************************************************
    Schmale Bildschirme

    Unter 900px ist die Spalte ohnehin schmaler als --MaxWidth, dort zaehlt
    nur noch die Hoehe: 720px Mindesthoehe waeren auf einem Notebook oder
    Tablet mehr als der ganze Bildschirm.
******************************************************************************/

@media (max-width: 900px) {

    .WysiwygEmbed {

        --FrameH    : 75vh;
        --FrameMinH : 520px;

        margin-top    : 20px;
        margin-bottom : 20px;
    }
}


@media (max-width: 620px) {

    .WysiwygEmbed {

        --FrameH    : 70vh;
        --FrameMinH : 420px;
    }

    .WysiwygStage { resize : none; }
}
