/* ==========================================================================
   manawaFLOW — WARSTWA MARKI (app.manawaflow.pl)

   Ten plik zawiera dokładnie to, co musi być identyczne na wszystkich
   serwisach marki: tokeny kolorów i typografii, nawigację oraz stopkę.
   Nazwy klas i wymiary są przepisane z coaching.manawaflow.pl/css/style.css,
   więc menu i stopka na obu serwisach mają tę samą wysokość logo, ten sam
   rozmiar pozycji i te same dwa przyciski po prawej stronie.

   Treść specyficzna dla narzędziownika (hero, katalog, sekcje, animacje)
   siedzi w css/app.css — tam się rozwija stronę, tu się jej nie rusza.

   ZASADA MARKI: wszystkie krawędzie są ostre. --radius: 0, bez wyjątków.
   ========================================================================== */

/* --- 1. TOKENY MARKI --------------------------------------------------- */
:root {
    /* Główny akcent: artystyczny fiolet */
    --color-accent-1: #6A0DAD;
    /* Drugi akcent: kobalt */
    --color-accent-2: #0047AB;
    /* Złoty akcent */
    --color-gold:     #FDC500;
    /* Złoto przygaszone — czytelne jako tekst na bieli */
    --color-gold-ink: #B47E00;
    /* Tekst: głęboki granat */
    --color-dark:     #0F1219;
    /* Tło: złamana biel (chłodna) */
    --bg-light:       #f8faff;
    /* Tło przygaszone dla sekcji naprzemiennych */
    --bg-soft:        #F2F5FC;

    --ink-mut:        #5A6472;
    --ink-mut-2:      #7C8698;
    --line:           rgba(15, 18, 25, 0.10);
    --line-soft:      rgba(15, 18, 25, 0.06);

    --radius:         0;         /* ostre kąty w całym serwisie */
    --font-head:      'Poppins', sans-serif;
    --font-body:      'Lato', sans-serif;
    --layout-max:     1400px;
    --layout-gutter:  5%;

    /* Wysokość nawigacji — używana przez scroll-margin kotwic */
    --nav-h:          76px;   /* = wysokość .mf-nav; scroll-margin kotwic */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--color-dark);
    line-height: 1.6;
    background-color: var(--bg-light);
    overflow-x: hidden;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

/* Tło mesh — ta sama subtelna poświata co na coaching.manawaflow.pl */
body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(at 0% 0%, rgba(106, 13, 173, 0.05) 0px, transparent 60%),
        radial-gradient(at 100% 100%, rgba(0, 71, 171, 0.05) 0px, transparent 60%),
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.9) 0px, transparent 50%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -1px; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.5px; }
h3 { font-size: 1.25rem; }

p { color: var(--color-dark); margin-bottom: 1.5rem; font-weight: 400; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; display: block; border-radius: var(--radius); }
ul { list-style: none; }

.container {
    box-sizing: border-box;
    width: min(var(--layout-max), calc(100% - 2 * var(--layout-gutter)));
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 0;
}

/* Kotwice nie chowają się pod przyklejoną nawigacją */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Link „przejdź do treści” — widoczny tylko z klawiatury */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--color-dark); color: #fff;
    padding: 14px 22px; z-index: 2000;
    font-family: var(--font-head); font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 2px solid var(--color-accent-2);
    outline-offset: 3px;
}

/* Tekst w gradiencie marki */
.text-gradient {
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* --- 2. PASEK POSTĘPU CZYTANIA ---------------------------------------- */
.scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0;
    background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2) 60%, var(--color-gold));
    z-index: 1100;
    transition: width 0.1s linear;
}

/* --- 3. NAWIGACJA ------------------------------------------------------
   Nawigacja NIE jest już opisana w tym pliku. Mieszka w
   css/marka-naglowek.css (klasy mf-*), bo ten sam pasek obsługuje trzy
   strony: narzędziownik, /portal/ i /21przemiany/. Jedna definicja =
   menu nie może się na nich rozjechać.
   --------------------------------------------------------------------- */

/* --- 4. STOPKA --------------------------------------------------------
   Stopka NIE jest już opisana w tym pliku. Mieszka w css/marka-stopka.css
   (klasy footer-*), a jej HTML w includes/marka_stopka.php, bo tę samą
   stopkę rysują trzy strony: narzędziownik, /portal/ i /21przemiany/.
   Jedna definicja = stopka nie może się na nich rozjechać. Dokładnie ta
   sama zasada, co przy nawigacji wyżej.
   --------------------------------------------------------------------- */

/* --- 5. RESPONSYWNOŚĆ ---------------------------------------------------
   Menu: css/marka-naglowek.css. Stopka: css/marka-stopka.css.
   --------------------------------------------------------------------- */


/* --- 6. SZACUNEK DLA USTAWIEŃ DOSTĘPNOŚCI ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}