/* =========================================================================
   MEDserwis.pl – nowy wygląd: zmienne, reset, elementy bazowe
   Arkusze nowych stron nie używają Bootstrapa ani assets/css/style.css.
   Wszystkie klasy mają prefiks .ms- , zmienne w :root.
   ========================================================================= */
:root {
    --ms-red: #d0000b;
    --ms-red-dark: #b30016;
    --ms-wine: #69020a;
    --ms-wine-dark: #770912;
    --ms-navy: #001d35;
    --ms-navy-2: #12355e;
    --ms-rose: #f8ecea;
    --ms-ink: #16181d;
    --ms-text: #2b2f36;
    --ms-muted: #6b7280;
    --ms-line: #e6e7ea;
    --ms-bg: #ffffff;
    --ms-panel: #f6f6f7;
    --ms-radius: 4px;
    --ms-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --ms-shadow-hover: 0 6px 18px rgba(16, 24, 40, 0.12);
    --ms-wrap: 1200px; /* szerokość samej treści, bez bocznych odstępów */
    /* Jeden boczny odstęp dla topbaru, nagłówka, menu, treści i stopki */
    --ms-gutter: 64px;
    --ms-font: 'Fira Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------- Reset w obrębie strony głównej ---------- */
html {
    scroll-behavior: smooth;
}

body.ms-body {
    margin: 0;
    background: var(--ms-bg);
    color: var(--ms-text);
    font: 400 15px/1.5 var(--ms-font);
    -webkit-font-smoothing: antialiased;
}

/* :where() = zerowa specyficzność, więc komponenty zawsze wygrywają z resetem */
:where(.ms-page) *,
:where(.ms-page) *::before,
:where(.ms-page) *::after {
    box-sizing: border-box;
}

:where(.ms-page) img {
    display: block;
    max-width: 100%;
}

:where(.ms-page) a {
    color: inherit;
    text-decoration: none;
}

:where(.ms-page) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.ms-page) :is(h1, h2, h3, p) {
    margin: 0;
}

:where(.ms-page) :is(button, input, select) {
    font: inherit;
    color: inherit;
}

.ms-page :focus-visible {
    outline: 2px solid var(--ms-red);
    outline-offset: 2px;
}

.ms-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

.ms-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ms-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--ms-navy);
    color: #fff !important;
    padding: 10px 16px;
    border-radius: var(--ms-radius);
}

.ms-skip:focus {
    top: 8px;
}

.ms-wrap {
    max-width: calc(var(--ms-wrap) + 2 * var(--ms-gutter));
    margin: 0 auto;
    padding-left: var(--ms-gutter);
    padding-right: var(--ms-gutter);
}

/* Wariant na całą szerokość ekranu (np. nagłówek) – ten sam boczny odstęp */
.ms-wrap--full {
    max-width: none;
}

/* Wariant szeroki: do 1920px razem z bocznymi odstępami (sekcje treści, stopka) */
.ms-wrap--wide {
    max-width: 1920px;
}

@media (max-width: 1024px) {
    :root {
        --ms-gutter: 32px;
    }
}

@media (max-width: 600px) {
    :root {
        --ms-gutter: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .ms-page * {
        transition: none !important;
    }
}