/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


ul.custom-cat-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------------------------
 * Hero banner overlay — the desktop gradient (solid white 0-35%, fading
 * to transparent by 75%) only covers the narrow left text column desktop
 * uses. On tablet the text column is wider (65%) and on mobile it stretches
 * to full width, so the same gradient leaves later lines of text sitting
 * directly on the photo with no backing. Widen the solid/fade zone on
 * tablet, and use a flat, uniform translucent wash on mobile so the text
 * has consistent contrast across the full width instead of a hard edge.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-13 .elementor-element.elementor-element-282db67::before,
    .elementor-497 .elementor-element.elementor-element-b88b7c2::before,
    .elementor-270 .elementor-element.elementor-element-7d26975::before {
        background-image: linear-gradient(90deg, #FFFFFF 55%, #FFFFFF00 85%) !important;
    }
}

@media (max-width: 767px) {
    .elementor-13 .elementor-element.elementor-element-282db67::before,
    .elementor-497 .elementor-element.elementor-element-b88b7c2::before,
    .elementor-270 .elementor-element.elementor-element-7d26975::before {
        background-image: none !important;
        background-color: rgba(255, 255, 255, .78) !important;
    }
}

/* ---------------------------------------------------------------------
 * Blog filter bar (category dropdown, sort dropdown, category pills)
 * ------------------------------------------------------------------ */
.blog-filter-bar {
    font-family: Inter, sans-serif;
    margin: 20px 0;
}

.blog-filter-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-bottom: 15px;
}

/* Matches the post loop grid / sidebar split below it (grid ~70%, sidebar 30%,
   see the "blog-grid" row: the sidebar container is set to width:30% with no
   gap), so the search+categories group lines up with the grid's right edge
   and "Sort by" lines up with the sidebar. */
.blog-filter-bar__main {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1 1 80%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 20px;
}

/* Search — icon and input are flex siblings (not absolutely positioned),
   so they can never overlap regardless of global input padding/resets. */
.blog-filter-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 160px;
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    padding: 0 15px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.blog-filter-search:hover {
    border-color: #FF5A1F;
}

.blog-filter-search:focus-within {
    border-color: #FF5A1F;
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .12);
}

.blog-filter-search svg {
    width: 16px;
    height: 16px;
    fill: #99A1AF;
    flex-shrink: 0;
}

.blog-filter-search__input {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none;
    background: transparent;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #10203A;
    padding: 15px 0 !important;
}

/* Shared "custom select" look for both the category and sort dropdowns
   (native <select> can't show icons inside its options). */
.blog-filter-catselect,
.blog-filter-sort {
    position: relative;
}

.blog-filter-catselect {
    flex: 0 0 auto;
}

.blog-filter-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 20%;
    min-width: 0;
    box-sizing: border-box;
}

.blog-filter-sort__label {
    font-size: 14px;
    color: #61615C;
    white-space: nowrap;
}

.blog-filter-catselect__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #10203A;
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    padding: 15px;
    min-width: 190px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.blog-filter-catselect__toggle:hover,
.blog-filter-catselect__toggle:focus {
    background-color: #FFFFFF;
    border-color: #C9C9C9;
    color: #10203A;
}

.blog-filter-catselect.is-open .blog-filter-catselect__toggle,
.blog-filter-sort.is-open .blog-filter-catselect__toggle,
.blog-filter-catselect__toggle:focus-visible {
    background-color: #FFFFFF;
    border-color: #FF5A1F;
    color: #10203A;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .12);
}

.blog-filter-catselect__toggle svg {
    width: 14px;
    height: 14px;
    fill: #10203A;
    flex-shrink: 0;
}

.blog-filter-catselect__label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-filter-catselect__toggle svg:last-child {
    width: 10px;
    height: 10px;
    fill: #99A1AF;
    transition: transform .15s ease;
}

.blog-filter-catselect.is-open .blog-filter-catselect__toggle svg:last-child,
.blog-filter-sort.is-open .blog-filter-catselect__toggle svg:last-child {
    transform: rotate(180deg);
}

.blog-filter-catselect__list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

.blog-filter-sort .blog-filter-catselect__list {
    left: auto;
    right: 0;
}

.blog-filter-catselect.is-open .blog-filter-catselect__list,
.blog-filter-sort.is-open .blog-filter-catselect__list {
    display: block;
}

.blog-filter-catselect__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: #10203A;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.blog-filter-catselect__list a svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.blog-filter-catselect__list a:hover {
    background-color: #F5F6F8;
}

.blog-filter-catselect__list a:focus-visible {
    background-color: #FFF1EA;
    color: #FF5A1F;
    outline: none;
}

.blog-filter-catselect__list li.is-selected a {
    color: #FF5A1F;
    font-weight: 600;
    background-color: #FFF1EA;
}

.blog-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #10203A;
    background-color: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 30px;
    padding: 9px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.blog-filter-pill svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.blog-filter-pill:hover,
.blog-filter-pill:focus-visible {
    border-color: #FF5A1F;
    color: #FF5A1F;
    outline: none;
}

.blog-filter-pill.is-active {
    background-color: #FF5A1F;
    border-color: #FF5A1F;
    color: #FFFFFF;
}

.blog-filter-pill.is-active:hover {
    background-color: #E14A12;
    border-color: #E14A12;
    color: #FFFFFF;
}

@media (max-width: 900px) {
    .blog-filter-bar__row {
        gap: 15px;
    }

    .blog-filter-bar__main {
        flex: 1 1 100%;
        padding-right: 0;
    }

    .blog-filter-sort {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .blog-filter-bar__main {
        flex-wrap: wrap;
    }

    .blog-filter-search,
    .blog-filter-catselect {
        flex: 1 1 100%;
    }

    .blog-filter-catselect__toggle {
        width: 100%;
        min-width: 0;
    }
}