/**
 * CSS fixes for TYPO3 v12 RTE content styling
 * This file addresses the issue with migrated content from v11 to v12 missing <p> tags
 */

/* 
 * Target text content without paragraph tags in RTE content areas
 * This ensures text without <p> tags has the same styling as text with proper paragraph tags
 */

/* Direct text in content elements - simulates paragraph styling */
.frame-default .ce-bodytext,
.frame-type-text .ce-bodytext,
.frame-type-textpic .ce-bodytext,
.frame-type-textmedia .ce-bodytext {
    display: block;
}

/* Apply paragraph-like styling to text directly in .ce-bodytext */
.ce-bodytext {
    display: block;
}

/* Force text content to have proper spacing */
.frame-default > .ce-bodytext,
.frame-type-text > .ce-bodytext,
.frame-type-textpic > .ce-bodytext,
.frame-type-textmedia > .ce-bodytext {
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Specific fix for the example HTML structure */
.frame-default:not(:has(> .ce-bodytext > p)):not(:has(> .ce-bodytext > ul)):not(:has(> .ce-bodytext > ol)) > .ce-bodytext,
.frame-type-text:not(:has(> .ce-bodytext > p)):not(:has(> .ce-bodytext > ul)):not(:has(> .ce-bodytext > ol)) > .ce-bodytext,
.frame-type-textpic:not(:has(> .ce-bodytext > p)):not(:has(> .ce-bodytext > ul)):not(:has(> .ce-bodytext > ol)) > .ce-bodytext,
.frame-type-textmedia:not(:has(> .ce-bodytext > p)):not(:has(> .ce-bodytext > ul)):not(:has(> .ce-bodytext > ol)) > .ce-bodytext {
    display: block;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Alternative approach for browsers that don't support :has() */
.ce-bodytext:empty + .ce-bodytext:not(:empty),
.ce-bodytext:not(:empty):not(:has(p)):not(:has(ul)):not(:has(ol)) {
    display: block;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Ensure text directly after headers has proper spacing */
header + .ce-bodytext:not(:has(p)):not(:has(ul)):not(:has(ol)),
.frame-default header + .ce-bodytext:not(:has(p)):not(:has(ul)):not(:has(ol)),
.frame-type-text header + .ce-bodytext:not(:has(p)):not(:has(ul)):not(:has(ol)),
.frame-type-textpic header + .ce-bodytext:not(:has(p)):not(:has(ul)):not(:has(ol)),
.frame-type-textmedia header + .ce-bodytext:not(:has(p)):not(:has(ul)):not(:has(ol)) {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Direct text content without any container */
.frame-default > :not(header):not(div):not(p):not(ul):not(ol):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(table),
.frame-type-text > :not(header):not(div):not(p):not(ul):not(ol):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(table),
.frame-type-textpic > :not(header):not(div):not(p):not(ul):not(ol):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(table),
.frame-type-textmedia > :not(header):not(div):not(p):not(ul):not(ol):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(table) {
    display: block;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Special case for direct text nodes in frame elements */
.frame-default:not(:empty),
.frame-type-text:not(:empty),
.frame-type-textpic:not(:empty),
.frame-type-textmedia:not(:empty) {
    position: relative;
}

/* Target text nodes directly in frame elements using ::after pseudo-element */
.frame-default::after,
.frame-type-text::after,
.frame-type-textpic::after,
.frame-type-textmedia::after {
    content: "";
    display: block;
    margin-bottom: 1rem;
}

/* Specific fix for the example HTML structure with direct text after header */
.frame-default header + :not(div):not(p):not(ul):not(ol):not(table),
.frame-type-text header + :not(div):not(p):not(ul):not(ol):not(table),
.frame-type-textpic header + :not(div):not(p):not(ul):not(ol):not(table),
.frame-type-textmedia header + :not(div):not(p):not(ul):not(ol):not(table) {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Direct targeting for text nodes after header - most specific case */
.frame-default header:first-child + text,
.frame-type-text header:first-child + text,
.frame-type-textpic header:first-child + text,
.frame-type-textmedia header:first-child + text {
    display: block;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Extremely specific selector for the exact HTML structure in the example */
#c4728.frame.frame-default.frame-type-text.frame-layout-0 > header + text,
.frame-default.frame-type-text.frame-layout-0 > header + text {
    display: block;
    margin-bottom: 1rem !important;
    line-height: 1.5;
}

/* Fallback for older browsers - apply to all content elements */
.frame-default,
.frame-type-text,
.frame-type-textpic,
.frame-type-textmedia {
    display: flow-root;
}

/* Ensure text nodes in .ce-bodytext have proper spacing */
.ce-bodytext {
    white-space: normal;
}

/* === Event details table (CKEditor 5 version) ================= */

/* 1. Base table box */
figure.table > .mod-table > table.contenttable {
    width: 100%;
    max-width: 600px;          /* keep the readable width */
    margin: 0;                 /* left‑aligned, no auto‑center */
    border-collapse: collapse;
    table-layout: auto;
}

/* 2. Cells */
figure.table > .mod-table > table.contenttable td {
    padding: 8px;
    vertical-align: top;
}

/* 3. Label vs. value columns ------------------------------ */
figure.table > .mod-table > table.contenttable td.label {
    white-space: nowrap;
    font-weight: bold;
    width: 30%;
}

figure.table > .mod-table > table.contenttable td.value {
    width: 70%;
    word-wrap: break-word;
}

/* 4. Responsive stacking below 600 px ---------------------- */
@media screen and (max-width: 600px) {
    figure.table,
    figure.table > .mod-table,
    figure.table > .mod-table > table.contenttable,
    figure.table > .mod-table > table.contenttable tbody,
    figure.table > .mod-table > table.contenttable tr,
    figure.table > .mod-table > table.contenttable td {
        display: block;
        width: 100%;
    }

    figure.table > .mod-table > table.contenttable tr {
        margin-bottom: 10px;
    }

    figure.table > .mod-table > table.contenttable td {
        box-sizing: border-box;
        padding: 6px 0;
    }

    figure.table > .mod-table > table.contenttable td.label {
        margin-bottom: 4px;
    }
}

figure.table {
    /* kill the left/right 40 px without touching images */
    margin: 1em 0;      /* keep the vertical spacing, drop the horizontal */
    /* or           margin: 0;        if you want no margin at all */
}
/* Shift legends inside powermail fieldsets 16 px left */
.tx-powermail fieldset > legend {
    position: relative;   /* take the legend out of the normal flow just enough */
    left: -16px;          /* move it 16 px to the left */
    /* optional: if you still see extra padding, reset it: */
    /* padding-left: 0;  */
    /* margin-left: 0;   */
}

/* Reset legend shift on mobile/responsive view to prevent overflow */
@media screen and (max-width: 767px) {
    .tx-powermail fieldset > legend {
        left: 0;
    }
}