/*
Theme Name: FöVe
Theme URI: https://www.foeve-sgs.de
Description: Child-Theme von Twenty Twenty-Five für den Förderverein der Schönenberg-Grundschule Lehr/Mähringen e. V. Farben und Schriften nach dem Vereinsflyer.
Author: Förderverein Schönenberg-Grundschule Lehr/Mähringen e. V.
Template: twentytwentyfive
Version: 1.0.1
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: foeve
*/

/* ---------- Grundlagen ---------- */
:root {
  --foeve-radius: 6px;
  --foeve-shadow: 0 10px 30px rgba(41, 68, 150, 0.08);
}
body {
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-site-title {
  text-wrap: balance;
}
.foeve-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.foeve-hand {
  font-family: var(--wp--preset--font-family--caveat);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.foeve-lead {
  font-size: 1.15rem;
  color: var(--wp--preset--color--muted);
}

/* ---------- Kopfzeile ---------- */
.foeve-header {
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.foeve-header .wp-block-site-logo img {
  height: 44px;
  width: auto;
}
.foeve-header .wp-block-navigation a {
  font-weight: 600;
}
.foeve-header .wp-block-navigation .current-menu-item > a {
  color: var(--wp--preset--color--accent-1);
}
.foeve-header .wp-block-button__link {
  padding: 0.6em 1.2em;
}

/* ---------- Hero ---------- */
.foeve-hero-art {
  position: relative;
  padding: 6% 4%;
}
.foeve-hero-art::before,
.foeve-hero-art::after {
  content: "";
  position: absolute;
  clip-path: ellipse(50% 46% at 50% 50%);
}
.foeve-hero-art::before {
  inset: 0 -2%;
  background: var(--wp--preset--color--accent-3);
  transform: rotate(-7deg);
}
.foeve-hero-art::after {
  inset: 3% 1%;
  background: var(--wp--preset--color--accent-2);
  transform: rotate(6deg);
  opacity: 0.9;
}
.foeve-hero-art .wp-block-image,
.foeve-hero-art figure {
  position: relative;
  z-index: 1;
  margin: 0;
}
.foeve-hero-art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  clip-path: ellipse(48% 46% at 50% 50%);
}
.foeve-hero-art .foeve-hand {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: -4%;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  transform: rotate(-4deg);
  color: var(--wp--preset--color--accent-1);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

/* ---------- Farbige Kacheln ---------- */
.foeve-tile {
  border-radius: 4px;
  min-height: 200px;
}
.foeve-tile h3,
.foeve-tile p,
.foeve-tile a {
  color: inherit;
}
.foeve-tile a {
  font-weight: 700;
}
.foeve-tile .foeve-tile-date,
.foeve-tile .wp-block-post-excerpt__excerpt {
  font-size: 1.6rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  margin: 0 0 0.2em;
}
.foeve-tile .wp-block-query {
  margin: 0;
}
.foeve-tile .wp-block-post-title {
  font-size: 1.25rem;
  margin: 0;
}
.foeve-tile .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.foeve-tile .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* ---------- Leistungen ---------- */
.foeve-fact {
  border-top: 4px solid var(--wp--preset--color--accent-1);
  padding-top: 14px;
}
.foeve-fact:nth-child(2) { border-color: var(--wp--preset--color--accent-2); }
.foeve-fact:nth-child(3) { border-color: var(--wp--preset--color--accent-3); }
.foeve-fact:nth-child(4) { border-color: var(--wp--preset--color--accent-4); }
.foeve-fact:nth-child(5) { border-color: var(--wp--preset--color--accent-5); }
.foeve-fact p {
  color: var(--wp--preset--color--muted);
  font-size: 0.98rem;
}

/* ---------- Jahreskreis ---------- */
.foeve-event {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--foeve-radius);
}
.foeve-event p {
  color: var(--wp--preset--color--muted);
  font-size: 0.98rem;
}
.foeve-badge {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.05;
  border: 4px solid var(--wp--preset--color--base);
  box-shadow: 0 0 0 3px var(--foeve-badge-color, var(--wp--preset--color--accent-1));
  background: var(--foeve-badge-color, var(--wp--preset--color--accent-1));
  margin: 0;
}
.foeve-badge-blue   { --foeve-badge-color: var(--wp--preset--color--accent-1); }
.foeve-badge-red    { --foeve-badge-color: var(--wp--preset--color--accent-2); }
.foeve-badge-yellow { --foeve-badge-color: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--contrast); }
.foeve-badge-green  { --foeve-badge-color: var(--wp--preset--color--accent-4); }

/* ---------- Termine (Query Loop) ---------- */
.foeve-termine .wp-block-post {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-block: 16px;
}
.foeve-termine .wp-block-post:first-child {
  border-top: 1px solid var(--wp--preset--color--line);
}
.foeve-termine .wp-block-post-excerpt__excerpt {
  font-weight: 800;
  font-style: italic;
  color: var(--wp--preset--color--accent-1);
  font-size: 1.05rem;
  margin: 0;
}
.foeve-termine .wp-block-post-title {
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 700;
  margin: 0;
}
.foeve-termine .wp-block-post-title a {
  text-decoration: none;
}

/* ---------- Rückblick-Karten (Query Loop) ---------- */
.foeve-cards .wp-block-post {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--foeve-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.foeve-card-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--wp--preset--color--accent-1);
  margin: 0;
}
.foeve-cards .wp-block-post:nth-child(4n+2) .foeve-card-art { background: var(--wp--preset--color--accent-2); }
.foeve-cards .wp-block-post:nth-child(4n+3) .foeve-card-art { background: var(--wp--preset--color--accent-4); }
.foeve-cards .wp-block-post:nth-child(4n+4) .foeve-card-art { background: var(--wp--preset--color--accent-3); }
.foeve-card-art .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0;
}
.foeve-card-art .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foeve-card-art .wp-block-post-date {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  border: 5px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-weight: 800;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.1;
  background: rgba(0, 0, 0, 0.12);
  margin: 0;
}
.foeve-cards .wp-block-post:nth-child(4n+4) .foeve-card-art .wp-block-post-date {
  color: var(--wp--preset--color--contrast);
}
.foeve-card-body {
  padding: 18px 20px 22px;
  flex: 1;
}
.foeve-card-body .wp-block-post-terms {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.foeve-card-body .wp-block-post-terms a {
  text-decoration: none;
  color: inherit;
}
.foeve-card-body .wp-block-post-title {
  font-size: 1.15rem;
  margin: 0;
}
.foeve-card-body .wp-block-post-title a {
  text-decoration: none;
}
.foeve-card-body .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--muted);
  font-size: 0.97rem;
}
.foeve-card-body .wp-block-post-excerpt__more-link {
  font-weight: 700;
}

/* ---------- Stimmen ---------- */
.foeve-quote {
  background: var(--wp--preset--color--base);
  border-left: 6px solid var(--wp--preset--color--accent-1);
  border-radius: 0 var(--foeve-radius) var(--foeve-radius) 0;
}
.foeve-quote:nth-child(2) { border-color: var(--wp--preset--color--accent-2); }
.foeve-quote:nth-child(3) { border-color: var(--wp--preset--color--accent-4); }
.foeve-quote p {
  font-size: 1.1rem;
  font-weight: 500;
  font-style: italic;
  margin: 0;
}
.foeve-quote cite,
.foeve-quote .foeve-cite {
  display: block;
  font-style: normal;
  font-family: var(--wp--preset--font-family--caveat);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent-1);
  margin-top: 12px;
}
.foeve-motto .foeve-hand {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--wp--preset--color--accent-1);
}

/* ---------- Spendenkonto ---------- */
.foeve-bank {
  border-radius: 4px;
}
.foeve-bank .wp-block-table table {
  border-collapse: collapse;
}
.foeve-bank .wp-block-table td,
.foeve-bank .wp-block-table th {
  border: 0;
  padding: 4px 18px 4px 0;
  vertical-align: top;
}
.foeve-bank .wp-block-table td:first-child {
  font-weight: 800;
  font-style: italic;
  white-space: nowrap;
}
.foeve-bank .wp-block-table td:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  user-select: all;
}

/* ---------- Checkliste ---------- */
ul.foeve-checklist {
  list-style: none;
  padding-left: 0;
}
ul.foeve-checklist li {
  position: relative;
  padding-left: 32px;
  font-weight: 600;
  margin-bottom: 8px;
}
ul.foeve-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Formular (Contact Form 7) ---------- */
.foeve-form .wpcf7 {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--foeve-radius);
  padding: 28px;
  box-shadow: var(--foeve-shadow);
}
/* Contact Form 7 setzt jedes Feld in einen <p> mit <br>: Abstände vereinheitlichen */
.foeve-form .wpcf7-form p {
  margin: 0 0 16px;
}
.foeve-form .wpcf7-form p:last-of-type {
  margin-bottom: 0;
}
.foeve-form .wpcf7-form p:has(.cf7apps-honeypot-wrap) {
  margin: 0;
}
.foeve-form .wpcf7-form label br {
  display: none;
}
.foeve-form .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
}
.foeve-form .wpcf7-form .hidden-fields-container {
  display: none;
}
.foeve-form .wpcf7-form label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}
.foeve-form .wpcf7-form label small {
  font-weight: 500;
  color: var(--wp--preset--color--muted);
}
.foeve-form .wpcf7-form input[type="text"],
.foeve-form .wpcf7-form input[type="email"],
.foeve-form .wpcf7-form input[type="tel"],
.foeve-form .wpcf7-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font: inherit;
  font-weight: 400;
  border: 1.5px solid var(--wp--preset--color--line);
  border-radius: 5px;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
}
.foeve-form .wpcf7-form textarea {
  min-height: 96px;
}
.foeve-form .foeve-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
}
.foeve-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  min-width: 0;
}
.foeve-form fieldset p {
  margin: 0;
}
.foeve-form legend {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.foeve-form .wpcf7-checkbox .wpcf7-list-item,
.foeve-form .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0 0 6px;
}
.foeve-form .wpcf7-checkbox label,
.foeve-form .wpcf7-acceptance label {
  font-weight: 500;
  font-size: 0.97rem;
  margin: 0;
}
.foeve-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--wp--preset--color--accent-1);
  margin-right: 8px;
  vertical-align: -3px;
}
.foeve-form .wpcf7-submit {
  background: var(--wp--preset--color--accent-2);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.foeve-form .wpcf7-submit:hover {
  background: #c4243a;
}
.foeve-form .wpcf7-response-output {
  border-radius: var(--foeve-radius);
  margin: 16px 0 0;
}
.foeve-form .wpcf7-not-valid-tip {
  color: var(--wp--preset--color--accent-2);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---------- Aufruf-Band, Fußzeile ---------- */
.foeve-band .foeve-hand {
  color: var(--wp--preset--color--accent-3);
  font-size: clamp(2rem, 4vw, 3rem);
}
.foeve-footer a {
  color: inherit;
}
.foeve-footer .wp-block-site-logo img {
  height: 34px;
  width: auto;
}
.foeve-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
  .foeve-hero-art {
    max-width: 560px;
    margin: 10px auto 0;
  }
  .foeve-form .foeve-form-grid {
    grid-template-columns: 1fr;
  }
  .foeve-form .wpcf7 {
    padding: 20px;
  }
}