/* /css/cms-combined.css */

/* 
This file defines the styles for content generated by the CMS.
It's used in:
1. The Radzen HTML Editor's iframe (via JS injection).
2. The HTML Preview window.
3. The final Kiosk/Web Application.
*/

:root {
    /* --- Core Design Tokens --- */
    --cms-font-family: 'Roboto', Arial, sans-serif; /* Base font for all content */
    /* Base sizes - these are the 100% zoom, light mode defaults */
    --cms-font-size-base-val: 16; /* Unitless number for calculations */
    --cms-font-size-base: calc(var(--cms-font-size-base-val) * 1px); /* Default: 16px */
    --cms-line-height-base: 1.6;
    /* Light Mode Colors (Defaults) */
    --cms-text-color: #212529;
    --cms-bg-color: #ffffff;
    --cms-link-color: #007bff;
    --cms-link-hover-color: #0056b3;
    --cms-border-color: #dee2e6; /* For blockquotes, tables, etc. */
    --cms-blockquote-border-color: var(--cms-link-color);
    /* Heading Font Sizes (relative to --cms-font-size-base) */
    --cms-h1-scale: 2.5; /* h1 will be 2.5 * --cms-font-size-base */
    --cms-h2-scale: 2.0;
    --cms-h3-scale: 1.75;
    --cms-h4-scale: 1.5;
    --cms-h5-scale: 1.25;
    --cms-h6-scale: 1.0;
    /* Font Weights */
    --cms-font-weight-normal: 400;
    --cms-font-weight-bold: 700;
    /* --- Zoom Control --- */
    /* This variable will be changed by the application (Kiosk/Preview) to control zoom */
    /* It effectively scales --cms-font-size-base */
    --cms-zoom-factor: 1.0; /* Default 100% */
}

/* --- Dark Mode Theme --- */
/* This class is applied to a high-level container (e.g., body, .kiosk-wrapper) */
.cms-theme-dark {
    --cms-text-color: #e0e0e0;
    --cms-bg-color: #1e1e1e; /* Dark background */
    --cms-link-color: #64b5f6;
    --cms-link-hover-color: #42a5f5;
    --cms-border-color: #444444;
    --cms-blockquote-border-color: var(--cms-link-color);
}

/* --- Base Content Display Area --- */
/* This class should be on the direct parent of the HTML content from the editor,
   both in the iframe/preview and in the kiosk/webapp. */
.cms-content-display-area {
    font-family: var(--cms-font-family);
    /* Effective font size is the base size multiplied by the zoom factor */
    font-size: calc(var(--cms-font-size-base) * var(--cms-zoom-factor));
    line-height: var(--cms-line-height-base);
    color: var(--cms-text-color);
    background-color: var(--cms-bg-color);
    padding: 15px;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease, font-size 0.2s ease; /* Added font-size transition */
    /* For transform-based zoom (alternative, keep if needed for specific previews) */
    /* transform-origin: top left; */
    /* transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; */
}

    /* --- Standard HTML Element Styling --- */
    .cms-content-display-area h1,
    .cms-content-display-area h2,
    .cms-content-display-area h3,
    .cms-content-display-area h4,
    .cms-content-display-area h5,
    .cms-content-display-area h6 {
        font-family: var(--cms-font-family); /* Can be different if desired */
        color: var(--cms-text-color); /* Inherits, but can be specific */
        margin-top: 1em; /* Relative to current element's font size */
        margin-bottom: 0.5em; /* Relative to current element's font size */
        font-weight: var(--cms-font-weight-bold);
        line-height: 1.2; /* Common for headings */
    }

    /* Font sizes are now relative to the .cms-content-display-area's font-size */
    .cms-content-display-area h1 {
        font-size: calc(var(--cms-h1-scale) * 1em);
    }
    /* e.g. 2.5em of the container's font-size */
    .cms-content-display-area h2 {
        font-size: calc(var(--cms-h2-scale) * 1em);
    }

    .cms-content-display-area h3 {
        font-size: calc(var(--cms-h3-scale) * 1em);
    }

    .cms-content-display-area h4 {
        font-size: calc(var(--cms-h4-scale) * 1em);
    }

    .cms-content-display-area h5 {
        font-size: calc(var(--cms-h5-scale) * 1em);
    }

    .cms-content-display-area h6 {
        font-size: calc(var(--cms-h6-scale) * 1em);
    }

    .cms-content-display-area p {
        margin-top: 0;
        margin-bottom: 1em; /* Relative to current element's font size */
    }

    .cms-content-display-area a {
        color: var(--cms-link-color);
        text-decoration: none;
    }

        .cms-content-display-area a:hover {
            color: var(--cms-link-hover-color);
            text-decoration: underline;
        }

    .cms-content-display-area ul,
    .cms-content-display-area ol {
        padding-left: 1.25em; /* Relative to current font size for proportional indent */
        margin-top: 0;
        margin-bottom: 1em;
    }

    .cms-content-display-area li {
        margin-bottom: 0.25em;
    }

    .cms-content-display-area blockquote {
        border-left: 4px solid var(--cms-blockquote-border-color);
        padding-left: 1em;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1em;
        margin-bottom: 1em;
        font-style: italic;
    }

/* --- Utility Classes (Applied by JS from editor actions) --- */
/* These should override default styles for the element they are on */
.var-font-weight-normal {
    font-weight: var(--cms-font-weight-normal) !important;
}

.var-font-weight-bold {
    font-weight: var(--cms-font-weight-bold) !important;
}

.var-font-style-italic {
    font-style: italic !important;
}
/* .var-font-style-normal { font-style: normal !important; } */ /* If you add a tool to remove italic */

.var-text-decoration-underline {
    text-decoration: underline !important;
}

.var-text-decoration-line-through {
    text-decoration: line-through !important;
}
/* .var-text-decoration-none { text-decoration: none !important; } */ /* If you add a tool to remove decoration */

.var-text-align-left {
    text-align: left !important;
}

.var-text-align-center {
    text-align: center !important;
}

.var-text-align-right {
    text-align: right !important;
}

.var-text-align-justify {
    text-align: justify !important;
}

/* --- Styles for Preview Window Controls (these are outside the content area) --- */
.preview-window-controls {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(240, 240, 240, 0.95);
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10000;
    display: flex;
    gap: 5px;
}
/* Adjust preview controls for dark mode if the preview window itself can be themed */
.cms-theme-dark .preview-window-controls { /* If preview window body gets .cms-theme-dark */
    background: rgba(40, 40, 40, 0.95);
}

.preview-window-controls button {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
}

.cms-theme-dark .preview-window-controls button {
    background-color: #555;
    color: #fff;
    border-color: #777;
}

.preview-window-controls button:hover {
    background-color: #e9e9e9;
}

.cms-theme-dark .preview-window-controls button:hover {
    background-color: #666;
}

.content-preview-area {
    /* If controls are fixed, add padding to body or this area to prevent overlap */
    /* padding-top: 60px; */ /* Example, adjust based on controls height */
}


.cms-content-display-area ul,
.cms-content-display-area ol {
    /* Use logical properties for padding */
    padding-inline-start: 1.5em; /* This becomes padding-left in LTR, padding-right in RTL */
    /* padding-inline-end: 0; /* Usually not needed if start is set */

    margin-block-start: 0; /* Equivalent to margin-top */
    margin-block-end: 1em; /* Equivalent to margin-bottom */
    list-style-position: outside;
}