/* =========================================================================
   Kolorystyka sklepu — uzupełnienie theme.json
   Paleta pobrana z działającego sklepu dealmeble.pl.
   ========================================================================= */

:root {
    --dm-tlo:        #F5F3EF;   /* tło strony i nagłówka */
    --dm-tekst:      #000000;
    --dm-terakota:   #B96541;   /* przyciski / CTA */
    --dm-czerwien:   #8B1F26;   /* kolor marki */
    --dm-piasek:     #D6C7B0;   /* stopka */
    --dm-szary:      #4B5563;   /* tekst drugorzędny */
    --dm-biel:       #FFFFFF;   /* karty, rozwijane menu */
    --dm-linia:      #E3DED4;   /* delikatne obramowania na ciepłym tle */
}

/* Tło strony — także obszar poza treścią (np. przy krótkich wpisach). */
html { background-color: var(--dm-tlo); }
body { background-color: var(--dm-tlo); color: var(--dm-tekst); }

/* -------- nagłówek sklepu na blogu -------- */
/* W sklepie nagłówek NIE jest biały — ma to samo ciepłe tło co strona. */
#dm-naglowek-sklepu { background: var(--dm-tlo); }
#dm-naglowek-sklepu .dm-pasek-blog {
    background: #EDE9E1;
    border-top-color: var(--dm-linia);
    border-bottom-color: var(--dm-linia);
}
/* Rozwijane megamenu zostaje białe — tak jest w sklepie (kontrast do tła). */
#dm-naglowek-sklepu .dm-mega { background: var(--dm-biel); border-top-color: #E5E7EB; }  /* dokładnie jak w sklepie */
#dm-naglowek-sklepu .dm-mega-waska { border-color: var(--dm-linia); }
.dm-mobil { background: var(--dm-biel); }
.dm-mobil-gora { border-bottom-color: var(--dm-linia); }
.dm-mobil-lista > li { border-bottom-color: #F1EDE5; }

/* -------- stopka -------- */
/* Stopkę motywu zastąpiła odwzorowana stopka sklepu (wtyczka "Nagłówek i stopka
   sklepu Deal Meble"), która ma własne, zmierzone kolory. Nic tu nie ustawiamy. */

/* -------- treść wpisu -------- */
/* Karty i wyróżnione bloki na białym tle — jak kafle produktów w sklepie. */
.wp-block-post,
.wp-block-latest-posts li,
.wp-block-quote,
.wp-block-pullquote {
    border-radius: 12px;   /* promień używany w sklepie */
}

.wp-block-quote {
    background: var(--dm-biel);
    border-left: 4px solid var(--dm-terakota);
    padding: 16px 20px;
}

/* Tekst pomocniczy: daty, metadane, podpisy pod zdjęciami */
.wp-block-post-date, .wp-block-post-author, .wp-block-post-terms,
.wp-element-caption, figcaption, .wp-block-post-excerpt__more-text {
    color: var(--dm-szary);
}

/* Obramowania i linie w ciepłej tonacji zamiast szarych */
hr, .wp-block-separator { border-color: var(--dm-linia); color: var(--dm-linia); }
.wp-block-table td, .wp-block-table th { border-color: var(--dm-linia); }

/* Pola formularzy (komentarze, wyszukiwarka) */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], textarea, select {
    background: var(--dm-biel);
    border: 1px solid var(--dm-linia);
    border-radius: 8px;
    color: var(--dm-tekst);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--dm-terakota);
    outline-offset: 1px;
}

/* Zaznaczenie tekstu w barwach marki */
::selection { background: var(--dm-terakota); color: #fff; }

/* -------- tytuły wpisów -------- */
/* W sklepie nazwa produktu jest czarna i dopiero po najechaniu robi się
   czerwona. Tytuł wpisu też jest linkiem, więc bez tego dziedziczyłby
   czerwień z ustawienia linków i cała lista wpisów byłaby czerwona. */
.wp-block-post-title a,
.wp-block-latest-posts__post-title,
.wp-block-query-title,
h1 a, h2 a, h3 a, h4 a {
    color: var(--dm-tekst);
    text-decoration: none;
}
.wp-block-post-title a:hover,
.wp-block-latest-posts__post-title:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: var(--dm-czerwien);
}

/* Linki w treści wpisu zostają czerwone i podkreślone - muszą być rozpoznawalne. */
.wp-block-post-content a:not(.wp-element-button),
.entry-content a:not(.wp-element-button) {
    color: var(--dm-czerwien);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wp-block-post-content a:not(.wp-element-button):hover,
.entry-content a:not(.wp-element-button):hover {
    color: var(--dm-terakota);
}