/* =========================================================
   Chirurgia Barku - lek. Bartosz Radojewski
   Motyw JASNY z wstawkami w czerni i granacie.
   (uzupełnienie + nadpisania warstwy Windi CSS)
   ========================================================= */

:root {
    --czern:        #0b1220;   /* wstawki „czarne” */
    --czern-2:      #060b16;
    --granat:       #12234f;   /* wstawki „granatowe” */
    --granat-2:     #1e3a8a;
    --granat-btn:   #1e40af;   /* przyciski */
    --granat-btn-h: #1e3a8a;

    --tlo:          #eef2f6;    /* jasne tło strony */
    --tlo-2:        #f1f5f9;
    --karta:        #ffffff;    /* jasne karty */
    --tekst:        #0f172a;    /* ciemny tekst */
    --tekst-mut:    #64748b;    /* tekst przygaszony */
    --tekst-mut-2:  #475569;
    --linia:        rgba(15, 23, 42, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--tlo);
    color: var(--tekst);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-\[Poppins\] {
    font-family: 'Poppins', system-ui, sans-serif;
}

/* --- Nagłówek: jasny pasek --- */
#site-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
#site-header.scrolled {
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.10);
}

/* --- Menu mobilne (ciemna, granatowa wstawka wysuwana z boku) --- */
#mobile-menu {
    transform: translateX(-100%);
    transition: transform .3s ease;
}
#mobile-overlay.open { opacity: 1; visibility: visible; }
#mobile-menu.open { transform: translateX(0); }
.z-60 { z-index: 60; }

.mobile-link {
    display: block;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #e2e8f0;
    transition: background-color .2s, color .2s;
}
.mobile-link:hover,
.mobile-link:active {
    background-color: rgba(96, 165, 250, 0.18);
    color: #fff;
}
.mobile-sublink {
    font-size: 1rem;
    font-weight: 500;
    color: #94a3b8;
    padding-left: 2rem;
}
body.menu-open { overflow: hidden; }

/* =========================================================
   WSTAWKI CIEMNE (czerń / granat)
   ========================================================= */
.bg-hero {
    background:
        radial-gradient(1100px 480px at 82% -10%, rgba(30, 58, 138, 0.55), transparent 60%),
        radial-gradient(820px 560px at 0% 15%, rgba(18, 35, 79, 0.65), transparent 55%),
        linear-gradient(160deg, #12234f 0%, #0b1220 55%, #060b16 100%);
    color: #f8fafc;
}

/* =========================================================
   SEKCJE JASNE
   ========================================================= */
.bg-panel {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

/* Jasna karta */
.glass-card {
    background: var(--karta);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 58, 138, 0.45);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

/* Ikona w kółku - granatowa/czarna wstawka */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #0b1220 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(18, 35, 79, 0.25);
}

/* Animacja pojawiania */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Tekst z gradientem (na ciemnym hero - jasny) */
.text-gradient {
    background: linear-gradient(120deg, #93c5fd 0%, #60a5fa 55%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Lista z „ptaszkami” (na jasnym) */
.check-list li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: 0.85rem;
    color: var(--tekst-mut-2);
    line-height: 1.6;
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/0.8rem no-repeat,
        linear-gradient(135deg, #1e3a8a, #12234f);
    border: 1px solid rgba(18, 35, 79, 0.35);
}

/* Osadzenie mapy/widgetu */
.embed-responsive {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.embed-responsive iframe { display: block; width: 100%; border: 0; }

img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* --- Rozmiary logo ustawione wprost (zapobiega „migotaniu” do czasu
       aż Windi CSS wygeneruje klasy h-12 / w-auto przy ładowaniu) --- */
img[src*="grafika/logo"] { max-height: 5rem; width: auto; }
#site-header a img { height: 3rem;   width: auto; }
#mobile-menu img {
    height: 2.5rem;
    width: auto;
    background: #ffffff;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    box-sizing: content-box;
}
.site-footer img {
    height: 3rem;
    width: auto;
    background: #ffffff;
    padding: 0.4rem 0.55rem;
    border-radius: 0.6rem;
    box-sizing: content-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* =========================================================
   WARSTWA NADPISAŃ WINDI (motyw jasny)
   Zakres: tylko <main>. Nagłówek, stopka i menu - pomijane.
   Wewnątrz .bg-hero przywracamy jasny tekst (ciemna wstawka).
   ========================================================= */

/* Tekst - jasne sekcje */
main .text-white   { color: var(--tekst) !important; }
main .text-slate-200 { color: var(--tekst) !important; }
main .text-slate-300 { color: var(--tekst-mut-2) !important; }
main .text-slate-400 { color: var(--tekst-mut) !important; }

/* Tekst - ciemna wstawka hero (przywrócenie jasnego) */
main .bg-hero .text-white   { color: #ffffff !important; }
main .bg-hero .text-slate-300 { color: #cbd5e1 !important; }
main .bg-hero .text-slate-400 { color: #94a3b8 !important; }

/* Karty są zawsze jasne - ciemny tekst także wewnątrz hero */
main .glass-card .text-white   { color: var(--tekst) !important; }
main .glass-card .text-slate-300 { color: var(--tekst-mut-2) !important; }
main .glass-card .text-slate-400 { color: var(--tekst-mut) !important; }

/* Tła / obwódki „white/xx” - jasne sekcje */
main .bg-white\/5   { background-color: rgba(15, 23, 42, 0.03) !important; }
main .bg-white\/\[0\.02\] { background-color: rgba(15, 23, 42, 0.02) !important; }
main .border-white\/5  { border-color: rgba(15, 23, 42, 0.07) !important; }
main .border-white\/10 { border-color: rgba(15, 23, 42, 0.10) !important; }
main .border-white\/15 { border-color: rgba(15, 23, 42, 0.12) !important; }
main .hover\:bg-white\/5:hover  { background-color: rgba(15, 23, 42, 0.05) !important; }
main .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.05) !important; }

/* Tła / obwódki „white/xx” - przywrócenie wewnątrz hero */
main .bg-hero .bg-white\/5   { background-color: rgba(255, 255, 255, 0.07) !important; }
main .bg-hero.border-white\/10,
main .bg-hero .border-white\/10 { border-color: rgba(255, 255, 255, 0.12) !important; }
main .bg-hero .border-white\/15 { border-color: rgba(255, 255, 255, 0.18) !important; }
main .bg-hero .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.12) !important; }

/* Akcenty „sky” -> granat (jasne sekcje i karty) */
main .text-sky-400, main .text-sky-300 { color: var(--granat-btn) !important; }
main .glass-card .text-sky-400, main .glass-card .text-sky-300 { color: var(--granat-btn) !important; }
main .text-sky-500\/30 { color: rgba(30, 64, 175, 0.22) !important; }
main .bg-sky-500\/10, main .bg-sky-500\/15 { background-color: rgba(30, 64, 175, 0.10) !important; }
main .border-sky-500\/30 { border-color: rgba(30, 64, 175, 0.35) !important; }
main .glass-card .bg-sky-500\/15 { background-color: rgba(30, 64, 175, 0.10) !important; }
main .glass-card .border-sky-500\/30 { border-color: rgba(30, 64, 175, 0.30) !important; }

/* Akcenty „sky” - przywrócenie jaśniejszego na ciemnym hero */
main .bg-hero .text-sky-400, main .bg-hero .text-sky-300 { color: #93c5fd !important; }
main .bg-hero .bg-sky-500\/10, main .bg-hero .bg-sky-500\/15 { background-color: rgba(147, 197, 253, 0.14) !important; }
main .bg-hero .border-sky-500\/30 { border-color: rgba(147, 197, 253, 0.35) !important; }

/* Przyciski akcji - granatowe (globalnie: hero, karty, stopka) */
.bg-sky-500 { background-color: var(--granat-btn) !important; }
.hover\:bg-sky-400:hover { background-color: var(--granat-btn-h) !important; }
.shadow-sky-500\/25, .shadow-sky-500\/20 {
    box-shadow: 0 10px 26px rgba(30, 64, 175, 0.30) !important;
}

/* Granatowe przyciski zawsze z białą czcionką (nadrzędne nad motywem jasnym) */
main .glass-card .bg-sky-500.text-white,
main .bg-hero .bg-sky-500.text-white,
main .bg-sky-500.text-white,
.bg-sky-500.text-white,
.bg-sky-500 { color: #ffffff !important; }

/* =========================================================
   STOPKA (ciemna wstawka) - jawne kolory, niezależne od Windi
   ========================================================= */
.site-footer { color: #cbd5e1; }
.site-footer h3,
.site-footer .text-white { color: #ffffff !important; }
.site-footer .text-slate-400 { color: #94a3b8 !important; }
.site-footer .text-slate-500 { color: #8593a8 !important; }
.site-footer .text-sky-400 { color: #60a5fa !important; }
.site-footer a { color: #94a3b8 !important; }
.site-footer a:hover { color: #93c5fd !important; }
.site-footer .border-white\/10 { border-color: rgba(255, 255, 255, 0.10) !important; }