/* ROD im. Mikołaja Reja — niestandardowe style */

/* ─── Zmienne dostępności ──────────────────────────────────────────────────── */
:root {
    --font-scale: 1;
}

:root:not([data-theme="dark"]) {
    --rod-text-muted-strong: #5c685f;
}

html {
    font-size: calc(16px * var(--font-scale));
}

:root:not([data-theme="dark"]) .text-gray-400 {
    color: var(--rod-text-muted-strong) !important;
}

/* ─── Tryb ciemny ──────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --rod-bg-base:        #0e1410;
    --rod-bg-elev:        #161e18;
    --rod-bg-elev2:       #1d2620;
    --rod-border:         #263429;
    --rod-text:           #e6ebe5;
    --rod-text-muted:     #a3b0a0;
    --rod-text-soft:      #cbd4c8;
    --rod-accent:         #7CC47C;
    --rod-accent-strong:  #A5D6A7;
}

:root[data-theme="dark"] body {
    background: linear-gradient(180deg, #0e1410 0%, #131a14 50%, #0e1410 100%) !important;
    color: var(--rod-text);
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-white\/95 {
    background-color: var(--rod-bg-elev) !important;
}

:root[data-theme="dark"] .bg-\[\#f6f4ee\],
:root[data-theme="dark"] .bg-\[\#edf1e7\],
:root[data-theme="dark"] .bg-\[\#f4f8ef\],
:root[data-theme="dark"] .bg-\[\#fbfcf8\],
:root[data-theme="dark"] .bg-\[\#fafcf7\],
:root[data-theme="dark"] .bg-\[\#f7fbf2\],
:root[data-theme="dark"] .bg-\[\#f3f7ee\],
:root[data-theme="dark"] .bg-\[\#eef4e7\],
:root[data-theme="dark"] .bg-rod-bg {
    background-color: var(--rod-bg-elev2) !important;
}

:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-700,
:root[data-theme="dark"] .text-gray-900 { color: var(--rod-text) !important; }
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500 { color: var(--rod-text-muted) !important; }
:root[data-theme="dark"] .text-gray-400 { color: #6c7a6a !important; }
:root[data-theme="dark"] .text-rod-dark  { color: var(--rod-accent-strong) !important; }
:root[data-theme="dark"] .text-rod-green { color: var(--rod-accent) !important; }
:root[data-theme="dark"] .text-\[\#456140\],
:root[data-theme="dark"] .text-\[\#5c6d58\],
:root[data-theme="dark"] .text-\[\#6b7d63\] { color: var(--rod-text-soft) !important; }

:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-\[\#d7dfcd\],
:root[data-theme="dark"] .border-\[\#dbe4d1\],
:root[data-theme="dark"] .border-\[\#e5ebdd\],
:root[data-theme="dark"] .border-\[\#e7ece0\],
:root[data-theme="dark"] .border-\[\#eef2e8\],
:root[data-theme="dark"] .border-\[\#f2f5ee\],
:root[data-theme="dark"] .border-\[\#edf1e7\],
:root[data-theme="dark"] .border-\[\#e6e0d2\],
:root[data-theme="dark"] .border-\[\#d5dcc9\],
:root[data-theme="dark"] .border-\[\#dbe5d0\],
:root[data-theme="dark"] .border-\[\#f0f3eb\] { border-color: var(--rod-border) !important; }

:root[data-theme="dark"] header,
:root[data-theme="dark"] #accessibility-bar { background-color: rgba(22, 30, 24, 0.92) !important; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background-color: var(--rod-bg-elev2) !important;
    color: var(--rod-text) !important;
    border-color: var(--rod-border) !important;
}

:root[data-theme="dark"] .rod-content,
:root[data-theme="dark"] .rod-content p,
:root[data-theme="dark"] .rod-content li,
:root[data-theme="dark"] .rod-content td,
:root[data-theme="dark"] .rod-content th,
:root[data-theme="dark"] .rod-content strong,
:root[data-theme="dark"] .rod-content span {
    color: var(--rod-text) !important;
}

:root[data-theme="dark"] .rod-content h2,
:root[data-theme="dark"] .rod-content h3 {
    color: var(--rod-accent-strong) !important;
}

:root[data-theme="dark"] .rod-content a {
    color: var(--rod-accent-strong) !important;
}

:root[data-theme="dark"] .rod-content blockquote {
    color: var(--rod-text-soft) !important;
    background: var(--rod-bg-elev2) !important;
    border-left-color: var(--rod-accent) !important;
}

:root[data-theme="dark"] .rod-content table,
:root[data-theme="dark"] .rod-content th,
:root[data-theme="dark"] .rod-content td,
:root[data-theme="dark"] .rod-content hr {
    border-color: var(--rod-border) !important;
}

:root[data-theme="dark"] .rod-content th {
    background: var(--rod-bg-elev2) !important;
}

:root[data-theme="dark"] .glightbox-container .gslide,
:root[data-theme="dark"] .glightbox-container .gslide-media,
:root[data-theme="dark"] .glightbox-container .gslide-image,
:root[data-theme="dark"] .glightbox-container .ginner-container {
    background: transparent !important;
}

:root[data-theme="dark"] .glightbox-container .gslide-image img,
:root[data-theme="dark"] .glightbox-container img.gslide-image {
    background: #182019 !important;
    border: 1px solid var(--rod-border) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42) !important;
}

/* Hover w trybie ciemnym */
:root[data-theme="dark"] .hover\:bg-\[\#eef4e7\]:hover,
:root[data-theme="dark"] .hover\:bg-\[\#f3f7ee\]:hover,
:root[data-theme="dark"] .hover\:bg-\[\#f4f8ef\]:hover { background-color: rgba(124, 196, 124, 0.10) !important; }
:root[data-theme="dark"] .group:hover .group-hover\:bg-\[\#dcebcf\] { background-color: rgba(124, 196, 124, 0.18) !important; }

/* ─── Karty zdarzeń – akordeon (details/summary) ────────────────────────── */
.event-card-item summary::-webkit-details-marker,
.event-card-item summary::marker { display: none; }

.event-card-item.has-details summary:hover {
    background-color: #f4f8ef;
}
:root[data-theme="dark"] .event-card-item.has-details summary:hover {
    background-color: var(--rod-bg-elev2) !important;
}

.event-chevron {
    transition: transform 0.2s ease;
    display: inline-block;
}
.event-card-item[open] > summary .event-chevron,
.event-card-item[open] .event-chevron {
    transform: rotate(180deg);
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
body {
    font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at top left, rgba(215, 231, 198, 0.45), transparent 32%),
        linear-gradient(180deg, #f7f4ed 0%, #fbfaf7 22%, #f7f7f2 100%);
}

.font-serif {
    font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
}

/* ─── Treść artykułu (WYSIWYG output) ────────────────────────────────────── */
.rod-content h2 { font-size: 1.5rem; font-weight: 600; color: #1B5E20; margin: 2rem 0 0.75rem; font-family: 'DM Serif Display', serif; }
.rod-content h3 { font-size: 1.2rem; font-weight: 600; color: #2E7D32; margin: 1.5rem 0 0.5rem; }
.rod-content p  { margin-bottom: 1rem; line-height: 1.75; }
.rod-content ul, .rod-content ol { margin: 0.75rem 0 1rem 1.5rem; }
.rod-content ul { list-style: disc; }
.rod-content ol { list-style: decimal; }
.rod-content li { margin-bottom: 0.35rem; line-height: 1.6; }
.rod-content a  { color: #2E7D32; text-decoration: underline; }
.rod-content a:hover { color: #1B5E20; }
.rod-content strong { font-weight: 600; }
.rod-content em { font-style: italic; }
.rod-content blockquote {
    border-left: 4px solid #A5D6A7;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    color: #555;
    background: #F1F8E9;
    border-radius: 0 0.5rem 0.5rem 0;
}
.rod-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.rod-content th, .rod-content td { border: 1px solid #E5E7EB; padding: 0.5rem 0.75rem; text-align: left; }
.rod-content th { background: #F1F8E9; font-weight: 600; }
.rod-content img { max-width: 100%; border-radius: 0.5rem; margin: 0.5rem 0; }
.rod-content hr { border: none; border-top: 2px solid #E5E7EB; margin: 1.5rem 0; }

/* ─── Line-clamp ─────────────────────────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Leaflet mapa – ukryj domyślne atrybuty ────────────────────────────── */
.leaflet-control-attribution {
    font-size: 9px !important;
}

/* ─── Focus widoczny dla klawiatury ─────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #2E7D32;
    outline-offset: 2px;
}

/* ─── Smooth scroll ─────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ─── Skip to content ───────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #1B5E20;
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 9999;
    border-radius: 0 0 4px 0;
    font-size: 0.875rem;
    transition: top 0.1s;
}
.skip-link:focus {
    top: 0;
}

/* ─── Animacje ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .group img, .group .transition {
        transition-duration: 300ms;
    }

    .hover\:-translate-y-0\.5:hover {
        transform: translateY(-0.125rem);
    }

    .hero-quote-animated {
        display: inline;
    }

    .hero-quote-word {
        display: inline-block;
        white-space: nowrap;
    }

    .hero-quote-letter {
        display: inline-block;
        opacity: 0;
        transform: translateY(0.38em) scale(0.96);
        filter: blur(0.08em);
        animation: hero-quote-reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: calc(var(--letter-index, 0) * 0.028s + 0.18s);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

@keyframes hero-quote-reveal {
    0% {
        opacity: 0;
        transform: translateY(0.38em) scale(0.96);
        filter: blur(0.08em);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ─── Gadżet sadzenia (planting widget) ─────────────────────────────────── */
.pw-act-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    min-width: 11rem;
}
.pw-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
    cursor: default;
    transition: opacity .15s;
}
.pw-pill:hover { opacity: .75; }
.pw-pill.hidden, .pw-extra.hidden { display: none !important; }
.pw-more {
    appearance: none;
    background: transparent;
    border: 0;
    font-size: 0.7rem;
    color: #94a3b8;
    padding: 0.15rem 0.2rem;
    align-self: center;
    cursor: pointer;
    transition: color .15s;
}
.pw-more:hover { color: #64748b; }
/* Label colors */
.pw-lbl-indoor  { color: #155e1e; }
.pw-lbl-outdoor { color: #1a6b2e; }
.pw-lbl-plant   { color: #2e5e10; }
/* Pill colors */
.pw-indoor  { background: #f1f8e9; border-color: #b8dfa0; color: #155e1e; }
.pw-outdoor { background: #e8f5e9; border-color: #a5d6a7; color: #1a6b2e; }
.pw-plant   { background: #eef4e4; border-color: #b0cc88; color: #2e5e10; }
/* Dark mode */
:root[data-theme="dark"] .pw-lbl-indoor,
:root[data-theme="dark"] .pw-lbl-outdoor,
:root[data-theme="dark"] .pw-lbl-plant  { color: var(--rod-accent) !important; }
:root[data-theme="dark"] .pw-indoor,
:root[data-theme="dark"] .pw-outdoor,
:root[data-theme="dark"] .pw-plant {
    background: rgba(124,196,124,0.10) !important;
    border-color: rgba(124,196,124,0.28) !important;
    color: var(--rod-accent) !important;
}
:root[data-theme="dark"] .pw-more { color: var(--rod-text-muted) !important; }

/* ─── Kolory rod-* (niezależne od wersji Tailwinda) ─────────────────────── */
.bg-rod-dark   { background-color: #1B5E20; }
.bg-rod-green  { background-color: #2E7D32; }
.bg-rod-mid    { background-color: #388E3C; }
.bg-rod-light  { background-color: #A5D6A7; }
.bg-rod-bg     { background-color: #F1F8E9; }

/* Kolory szarości */
.bg-gray-900 { background-color: #111827; }
.bg-gray-800 { background-color: #1F2937; }
.bg-gray-800\/50 { background-color: rgb(31 41 55 / 0.5); }
.bg-\[\#f6f4ee\] { background-color: #f6f4ee; }
.bg-\[\#edf1e7\] { background-color: #edf1e7; }
.bg-\[\#f4f8ef\] { background-color: #f4f8ef; }
.bg-\[\#fbfcf8\] { background-color: #fbfcf8; }
.bg-\[\#f3f7ee\] { background-color: #f3f7ee; }
.bg-\[\#eef4e7\] { background-color: #eef4e7; }
.bg-\[\#fff8e6\] { background-color: #fff8e6; }
.bg-\[\#fff2cf\] { background-color: #fff2cf; }
.border-gray-800 { border-color: #1F2937; }
.border-\[\#e6e0d2\] { border-color: #e6e0d2; }
.border-\[\#d5dcc9\] { border-color: #d5dcc9; }
.border-\[\#edf1e7\] { border-color: #edf1e7; }
.border-\[\#f0f3eb\] { border-color: #f0f3eb; }
.border-\[\#f1dfad\] { border-color: #f1dfad; }

.text-rod-dark  { color: #1B5E20; }
.text-rod-green { color: #2E7D32; }
.text-rod-mid   { color: #388E3C; }
.text-rod-light { color: #A5D6A7; }
.text-\[\#456140\] { color: #456140; }
.text-\[\#5c6d58\] { color: #5c6d58; }
.text-\[\#6b7d63\] { color: #6b7d63; }
.text-\[\#8e6422\] { color: #8e6422; }
.text-\[\#c6cfba\] { color: #c6cfba; }

.shadow-\[0_8px_30px_rgba\(27\2c 94\2c 32\2c 0\.08\)\] { box-shadow: 0 8px 30px rgba(27, 94, 32, 0.08); }
.shadow-\[0_12px_30px_rgba\(46\2c 125\2c 50\2c 0\.2\)\] { box-shadow: 0 12px 30px rgba(46, 125, 50, 0.2); }
.shadow-\[0_16px_36px_rgba\(53\2c 74\2c 46\2c 0\.08\)\] { box-shadow: 0 16px 36px rgba(53, 74, 46, 0.08); }
.shadow-\[0_16px_40px_rgba\(27\2c 94\2c 32\2c 0\.35\)\] { box-shadow: 0 16px 40px rgba(27, 94, 32, 0.35); }
.shadow-\[0_18px_40px_rgba\(53\2c 74\2c 46\2c 0\.08\)\] { box-shadow: 0 18px 40px rgba(53, 74, 46, 0.08); }
.shadow-\[0_22px_48px_rgba\(53\2c 74\2c 46\2c 0\.12\)\] { box-shadow: 0 22px 48px rgba(53, 74, 46, 0.12); }
.shadow-\[0_24px_60px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); }
.shadow-\[0_24px_60px_rgba\(49\2c 79\2c 44\2c 0\.12\)\] { box-shadow: 0 24px 60px rgba(49, 79, 44, 0.12); }
.shadow-\[0_12px_32px_rgba\(46\2c 125\2c 50\2c 0\.18\)\] { box-shadow: 0 12px 32px rgba(46, 125, 50, 0.18); }

.rounded-\[22px\] { border-radius: 22px; }
.rounded-\[24px\] { border-radius: 24px; }
.rounded-\[28px\] { border-radius: 28px; }
.rounded-t-\[24px\] { border-top-left-radius: 24px; border-top-right-radius: 24px; }

.tracking-\[0\.02em\] { letter-spacing: 0.02em; }
.leading-\[1\.02\] { line-height: 1.02; }

.bg-\[radial-gradient\(circle_at_top_right\2c rgba\(217\2c 234\2c 190\2c 0\.18\)\2c transparent_30\%\)\] {
    background-image: radial-gradient(circle at top right, rgba(217, 234, 190, 0.18), transparent 30%);
}

.border-rod-green { border-color: #2E7D32; }
.border-rod-dark  { border-color: #1B5E20; }
.border-rod-light { border-color: #A5D6A7; }
.border-rod-mid   { border-color: #388E3C; }

.hover\:bg-rod-dark:hover    { background-color: #1B5E20; }
.hover\:bg-rod-light:hover   { background-color: #A5D6A7; }
.hover\:text-rod-green:hover { color: #2E7D32; }
.hover\:text-rod-dark:hover  { color: #1B5E20; }
.hover\:border-rod-green:hover { border-color: #2E7D32; }

/* Hover states dla ciemnego tła */
.group:hover .group-hover\:bg-gray-800\/50 { background-color: rgb(31 41 55 / 0.5); }
.group:hover .group-hover\:bg-rod-dark\/60 { background-color: rgb(27 94 32 / 0.6); }
.group:hover .group-hover\:text-rod-light { color: #A5D6A7; }
.group:hover .group-hover\:bg-rod-light   { background-color: #A5D6A7; }
.group:hover .group-hover\:text-rod-green { color: #2E7D32; }

.focus\:border-rod-green:focus { border-color: #2E7D32; }
.focus\:ring-rod-green:focus   { --tw-ring-color: #2E7D32; box-shadow: 0 0 0 3px rgb(46 125 50 / 0.35); }
.ring-rod-green { --tw-ring-color: #2E7D32; }

/* Bg z przezroczystością — hover overlay na mapie */
.bg-rod-dark\/0  { background-color: rgb(27 94 32 / 0); }
.bg-rod-dark\/10 { background-color: rgb(27 94 32 / 0.10); }
.bg-rod-dark\/20 { background-color: rgb(27 94 32 / 0.20); }
.group:hover .group-hover\:bg-rod-dark\/10 { background-color: rgb(27 94 32 / 0.10); }


/* Gradienty — hero overlay */
.from-rod-dark\/85 {
    --tw-gradient-from: rgb(27 94 32 / 0.85);
    --tw-gradient-to: rgb(27 94 32 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-rod-dark\/60 {
    --tw-gradient-via: rgb(27 94 32 / 0.6);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
.from-rod-dark {
    --tw-gradient-from: #1B5E20;
    --tw-gradient-to: rgb(27 94 32 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
/* Fallback bezpośredni dla hero — wyższy priorytet przez 3 klasy */
.bg-gradient-to-r.from-rod-dark\/85.via-rod-dark\/60 {
    background-image: linear-gradient(to right, rgb(27 94 32 / 0.85), rgb(27 94 32 / 0.6), transparent);
}

/* Dark hero overlay — ciemny gradient */
.from-gray-900\/90 {
    --tw-gradient-from: rgb(17 24 39 / 0.9);
    --tw-gradient-to: rgb(17 24 39 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-gray-900\/75 {
    --tw-gradient-via: rgb(17 24 39 / 0.75);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
}
.to-gray-900\/40 {
    --tw-gradient-to: rgb(17 24 39 / 0.4);
}
.bg-gradient-to-r.from-gray-900\/90.via-gray-900\/75.to-gray-900\/40 {
    background-image: linear-gradient(to right, rgb(17 24 39 / 0.9), rgb(17 24 39 / 0.75), rgb(17 24 39 / 0.4));
}

/* ─── Hero bottom fade ───────────────────────────────────────────────────── */
/* Nakładka gradientowa na dole hero — stopniowo przykrywa zdjęcie kolorem tła
   strony, eliminując twarde odcięcie sekcji. Używa ::after na sekcji hero. */
[data-bee-hero]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(247,244,237,0) 0%, #f7f4ed 100%);
    pointer-events: none;
    z-index: 1;
}
:root[data-theme="dark"] [data-bee-hero]::after {
    background: linear-gradient(to bottom, rgba(14,20,16,0) 0%, #0e1410 100%);
}
.hero-text-layer {
    position: relative;
    z-index: 2;
}

/* ─── Klasy krytyczne — zapobiegają FOUC z Tailwind CDN ─────────────────── */
/* Tailwind CDN przetwarza klasy przez MutationObserver (asynchronicznie po
   pierwszym renderze), więc te klasy muszą być w custom.css, żeby nie było
   widocznych skoków podczas ładowania strony. */
[data-bee-hero] {
    min-height: 58vh;
    background-color: #111827; /* ciemne tło widoczne chwilę przed załadowaniem zdjęcia */
    overflow: hidden;
}
.object-cover  { object-fit: cover; }
.object-center { object-position: center; }
.object-top    { object-position: top; }
.\-mt-16       { margin-top: -4rem; }

/* ─── Print ─────────────────────────────────────────────────────────────── */
@media print {
    header, footer, #accessibility-bar, #back-to-top, nav { display: none !important; }
    .rod-content { font-size: 11pt; }
}