/**
 * Base Styles - Global HTML/Body Configuration
 * 
 * Foundation styles that affect the entire page
 * 
 * @package Abisko Werkstatt
 * @version 1.2.0
 * @changed 2026-03-13
 * 
 * v1.2.0: Sticky Footer via Flexbox auf .wp-site-blocks (#368).
 * v1.1.0: --color-footer-background als klärungsbedürftig dokumentiert.
 *         --gradient-top/bottom bleiben (Platzhalter für #375).
 */

/* ========================================
   SMOOTH SCROLLING
   ======================================== */

html:focus-within {
  scroll-behavior: smooth;
}

/* ========================================
   BODY TYPOGRAPHY
   ======================================== */

body {
  /* Font Configuration */
  font-display: swap;
  font-variant-ligatures: common-ligatures;
  font-synthesis: none !important; /* CRITICAL: Prevents synthetic bold/italic */
  
  /* Font Features */
  -moz-font-feature-settings: "liga", "clig";
  -ms-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
  
  /* Layout */
  background-attachment: scroll;
  position: relative;
  /* min-height auf .wp-site-blocks, nicht auf body (#368) */
}

/* ========================================
   STICKY FOOTER (#368)
   ======================================== */

/**
 * Verhindert dass der Footer auf kurzen Seiten mitten im Bildschirm steht.
 *
 * WordPress Block Themes rendern alles in .wp-site-blocks:
 *   .wp-site-blocks
 *     ├─ header.site-header
 *     ├─ main.wp-block-group
 *     └─ footer.site-footer
 *
 * Flex-Column auf dem Container + flex-grow:1 auf <main>
 * drückt den Footer immer an den unteren Rand.
 */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:not(.site-header):not(.site-footer) {
  flex-grow: 1;
}

/* ========================================
   BACKGROUND GRADIENT
   ======================================== */

/**
 * Page-wide gradient applied via ::before pseudo-element
 * This allows content to overlay the gradient properly
 */

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom, 
    var(--gradient-top) 75%, 
    var(--gradient-bottom)
  );
  z-index: -2;
}

/* ========================================
   FOOTER
   ======================================== */

/**
 * Footer-Hintergrund:
 * --color-footer-background ist vermutlich ein Abisko-Relikt.
 * ColorDots hat die Rolle "footer-bg" die als
 * --wp--preset--color--footer-bg ausgegeben wird.
 * 
 * TODO: Prüfen ob dieser Selektor noch greift oder ob
 * das Template-Part (footer.html) den Wert direkt setzt.
 * Siehe auch plugins.css für weitere Footer-Farben.
 */
footer {
  background-color: var(--wp--preset--color--footer-bg);
}

/**
 * Footer Flex-Layout: Mobile Umkehrung (#406, #14)
 *
 * Desktop: Logo | Adresse | Related Posts — nebeneinander (row, via Block-Markup).
 * Mobile:  Related Posts → Adresse → Logo — übereinander, umgekehrte Reihenfolge.
 *
 * column-reverse kehrt die DOM-Reihenfolge (Logo, Adresse, RPBT) um
 * zu (RPBT, Adresse, Logo) — ohne order-Werte.
 *
 * Selektor: spezifischer als die generierte WP-Klasse
 * (.wp-container-core-group-is-layout-*), daher kein !important nötig.
 */
@media (max-width: 782px) {
  .has-footer-bg-background-color > .wp-block-group.is-layout-flex {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--30, 1rem);
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Remove gradient for printing */
  body::before {
    display: none;
  }
  
  /* Ensure readable text */
  body {
    background: white;
    color: black;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/**
 * Search Results Layout
 * Template: search.html — Titel links sticky, Ergebnisse rechts
 */
.ws-search-title-col {
  position: sticky;
  top: var(--wp--preset--spacing--50);
  align-self: start;
}

/* Titel rechtsbündig, keine Silbentrennung */
.ws-search-title-col .wp-block-query-title {
  text-align: right;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal;
  overflow-wrap: normal;
}

/**
 * Reduced Motion
 * Respects user preference for reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}