/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://deine-domain.de
 Description:  Child Theme von Twenty Twenty-Five mit modularer CSS-Struktur
 Author:       Dein Name
 Author URI:   https://deine-domain.de
 Template:     twentytwentyfive
 Version:      1.0.0
*/

/* ================================================================
   CSS Architecture
   ================================================================
   1. Variables - CSS Custom Properties für einfache Anpassungen
   2. Base - HTML-Grundlagen, Typografie, Standard-Elemente
   3. Layout - Grid, Container, Responsive-Utilities
   4. Components - Wiederverwendbare Blöcke (Cards, Buttons, etc.)
   5. Utilities - Kleine Helfer-Klassen (Spacing, Text, etc.)
   6. Custom - Projekt-spezifische Styles
   ================================================================ */

/* 1. Variables - Farben, Abstände, Schriftarten definieren */
@import url('./css/variables.css');

/* 2. Base - Typografie, Links, Formulare */
@import url('./css/base.css');

/* 3. Layout - Grid, Container, Flexbox, Responsive */
@import url('./css/layout.css');

/* 4. Components - Cards, Buttons, Alerts, CTA-Blöcke */
@import url('./css/components.css');

/* 5. Utilities - Spacing, Text, Borders, etc. */
@import url('./css/utilities.css');

/* ================================================================
   6. Custom Project Styles
   ================================================================
   Projekt-spezifische Anpassungen hier einfügen
   ================================================================ */

/* WordPress Gutenberg Block Integration */
.wp-block-image {
  margin: var(--spacing-lg) 0;
}

.wp-block-image img {
  border-radius: var(--radius-md);
}

/* WordPress Post/Page */
.post {
  margin-bottom: var(--spacing-xl);
}

.post-title,
.page-title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-lg);
}

.post-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  margin-bottom: var(--spacing-lg);
}

.post-content,
.page-content {
  line-height: var(--line-height-relaxed);
}

/* Navigation */
.site-navigation {
  display: flex;
  gap: var(--spacing-lg);
}

.site-navigation a {
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.site-navigation a:hover {
  color: var(--color-primary);
}

/* Widget Area */
.sidebar {
  background-color: var(--color-bg-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

.sidebar .widget {
  margin-bottom: var(--spacing-lg);
}

.sidebar .widget:last-child {
  margin-bottom: 0;
}

.sidebar .widget-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-sm);
}

/* Comments */
.comments-area {
  margin-top: var(--spacing-3xl);
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
}

.comment-author {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.comment-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
}

/* Archive/Category Pages */
.archive-title {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-2xl);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-4xl);
}

/* Sticky Header on Scroll */
.site-header.is-sticky {
  box-shadow: var(--shadow-md);
}

/* Skip Link (Barrierefreiheit) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.skip-link:focus {
  top: 0;
  left: 0;
  z-index: 9999;
  padding: var(--spacing-md);
  background-color: var(--color-primary);
  color: white;
}

/* Print Styles */
@media print {
  .no-print,
  .site-header,
  .site-footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
  }
}