/*
 * Omoda — design tokeny.
 * Kolory/typografia przycisków zmierzone z pierwszej realnej sekcji (Hero Slider,
 * Figma node 65:191). Reszta (tło sekcji jasnych, akcent marki) uzupełniamy,
 * gdy pojawi się w kolejnych sekcjach.
 */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/open-sans-latin-ext.woff2") format("woff2-variations"), url("../fonts/open-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+2113;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/open-sans-latin.woff2") format("woff2-variations"), url("../fonts/open-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

:root {
    /* Kolory */
    --omoda-color-bg: #ffffff;
    --omoda-color-text: #121212;
    --omoda-color-text-muted: #5c5c5c;
    --omoda-color-text-inverse: #ffffff;
    --omoda-color-dark: #121212;
    --omoda-color-border: #e5e5e5;
    --omoda-color-link: #2563eb;
    --omoda-color-link-hover: #1d4ed8;

    /* Przyciski — para użyta w Hero Slider, docelowo ta sama wszędzie na ciemnym tle */
    --omoda-btn-primary-bg: #ffffff;
    --omoda-btn-primary-text: #121212;
    --omoda-btn-primary-border: #ffffff;
    --omoda-btn-primary-bg-hover: #e6e6e6;

    --omoda-btn-outline-bg: rgba(255, 255, 255, 0);
    --omoda-btn-outline-text: #ffffff;
    --omoda-btn-outline-border: rgba(255, 255, 255, 0.3);
    --omoda-btn-outline-bg-hover: rgba(255, 255, 255, 0.12);
    --omoda-btn-outline-border-hover: #ffffff;

    /* Spacing scale */
    --omoda-space-xs: 8px;
    --omoda-space-sm: 16px;
    --omoda-space-md: 24px;
    --omoda-space-lg: 40px;
    --omoda-space-xl: 64px;
    --omoda-space-2xl: 96px;

    /* Typografia — Open Sans (Figma: Regular/Semibold/Bold) */
    --omoda-font-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --omoda-font-size-body: clamp(15px, 1vw + 12px, 17px);
    --omoda-font-size-h1: clamp(28px, 2.2vw + 18px, 42px);
    --omoda-font-size-h2: clamp(24px, 1.8vw + 16px, 36px);
    --omoda-font-size-h3: clamp(18px, 1vw + 14px, 24px);
    --omoda-line-height-body: 1.6;
    --omoda-line-height-heading: 1.15;

    /* Layout */
    --omoda-container-width: 1280px;
    --omoda-container-padding: 20px;

    /* Wysokość fixed headera — inne sekcje (np. hero slider na mobile) offsetują
       się o tę wartość, żeby header (position:fixed) nie zasłaniał ich treści. */
    --omoda-header-height: 80px;
    --omoda-header-height-mobile: 64px;

    /* Breakpointy (referencyjne — w media queries wpisujemy liczbę wprost) */
    --omoda-bp-mobile: 767px;
    --omoda-bp-tablet: 1024px;

    /* Animacje — jedna krzywa "ease" w całym systemie, dla spójnego, smooth odczucia */
    --omoda-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --omoda-duration-fast: 180ms;
    --omoda-duration-base: 320ms;
    --omoda-duration-slow: 900ms;
    --omoda-transition-fast: var(--omoda-duration-fast) var(--omoda-ease);
    --omoda-transition-base: var(--omoda-duration-base) var(--omoda-ease);
    --omoda-transition-slow: var(--omoda-duration-slow) var(--omoda-ease);

    /* Zoom całej strony (patrz niżej, laptopy ze skalowaniem Windowsa). Wysokości w vh kurczą się razem z zoomem,
       więc te, które mają zostać "90vh ekranu", dzielimy przez tę zmienną. */
    --omoda-zoom: 1;
}

/* Windows ze skalowaniem 125–175% (typowo laptopy): okno ma wtedy tylko ~1100–1536 px CSS i ~600 px wysokości, więc
   cała strona wygląda na zbyt dużą. Lekko ją pomniejszamy. Warunek na gęstość pikseli 1,2–1,9 wyklucza ekrany Retina
   (2,0), a szerokość 1025–1700 px — zwykłe monitory i telefony/tablety (te mają własne reguły @media). Przeglądarki bez
   obsługi zoom (starszy Firefox) po prostu pomijają regułę. */
@media (min-width: 1025px) and (max-width: 1700px) and (min-resolution: 1.2dppx) and (max-resolution: 1.4dppx) {
    :root { --omoda-zoom: 0.92; }
    html { zoom: 0.92; }
}

@media (min-width: 1025px) and (max-width: 1700px) and (min-resolution: 1.4dppx) and (max-resolution: 1.9dppx) {
    :root { --omoda-zoom: 0.85; }
    html { zoom: 0.85; }
}

body {
    font-family: var(--omoda-font-base);
    color: var(--omoda-color-text);
}

/*
 * Domyślny kolor linków w całej witrynie — nadpisuje różowy `a{color:#c36}`
 * z reset.css motywu Hello Elementor. Specyficzność `body a` (0-0-2) bije
 * gołe `a` (0-0-1) NIEZALEŻNIE od kolejności ładowania arkuszy (theme vs
 * plugin), więc nie trzeba !important. Każda sekcja z własnym stylem linków
 * (.omoda-btn, .omoda-footer__link, .omoda-legal-index__item a...) i tak ma
 * wyższą specyficzność (klasa) i wygrywa jak dotychczas — to tylko domyślny
 * kolor dla "gołych" linków w treści (np. wewnątrz stron prawnych).
 */
body a {
    color: var(--omoda-color-link);
}

body a:hover,
body a:focus-visible {
    color: var(--omoda-color-link-hover);
}

/* Kontener sekcji — 1280px domyślnie; sekcje full-width pomijają tę klasę. */
.omoda-container {
    max-width: var(--omoda-container-width);
    margin-inline: auto;
    padding-inline: var(--omoda-container-padding);
}

/* Wspólne przyciski — te same klasy w każdej sekcji, jeden punkt prawdy dla hoverów. */
.omoda-btn {
    /* !important — KRYTYCZNE dla <button> (np. .omoda-models__dropdown-toggle;
       wszystkie inne .omoda-btn w projekcie to <a>, więc to ich nigdy nie
       dotyczyło). Zmierzone wprost (getComputedStyle) po zgłoszeniu "strzałka
       się nie wyrównuje": display faktycznie wychodził "block", nie
       "inline-flex". Przyczyna: hello-elementor/reset.css ma regułę
       `[type="button"], [type="submit"], button { display: inline-block; ... }`
       — <button type="button"> (nasz markup, wymagane żeby nie submitował
       formularza) dopasowuje się do gałęzi `[type="button"]`, a SELEKTOR
       ATRYBUTU ma TAKĄ SAMĄ wagę jak klasa (specyficzność 0-1-0) — remis z
       `.omoda-btn` (też 0-1-0). Przy remisie wygrywa kolejność w <head>, a
       reset.css motywu ładuje się PO omoda-core.css/models-section.css —
       więc motyw wygrywał mimo pozornie "niższej" specyficzności (typowe
       mylne założenie: `[atrybut]` to NIE to samo co goły selektor typu). */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--omoda-space-xs);
    padding: 14px 28px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--omoda-font-base);
    font-size: 16px;
    /* !important — ten sam mechanizm co display wyżej: reset.css motywu ma
       `[type="button"], [type="submit"], button { font-weight: 400; }`,
       remis specyficzności z `.omoda-btn`, wygrany przez motyw (ładuje się
       później) — user: "font-weight jest inny jak mam select a jak mam
       zwykły przycisk" (button = .omoda-models__dropdown-toggle, dostawał
       400 z motywu; <a>, nigdy niedopasowane do [type=button], poprawnie
       miały 600 z tej reguły). */
    font-weight: 600 !important;
    line-height: 1;
    /* Motyw/Elementor narzucają podkreślenie linków w treści (.entry-content a) z wyższą specyficznością */
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-base), color var(--omoda-transition-base), border-color var(--omoda-transition-base), transform var(--omoda-transition-fast);
}

.omoda-btn:hover,
.omoda-btn:focus-visible {
    transform: translateY(-1px);
}

.omoda-btn--primary {
    background-color: var(--omoda-btn-primary-bg);
    color: var(--omoda-btn-primary-text);
    border-color: var(--omoda-btn-primary-border);
}

.omoda-btn--primary:hover,
.omoda-btn--primary:focus-visible {
    background-color: var(--omoda-btn-primary-bg-hover);
    border-color: var(--omoda-btn-primary-bg-hover);
    color: var(--omoda-btn-primary-text);
}

/* Motyw (hello-elementor/reset.css) ma DWIE reguły, które biją się o kolor tła
   <button> na focus/hover: `button:focus,button:hover{background:#c36}` (goły
   typ+pseudoklasa, 0-1-1 — z TĄ nasz .omoda-btn--primary:focus, 0-2-0, wygrywa
   bez problemu) ORAZ `[type="button"]:focus,[type="button"]:hover{background:
   #c36}` — a nasz markup ma `type="button"` (wymagane, żeby przycisk nie
   submitował formularza), więc dopasowuje się WŁAŚNIE do tej drugiej gałęzi.
   Selektor atrybutu waży tyle co klasa, więc `[type="button"]:focus` to TEŻ
   0-2-0 — remis z .omoda-btn--primary:focus, a reset.css ładuje się PO
   omoda-core.css, więc przy remisie wygrywał motyw (różowe tło wracało mimo
   pozornie "silniejszej" reguły tutaj — zmierzone wprost po zgłoszeniu, że
   fix nie działa). !important przecina remis raz na zawsze. */
.omoda-btn--primary:focus {
    background-color: var(--omoda-btn-primary-bg) !important;
    border-color: var(--omoda-btn-primary-border) !important;
    color: var(--omoda-btn-primary-text) !important;
}

.omoda-btn--outline {
    background-color: var(--omoda-btn-outline-bg);
    color: var(--omoda-btn-outline-text);
    border-color: var(--omoda-btn-outline-border);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.omoda-btn--outline:hover,
.omoda-btn--outline:focus-visible {
    background-color: var(--omoda-btn-outline-bg-hover);
    border-color: var(--omoda-btn-outline-border-hover);
    color: var(--omoda-btn-outline-text);
}

.omoda-btn--outline:focus {
    background-color: var(--omoda-btn-outline-bg) !important;
    border-color: var(--omoda-btn-outline-border) !important;
    color: var(--omoda-btn-outline-text) !important;
}

/* <button class="omoda-btn ..."> (np. dropdown "Pobierz cennik"): motyw (hello-
   elementor/reset.css) ma `[type="button"] { color:#c36; border:1px solid #c36 }`
   oraz `:hover/:focus { background:#c36; color:#fff }` — selektor atrybutu ma TĘ
   SAMĄ wagę (0-1-0) co .omoda-btn--outline/--primary, a motyw ładuje się PÓŹNIEJ,
   więc przycisk był różowy (zmierzone: rgb(204,51,102)). Dodanie typu elementu
   (0-1-1 / 0-2-1) bije motyw niezależnie od kolejności ładowania; wartości
   identyczne jak dla <a>. */
button.omoda-btn--outline {
    background-color: var(--omoda-btn-outline-bg);
    color: var(--omoda-btn-outline-text);
    border-color: var(--omoda-btn-outline-border);
}

button.omoda-btn--outline:hover,
button.omoda-btn--outline:focus-visible {
    background-color: var(--omoda-btn-outline-bg-hover);
    border-color: var(--omoda-btn-outline-border-hover);
    color: var(--omoda-btn-outline-text);
}

button.omoda-btn--primary {
    background-color: var(--omoda-btn-primary-bg);
    color: var(--omoda-btn-primary-text);
    border-color: var(--omoda-btn-primary-border);
}

button.omoda-btn--primary:hover,
button.omoda-btn--primary:focus,
button.omoda-btn--primary:focus-visible {
    background-color: var(--omoda-btn-primary-bg-hover);
    border-color: var(--omoda-btn-primary-bg-hover);
    color: var(--omoda-btn-primary-text);
}

/* Scroll-reveal — sekcje oznaczają elementy atrybutem data-omoda-reveal. */
[data-omoda-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--omoda-transition-base), transform var(--omoda-transition-base);
}

[data-omoda-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

body.omoda-no-animations [data-omoda-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}


/* ---------- Nota prawna: link (10px, wielkie litery) + wspólny modal ---------- */

/* Reset <button> (motyw hello-elementor stylizuje button na różowo — remis
   specyficzności, patrz komentarz przy .omoda-btn) + wygląd linku noty prawnej. */
.omoda-legal-link {
    /* !important: reset.css motywu ustawia na <button> display:inline-block (remis wagi) */
    display: block !important;
    width: fit-content;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    font-family: var(--omoda-font-base);
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    cursor: pointer;
}

.omoda-legal-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 18, 18, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--omoda-transition-base, 300ms ease), visibility 0s linear var(--omoda-duration-base, 300ms);
}

.omoda-legal-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--omoda-transition-base, 300ms ease), visibility 0s;
}

.omoda-legal-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 24px 80px rgba(17, 12, 46, 0.3);
    transform: translateY(12px);
    transition: transform var(--omoda-transition-base, 300ms ease);
}

.omoda-legal-modal.is-open .omoda-legal-modal__dialog {
    transform: translateY(0);
}

.omoda-legal-modal__title {
    margin: 0 40px 4px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #121212;
}

.omoda-legal-modal__subtitle {
    margin: 0 0 16px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #959595;
}

.omoda-legal-modal__body p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #5c5c5c;
}

.omoda-legal-modal__body p:last-child {
    margin-bottom: 0;
}

.omoda-legal-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #121212 !important;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
}

.omoda-legal-modal__close:hover,
.omoda-legal-modal__close:focus-visible {
    background: rgba(18, 18, 18, 0.06) !important;
}

body.omoda-legal-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .omoda-legal-modal__dialog {
        padding: 24px 20px;
    }
}