/*
 Theme Name:   Mavka Astra Child
 Theme URI:    https://mavka.berlin
 Description:  Astra Child Theme für Mavka.Berlin.Volunteers – „Gemeinsam Kochen, Gemeinsam Wachsen". Implementiert das Mavka Design System v1.0 mit CPTs Workshop & Bericht, WCAG 2.1 AA, Senior*innen-Optimierung, DE/EN via WPML.
 Author:       Mavka.Berlin
 Author URI:   https://mavka.berlin
 Template:     astra
 Version:      1.0.0
 License:      GPL-2.0-or-later
 Text Domain:  mavka
*/

/* ════════════════════════════════════════════════
   DESIGN TOKENS (from design-tokens.json)
   ════════════════════════════════════════════════ */
:root {
  /* Primary (Green) */
  --m-primary-900: #0E1A0A;
  --m-primary-800: #1A3311;
  --m-primary-700: #2D4A1E;
  --m-primary-600: #3A6125;
  --m-primary-500: #4A7C2E;
  --m-primary-400: #5A9438;
  --m-primary-300: #8ABA68;
  --m-primary-200: #B8D4A0;
  --m-primary-100: #E8F0DC;
  --m-primary-50:  #F2F7EB;

  /* Secondary (Amber) */
  --m-secondary-500: #D4881C;
  --m-secondary-700: #9A6010;
  --m-secondary-100: #FFF3E0;
  --m-secondary-50:  #FFF8ED;

  /* Neutral */
  --m-neutral-900: #1A1A1A;
  --m-neutral-700: #4A4A4A;
  --m-neutral-500: #7A7A7A;
  --m-neutral-300: #C8C8C0;
  --m-neutral-200: #EDE6D3;
  --m-neutral-100: #F5F0E1;
  --m-neutral-50:  #FDFCF9;

  /* Semantic */
  --m-error:      #C0392B;
  --m-error-light:#FDE8E8;
  --m-info:       #1A5A9A;
  --m-info-light: #E0F0FF;

  /* Typography */
  --m-font-display: 'Playfair Display', Georgia, serif;
  --m-font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  /* Spacing */
  --m-space-1: 4px;  --m-space-2: 8px;  --m-space-3: 12px;
  --m-space-4: 16px; --m-space-5: 24px; --m-space-6: 32px;
  --m-space-8: 48px; --m-space-10: 64px;

  /* Radius */
  --m-radius-sm: 4px; --m-radius-md: 8px;
  --m-radius-lg: 12px; --m-radius-full: 100px;

  /* Shadows */
  --m-shadow-sm: 0 1px 3px rgba(45,74,30,.06), 0 4px 12px rgba(45,74,30,.03);
  --m-shadow-md: 0 2px 8px rgba(45,74,30,.08), 0 8px 24px rgba(45,74,30,.04);

  /* Focus */
  --m-focus-ring:   3px solid #D4881C;
  --m-focus-offset: 3px;

  /* Transition */
  --m-transition: 0.2s ease;
}

/* ════════════════════════════════════════════════
   BASE OVERRIDES (Astra)
   ════════════════════════════════════════════════ */
html { font-size: 18px; }

body {
  font-family: var(--m-font-body);
  background-color: var(--m-neutral-100);
  color: var(--m-neutral-900);
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--m-font-display);
  color: var(--m-primary-700);
  line-height: 1.2;
}

/* Focus Ring – global */
:focus-visible {
  outline: var(--m-focus-ring);
  outline-offset: var(--m-focus-offset);
  border-radius: var(--m-radius-sm);
}

/* Skip Link */
.m-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
  padding: var(--m-space-3) var(--m-space-5);
  background: var(--m-primary-700);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--m-radius-md) var(--m-radius-md);
}
.m-skip-link:focus {
  left: var(--m-space-4);
  top: 0;
}

/* Screen reader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════
   BREADCRUMB
   ════════════════════════════════════════════════ */
.m-breadcrumb {
  padding: var(--m-space-4) 0;
  font-size: 16px;
  color: var(--m-neutral-500);
}
.m-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-2);
  padding: 0;
  margin: 0;
}
.m-breadcrumb li { display: flex; align-items: center; gap: var(--m-space-2); }
.m-breadcrumb a {
  color: var(--m-primary-500);
  text-decoration: none;
  transition: color var(--m-transition);
}
.m-breadcrumb a:hover { color: var(--m-primary-700); text-decoration: underline; }
.m-breadcrumb .separator { color: var(--m-neutral-300); }
.m-breadcrumb [aria-current="page"] { color: var(--m-neutral-700); font-weight: 600; }

/* ════════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════════ */
.m-page-header {
  padding: var(--m-space-8) 0 var(--m-space-6);
  max-width: 720px;
}
.m-page-header h1 {
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: var(--m-space-3);
}
.m-page-header .lead {
  font-size: 19px;
  color: var(--m-neutral-700);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════ */
.m-filter-bar {
  background: var(--m-neutral-50);
  border: 1px solid var(--m-primary-200);
  border-radius: var(--m-radius-lg);
  padding: var(--m-space-4) var(--m-space-5);
  margin-bottom: var(--m-space-6);
  box-shadow: var(--m-shadow-sm);
}
.m-filter-bar fieldset {
  border: none; padding: 0; margin: 0;
}
.m-filter-bar legend {
  font-family: var(--m-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--m-primary-700);
  margin-bottom: var(--m-space-3);
}
.m-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-3);
  align-items: flex-end;
}
.m-filter-group { display: flex; flex-direction: column; gap: var(--m-space-1); }
.m-filter-group label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-secondary-700);
}
.m-filter-group select {
  min-height: 48px;
  padding: var(--m-space-3) var(--m-space-4);
  border: 2px solid var(--m-primary-200);
  border-radius: var(--m-radius-md);
  background: #fff;
  font-family: var(--m-font-body);
  font-size: 18px;
  color: var(--m-neutral-900);
  cursor: pointer;
  transition: border-color var(--m-transition);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A4A' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.m-filter-group select:hover { border-color: var(--m-primary-500); }
.m-filter-group select:focus-visible {
  border-color: var(--m-primary-500);
  box-shadow: 0 0 0 3px rgba(74,124,46,.15);
}

.m-filter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-space-4);
  margin-top: var(--m-space-3);
  padding-top: var(--m-space-3);
  border-top: 1px solid var(--m-primary-100);
}
.m-filter-reset {
  font-size: 16px;
  color: var(--m-error);
  text-decoration: underline;
  background: none; border: none;
  cursor: pointer;
  padding: var(--m-space-2);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.m-filter-reset:hover { color: var(--m-primary-700); }
.m-filter-counter {
  font-size: 16px;
  color: var(--m-neutral-500);
  margin-left: auto;
}

/* Active filter chips */
.m-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-space-2);
  margin-top: var(--m-space-3);
}
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-2);
  padding: var(--m-space-2) var(--m-space-3);
  background: var(--m-primary-700);
  color: #fff;
  border-radius: var(--m-radius-full);
  font-size: 14px;
  font-weight: 600;
}
.m-chip-remove {
  background: none; border: none;
  color: #fff; cursor: pointer;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  transition: background var(--m-transition);
}
.m-chip-remove:hover { background: rgba(255,255,255,.2); }

/* ════════════════════════════════════════════════
   EVENT CARD
   ════════════════════════════════════════════════ */
.m-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--m-space-5);
  margin-bottom: var(--m-space-6);
}

.m-event-card {
  background: var(--m-neutral-50);
  border: 1px solid var(--m-primary-200);
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  box-shadow: var(--m-shadow-sm);
  transition: box-shadow var(--m-transition), transform var(--m-transition);
  display: flex;
  flex-direction: column;
}
.m-event-card:hover {
  box-shadow: var(--m-shadow-md);
  transform: translateY(-2px);
}
.m-event-card--cancelled {
  opacity: .65;
  filter: grayscale(.3);
}

.m-event-card__image {
  position: relative;
  height: 160px;
  background: var(--m-primary-100);
  overflow: hidden;
}
.m-event-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.m-event-card__date-badge {
  position: absolute;
  top: var(--m-space-3);
  left: var(--m-space-3);
  background: var(--m-neutral-50);
  padding: var(--m-space-2) var(--m-space-3);
  border-radius: var(--m-radius-md);
  text-align: center;
  box-shadow: var(--m-shadow-sm);
  line-height: 1.1;
}
.m-event-card__date-day {
  display: block;
  font-family: var(--m-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--m-primary-700);
}
.m-event-card__date-month {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-secondary-500);
}

.m-event-card__body {
  padding: var(--m-space-4) var(--m-space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--m-space-2);
}
.m-event-card__title {
  font-family: var(--m-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--m-primary-700);
  margin: 0;
}
.m-event-card__title a {
  color: inherit;
  text-decoration: none;
}
.m-event-card__title a:hover { text-decoration: underline; }

.m-event-card__meta {
  font-size: 16px;
  color: var(--m-neutral-500);
  line-height: 1.55;
}
.m-event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-space-3);
  margin-top: auto;
  padding-top: var(--m-space-3);
}

/* ════════════════════════════════════════════════
   STATUS BADGE
   ════════════════════════════════════════════════ */
.m-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--m-space-1);
  padding: var(--m-space-1) var(--m-space-3);
  border-radius: var(--m-radius-full);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.m-badge--open      { background: var(--m-primary-100); color: var(--m-primary-700); }
.m-badge--few       { background: var(--m-secondary-100); color: var(--m-secondary-700); }
.m-badge--full      { background: var(--m-error-light); color: var(--m-error); }
.m-badge--cancelled { background: var(--m-neutral-200); color: var(--m-neutral-500); }
.m-badge--accessible{ background: var(--m-info-light); color: var(--m-info); }
.m-badge--kids      { background: var(--m-secondary-50); color: var(--m-secondary-700); }
.m-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════ */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-space-2);
  font-family: var(--m-font-body);
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--m-radius-md);
  cursor: pointer;
  transition: all var(--m-transition);
  text-decoration: none;
  line-height: 1.3;
}
.m-btn--lg  { padding: 14px 28px; font-size: 18px; min-height: 52px; }
.m-btn--md  { padding: 12px 24px; font-size: 18px; min-height: 44px; }
.m-btn--sm  { padding: 8px 16px;  font-size: 16px; min-height: 36px; }

.m-btn--primary {
  background: var(--m-primary-700);
  border-color: var(--m-primary-700);
  color: #fff;
}
.m-btn--primary:hover {
  background: var(--m-primary-600);
  border-color: var(--m-primary-600);
}
.m-btn--secondary {
  background: transparent;
  border-color: var(--m-primary-700);
  color: var(--m-primary-700);
}
.m-btn--secondary:hover {
  background: var(--m-primary-50);
}
.m-btn--cta {
  background: var(--m-secondary-500);
  border-color: var(--m-secondary-500);
  color: #fff;
}
.m-btn--cta:hover {
  background: var(--m-secondary-700);
  border-color: var(--m-secondary-700);
}
.m-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--m-primary-500);
}
.m-btn--ghost:hover { background: var(--m-primary-50); }

/* ════════════════════════════════════════════════
   SINGLE WORKSHOP – DETAIL PAGE
   ════════════════════════════════════════════════ */
.m-workshop-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--m-space-6);
  align-items: start;
}
.m-workshop-content { min-width: 0; }

.m-workshop-sidebar {
  position: sticky;
  top: 100px;
  background: var(--m-neutral-50);
  border: 1px solid var(--m-primary-200);
  border-radius: var(--m-radius-lg);
  padding: var(--m-space-5);
  box-shadow: var(--m-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--m-space-4);
}

.m-meta-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--m-space-3);
}
.m-meta-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--m-space-3);
  font-size: 18px;
  line-height: 1.5;
}
.m-meta-list .meta-icon {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  color: var(--m-primary-500);
}

.m-divider-or {
  display: flex;
  align-items: center;
  gap: var(--m-space-3);
  color: var(--m-neutral-500);
  font-size: 16px;
}
.m-divider-or::before,
.m-divider-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--m-primary-200);
}

.m-contact-alt {
  font-size: 18px;
  line-height: 1.7;
}
.m-contact-alt a {
  color: var(--m-primary-500);
  text-decoration: none;
  font-weight: 600;
}
.m-contact-alt a:hover { text-decoration: underline; }

/* Workshop Content Sections */
.m-section { margin-bottom: var(--m-space-8); }
.m-section h2 {
  font-size: 22px;
  margin-bottom: var(--m-space-4);
}
.m-section p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: var(--m-space-4);
}

/* Registration form area */
.m-registration-area {
  background: var(--m-primary-50);
  border: 1px solid var(--m-primary-200);
  border-radius: var(--m-radius-lg);
  padding: var(--m-space-6);
  margin: var(--m-space-8) 0;
}
.m-registration-area h2 {
  margin-bottom: var(--m-space-4);
}

/* ════════════════════════════════════════════════
   SINGLE BERICHT (Report)
   ════════════════════════════════════════════════ */
.m-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--m-space-4);
  margin-bottom: var(--m-space-8);
}
.m-stat-card {
  background: var(--m-neutral-50);
  border: 1px solid var(--m-primary-200);
  border-radius: var(--m-radius-lg);
  padding: var(--m-space-5);
  text-align: center;
}
.m-stat-card__number {
  font-family: var(--m-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--m-primary-700);
  line-height: 1.1;
}
.m-stat-card__label {
  font-size: 16px;
  color: var(--m-neutral-500);
  margin-top: var(--m-space-2);
}

.m-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--m-space-3);
  margin: var(--m-space-5) 0;
}
.m-gallery img {
  width: 100%; height: 200px;
  object-fit: cover;
  border-radius: var(--m-radius-md);
}

.m-funding-note {
  background: var(--m-secondary-50);
  border-left: 3px solid var(--m-secondary-500);
  padding: var(--m-space-4) var(--m-space-5);
  border-radius: 0 var(--m-radius-md) var(--m-radius-md) 0;
  font-size: 16px;
  color: var(--m-neutral-700);
  margin-top: var(--m-space-8);
}

/* ════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════ */
.m-pagination {
  display: flex;
  justify-content: center;
  gap: var(--m-space-2);
  padding: var(--m-space-6) 0;
}
.m-pagination a,
.m-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--m-space-2) var(--m-space-3);
  border: 2px solid var(--m-primary-200);
  border-radius: var(--m-radius-md);
  font-weight: 600;
  text-decoration: none;
  color: var(--m-primary-700);
  transition: all var(--m-transition);
}
.m-pagination a:hover {
  background: var(--m-primary-50);
  border-color: var(--m-primary-500);
}
.m-pagination .current {
  background: var(--m-primary-700);
  border-color: var(--m-primary-700);
  color: #fff;
}

/* ════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════ */
.m-empty-state {
  text-align: center;
  padding: var(--m-space-10) var(--m-space-5);
}
.m-empty-state__title {
  font-size: 22px;
  margin-bottom: var(--m-space-3);
}
.m-empty-state__text {
  font-size: 18px;
  color: var(--m-neutral-500);
  margin-bottom: var(--m-space-5);
}

/* ════════════════════════════════════════════════
   ALERT
   ════════════════════════════════════════════════ */
.m-alert {
  display: flex;
  gap: var(--m-space-3);
  padding: var(--m-space-4) var(--m-space-5);
  border-radius: var(--m-radius-md);
  font-size: 18px;
  line-height: 1.5;
}
.m-alert--success { background: var(--m-primary-100); border: 1px solid var(--m-primary-200); color: var(--m-primary-800); }
.m-alert--error   { background: var(--m-error-light); border: 1px solid #e8b0b0; color: #6e1a1a; }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .m-workshop-layout {
    grid-template-columns: 1fr;
  }
  .m-workshop-sidebar {
    position: static;
  }
  .m-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .m-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .m-card-grid {
    grid-template-columns: 1fr;
  }
  .m-filter-row {
    flex-direction: column;
  }
  .m-filter-group select {
    width: 100%;
  }
  .m-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}