/* ===========================================================================
   DuoRegio — profil w barwach firmy (21.10.2026)
   Founder: „strona w stronie, nawet DuoRegio menu się zmienia pod kolor firmy … logo firmy jako tło”.

   Plik ładuje layout TYLKO na /katalog-firm/{slug} firmy z włączonym „Profilem w barwach firmy”
   ({{ if dr_marka_css }} w layout.antlers.html). Wszystkie reguły siedzą pod body.dr-marka,
   kolory biorą się wyłącznie ze zmiennych --mk-* wpisanych przez App\Support\ProfilMarkiWww
   (sprawdzone #rrggbb i adresy /assets/…). Inne strony i zwykłe profile nie widzą nic z tego pliku.

   Zmienne: --mk-1/--mk-2 gradient, --mk-tx tekst na gradiencie, --mk-scrim przesłona (gdy trzeba dla 4,5:1),
   --mk-ak / --mk-akd akcent na jasnym / ciemnym, --mk-akt / --mk-akdt akcent na miękkim gradiencie,
   --mk-btn / --mk-btn-tx przycisk główny, --mk-s1..s2d miękkie tła, --mk-logo / --mk-tlo obrazy.

   Specyficzność: „> nav:not(#mbn)” i „#main-content” liczą się jak #id, więc wygrywają z nav-css,
   dark.css i stylami w szablonie profilu bez wyścigu o kolejność; !important tylko tam,
   gdzie rywal też go ma albo kolor stoi w atrybucie style.
   =========================================================================== */

/* ---------- tokeny profilu (/css/profil.css) → barwy firmy ---------- */
body.dr-marka { --pf-brand: var(--mk-ak); --pf-brand-dark: var(--mk-ak); }
html[data-theme="dark"] body.dr-marka { --pf-brand: var(--mk-akd); --pf-brand-dark: var(--mk-akd); }

/* ===========================================================================
   NAGŁÓWEK PORTALU — gradient firmy; DuoRegio zostaje jako znak na białej plakietce
   =========================================================================== */
body.dr-marka > nav:not(#mbn) {
  background: linear-gradient(var(--mk-scrim), var(--mk-scrim)), linear-gradient(100deg, var(--mk-1) 0%, var(--mk-2) 100%) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 2px 14px rgba(15, 23, 42, .18) !important;
}

/* Znak DuoRegio: emblemat i nazwa na białej, zaokrąglonej plakietce — czytelny na każdym kolorze firmy */
body.dr-marka > nav:not(#mbn) .nav-logo {
  background: #fff; border-radius: 12px; padding: 4px 12px 4px 4px; gap: 8px;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .22);
}
body.dr-marka > nav:not(#mbn) .nav-logo img { width: 34px; height: 34px; }
body.dr-marka > nav:not(#mbn) .nav-logo span { color: #0f172a !important; font-size: 1.08rem; }
body.dr-marka > nav:not(#mbn) .nav-logo:focus-visible { outline: 3px solid var(--mk-ring); outline-offset: 2px; }
@media (max-width: 1024px) {
  body.dr-marka > nav:not(#mbn) .nav-logo { padding: 4px; margin-right: 8px; border-radius: 11px; }
}

/* Pozycje menu: tekst i strzałki w kolorze czytelnym na gradiencie */
body.dr-marka > nav:not(#mbn) .nav-btn { color: var(--mk-tx) !important; }
body.dr-marka > nav:not(#mbn) .nav-btn > span { opacity: .85 !important; }
body.dr-marka > nav:not(#mbn) .nav-btn:hover,
body.dr-marka > nav:not(#mbn) .nav-item.open > .nav-btn { background: var(--mk-hov) !important; color: var(--mk-tx) !important; }
body.dr-marka > nav:not(#mbn) .nav-btn:focus-visible { outline: 2px solid var(--mk-ring); outline-offset: 1px; }

/* Prawa strona: flagi, motyw, dzwonek, konto, „Pulpit”, „+”, hamburger */
body.dr-marka > nav:not(#mbn) .lang-flags { background: var(--mk-hov) !important; }
body.dr-marka > nav:not(#mbn) .lang-flag { opacity: .8; }
body.dr-marka > nav:not(#mbn) .lang-flag.active { background: #fff !important; opacity: 1; }
body.dr-marka > nav:not(#mbn) .theme-toggle:hover,
body.dr-marka > nav:not(#mbn) .hamburger:hover,
body.dr-marka > nav:not(#mbn) .nav-bell-btn:hover { background: var(--mk-hov) !important; }
body.dr-marka > nav:not(#mbn) .nav-bell-btn { color: var(--mk-tx) !important; }
body.dr-marka > nav:not(#mbn) .hamburger rect { fill: var(--mk-tx) !important; }
body.dr-marka > nav:not(#mbn) .nav-user-btn,
body.dr-marka > nav:not(#mbn) .nav-user-btn.logged-in,
body.dr-marka > nav:not(#mbn) .nav-cta,
body.dr-marka > nav:not(#mbn) .nav-plus-btn { background: #fff !important; border-color: #fff !important; color: var(--mk-ak) !important; }
body.dr-marka > nav:not(#mbn) .nav-cta:hover,
body.dr-marka > nav:not(#mbn) .nav-plus-btn:hover,
body.dr-marka > nav:not(#mbn) .nav-plus.open .nav-plus-btn { background: #fff !important; color: var(--mk-akt) !important; box-shadow: 0 0 0 3px var(--mk-hov); }

/* Rozwijane menu zostają białe (ciemne w trybie ciemnym) — tylko akcent w barwie firmy.
   Aktywna pozycja: napis w akcencie + pasek z lewej (bez barwnego tła, żeby nie tracić kontrastu). */
html:not([data-theme="dark"]) body.dr-marka > nav:not(#mbn) .nav-drop a.active { color: var(--mk-ak) !important; background: transparent !important; box-shadow: inset 3px 0 0 var(--mk-ak); }
html:not([data-theme="dark"]) body.dr-marka > nav:not(#mbn) .nav-drop a:hover,
html:not([data-theme="dark"]) body.dr-marka > nav:not(#mbn) .nav-plus-menu a:hover,
html:not([data-theme="dark"]) body.dr-marka > nav:not(#mbn) .nav-mobile-menu a:hover { color: var(--mk-akt) !important; }
html[data-theme="dark"] body.dr-marka > nav:not(#mbn) .nav-drop a.active { color: var(--mk-akd) !important; background: transparent !important; box-shadow: inset 3px 0 0 var(--mk-akd); }
html[data-theme="dark"] body.dr-marka > nav:not(#mbn) .nav-mobile-menu a:hover { color: #fff !important; box-shadow: inset 3px 0 0 var(--mk-akd); }

/* Dolny pasek na telefonie: aktywna zakładka w akcencie firmy */
body.dr-marka #mbn .mbn-item.active { color: var(--mk-ak) !important; }
html[data-theme="dark"] body.dr-marka #mbn .mbn-item.active { color: var(--mk-akd) !important; }

/* ===========================================================================
   NAGŁÓWEK PROFILU — tło wg stylu: znak wodny z logo, zdjęcie albo gradient
   =========================================================================== */
body.dr-marka #main-content .dm-hero { position: relative; isolation: isolate; border-color: transparent; }

/* 1) Znak wodny: duże, blade logo firmy na miękkim gradiencie w jej barwach. Tekst zostaje ciemny (jasny w trybie ciemnym). */
body.dr-marka-znak #main-content .dm-hero { background: linear-gradient(135deg, var(--mk-s1) 0%, var(--mk-s2) 100%); }
html[data-theme="dark"] body.dr-marka-znak #main-content .dm-hero { background: linear-gradient(135deg, var(--mk-s1d) 0%, var(--mk-s2d) 100%); }
body.dr-marka-znak #main-content .dm-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -56px; bottom: -72px; width: 340px; height: 340px;
  background: var(--mk-logo) center / contain no-repeat;
  opacity: var(--mk-wm-op); filter: var(--mk-wm);
}
/* W trybie ciemnym logo jako jasna sylwetka — ciemne elementy znaku zniknęłyby na ciemnym tle */
html[data-theme="dark"] body.dr-marka-znak #main-content .dm-hero::before { filter: brightness(0) invert(1); opacity: .08; }
@media (max-width: 640px) {
  body.dr-marka-znak #main-content .dm-hero::before { width: 250px; height: 250px; right: -48px; bottom: -48px; }
}
body.dr-marka-znak #main-content .dm-ident .dm-sub { color: var(--pf-text-2); }
body.dr-marka-znak #main-content .dm-verified { color: var(--mk-akt); }
html[data-theme="dark"] body.dr-marka-znak #main-content .dm-verified { color: var(--mk-akdt); }

/* 2) Zdjęcie: przesłona od 58% do 80% krycia — biały tekst ma ≥ 4,5:1 nawet na białym fragmencie zdjęcia */
body.dr-marka-zdjecie #main-content .dm-hero {
  background: linear-gradient(180deg, rgba(8, 12, 22, .58) 0%, rgba(8, 12, 22, .8) 100%), var(--mk-tlo) center / cover no-repeat, #0f172a;
}
body.dr-marka-zdjecie #main-content .dm-ident .dm-name,
body.dr-marka-zdjecie #main-content .dm-ident .dm-sub,
body.dr-marka-zdjecie #main-content .dm-ident .dm-sub a,
body.dr-marka-zdjecie #main-content .dm-verified { color: #fff !important; }
body.dr-marka-zdjecie #main-content .dm-ident .dm-name { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* 3) Gradient: pełne barwy firmy, tekst jak w nagłówku portalu (z tą samą przesłoną, gdy potrzebna) */
body.dr-marka-gradient #main-content .dm-hero {
  background: linear-gradient(var(--mk-scrim), var(--mk-scrim)), linear-gradient(135deg, var(--mk-1) 0%, var(--mk-2) 100%);
}
body.dr-marka-gradient #main-content .dm-ident .dm-name,
body.dr-marka-gradient #main-content .dm-ident .dm-sub,
body.dr-marka-gradient #main-content .dm-ident .dm-sub a,
body.dr-marka-gradient #main-content .dm-verified { color: var(--mk-tx) !important; }

/* Na pełnym tle (zdjęcie, gradient) logo, przyciski i chipy zostają na własnych, nieprzezroczystych plakietkach */
body.dr-marka-zdjecie #main-content .dm-ident-logo,
body.dr-marka-gradient #main-content .dm-ident-logo { border-color: rgba(255, 255, 255, .6); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }

/* ===========================================================================
   AKCENTY PROFILU — nagłówki sekcji, linki, chipy, przyciski
   =========================================================================== */
/* Nagłówki sekcji w akcencie (jasny: --mk-ak, ciemny: --mk-akd przez --pf-brand-dark) */
body.dr-marka #main-content .dm-card > h2,
body.dr-marka #main-content .dm-card-head > h2,
body.dr-marka #main-content .dm-h2,
body.dr-marka #main-content .dm-cardify > h2,
body.dr-marka #main-content .dm-cardify > div > h2,
body.dr-marka #main-content .dm-reels-head h2 { color: var(--pf-brand-dark) !important; }
/* Ikony w nagłówkach: bez tęczowej animacji portalu (layout: icon-color-flow) — kolor dziedziczą z nagłówka */
body.dr-marka #main-content .dm-wrap h2 i.fas,
body.dr-marka #main-content .dm-wrap h2 i.far { animation: none; color: inherit; }
body.dr-marka #main-content .dm-card-head > h2 .dm-licz { color: var(--pf-text-3); }

/* Linki i wyróżnienia, które w trybie ciemnym profil.css (i dark.css dla każdego <a>) barwi w zieleni portalu */
body.dr-marka #main-content .dm-prose a { color: var(--pf-brand-dark); }
html[data-theme="dark"] body.dr-marka #main-content .dm-bread a,
html[data-theme="dark"] body.dr-marka #main-content .dm-row > a,
html[data-theme="dark"] body.dr-marka #main-content .dm-reveal,
html[data-theme="dark"] body.dr-marka #main-content .dm-menu-kat,
html[data-theme="dark"] body.dr-marka #main-content .dm-prod-c,
html[data-theme="dark"] body.dr-marka #main-content .dm-prose a { color: var(--mk-akd); }

/* Chipy neutralne: obwódka i ikona w barwie firmy (zielone/żółte/czerwone chipy stanu zostają) */
body.dr-marka #main-content .dm-chip:not(.ok):not(.warn):not(.zamk) { border-color: var(--mk-chip); }
html[data-theme="dark"] body.dr-marka #main-content .dm-chip:not(.ok):not(.warn):not(.zamk) { border-color: var(--mk-chipd); }
body.dr-marka #main-content .dm-chip:not(.ok):not(.warn):not(.zamk) > i { color: var(--pf-brand-dark); }

/* „Zapisane” — akcent na tle karty zamiast zielonego tła portalu */
body.dr-marka #main-content .dm-ghost.on { background: var(--pf-surface); border-color: var(--pf-brand); color: var(--pf-brand-dark); }

/* Przyciski główne: tło w kolorze firmy, napis dobrany pod kontrast (≥ 4,5:1). Wygrywa ze stylem inline
   i z regułą trybu ciemnego w szablonie (html[data-theme=dark] .firma-cta-soft … !important). */
body.dr-marka #main-content .dm-cta-1,
body.dr-marka #main-content .firma-cta-btn,
body.dr-marka #main-content .firma-cta-btn:hover { background: var(--mk-btn) !important; color: var(--mk-btn-tx) !important; border-color: transparent !important; box-shadow: none !important; }
body.dr-marka #main-content .dm-cta-1 i,
body.dr-marka #main-content .firma-cta-btn i { color: inherit !important; }
body.dr-marka #main-content .dm-cta-1:hover,
body.dr-marka #main-content .firma-cta-btn:hover { filter: brightness(1.07) !important; }
body.dr-marka #main-content .dm-cta-1:focus-visible,
body.dr-marka #main-content .firma-cta-btn:focus-visible { outline: 3px solid var(--mk-btn); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.dr-marka > nav:not(#mbn) .nav-btn, body.dr-marka #main-content .firma-cta-btn { transition: none; }
}
@media print {
  body.dr-marka #main-content .dm-hero::before { display: none; }
}