/*
 Theme Name:   Äschentool
 Theme URI:    https://aeschentool.de
 Description:  Custom WordPress theme for the Äschentool environmental assessment tool. Child theme of Astra.
 Author:       Devid
 Author URI:   https://devid.net
 Template:     astra
 Version:      1.2.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  aeschentool
*/

/* -------------------------------------------------------------------------
   Farbwelt

   Die Palette stammt aus dem Titelfoto von Benedikt Reisner: das tiefe
   Grün des Wassers als Primärfarbe, der Ocker des Kiesgrunds als Akzent.
   Die beiden Werte liegen in den Astra-Einstellungen als global-color-0
   und global-color-1 und werden hier nur referenziert, damit Redaktion
   und Stylesheet nicht auseinanderlaufen.

   Nebeneffekt: Die vorherige Astra-Standardfarbe #6688cd erreichte auf
   Weiß nur 3.52:1 und verfehlte damit WCAG AA für Fließtext. Das tiefe
   Wassergrün liegt bei 9.72:1.
   ------------------------------------------------------------------------- */

:root {
  --aesche-wasser: var(--ast-global-color-0, #2C4A40);
  --aesche-kies: var(--ast-global-color-1, #897337);
}

/* -------------------------------------------------------------------------
   Abschnittsmarkierung

   Die Fachseiten sind lang (die Gefährdungsursachen umfassen rund 30.000
   Zeichen). Die kurze Ockerlinie markiert den Beginn eines Abschnitts und
   gibt dem Auge beim Überfliegen einen Ankerpunkt. Sie sitzt bewusst nur
   an h2, damit die Hierarchie ablesbar bleibt.
   ------------------------------------------------------------------------- */

.entry-content h2 {
  position: relative;
  padding-bottom: 0.35em;
  margin-top: 2.2em;
}

.entry-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background-color: var(--aesche-kies);
}

/* -------------------------------------------------------------------------
   Lesbarkeit der Fachtexte
   ------------------------------------------------------------------------- */

.entry-content p,
.entry-content li {
  line-height: 1.75;
}

.entry-content li + li {
  margin-top: 0.35em;
}

/* Links im Fließtext sichtbar machen, ohne die Buttons anzufassen */
.entry-content a:not(.wp-block-button__link):not(.ast-button) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.entry-content a:not(.wp-block-button__link):not(.ast-button):hover,
.entry-content a:not(.wp-block-button__link):not(.ast-button):focus-visible {
  color: var(--aesche-kies);
}

/* -------------------------------------------------------------------------
   Bilder im Fließtext

   Abbildungen stehen auf einem Drittel der Textbreite und werden vom Text
   umflossen, abwechselnd links und rechts. Die Ausrichtung steckt im
   jeweiligen Block, die Breite bewusst hier, damit sie an einer Stelle
   gepflegt wird.
   ------------------------------------------------------------------------- */

.entry-content .wp-block-image.alignleft,
.entry-content .wp-block-image.alignright {
  width: 33%;
  max-width: 33%;
  margin-top: 0.4em;
  margin-bottom: 1.4em;
}

.entry-content .wp-block-image.alignleft {
  margin-right: 2rem;
}

.entry-content .wp-block-image.alignright {
  margin-left: 2rem;
}

.entry-content .wp-block-image.alignleft img,
.entry-content .wp-block-image.alignright img {
  width: 100%;
  height: auto;
}

.entry-content .wp-block-image figcaption {
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--ast-global-color-3, #4b4f58);
}

/* Überschriften beginnen immer auf voller Breite, nie neben einem Bild */
.entry-content h2,
.entry-content h3 {
  clear: both;
}

/* Auf schmalen Displays kein Umfluss, sonst wird die Textspalte unlesbar */
@media (max-width: 782px) {
  .entry-content .wp-block-image.alignleft,
  .entry-content .wp-block-image.alignright {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* -------------------------------------------------------------------------
   Tastaturbedienung

   Astra entfernt den Standard-Fokusring an mehreren Stellen. Ohne
   sichtbaren Fokus ist die Seite per Tastatur nicht bedienbar.
   ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--aesche-kies);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Reduzierte Bewegung respektieren
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}