/* UWAGA! Popraw jutro nazwy zmiennych kolorów bo się zleja */


/* ====== Base Reset ====== */

html {
    box-sizing: border-box;
    font-family: var(--u-font-family-base);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}


/* Globalne potem do global.css */

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}


/* ========== Visually hidden utility ========== */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important; // fallback ≤ Safari 14
    clip-path: inset(50%) !important; // nowocześniej
    white-space: nowrap !important;
    border: 0 !important;
}


/* opcjonalnie – żeby element „ożywał” gdy dostanie fokusa */

.sr-only:focus,
.sr-only:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

.cc-text {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    overflow-wrap: break-word;
    vertical-align: middle;
}

.cc-lazy-icon--small {
    height: 16px;
    width: 16px;
}

.cc-lazy-icon--standard {
    height: 24px;
    width: 24px;
}

.cc-lazy-icon--large {
    height: 32px;
    width: 32px;
}

.cc-icon {}

.cc-button {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition-duration: var(--u-duration__micro-fast), var(--u-duration__micro-fast);
    transition-property: background-color, border-color;
    transition-timing-function: var(--u-easing__transition), var(--u-easing__transition);
}

.cc-button--primary {
    background-color: var(--u-button-bg-primary);
    color: var(--u-button-color-primary);
    border-style: solid;
    border-color: var(--u-button-bg-primary);
}

.cc-button--small {
    border-radius: var(--u-s-xs);
    border-width: 2px;
}

.cc-stack--grid-flow-column {
    grid-auto-flow: column;
    grid-template-columns: auto;
}

.cc-stack {
    flex-wrap: nowrap;
}

.cc-stack .cc-text {
    overflow-wrap: anywhere;
}


/*  */


/* ====== Variables ====== */

:root {
    --u-font-family-base: 'Atlas Grotesk Web', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --u-font-weight-regular: 400;
    --u-font-weight-medium: 500;
    --u-white: rgb(247, 245, 242);
    --u-black: rgb(30, 25, 25);
    --u-black-80: rgba(0, 0, 0, 0.8);
    --u-blue: rgb(0, 97, 254);
    --u-faint: rgba(82, 74, 62, .82);
    --u-text: var(--u-black);
    --u-text-light: var(--u-white);
    --u-button-bg-primary: var(--u-blue);
    --u-button-color-primary: var(--u-text-light);
    --u-primary: var(--u-white);
    --u-secondary: var(--u-black);
    --u-secondary-80: var(--u-black-80);
    --u-accent: var(--u-blue);
    --u-header-bg: var(--u-secondary-80);
    --u-header-height: 48px;
    --u-header-content-height: 40px;
    --u-header-mobile-dropdown-max-height: 100vh;
    --u-header-vertical-padding: 24px;
    --u-header-top: 0px;
    --u-header-z: 120;
    --u-s-xxxs: 4px;
    --u-s-xxs: 8px;
    --u-s-xs: 12px;
    --u-s-s: 16px;
    --u-s-m: 24px;
    --u-s-l: 32px;
    --u-s-xl: 48px;
    --u-lh-standard: 1.2;
    --u-lh-m: 20px;
    --u-font-xs: 12px;
    --u-text-s: 14px;
    --u-text-m: 16px;
    --u-text-l: 18px;
    --u-text-xl: 20px;
    --u-text-2xl: 24px;
    --u-duration__micro-fast: 125ms;
    --u-easing__transition: cubic-bezier(0.66, 0, 0, 1);
}

:root:has(.admin-bar) {
    --u-header-top: calc(0px + var(--wp-admin--admin-bar--height));
}

@media (min-width: 768px) {
     :root {
        --u-header-height: 92px;
    }
}


/* ====== Spacing ====== */

.u-m-0 {
    margin: 0 !important;
}

.u-mt-0 {
    margin-top: 0 !important;
}

.u-mb-0 {
    margin-bottom: 0 !important;
}

.u-mr-0 {
    margin-right: 0 !important;
}

.u-mt-m {
    margin-top: var(--u-s-m) !important;
}

.u-p-0 {
    padding: 0 !important;
}

.u-p-m {
    padding: var(--u-s-m) !important;
}

.u-pt-0 {
    padding-top: 0 !important;
}

.u-pl-xs {
    padding-left: var(--u-s-xs) !important;
}

.u-pr-xs {
    padding-right: var(--u-s-xs) !important;
}

.u-pr-m {
    padding-right: var(--u-s-m) !important;
}

.u-pb-0 {
    padding-bottom: 0 !important;
}

.u-py-m {
    padding-top: var(--u-s-m) !important;
    padding-bottom: var(--u-s-m) !important;
}

.u-py-s {
    padding-top: var(--u-s-s) !important;
    padding-bottom: var(--u-s-s) !important;
}

.u-px-m {
    padding-left: var(--u-s-m) !important;
    padding-right: var(--u-s-m) !important;
}

.u-px-xs {
    padding-left: var(--u-s-xs) !important;
    padding-right: var(--u-s-xs) !important;
}

.u-p-xxs {
    padding: var(--u-s-xxs) !important;
}


/* ====== Flex ====== */

.u-flex {
    display: flex !important;
}

.u-block {
    display: block !important;
}

.u-inline {
    display: inline !important;
}

.u-inline-block {
    display: inline-block !important;
}

.u-inline-grid {
    display: inline-grid !important;
}

.u-inline-flex {
    display: inline-flex !important;
}

.u-hidden {
    display: none !important;
}

.u-flex-col {
    flex-direction: column !important;
}

.u-flex-row {
    flex-direction: row !important;
}

.u-items-center {
    align-items: center !important;
}

.u-justify-between {
    justify-content: space-between !important;
}

.u-justify-center {
    justify-content: center !important;
}

.u-justify-flex-start {
    justify-content: flex-start !important;
}

.u-gap-m {
    gap: var(--u-s-m) !important;
}

.u-cgap-m {
    column-gap: var(--u-s-m) !important;
}


/* ====== Size & Display ====== */

.u-h-full {
    height: 100% !important;
}

.u-w-full {
    width: 100% !important;
}

.u-w-auto {
    width: auto !important;
}

.u-hidden {
    display: none !important;
}


/* ====== Position & Box ====== */

.u-relative {
    position: relative !important;
}

.u-overflow-hidden {
    overflow: hidden !important;
}

.u-no-tap {
    -webkit-tap-highlight-color: transparent;
}


/* ====== Colors ====== */

.u-bg-primary {
    background-color: var(--u-primary) !important;
}

.u-bg-accent {
    background-color: var(--u-accent) !important;
}

.u-bg-header {
    background-color: var(--u-header-bg) !important;
}

.u-bg-transparent {
    background-color: transparent !important;
}

.u-text-dark {
    color: var(--u-text) !important;
}

.u-text-light {
    color: var(--u-text-light) !important;
}

.u-text-faint {
    color: var(--u-faint);
}

.u-text-inherit {
    color: inherit !important;
}

.u-text-none {
    text-decoration: none !important;
}

.u-text-left {
    text-align: left !important;
}

.u-text-center {
    text-align: center !important;
}


/* ====== Transitions ====== */

.u-transition-header {
    transition: height 0.2s ease-in-out, padding 0.2s ease-in-out, margin 0.2s ease-in-out, background-color 0.12s ease-in-out 0.1s !important;
}

.u-nowrap {
    white-space: nowrap !important;
}

.u-lh-m {
    line-height: var(--u-lh-m) !important;
}

.u-lh-standard {
    line-height: var(--u-lh-standard) !important;
}

.u-fs-normal {
    font-style: normal !important;
}

.u-text-s {
    font-size: var(--u-text-s) !important;
}

.u-text-m {
    font-size: var(--u-text-m) !important;
}

.u-font-base {
    font-family: var(--u-font-family-base) !important;
}

.u-fw-regular {
    font-weight: var(--u-font-weight-regular) !important;
}

.u-fw-medium {
    font-weight: var(--u-font-weight-medium) !important;
}

@media (min-width: 1280px) {
    .desktop\:u-flex {
        display: flex !important;
    }
    .desktop\:u-hidden {
        display: none !important;
    }
    .dekstop\:u-pr-0 {
        padding-right: 0px !important;
    }
}

@media (min-width: 768px) {
    .tablet\:u-flex {
        display: flex !important;
    }
    .tablet\:u-p-m {
        padding: var(--u-s-m) !important;
    }
}

@media (min-width: 480px) {
    .mobile\:u-flex {
        display: flex !important;
    }
    .mobile\:u-py-s {
        padding-top: var(--u-s-s) !important;
        padding-bottom: var(--u-s-s) !important;
    }
    .mobile\:u-px-xs {
        padding-left: var(--u-s-xs) !important;
        padding-right: var(--u-s-xs) !important;
    }
}