/* ============================================================
   PARAFIA — MAIN.CSS (v2 — CINEMATIC SACRED)
   Paleta: brąz / złoto / bordo  |  Efekty: glass, shimmer, reveal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* === PŁYNNE PRZEJŚCIA MIĘDZY STRONAMI (View Transitions API) === */
@view-transition { navigation: auto; }

/* Tylko środkowa treść animuje się — header, sidebary, footer zostają w miejscu */
.header              { view-transition-name: site-header; }
.sidebar-menu        { view-transition-name: site-sidebar-menu; }
.sidebar-info        { view-transition-name: site-sidebar-info; }
.sidebar-mobile-only { view-transition-name: site-sidebar-mobile; }
.sidebar-image-left  { view-transition-name: site-sidebar-img-left; }
.sidebar-image-right { view-transition-name: site-sidebar-img-right; }
.footer              { view-transition-name: site-footer; }
.content-main        { view-transition-name: site-content-main; }

/* Domyślna zawartość strony (root) — brak animacji, bo wszystkie kluczowe bloki są nazwane */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

/* TYLKO środkowy content fade-out / fade-in z przesunięciem */
::view-transition-old(site-content-main),
::view-transition-new(site-content-main) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    animation-fill-mode: both;
}
::view-transition-old(site-content-main) { animation-name: pageFadeOut; }
::view-transition-new(site-content-main) { animation-name: pageFadeIn; }

/* Pozostałe nazwane bloki — krótki subtelny crossfade (morph) */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-sidebar-menu),
::view-transition-new(site-sidebar-menu),
::view-transition-old(site-sidebar-info),
::view-transition-new(site-sidebar-info),
::view-transition-old(site-sidebar-mobile),
::view-transition-new(site-sidebar-mobile),
::view-transition-old(site-sidebar-img-left),
::view-transition-new(site-sidebar-img-left),
::view-transition-old(site-sidebar-img-right),
::view-transition-new(site-sidebar-img-right),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation-duration: 200ms;
    animation-timing-function: ease-in-out;
}

@keyframes pageFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(site-content-main),
    ::view-transition-new(site-content-main),
    ::view-transition-old(site-header),
    ::view-transition-new(site-header),
    ::view-transition-old(site-sidebar-menu),
    ::view-transition-new(site-sidebar-menu),
    ::view-transition-old(site-sidebar-info),
    ::view-transition-new(site-sidebar-info),
    ::view-transition-old(site-sidebar-mobile),
    ::view-transition-new(site-sidebar-mobile),
    ::view-transition-old(site-sidebar-img-left),
    ::view-transition-new(site-sidebar-img-left),
    ::view-transition-old(site-sidebar-img-right),
    ::view-transition-new(site-sidebar-img-right),
    ::view-transition-old(site-footer),
    ::view-transition-new(site-footer) { animation: none !important; }
}

/* === ZMIENNE === */
:root {
    /* Kolory bazowe */
    --c-bg:            #f5ecd9;
    --c-bg-soft:       #fdf9f1;
    --c-card:          #ffffff;
    --c-text:          #2c2418;
    --c-text-muted:    #6b6256;
    --c-border:        #e8ddc8;
    --c-border-soft:   #f0e8d6;

    /* Paleta maryjna — pogłębiona */
    --c-primary:       #6b3a2a;
    --c-primary-dark:  #3d1f14;
    --c-primary-light: #8b5438;
    --c-gold:          #b8860b;
    --c-gold-light:    #d4a017;
    --c-gold-bright:   #f4cc51;
    --c-gold-pale:     #e8c770;
    --c-burgundy:      #8b1a1a;
    --c-burgundy-dark: #5a1818;
    --c-cream:         #f5e6c8;
    --c-cream-dark:    #ead9b5;

    /* Glass */
    --glass-bg:        rgba(253, 249, 241, 0.68);
    --glass-bg-strong: rgba(253, 249, 241, 0.82);
    --glass-border:    rgba(232, 221, 200, 0.65);
    --glass-blur:      14px;

    /* Fonty */
    --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --font-serif:   'Lora', Georgia, serif;
    --font-sans:    'Inter', 'Segoe UI', Tahoma, sans-serif;

    /* Promienie */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;

    /* Cienie (głębsze, warstwowe) */
    --sh-sm:  0 2px 6px rgba(60, 40, 20, 0.08), 0 1px 2px rgba(60, 40, 20, 0.04);
    --sh-md:  0 6px 20px rgba(60, 40, 20, 0.10), 0 2px 6px rgba(60, 40, 20, 0.06);
    --sh-lg:  0 14px 40px rgba(60, 40, 20, 0.16), 0 4px 10px rgba(60, 40, 20, 0.08);
    --sh-xl:  0 26px 60px rgba(60, 40, 20, 0.22), 0 8px 18px rgba(60, 40, 20, 0.12);
    --sh-gold: 0 8px 24px rgba(184, 134, 11, 0.35);
    --sh-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* Ruch */
    --t-fast:  0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --t-base:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:  0.55s cubic-bezier(0.4, 0, 0.2, 1);
    --t-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-serif);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--c-text);
    background: var(--c-bg);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(184, 134, 11, 0.06) 0%, transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(139, 26, 26, 0.05) 0%, transparent 40%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Delikatne, unoszące się cząsteczki w tle (CSS only) */
body::before {
    content: '';
    position: fixed;
    inset: -50px;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(212, 160, 23, 0.35) 0, rgba(212, 160, 23, 0) 1.4px),
        radial-gradient(circle at 78% 35%, rgba(184, 134, 11, 0.30) 0, rgba(184, 134, 11, 0) 1.2px),
        radial-gradient(circle at 40% 70%, rgba(244, 204, 81, 0.28) 0, rgba(244, 204, 81, 0) 1.6px),
        radial-gradient(circle at 88% 85%, rgba(139, 26, 26, 0.18) 0, rgba(139, 26, 26, 0) 1.2px);
    background-size: 340px 340px, 420px 420px, 500px 500px, 380px 380px;
    animation: bgDrift 60s linear infinite;
    opacity: 0.55;
}

@keyframes bgDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(-340px, -220px); }
}

a { color: var(--c-primary); transition: color var(--t-fast); }
a:hover { color: var(--c-gold); }

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

/* Focus — dostępność */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* === SCROLL-REVEAL (obserwowany przez JS) === */
.fade-in,
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}
.fade-in.visible,
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger dla elementów w siatkach */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-stagger.visible > *         { opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; }

/* Ripple effect (generowany z JS) */
.ripple {
    position: absolute;
    border-radius: 50%;
    width: 10px; height: 10px;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.45);
    animation: rippleExpand 0.7s ease-out forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes rippleExpand {
    to { transform: translate(-50%, -50%) scale(50); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in, .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
    body::before { display: none; }
}

/* ============================================================
   HEADER — animowany, z warstwami
   ============================================================ */
.header {
    position: relative;
    background:
        url('../uploads/header-background.png') center center / cover no-repeat,
        linear-gradient(135deg, #3a5e82 0%, #4a7ca8 35%, #6b9bc4 65%, #4a7ca8 100%);
    background-size: cover, 300% 300%;
    color: white;
    padding: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    /* overflow: visible + clip-path: obcina góra/boki (promienie), zostawia dół dla dropdownów */
    overflow: visible;
    clip-path: inset(0 0 -9999px 0);
    z-index: 50;
    isolation: isolate;
    animation: headerGradient 28s ease-in-out infinite;
}

/* Promienie słoneczne z góry — god rays */
.header::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -25%;
    bottom: 0;
    width: 200%;
    transform: translateX(-50%);
    background:
        /* miękki rdzeń słońca na górze */
        radial-gradient(ellipse 35% 18% at 50% 20%,
            rgba(255, 235, 170, 0.55) 0%,
            rgba(255, 220, 130, 0.25) 35%,
            transparent 70%),
        /* promienie — conic z wąskimi wycinkami */
        conic-gradient(
            from 115deg at 50% 20%,
            transparent 0deg, transparent 3deg,
            rgba(255, 225, 150, 0.26) 4deg, rgba(255, 225, 150, 0.26) 5deg,
            transparent 6deg, transparent 11deg,
            rgba(255, 225, 150, 0.18) 12deg, rgba(255, 225, 150, 0.18) 14deg,
            transparent 15deg, transparent 22deg,
            rgba(255, 225, 150, 0.14) 23deg, rgba(255, 225, 150, 0.14) 24deg,
            transparent 25deg, transparent 33deg,
            rgba(255, 225, 150, 0.30) 34deg, rgba(255, 225, 150, 0.30) 37deg,
            transparent 38deg, transparent 46deg,
            rgba(255, 225, 150, 0.18) 47deg, rgba(255, 225, 150, 0.18) 48deg,
            transparent 49deg, transparent 56deg,
            rgba(255, 225, 150, 0.24) 57deg, rgba(255, 225, 150, 0.24) 60deg,
            transparent 61deg, transparent 69deg,
            rgba(255, 225, 150, 0.15) 70deg, rgba(255, 225, 150, 0.15) 71deg,
            transparent 72deg, transparent 81deg,
            rgba(255, 225, 150, 0.28) 82deg, rgba(255, 225, 150, 0.28) 85deg,
            transparent 86deg, transparent 94deg,
            rgba(255, 225, 150, 0.20) 95deg, rgba(255, 225, 150, 0.20) 97deg,
            transparent 98deg, transparent 106deg,
            rgba(255, 225, 150, 0.16) 107deg, rgba(255, 225, 150, 0.16) 108deg,
            transparent 109deg, transparent 117deg,
            rgba(255, 225, 150, 0.26) 118deg, rgba(255, 225, 150, 0.26) 121deg,
            transparent 122deg, transparent 130deg,
            rgba(255, 225, 150, 0.17) 131deg, rgba(255, 225, 150, 0.17) 132deg,
            transparent 133deg, transparent 140deg
        );
    -webkit-mask: radial-gradient(ellipse 70% 85% at 50% 20%, black 0%, rgba(0,0,0,0.9) 40%, transparent 80%);
            mask: radial-gradient(ellipse 70% 85% at 50% 20%, black 0%, rgba(0,0,0,0.9) 40%, transparent 80%);
    mix-blend-mode: screen;
    filter: blur(1px);
    z-index: 1;
    pointer-events: none;
    animation: raysShine 9s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

@keyframes raysShine {
    0%   { opacity: 0.55; transform: translateX(-50%) rotate(-1.2deg); filter: blur(1px); }
    50%  { opacity: 0.95; transform: translateX(-50%) rotate(0.8deg);  filter: blur(0.5px); }
    100% { opacity: 0.65; transform: translateX(-50%) rotate(-0.4deg); filter: blur(1.2px); }
}

/* Chmury dryfujące po niebie — dwie warstwy z parallaksą */
.header-clouds {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.header-clouds::before,
.header-clouds::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 50% 100%;
    will-change: transform;
}

/* Warstwa 1 — większe, jaśniejsze chmury wyżej */
.header-clouds::before {
    background-image:
        radial-gradient(ellipse 160px 40px at 8%  22%, rgba(255,255,255,0.55), rgba(255,255,255,0) 65%),
        radial-gradient(ellipse 220px 55px at 28% 38%, rgba(255,255,255,0.48), rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 140px 38px at 46% 18%, rgba(255,255,255,0.52), rgba(255,255,255,0) 65%),
        radial-gradient(ellipse 260px 62px at 68% 42%, rgba(255,255,255,0.42), rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 180px 45px at 90% 26%, rgba(255,255,255,0.5),  rgba(255,255,255,0) 65%);
    animation: cloudDriftA 120s linear infinite;
}

/* Warstwa 2 — mniejsze, szybsze chmury niżej, w przeciwnym kierunku */
.header-clouds::after {
    background-image:
        radial-gradient(ellipse 100px 26px at 15% 55%, rgba(255,255,255,0.4),  rgba(255,255,255,0) 65%),
        radial-gradient(ellipse 150px 36px at 38% 68%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 180px 42px at 62% 50%, rgba(255,255,255,0.42), rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 120px 30px at 84% 62%, rgba(255,255,255,0.38), rgba(255,255,255,0) 65%);
    animation: cloudDriftB 85s linear infinite;
    opacity: 0.75;
}

@keyframes cloudDriftA {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes cloudDriftB {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Złota linia na dole headera — shimmer */
.header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--c-gold) 20%,
        var(--c-gold-bright) 45%,
        var(--c-gold-bright) 55%,
        var(--c-gold) 80%,
        transparent 100%);
    background-size: 200% 100%;
    animation: goldShimmer 5s linear infinite;
    z-index: 2;
}

@keyframes headerGradient {
    0%, 100% { background-position: center, 0% 50%; }
    50%      { background-position: center, 100% 50%; }
}
@keyframes goldShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.header-content {
    width: 100%;
    margin: 0 auto;
    padding: 28px 20px 24px;
    text-align: center;
    position: relative;
    z-index: 3;
}

/* Zdjęcia w rogach */
.header-corner {
    position: absolute;
    width: 280px;
    height: 260px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    animation: cornerFloat 8s ease-in-out infinite;
}
.header-corner-left  { left: 0; top: 0; }
.header-corner-right { right: 0; top: 0; animation-delay: 4s; }
.header-corner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@keyframes cornerFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Admin link */
.admin-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    opacity: 0.7;
    transition: all var(--t-base);
    z-index: 100;
    background: rgba(0, 0, 0, 0.38);
    padding: 9px 12px;
    border-radius: 50%;
    line-height: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.admin-icon:hover {
    opacity: 1;
    color: var(--c-gold-bright);
    transform: scale(1.12) rotate(-6deg);
    background: rgba(139, 26, 26, 0.7);
    border-color: var(--c-gold-light);
}

/* Gwiazdki */
.header-stars {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 1.15rem;
    color: var(--c-gold-bright);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.header-stars span {
    animation: sparkle 2.8s ease-in-out infinite;
    display: inline-block;
}
.header-stars span:nth-child(2) { animation-delay: 0.5s; }
.header-stars span:nth-child(3) { animation-delay: 1s; }

@keyframes sparkle {
    0%, 100% { opacity: 1;    transform: scale(1) rotate(0deg); text-shadow: 0 0 8px rgba(244, 204, 81, 0.6); }
    50%      { opacity: 0.5;  transform: scale(1.2) rotate(180deg); text-shadow: 0 0 18px rgba(244, 204, 81, 0.9); }
}

/* Tytuł — pergamin z subtelnym refleksem */
.header h1 {
    font-family: var(--font-display);
    font-size: 2.9rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0.6px;
    color: var(--c-primary);
    text-shadow: 0 1px 2px rgba(120, 90, 40, 0.25);
    margin: 0 auto 16px;
    padding: 16px 36px;
    max-width: 900px;
    background: linear-gradient(180deg, #faf1d8 0%, #ead9b5 100%);
    border: 1px solid var(--c-cream-dark);
    border-radius: var(--r-md);
    box-shadow:
        0 8px 30px rgba(120, 90, 40, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(120, 90, 40, 0.15);
    position: relative;
    z-index: 10;
    overflow: hidden;
    animation: titleEnter 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Przesuwający się refleks światła na tytule */
.header h1::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 70%);
    animation: titleShine 7s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes titleEnter {
    from { opacity: 0; transform: translateY(-18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes titleShine {
    0%, 100% { left: -100%; }
    25%      { left: 130%; }
    50%      { left: 130%; }
}

/* Okrągły krzyż — pulsujący */
.header-cross-circle {
    width: 76px;
    height: 76px;
    margin: 18px auto 10px;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fbf3dc 75%, #e8d5a8 100%);
    border: 3px solid var(--c-gold-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.85),
        0 0 0 0 rgba(244, 204, 81, 0.6);
    transition: transform var(--t-slow);
    animation: crossPulse 3.5s ease-in-out infinite;
}
.header-cross-circle:hover {
    transform: rotate(8deg) scale(1.08);
    animation-play-state: paused;
}
.header-cross-circle .cross-symbol {
    font-size: 2rem;
    color: var(--c-gold);
    text-shadow: 0 1px 2px rgba(120, 90, 40, 0.3);
}

@keyframes crossPulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 0 0 rgba(244, 204, 81, 0.6); }
    50%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 0 14px rgba(244, 204, 81, 0); }
}

/* Adres */
.header-address {
    margin: 14px 0 18px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--c-text);
}
.header-address p { margin: 3px 0; }

/* ============================================================
   NAVIGATION — ripple, glow, smooth
   ============================================================ */
.nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding: 0 10px;
}

.nav a {
    color: white;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 24px;
    background: linear-gradient(135deg, #9a6a08 0%, #c2900f 50%, #a67308 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    border-radius: var(--r-sm);
    border: 1px solid rgba(139, 105, 20, 0.6);
    box-shadow:
        0 4px 12px rgba(60, 40, 20, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition:
        transform var(--t-base),
        box-shadow var(--t-base),
        background-position 0.6s ease,
        color var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nav a:hover {
    background-position: 100% 100%;
    transform: translateY(-3px);
    box-shadow:
        0 10px 24px rgba(184, 134, 11, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #fff8e1;
}

.nav a.active {
    background: linear-gradient(135deg, var(--c-burgundy-dark) 0%, var(--c-burgundy) 50%, #a02525 100%);
    background-size: 200% 200%;
    border-color: var(--c-burgundy-dark);
    box-shadow:
        0 6px 16px rgba(139, 26, 26, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.nav a.active::before {
    content: '';
    position: absolute;
    left: 10%; right: 10%;
    bottom: 4px;
    height: 2px;
    background: var(--c-gold-bright);
    border-radius: 2px;
    box-shadow: 0 0 8px var(--c-gold-bright);
}

/* Dropdown */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown > a { cursor: pointer; }

.nav-dropdown-arrow {
    font-size: 0.6rem;
    margin-left: 3px;
    transition: transform var(--t-base);
}
.nav-dropdown:hover .nav-dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(90, 24, 24, 0.96) 0%, rgba(107, 32, 32, 0.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px rgba(60, 20, 20, 0.55);
    padding: 8px 0;
    z-index: 1000;
    animation: navSlideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: visible;
}

/* Niewidzialny mostek hover między przyciskiem a podmenu */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-dropdown:hover .nav-dropdown-menu { display: block; }

.nav-dropdown-menu a {
    display: block;
    padding: 11px 24px !important;
    color: var(--c-cream) !important;
    font-family: var(--font-serif) !important;
    font-size: 0.92rem !important;
    font-weight: 400 !important;
    text-decoration: none;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all var(--t-fast) !important;
    text-align: center;
    white-space: normal;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
}
.nav-dropdown-menu a:last-child { border-bottom: none !important; }

.nav-dropdown-menu a:hover {
    background: linear-gradient(90deg, rgba(244, 204, 81, 0.18), transparent) !important;
    color: var(--c-gold-bright) !important;
    padding-left: 32px !important;
    transform: none !important;
}

/* Przycisk Menu (mobile) */
.nav-toggle {
    display: none;
    background: linear-gradient(135deg, var(--c-burgundy-dark) 0%, var(--c-burgundy) 100%);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: var(--r-md);
    padding: 14px 30px;
    cursor: pointer;
    margin: 0 auto 12px;
    box-shadow: 0 6px 20px rgba(90, 24, 24, 0.45);
    gap: 10px;
    z-index: 20;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: white;
    transition: all var(--t-base);
    user-select: none;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.nav-toggle:hover {
    background: linear-gradient(135deg, #6b1a1a 0%, #9a3535 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(90, 24, 24, 0.55);
}
.nav-toggle-arrow {
    font-size: 0.75rem;
    color: var(--c-gold-bright);
    transition: transform var(--t-base);
}

/* ============================================================
   LAYOUT — glass sidebars, perspective container
   ============================================================ */
.main-container {
    display: flex;
    max-width: 100%;
    margin: 0;
    gap: 24px;
    padding: 34px 22px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.sidebar-menu,
.sidebar-info {
    width: 290px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    padding: 22px;
    box-shadow: var(--sh-md);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    align-self: stretch;
    transition: transform var(--t-slow), box-shadow var(--t-slow);
}

.sidebar-menu:hover,
.sidebar-info:hover {
    box-shadow: var(--sh-lg);
}

.sidebar-image,
.sidebar-image-left,
.sidebar-image-right,
.sidebar-image img,
.sidebar-image-right img { display: none; }

.sidebar-menu h3 {
    margin: 0 0 16px 0;
    color: var(--c-primary);
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--c-primary);
    padding-bottom: 10px;
    text-align: center;
    position: relative;
}
.sidebar-menu h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 40%;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--c-gold-bright), transparent);
    background-size: 200% 100%;
    animation: goldShimmer 4s linear infinite;
}

.sidebar-info h3 {
    color: var(--c-gold);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    font-size: 1.1rem;
    border-bottom: 2px solid var(--c-gold);
    padding-bottom: 8px;
}

/* Główna treść */
.content-main {
    flex: 1;
    background: var(--c-card);
    padding: 40px;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    min-height: calc(100vh - 240px);
    border: 1px solid var(--c-border-soft);
    position: relative;
    overflow: hidden;
}

/* Złoty akcent w rogu content-main */
.content-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--c-gold) 30%,
        var(--c-gold-bright) 50%,
        var(--c-gold) 70%,
        transparent);
    background-size: 200% 100%;
    animation: goldShimmer 6s linear infinite;
}

.content-main h2 {
    color: var(--c-primary);
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.2px;
    line-height: 1.2;
}

.page-description {
    color: var(--c-text-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.02rem;
    margin-bottom: 30px;
    padding: 16px 22px;
    border-left: 3px solid var(--c-primary);
    background: linear-gradient(135deg, #faf6ec 0%, rgba(245, 236, 217, 0.6) 100%);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    line-height: 1.7;
    position: relative;
}

/* Prawy panel - mobilny wariant (desktop ukryty) */
.sidebar-mobile-only { display: none; }

/* ============================================================
   FOOTER — ciemny gradient z pulsującą linią
   ============================================================ */
.footer {
    background: linear-gradient(180deg, #2a241c 0%, #1a140c 60%, #0e0905 100%);
    color: #d4cdbd;
    padding: 48px 20px 34px;
    text-align: center;
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold) 50%, transparent);
    background-size: 200% 100%;
    animation: goldShimmer 8s linear infinite;
}

.footer-content { max-width: 820px; margin: 0 auto; position: relative; }

.footer-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: goldShimmer 5s linear infinite;
    margin-bottom: 30px;
    opacity: 0.9;
}

.footer-logo { margin-bottom: 20px; }

.footer-symbol {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--c-gold);
    font-weight: 700;
    letter-spacing: 14px;
    text-shadow: 0 0 18px rgba(184, 134, 11, 0.45);
    padding-left: 14px;
    animation: symbolGlow 4s ease-in-out infinite;
}

@keyframes symbolGlow {
    0%, 100% { text-shadow: 0 0 18px rgba(184, 134, 11, 0.45); }
    50%      { text-shadow: 0 0 28px rgba(244, 204, 81, 0.75); }
}

.footer-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--c-gold);
    margin-bottom: 10px;
    letter-spacing: 0.8px;
}

.footer-subtitle {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #b8b1a2;
    margin-bottom: 22px;
    font-style: italic;
}

.footer-copyright {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #8c8578;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */

@media (max-width: 1200px) {
    .header-corner { width: 220px; height: 210px; }
    .sidebar-menu, .sidebar-info { width: 250px; }
    .header h1 { font-size: 2.55rem; }
}

@media (max-width: 1024px) {
    .header-corner { display: none; }
    .sidebar-menu, .sidebar-info { width: 220px; position: static; }
    .header h1 { font-size: 2.3rem; padding: 14px 26px; }
    .content-main { padding: 28px; }
    .nav a { padding: 10px 18px; font-size: 0.9rem; }
}

@media (max-width: 768px) {
    .header-content { padding: 22px 14px 18px; }

    .header h1 {
        font-size: 1.85rem;
        max-width: 100%;
        padding: 12px 18px;
        letter-spacing: 0.3px;
    }

    .header-stars { font-size: 1rem; gap: 12px; margin-bottom: 10px; }

    .admin-icon {
        right: 10px;
        top: 10px;
        font-size: 0.95rem;
        padding: 7px 10px;
    }

    .header-cross-circle { width: 62px; height: 62px; margin: 14px auto 8px; }
    .header-cross-circle .cross-symbol { font-size: 1.55rem; }

    /* Mobile nav toggle */
    .nav-toggle { display: flex; width: 90%; }

    .nav {
        display: flex !important;
        flex-direction: column;
        padding: 0;
        gap: 0;
        max-height: 0;
        opacity: 0;
        margin: 0 5%;
        overflow: hidden;
        border: 0 solid rgba(212, 160, 23, 0);
        border-radius: var(--r-md);
        transition:
            max-height 0.45s cubic-bezier(0.25, 0.9, 0.3, 1),
            opacity 0.3s ease,
            padding 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }

    .nav.nav-open {
        max-height: 1200px;
        opacity: 1;
        background: linear-gradient(180deg, rgba(90, 24, 24, 0.96) 0%, rgba(107, 32, 32, 0.96) 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(212, 160, 23, 0.3);
        box-shadow: 0 10px 30px rgba(90, 24, 24, 0.55);
        padding: 8px 0;
    }

    .nav.nav-open a {
        background: none;
        border: none;
        box-shadow: none;
        color: var(--c-cream);
        font-family: var(--font-serif);
        font-size: 0.98rem;
        font-weight: 500;
        padding: 14px 22px;
        margin: 0;
        border-radius: 0;
        border-left: 3px solid transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        text-align: left;
        min-height: 48px;
        transition: all var(--t-fast);
    }
    .nav.nav-open a:last-child { border-bottom: none; }

    .nav.nav-open a:hover {
        background: rgba(255, 255, 255, 0.07);
        border-left-color: var(--c-gold-bright);
        transform: none;
        box-shadow: none;
    }

    .nav.nav-open a.active {
        background: rgba(244, 204, 81, 0.1);
        color: var(--c-gold-bright);
        font-weight: 700;
        border-left-color: var(--c-gold-bright);
    }
    .nav.nav-open a.active::before { display: none; }

    /* Mobile dropdown */
    .nav.nav-open .nav-dropdown {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .nav.nav-open .nav-dropdown > a {
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav.nav-open .nav-dropdown-arrow {
        display: inline;
        font-size: 0.65rem;
        transition: transform var(--t-base);
    }

    .nav.nav-open .nav-dropdown.open .nav-dropdown-arrow {
        transform: rotate(180deg);
    }

    .nav.nav-open .nav-dropdown-menu {
        display: block;
        position: static;
        min-width: auto;
        background: rgba(0, 0, 0, 0.25);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        animation: none;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.25, 0.9, 0.3, 1), opacity 0.25s ease;
    }

    .nav.nav-open .nav-dropdown.open .nav-dropdown-menu {
        max-height: 600px;
        opacity: 1;
    }

    .nav.nav-open .nav-dropdown-menu a {
        padding: 11px 22px 11px 40px !important;
        font-size: 0.88rem !important;
        color: #e0d0b8 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-left: 3px solid transparent !important;
    }

    .nav.nav-open .nav-dropdown-menu a:hover {
        background: rgba(244, 204, 81, 0.1) !important;
        border-left-color: var(--c-gold-bright) !important;
        color: var(--c-gold-bright) !important;
        padding-left: 44px !important;
    }

    /* Layout mobile */
    .main-container {
        flex-direction: column;
        align-items: stretch;
        padding: 20px 12px;
        gap: 14px;
    }

    .content-main {
        width: 100%;
        padding: 24px 18px;
        order: 3;
        border-radius: var(--r-md);
    }

    .content-main h2 { font-size: 1.55rem; }

    .sidebar-menu, .sidebar-info {
        width: 100%;
        box-shadow: var(--sh-sm);
        position: static;
    }

    .sidebar-mobile-only {
        display: block !important;
        width: 100%;
        order: 1;
    }

    .sidebar-menu { order: 4; }

    .sidebar-desktop-only { display: none !important; }

    body:not(.page-home) .sidebar-menu,
    body:not(.page-home) .sidebar-mobile-only { display: none !important; }

    /* Accordion na mobile — tylko widget parafii */
    .sidebar-mobile-only .widget-parafia h3,
    .sidebar-menu .widget-parafia h3 {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 28px;
        margin-bottom: 0;
        transition: margin-bottom 0.3s;
    }
    .sidebar-mobile-only .widget-parafia h3.accordion-open,
    .sidebar-menu .widget-parafia h3.accordion-open {
        margin-bottom: 12px;
    }
    .accordion-arrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
        color: var(--c-primary);
        transition: transform 0.35s;
        pointer-events: none;
    }
    .accordion-arrow.open { transform: translateY(-50%) rotate(180deg); }
    .accordion-body {
        overflow: hidden;
        height: 0;
        opacity: 0;
        transition:
            height 0.4s cubic-bezier(0.25, 0.9, 0.3, 1),
            opacity 0.3s ease;
        will-change: height;
    }
    .accordion-body.open { opacity: 1; }

    .footer { padding: 34px 18px 26px; }
    .footer-title { font-size: 1.2rem; }
    .footer-subtitle { font-size: 0.88rem; }

    /* Mniej animacji na mobile — wydajność */
    body::before { animation-duration: 120s; opacity: 0.35; }
    .header-corner { animation: none; }

    /* Promienie słoneczne — lżejsze na telefonach (bez blur, krótsze) */
    .header::before {
        top: -15%;
        width: 260%;
        filter: none;
        animation-duration: 12s;
    }
}

@media (max-width: 480px) {
    .header h1 { font-size: 1.55rem; letter-spacing: 0; }
    .content-main { padding: 20px 14px; }
    .content-main h2 { font-size: 1.35rem; }
    .page-description { font-size: 0.94rem; padding: 12px 16px; }
}

/* Animacja mobilnego menu */
@keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   WIDGETY — kaskadowe pojawianie przy starcie
   ============================================================ */

/* Sidebary wjeżdżają jako kontener */
.sidebar-menu,
.sidebar-info,
.sidebar-mobile-only {
    opacity: 0;
    transform: translateX(-20px);
    animation: sidebarSlideIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s forwards;
}
.sidebar-info { transform: translateX(20px); animation-delay: 0.45s; }
.sidebar-mobile-only { transform: translateY(-14px); animation-delay: 0.2s; }

@keyframes sidebarSlideIn {
    to { opacity: 1; transform: translate(0, 0); }
}

/* Widgety w środku — każdy po kolei */
.sidebar-menu > *,
.sidebar-info > *,
.sidebar-mobile-only > * {
    opacity: 0;
    transform: translateY(18px);
    animation: widgetFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Lewy sidebar (menu parafia) */
.sidebar-menu > *:nth-child(1) { animation-delay: 0.55s; }
.sidebar-menu > *:nth-child(2) { animation-delay: 0.75s; }
.sidebar-menu > *:nth-child(3) { animation-delay: 0.95s; }
.sidebar-menu > *:nth-child(4) { animation-delay: 1.15s; }

/* Prawy sidebar (wydarzenia + msze) */
.sidebar-info > *:nth-child(1) { animation-delay: 0.75s; }
.sidebar-info > *:nth-child(2) { animation-delay: 1.00s; }
.sidebar-info > *:nth-child(3) { animation-delay: 1.25s; }
.sidebar-info > *:nth-child(4) { animation-delay: 1.50s; }

/* Mobile — widgety na górze */
.sidebar-mobile-only > *:nth-child(1) { animation-delay: 0.5s; }
.sidebar-mobile-only > *:nth-child(2) { animation-delay: 0.75s; }
.sidebar-mobile-only > *:nth-child(3) { animation-delay: 1.0s; }

@keyframes widgetFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Elementy wewnątrz widgeta też wjeżdżają delikatnie — ale subtelniej */
.widget-parafia .parafia-info-item,
.widget-events .event-item,
.widget-mass .mass-widget-item,
.widget-mass .mass-special-item {
    opacity: 0;
    animation: widgetItemFadeIn 0.55s ease-out forwards;
}

.widget-parafia .parafia-info-item:nth-child(1) { animation-delay: 0.9s; }
.widget-parafia .parafia-info-item:nth-child(2) { animation-delay: 1.0s; }
.widget-parafia .parafia-info-item:nth-child(3) { animation-delay: 1.1s; }
.widget-parafia .parafia-info-item:nth-child(4) { animation-delay: 1.2s; }
.widget-parafia .parafia-info-item:nth-child(5) { animation-delay: 1.3s; }

.widget-events .event-item:nth-child(1) { animation-delay: 1.1s; }
.widget-events .event-item:nth-child(2) { animation-delay: 1.2s; }
.widget-events .event-item:nth-child(3) { animation-delay: 1.3s; }
.widget-events .event-item:nth-child(4) { animation-delay: 1.4s; }

.widget-mass .mass-widget-item:nth-child(1) { animation-delay: 1.3s; }
.widget-mass .mass-widget-item:nth-child(2) { animation-delay: 1.4s; }
.widget-mass .mass-widget-item:nth-child(3) { animation-delay: 1.5s; }
.widget-mass .mass-widget-item:nth-child(4) { animation-delay: 1.6s; }
.widget-mass .mass-widget-item:nth-child(5) { animation-delay: 1.7s; }

.widget-mass .mass-special-item:nth-child(1) { animation-delay: 1.5s; }
.widget-mass .mass-special-item:nth-child(2) { animation-delay: 1.6s; }
.widget-mass .mass-special-item:nth-child(3) { animation-delay: 1.7s; }

@keyframes widgetItemFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Na mobile accordion — w środku elementy nie animują się aż otworzą się */
@media (max-width: 768px) {
    .sidebar-mobile-only .widget-parafia .parafia-info-item,
    .sidebar-mobile-only .widget-events .event-item,
    .sidebar-mobile-only .widget-mass .mass-widget-item,
    .sidebar-mobile-only .widget-mass .mass-special-item {
        animation: none;
        opacity: 1;
    }
}

/* Środkowy panel (content-main) — kaskadowe pojawianie jak sidebary */
.content-main {
    animation: contentMainSlideIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

@keyframes contentMainSlideIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.content-main > * {
    animation: contentMainItemFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes contentMainItemFadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.content-main > *:nth-child(1) { animation-delay: 0.55s; }
.content-main > *:nth-child(2) { animation-delay: 0.75s; }
.content-main > *:nth-child(3) { animation-delay: 0.95s; }
.content-main > *:nth-child(4) { animation-delay: 1.15s; }
.content-main > *:nth-child(5) { animation-delay: 1.35s; }
.content-main > *:nth-child(6) { animation-delay: 1.55s; }
.content-main > *:nth-child(n+7) { animation-delay: 1.75s; }

@media (prefers-reduced-motion: reduce) {
    .sidebar-menu, .sidebar-info, .sidebar-mobile-only,
    .sidebar-menu > *, .sidebar-info > *, .sidebar-mobile-only > *,
    .widget-parafia .parafia-info-item,
    .widget-events .event-item,
    .widget-mass .mass-widget-item,
    .widget-mass .mass-special-item,
    .content-main,
    .content-main > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}