/*
Theme Name: Buddy-Projekt Köln
Theme URI: https://buddy-koeln.de
Author: Caring Community Köln
Description: Block-Theme für das Buddy-Projekt Köln. Kraftvolles Buddy-Blau, Mai-Grün als Akzent, Handschrift-Elemente und vordefinierte Gutenberg-Blockvorlagen (Patterns) für Hero, „Buddy finden“, Schritte, FAQ, Mitmachen und Fördern.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buddy-koeln
Tags: full-site-editing, block-patterns, blog, one-column, custom-colors, editor-style, non-profit
*/

/* ---------------------------------------------------------------
   Buddy-Projekt Köln – ergänzende Styles
   Alles Globale (Farben, Typo, Abstände) steckt in theme.json.
   Hier stehen nur Dinge, die Blöcke allein nicht abbilden können.
----------------------------------------------------------------*/

:root {
  --buddy-blue: #11567e;
  --buddy-blue-dark: #0c405e;
  --buddy-green: #86b02d;
  --buddy-green-light: #b7db5e;
}

/* Handschrift-Akzent: <p class="is-style-buddy-script"> */
.is-style-buddy-script {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

/* Grüner Sticker (leicht gekippt) – für Bildunterschriften auf Fotos */
.is-style-buddy-sticker {
  font-family: "Caveat", cursive;
  display: inline-block;
  transform: rotate(-2deg);
  background: var(--buddy-green);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

/* Bild, das in die darüberliegende Sektion hineinragt */
.is-style-buddy-overlap {
  margin-top: -3.5rem;
}
.is-style-buddy-overlap img {
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgb(12 64 94 / 0.25);
}

/* Checkliste „Was dein Buddy tun kann“ */
.buddy-checklist {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 600px) {
  .buddy-checklist { grid-template-columns: 1fr 1fr; }
}
.buddy-checklist li {
  position: relative;
  background: rgb(255 255 255 / 0.1);
  border-radius: 0.75rem;
  padding: 1rem 1rem 1rem 3rem;
  font-weight: 600;
}
.buddy-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0.9rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 999px;
  background: var(--buddy-green);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Nummerierter Schritt-Kreis */
.buddy-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--buddy-blue);
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
}

/* Kontakt-Karte bleibt beim Scrollen stehen (nur Desktop) */
@media (min-width: 782px) {
  .buddy-sticky { position: sticky; top: 6rem; }
}

/* Buttons: sanftes Aufhellen beim Hover */
.wp-block-button__link {
  transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button__link:hover { filter: brightness(1.1); }
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--buddy-green-light);
  color: var(--buddy-green-light);
  filter: none;
}

/* Sticky Header */
.buddy-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Logo im dunklen Header invertieren */
.buddy-logo-invert img { filter: brightness(0) invert(1); }

/* Fokus-Sichtbarkeit (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--buddy-green-light);
  outline-offset: 3px;
}

/* === Kontrast (WCAG-AA): Marken-Grün #86B02D trägt dunkle Schrift ===
   Weiß auf #86B02D erreicht nur 2,5:1; #12212C erreicht 6,5:1. */
.wp-block-button__link.has-gruen-background-color,
.wp-block-button__link.has-gruen-background-color:hover { color: #12212c !important; }
.is-style-buddy-sticker { color: #12212c; }
.buddy-checklist li { background: #fff; color: #12212c; }
.buddy-checklist li::before { color: #12212c; }
.has-gruen-background-color,
.has-gruen-background-color p,
.has-gruen-background-color h1,
.has-gruen-background-color h2,
.has-gruen-background-color h3,
.has-gruen-background-color li,
.has-gruen-background-color a { color: #12212c; }
.has-gruen-background-color a:hover { color: #0c405e; }