/* ==========================================================================
   WirFans e.V. – Global Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & CSS Variables
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #254077;
  --color-primary-dark: #18336a;
  --color-primary-light: #3a5a9f;
  --color-accent: #c8102e;
  --color-accent-dark: #a00d24;
  --color-neutral: #6b7280;
  --color-neutral-dark: #111827;
  --color-neutral-light: #f3f4f6;
  --color-ice: #e0f2fe;

  --font-heading: 'Oxygen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base Typography & Body Setup
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-neutral-dark);
  background-color: #ffffff;
}

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

/* --------------------------------------------------------------------------
   2.1 Navigation Links & Active Indicators
   -------------------------------------------------------------------------- */
.nav-link:not(.bg-accent) {
  position: relative;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.nav-link:not(.bg-accent)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 9999px;
  transition: width 0.25s ease-in-out;
}

.nav-link:not(.bg-accent):hover::after {
  width: 100%;
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after {
  width: 100% !important;
}

/* Header Responsive Heights & Offsets */
.nav-height {
  height: 5rem;
  transition: height 0.3s ease;
}

@media (min-width: 640px) {
  .nav-height {
    height: 6rem;
  }
}

@media (min-width: 768px) {
  .nav-height {
    height: 7rem;
  }
}

.main-nav-offset {
  padding-top: 5rem;
  transition: padding-top 0.3s ease;
}

@media (min-width: 640px) {
  .main-nav-offset {
    padding-top: 6rem;
  }
}

@media (min-width: 768px) {
  .main-nav-offset {
    padding-top: 7rem;
  }
}

.scroll-nav-offset {
  scroll-margin-top: 5rem;
}

@media (min-width: 640px) {
  .scroll-nav-offset {
    scroll-margin-top: 6rem;
  }
}

@media (min-width: 768px) {
  .scroll-nav-offset {
    scroll-margin-top: 7rem;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0e182d;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* --------------------------------------------------------------------------
   3. Animations & Section Transitions
   -------------------------------------------------------------------------- */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. Glassmorphism & UI Effects
   -------------------------------------------------------------------------- */
.glass-dark {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   5. Hero Backgrounds & Overlays
   -------------------------------------------------------------------------- */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/bg_home.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(24, 51, 106, 0.85) 0%, rgba(14, 24, 45, 0.85) 100%);
}

.bg-hero-pattern {
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg, rgba(24, 51, 106, 0.85) 0%, rgba(37, 64, 119, 0.85) 100%), url('../assets/img/bg_home.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-hero-uberuns {
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg, rgba(24, 51, 106, 0.70) 0%, rgba(37, 64, 119, 0.75) 100%), url('../assets/img/bg_header_uberuns.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-hero-fanprojekte {
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg, rgba(24, 51, 106, 0.70) 0%, rgba(37, 64, 119, 0.75) 100%), url('../assets/img/bg_header_fanprojekte.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#vorstand,
.bg-vorstand {
  background-image: url('../assets/img/vorstand/bg_vorstand.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-fanprojekte-grid {
  background-image: url('../assets/img/bg_fanprojekte.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Negative top margin utility for section overlapping */
.-mt-20,
.sm\:-mt-28,
.md\:-mt-36,
.-mt-\[14rem\] {
  margin-top: -14rem;
}

/* --------------------------------------------------------------------------
   6. Accordions & Interactive Controls
   -------------------------------------------------------------------------- */
.accordion-content {
  transition: max-height 0.3s ease-out, padding 0.3s ease;
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
}

.accordion-content.open {
  max-height: 500px;
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   7. Membership Card Selector (Screenshot 1 & 2)
   -------------------------------------------------------------------------- */
.membership-card {
  border-color: #e2e8f0;
  background-color: #f8fafc;
}

.membership-card:hover {
  border-color: #cbd5e1;
  background-color: #f1f5f9;
}

.membership-card.active {
  border-color: var(--color-primary, #254077);
  background-color: rgba(37, 64, 119, 0.05);
  box-shadow: 0 2px 4px rgba(37, 64, 119, 0.08);
}

.membership-card.active .custom-radio {
  border-color: var(--color-primary, #254077);
  background-color: #ffffff;
}

.membership-card.active .radio-dot {
  opacity: 1;
  transform: scale(1);
}

.membership-card:not(.active) .radio-dot {
  opacity: 0;
  transform: scale(0);
}

.radio-dot {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   8. Custom Layout & Padding Overrides (Responsive Form Header Banner)
   -------------------------------------------------------------------------- */
/* Mobile Viewports (< 640px) */
.pt-28 {
  padding-top: 58rem;
}

/* Small Viewports / Mobile Landscape (>= 640px) */
@media (min-width: 640px) {

  .sm\:pt-32,
  .sm\:pt-28 {
    padding-top: 52rem;
  }
}

/* Medium Viewports / Tablets (>= 768px) */
@media (min-width: 768px) {

  .md\:pt-40,
  .md\:pt-32 {
    padding-top: 50rem;
  }

  .md\:min-h-\[640px\] {
    min-height: 640px;
  }
}

/* Large Viewports / Desktops (>= 1024px) */
@media (min-width: 1024px) {

  .lg\:pt-40,
  .lg\:pt-48 {
    padding-top: 40rem;
  }
}

/* Extra Large Viewports / Wide Displays (>= 1280px) */
@media (min-width: 1280px) {

  .xl\:pt-40,
  .xl\:pt-52 {
    padding-top: 36rem;
  }
}