/*
 * NUXX - motyw Ghost odtwarzający wygląd nuxx.pl (WordPress, inotheme).
 * Wymiary i kolory zmierzone na działającej stronie WordPress (Chromium, 1440 px).
 */

:root {
    --text: #404040;
    --heading: #404040;
    --nav-text: #2d2d2d;
    --nav-hover-text: #fff;
    --nav-hover-bg: #000;
    --nav-active-text: #fff;
    --nav-active-bg: #000;
    --rule-strong: #333;
    --rule: #eaeaea;
    --rule-soft: #ddd;
    --meta: #aaa;
    --tile-title: #2c2c2c;
    /* Jedno tempo dla wszystkich animacji na stronie */
    --transition: .3s ease-in-out;
    --font: var(--gh-font-body, "Open Sans", Helvetica, Arial, sans-serif);
    --font-heading: var(--gh-font-heading, "Open Sans", Helvetica, Arial, sans-serif);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
}

a { color: #000; transition: all var(--transition); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; color: var(--heading); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.wrap { max-width: 1200px; margin: 0 auto; }

/* =Nagłówek */

.site-branding { padding: 20px 0; text-align: center; }
.site-logo { display: inline-block; line-height: 0; }
.site-logo img { width: 227px; height: 68px; object-fit: contain; }

.main-navigation {
    position: relative;
    padding: 0 40px;
    border-top: 3px solid var(--rule-strong);
    background: #fff;
    text-align: center;
}

.main-navigation ul { margin: 0; padding: 0; list-style: none; }
/* Tło (hover/aktywne) jest na <a>, więc overflow: hidden przycina je do zaokrąglenia li;
   vertical-align: top - overflow zmienia linię bazową inline-block i przesunąłby pozycje */
.main-navigation li { display: inline-block; vertical-align: top; overflow: hidden; border-radius: 0 0 8px 8px; }

.main-navigation li a {
    display: block;
    height: 68px;
    padding: 0 34px;
    color: var(--nav-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 68px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-navigation li a:hover { background: var(--nav-hover-bg); color: var(--nav-hover-text); }

/* Aktywna pozycja - także „Produkty” na stronach produktów i w kategorii */
.main-navigation li.nav-current a,
.tag-produkty .main-navigation li.nav-produkty a {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 700;
}

.search-toggle {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    padding: 6px;
    border: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
    line-height: 0;
    transition: color var(--transition);
}
.search-toggle:hover { color: #2c2c2c; }

.menu-toggle { display: none; }

/* =Strona główna */

.home-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--rule);
}

.hero-slider {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}

/* =Kafelki produktów */

.square-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.box { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }

.inner-box {
    position: absolute;
    inset: 0;
    border: 2px solid #fff;
    background: #fff no-repeat 50% / cover;
    text-decoration: none;
}

.title-box {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background-color var(--transition);
}

.title-box h3 {
    position: absolute;
    top: 48%;
    width: 100%;
    margin: 0;
    padding: 0 3%;
    color: var(--tile-title);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    /* Ukryta nazwa: przezroczysty kolor (płynne przejście) + visibility dla czytników ekranu */
    color: transparent;
    visibility: hidden;
    transform: translateY(-50%);
    transition: color var(--transition), visibility var(--transition);
}

.title-box h3.no-thumb,
.inner-box:hover .title-box h3,
.inner-box:focus-visible .title-box h3 { color: var(--tile-title); visibility: visible; }

.inner-box:hover .title-box,
.inner-box:focus-visible .title-box { background: rgba(255, 255, 255, .9); }

/* Kafel "KUPUJĘ" - wypełnia brakujące miejsce w ostatnim rzędzie (span ustawia main.js) */
.box-buy {
    aspect-ratio: auto;
    min-height: 100%;
    margin: 0;
    padding: 0 3%;
    border: 2px solid #fff;
    background: #000;
    color: #fff;
    cursor: pointer;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    transition: background-color var(--transition);
}
.box-buy[hidden] { display: none; }
.box-buy:hover, .box-buy:focus-visible { background: #2d2d2d; }

/* Popup "KUPUJĘ" */
.buy-dialog {
    width: 50vw;
    height: 70vh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-top: 3px solid var(--rule-strong);
    background: #fff;
    color: var(--nav-text);
}
.buy-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: buy-dialog-in var(--transition);
}
.buy-dialog::backdrop { background: rgba(0, 0, 0, .6); animation: buy-dialog-in var(--transition); }
.buy-dialog-text {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 40px;
    font-family: "Selawik", var(--font);
    font-size: 34px;
    font-weight: 300;
    line-height: 1.3;
    text-align: center;
}
.buy-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--nav-text);
    cursor: pointer;
    line-height: 0;
    transition: color var(--transition);
}
.buy-dialog-close:hover, .buy-dialog-close:focus-visible { color: #000; }
@keyframes buy-dialog-in { from { opacity: 0; } to { opacity: 1; } }

.page-header { padding: 0; }

/* =Wpis (produkt) */

.entry-cover {
    width: 100%;
    height: 500px;
    background: no-repeat 50% / cover;
}

.site-main { padding: 0 20px; }
.home-template .site-main { padding: 0; }
.post-template .wrap { padding: 0 20px; }

.entry-title {
    margin: 20px 0;
    color: var(--heading);
    font-size: 52px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    word-wrap: break-word;
}

.entry-meta {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.entry-meta span, .entry-meta time { display: block; }

.entry-sep {
    width: 160px;
    height: 1px;
    margin: 48px auto 56px;
    border: 0;
    background: var(--rule-soft);
}

.entry-footer {
    padding: 20px 0 10px;
    color: var(--meta);
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}


/* =Treść */

.gh-content {
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.9;
    word-wrap: break-word;
}

/* Tekst na starej stronie był wpisany jako 12 px - zachowujemy ten wygląd */
.gh-content p, .gh-content li { margin: 0 0 24px; font-size: 12px; line-height: 30.4px; }
.gh-content ul, .gh-content ol { margin: 0 0 24px; padding-left: 1.5em; }
.gh-content li { margin: 0; }

.gh-content h2 {
    margin: 40px 0 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
}
.gh-content h3 { margin: 32px 0 8px; font-size: 18px; font-weight: 700; }
.gh-content a { color: #000; }
.gh-content strong { font-weight: 700; }

/* Produkt: wąska kolumna 860 px, tekst ciaśniej jak w oryginale */
.post-template .gh-content { max-width: 860px; margin: 25px auto 0; }
.post-template .gh-content p, .post-template .gh-content li { line-height: 16.5px; }
.post-template .gh-content h2 {
    margin: 4px 0 24px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
}
.post-template .gh-content h2 em {
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
}

.page-template .gh-content > :first-child { margin-top: 0; }
.page-template .site-main > article { padding-top: 25px; }

/* Karty Ghost */
.kg-width-wide, .kg-width-full { width: 100%; }
.kg-image-card { margin: 0 0 24px; }
.kg-image-card img { display: block; }
.kg-card figcaption { color: var(--meta); font-size: 12px; text-align: center; }

/* =Slider (z karty galerii Ghost) */

.kg-gallery-card { margin: 0 0 24px; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 4px; }
.kg-gallery-row { display: flex; gap: 4px; }
.kg-gallery-image { flex: 1 1 0; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nx-slider { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #fff; }
.hero-slider .nx-slider { aspect-ratio: 3000 / 1400; }
.nx-track { display: flex; height: 100%; transition: transform var(--transition); }
.nx-slide { flex: 0 0 100%; height: 100%; }
.nx-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nx-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .8;
    transition: opacity var(--transition);
}
.nx-arrow:hover { opacity: 1; }
.nx-arrow svg { display: block; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35)); }
.nx-prev { left: 20px; }
.nx-next { right: 20px; }

/* =Stopka */

.site-footer {
    min-height: 51px;
    margin-top: 40px;
    padding: 0 20px;
}
@media (min-width: 1200px) { .site-footer { max-width: 1000px; } }

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .9);
    color: #333;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), color var(--transition);
}
.back-to-top.is-visible { opacity: .9; pointer-events: auto; }
.back-to-top:hover { color: #000; opacity: 1; }

.error-page { text-align: center; padding-bottom: 60px; }


/* =Responsywność (progi jak w inotheme) */

@media (max-width: 1290px) {
    .post-template .gh-content { max-width: 100%; margin-left: 0; margin-right: 0; }
}

@media (max-width: 959px) {
    .main-navigation { padding: 0; }
    .menu-toggle {
        display: block;
        width: 48px;
        height: 42px;
        margin: 0 auto;
        padding: 12px;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .menu-toggle span { display: block; height: 2px; margin: 0 0 5px; background: var(--nav-text); transition: background-color var(--transition); }
    .menu-toggle span:last-child { margin: 0; }
    .menu-main { display: none; }
    .main-navigation.is-open .menu-main { display: block; padding-bottom: 20px; }
    .main-navigation li { display: block; }
    .main-navigation li a { height: auto; padding: 12px 20px; line-height: 1.5; }
    .search-toggle { right: 12px; top: 21px; }
    .square-tiles { grid-template-columns: repeat(2, 1fr); }
    .entry-title { font-size: 36px; letter-spacing: 2px; }
}

@media (max-width: 600px) {
    .buy-dialog { width: 90vw; }
    .buy-dialog-text { padding: 24px; font-size: 24px; }
    .square-tiles { grid-template-columns: 1fr; }
    .entry-cover { height: 260px; }
    .entry-title { font-size: 28px; letter-spacing: 1px; }
    .post-template .gh-content h2 { font-size: 36px; }
    .site-main { padding: 0; }
    .page-template .site-main { padding: 0 16px; }
    .post-template .wrap { padding: 0 16px; }
    .nx-prev { left: 8px; }
    .nx-next { right: 8px; }
}

/* Bez animacji dla osób z włączonym „ogranicz ruch” w systemie */
@media (prefers-reduced-motion: reduce) {
    :root { --transition: 0s; }
}