/**
 * Codex Elementor Article Importer — frontend responsive helpers.
 * Intentionally layout-focused so Elementor remains in control of visual design.
 */

/* Prevent imported article content from creating horizontal page overflow. */
.auto-article-root,
.auto-article-root .elementor-element,
.auto-article-root .elementor-widget-container {
    min-width: 0;
    max-width: 100%;
}

/* Images and embedded media should never exceed the content column. */
.auto-article-root img,
.auto-image img,
.auto-article-root video,
.auto-article-root iframe {
    max-width: 100%;
}

.auto-article-root img,
.auto-image img {
    height: auto;
}

/* Responsive technical/data tables. */
.ceai-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: auto;
}

.ceai-table-wrap table {
    width: 100%;
    max-width: none;
    border-collapse: collapse;
    table-layout: auto;
}

.ceai-table-wrap th,
.ceai-table-wrap td {
    vertical-align: top;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

/*
 * KRL article table typography.
 * Keep table text readable without forcing narrow technical tables to wrap
 * excessively. These values match the requested Elementor responsive sizes:
 * desktop 16px, tablet 14px, mobile 12px. !important is intentional here
 * because the Source #11943 prototype can carry Elementor widget typography
 * declarations with higher specificity.
 */
.auto-article-root .auto-table .ceai-table-wrap th,
.auto-article-root .auto-table .ceai-table-wrap td,
.auto-table .ceai-table-wrap th,
.auto-table .ceai-table-wrap td {
    font-size: 16px !important;
    line-height: 1.5;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .auto-article-root .auto-faq .elementor-tab-title,
    .auto-article-root .auto-faq .elementor-accordion-title,
    .auto-article-root .auto-faq .elementor-toggle-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title-text,
    .auto-article-root .auto-faq .ceai-faq-question,
    .auto-faq .elementor-tab-title,
    .auto-faq .elementor-accordion-title,
    .auto-faq .elementor-toggle-title,
    .auto-faq .e-n-accordion-item-title,
    .auto-faq .e-n-accordion-item-title-text,
    .auto-faq .ceai-faq-question {
        font-size: 16px !important;
    }

    .auto-article-root .auto-faq .elementor-tab-content,
    .auto-article-root .auto-faq .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title,
    .auto-faq .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title,
    .auto-article-root .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor,
    .auto-article-root .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor p,
    .auto-article-root .auto-faq .ceai-faq-answer,
    .auto-faq .elementor-tab-content,
    .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor,
    .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor p,
    .auto-faq .ceai-faq-answer {
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    .auto-article-root .auto-table .ceai-table-wrap th,
    .auto-article-root .auto-table .ceai-table-wrap td,
    .auto-table .ceai-table-wrap th,
    .auto-table .ceai-table-wrap td {
        font-size: 12px !important;
    }

    .auto-article-root .auto-faq .elementor-tab-title,
    .auto-article-root .auto-faq .elementor-accordion-title,
    .auto-article-root .auto-faq .elementor-toggle-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title-text,
    .auto-article-root .auto-faq .ceai-faq-question,
    .auto-faq .elementor-tab-title,
    .auto-faq .elementor-accordion-title,
    .auto-faq .elementor-toggle-title,
    .auto-faq .e-n-accordion-item-title,
    .auto-faq .e-n-accordion-item-title-text,
    .auto-faq .ceai-faq-question {
        font-size: 16px !important;
        line-height: 1.45;
    }

    .auto-article-root .auto-faq .elementor-tab-content,
    .auto-article-root .auto-faq .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title,
    .auto-faq .e-n-accordion-item > .e-con .elementor-widget-heading .elementor-heading-title,
    .auto-article-root .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor,
    .auto-article-root .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor p,
    .auto-article-root .auto-faq .ceai-faq-answer,
    .auto-faq .elementor-tab-content,
    .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor,
    .auto-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor p,
    .auto-faq .ceai-faq-answer {
        font-size: 14px !important;
        line-height: 1.55;
    }

    /*
     * Do not crush multi-column engineering tables into unreadably narrow cells.
     * Two-column tables can still fit naturally; wider tables become swipeable.
     */
    .ceai-table-wrap table {
        width: max-content;
        min-width: 100%;
    }

    .ceai-table-wrap th,
    .ceai-table-wrap td {
        min-width: 120px;
    }

    .ceai-table-wrap th:first-child,
    .ceai-table-wrap td:first-child {
        min-width: 145px;
    }

    .auto-list ul,
    .auto-list ol,
    .auto-article-root ul,
    .auto-article-root ol {
        padding-inline-start: 1.3em;
    }

    /* A mobile CTA should be easy to tap without spilling outside its container. */
    .auto-cta .elementor-button {
        width: 100%;
        justify-content: center;
    }
}

/* v0.3.8 FINAL KRL RESPONSIVE TYPOGRAPHY OVERRIDES
 * These rules mirror the values written into Elementor's own responsive
 * typography controls. They are a frontend safety net only.
 * FAQ Question/Title: 16 / 16 / 16.
 * FAQ Answer Heading: 16 / 14 / 14.
 * Table text: 16 / 14 / 12.
 */
.auto-article-root .auto-table .ceai-table-wrap th,
.auto-article-root .auto-table .ceai-table-wrap td,
.auto-table .ceai-table-wrap th,
.auto-table .ceai-table-wrap td {
    font-size: 16px !important;
}
.auto-article-root .auto-faq .elementor-tab-title,
.auto-article-root .auto-faq .elementor-accordion-title,
.auto-article-root .auto-faq .elementor-toggle-title,
.auto-article-root .auto-faq .e-n-accordion-item-title,
.auto-article-root .auto-faq .e-n-accordion-item-title-text,
.auto-faq .elementor-tab-title,
.auto-faq .elementor-accordion-title,
.auto-faq .elementor-toggle-title,
.auto-faq .e-n-accordion-item-title,
.auto-faq .e-n-accordion-item-title-text {
    font-size: 16px !important;
}
.auto-article-root .auto-faq .e-n-accordion-item .elementor-widget-heading .elementor-heading-title,
.auto-faq .e-n-accordion-item .elementor-widget-heading .elementor-heading-title,
.auto-article-root .auto-faq .elementor-tab-content,
.auto-faq .elementor-tab-content {
    font-size: 16px !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .auto-article-root .auto-table .ceai-table-wrap th,
    .auto-article-root .auto-table .ceai-table-wrap td,
    .auto-table .ceai-table-wrap th,
    .auto-table .ceai-table-wrap td {
        font-size: 14px !important;
    }
    .auto-article-root .auto-faq .elementor-tab-title,
    .auto-article-root .auto-faq .elementor-accordion-title,
    .auto-article-root .auto-faq .elementor-toggle-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title-text,
    .auto-faq .elementor-tab-title,
    .auto-faq .elementor-accordion-title,
    .auto-faq .elementor-toggle-title,
    .auto-faq .e-n-accordion-item-title,
    .auto-faq .e-n-accordion-item-title-text {
        font-size: 16px !important;
    }
    .auto-article-root .auto-faq .e-n-accordion-item .elementor-widget-heading .elementor-heading-title,
    .auto-faq .e-n-accordion-item .elementor-widget-heading .elementor-heading-title,
    .auto-article-root .auto-faq .elementor-tab-content,
    .auto-faq .elementor-tab-content {
        font-size: 14px !important;
    }
}

@media (max-width: 767px) {
    .auto-article-root .auto-table .ceai-table-wrap th,
    .auto-article-root .auto-table .ceai-table-wrap td,
    .auto-table .ceai-table-wrap th,
    .auto-table .ceai-table-wrap td {
        font-size: 12px !important;
    }
    .auto-article-root .auto-faq .elementor-tab-title,
    .auto-article-root .auto-faq .elementor-accordion-title,
    .auto-article-root .auto-faq .elementor-toggle-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title,
    .auto-article-root .auto-faq .e-n-accordion-item-title-text,
    .auto-faq .elementor-tab-title,
    .auto-faq .elementor-accordion-title,
    .auto-faq .elementor-toggle-title,
    .auto-faq .e-n-accordion-item-title,
    .auto-faq .e-n-accordion-item-title-text {
        font-size: 16px !important;
    }
    .auto-article-root .auto-faq .e-n-accordion-item .elementor-widget-heading .elementor-heading-title,
    .auto-faq .e-n-accordion-item .elementor-widget-heading .elementor-heading-title,
    .auto-article-root .auto-faq .elementor-tab-content,
    .auto-faq .elementor-tab-content {
        font-size: 14px !important;
    }
}
