/*
Theme Name:  Sofia Investments
Theme URI:   https://sofiainvestments.com/
Template:    astra
Author:      Sofia Investments
Version:     1.2.11
Description: Custom theme for sofiainvestments.com. Adds the site-wide "mountains" header background band so it appears on every page - new pages, single listings, search results, archives, 404 - not only the pages built in Elementor. Also carries the small z-index fix that keeps the advanced-search status tabs clickable, and hides the plain page title on those pages.
Text Domain: sofiainvestments
*/

/* ============================================================
   Site-wide header background band ("mountains" wave)
   Rendered by functions.php on the after-header hook.
   The values you may want to tune are grouped at the top.
   ============================================================ */

:root{
    /* The band renders right after the <header>. functions.php also tags
       band pages with body.si-band-page; the rules further down make the
       header bars transparent there so the wave shows through behind the
       logo + menu, and --si-band-rise slides the band up behind the header.

       Matched to the real Elementor "mountains" section: 238px tall,
       starting at the very top of the page, transparent-over-white base,
       overlay #1e1810 @ .6, white wave paths. Tune until it lines up with
       the Elementor pages:
         - wave hidden behind the menu?     raise --si-band-rise
         - too much grey under the menu?    lower --si-band-height
         - mountains look too big/stretched? lower --si-band-wave-height */
    --si-band-height: 238px;          /* = the Elementor section height */
    --si-band-rise: 294px;            /* pulls the band's top up to y=0 (behind the header) */
    --si-band-wave-height: 144px;     /* the wave shape itself; solid overlay grey shows below it */
    /* Mobile: SAME idea as desktop - the band slides up behind the header so
       the wave sits BEHIND the logo + hamburger, not as a grey strip below
       it. The rise is ~the mobile header height so the band's top reaches
       y=0; the band is TALLER than the rise so page content still flows
       below it. (rise > height is what broke it before - the content got
       dragged up under the header.)

       v1.2.11: rise was 86px, which left  height - rise = 46px  of grey
       band showing BELOW the header line on every band page (property
       archive, /advanced-search/, За нас, 404, ...) - it read as "the
       header background bleeding past the header". Raised to 122px so only
       ~10px shows below the line (a thin accent, not a slab). Still < the
       132px height, so content is never dragged up under the header. */
    --si-band-height-mobile: 132px;
    --si-band-rise-mobile: 122px;
    --si-band-wave-height-mobile: 112px;
    --si-band-base: #ffffff;          /* WHITE base - overlay over white gives the exact
                                        medium grey the Elementor pages have */
    --si-band-overlay: #1e1810;       /* dark wash over the base (used at 60%) */
    --si-band-overlay-opacity: .6;
}

.si-header-band{
    position: relative;
    width: 100%;
    height: var(--si-band-height);
    margin-top: calc(-1 * var(--si-band-rise));   /* slide up behind the header */
    background: var(--si-band-base);
    overflow: hidden;
    pointer-events: none;   /* purely decorative - must never intercept clicks */
    z-index: 0;             /* behind the header (z-index 99) and the content */
}
.si-header-band__overlay{
    position: absolute;
    inset: 0;
    background: var(--si-band-overlay);
    opacity: var(--si-band-overlay-opacity);
}
.si-header-band__wave{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--si-band-wave-height);   /* the shape only - grey overlay shows below it */
    line-height: 0;
}
.si-header-band__wave svg{
    width: 100%;
    height: 100%;
    display: block;
}
/* the three stacked mountain layers, exactly like Elementor's "mountains" divider */
.si-header-band__wave .si-p1{ fill: #fff; opacity: .33; }
.si-header-band__wave .si-p2{ fill: #fff; opacity: .66; }
.si-header-band__wave .si-p3{ fill: #fff; opacity: 1; }

@media (max-width: 921px){
    /* Match the desktop band pages: the wave sits BEHIND the logo + hamburger,
       not as a separate grey strip under the header. The band slides up by
       ~one mobile-header height so its top reaches the top of the page, and
       it is taller than that rise so the page content still flows below it.
       (The earlier break was the reverse - a rise much bigger than the band
       height, which dragged the content up under the header.) */
    .si-header-band{
        height: var(--si-band-height-mobile);
        margin-top: calc(-1 * var(--si-band-rise-mobile));
    }
    .si-header-band__wave{ height: var(--si-band-wave-height-mobile); }

    /* Keep the mobile header in normal flow - the negative-margin math above
       depends on it reserving its height. It stays transparent via the
       site-wide band-page rule further down, so the wave shows through behind
       the logo + hamburger, exactly like the desktop band pages. */
    body.si-band-page #masthead{
        position: relative !important;
        z-index: 99;
    }

    /* The mobile header bar renders ~10-20px above the top of the screen
       (Astra's transparent-header offset), clipping the top of the logo.
       Push it fully into view. SCOPED to band pages only — on the landing
       page (which has its own Astra transparent-header handling) this 22px
       pushed the whole header + logo down. */
    .si-band-page .ast-mobile-header-wrap,
    .si-band-page #ast-mobile-header{
        margin-top: 22px !important;
    }

    /* Astra's Transparent Header shrinks the mobile logo on the pages that
       use it (home, contact, Всички имоти), so the landing-page logo looks
       tiny. Cap it by HEIGHT so it's one consistent size everywhere and can
       never be taller than the header bar (which is what clipped it). */
    header .custom-logo-link img,
    .ast-mobile-header-wrap .custom-logo-link img,
    #ast-mobile-header .custom-logo-link img{
        width: auto !important;
        max-width: 210px !important;
        height: auto !important;
        max-height: 44px !important;
    }
}

/* Which pages get the band is decided in functions.php (si_should_show_band):
   everything except the front page and pages that already render their own
   Elementor "mountains" section. Those pages are the only ones tagged
   body.si-band-page, so the transparent-bar rules below never touch a page
   that already has its own hero. */

/* ---- On band pages only: make the header bars transparent so the wave
   shows through behind the logo + menu. ---- */
.si-band-page #masthead,
.si-band-page .ast-above-header-wrap,
.si-band-page .ast-above-header-bar,
.si-band-page .ast-main-header-wrap,
.si-band-page .main-header-bar-wrap,
.si-band-page .ast-primary-header-bar,
.si-band-page .main-header-bar,
.si-band-page .ast-below-header-wrap,
.si-band-page .ast-below-header-bar,
.si-band-page .site-primary-header-wrap,
.si-band-page .site-below-header-wrap,
/* mobile header structure (only exists below Astra's break point) - without
   these the mobile header bar stays white and the wave can't show behind the
   logo + hamburger */
.si-band-page #ast-mobile-header,
.si-band-page .ast-mobile-header-wrap,
.si-band-page .ast-mobile-header-inner,
.si-band-page .ast-mobile-header-content{
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    /* NOTE: do not touch border / box-shadow here - .ast-below-header-bar
       carries the orange bottom rule (border-bottom: 5px solid #F9C349). */
}
/* keep the header painting above the band */
.si-band-page #masthead{ position: relative; z-index: 99; }

/* the header carries a faint 1px divider line / shadow (Astra's
   .ast-above-header-bar border-bottom: 1px #eaeaea, plus the mobile header
   shadow) that would otherwise cut straight across the wave - drop it on band
   pages only. This is NOT .ast-below-header-bar, which keeps its orange rule. */
.si-band-page .ast-above-header-bar,
.si-band-page #ast-mobile-header,
.si-band-page .ast-mobile-header-wrap,
.si-band-page #ast-mobile-header .ast-primary-header-bar,
.si-band-page .ast-mobile-header-wrap .ast-primary-header-bar,
.si-band-page .ast-mobile-header-content{
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Menu text white over the wave (matches the Elementor pages), brand gold
   for the current item / hover. Delete this block if you want the menu to
   stay orange. */
.si-band-page #masthead .main-header-menu .menu-link,
.si-band-page #masthead .ast-nav-menu .menu-link{
    color: #ffffff !important;
}
.si-band-page #masthead .main-header-menu .current-menu-item > .menu-link,
.si-band-page #masthead .main-header-menu .menu-item:hover > .menu-link,
.si-band-page #masthead .main-header-menu .menu-link:hover{
    color: #f9c349 !important;
}

/* Normalise the header logo width across all pages (the standard logo and
   Astra's transparent logo are different sizes). height:auto keeps it from
   stretching. */
header .custom-logo-link img{
    max-width: 250px;
    width: 250px;
    height: auto;
}

/* ---- Single property listings: band size for EVERY property page, one
   place. Defaults match the regular pages - change these three values to
   make the header on listings taller/shorter and it applies to all of
   them automatically. --si-gallery-h sizes the photo slider (below). ---- */
body.single-property{
    --si-band-height: 238px;
    --si-band-rise: 294px;
    --si-band-wave-height: 144px;
    --si-gallery-h: 460px;      /* photo slider height on every listing */
}
@media (max-width: 767px){
    body.single-property{ --si-gallery-h: 240px; }
}

/* ---- ERE's photo gallery is an owl-carousel that renders broken here
   (the thumbnail strip stacks vertically - owl's layout CSS not applying,
   usually LiteSpeed CSS Combine mangling owl.carousel.css). functions.php
   builds a plain replacement (.si-gallery) from the same images and hides
   ERE's. Boxed main image + arrows + counter + a horizontal scrolling
   thumbnail row. Same on every listing. --si-gallery-h (above) sizes it. */
body.single-property .ere__single-property-gallery{ display: none !important; }

/* CONTENT WIDTH on single-property pages.
   THE REAL CAUSE: #container holds TWO children — #content[role=main] (the
   listing) and #secondary.widget-area (a sidebar Astra still renders even
   though the body is ast-no-sidebar). #container lays them out side by side
   (flex/grid), so the listing column is only ~half the page and width:100%
   on it just means 100% of its half-width track. Collapse the split: make
   #container a plain block, drop the empty sidebar, and let the listing
   column fill .ast-container (which keeps its own centered max-width:1240).
   .si-gallery__thumbs width:0/min-width:100% then keeps the thumbnail strip
   from driving width back the other way. */
body.single-property #content.site-content > .ast-container{
    display: block !important;
    align-items: stretch !important;
}
body.single-property #container{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.single-property #container > #content,
body.single-property #container > [role="main"],
body.single-property .ere-property-wrap,
body.single-property .content-single-property{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    flex: none !important;
    grid-column: 1 / -1 !important;
}
body.single-property #container > #secondary,
body.single-property #container > .widget-area{
    display: none !important;
}

/* space between the header's orange rule and the listing title */
body.single-property .content-single-property{ margin-top: 30px !important; }

.si-gallery{ margin: 18px 0 6px; width: 100%; max-width: 100%; overflow: hidden; }
.si-gallery__stage{
    position: relative;
    width: 100%;
    height: var(--si-gallery-h, 460px);
    background: #111;
    border-radius: 4px;
    overflow: hidden;
}
.si-gallery__main{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}
.si-gallery__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 64px;
    border: 0;
    background: rgba(0,0,0,.42);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background .15s, color .15s;
}
.si-gallery__prev{ left: 0; border-radius: 0 4px 4px 0; }
.si-gallery__next{ right: 0; border-radius: 4px 0 0 4px; }
.si-gallery__nav:hover{ background: #f9c349; color: #1e1810; }
.si-gallery__count{
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 3px;
    z-index: 2;
}
.si-gallery__thumbs{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 8px;
    /* width:0 + min-width:100% is the load-bearing pair: the strip RENDERS at
       the full width of .si-gallery, but its own intrinsic width is 0, so a
       flex-nowrap row of 30 thumbnails can never push .si-gallery (or any
       ancestor up to .ast-container) wider than the page. overflow-x scrolls
       the thumbnails inside that fixed box — one row, like the portal. */
    width: 0;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}
.si-gallery__thumbs img{
    flex: 0 0 112px;
    width: 112px;
    height: 74px;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
}
.si-gallery__thumbs img:hover,
.si-gallery__thumbs img.is-active{
    opacity: 1;
    outline: 2px solid #f9c349;
    outline-offset: -2px;
}
@media (max-width: 767px){
    .si-gallery__thumbs img{ flex-basis: 86px; width: 86px; height: 58px; }
}


/* ============================================================
   Remove the plain page / archive title on band pages - the hero
   band stands in for it. (Scoped to band pages; the front page and
   the Elementor pages are untouched.)
   ============================================================ */
.si-band-page .ast-article-single > .entry-header .entry-title,
.si-band-page .ast-archive-description > .ast-archive-title,
.si-band-page .page-title{
    display: none !important;
}
.si-band-page .ast-article-single > .entry-header{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
}


/* ============================================================
   Band pages: the Elementor section that used to hold the
   "mountains" shape divider still carries a dark background
   overlay + 137px/100px padding after the divider was removed by
   hand. Collapse it so it doesn't stack a second grey block under
   the theme's band.

   Explicit ids for the two pages that had it, plus a :has() rule
   that catches any other page: only a FIRST top section that still
   has a background overlay is touched - so real content sections
   (e.g. the advanced-search form) are never affected.
     contact-us ....  elementor-element-b83fba0   (page 15)
     Всички имоти ..  elementor-element-5b828e3   (page 4122)
   ============================================================ */
.si-band-page .elementor-element-b83fba0 > .elementor-background-overlay,
.si-band-page .elementor-element-5b828e3 > .elementor-background-overlay,
.si-band-page .entry-content .elementor-section.elementor-top-section:first-child > .elementor-background-overlay{
    display: none !important;
}
.si-band-page .elementor-element-b83fba0,
.si-band-page .elementor-element-5b828e3,
.si-band-page .entry-content .elementor-section.elementor-top-section:first-child:has(> .elementor-background-overlay){
    padding: 0 0 50px 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    min-height: 0 !important;
}


/* ============================================================
   Advanced-search status tabs - keep them above the header so a
   click lands on the button, not on the header.
   ============================================================ */
.ere-property-advanced-search .ere-search-status-tab,
.ere-property-advanced-search .ere-search-status-tab-inner{
    position: relative;
    z-index: 100;
}
.ere-property-advanced-search .btn-status-filter{
    position: relative;
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
}


/* ============================================================
   v1.2.10 - Open mobile menu legibility + stuck focus box
   ------------------------------------------------------------
   The mobile menu is Astra Header Builder's "dropdown" type: tapping the
   hamburger sets body.ast-main-header-nav-open and expands
   #ast-mobile-header .ast-mobile-header-content (which is display:none
   until then).

   Why the items were nearly invisible:
     - This site's base link colour is WHITE
       (Astra generates  a,.page-title{color:var(--ast-global-color-5)}  and
       --ast-global-color-5 is #FFFFFF). The mobile menu element has no
       colour of its own, so every .menu-link resolved to white - on top of
       the dropdown's own white background (--> white-on-white). Only the
       current item showed, because it is forced dark (#1E1810) elsewhere.
     - On band pages it is the same result by a different route: the rules
       higher up in this file force .menu-link #fff !important AND make
       .ast-mobile-header-content transparent, so the white items sit over
       whatever page content is behind the open menu.

   Fix once for every page: while the menu is open, paint the dropdown
   panel the brand near-black and set the items light, with brand gold for
   the current item / hover / keyboard focus. Because the panel is
   display:none until the menu opens, none of this shows on the closed
   header. Specificity (id + 3 classes, plus !important) clears both
   Astra's generated colour and this file's own band-page !important rules.
   ============================================================ */
@media (max-width: 921px){
    .ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content{
        background-color: #1e1810 !important;   /* brand near-black, matches the wave */
    }
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-link{
        color: #ffffff !important;
        opacity: 1 !important;
    }
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-item:hover > .menu-link,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-item.current-menu-item > .menu-link,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-item.current_page_item > .menu-link,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-link:hover,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-link:focus{
        color: #f9c349 !important;   /* brand gold for current / hover / focus */
    }

    /* The hamburger / close (X) trigger is one button that Astra re-skins on
       toggle. Astra draws  border: thin dotted <inherited colour>  on :focus
       (the inherited colour is the gold icon colour), and a tap leaves the
       button focused, so that dotted gold box stays stuck around the X the
       whole time the menu is open. Kill it for pointer focus; keep a clean
       ring for real keyboard focus. (Browsers without :focus-visible - none
       current on mobile - simply fall back to Astra's dotted border.) */
    [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus:not(:focus-visible){
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
    [data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.main-header-menu-toggle:focus-visible{
        border-color: transparent !important;
        outline: 2px solid #f9c349 !important;
        outline-offset: 2px;
    }
}


/* ============================================================
   v1.2.11 - Front page: header menu prints on top of the hero
             heading between 922px and 1024px
   ------------------------------------------------------------
   The front page runs Astra's Transparent Header:
       .ast-theme-transparent-header #masthead{ position:absolute }
   so the ~205px-tall header (primary bar 140px + the below-header
   menu bar that holds Начална / Всички имоти / ... ) FLOATS over
   the Elementor hero instead of pushing it down.

   On real desktop that is fine: the hero's first Elementor section
   gives its container  min-height:670px , so the vertically-centred
   hero text lands well below the floating header.

   Elementor collapses that container to  min-height:395px  inside
   @media (max-width:1024px)  (the section's own 135px top padding
   does NOT change at any width). The hero eyebrow + H1 then rise to
   ~y=165 and the below-header menu bar prints straight across the
   heading - the reported overlap.

   Why the band is 922-1024 only:
     - >=1025px  Elementor restores the tall hero -> no overlap.
     - <=921px   Astra swaps in the short #ast-mobile-header
                 (hamburger) and the 135px padding already clears it.
   Band pages (.si-band-page) are untouched - they reserve their
   header space through the "mountains" band higher up in this file.

   Fix: push the first top-level Elementor section of the front page
   down far enough to clear the floating header. 235px = header
   height (~205) + a small gap. It is padding on the SECTION, not on
   the image-bearing element, so the hero photo still bleeds to y=0.
   ============================================================ */
@media (min-width: 922px) and (max-width: 1024px){
    body.home #content .elementor-section.elementor-top-section:first-child{
        padding-top: 235px !important;
    }
}


/* ============================================================
   v1.2.11 - Open mobile menu STILL white-on-white (v1.2.10 follow-up)
   ------------------------------------------------------------
   v1.2.10 painted the open dropdown panel (.ast-mobile-header-content)
   brand near-black, but the items stayed invisible on the transparent-
   header pages (front page, contact-us, "Всички имоти"). Cause: Astra
   gives the menu its OWN white backgrounds on those pages -

       .ast-theme-transparent-header .main-header-menu .menu-link{
           background-color: var(--ast-global-color-5)   // = #FFFFFF
       }

   and the <ul class="main-header-menu"> itself renders white too - so
   every item is a white block sitting ON TOP of v1.2.10's dark panel,
   with white text (also --ast-global-color-5). Only the current item
   (forced gold) was legible. Confirmed with getComputedStyle: the
   <ul> and every .menu-link report background rgb(255,255,255).

   Fix: while the menu is open, clear the menu's own backgrounds so
   the dark panel shows through behind the (white) item text. No-op on
   band pages - they never get the white menu backgrounds.
   ============================================================ */
@media (max-width: 921px){
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .main-header-bar-navigation,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .main-navigation,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .main-header-menu,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-item,
    .ast-main-header-nav-open #ast-mobile-header .ast-builder-menu-mobile .menu-link{
        background: transparent !important;
        background-color: transparent !important;
    }
}


/* ============================================================
   v1.2.11 - Mobile: dark wordmark drops onto the dark hero
   ------------------------------------------------------------
   On transparent-header pages the "mountains" band behind the logo is
   Elementor's shape divider on the first hero section. Its <svg> has
   no fixed height and  viewBox="0 0 1000 100"  with
   preserveAspectRatio="none", so its rendered height auto-scales to
   roughly  viewport width / 10 :
       ~130px at 1300px  (whole logo sits on the white band - fine)
       ~39px  at 390px   (only the top of the logo is on white; the
                          word "INVESTMENTS" lands on the dark photo
                          and is unreadable)

   Pin the band tall enough on phones that the full wordmark sits on
   the light wave, exactly like desktop. The divider is
   position:absolute, so a taller band adds no layout shift - it just
   extends the decorative fade further down behind the header.
   ============================================================ */
@media (max-width: 921px){
    .ast-theme-transparent-header .entry-content > .elementor > .elementor-top-section:first-child > .elementor-shape-top svg{
        height: 100px !important;
    }
}


/* ============================================================
   v1.2.11 - Open mobile menu pushes the page down / is pierced by
             the advanced-search tabs
   ------------------------------------------------------------
   Astra's mobile menu is the "dropdown" type: opening it just sets
   .ast-mobile-header-content to display:block, IN FLOW inside
   #masthead. On band pages #masthead is position:relative (in flow),
   so the expanding panel shoved the "mountains" band and the whole
   advanced-search form down the page instead of dropping over them.

   Two parts:
   1. Take the open panel OUT of flow - position:absolute just under
      the header bar (top:100% of #ast-mobile-header, which we make
      position:relative). Now it overlays; nothing below moves.
      max-height + scroll so a long menu can't run off-screen.
   2. The ERE status tabs (.ere-search-status-tab / .btn-status-filter)
      are forced to z-index:100 further up in this file so a tap lands
      on the button, not the floating header - which also let them
      print through the open menu. While the menu is open, lift the
      mobile header to z-index:999 and drop the tabs to z-index:auto.
   ============================================================ */
@media (max-width: 921px){
    .ast-main-header-nav-open #masthead,
    .ast-main-header-nav-open #ast-mobile-header{
        position: relative !important;
        z-index: 999 !important;
    }
    .ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content{
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        z-index: 999 !important;
        max-height: calc(100vh - 64px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .ast-main-header-nav-open .ere-property-advanced-search .ere-search-status-tab,
    .ast-main-header-nav-open .ere-property-advanced-search .ere-search-status-tab-inner,
    .ast-main-header-nav-open .ere-property-advanced-search .btn-status-filter{
        z-index: auto !important;
    }
}


/* ============================================================
   v1.2.11 - contact-us / "Всички имоти": oversized grey header slab
             on mobile
   ------------------------------------------------------------
   Both pages are  ast-theme-transparent-header  (NOT .si-band-page),
   so the collapse rules higher up - which are scoped .si-band-page -
   never reached them. Their first Elementor section
   (elementor-element-b83fba0 / -5b828e3) is an empty leftover: a
   #1e1810 background overlay + 100px/50px padding, ~150px tall.

   On DESKTOP that block is the backdrop the horizontal menu bar sits
   in - keep it. On MOBILE the menu is in the hamburger, so ~75px of
   grey was just hanging below the header line.

   Do NOT strip it (that removed the "mountains" header background
   entirely). Instead shrink it to match the .si-band-page pages
   (property archive, /advanced-search/, ...): keep the shape divider
   + the grey overlay, but make the section just tall enough to sit
   behind the ~75px transparent header plus a ~12px strip below the
   line - same look as everywhere else.
   ============================================================ */
@media (max-width: 921px){
    .ast-theme-transparent-header .elementor-element-b83fba0,
    .ast-theme-transparent-header .elementor-element-5b828e3{
        padding-top: 76px !important;      /* ~ the mobile header height */
        padding-bottom: 12px !important;   /* the thin strip below the line */
        min-height: 0 !important;
    }
}