* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    margin: 0;

    min-height: 100vh;

    padding: 40px 20px 70px;

    background:
        linear-gradient(
            135deg,
            #f4f0e7,
            #eee4d1
        );

    color: #2c241b;

    font-family: serif;

    direction: rtl;

    text-align: center;
}


/* ============================================================
   אזור המחולל
============================================================ */

.generator {
    width: min(1100px, 94%);

    margin: 0 auto;
}


/* ============================================================
   כותרת המחולל
============================================================ */

.generator-header {
    margin-bottom: 25px;
}


.generator-header h1 {
    margin: 0 0 8px;

    color: #6d1f25;

    font-size: 36px;

    font-weight: normal;

    line-height: 1.3;
}


.generator-header p {
    margin: 0;

    color: #806d52;

    font-size: 17px;
}


/* ============================================================
   כרטיס המחולל
============================================================ */

.editor-card {
    padding: 20px;

    background: #fffdf8;

    border: 1px solid #c5a86a;

    box-shadow:
        0 10px 30px rgba(60, 42, 20, 0.12),
        inset 0 0 0 3px #f4ead5;
}


/* ============================================================
   סרגל כלים
============================================================ */

.toolbar {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 15px;
}


.toolbar-button {
    padding: 10px 20px;

    border: 1px solid;

    border-radius: 4px;

    font-family: serif;

    font-size: 18px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.toolbar-button:hover {
    transform: translateY(-1px);
}


.rashi-button {
    background: #34271d;

    color: #f8edda;

    border-color: #34271d;
}


.rashi-button:hover {
    background: #49372a;
}


.title-button {
    background: #fffdf8;

    color: #a17a35;

    border-color: #b8944d;
}


.title-button:hover {
    background: #f5ecd9;
}


/* ============================================================
   חלון הקלט
============================================================ */

.editor {
    width: 100%;

    min-height: 400px;

    padding: 25px;

    background: #fffefa;

    border: 1px solid #c9b58e;

    border-radius: 4px;

    color: #2c241b;

    font-family: serif;

    font-size: 24px;

    line-height: 1.25;

    direction: rtl;

    text-align: center;

    white-space: pre-wrap;

    overflow: visible;

    outline: none;

    box-shadow:
        inset 0 2px 8px rgba(80, 60, 30, 0.05);
}


.editor:focus {
    border-color: #9b783d;

    box-shadow:
        0 0 0 2px rgba(155, 120, 61, 0.12),
        inset 0 2px 8px rgba(80, 60, 30, 0.05);
}


/* ============================================================
   עיצוב בזמן עריכה
============================================================ */

.editor .rashi {
    font-family:
        "Noto Rashi Hebrew",
        serif;
}


.editor .title {
    display: block;

    width: max-content;

    max-width: 100%;

    margin:
        3px
        6px
        3px
        auto;

    padding: 0;

    color: #a17a35;

    font-family: serif;

    font-size: 24px;

    font-weight: bold;

    line-height: 1.25;

    text-align: right;

    direction: rtl;
}


.editor .title::after {
    content: "";

    display: block;

    width: 100%;

    height: 1px;

    margin: 0;

    background:
        linear-gradient(
            to left,
            transparent,
            rgba(197, 168, 106, 0.35) 20%,
            rgba(184, 148, 77, 0.58) 50%,
            rgba(197, 168, 106, 0.35) 80%,
            transparent
        );
}


.editor .title.rashi {
    font-family:
        "Noto Rashi Hebrew",
        serif;
}


/* ============================================================
   הסבר
============================================================ */

.editor-help {
    margin-top: 10px;

    color: #806d52;

    font-size: 15px;
}


/* ============================================================
   כפתורים ראשיים
============================================================ */

.main-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;
}


.main-button {
    padding: 13px 26px;

    border-radius: 4px;

    font-family: serif;

    font-size: 18px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.main-button:hover {
    transform: translateY(-1px);
}


.create-button {
    background: #6d1f25;

    color: #fff;

    border: 1px solid #6d1f25;
}


.create-button:hover {
    background: #84262d;
}


.copy-button {
    background: #a17a35;

    color: #fff;

    border: 1px solid #8c682d;
}


.copy-button:hover {
    background: #b08a43;
}


/* ============================================================
   תצוגה מקדימה
============================================================ */

.preview-section,
.code-section {
    margin-top: 35px;
}


.preview-section h2,
.code-section h2 {
    margin: 0 0 14px;

    color: #6d1f25;

    font-size: 24px;

    font-weight: normal;
}


.preview-frame {
    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #eee4d1,
            #f8f3e8
        );

    border: 1px solid #c5a86a;
}


/* ============================================================
   הדף שבתצוגה המקדימה
============================================================ */

.generated-page {
    width: min(1000px, 92%);

    min-height: 500px;

    margin: 0 auto;

    padding: 10px;

    background: #fffdf8;

    border: 1px solid #c5a86a;

    box-shadow:
        0 12px 35px rgba(60, 42, 20, 0.15),
        inset 0 0 0 4px #f4ead5,
        inset 0 0 0 5px #c5a86a;

    color: #2c241b;

    font-family: serif;

    font-size: 24px;

    line-height: 1.25;

    direction: rtl;

    text-align: center;

    white-space: normal;

    overflow: visible;
}


.generated-page .title {
    position: relative;

    display: block;

    width: max-content;

    max-width: 100%;

    margin:
        3px
        6px
        3px
        auto;

    padding: 0;

    color: #a17a35;

    font-family: serif;

    font-size: 24px;

    font-weight: bold;

    line-height: 1.25;

    text-align: right;

    direction: rtl;
}


.generated-page .title::after {
    content: "";

    display: block;

    width: 100%;

    height: 1px;

    margin: 0;

    background:
        linear-gradient(
            to left,
            transparent,
            rgba(197, 168, 106, 0.35) 20%,
            rgba(184, 148, 77, 0.58) 50%,
            rgba(197, 168, 106, 0.35) 80%,
            transparent
        );
}


.generated-page .rashi {
    font-family:
        "Noto Rashi Hebrew",
        serif;
}


.generated-page .title.rashi {
    font-family:
        "Noto Rashi Hebrew",
        serif;
}


/* ============================================================
   קישורים
============================================================ */

.generated-page a {
    color: inherit;

    text-decoration-line: underline;

    text-decoration-color: #a17a35;

    text-decoration-thickness: 1px;

    text-underline-offset: 4px;
}


/* ============================================================
   אזור קוד HTML
============================================================ */

.html-output {
    display: block;

    width: 100%;

    min-height: 400px;

    padding: 18px;

    background: #29251f;

    color: #eadfc9;

    border: 1px solid #8c713f;

    border-radius: 4px;

    direction: ltr;

    text-align: left;

    font-family:
        Consolas,
        Monaco,
        "Courier New",
        monospace;

    font-size: 14px;

    line-height: 1.55;

    resize: vertical;

    outline: none;
}


.html-output:focus {
    border-color: #c5a86a;

    box-shadow:
        0 0 0 2px rgba(197, 168, 106, 0.15);
}


/* ============================================================
   הודעות
============================================================ */

.status {
    min-height: 25px;

    margin-top: 15px;

    color: #6d1f25;

    font-size: 16px;
}


.status.error {
    color: #8a2727;
}