/**
 * Custom Header Stylesheet
 * Target: WordPress Template Part (Header)
 * UI: 1:1 mapping based on provided visual specification.
 */

.header-section-bg{
    padding-top: var(--header-padding-y);
    padding-bottom: var(--header-padding-y);
    background-color: #ff0086; /* var(--site-light-bg-color);*/
    font-family: var(--font-primary);
}
/* * Override padding specifically for the link element inside the .header-tickers-button wrapper.
 * This ensures high specificity without relying on !important, keeping the CSS cascade clean.
 */
.header-tickers-button .wp-block-button__link.wp-element-button {
    padding: var(--header-btn-padding-y) var(--header-btn-padding-x) !important;
    font-size: var(--header-btn-font-size) !important;
}

/* * Remove the global SVG arrow mask.
 * Using 'content: none' and 'display: none' completely removes the pseudo-element from the DOM tree,
 * saving browser paint/layout cycles and optimizing performance.
 */
.header-tickers-button .wp-block-button__link.wp-element-button::after {
    content: none !important;
    display: none !important;
}


/* * 1. Base alignment and layout constraints
 * Defines the main flex container behavior, ensuring elements do not wrap 
 * and maintain logical spacing.
 */
.wp-block-template-part .wp-container-core-group-is-layout-6cc28f8c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 2rem; /* Base spacing between main components */
}

/* * 2. Main Logo constraints
 * Fixes the layout blowout caused by native 1221px image width.
 * Constrains the wrapper and prevents it from shrinking below required size.
 */
.wp-block-template-part figure.wp-block-image:has(.wp-image-9) {
    margin: 0;
    max-width: 320px; /* Constrain to match UI proportions */
    width: 100%;
    flex-shrink: 0; /* Prevent the logo from being squeezed by other elements */
}

.wp-block-template-part img.wp-image-9 {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Prevents aspect ratio distortion */
}

/* * 3. Navigation Menu 
 * Pushes the navigation items to the right, closer to the flag and CTA.
 */
.wp-block-navigation {
    flex-grow: 1; /* Takes up available middle space */
    justify-content: flex-end;
}

.wp-block-navigation__container {
    align-items: center;
    gap: 0.5rem;
}

.wp-block-navigation-item__content {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    color: inherit;
    text-decoration: none;
    border: 2px solid transparent; /* Anti-layout-shift technique */
    border-radius: 9999px;
    transition: border-color 0.2s ease-in-out;
    white-space: nowrap;
}

/* Active/Hover states for Nav */
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus-visible {
    border-color: currentColor;
    outline: none;
}

/* * 4. Flag Icon */
.wp-block-image.size-large:has(img[src*="Flag_of_the_United_Kingdom"]) {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* * 5. Call To Action (CTA) Button
 * Strict styling overrides with performance-friendly transforms.
 */
.wp-block-buttons {
    align-items: center;
    flex-shrink: 0;
}
/*
.wp-block-button__link {
    
background-color: var(--button-action-bg-color) ;
    color: var(--button-default-color) ;
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    border: var(--button-border);
    font-weight: var(--button-font-weight);
    text-decoration: var(--button-text-decoration);
    transition: var(--button-transition);
    cursor: var(--button-cursor);
    white-space: var(--button-white-space);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
background-color: var(--button-hover-bg) !important;
    transform: var(--button-hover-transform);
    outline: var(--button-hover-outline);
    outline-offset: var(--button-outline-offset);
}

*/

/*******************************************
                    MOBILE
********************************************/
/**
 * Responsive Header Adjustments
 * Breakpoint: 1192px (User defined)
 * Logic: Hide CTA, enable hamburger interaction, optimize logo scale.
 */

/*******************************************
                    MOBILE
********************************************/
/**
 * Responsive Header Adjustments
 * Breakpoint: 1192px (User defined)
 * Logic: Hide CTA, enable hamburger interaction, optimize logo scale.
 */

@media (max-width: 1191px) {
    /* --- 1. Widok Nagłówka (Gdy menu jest zamknięte) --- */
    .header-section-bg > .wp-block-group {
        justify-content: space-between !important;
        gap: 1rem !important;
        flex-wrap: nowrap !important;
    }

    .wp-block-template-part figure.wp-block-image:has(.wp-image-9) {
        max-width: 180px !important;
        margin: 0 !important;
    }

    /* POPRAWKA: Ukrywamy TYLKO bezpośredni kontener przycisku CTA */
    .wp-block-group:has(> .wp-block-buttons > .header-tickers-button) {
        display: none !important;
    }

    /* Hamburger */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        background: transparent;
        border: none;
        color: var(--menu-hamburger-color);
    }

    .wp-block-navigation__container {
        display: none !important;
    }

    /* --- 2. Widok Menu (Gdy menu jest OTWARTE) --- */
    .wp-block-navigation__responsive-container.is-menu-open {
        background-color: var(--menu-hamburger-bg-color) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 40px 0 !important;
    }

    /* Reset kontenerów WordPressa */
    .wp-block-navigation__responsive-dialog,
    .wp-block-navigation__responsive-container-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Logo wewnątrz menu (Pseudo-element) */
    .is-menu-open .wp-block-navigation__responsive-container-content::before {
        content: "";
        display: block;
        width: 220px;
        height: 60px;
        background: var(--menu-site-logo) no-repeat center;
        background-size: contain;
        margin: 0 auto 20px auto !important;
    }

    /* Separator (Linia) */
    .is-menu-open .wp-block-navigation__responsive-container-content::after {
        content: "";
        display: block;
        width: 80% !important;
        max-width: 400px;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.3);
        margin: 0 auto 30px auto !important;
    }

    /* Lista linków wewnątrz menu */
    .is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .wp-block-navigation-item__content {
        padding: 0.5rem 1rem !important;
        font-size: 1.3rem !important;
        border: none !important;
        color: #FFFFFF !important;
    }

    /* --- 3. POPRAWKA: Przycisk CTA (Pozycjonowanie na dole modala) --- */
    body:has(.is-menu-open) .wp-block-group:has(> .wp-block-buttons > .header-tickers-button) {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        justify-content: center !important;
        z-index: 1000000 !important;
        width: fit-content !important;
        bottom: 40px !important;
    }

    /* Przycisk Zamknij (X) */
    .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 25px !important;
        right: 25px !important;
        color: var(--menu-hamburger-color) !important;
    }
}