/**
 * Qing Search Header widget styles.
 * Reproduces the Hitched "listingHeading" + "searcher" module.
 */

/* Merriweather — same serif Hitched uses for the listing title. */
@font-face {
    font-family: "Merriweather";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Merriweather Bold"), local("Merriweather-Bold"),
        url("../../Pg_www.hitched.co.uk/static/font/Merriweather-Bold.woff2") format("woff2"),
        url("../../Pg_www.hitched.co.uk/static/font/Merriweather-Bold.woff") format("woff"),
        url("../../Pg_www.hitched.co.uk/static/font/Merriweather-Bold.ttf") format("truetype");
}

/* Elementor wraps widgets in .elementor-widget-container; make sure it adds
   no vertical spacing around this header. */
.elementor-widget-qing_search_header .elementor-widget-container {
    margin: 0;
    padding: 0;
}

.qing-search-header {
    --qing-sh-accent: #775a97;
    --qing-sh-accent-dark: #563280;
    /* 聚焦环独立成一套变量，不跟按钮底色（accent）共用，
       这样改聚焦色不会连带改掉按钮颜色。
       默认回落到 accent，保持原来的观感。 */
    --qing-sh-focus: var(--qing-sh-accent);
    --qing-sh-focus-w: 2px;
    --qing-sh-border: #d9d9d9;
    --qing-sh-text: #222;
    --qing-sh-muted: #8c8c8c;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    /* No desc row unless a description is actually rendered. */
    grid-template-areas: "breadcrumb" "title" "searcher";
    /* Row spacing is NOT done with gap (an empty row would still add one).
       Each element owns its bottom margin instead -> exact, and a missing
       description contributes nothing at all. */
    row-gap: 0;
    column-gap: 0;
    /* No vertical spacing by default; use the widget's Padding control. */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* Never let the header itself become a source of horizontal overflow. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-family: "ProximaNova", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* Grid children must be allowed to shrink, otherwise long content (the
   search inputs) pushes the row wider than the screen. */
.qing-search-header > * {
    min-width: 0;
}

.qing-search-header.has-desc {
    grid-template-areas: "breadcrumb" "title" "desc" "searcher";
}

/* ---------- Breadcrumb ---------- */
.qing-search-header__breadcrumb {
    grid-area: breadcrumb;
    margin: 0 0 var(--qing-sh-crumb-gap, 12px);
    display: flex;
    overflow-x: hidden;
}

.qing-search-header .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #6c6c6c;
}

.qing-search-header .breadcrumb__list > li {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    color: #6c6c6c;
    position: relative;
    list-style: none;
    margin: 0;
}

.qing-search-header .breadcrumb__list > li:before {
    content: "/";
    padding: 0 0.5rem;
    color: #6c6c6c;
}

.qing-search-header .breadcrumb__list > li:first-child:before {
    content: none;
}

.qing-search-header .breadcrumb__list > li a {
    color: #6c6c6c;
    text-decoration: none;
}

.qing-search-header .breadcrumb__list > li a:hover {
    color: var(--qing-sh-accent-dark);
    text-decoration: underline;
}

/* ---------- Title ----------
   Two separate distances, so removing the description never shifts things:
   - with a description  -> --qing-sh-title-desc-gap
   - without one         -> --qing-sh-title-search-gap  */
.qing-search-header .listingHeading__title {
    grid-area: title;
    margin: 0 0 var(--qing-sh-title-search-gap, 20px);
    font-family: "Merriweather", Georgia, "Times New Roman", serif;
    font-size: 1.875rem;
    line-height: 2.625rem;
    font-weight: 700;
    color: var(--qing-sh-text);
}

.qing-search-header .listingHeading__title.has-image {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-self: start;
    width: 100%;
}

.qing-search-header .listingHeading__titleImage {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.qing-search-header.has-desc .listingHeading__title {
    margin-bottom: var(--qing-sh-title-desc-gap, 8px);
}

/* ---------- Description ----------
   Only rendered when text is entered, so when it's absent the title's own
   bottom margin is the single source of the title -> search bar distance. */
.qing-search-header__desc {
    grid-area: desc;
    margin: 0 0 var(--qing-sh-desc-gap, 16px);
    font-size: 1rem;
    line-height: 1.6;
    color: #6c6c6c;
}

/* ---------- Search bar ---------- */
.listingHeading__searcher {
    grid-area: searcher;
    /* Distance above normally comes from the title/description gap. The
       optional --qing-sh-search-top adds space on top of that, and is the
       only source of spacing when there is no title/image at all (e.g. the
       title image was removed). Defaults to 0 so it changes nothing until set. */
    margin: var(--qing-sh-search-top, 0px) 0 0;
    width: 100%;
    /* max-width is controlled from the widget (Search Bar Max Width);
       defaults to 100% so it fills the Elementor container. */
}

.qing-searcher {
    display: grid;
    grid-template-columns: 1fr 250px auto;
    grid-template-rows: auto;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background: #fff;
    position: relative;
}

.qing-searcher__category,
.qing-searcher__name,
.qing-searcher__submit {
    display: flex;
    align-items: center;
    height: 56px;
    box-sizing: border-box;
}

.qing-searcher__category {
    position: relative;
    border: 1px solid var(--qing-sh-border);
    border-right: 1px solid var(--qing-sh-border);
    border-radius: 0.5rem 0 0 0.5rem;
    background: #fff;
    padding: 0 0.9rem;
    min-width: 0;
}

.qing-searcher__name {
    position: relative;
    border: 1px solid var(--qing-sh-border);
    border-left: none;
    background: #fff;
    padding: 0 0.9rem;
    min-width: 0;
}

.qing-searcher__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.16rem;
    height: 1.16rem;
    margin-right: 0.9rem;
    color: var(--qing-sh-muted);
    flex-shrink: 0;
}

.qing-searcher .searcher__input {
    border: none;
    width: 100%;
    min-width: 0; /* inputs default to ~180px and would overflow otherwise */
    box-sizing: border-box;
    outline: none;
    font-size: 1.13rem;
    height: 100%;
    line-height: normal;
    margin: 0;
    padding: 0;
    color: var(--qing-sh-text);
    background: transparent;
    text-overflow: ellipsis;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.qing-searcher .searcher__input::placeholder {
    color: var(--qing-sh-muted);
}

/* style.css 第 611 行给所有 input:focus 画了一圈 box-shadow 焦点环
   （颜色是 --qing-color-primary，土黄色）。它画在 <input> 上，
   而本小部件的环画在字段容器上，两者一起出现就是「内土黄 + 外紫」的双重边框。
   这里在小部件作用域内把 input 自己那圈去掉，只留容器这一圈。 */
.qing-search-header .searcher__input:focus,
.qing-search-header input:focus,
.qing-search-header select:focus,
.qing-search-header textarea:focus {
    box-shadow: none;
    outline: none;
}

/* 焦点环画在字段容器上（:focus-within），不画在 input 上，
   这样环绕着「图标 + 输入框」整体一圈，而不是只圈住文字部分。 */
.qing-searcher__category:focus-within,
.qing-searcher__name:focus-within {
    /* 宽度和颜色都由小部件控件驱动。 */
    box-shadow: 0 0 0 var(--qing-sh-focus-w, 2px) var(--qing-sh-focus);
    border-color: transparent;
    z-index: 3;
}

.searcher__locationFixedText {
    color: var(--qing-sh-muted);
    font-size: 1.13rem;
    margin-right: 0.9rem;
    flex-shrink: 0;
}

/* ---------- Category dropdown ---------- */
.qing-searcher__dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: -1px;
    min-width: calc(100% + 2px);
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 30;
}

.qing-searcher__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    color: var(--qing-sh-text);
    cursor: pointer;
    list-style: none;
}

.qing-searcher__option:hover,
.qing-searcher__option.is-active {
    background: #f5f2f8;
    color: var(--qing-sh-accent-dark);
}

.qing-searcher__optionCount {
    font-size: 0.8125rem;
    color: var(--qing-sh-muted);
    flex-shrink: 0;
}

.qing-searcher__empty {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    color: var(--qing-sh-muted);
    list-style: none;
}

/* ---------- Submit ---------- */
.qing-searcher__submit {
    color: #fff;
    background-color: var(--qing-sh-accent);
    border: none;
    cursor: pointer;
    border-radius: 0 0.5rem 0.5rem 0;
    font-weight: 600;
    font-size: 1.13rem;
    padding: 0 1.87rem;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
    font-family: inherit;
}

.qing-searcher__submit:hover {
    background-color: var(--qing-sh-accent-dark);
}

.qing-searcher__submit:focus-visible {
    outline: none;
    /* 按钮的环用偏移画在外侧，否则和按钮底色贴在一起看不出来。 */
    box-shadow: 0 0 0 var(--qing-sh-focus-w, 2px) var(--qing-sh-focus);
}

/* ---------- Side image ----------
   Mobile first: the image is a normal block showing the FULL picture,
   and the curve is hidden. Desktop rules are further down. */
.qing-search-header__media {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    line-height: 0;
    overflow: hidden; /* the curve SVG sits outside the box on desktop */
}

.qing-search-header__mediaImg {
    display: block;
    width: 100% !important;   /* overrides the width/height attributes WP adds */
    height: auto !important;  /* full image on mobile, nothing cropped */
    max-width: 100%;
    z-index: 1;
}

/* No curve on mobile. */
.qing-search-header__curve {
    display: none;
}

/* ---------- Responsive ---------- */
@media (min-width: 1024px) {
    .qing-search-header {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "breadcrumb breadcrumb"
            "title      media"
            "searcher   media";
        align-items: start;
        column-gap: 2rem;
    }

    .qing-search-header.has-desc {
        grid-template-areas:
            "breadcrumb breadcrumb"
            "title      media"
            "desc       media"
            "searcher   media";
    }

    /* The header holds a real 2-column grid: text on the left, image on the
       right. The image column reserves its own width, so the title keeps its
       full line width and never gets squeezed into a vertical strip. */
    .qing-search-header {
        position: relative;
        overflow: visible;
        min-height: var(--qing-sh-min-h, 220px);
        grid-template-columns: minmax(0, 1fr) var(--qing-sh-media-w, 420px);
    }

    /* Media is a real grid item spanning every row, stretched to the full
       header height. Bleed is a negative margin so it can extend past the
       container's right edge without leaving the grid. */
    .qing-search-header__media {
        grid-area: media;
        grid-row: 1 / -1;
        align-self: stretch;
        position: relative;
        width: auto;
        margin: 0 calc(var(--qing-sh-bleed, 0px) * -1) 0 0;
        overflow: hidden;
    }

    /* Image and curve share identical bounds (inset:0) -> always aligned. */
    .qing-search-header__mediaImg {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;  /* fills the header height, cropped by cover */
        object-fit: cover;
        object-position: var(--qing-sh-img-pos, center center);
        z-index: 1;
    }

    .qing-search-header__media.has-curve .qing-search-header__curve {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1px;
        height: auto;
        width: var(--qing-sh-curve-w, 90px);
        z-index: 2;
        pointer-events: none;
    }
}

@media (max-width: 767px) {
    .qing-search-header .listingHeading__title.has-image.is-hidden-mobile {
        display: none;
    }

    .qing-searcher {
        grid-template-columns: 1fr;
        width: 100%;
        /* 保留卡片阴影：去掉后三个字段各自悬空，看不出是一个整体。
           全屏出血时才需要压平，规则在下面。 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

        /* No overflow clipping here. The category dropdown is a
           position:absolute child that has to hang below the bar, and
           overflow:hidden on an ancestor clips absolutely positioned
           descendants too -- the list was cut off after two rows. The
           corners are rounded on the first and last field instead, see
           the rules further down. */
    }

    /* 出血到屏幕两侧时才去掉阴影和圆角。 */
    .qing-search-header.is-search-bleed-mobile .qing-searcher {
        box-shadow: none;
    }

    /* ---- Full bleed on mobile ----
       Deliberately NOT 100vw: an element wider than its grid column grows
       the header's scrollWidth, which bubbles up to .elementor-widget-container
       and gives the page a horizontal overflow. Negative side margins only
       cancel the container's own padding, so nothing ever exceeds the screen.
       --qing-sh-bleed-mobile is set from the widget (Mobile Bleed Amount) and
       should match the Elementor container's horizontal padding. */
    .qing-search-header.is-media-bleed-mobile .qing-search-header__media,
    .qing-search-header.is-search-bleed-mobile .listingHeading__searcher {
        width: auto;
        max-width: none;
        margin-left: calc(var(--qing-sh-bleed-mobile, 0px) * -1);
        margin-right: calc(var(--qing-sh-bleed-mobile, 0px) * -1);
    }

    /* Square off the corners when it spans the whole screen. */
    .qing-search-header.is-search-bleed-mobile .qing-searcher,
    .qing-search-header.is-search-bleed-mobile .qing-searcher__category,
    .qing-search-header.is-search-bleed-mobile .qing-searcher__submit {
        border-radius: 0;
    }

    .qing-search-header.is-search-bleed-mobile .qing-searcher__category,
    .qing-search-header.is-search-bleed-mobile .qing-searcher__name {
        border-left: none;
        border-right: none;
    }

    .qing-searcher__category {
        border-radius: 0.5rem 0.5rem 0 0;
    }

    /* 竖向堆叠后，两个字段之间需要的是一条横向分隔线，
       而不是桌面端那条竖直的左边框。 */
    .qing-searcher__name {
        border-top: none;
        border-left: 1px solid var(--qing-sh-border);
        border-right: 1px solid var(--qing-sh-border);
        border-bottom: 1px solid var(--qing-sh-border);
    }

    /* 前缀文字（例如 "in"）在手机上藏起来省空间，
       但它原本负责把第二行文字推到和第一行对齐的位置。
       用一个等宽的左内边距补上：图标宽 1.16rem + 右间距 0.9rem
       + 字段自身 0.9rem 内边距。 */
    .searcher__locationFixedText {
        display: none;
    }

    .qing-searcher__name .searcher__input {
        padding-left: calc(1.16rem + 0.9rem);
    }

    .qing-searcher__submit {
        height: 48px;
        border-radius: 0 0 0.5rem 0.5rem;
        justify-content: center;
    }

    .qing-search-header .listingHeading__title {
        font-size: 1.5rem;
        line-height: 2.25rem;
        /* Center the title (and its image) on phones. */
        text-align: center;
    }

    /* Center the single title image within its row on mobile. */
    .qing-search-header .listingHeading__title.has-image {
        justify-content: center;
        justify-self: center;
    }

    .qing-search-header .listingHeading__titleImage {
        margin-left: auto;
        margin-right: auto;
        object-position: center center;
    }
}