/*
 * Arkusz witryny publicznej taklab.eu - TYLKO to, co witryna ma wlasne.
 *
 * Sam motyw marki (piatka kolorow, krój Rajdhani, smugi w tle, wersaliki w
 * naglowkach, pasek akcentu przy naglowku i kafelku, przyciski, alerty)
 * mieszka od 2026-09-18 w `assets/styles/brand.css`, wspolnym z panelem
 * operatora - zobacz jego docblock po zrodla motywu w aplikacji taklab-hub
 * i po powod wydzielenia. Tutaj zostaje pasek nawigacji z przelacznikiem
 * jezyka, stopka, kafle odsylajace do sklepu i do silnikow, zrzuty z
 * telefonu oraz baner zgody na ciasteczka - rzeczy, ktorych panel nie ma.
 *
 * `templates/site/base.html.twig` wczytuje oba arkusze, `brand.css` PIERWSZY:
 * reguly ponizej licza na to, ze moga tamte nadpisac (np. `.hero h1`
 * dokladajace rozmiar do naglowka, ktoremu `brand.css` ustawil juz krój i
 * rozstrzelenie).
 */


.site-nav {
    border-bottom: 1px solid var(--border);
    background: rgba(4, 7, 12, 0.92);
}

/* Logo: znak + napis + opcjonalny dopisek. Uklad, krój i rozmiar znaku (36 px)
   niesie `.brand-lockup` z brand.css. site.css laduje sie PO brand.css, wiec
   nie wolno tu ustawiac `display`, `gap`, kroju ani rozmiaru znaku -
   nadpisalyby lockup (ta sama specyficznosc, pozniejszy plik wygrywa). */
.site-brand {
    flex: 0 1 auto;
    min-width: 0;
}

.site-brand:hover, .site-brand:focus {
    color: var(--text);
}

.site-nav .nav-link {
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
}

.site-nav .nav-link:hover, .site-nav .nav-link:focus {
    color: var(--accent);
}

/*
 * Jedna wyrozniona pozycja menu: ramka, tlo i pulsujaca poswiata w kolorze
 * akcentu. Pulsuje `box-shadow`, nie `width` ani `padding` - cien nie
 * zajmuje miejsca w ukladzie, wiec sasiednie pozycje menu nie drgaja w
 * rytm animacji.
 *
 * Tlo i ramka zostaja rowniez wtedy, gdy pulsowanie stoi (ograniczenie
 * animacji nizej) - wyroznienie ma dzialac takze bez ruchu.
 */
.site-nav .nav-link--featured {
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    background: rgba(41, 255, 240, 0.12);
    animation: nav-featured-pulse 2.2s ease-in-out infinite;
}

.site-nav .nav-link--featured:hover, .site-nav .nav-link--featured:focus {
    background: rgba(41, 255, 240, 0.24);
    color: var(--text);
}

@keyframes nav-featured-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(41, 255, 240, 0.5);
        background: rgba(41, 255, 240, 0.1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(41, 255, 240, 0);
        background: rgba(41, 255, 240, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav .nav-link--featured {
        animation: none;
    }
}

/*
 * Biezaca strona w menu: ta sama pigulka co pozycja wyrozniona, tylko w
 * kolorze alertu i BEZ pulsowania. Pulsowanie jest zaproszeniem gdzie
 * indziej; strona, na ktorej czlowiek juz stoi, nie ma go dokad zapraszac.
 *
 * Czerwien na tle paska daje kontrast 5,4:1 (zmierzone), wiec przechodzi
 * prog WCAG AA dla zwyklego tekstu.
 *
 * Regula stoi PO regule pozycji wyroznionej i ma te sama moc, wiec na
 * stronie aplikacji wygrywa kolejnoscia - tam pigulka jest czerwona.
 */
.site-nav .nav-link--current,
.site-nav .btn-current {
    /* Wersaliki z rozstrzeleniem jak w sasiednich przyciskach paska
       (.btn-outline-info nizej) - pozycja „Moje konto" ma zmieniac barwe,
       a nie krój. */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--alert);
    border: 1px solid var(--alert);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    background: rgba(255, 43, 61, 0.14);
    animation: none;
}

.site-nav .nav-link--current:hover, .site-nav .nav-link--current:focus,
.site-nav .btn-current:hover, .site-nav .btn-current:focus {
    color: var(--text);
    background: rgba(255, 43, 61, 0.26);
}

/*
 * Odsylacz do sklepu w naglowku strony glownej: znak, tytul i druga linia
 * drobniejszym pismem. Ciemne tlo z obwodka, a nie kolor akcentu - obok
 * stoi juz przycisk „Zaloz konto" w pelnym akcencie i dwa jednakowo mocne
 * przyciski walczylyby o wzrok.
 */
.btn-store {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    color: var(--text);
    background: rgba(4, 7, 12, 0.6);
    border: 1px solid var(--border);
}

.btn-store:hover, .btn-store:focus {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(41, 255, 240, 0.1);
}

.btn-store__mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.btn-store__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.btn-store__title {
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Druga linia niesie zastrzezenie („testy zamkniete"), wiec ma byc czytelna,
   a nie ledwie widoczna - stad kolor tekstu pomocniczego, nie samo
   przyciemnienie. */
.btn-store__note {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.site-footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    margin-top: 4rem;
}



.hero h1 {
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    letter-spacing: 0.02em;
}






/* --- Strona aplikacji taklab-hub --- */

.hero-app .app-icon {
    max-width: 10rem;
    height: auto;
    border-radius: 1.4rem;
    border: 1px solid var(--border);
}

.shot-card {
    display: flex;
    flex-direction: column;
}

/*
 * Zrzut z telefonu ma proporcje 1080:2408 - bez ograniczenia wysokosci
 * kafelek robilby sie slupem na cala strone. `object-fit: cover` z
 * `object-position: top` pokazuje gorna czesc ekranu, czyli tytul i
 * pierwsze pozycje, a dol przycina.
 */
.shot {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    object-position: top center;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

/* Baner zgody na ciasteczka. Przyklejony do dolu okna: ma byc widoczny bez
   przewijania, ale nie ma zaslaniac calej strony. */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #12161c;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Strefa klienta: menu po lewej, tresc po prawej.

   Siatka zamiast kolumn Bootstrapa, bo menu ma zostac przyklejone do gory
   przy dlugiej tresci, a kolumna Bootstrapa z 'position: sticky' wymaga
   dodatkowego opakowania. */
.account-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Karta w strefie klienta rosnie do wysokosci SWOJEJ tresci.

   Bez tej reguly kazda karta byla wysoka na cala kolumne. '.surface-card'
   (assets/styles/brand.css) ma 'height: 100%', bo na stronach z kafelkami
   wyrownuje ich wysokosc w rzedzie. '.account-main' jest elementem siatki
   '.account-shell' i domyslne 'align-items: stretch' rozciaga go na cala
   wysokosc wiersza - dla kazdej karty '100%' znaczylo wiec "cala kolumna",
   a nie "tyle, ile tresci".

   Zmierzone na /konto/ustawienia przed poprawka: cztery karty po 1728 px
   kazda, z ponad 1000 px pustego miejsca w srodku, strona 7160 px.

   Regula lapie WYLACZNIE dzieci bezposrednie. Kafelki na Przegladzie leza
   w kolumnach Bootstrapa i niosa wlasne 'h-100'
   (templates/site/account/overview.html.twig) - ich ta zmiana nie dotyka. */
.account-main > .surface-card {
    height: auto;
}

@media (min-width: 768px) {
    .account-shell {
        grid-template-columns: 13rem 1fr;
    }

    .account-nav__list {
        position: sticky;
        top: 1.5rem;
    }
}

.account-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-nav__link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    /* Bootstrap z CDN podkresla KAZDY odsylacz regula reboota
       'a { text-decoration: underline }'. Nasz arkusz wchodzi po nim, wiec
       gasimy to tutaj - ta sama poprawka, co przy nawigacji bocznej
       panelu operatora. */
    text-decoration: none;
}

.account-nav__link--current {
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

/* Uklad kartowy tabel na telefonie: powtorzenie selektora Bootstrapa z TA
   SAMA specyficznoscia i pozniejsza kolejnoscia. Bez tego regula
   '.table > :not(caption) > * > * { padding }' kasuje
   'padding-inline-start' i etykieta kolumny lezy NA wartosci. */
@media (max-width: 575.98px) {
    .account-main .table--cards > :not(caption) > * > * {
        padding-inline-start: 35%;
        position: relative;
    }

    .account-main .table--cards > :not(caption) > * > *::before {
        content: attr(data-label);
        position: absolute;
        inset-inline-start: 0.75rem;
        font-weight: 600;
    }

    .account-main .table--cards thead {
        display: none;
    }

    /* Wiersz pozycji cenowych nie jest komorka z etykieta: ma jedna komorke
       na cala szerokosc tabeli, wiec wciecie 35% zostawione pod etykiete
       zjadaloby mu trzecia czesc ekranu telefonu na nic. */
    .account-main .table--cards .price-line > * {
        padding-inline-start: 0.75rem;
    }
}

/*
 * Aktywnosc konta na ekranie ustawien.
 *
 * NIEUDANA PROBA MA BYC WIDAC Z DRUGIEGO KONCA EKRANU. Czlowiek otwiera te
 * liste, bo podejrzewa, ze ktos obcy dobija sie do jego konta - lista, na
 * ktorej odrzucone logowanie wyglada tak samo jak udane, nie odpowiada na
 * pytanie, z ktorym on tu przyszedl. Stad trzy rzeczy naraz: tlo calego
 * wiersza, czerwien ostrzegawcza aplikacji na znaczniku wyniku i pasek z
 * lewej. Sam kolor by nie wystarczyl (nie kazdy go rozroznia), wiec w
 * znaczniku stoi TAKZE slowo - „błąd" albo „powodzenie".
 */
.activity-outcome {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--muted);
}

.activity-outcome--error {
    background: rgba(255, 43, 61, 0.18);
    border-color: var(--alert);
    color: #ffd2d6;
}

/*
 * Tlo idzie na KOMORKI, nie na wiersz: Bootstrap maluje tlo komorek regula
 * '.table > :not(caption) > * > *', wiec tlo zalozone na <tr> zostaloby nim
 * przykryte.
 */
.table-dark > tbody > tr.activity-row--error > * {
    background-color: rgba(255, 43, 61, 0.1);
}

.table-dark > tbody > tr.activity-row--error > *:first-child {
    box-shadow: inset 3px 0 0 0 var(--alert);
}

/*
 * Wynik, ktorego nie znamy, NIE MA WYGLADAC JAK POWODZENIE. Kontroler
 * celowo nie wpisuje mu ani jednego, ani drugiego stanu (patrz
 * SettingsController::describeEvents()), a ekran bez wlasnej reguly
 * zrownalby go z powodzeniem - czyli powiedzialby o zdarzeniu wiecej, niz
 * wiadomo. Obwodka przerywana i sam identyfikator w srodku mowia tyle, ile
 * jest: zapisano cos, czego nie umiemy nazwac.
 */
.activity-outcome--unknown {
    border-style: dashed;
    text-transform: none;
    letter-spacing: 0.04em;
}

/* Dane nabywcy (templates/site/_buyer_fields.html.twig): „Bez faktury”
   chowa pola adresu, pozostale wybory chowaja notke. Bez JavaScriptu. */
.buyer-fields:has(#buyer-none:checked) .buyer-address,
.buyer-fields:not(:has(#buyer-none:checked)) .buyer-none-note {
    display: none;
}

/* Serwer w budowie na liscie Serwery: pasek etapow z wyrozniona biezaca pozycja. */
/* Kafelek nie ma klasy odstepu Bootstrapa, wiec bez tego tekst wchodzil
   pod pasek z lewej (3 px, .surface-card::before). Z lewej 10 px od paska. */
.server-progress {
    padding: 0.75rem 1rem 0.75rem calc(3px + 10px);
}

.server-progress__step {
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 0.875rem;
    opacity: 0.7;
}

.server-progress__step--current {
    border-color: var(--accent);
    color: var(--accent);
    opacity: 1;
    font-weight: 600;
}

/* Pytania na ekranie „Pomoc”: harmonijka Bootstrapa zbudowana na
   <details>/<summary>, bez JavaScriptu. Kolory z palety marki zamiast
   jasnych domyslnych Bootstrapa. */
.help-faq {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--text);
    --bs-accordion-border-color: var(--border);
    --bs-accordion-btn-color: var(--text);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--accent);
    --bs-accordion-active-bg: rgba(41, 255, 240, 0.07);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(41, 255, 240, 0.25);
}

.help-faq summary.accordion-button {
    list-style: none;
    cursor: pointer;
}

.help-faq summary.accordion-button::-webkit-details-marker {
    display: none;
}

/* Strzalka Bootstrapa jest ciemna; na ciemnym tle odwracamy ja. */
.help-faq .accordion-button::after {
    filter: invert(1);
}

.help-faq details[open] > .accordion-button {
    color: var(--bs-accordion-active-color);
    background-color: var(--bs-accordion-active-bg);
}

.help-faq details[open] > .accordion-button::after {
    transform: var(--bs-accordion-btn-icon-transform);
}

/* Domena doklejona do nazwy srodowiska w formularzu zamowienia. Wyszarzona,
   bo nie jest polem: pokazuje tylko, jak bedzie wygladal caly adres. */
.subdomain-suffix {
    color: var(--muted);
    background: transparent;
    border-color: var(--border);
    user-select: none;
}