/* ==========================================================================
   udi-theme — site header: top bar, main row, nav + mega menus, drawer
   Values match Figma frames 1:2475–1:2794 (1440px desktop).
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 100;
    background: var(--c-white);
}

/* --------------------------------------------------------------------------
   Top bar (blog, o mnie)
   -------------------------------------------------------------------------- */
/* Bars are full-bleed backgrounds; their content sits on the 1440px grid. */
.site-header__topbar {
    background: var(--c-rose-050);
}

.site-header__topbar nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 28px;
    padding-block: 6px;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.site-header__topbar a {
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--c-heading);
}

.site-header__topbar-list {
    display: flex;
    gap: 40px;
}

.site-header__topbar a:hover,
.site-header__topbar a:focus-visible {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* --------------------------------------------------------------------------
   Main row: burger | logo | search | icon links
   -------------------------------------------------------------------------- */
.site-header__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: 38px var(--pad-x);
}

.site-header__logo {
    display: block;
    margin-right: auto;
    flex-shrink: 0;
}

.site-header__logo-img {
    display: block;
    width: 283px;
    height: auto;
}

.site-header__icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-header__iconlink {
    display: inline-flex;
    width: 30px;
    height: 30px;
    color: var(--c-ink);
    transition: opacity 0.15s ease;
}

.site-header__iconlink:hover,
.site-header__iconlink:focus-visible {
    opacity: 0.6;
}

.site-header__iconlink .udi-icon {
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Search pill (FiboSearch restyled to the Figma pill)
   -------------------------------------------------------------------------- */
.site-header__search {
    position: relative;
    width: 334px;
    max-width: 100%;
}

.site-header__search::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='%231C1B1F' d='M33 34.9721L22.1946 24.1667C21.3613 24.8703 20.3936 25.4213 19.2917 25.8196C18.1897 26.2176 17.0185 26.4167 15.7779 26.4167C12.7685 26.4167 10.2199 25.3726 8.13208 23.2846C6.04403 21.1968 5 18.6668 5 15.6946C5 12.7224 6.04403 10.1922 8.13208 8.10417C10.2199 6.01611 12.7592 4.97208 15.75 4.97208C18.7222 4.97208 21.2476 6.01611 23.3263 8.10417C25.4051 10.1922 26.4446 12.7224 26.4446 15.6946C26.4446 16.8982 26.2501 18.051 25.8612 19.1529C25.4724 20.2546 24.9075 21.2685 24.1667 22.1946L35 32.9721L33 34.9721ZM15.75 23.6387C17.9444 23.6387 19.8125 22.8633 21.3542 21.3125C22.8958 19.7617 23.6667 17.889 23.6667 15.6946C23.6667 13.5001 22.8958 11.6274 21.3542 10.0763C19.8125 8.52542 17.9444 7.75 15.75 7.75C13.5369 7.75 11.655 8.52542 10.1042 10.0763C8.55333 11.6274 7.77792 13.5001 7.77792 15.6946C7.77792 17.889 8.55333 19.7617 10.1042 21.3125C11.655 22.8633 13.5369 23.6387 15.75 23.6387Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
}

.site-header__search .dgwt-wcas-search-wrapp {
    max-width: none;
    width: 100%;
    padding: 0;
}

.site-header__search .dgwt-wcas-sf-wrapp {
    background: transparent;
}

.site-header__search input[type="search"].dgwt-wcas-search-input,
.site-header__search input[type="search"] {
    width: 100%;
    height: 41px !important;
    background: #f5f5f5 !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 0 16px 0 60px !important;
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-style: normal !important;
    color: var(--c-black) !important;
    box-shadow: none !important;
}

.site-header__search input[type="search"]::placeholder {
    color: var(--c-black) !important;
    opacity: 1 !important;
    font-style: normal !important;
}

.site-header__search input[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(176, 0, 173, 0.3) !important;
}

.site-header__search .dgwt-wcas-search-submit,
.site-header__search .dgwt-wcas-ico-magnifier {
    display: none !important;
}

.site-header__search .dgwt-wcas-preloader {
    right: 20px;
}

/* Fallback (non-FiboSearch) form */
.site-header__search form:not(.dgwt-wcas-search-form) {
    display: flex;
}

/* --------------------------------------------------------------------------
   Nav bar with mega panels
   -------------------------------------------------------------------------- */
.site-nav {
    position: relative;
    background: var(--c-white);
}

.site-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    height: 60px;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 28px);
    height: 100%;
    font-size: 15px;
    font-weight: 500;
}

.site-nav__item {
    display: flex;
    align-items: center;
    height: 100%;
}

.site-nav__link {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    color: var(--c-heading);
    text-transform: lowercase;
}

.site-nav__item--accent .site-nav__link {
    color: var(--c-primary);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item.is-open .site-nav__link,
.site-nav__item.is-current .site-nav__link {
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Mega panel: full-bleed background, columns on the 1440px grid */
.udi-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 90;
    background: var(--c-rose-050);
    border-bottom: 1px solid var(--c-rose-200);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.2s;
}

.udi-mega__inner {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: 40px var(--pad-x);
}

.site-nav__item.is-open .udi-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.udi-mega__col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.udi-mega__col a:hover,
.udi-mega__col a:focus-visible {
    text-decoration: underline;
    text-underline-position: from-font;
}

.udi-mega__heading a {
    font-weight: 700;
}

/* "Needs" panel: bordered cards in columns of 4 */
.udi-mega__col--needs {
    gap: 20px;
    min-width: 327px;
}

.udi-mega__card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 20px;
    border: 1px solid var(--c-gray);
    font-weight: 700;
    transition: border-color 0.15s ease;
}

.udi-mega__card:hover,
.udi-mega__card:focus-visible {
    border-color: var(--c-accent);
    text-decoration: none !important;
}

.udi-mega__card .udi-icon {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Burger (hidden on desktop)
   -------------------------------------------------------------------------- */
.udi-burger {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    z-index: 210;
}

.udi-burger span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--c-ink);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.udi-burger span:nth-child(1) {
    top: calc(50% - 8px);
}

.udi-burger span:nth-child(2) {
    top: calc(50% - 1px);
}

.udi-burger span:nth-child(3) {
    top: calc(50% + 6px);
}

.udi-burger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.udi-burger.is-active span:nth-child(2) {
    transform: translateX(-8px);
    opacity: 0;
}

.udi-burger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.udi-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    background: var(--c-white);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.32s;
}

.udi-drawer.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

.udi-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgb(0 0 0 / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

body.udi-drawer-open .udi-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
}

body.udi-drawer-open {
    overflow: hidden;
}

.udi-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 60px;
    padding: 0 8px 0 20px;
    border-bottom: 1px solid var(--c-gray);
}

.udi-drawer__logo {
    display: block;
}

.udi-drawer__logo-img {
    display: block;
    width: 170px;
    height: auto;
}

.udi-drawer__close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--c-ink);
}

.udi-drawer__nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Staggered entrance of drawer items */
.udi-drawer__item {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    transition-delay: calc(30ms * var(--i, 0));
}

.udi-drawer.is-open .udi-drawer__item {
    opacity: 1;
    transform: none;
}

.udi-drawer__row {
    display: flex;
    align-items: center;
}

.udi-drawer__row > a {
    flex: 1;
    padding: 14px 20px;
}

.udi-drawer__item--accent > .udi-drawer__row > a {
    color: var(--c-primary);
}

.udi-drawer__toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: var(--c-ink);
}

.udi-drawer__toggle .udi-icon {
    transition: transform 0.25s ease;
}

.udi-drawer__toggle[aria-expanded="true"] .udi-icon {
    transform: rotate(180deg);
}

/* Animated accordion (grid-rows trick — no JS height math) */
.udi-drawer__subwrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.udi-drawer__item.is-open > .udi-drawer__subwrap {
    grid-template-rows: 1fr;
}

.udi-drawer__sub {
    overflow: hidden;
    min-height: 0;
}

.udi-drawer__sub a {
    display: block;
    padding: 10px 20px 10px 32px;
    color: #444;
}

.udi-drawer__subheading > a {
    color: var(--c-black);
    font-weight: 700;
}

.udi-drawer__subnested > a {
    padding-left: 44px;
}

.udi-drawer__meta {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--c-gray);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
    .site-nav {
        display: none;
    }

    .udi-burger {
        display: block;
    }

    .site-header__main {
        gap: 24px;
        padding: 16px var(--pad-x);
    }

    .site-header__logo-img {
        width: 220px;
    }

    /* Search drops to its own full-width row */
    .site-header__search {
        order: 10;
        flex-basis: 100%;
        width: auto;
    }
}

@media (max-width: 767px) {
    .site-header__topbar {
        display: none;
    }

    .site-header__main {
        gap: 16px;
        padding: 12px var(--pad-x);
    }

    .site-header__logo-img {
        width: 175px;
    }

    .site-header__icons {
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .udi-mega,
    .udi-drawer,
    .udi-drawer__item,
    .udi-drawer__subwrap,
    .udi-drawer__toggle .udi-icon,
    .udi-burger span {
        transition: none;
    }
}