/*
 * native-widgets.css
 * ------------------------------------------------------------------
 * Styles STOCK Elementor widgets (Heading, Text Editor, Icon List,
 * Image, Button) so the inner pages keep their pixel-perfect Figma
 * look now that they are built from real widgets instead of one big
 * raw-HTML block.
 *
 * Everything is scoped under .prabha-article / .prabha-sec so that
 * the Elementor Default Kit typography (.elementor-kit-7 h1..h6,
 * specificity 0,1,1) and inner-pages.css's blanket
 * `.elementor-heading-title { font-size:30px!important }` cannot win.
 */

/* ---------- Section shells (replace .cat-section / .cat-section-inner) ---------- */

/* Padding for .prabha-sec comes from the Elementor section settings
   (desktop/tablet/mobile), since per-element CSS outranks this file. */

.prabha-sec > .elementor-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.prabha-sec--alt {
    background: #f8fafc;
}

/* Banner sections carry their own padding inside the widget. */
.prabha-banner-sec {
    padding: 0;
}

/* ---------- Article column (replaces .cat-article) ---------- */

.elementor-column.prabha-article {
    max-width: 900px;
}

/* Take over vertical rhythm from Elementor's default widget spacing. */
.prabha-article .elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

.prabha-article .elementor-widget-wrap > .elementor-element:first-child {
    margin-top: 0 !important;
}

/* ---------- Heading widget (replaces .cat-article h2) ---------- */

.prabha-article .elementor-widget-heading {
    margin: 38px 0 14px;
}

.prabha-article .elementor-widget-heading .elementor-heading-title {
    margin: 0;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: #1f2938 !important;
}

/* ---------- Text Editor widget (replaces .cat-article p) ---------- */

.prabha-article .elementor-widget-text-editor {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.75;
    color: #475569;
}

.prabha-article .elementor-widget-text-editor p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.75;
    color: #475569;
}

.prabha-article .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}

.prabha-article .elementor-widget-text-editor a {
    color: #2e6fe6;
}

.prabha-article .elementor-widget-text-editor strong {
    color: #1f2938;
    font-weight: 700;
}

/* ---------- Icon List widget (replaces ul.cat-check) ---------- */

.prabha-article .elementor-widget-icon-list {
    margin-bottom: 18px;
}

.prabha-article .elementor-widget-icon-list .elementor-icon-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prabha-article .elementor-widget-icon-list .elementor-icon-list-item {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #334155;
}

.prabha-article .elementor-widget-icon-list .elementor-icon-list-icon {
    display: inline-flex;
    align-items: flex-start;
    margin-right: 12px;
    padding-top: 2px;
    color: #2e6fe6;
}

.prabha-article .elementor-widget-icon-list .elementor-icon-list-icon i {
    font-size: 15px;
    color: #2e6fe6;
}

/* Elementor may render the icon as inline SVG instead of an <i> webfont. */
.prabha-article .elementor-widget-icon-list .elementor-icon-list-icon svg {
    width: 15px;
    height: 15px;
    fill: #2e6fe6;
}

.prabha-article .elementor-widget-icon-list .elementor-icon-list-text {
    padding-left: 0;
    color: #334155;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .prabha-article .elementor-widget-heading .elementor-heading-title {
        font-size: 23px !important;
    }
}

@media (max-width: 767px) {
    .prabha-article .elementor-widget-heading {
        margin: 30px 0 12px;
    }

    .prabha-article .elementor-widget-text-editor,
    .prabha-article .elementor-widget-text-editor p {
        font-size: 15.5px;
    }
}

/* ---------- Feature card grid columns ----------
 * The Feature Cards widget sets --cat-cols. Apply it ONLY at desktop so the
 * 2-col (<=991px) and 1-col (<=767px) rules in page-catalog.css still win.
 */
@media (min-width: 992px) {
    .cat-features {
        grid-template-columns: repeat(var(--cat-cols, 3), 1fr);
    }
}

/* ---------- Layout "flow" helpers ----------
 * Several page stylesheets make a section or column a flex/grid container whose
 * DIRECT children are expected to be the markup blocks (.pc-info + .pc-form-card,
 * .pp-section-head + .pp-facts-card, ...). Elementor nests its own wrappers in
 * between, which would become the flex items instead. Marking the container with
 * .prabha-flow (section is the layout parent) or .prabha-flow-col (column is the
 * layout parent) makes those wrappers layout-transparent so the original CSS
 * applies to the real blocks.
 */
.prabha-flow > .elementor-container,
.prabha-flow > .elementor-container > .elementor-column,
.prabha-flow > .elementor-container > .elementor-column > .elementor-widget-wrap,
.prabha-flow .elementor-widget-wrap > .elementor-element,
.prabha-flow .elementor-widget-wrap > .elementor-element > .elementor-widget-container {
    /* !important: Elementor's own .elementor-section .elementor-container and
       .elementor-widget-wrap display:flex rules load later in the cascade. */
    display: contents !important;
}

.prabha-flow-col > .elementor-widget-wrap,
.prabha-flow-col > .elementor-widget-wrap > .elementor-element,
.prabha-flow-col > .elementor-widget-wrap > .elementor-element > .elementor-widget-container {
    /* !important: Elementor's own .elementor-section .elementor-container and
       .elementor-widget-wrap display:flex rules load later in the cascade. */
    display: contents !important;
}