/**
 * ============================================================
 * ZGK Tools
 * UI Framework
 * ------------------------------------------------------------
 * Shared UI components used by all ZGK Tools modules.
 *
 * Modules:
 * - News
 * - Documents
 * - Procurement
 * - Water Quality
 * - Tariffs
 * - Price Lists
 *
 * @package ZGKTools
 * @since 1.1.0
 * ============================================================
 */

/* ============================================================
   CSS VARIABLES
============================================================ */

:root{

    /* Primary */

    --zgk-primary:#0d6efd;
    --zgk-primary-dark:#0a58ca;
    --zgk-primary-light:#eaf3ff;

    /* Success */

    --zgk-success:#198754;
    --zgk-success-light:#e9f8ef;

    /* Warning */

    --zgk-warning:#fd7e14;
    --zgk-warning-light:#fff3e6;

    /* Danger */

    --zgk-danger:#dc3545;
    --zgk-danger-light:#fdecee;

    /* Neutral */

    --zgk-white:#ffffff;
    --zgk-bg:#f5f7fb;
    --zgk-border:#dde4ec;

    --zgk-text:#1d2a3a;
    --zgk-text-light:#66788a;

    /* Radius */

    --zgk-radius-sm:8px;
    --zgk-radius:12px;
    --zgk-radius-lg:18px;

    /* Shadows */

    --zgk-shadow-sm:
        0 2px 8px rgba(0,0,0,.05);

    --zgk-shadow:
        0 8px 24px rgba(0,0,0,.08);

    --zgk-shadow-lg:
        0 16px 40px rgba(0,0,0,.12);

    /* Animation */

    --zgk-transition:all .25s ease;

}


/* ============================================================
   GLOBAL
============================================================ */

.zgk-module{

    color:var(--zgk-text);

    font-size:16px;

    line-height:1.6;

}

.zgk-module *{

    box-sizing:border-box;

}

.zgk-module a{

    transition:var(--zgk-transition);

    text-decoration:none;

}

.zgk-module img{

    max-width:100%;

    height:auto;

}


/* ============================================================
   SECTION
============================================================ */

.zgk-section{

    margin:40px 0;

}


/* ============================================================
   CONTAINER
============================================================ */

.zgk-container{

    width:100%;

}


/* ============================================================
   GRID
============================================================ */

.zgk-grid{

    display:grid;

    gap:24px;

}


/* ============================================================
   CARD
============================================================ */

.zgk-card{

    background:var(--zgk-white);

    border:1px solid var(--zgk-border);

    border-radius:var(--zgk-radius);

    box-shadow:var(--zgk-shadow-sm);

    padding:24px;

    transition:var(--zgk-transition);

}

.zgk-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--zgk-shadow);

}


/* ============================================================
   BUTTON
============================================================ */

.zgk-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 18px;

    border:none;

    border-radius:10px;

    background:var(--zgk-primary);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:var(--zgk-transition);

}

.zgk-button:hover{

    background:var(--zgk-primary-dark);

}


/* ============================================================
   BADGE
============================================================ */

.zgk-badge{

    display:inline-flex;

    align-items:center;

    padding:4px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.zgk-badge-success{

    background:var(--zgk-success-light);

    color:var(--zgk-success);

}

.zgk-badge-warning{

    background:var(--zgk-warning-light);

    color:var(--zgk-warning);

}

.zgk-badge-danger{

    background:var(--zgk-danger-light);

    color:var(--zgk-danger);

}

.zgk-badge-primary{

    background:var(--zgk-primary-light);

    color:var(--zgk-primary);

}


/* ============================================================
   FORM
============================================================ */

.zgk-input,
.zgk-select{

    width:100%;

    height:46px;

    padding:0 16px;

    border:1px solid var(--zgk-border);

    border-radius:10px;

    background:#fff;

    transition:var(--zgk-transition);

}

.zgk-input:focus,
.zgk-select:focus{

    outline:none;

    border-color:var(--zgk-primary);

    box-shadow:0 0 0 3px rgba(13,110,253,.15);

}


/* ============================================================
   PAGINATION
============================================================ */

.zgk-pagination{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:40px;

}

.zgk-pagination a,
.zgk-pagination span{

    min-width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    border:1px solid var(--zgk-border);

    background:#fff;

}

.zgk-pagination .current{

    background:var(--zgk-primary);

    color:#fff;

    border-color:var(--zgk-primary);

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:992px){

    .zgk-card{

        padding:20px;

    }

}

@media (max-width:768px){

    .zgk-grid{

        gap:18px;

    }

    .zgk-card{

        padding:18px;

    }

}

.zgk-slider-mobile-summary { display:none; }

.ct-header-search {
    min-width:44px;
    min-height:44px;
}

.zgk-error-summary {
    margin:0 0 20px;
    padding:16px 18px;
    border:2px solid #b42318;
    border-radius:8px;
    background:#fff;
    color:#7a271a;
}
.zgk-error-summary strong { display:block; font-size:1.05rem; }
.zgk-error-summary p { margin:5px 0; }
.zgk-error-summary ul { margin:6px 0 0; padding-left:22px; }
.zgk-error-summary a { color:inherit; text-decoration:underline; font-weight:700; }
.zgk-field-error { display:block; margin-top:5px; color:#b42318; font-size:.85rem; font-weight:700; }
[aria-invalid="true"] { border-color:#b42318 !important; }

.zgk-slider-motion-toggle {
    position:static;
    min-height:44px;
    padding:9px 13px;
    border:2px solid #fff;
    border-radius:8px;
    color:#fff;
    background:#123f73;
    font:700 13px/1.2 inherit;
    cursor:pointer;
}

.zgk-slider-accessibility-controls {
    position:absolute;
    z-index:60;
    left:28px;
    top:18px;
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.zgk-daily-ticker:hover .zgk-daily-ticker__track,
.zgk-daily-ticker:focus .zgk-daily-ticker__track,
.zgk-daily-ticker:focus-within .zgk-daily-ticker__track {
    animation-play-state:paused !important;
}

@media (max-width:480px){
    [data-creator="Smart Slider 3"] { position:relative; }
    [data-creator="Smart Slider 3"] .n2-ss-slide .n2-ss-layer { visibility:hidden !important; }
    .zgk-slider-mobile-summary {
        position:absolute;
        z-index:50;
        right:16px;
        bottom:22px;
        left:16px;
        display:block;
        padding:19px;
        border-radius:14px;
        color:#fff;
        background:rgba(9,46,89,.94);
        box-shadow:0 10px 24px rgba(0,0,0,.2);
    }
    .zgk-slider-mobile-summary strong { display:block; font-size:20px; line-height:1.25; }
    .zgk-slider-mobile-summary p { margin:8px 0 15px; font-size:15px; line-height:1.5; }
    .zgk-slider-mobile-summary div { display:flex; flex-wrap:wrap; gap:9px; }
    .zgk-slider-mobile-summary a {
        display:inline-flex;
        min-height:44px;
        align-items:center;
        padding:9px 12px;
        border:1px solid #8cd66f;
        border-radius:8px;
        color:#fff;
        background:#4dbc2f;
        font-size:13px;
        font-weight:800;
        text-decoration:none;
    }
    .zgk-slider-accessibility-controls { top:12px; left:16px; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
    html:focus-within { scroll-behavior:auto !important; }
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
    .zgk-daily-ticker__track { animation:none !important; transform:none !important; }
}

/* Widoczny fokus klawiatury. Reguła nie zmienia wyglądu elementów
   podczas zwykłej obsługi myszą lub dotykiem. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #123f73 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

@media (min-width:1000px){
    .zgk-menu-has-panel.zgk-mega-keyboard-open > .zgk-mega-panel {
        display:grid;
    }

    .zgk-menu-has-panel.zgk-mega-escape-closed > .zgk-mega-panel {
        display:none !important;
    }
}

/* Zwijany panel rozmiaru tekstu. Nie zmienia kolorystyki serwisu. */
.zgk-text-tools {
    position:fixed;
    z-index:100000;
    left:202px;
    right:auto;
    top:118px;
    font-size:16px !important;
    line-height:1.25;
	 transform:none;
	 display:flex;
	 align-items:flex-start;
	 gap:8px;
}
.zgk-text-tools * { box-sizing:border-box; font-size:inherit !important; }
.zgk-text-tools--initializing { visibility:hidden !important; }
.zgk-text-tools__toggle,
.zgk-contrast-toggle {
    display:flex;
    min-width:48px;
    min-height:48px;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 11px;
    border:2px solid #fff;
    border-radius:10px;
    color:#fff;
    background:#123f73;
    box-shadow:0 4px 16px rgba(9,46,89,.25);
    font-weight:800;
    cursor:pointer;
}
.zgk-contrast-toggle[aria-pressed="true"] { color:#000; background:#ffeb3b; border-color:#000; }
.zgk-contrast-toggle__short { display:none; font-size:22px !important; line-height:1; }
.zgk-text-tools__toggle > span:first-child { font-size:18px !important; }
.zgk-text-tools__label { max-width:0; overflow:hidden; white-space:nowrap; }
.zgk-text-tools__toggle:hover .zgk-text-tools__label,
.zgk-text-tools__toggle:focus-visible .zgk-text-tools__label,
.zgk-text-tools__toggle[aria-expanded="true"] .zgk-text-tools__label { max-width:100px; }
.zgk-text-tools__panel {
    position:absolute;
    right:auto;
    left:0;
    top:calc(100% + 8px);
    width:236px;
    padding:15px;
    border:1px solid #d9e4ee;
    border-radius:10px;
    color:#123f73;
    background:#fff;
    box-shadow:0 10px 30px rgba(9,46,89,.22);
}
.zgk-text-tools__panel[hidden] { display:none !important; }
.zgk-text-tools__panel strong { display:block; margin-bottom:10px; }
.zgk-text-tools__buttons { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:6px; }
.zgk-text-tools__buttons button {
    min-width:44px;
    min-height:44px;
    padding:7px;
    border:1px solid #123f73;
    border-radius:7px;
    color:#123f73;
    background:#fff;
    font-weight:800;
    cursor:pointer;
}
.zgk-text-tools__buttons button:hover { color:#fff; background:#123f73; }
.zgk-text-tools__buttons button:disabled { opacity:.45; cursor:not-allowed; }
.zgk-text-tools__status { display:block; min-height:20px; margin-top:8px; font-size:13px !important; }

.zgk-text-tools--slider {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    transform:none;
}
.zgk-text-tools--slider .zgk-text-tools__toggle { min-height:44px; box-shadow:none; }
.zgk-text-tools--slider .zgk-contrast-toggle { min-height:44px; box-shadow:none; }
.zgk-text-tools--slider .zgk-text-tools__panel { right:auto; left:0; }

.zgk-text-tools--header {
	position:relative;
	z-index:20;
	left:auto;
	right:auto;
	top:auto;
	margin-left:16px;
	transform:none;
}
.zgk-text-tools--header .zgk-text-tools__panel { right:auto; left:0; }

/* Na pośrednich szerokościach panel pozostaje obok logo, ale zajmuje mniej
   miejsca, aby nie wypychać ostatnich pozycji menu poza ekran. */
@media (min-width:1000px) and (max-width:1350px) {
	.zgk-text-tools--header { gap:6px; margin-left:8px; }
	.zgk-text-tools--header .zgk-text-tools__toggle {
		width:46px;
		min-width:46px;
		padding-inline:8px;
	}
	.zgk-text-tools--header .zgk-text-tools__label { display:none; }
	.zgk-text-tools--header .zgk-contrast-toggle {
		min-width:0;
		padding-inline:9px;
		font-size:14px !important;
	}
}

/* Na telefonie i tablecie panel tworzy własny wiersz przed treścią. Nie jest
   nakładką, więc nie zasłania okruszków ani początku hero. */
@media (max-width:999px) {
	body:not(.home) .zgk-text-tools:not(.zgk-text-tools--slider) {
		position:relative;
		left:auto;
		right:auto;
		top:auto;
		bottom:auto;
		width:max-content;
		margin:10px 20px;
		transform:none;
	}
	body:not(.home) .zgk-text-tools:not(.zgk-text-tools--slider) .zgk-text-tools__panel {
		top:calc(100% + 8px);
		bottom:auto;
	}
}

@media (max-width:700px) {
    .zgk-text-tools { left:16px; right:auto; top:84px; bottom:auto; transform:none; }
    .zgk-text-tools__panel { top:calc(100% + 8px); bottom:auto; }
    .zgk-text-tools__label { display:none; }
	.zgk-text-tools:not(.zgk-text-tools--slider) { gap:6px; }
	.zgk-text-tools:not(.zgk-text-tools--slider) .zgk-text-tools__toggle,
	.zgk-text-tools:not(.zgk-text-tools--slider) .zgk-contrast-toggle {
		width:48px;
		min-width:48px;
		height:48px;
		min-height:48px;
		padding:0;
	}
	.zgk-text-tools:not(.zgk-text-tools--slider) .zgk-contrast-toggle__short { display:block; }
	.zgk-text-tools:not(.zgk-text-tools--slider) .zgk-contrast-toggle__label { display:none; }
    .zgk-text-tools--slider { right:auto; top:auto; bottom:auto; transform:none; }
    .zgk-text-tools--slider .zgk-text-tools__panel { top:calc(100% + 8px); bottom:auto; }
}

/* Administracyjny tryb żałobny. */
body.zgk-site-grayscale { filter:grayscale(100%); }


/* Tryb wysokiego kontrastu wybierany przez użytkownika. */
html.zgk-high-contrast body,
html.zgk-high-contrast :where(header, main, footer, section, article, aside, nav, div, form) {
    color:#fff !important;
    background-color:#000 !important;
    background-image:none !important;
}
html.zgk-high-contrast :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, li, td, th) { color:#fff !important; }
html.zgk-high-contrast :where(a, button) { color:#ffeb3b !important; background:#000 !important; border-color:#ffeb3b !important; }
html.zgk-high-contrast .zgk-contrast-toggle[aria-pressed="true"] { color:#000 !important; background:#ffeb3b !important; border-color:#fff !important; }
html.zgk-high-contrast a.spectra-container-link-overlay {
    background:transparent !important;
    border-color:transparent !important;
}
html.zgk-high-contrast :where(input, textarea, select) { color:#fff !important; background:#000 !important; border:2px solid #fff !important; }
html.zgk-high-contrast :where(a, button, input, textarea, select):focus-visible { outline-color:#ffeb3b !important; box-shadow:0 0 0 2px #000 !important; }
html.zgk-high-contrast img { filter:none !important; }