/*
	Theme Name: Szablon Merlon
	Theme URI: https://merlon.pl
	Description: merlon.pl Theme
	Author: ASARI
	Author URI: https://asaricrm.com/
	Template: asaritemplate2023
	Version: 2.0.12
*/

body.wp-child-theme-asaritemplate2023Merlon {
    --color-black: #171B26;
    --color-text: var(--color-black);
    --color-footer-text: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

h1:is(.color, .color-1),
h2:is(.color, .color-1) {
    color: var(--color-1);
}

.lead-text.fo-lead {
    font-size: 16px; line-height: 28.501px; letter-spacing: -0.32px;
    font-weight: 400;
}

.the-content h2,
.wp-block-heading {
    font-weight: 500;
}

.the-content .wp-block-button > a {
    color: #1D5FF0;
    border-color: #1D5FF0;
}

.the-content .wp-block-button > a:hover {
    color: #fff;
}

#top-bar {
    background-color: #1d5ff0; /* 2026-08-06: brand (bylo #305de6 po sprawie szwu — patrz nizej) */
}

/* Gradient pod naglowkiem w TYM SAMYM odcieniu co #top-bar.
   Zmierzone pikselami na stronie glownej: pasek #305de6 (wiersze 4-28), a juz
   od y=36 gradient dawal #1c5eef (czyli stary #1D5FF0) — na styku byl widoczny
   szew i pasek czytal sie jako „nie ten kolor", mimo ze sam pasek byl poprawny. */
/* 2026-08-06: gradient nad hero ROWNY na wszystkich podstronach (poza /kontakt/):
   #1d5ff0 (jak #top-bar — zero szwu) gasnacy na 100px. Ten sam wizual co page-flon
   (li::after ponizej w finansowanie.css, tez stop na 100px). Home: wysoka wersja. */
body:not(.offer):not(.home):not(.page-id-11) #header::after {
    background: linear-gradient(180deg, #1d5ff0 0%, rgba(29, 95, 240, 0) 100px);
    opacity: unset;
    height: 100px;
}
.home #header::after {
    background-blend-mode: multiply;
    background: linear-gradient(360deg, rgba(29, 95, 240, 0) 50%, #1d5ff0 100%);
    opacity: unset;
    height: 640px;
}

/* Szary gradient nad hero — TYLKO /kontakt/ (page-id-11).
   /zespol/ (page-id-9) zostalo z tego zdjete 2026-08-04: ta podstrona to teraz
   „O nas" wg ramki Figmy 432:10 i ma hero w niebieskim duotonie. Szary welon
   #969696 rozjasnial mu gore do odcieni szarosci — zmierzone w y=40: projekt
   (28,95,240) vs produkcja (132,137,147), srednia jasnosc gornej polowy 83.9
   vs 120.7. Override mial sens, gdy /zespol/ mialo kolorowe zdjecie zespolu. */
body.page-id-11 #header::after {
    background: #969696;
    background: linear-gradient(360deg, rgba(150, 150, 150, 0) 50%, #969696 100%);
}

/* /zespol/ („O nas") — gradient nad hero JAK NA POZOSTALYCH PODSTRONACH.
   Zdjalem go 2026-08-04, bo ramka Figmy 432:10 go nie ma, ale uzytkownik chce
   spojnosci ze strona glowna — wiec podstrona korzysta z globalnej reguly
   body:not(.offer) #header::after (#305DE6). Szary override #969696 pozostaje
   zdjety: byl z czasow, gdy /zespol/ mialo kolorowe zdjecie zespolu, i na
   niebieskim duotonie rozjasnial gore kadru do szarosci. */

#header .main-part {
    left: 50%;
    transform: translateX(-50%);
    max-width: 1578px;
    box-sizing: border-box;
}

#header .main-part .brand img {
    width: 140px; /* -20px (bylo 160px) */
    height: auto;
}

#header .sliding-part .brand img {
    width: 140px; /* -20px, spojnie z paskiem glownym */
    height: auto;
}

/* przyklejony naglowek to ten sam pasek, tylko wyjezdzajacy przy przewijaniu —
   trzymamy go w kolorze #top-bar, a nie w --color-1 (#1d5ff0) */
#header .sliding-part.visible {
    background-color: #1d5ff0; /* = #top-bar (2026-08-06) */
}

/* Logo w przyklejonym pasku W TEJ SAMEJ osi X co logo w pasku glownym.
   Rozjazd bral sie z naszej reguly `#header .main-part { max-width:1578px; left:50%;
   transform:translateX(-50%) }` — pasek glowny jest wiec wysrodkowanym kontenerem
   1578px, a `.sliding-part` to `position:fixed; left:0; width:100%` z paddingiem 25px.
   Zmierzone logo: 1920 → 196 vs 25, 1800 → 136 vs 25, 1600 → 36 vs 25.
   Ponizej 1578px oba logo i tak stoja w tym samym miejscu (1578 → 141/141,
   1440 → 72/72, 1280 → 12/12; ten dodatkowy offset daje motyw-rodzic OBU paskom
   jednakowo), dlatego `max()` z podloga 25px zostawia ten zakres bez zmian —
   25px to dokladnie tyle, ile pasek ma tam teraz.
   Tlo zostaje na calej szerokosci, przesuwa sie tylko tresc. */
#header .sliding-part {
    padding-left: max(25px, calc((100% - 1578px) / 2 + 25px));
    padding-right: max(25px, calc((100% - 1578px) / 2 + 25px));
}

:is(#slider .widgets, #slider + .widgets) .asariplug_sengine :is(input[type="submit"], .f_location_locality_mapTrigger, .f_location_locality_mapSelected), #cookie-bar .button {
    background-color: var(--color-black);
    border-color: var(--color-black);
}

#slider > ul > li {
    position: relative;
    display: inline-block;
}

.home #slider > ul > li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to bottom, rgba(29, 95, 240, 0.85) 0%, rgba(10, 40, 110, 0.95) 100%);*/
    mix-blend-mode: multiply;
    pointer-events: none;
}

#czym-sie-zajmujemy {
    color: #1d5ff0
}

.the-content :is(p, ul, table, figure) + h2 {
    margin-top: 36px;
}

#content > article > div > div.wp-block-group.width-a > div > div.wp-block-group.service > div > div.wp-block-group.width-1 > div > div > div:nth-child(1) > div > span {
    background-color: #0034a5e5!important
}

#footer {
    padding-bottom: 0;
}

.footer-logo {
    width: 160px;
}

.read-on {
    font-weight: 500;
    text-decoration: underline;
}

.read-on:hover {
    text-decoration: none;
}

.read-on:after {
    display: none;
}

.read-on_blue {
    color: #1D5FF0;
}

#description .agent-card .link a.btn {
    display: inline-block;
}

#menu-privacy-links a {
    color: var(--color-text);
}

#menu-privacy-links .menu-item:not(:first-child) {
    position: relative;
    padding-left: 16px;
}

#menu-privacy-links .menu-item:not(:first-child)::before {
    content: "|";
    position: absolute;
    left: 0;
    color: var(--color-text);
    top: 50%;
    transform: translateY(-50%);
}

/* Niebieski box w modulach .service (m.in. „Bezplatna wycena mieszkania online
   w 2 minuty" na stronie glownej) — TLO JEDNOLITE #1d5ff0.
   Bylo rgba(29,95,240,.9) + background-blend-mode:multiply, czyli poltransparentne:
   zdjecie przeswiecalo przez box i mieszalo sie z kolorem. Krycie i blend zdjete,
   bo przy jednolitym tle nie maja co robic.
   Kolor: #385cea (2026-08-03) → #1d5ff0 (2026-08-04, zgloszenie uzytkownika);
   #1d5ff0 to --color-1 motywu, wiec box wraca do bazowego niebieskiego marki. */
.the-content .wp-block-group.service > .wp-block-group__inner-container > .wp-block-group:not([class*="width-"]) {
    background: #1d5ff0;
}

#footer .widget-social .youtube {
    order: 999;
}

/* stopka (globalnie): ikony social zwarte przy lewej zamiast rozrzuconych na cala
   szerokosc kolumny (bylo justify-content:space-between) — maly, staly odstep */
#footer .widget-social {
    justify-content: flex-start !important;
    gap: 14px !important;
    /* Po zwezeniu trzeciej kolumny stopki (wysrodkowanie, zal. 15) trzy ikony
       przestaly sie miescic w jednym wierszu i YouTube zeskakiwal pod spod.
       Bez zawijania szerokosc kolumny liczy sie od pelnego rzedu ikon. */
    flex-wrap: nowrap !important;
}

@media (min-width: 768px) {

    #header .brand img, #header .brand.size-100 img {
        max-height: unset;
    }

    #menu-privacy-links {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .home #slider-widgets-1 h1 {
        font-size: clamp(16px, 4.2vw, 80px);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.5;
    }

    .image-ratio {
        aspect-ratio: 685/518;
    }

    /* Bylo `flex: 0 0 calc(25% - 15px)` (sztywne 309px na kolumne). Przy rownych
       odstepach kolumny musza miec szerokosc TRESCI — inaczej nadwyzka boksu nad
       atramentem powieksza odstep tylko przy niektorych blokach (zmierzone:
       239 / 172 / 90px). Ta regula ma pseudoklase, wiec bije ogolna
       `> .section { flex: 0 0 auto }` — dlatego zmieniamy ja tutaj, u zrodla. */
    #footer #footer-widgets-bottom.widgets > .section:nth-child(1),
    #footer #footer-widgets-bottom.widgets > .section:nth-child(2) {
        flex: 0 0 auto;
    }

    /* zal. 15 + zgloszenie 2026-08-04: stopka wysrodcentrowana, a wszystkie CZTERY
       bloki (logo, „Nasz adres", „Kontakt", „Znajdziesz nas tu") z ROWNYM odstepem.
       Problem strukturalny: bloki sa w TRZECH sekcjach — trzecia trzyma dwa widgety,
       wiec odstep miedzy nimi rzadzil sie inna regula niz odstepy miedzy sekcjami.
       Zmierzone przed zmiana: 164 / 98 / 15px.
       `display: contents` na trzeciej sekcji wypuszcza jej widgety do wiersza
       nadrzednego — wtedy column-gap dziala miedzy WSZYSTKIMI blokami, a kolumny
       o szerokosci tresci pozwalaja wiersz wysrodkowac jako grupe.
       90px wybrane tak, by grupa zachowala dotychczasowa rozpietosc:
       atrament 160+227+125+133 = 645, 645 + 3*90 = 915 wobec 920 przed zmiana. */
    #footer #footer-widgets-bottom.widgets {
        justify-content: center;
        /* Zawijanie WLACZONE: przy sztywnym `nowrap` i 90px wiersz potrzebowal
           921px i przy 768px wychodzil poza ekran (zmierzone luzy -76/-70).
           Z zawijaniem bloki, ktore sie nie mieszcza, schodza do nastepnego
           wiersza i kazdy wiersz nadal jest wysrodkowany. */
        flex-wrap: wrap;
        /* odstep skaluje sie z szerokoscia: 90px przy 1920 (4.7vw), mniej nizej */
        column-gap: clamp(24px, 4.7vw, 90px);
        row-gap: 24px;
    }

    #footer #footer-widgets-bottom.widgets > .section {
        flex: 0 0 auto;
    }

    #footer #footer-widgets-bottom.widgets > .section:nth-child(3) {
        display: contents;
    }

    #footer #footer-widgets-bottom.widgets > .section:nth-child(3) > .widget {
        flex: 0 0 auto;
    }
}

@media (min-width: 1280px) {
    #header .main-part {
        padding-top: 50px;
    }
}

@media (min-width: 1600px) {
    .wp-block-group.width-a {
        width: 1528px;
    }
    .the-content .width-a, .home #slider .widgets {
        width: 1552px;
    }
}

/* Mapy OpenStreetMap (kontakt, oferty, wyszukiwarka na /nieruchomosci/):
   kafelki czarno-biale, jasne. Filtr tylko na warstwie kafelkow Leaflet —
   markery, popupy i kontrolki zostaja kolorowe. */
.leaflet-tile-pane {
    filter: grayscale(1) brightness(1.08) contrast(.92);
}

/* Znacznik na mapie /kontakt/ — POWIEKSZONY 1,5x: 25x41 -> 38x62
   (zgloszenie klienta 2026-08-04: „kolor, wielkosc znacznika na mapie";
   kolor #2e57d7 zrobiony wczesniej przez podmiane PNG w merlon_kontakt_marker_script).

   Zakotwiczenie trzeba przeliczyc RECZNIE, inaczej czubek pinezki zjedzie z adresu.
   Leaflet ustawia INLINE `margin-left:-12px; margin-top:-41px` (iconAnchor 12,41)
   i pozycjonuje ikone transformem: zmierzone translate3d(960px,335px) + te marginesy
   daja lewy-gorny rog (948,294), a przy 25x41 czubek (dol-srodek) wypada dokladnie
   w (960.5, 335) — czyli w punkcie transformacji, ktory jest wspolrzedna adresu.
   Przy 38x62 ten sam czubek wymaga marginesow -19px / -62px.
   Cien (marker-shadow.png 41x41, ten sam anchor) skalujemy tym samym wspolczynnikiem
   do 62x62 z marginesami -18px / -62px, zeby jego podstawa zostala na linii czubka.
   Wszedzie !important, bo walczymy z stylami inline od Leafletu. */
body.page-id-11 img.leaflet-marker-icon {
    width: 38px !important;
    height: 62px !important;
    margin-left: -19px !important;
    margin-top: -62px !important;
}

body.page-id-11 img.leaflet-marker-shadow {
    width: 62px !important;
    height: 62px !important;
    margin-left: -18px !important;
    margin-top: -62px !important;
}


/* Naglowek listy ofert „Nieruchomosci | Liczba ofert: 26" — zdjety (zgloszenie
   klienta 2026-08-04: „wszedzie usunac"). Renderuje go szablon listy z asariplug
   jako <p class="info"> w <header> sekcji #list.
   Chowamy TYLKO ten akapit, nie caly <header> — w headerze siedzi jeszcze .group
   z sortowaniem i przyciskiem MAPA, a sam <header> jest punktem odniesienia dla
   merlon_logo_align_script (wyrownanie logo do lewej krawedzi tresci). */
#list > header > p.info {
    display: none;
}


/* --- WYNIKI /nieruchomosci/: hero tej samej wysokosci co podstrony ---
   Szablon ofert daje `slider height-2` = 817px, a /finansowanie/, /wycena/,
   /kariera/ i /zespol/ maja 500px. Zgloszenie uzytkownika: „powinna byc jak na
   pozostalych stronach".
   Samo skrocenie kontenera NIE wystarczy: na tym szablonie zdjecie nie jest
   rozciagane do kadru — zmierzone img 1039px wysokosci przy sliderze 817px,
   ustawiane hackiem motywu-rodzica `top:50% + translateY(-50.2%)`. Bez wymuszenia
   cover i wyzerowania hacka pod zdjeciem zostaje pasek tla (ten sam mechanizm,
   ktory na wycenie dawal „biala kreske" pod hero).
   Reguly musza byc w style.css, bo finansowanie.css jedzie tylko na page-flon. */
body.offers #slider.slider {
    height: min(56vh, 500px) !important;
}

html body.offers #slider.slider ._slider,
html body.offers #slider.slider ._slider.owl-carousel li,
html body.offers #slider.slider ._slider li {
    height: 100% !important;
    max-height: none !important;
}

html body.offers #slider.slider ._slider.owl-carousel li img,
html body.offers #slider.slider ._slider li img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 55% !important;
    top: 0 !important;
    transform: none !important;
}


/* --- TOPBAR mobile (<=700px): rodzic nie jest responsywny — .side-right (413px)
   nachodzil na zwiniete do 15px .side-left; sociale lezaly NIEWIDOCZNE pod ikonami
   telefonu/maila (martwe pola kliku — zgloszenie klienta), a ulubione wystawaly
   poza ekran. Sociale chowamy (wizualnie i tak ich nie bylo), kontakt+formularze
   +ulubione rozkladamy na cala szerokosc. --- */
@media (max-width: 700px) {
  #top-bar { padding-left: 12px; padding-right: 12px; overflow: hidden; }
  #top-bar .side-left { display: none; }
  #top-bar .side-right { width: 100%; max-width: 100%; margin: 0; padding: 0;
    justify-content: space-between; gap: 6px; }
  #top-bar .side-right .widget { margin: 0; }
}

/* --- FORMULARZE (/formularze/zlec-poszukiwanie/ 2362, /formularze/zglos-nieruchomosc/ 2360):
   hero (service-bg.jpg w figure.wp-block-image) bylo jasne, biale menu nieczytelne.
   Niebiesko-czarny duotone jak na natywnych grafikach klienta: grayscale na img
   + multiply gradientem #1d5ff0 -> #0a1c4e na ::after figury (figure ma
   position:relative + overflow:hidden, wiec overlay sie domyka). --- */
body.page-id-2362 .wp-block-group.slider figure.wp-block-image img,
body.page-id-2360 .wp-block-group.slider figure.wp-block-image img {
    filter: grayscale(1) brightness(1.04);
}
body.page-id-2362 .wp-block-group.slider figure.wp-block-image::after,
body.page-id-2360 .wp-block-group.slider figure.wp-block-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #1d5ff0 0%, #0a1c4e 100%);
    mix-blend-mode: multiply;
}