/*
 * Search: header form + results page.
 *
 * Uses logical properties (inline-start/end, margin-inline) throughout so the
 * Arabic RTL rendering is correct without a second stylesheet.
 */

:root {
    /*
     * The header circle scale. Mirrors the theme's own base `--mm-round`
     * (Customizer: `--mm-round: clamp(36px, 2.8vw, 46px)` — "lang circle + burger").
     *
     * It is mirrored rather than referenced because `header.site-header.scrolled`
     * overrides --mm-round to the smaller --mm-round-sm, and the language circle
     * and burger do NOT actually shrink with it — measured 40/40 at rest and
     * 40 (lang) vs 32 (ours) once scrolled, at 1440, 768 and 390. Using
     * --mm-round directly made this circle the odd one out the moment the
     * header collapsed. Update this if the header's circle scale changes.
     */
    --mm-search-circle: clamp(36px, 2.8vw, 46px);

    --mm-s-ink: #2b2b2b;
    --mm-s-muted: #6d6a63;
    --mm-s-line: #ddd4c4;
    --mm-s-tile: #e2dacc;
    --mm-s-cream: #faf3e6;
    --mm-s-accent: #3a2f26;
}

/* ------------------------------------------------------------ header form */

.mm-search {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: var(--mm-s-cream);
    border: 1px solid var(--mm-s-line);
    border-radius: 999px;
    padding: 3px;
    transition: border-color .2s ease, background .2s ease;
    max-width: 100%;

    /*
     * REQUIRED for the header form to be clickable.
     *
     * The Contact button next to it (a.site_button) has a ::before with
     * `position:absolute; inset:0`, but the anchor itself is `position:static`,
     * so that pseudo-element resolves against a far larger positioned ancestor
     * and stretches to ~334px — right across this form. Pseudo-elements are
     * invisible to getBoundingClientRect but NOT to hit-testing, so every click
     * on the search landed on Contact and navigated to /contact/ instead.
     *
     * Creating a stacking context here puts the form above that pseudo-element.
     */
    position: relative;
    z-index: 5;
}

.mm-search:focus-within {
    border-color: var(--mm-s-accent);
    background: #fff;
}

/* Visually hidden but available to screen readers. */
.mm-search__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.mm-search__input {
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .9375rem;
    color: var(--mm-s-ink);
    padding: .4rem .75rem;
    inline-size: 200px;
    min-inline-size: 0;
    transition: inline-size .25s ease, padding .25s ease, opacity .2s ease;
}

.mm-search__input::placeholder {
    color: var(--mm-s-muted);
    opacity: 1;
}

/* Chrome's native clear button fights the pill shape. */
.mm-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/*
 * Icon only — no filled disc. The button keeps its hit area so it stays
 * clickable and accessible, but reads as part of the field rather than as a
 * separate brown circle sitting on the end of it.
 */
.mm-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    background: transparent;
    color: var(--mm-s-muted);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease;
}

.mm-search__submit:hover {
    color: var(--mm-s-ink);
}

.mm-search__submit:focus-visible {
    outline: 2px solid var(--mm-s-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------- header toggle */

/*
 * A fixed 40x40 circle, matching the ع / EN language button exactly:
 * same size, same full radius, transparent fill, same 1px #362720 border.
 *
 * It never changes size. The search field is NOT in the header — anything put
 * inside .header_cta loses the cascade to that header's stylesheet stack (width,
 * flex and even opacity set with !important at higher specificity were all
 * overridden). The field lives in the body-level overlay instead.
 *
 * Sizing is doubled up on purpose: explicit 40x40 AND padding that makes the
 * natural content box 40px too, so the button still matches even if a
 * `width:auto !important` header rule wins.
 */
.mm-search-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /*
     * Size comes from the header's own circle variable, the same one the
     * language switcher and the burger use:
     *   header.site-header      --mm-round: clamp(36px, 2.8vw, 46px)
     *   header.site-header.scrolled --mm-round: var(--mm-round-sm)
     * so this circle matches them at every width AND shrinks with them when the
     * header collapses on scroll. Hard-coded pixel sizes did not track that.
     */
    inline-size: var(--mm-round, 40px);
    block-size: var(--mm-round, 40px);
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #362720;
    border-radius: 50%;
    background: transparent;
    color: #362720;
    cursor: pointer;
    line-height: 0;
    transition: background .18s ease, color .18s ease;

    /*
     * REQUIRED to be clickable. The Contact button beside it has a ::before with
     * `position:absolute; inset:0` while the anchor itself is `position:static`,
     * so that pseudo-element resolves against a far larger ancestor and stretches
     * ~334px right across this button. Pseudo-elements are invisible to
     * getBoundingClientRect but NOT to hit-testing, so every click on the search
     * was landing on Contact and navigating to /contact/.
     */
    position: relative;
    z-index: 5;
}

.mm-search-toggle:hover,
.mm-search-toggle[aria-expanded="true"] {
    background: #362720;
    color: #fff;
}

/*
 * The icon scales with the circle instead of being a fixed 18px, so the
 * proportions hold at every --mm-round value.
 */
.mm-search-toggle svg {
    inline-size: 45%;
    block-size: 45%;
}

/*
 * Match the language circle and the burger exactly.
 *
 * Those two are sized by the Customizer with
 *   header.site-header .lang-item > a,
 *   header.site-header .rounded_button.burger_button { width:var(--mm-round)!important }
 * Using the same selector depth and the same !important makes this circle
 * resolve --mm-round in the same cascade context they do — an unscoped
 * `.mm-search-toggle { inline-size: var(--mm-round) }` resolved to a different
 * value (30px vs their 36px) and the circles did not match.
 */
header.site-header .mm-search-toggle {
    width: var(--mm-search-circle) !important;
    height: var(--mm-search-circle) !important;
    flex: 0 0 auto !important;

    /*
     * Sit AFTER the Contact button.
     *
     * The markup injection puts this first inside .header_cta, but the wanted
     * order is: Customer Portal · Contact · search · language. .header_cta is a
     * flex row, so ordering is done here rather than by moving the markup —
     * `order` is also direction-agnostic, so RTL mirrors correctly with no
     * second rule.
     *
     * Customer Portal and the language switcher are OUTSIDE .header_cta, so
     * they are unaffected: Customer Portal stays to the left of Contact and the
     * language circle stays to the right of this one.
     */
    order: 1;
}

/* The burger stays last in the row on small screens. */
header.site-header .header_cta .burger_button,
header.site-header .header_cta #MobileNavCall {
    order: 2;
}

/*
 * Keep "Customer Portal" visible further down the range.
 *
 * The Customizer's Additional CSS, section 8 "PROGRESSIVE DISCLOSURE — drop
 * items before they collide", hides it below 1500px:
 *     @media (max-width:1500px){ header.site-header a._underline{ display:none !important } }
 * That is the ONLY thing hiding it — verified by disabling this stylesheet
 * (still hidden) and by bisecting all 52 sheets to <style id="wp-custom-css">.
 *
 * Requested to stay visible next to Contact, so the threshold is lowered here
 * rather than edited in the Customizer, which keeps "delete mm-search/ to
 * revert" true. The floor below is where the nav actually starts to collide
 * with the button cluster — measured, not guessed. If section 8 is ever
 * revised, this override should move there.
 */
/*
 * Note on specificity: the Customizer's rule is
 *   header.site-header a._underline { display:none !important }   -> (0,2,2)
 * and <style id="wp-custom-css"> is printed at wp_head priority 101, i.e. AFTER
 * enqueued stylesheets. So an equal-specificity !important rule here loses on
 * document order. The extra classes below take it to (0,4,2) and win.
 */
@media (min-width: 1200px) {
    header.site-header .header_side a._underline.header-text-width {
        display: flex !important;
    }
}

/*
 * The language switcher label.
 *
 * Polylang outputs the full word ("العربية" / "English") and the theme clips it
 * to a circle. The computed font on it is Gotham, which carries no Arabic
 * glyphs, so the Arabic label falls back per-glyph and renders as broken
 * characters at small sizes. Give the Arabic label the header's own Arabic
 * stack — the same variable the theme already defines for its Arabic nav.
 */
header.site-header .lang-item > a[lang="ar"],
header.site-header .lang-item > a:lang(ar) {
    font-family: var(--mm-nav-font-ar, "Tajawal", "Noto Kufi Arabic", "Cairo", Tahoma, Arial, sans-serif) !important;
}

/*
 * Arabic mobile/tablet header: keep the circle and the burger on ONE row.
 *
 * In that header the burger button is a SIBLING of the .header_side cluster,
 * inside an .elementor-widget-container that is `display:block`. Block layout
 * stacks them, so the circle landed above the burger and the header grew to two
 * rows. Making just that container a flex row puts them side by side.
 *
 * Scoped with :has() to the exact container that holds both, so no other
 * Elementor widget container on the site is touched.
 */
@media (max-width: 1024px) {
    .elementor-widget-container:has(> .header_side .mm-search-toggle):has(> .burger_button) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px;
        inline-size: auto !important;
        min-inline-size: 0 !important;
    }

    .elementor-widget-container:has(> .header_side .mm-search-toggle):has(> .burger_button) > .header_side,
    .elementor-widget-container:has(> .header_side .mm-search-toggle):has(> .burger_button) > .burger_button {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
}

.mm-search-toggle:focus-visible {
    outline: 2px solid #362720;
    outline-offset: 2px;
}

/* ------------------------------------------------------------- overlay */

.mm-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;           /* above the fixed site header */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    transition: opacity .22s ease;
}

.mm-search-overlay.is-open {
    opacity: 1;
}

.mm-search-overlay[hidden] {
    display: none;
}

.mm-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 18, .55);
    backdrop-filter: blur(3px);
}

.mm-search-overlay__panel {
    position: relative;
    inline-size: min(680px, calc(100% - 40px));
    margin-block-start: clamp(90px, 14vh, 180px);
    background: var(--mm-s-cream);
    border-radius: 18px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: 0 30px 80px rgba(28, 22, 18, .28);
    transform: translateY(-12px);
    transition: transform .22s ease;
}

.mm-search-overlay.is-open .mm-search-overlay__panel {
    transform: translateY(0);
}

.mm-search-overlay__close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 16px;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mm-s-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.mm-search-overlay__close:hover {
    background: var(--mm-s-tile);
    color: var(--mm-s-ink);
}

.mm-search-overlay__title {
    margin: 0 0 1rem;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mm-s-muted);
}

/* Big field inside the overlay. */
.mm-search--large {
    padding: 5px;
    border-color: var(--mm-s-accent);
    background: #fff;
}

.mm-search--large .mm-search__input {
    inline-size: 100%;
    font-size: 1.0625rem;
    padding: .7rem 1rem;
}

.mm-search--large .mm-search__submit {
    inline-size: 40px;
    block-size: 40px;
    /* keep the icon clear of the pill's rounded edge */
    margin-inline-end: .4rem;
}

.mm-search-overlay__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.mm-search-overlay__links a {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--mm-s-line);
    border-radius: 999px;
    font-size: .8125rem;
    color: var(--mm-s-ink);
    text-decoration: none;
}

.mm-search-overlay__links a:hover {
    background: var(--mm-s-tile);
}

@media (max-width: 600px) {
    .mm-search-overlay__panel {
        margin-block-start: 76px;
        padding: 1.25rem;
        border-radius: 14px;
    }

    .mm-search--large .mm-search__input {
        /* Never below 16px: iOS zooms the page when a smaller field is focused. */
        font-size: 16px;
        padding: .6rem .75rem;
    }

    .mm-search--large .mm-search__submit {
        inline-size: 34px;
        block-size: 34px;
        margin-inline-end: .2rem;
    }

    .mm-search-overlay__links {
        margin-block-start: 1rem;
    }
}

/* ---------------------------------------------------------- results page */

.mm-results {
    /*
     * Do NOT add a header-sized offset here. The fixed site header is already
     * cleared twice before this element: `body` carries padding-top: 6em (72px),
     * and the Elementor header wrapper preceding <main> leaves a residual height
     * of its own (its <header> children are position:fixed, but a few inert 20px
     * blocks — the site loader among them — stay in flow). Clearing the header a
     * third time here is what left ~213px of dead space above the title.
     * This is ordinary page-top breathing room and nothing more.
     */
    padding: clamp(1.5rem, 3vw, 2.5rem) 20px 5rem;
    color: var(--mm-s-ink);
}

/*
 * The Arabic header template leaves exactly 60px less residual height than the
 * English one (one of those inert 20px blocks instead of four), so identical
 * padding would sit the Arabic title 60px higher than the English one. Add the
 * difference back so the gap below the header reads the same in both languages.
 * Measured, not guessed — see .mm-results above for why the residual exists.
 */
.mm-results--ar {
    padding-top: calc(clamp(1.5rem, 3vw, 2.5rem) + 60px);
}

/*
 * Defensive: this site sets `header { position: fixed }` globally for its own
 * site header, so any semantic <header> inside the page gets pinned to the
 * viewport. The results intro is a <div> for that reason; this keeps it static
 * even if the markup is changed back later.
 */
.mm-results__head {
    position: static !important;
}

.mm-results__inner {
    max-width: 1100px;
    margin-inline: auto;
}

.mm-results__head {
    border-bottom: 1px solid var(--mm-s-line);
    padding-bottom: 2rem;
    margin-bottom: 2.5rem;
}

.mm-results__title {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 .75rem;
}

.mm-results__title em {
    font-style: normal;
    color: var(--mm-s-accent);
}

.mm-results__count {
    color: var(--mm-s-muted);
    font-size: .9375rem;
    margin: 0 0 1.5rem;
}

.mm-results__head .mm-search {
    max-width: 480px;
    padding: 5px;
}

.mm-results__head .mm-search__input {
    inline-size: 100%;
    font-size: 1rem;
}

/* group */
.mm-results__group + .mm-results__group {
    margin-top: 3rem;
}

.mm-results__group-title {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mm-s-muted);
    margin: 0 0 1.25rem;
    font-weight: 600;
}

.mm-results__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.mm-result {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--mm-s-cream);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 1.25rem;
    transition: border-color .18s ease, transform .18s ease;
}

.mm-result:hover {
    border-color: var(--mm-s-line);
    transform: translateY(-2px);
}

.mm-result__thumb {
    flex: 0 0 auto;
    inline-size: 84px;
    block-size: 84px;
    border-radius: 8px;
    background: var(--mm-s-tile);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mm-result__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.mm-result__body {
    min-inline-size: 0;
    flex: 1 1 auto;
}

.mm-result__title {
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}

.mm-result__title a {
    color: var(--mm-s-ink);
    text-decoration: none;
}

.mm-result__title a:hover {
    text-decoration: underline;
}

.mm-result__meta {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mm-s-muted);
    margin: 0 0 .5rem;
}

.mm-result__snippet {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--mm-s-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.mm-result__snippet mark {
    background: #f3e2b3;
    color: inherit;
    padding: 0 .1em;
    border-radius: 2px;
}

/* empty state */
.mm-results__empty {
    background: var(--mm-s-cream);
    border-radius: 12px;
    padding: 2.5rem;
}

.mm-results__empty h2 {
    margin: 0 0 .75rem;
    font-size: 1.25rem;
}

.mm-results__empty p {
    color: var(--mm-s-muted);
    margin: 0 0 1.5rem;
}

.mm-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-suggest a {
    display: inline-block;
    padding: .4rem .9rem;
    border: 1px solid var(--mm-s-line);
    border-radius: 999px;
    font-size: .875rem;
    color: var(--mm-s-ink);
    text-decoration: none;
    transition: background .15s ease;
}

.mm-suggest a:hover {
    background: var(--mm-s-tile);
}

/* pagination */
.mm-results__nav {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mm-s-line);
}

.mm-results__nav .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 38px;
    block-size: 38px;
    padding: 0 .5rem;
    margin-inline-end: .35rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--mm-s-ink);
    font-size: .9375rem;
}

.mm-results__nav .page-numbers:hover {
    background: var(--mm-s-tile);
}

.mm-results__nav .page-numbers.current {
    background: var(--mm-s-accent);
    color: #fff;
}

@media (max-width: 600px) {
    .mm-result {
        gap: 1rem;
        padding: 1rem;
    }

    .mm-result__thumb {
        inline-size: 60px;
        block-size: 60px;
    }
}