/*
 * Lernschmiede Theme CSS
 * Ergänzt theme.json um Pattern-spezifische Stile, die sich nicht mit Block-Bindings ausdrücken lassen.
 */

/* ---------- Basics ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: var(--wp--preset--color--teal-soft); color: var(--wp--preset--color--ink); }

/* WP-Block-Button: zusätzliche Sicherheit für Hover/Focus */
.wp-block-button .wp-element-button { transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.wp-block-button .wp-element-button:hover { transform: translateY(-1px); }
.wp-block-button .wp-element-button:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 3px; }

/* ---------- Header ---------- */
.lsm-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(8px); background-color: rgba(255,255,255,0.92) !important; }
.lsm-header .wp-block-navigation { gap: 0.25rem; }
.lsm-header .wp-block-navigation .wp-block-navigation-item__content { padding: 0.5rem 0.9rem; border-radius: 999px; transition: background-color .18s ease; }
.lsm-header .wp-block-navigation .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--teal-soft); }

/* ---------- Hero ---------- */
.lsm-hero { position: relative; overflow: hidden; isolation: isolate; }
.lsm-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 12% 0%, rgba(21,111,111,.12), transparent 60%),
    radial-gradient(700px 380px at 88% 100%, rgba(196,106,38,.10), transparent 60%);
  z-index: -1; pointer-events: none;
}
/* Subtle Dot-Pattern decoration in hero */
.lsm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle at 1px 1px, rgba(21,111,111,.18) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, transparent 0%, black 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, transparent 0%, black 70%);
}
.lsm-hero h1 { letter-spacing: -0.03em; }
.lsm-hero .lsm-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: var(--wp--preset--color--teal-soft); color: var(--wp--preset--color--teal);
  font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.lsm-hero .lsm-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--orange); }
/* Make hero headline span more breathable on large screens */
@media (min-width: 900px) {
  .lsm-hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
}

/* ---------- Decision-Flow / Pills ---------- */
.lsm-pillgroup { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.lsm-pill {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0.5rem 1rem; border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px; background: #fff; color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--dm-sans); font-weight: 500; font-size: 0.9375rem;
  text-decoration: none; white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, transform .15s ease;
}
.lsm-pill:hover { border-color: var(--wp--preset--color--teal); background: var(--wp--preset--color--teal-soft); transform: translateY(-1px); }
.lsm-pill[aria-pressed="true"], .lsm-pill.is-active { border-color: var(--wp--preset--color--teal); background: var(--wp--preset--color--teal); color: #fff; }

/* ---------- Timeline ---------- */
.lsm-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.lsm-timeline > .wp-block-button { width: 100%; }
.lsm-timeline > .wp-block-button .wp-element-button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 84px; padding: 0.75rem;
  background: var(--wp--preset--color--teal-soft); color: var(--wp--preset--color--teal);
  border: 1px solid #b8d9d4; border-radius: 14px;
  font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0; text-align: center; box-shadow: none;
}
.lsm-timeline > .wp-block-button .wp-element-button:hover {
  background: var(--wp--preset--color--teal); color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21,111,111,.18);
}
@media (max-width: 900px) { .lsm-timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .lsm-timeline { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Standort-/Angebots-Cards ---------- */
.lsm-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; background: #fff;
  border: 1px solid var(--wp--preset--color--line); border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.lsm-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--teal); box-shadow: 0 18px 40px rgba(21,111,111,.10), 0 6px 12px rgba(23,33,43,.06); }
.lsm-card h3, .lsm-card h4 { margin: 0; }
.lsm-card .lsm-meta { color: var(--wp--preset--color--muted); font-size: 0.9375rem; }
/* Cards mit Featured Image: Bild oben randlos */
.lsm-card .wp-block-post-featured-image, .lsm-card figure { margin: -1.5rem -1.5rem 0; border-radius: 16px 16px 0 0; overflow: hidden; }
.lsm-card .wp-block-post-featured-image img, .lsm-card figure img { display: block; width: 100%; height: auto; object-fit: cover; }

/* ---------- Trust-Block / Zahlen ---------- */
.lsm-stat { text-align: center; padding: 1rem 0.5rem; }
.lsm-stat .lsm-stat-number {
  font-family: var(--wp--preset--font-family--dm-sans); font-weight: 900;
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  color: var(--wp--preset--color--teal-deep); line-height: 1; letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--wp--preset--color--teal) 0%, var(--wp--preset--color--teal-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lsm-stat .lsm-stat-label { display: block; margin-top: 0.625rem; color: var(--wp--preset--color--ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; max-width: 22ch; margin-left: auto; margin-right: auto; }

/* ---------- Hilfsklassen ---------- */
.lsm-soft { background: var(--wp--preset--color--teal-soft); border-radius: 16px; }
.lsm-warm { background: var(--wp--preset--color--orange-soft); border-radius: 16px; }

/* ---------- Footer ---------- */
.lsm-footer a { color: #ffffff; text-decoration: none; transition: color .15s ease; }
.lsm-footer a:hover { color: var(--wp--preset--color--orange); }
.lsm-footer ul { list-style: none; padding: 0; margin: 0; }

/* ---------- WhatsApp Floating Button ---------- */
.lsm-whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.2rem; border-radius: 999px;
  background: #25D366; color: #fff !important; text-decoration: none;
  font-family: var(--wp--preset--font-family--dm-sans); font-weight: 700;
  box-shadow: 0 12px 28px rgba(37,211,102,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lsm-whatsapp-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(37,211,102,.45); }
@media (max-width: 540px) {
  .lsm-whatsapp-fab { padding: 0.85rem; border-radius: 50%; }
  .lsm-whatsapp-fab span { display: none; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto; }
}