/* =========================================================================
   Nagłówek sklepu Deal Meble na blogu
   Odwzorowanie app/components/Header.tsx + menu/DesktopMenu.tsx ze sklepu.
   Kolor marki: #8b1f26
   ========================================================================= */

/* ---- fonty sklepu (kopie z buildu sklepu, serwowane z tej samej domeny) ---- */
@font-face {
    font-family: "DM Manrope";
    src: url("fonty/manrope-latin.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Manrope";
    src: url("fonty/manrope-latin-ext.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "DM Inter";
    src: url("fonty/inter-latin.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "DM Inter";
    src: url("fonty/inter-latin-ext.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --dm-akcent: #8b1f26;
    --dm-font: "DM Manrope", "DM Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Blog dziedziczy krój pisma sklepu - to najmocniej buduje wrażenie jednej witryny. */
body { font-family: var(--dm-font); }

/* Własny nagłówek motywu chowamy - jego rolę przejmuje nagłówek sklepu. */
.wp-site-blocks > header.wp-block-template-part { display: none !important; }

/* Motyw nie narzuca box-sizing naszym elementom - bez tego padding doklejał się
   do szerokości 100% i strona miała poziome przepełnienie na telefonach. */
#dm-naglowek-sklepu, #dm-naglowek-sklepu *, #dm-naglowek-sklepu *::before, #dm-naglowek-sklepu *::after,
.dm-mobil, .dm-mobil *, .dm-mobil-tlo { box-sizing: border-box; }

/* ---- kontener: odpowiednik tailwindowego "container mx-auto px-4" ---- */
#dm-naglowek-sklepu .dm-kontener,
.dm-mobil .dm-kontener {
    width: 100%; margin: 0 auto; padding: 0 1rem;
}
@media (min-width: 640px)  { #dm-naglowek-sklepu .dm-kontener { max-width: 640px; } }
@media (min-width: 768px)  { #dm-naglowek-sklepu .dm-kontener { max-width: 768px; } }
@media (min-width: 1024px) { #dm-naglowek-sklepu .dm-kontener { max-width: 1024px; } }
@media (min-width: 1280px) { #dm-naglowek-sklepu .dm-kontener { max-width: 1280px; } }
@media (min-width: 1536px) { #dm-naglowek-sklepu .dm-kontener { max-width: 1536px; } }

#dm-naglowek-sklepu {
    font-family: var(--dm-font);
    position: relative;
    z-index: 50;
    background: #fff;
}

/* Motyw WordPressa narzuca font-weight 300, letter-spacing -0.1px i interlinię 1.4.
   Bez tego resetu tekst w nagłówku był cieńszy i wyższy niż w sklepie — stąd
   rozjazd szerokości kolumn i wysokości megamenu. Wartości wprost ze sklepu. */
#dm-naglowek-sklepu, #dm-naglowek-sklepu *,
.dm-mobil, .dm-mobil * {
    font-weight: 400;
    letter-spacing: normal;
}

/* Rząd z logo: w sklepie padding poziomy ma KONTENER, a pionowy dopiero rząd.
   Sklejenie ich poszerzało pudełko rzędu i przesuwało menu przy space-between. */
#dm-naglowek-sklepu .dm-rzad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}
#dm-naglowek-sklepu a { text-decoration: none; }

/* ---- czarny pasek kontaktowy ---- */
#dm-naglowek-sklepu .dm-pasek-gora {
    background: #000; color: #fff; font-size: 14px; line-height: 20px; padding: 4px 0;
}
#dm-naglowek-sklepu .dm-pasek-gora .dm-kontener {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
#dm-naglowek-sklepu .dm-pasek-gora a { color: #fff; }
#dm-naglowek-sklepu .dm-pasek-gora a:hover { opacity: .8; }
@media (max-width: 767px) { #dm-naglowek-sklepu .dm-pasek-gora { display: none; } }

/* ---- główny rząd: logo + menu + ikony ---- */
#dm-naglowek-sklepu .dm-pasek-glowny { position: relative; }
#dm-naglowek-sklepu .dm-logo { display: block; width: 50%; min-width: 120px; max-width: 260px; }
#dm-naglowek-sklepu .dm-logo img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) { #dm-naglowek-sklepu .dm-logo { width: 16.6667%; } }

/* ---- menu poziome ---- */
#dm-naglowek-sklepu .dm-nawigacja { display: none; flex: 1 1 auto; min-width: 0; justify-content: center; }
@media (min-width: 1024px) { #dm-naglowek-sklepu .dm-nawigacja { display: flex; } }

#dm-naglowek-sklepu .dm-poziomy {
    display: flex; align-items: center; column-gap: 16px;
    list-style: none; margin: 0; padding: 0;
}
@media (min-width: 1280px) { #dm-naglowek-sklepu .dm-poziomy { column-gap: 24px; } }
#dm-naglowek-sklepu .dm-poziomy > li { position: static; }

#dm-naglowek-sklepu .dm-poziom1 {
    display: block; padding: 8px 0; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700; color: #000;
    line-height: 20px;            /* sklep: 20px, nie interlinia motywu */
    white-space: nowrap; transition: color .15s;
}
@media (min-width: 1280px) {
    #dm-naglowek-sklepu .dm-poziom1 { font-size: 14px; }
    #dm-naglowek-sklepu .dm-poziomy > li { padding: 0 8px; }
}
#dm-naglowek-sklepu .dm-poziom1:hover,
#dm-naglowek-sklepu .dm-poziomy > li:hover .dm-poziom1 { color: var(--dm-akcent); }

/* ---- megamenu ---- */
#dm-naglowek-sklepu .dm-mega {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    background: #fff; border-top: 1px solid #e5e7eb;
    /* dokładnie jak Tailwind shadow-lg w sklepie, z dwiema przezroczystymi warstwami */
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
    padding: 24px 48px 32px; z-index: 40;
    opacity: 0; visibility: hidden; transition: opacity .15s;
}
#dm-naglowek-sklepu .dm-poziomy > li:hover > .dm-mega,
#dm-naglowek-sklepu .dm-poziomy > li:focus-within > .dm-mega { opacity: 1; visibility: visible; }

#dm-naglowek-sklepu .dm-mega-srodek {
    max-width: 1400px; margin: 0 auto;
    display: flex; gap: 48px; justify-content: space-between;
}
#dm-naglowek-sklepu .dm-mega-waska { left: auto; right: auto; width: auto; min-width: 240px; padding: 16px 24px 24px; border: 1px solid #e5e7eb; border-radius: 0 0 8px 8px; }
#dm-naglowek-sklepu .dm-mega-waska .dm-mega-srodek { display: block; }

#dm-naglowek-sklepu .dm-kolumna { min-width: 150px; }
#dm-naglowek-sklepu .dm-kolumna-tytul {
    display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: #000;
    line-height: 24px; transition: color .15s;
}
#dm-naglowek-sklepu .dm-kolumna-tytul:hover { color: var(--dm-akcent); }
#dm-naglowek-sklepu .dm-kolumna ul { list-style: none; margin: 0; padding: 0; display: block; }
#dm-naglowek-sklepu .dm-kolumna ul li + li { margin-top: 8px; }   /* sklep: space-y-2 */
#dm-naglowek-sklepu .dm-kolumna ul a {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 400; line-height: 20px; color: #374151;
    white-space: nowrap; transition: color .15s;
}
#dm-naglowek-sklepu .dm-kolumna ul a:hover { color: var(--dm-akcent); }

/* ---- ikony po prawej ---- */
#dm-naglowek-sklepu .dm-akcje { display: none; align-items: center; gap: 20px; }   /* zmierzone w sklepie */
@media (min-width: 1024px) { #dm-naglowek-sklepu .dm-akcje { display: flex; } }
/* Sklep koloruje te ikony na terakotę (inline #B96541), a najechanie to
   powiększenie o 5%, NIE zmiana koloru (hover:scale-105 transition-transform). */
#dm-naglowek-sklepu .dm-akcje a { color: #B96541; display: flex; transition: transform .15s; }
#dm-naglowek-sklepu .dm-akcje a:hover { transform: scale(1.05); }
#dm-naglowek-sklepu .dm-akcje svg { width: 36px; height: 36px; }   /* rozmiar jak w sklepie */

/* ---- grupa mobilna: koszyk, lupa, hamburger ----
   W sklepie te ikony są CZARNE (bez atrybutu color -> currentColor),
   w odróżnieniu od terakotowych ikon w wersji na komputer. Odstęp 12 px (gap-3). */
#dm-naglowek-sklepu .dm-akcje-mobil {
    display: flex; align-items: center; gap: 12px; color: #000;
}
@media (min-width: 1024px) { #dm-naglowek-sklepu .dm-akcje-mobil { display: none; } }
#dm-naglowek-sklepu .dm-akcje-mobil a { color: #000; display: flex; }
#dm-naglowek-sklepu .dm-akcje-mobil svg { width: 36px; height: 36px; }

#dm-naglowek-sklepu .dm-hamburger {
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; cursor: pointer; color: #000; padding: 0;
}
#dm-naglowek-sklepu .dm-hamburger svg { width: 36px; height: 36px; }

/* ---- pasek bloga ---- */
#dm-naglowek-sklepu .dm-pasek-blog {
    background: #f6f6f6; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
}
#dm-naglowek-sklepu .dm-pasek-blog .dm-kontener {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 10px; padding-bottom: 10px;
}
#dm-naglowek-sklepu .dm-blog-nazwa { font-size: 15px; font-weight: 700; color: #111; letter-spacing: .01em; }
#dm-naglowek-sklepu .dm-blog-nazwa:hover { color: var(--dm-akcent); }
#dm-naglowek-sklepu .dm-blog-powrot {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 600; color: var(--dm-akcent);
}
#dm-naglowek-sklepu .dm-blog-powrot svg { width: 14px; height: 14px; }
#dm-naglowek-sklepu .dm-blog-powrot:hover { text-decoration: underline; }

/* =========================================================================
   Panel mobilny
   ========================================================================= */
.dm-mobil {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(88vw, 380px);
    background: #fff; z-index: 100000; overflow-y: auto;
    font-family: var(--dm-font);
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgb(0 0 0 / .18);
}
.dm-mobil[hidden] { display: block; }         /* animacja zamiast znikania */
.dm-mobil.dm-otwarte { transform: translateX(0); }
.dm-mobil-tlo {
    position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 99999;
    opacity: 0; transition: opacity .25s;
}
.dm-mobil-tlo[hidden] { display: none; }
.dm-mobil-tlo.dm-otwarte { opacity: 1; }

.dm-mobil-gora {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb; font-weight: 700;
}
.dm-mobil-zamknij { border: 0; background: none; cursor: pointer; color: #111; padding: 4px; }
.dm-mobil-zamknij svg { width: 24px; height: 24px; }

.dm-mobil-lista { list-style: none; margin: 0; padding: 0; }
.dm-mobil-lista > li { border-bottom: 1px solid #f0f0f0; }
.dm-mobil-lista > li > a,
.dm-mobil-przelacz {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 14px 20px; font-family: inherit; font-size: 15px; font-weight: 700;
    color: #111; text-decoration: none; border: 0; background: none; cursor: pointer;
    text-align: left;
}
.dm-mobil-przelacz svg { width: 16px; height: 16px; transition: transform .2s; flex: 0 0 auto; }
.dm-mobil-przelacz[aria-expanded="true"] svg { transform: rotate(90deg); }
.dm-mobil-przelacz[aria-expanded="true"] { color: var(--dm-akcent); }

.dm-mobil-podmenu { padding: 0 20px 12px; }
.dm-mobil-podmenu[hidden] { display: none; }
.dm-mobil-podmenu .dm-kolumna { margin-bottom: 14px; min-width: 0; }
.dm-mobil-podmenu .dm-kolumna-tytul {
    display: block; font-size: 14px; font-weight: 700; color: #111; margin-bottom: 6px;
    text-decoration: none;
}
.dm-mobil-podmenu ul { list-style: none; margin: 0; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 7px; }
.dm-mobil-podmenu ul a { font-size: 14px; color: #4b5563; text-decoration: none; white-space: normal; }
.dm-mobil-podmenu ul a:hover { color: var(--dm-akcent); }

body.dm-menu-otwarte { overflow: hidden; }