/* --- START OF FILE styles.css --- */

/* --- START OF FILE styles.css --- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Adjust as needed to accommodate nav bar height */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #020617; /* slate-950 */
    color: #e2e8f0; /* slate-200 */
    overflow-y: auto; /* Allow scrolling by default for mobile */
}
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind content */
}

/* Mobile-first section styling */
.section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Ensures content starts from the top by default */
    flex-direction: column;
    padding: 6rem 1.5rem 3rem 1.5rem; /* Add padding for nav and space */
}

/* MODIFIED: Remove justify-content from here */
#home.section, #research.section {
    /* The justify-content: center is no longer needed here */
}

/* ADDED: New rule for robust centering */
#home.section > div, #research.section > div {
    margin-top: auto;
    margin-bottom: auto;
}


/* Desktop-specific styles for full-page effect */
@media (min-width: 1024px) {
    body {
        display: grid;
        grid-template-rows: 1fr auto;
        height: 100vh;
        overflow: hidden; /* Disable scrolling on desktop */
    }
    main {
        position: relative;
        overflow: hidden;
    }
    .section {
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: opacity 0.7s ease-in-out, visibility 0.7s;
        opacity: 0;
        visibility: hidden;
        z-index: 10;
        padding: 7rem 1.5rem 0; /* Remove bottom padding from scroll container */
        overflow-y: auto; /* FIX: Allow vertical scrolling within a section if content overflows */
    }
    .section.active {
        opacity: 1;
        visibility: visible;
    }
    #member-detail, #event-detail {
        transform: translateX(100%);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) opacity 0.7s ease-in-out, visibility 0.7s;
        z-index: 20;
    }
    #member-detail.active, #event-detail.active {
         transform: translateX(0);
    }
    /* FIX: Ensure detail views align to the top and are not centered */
    #member-detail.section, #event-detail.section {
        display: block; /* Override flex behavior to allow scrolling from top */
    }
    .section > div {
        padding-bottom: 8rem; /* Add spacing to content to avoid footer overlap */
    }
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* Custom scrollbar for sections on desktop to match the theme */
.section::-webkit-scrollbar {
    width: 8px;
}
.section::-webkit-scrollbar-track {
    background: transparent; /* Make track invisible */
}
.section::-webkit-scrollbar-thumb {
    background-color: rgba(56, 189, 248, 0.3); /* sky-400 with transparency */
    border-radius: 4px;
}
.section::-webkit-scrollbar-thumb:hover {
    background-color: rgba(56, 189, 248, 0.5); /* A bit more visible on hover */
}

/* Custom scrollbar for Firefox */
@supports (scrollbar-color: auto) {
    .section {
        scrollbar-width: thin;
        scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
    }
}

.nav-link, .news-link {
    transition: color 0.3s, border-bottom-color 0.3s;
}

/* --- Footer Styles --- */
footer {
    position: relative;
    z-index: 30; /* Ensure it's above sections but below active detail views */
    background-color: rgba(2, 6, 23, 0.5); /* slate-950/50, matching navbar */
    backdrop-filter: blur(4px); /* matching navbar */
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(56, 189, 248, 0.2); /* sky-400/20 */
}

/* --- Accessibility Modal --- */
#accessibility-modal {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#accessibility-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

/* --- Pulsating News Animation --- */
@keyframes pulse-text-glow {
  0%, 100% {
    /* A subtle glow to start and end with */
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  }
  50% {
    /* A brighter glow in the middle of the animation */
    text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 42px rgba(56, 189, 248, 1);
  }
}
.pulsate-news {
  animation: pulse-text-glow 2.5s infinite ease-in-out;
}

.lang-btn.active {
    color: #38bdf8; /* sky-400 */
    font-weight: 700;
}
.content-card {
    background: rgba(15, 23, 42, 0.5); /* slate-900/50 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(56, 189, 248, 0.2); /* sky-400/20 */
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
 .team-card {
    background: rgba(15, 23, 42, 0.6); /* slate-900/60 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
 }
 .team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.4);
 }
 /* --- Button Resets --- */
 #event-photo-button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 0.5rem; /* Match image rounding */
 }
 /* --- Image Modal Styles --- */
 #event-photo {
     border-radius: 0.5rem;
     cursor: zoom-in;
     transition: 0.3s;
 }
 #event-photo:hover {opacity: 0.7;}

 .image-modal {
     display: none;
     position: fixed;
     z-index: 1001; /* Ensure it's above the navbar */
     padding-top: 60px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0,0,0,0.9);
 }
 .modal-content {
     margin: auto;
     display: block;
     width: auto;
     height: auto;
     max-width: 80vw;
     max-height: 80vh;
 }
 .close-modal {
     position: absolute;
     top: 15px;
     right: 35px;
     color: #f1f1f1;
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
     background: transparent;
     border: none;
     padding: 0;
 }
/* Focus indicator for all interactive elements */
a:focus, button:focus, [tabindex]:not(main):focus, input:focus, .team-card:focus, .nav-link:focus {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #0ea5e9;
    /* z-index: 100; This was causing layout issues when the main element is focused. */
}
.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    padding: 1rem 2rem;
    background: #0ea5e9;
    color: #fff;
    font-size: 1.1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 10000;
    outline: 2px solid #fff;
}
.contact-info p, .contact-info a {
    overflow-wrap: break-word; /* Prevents overflow of long text like emails */
}

/* 
  Accessibility Fix: WCAG 1.4.1 Link Identification
  Underline links within text content to ensure they are identifiable
  without relying on color alone.
*/
#accessibility-modal p a, #accessibility-modal li a,
#member-cv p a, #member-cv li a,
#event-desc p a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 
  Accessibility Fix: WCAG AA Contrast
  Overrides default Tailwind slate-300 and slate-400 to a lighter shade (#cbd5e1) 
  to ensure a minimum 4.5:1 contrast ratio against the dark background (#020617).
*/
.text-slate-300, .text-slate-400 {
    color: #cbd5e1;
}

/* Responsive columns for member CV */
@media (min-width: 768px) { /* md breakpoint */
    #member-cv {
        column-count: 2;
        column-gap: 2.5rem;
    }
}

#scroll-to-top-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) { /* md breakpoint */
    .contact-info > div {
        text-align: center;
    }
    .contact-info h3 {
        justify-content: center;
    }
    .contact-info p, .contact-info a {
        margin-left: 0;
        justify-content: center;
    }
    .contact-info a {
        flex-direction: column;
        gap: 0.5rem; /* 8px */
    }
    .contact-info h3 > div:first-child {
        display: none;
    }
} 

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .section, #member-detail, #event-detail, .nav-link, .news-link, #scroll-to-top-btn, .team-card {
    transition: none;
  }

  .pulsate-news {
    animation: none;
  }
} 

@media (max-width: 1023px) {
  #member-detail.section:not(.active),
  #event-detail.section:not(.active) {
    display: none !important;
  }

  /* --- Sticky Footer for Mobile --- */
  body {
      /* Add space at the bottom for the fixed footer to not cover content */
      padding-bottom: 5rem; 
  }

  footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
  }
} 

/* --- Wspólne definiowanie koloru tła i tekstu --- */
.bg-main {
    background-color: #020617; /* slate-950 */
    color: #e2e8f0;           /* slate-200 */
}
.bg-card {
    background-color: rgba(15, 23, 42, 0.5); /* slate-900/50 */
    color: #cbd5e1;                          /* slate-300 */
}
.bg-footer {
    background-color: rgba(2, 6, 23, 0.5);   /* slate-950/50 */
    color: #cbd5e1;                          /* slate-300 */
}
.bg-button-primary {
    background-color: #0ea5e9; /* sky-600 */
    color: #fff;
}
.bg-button-secondary {
    background-color: #1e293b; /* slate-800 */
    color: #cbd5e1;
}

/* --- Papa Easter Egg Theme --- */
body.papa-mode {
    background-color: #FFFF00 !important; /* Dark warm yellow, replacing slate-950 */
}
.papa-mode .text-sky-400,
.papa-mode .lang-btn.active,
.papa-mode .contact-info .rounded-full svg {
    color: #facc15 !important; /* yellow-400 */
}
.papa-mode .text-sky-300 {
    color: #fde047 !important; /* yellow-300 */
}
.papa-mode .hover\:text-sky-400:hover { color: #facc15 !important; }
.papa-mode .hover\:text-sky-300:hover { color: #fde047 !important; }
.papa-mode .hover\:text-sky-200:hover { color: #fef08a !important; }

.papa-mode .bg-button-primary,
.papa-mode #scroll-to-top-btn {
    background-color: #eab308 !important; /* yellow-500 */
    color: #020617 !important;
}
.papa-mode .bg-button-primary:hover,
.papa-mode #scroll-to-top-btn:hover {
    background-color: #facc15 !important; /* yellow-400 */
}
.papa-mode a:focus, .papa-mode button:focus, .papa-mode [tabindex]:not(main):focus, .papa-mode input:focus, .papa-mode .team-card:focus, .papa-mode .nav-link:focus {
    outline-color: #facc15 !important;
    box-shadow: 0 0 0 2px #eab308 !important;
}
.papa-mode footer,
.papa-mode nav,
.papa-mode #cookie-consent-banner,
.papa-mode #accessibility-modal > div {
    border-color: rgba(250, 204, 21, 0.3) !important;
}
.papa-mode .content-card,
.papa-mode .team-card {
    border-color: rgba(250, 204, 21, 0.2) !important;
}
.papa-mode .team-card:hover {
    border-color: rgba(250, 204, 21, 0.4) !important;
    box-shadow: 0 8px 40px rgba(250, 204, 21, 0.1) !important;
}
.papa-mode .hover\:border-sky-400:hover {
    border-color: #facc15 !important;
}
.papa-mode .border-sky-500\/50 {
    border-color: rgba(234, 179, 8, 0.5) !important;
}
.papa-mode .contact-info .rounded-full {
    background-color: rgba(250, 204, 21, 0.1) !important;
}

.papa-mode .section::-webkit-scrollbar-thumb { background-color: rgba(250, 204, 21, 0.4); }
.papa-mode .section::-webkit-scrollbar-thumb:hover { background-color: rgba(250, 204, 21, 0.6); }
@supports (scrollbar-color: auto) {
    .papa-mode .section { scrollbar-color: rgba(250, 204, 21, 0.4) transparent; }
}
@keyframes pulse-text-glow-papa {
  0%, 100% { text-shadow: 0 0 10px rgba(250, 204, 21, 0.7); }
  50% { text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 42px rgba(250, 204, 21, 1); }
}
.papa-mode .pulsate-news {
  animation-name: pulse-text-glow-papa !important;
}
.papa-mode #home a.nav-link {
    box-shadow: 0 4px 14px 0 rgba(234, 179, 8, 0.39) !important;
}
.papa-mode #event-desc .text-yellow-400 {
    color: #fbbf24 !important; /* amber-400 */
}