/**
 * Custom CSS Variables
 *
 * UWAGA: Główne zmienne (kolory, czcionki, spacing) są definiowane w theme.json
 * i dostępne jako CSS custom properties (--wp--preset--*).
 *
 * Ten plik służy do dodatkowych zmiennych specyficznych dla projektu.
 */

:root {
    /* Breakpoints (do użycia w JS, CSS media queries używają hardcoded wartości) */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ==========================================================================
       BUTTON SYSTEM
       Centralne ustawienia przycisków - zmień tutaj aby zaktualizować wszędzie
       ========================================================================== */

    /* Button border radius */
    --btn-radius: 16px;

    /* Button padding */
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1.25rem;
    --btn-padding-y-lg: 1rem;
    --btn-padding-x-lg: 2rem;

    /* Button font */
    --btn-font-size: 0.875rem;
    --btn-font-weight: 600;
    --btn-text-transform: uppercase;

    /* Button hover effects */
    --btn-hover-lift: -3px;
    --btn-hover-shadow-light: 0 6px 20px rgba(84, 53, 118, 0.25);
    --btn-hover-shadow-dark: 0 6px 20px rgba(255, 253, 249, 0.35);
    --btn-arrow-shift: 4px;

    /* Button transition */
    --btn-transition: all 0.3s ease;

    /* ==========================================================================
       SECTION LAYOUT
       Globalne paddingi dla sekcji
       ========================================================================== */

    /* Section padding mobile - dla kontenerów na mobile (<1024px) */
    --section-padding-mobile: var(--wp--custom--spacing--section-padding-mobile, 24px);

    /* Section outer padding - dla desktop (>=1024px)
       1024-1439px (tablet): 24px - zapewnia padding na mniejszych ekranach
       1440px+: 0px - wrapper jest wycentrowany, padding niepotrzebny */
    --section-padding-outer: 24px;

    /* ==========================================================================
       GRADIENTY
       Jedno źródło prawdy - używane do tła i obramówek
       ========================================================================== */

    --gradient-main: linear-gradient(217deg, rgba(232, 226, 214, 1) 1%, rgba(254, 254, 253, 1) 26%, rgba(255, 255, 255, 1) 58%, rgba(207, 218, 241, 1) 87%);
    --gradient-home: linear-gradient(217deg, #F3F1EB 0%, #FEFEFD 25%, #FFFFFF 55%, #E8EDF5 100%);
    --gradient-gray: linear-gradient(217deg, #ECECEC 1%, #F8F8F8 26%, #FFFFFF 58%, #E0E4EC 87%);
    --gradient-gray-blue: linear-gradient(135deg, #E8E2D6 0%, #F5F5F5 35%, #E8EDF5 65%, #CFDAF1 100%);
    --gradient-horizontal: linear-gradient(90deg, rgba(232, 226, 214, 1) 0%, rgba(255, 255, 255, 1) 100%);
    --gradient-subtle: linear-gradient(180deg, rgba(255, 253, 249, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(243, 241, 235, 1) 100%);
}

/* Powyzej 1440px wrapper jest wycentrowany (margin: 0 auto) - padding niepotrzebny */
@media (min-width: 1440px) {
    :root {
        --section-padding-outer: 0px;
    }
}

/* ==========================================================================
   STANDALONE BREADCRUMBS
   Auto-injected na podstronach bez hero section z breadcrumbs
   ========================================================================== */

.standalone-breadcrumbs-wrapper {
    max-width: var(--wp--style--global--content-size, 1440px);
    margin: 0 auto;
    padding: 0 var(--section-padding-mobile, 24px);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .standalone-breadcrumbs-wrapper {
        padding: 0 var(--section-padding-outer, 72px);
    }
}

/* Style breadcrumbs identyczne jak w hero section */
.standalone-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-family: var(--wp--preset--font-family--body, 'Figtree', sans-serif);
}

.standalone-breadcrumbs a {
    display: flex;
    align-items: center;
    color: var(--wp--preset--color--primary, #543576);
    text-decoration: none;
    transition: color 0.3s ease;
}

.standalone-breadcrumbs a:hover {
    color: var(--wp--preset--color--accent, #814997);
    text-decoration: underline;
}

.standalone-breadcrumbs .hero-section__home-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.standalone-breadcrumbs .hero-section__breadcrumb-sep {
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: var(--wp--preset--color--text-light, #9ca3af);
    vertical-align: middle;
}

.standalone-breadcrumbs .hero-section__breadcrumb-current {
    color: var(--wp--preset--color--text-medium, #4b5563);
}

/* ==========================================================================
   CONTAINMENT: Standardowe bloki WordPress w post content
   Ogranicza szerokość core bloków (heading, paragraph, list, etc.)
   do contentSize z odpowiednim paddingiem.
   ACF bloki (<section>) nie są objęte — mają własny containment.
   ========================================================================== */

.wp-block-post-content > h1,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > h5,
.wp-block-post-content > h6,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > figure:not(.alignfull):not(.alignwide),
.wp-block-post-content > blockquote,
.wp-block-post-content > hr,
.wp-block-post-content > .wp-block-separator,
.wp-block-post-content > .wp-block-spacer,
.wp-block-post-content > .wp-block-columns,
.wp-block-post-content > .wp-block-table,
.wp-block-post-content > .wp-block-quote,
.wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide),
.wp-block-post-content > .wp-block-image:not(.alignfull):not(.alignwide),
.wp-block-post-content > .wp-block-buttons,
.wp-block-post-content > .wp-block-cover:not(.alignfull):not(.alignwide) {
    max-width: var(--wp--style--global--content-size, 1440px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-padding-mobile, 24px);
    padding-right: var(--section-padding-mobile, 24px);
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .wp-block-post-content > h1,
    .wp-block-post-content > h2,
    .wp-block-post-content > h3,
    .wp-block-post-content > h4,
    .wp-block-post-content > h5,
    .wp-block-post-content > h6,
    .wp-block-post-content > p,
    .wp-block-post-content > ul,
    .wp-block-post-content > ol,
    .wp-block-post-content > figure:not(.alignfull):not(.alignwide),
    .wp-block-post-content > blockquote,
    .wp-block-post-content > hr,
    .wp-block-post-content > .wp-block-separator,
    .wp-block-post-content > .wp-block-spacer,
    .wp-block-post-content > .wp-block-columns,
    .wp-block-post-content > .wp-block-table,
    .wp-block-post-content > .wp-block-quote,
    .wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide),
    .wp-block-post-content > .wp-block-image:not(.alignfull):not(.alignwide),
    .wp-block-post-content > .wp-block-buttons,
    .wp-block-post-content > .wp-block-cover:not(.alignfull):not(.alignwide) {
        padding-left: var(--section-padding-outer, 72px);
        padding-right: var(--section-padding-outer, 72px);
    }
}

/* Tło rozciągnięte na pełną szerokość viewportu (full-bleed background)
   Content zostaje w containmencie, ale tło wychodzi na 100vw */
.wp-block-post-content > [class*="section-bg-"] {
    position: relative;
    z-index: 0;
}

.wp-block-post-content > [class*="section-bg-"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: inherit;
    z-index: -1;
}