/*
Theme Name: JUCF – Jan Ullrich Cycling Festival
Theme URI: https://jan-ullrich-cycling-festival.com
Author: Code Fellows
Description: Custom Block-Theme für das Jan Ullrich Cycling Festival. Elegant, minimalistisch, SEO-optimiert, selbst pflegbar.
Version: 1.7.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: jucf
*/

/* ---------- Basis ---------- */
:root {
  --jucf-shadow: 0 2px 8px rgba(17, 20, 23, .05), 0 12px 32px rgba(17, 20, 23, .07);
  --jucf-shadow-soft: 0 1px 3px rgba(17, 20, 23, .05), 0 8px 24px rgba(17, 20, 23, .05);
  --jucf-radius: 12px;
  --jucf-border: 1px solid rgba(17, 20, 23, .08);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #23282e;
}

/* Typografie: kondensierte Headlines, ruhiger Lauftext */
h1, h2 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .015em;
}

h3, h4 {
  font-weight: 600;
  letter-spacing: .01em;
}

h1 { line-height: .95; }

p { max-width: 68ch; }

/* Zentrierte Absätze auch als Box zentrieren (sonst sitzt der 68ch-Block links) */
p.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Label/Eyebrow-Stil */
.jucf-kicker {
  display: inline-block;
  color: var(--wp--preset--color--jucf-yellow);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .22em;
}

.jucf-kicker::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--wp--preset--color--jucf-yellow);
  margin: .55em auto 0;
}

/* Auf hellem Grund dunklere Variante */
.jucf-kicker-dark {
  color: var(--wp--preset--color--jucf-slate);
}

/* ---------- Header ---------- */
.jucf-header {
  border-bottom: 2px solid var(--wp--preset--color--jucf-yellow);
}

.jucf-header .wp-block-navigation a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .35em 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

.jucf-header .wp-block-navigation a:hover {
  color: var(--wp--preset--color--jucf-yellow);
  border-bottom-color: var(--wp--preset--color--jucf-yellow);
}

/* ---------- Hero ---------- */
.jucf-hero {
  position: relative;
}

/* Weicher Verlauf statt flacher Abdunklung */
.jucf-hero .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(17, 20, 23, .55) 0%, rgba(17, 20, 23, .35) 45%, rgba(17, 20, 23, .78) 100%) !important;
  opacity: 1 !important;
}

.jucf-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--wp--preset--color--jucf-yellow) 30%, var(--wp--preset--color--jucf-yellow) 70%, transparent);
}

.jucf-hero h1 {
  letter-spacing: .02em;
  text-wrap: balance;
}

/* ---------- Bildmarke / Logo ---------- */
.jucf-header-logo img {
  display: block;
  height: 64px;
  width: auto;
}

.jucf-hero-logo img {
  width: min(300px, 46vw);
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .35));
}

.jucf-watermark {
  position: relative;
  overflow: hidden;
}

.jucf-watermark::before {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(300px, 30%);
  aspect-ratio: 3046 / 2009;
  background: url('assets/img/jucf-logo-800.png') no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .8em 2em;
  border: 1px solid transparent; /* gleiche Höhe wie Outline-Buttons */
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(17, 20, 23, .18);
}

.is-style-outline .wp-block-button__link {
  border-width: 1px;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--jucf-yellow);
  color: var(--wp--preset--color--jucf-yellow);
}

/* ---------- Event-Karten ---------- */
.jucf-card {
  background: var(--wp--preset--color--white);
  border: var(--jucf-border);
  border-radius: var(--jucf-radius);
  box-shadow: var(--jucf-shadow-soft);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Karteninhalt füllt die Höhe, Button immer bündig unten */
.jucf-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.jucf-card-body .wp-block-buttons {
  margin-top: auto;
  padding-top: 1rem;
}

.jucf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--jucf-shadow);
}

.jucf-card .jucf-card-img {
  position: relative;
}

.jucf-card .jucf-card-img img {
  display: block;
  width: 100%;
  height: 185px;
  object-fit: cover;
  transition: transform .4s ease;
}

.jucf-card:hover .jucf-card-img img {
  transform: scale(1.04);
}

.jucf-card .jucf-card-img::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--wp--preset--color--jucf-yellow);
}

.jucf-card-body {
  padding: 1.5rem 1.6rem 1.7rem;
}

.jucf-card-badge {
  display: inline-block;
  color: var(--wp--preset--color--jucf-slate);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .2em;
}

.jucf-card h3 {
  text-transform: uppercase;
  font-weight: 700;
  margin-top: .2em;
}

/* ---------- Zeitplan ---------- */
.jucf-schedule-row {
  background: var(--wp--preset--color--white);
  border: var(--jucf-border);
  border-left: 3px solid var(--wp--preset--color--jucf-yellow);
  border-radius: 0 var(--jucf-radius) var(--jucf-radius) 0;
  box-shadow: none;
  transition: box-shadow .2s ease;
}

.jucf-schedule-row:hover {
  box-shadow: var(--jucf-shadow-soft);
}

.jucf-schedule-time {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.35rem;
  min-width: 9rem;
  white-space: nowrap;
}

.jucf-schedule-place {
  color: var(--wp--preset--color--jucf-slate);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- Facts / Zahlen ---------- */
.jucf-fact {
  text-align: center;
}

.jucf-fact strong {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--wp--preset--color--jucf-ink);
}

.jucf-fact strong::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--wp--preset--color--jucf-yellow);
  margin: .3em auto .45em;
}

.jucf-fact p {
  color: var(--wp--preset--color--jucf-slate);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 auto;
}

/* ---------- FAQ ---------- */
.jucf-faq details {
  background: var(--wp--preset--color--white);
  border: var(--jucf-border);
  border-radius: var(--jucf-radius);
  padding: 1.1rem 1.5rem;
  margin-bottom: .7rem;
  transition: box-shadow .2s ease;
}

.jucf-faq details:hover {
  box-shadow: var(--jucf-shadow-soft);
}

.jucf-faq summary {
  font-weight: 600;
  cursor: pointer;
}

.jucf-faq details[open] summary {
  color: var(--wp--preset--color--jucf-ink);
  border-bottom: 1px solid rgba(17, 20, 23, .08);
  padding-bottom: .7rem;
  margin-bottom: .7rem;
}

/* ---------- Sponsoren ---------- */
.jucf-sponsors {
  align-items: center;
}

.jucf-sponsors img {
  max-height: 58px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .25s, opacity .25s;
}

.jucf-sponsors img:hover {
  filter: none;
  opacity: 1;
}

/* ---------- Footer ---------- */
.jucf-footer {
  border-top: 2px solid var(--wp--preset--color--jucf-yellow);
}

.jucf-footer a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, .3);
}

.jucf-footer a:hover {
  color: var(--wp--preset--color--jucf-yellow);
}

.jucf-footer .wp-block-heading {
  color: var(--wp--preset--color--jucf-yellow);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .16em;
}

.jucf-footer img {
  opacity: .95;
}

/* ---------- Bilder ---------- */
main img {
  border-radius: var(--jucf-radius);
}

/* Header-Bilder auf Unterseiten nicht zu hoch */
.wp-block-post-content > img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

.jucf-card img,
.jucf-header-logo img,
.jucf-hero-logo img,
.jucf-sponsors img {
  border-radius: 0;
}

/* ---------- Utility ---------- */
.jucf-yellow-mark {
  background: linear-gradient(transparent 62%, var(--wp--preset--color--jucf-yellow) 62%, var(--wp--preset--color--jucf-yellow) 92%, transparent 92%);
  padding: 0 .08em;
}

/* ---------- Wechsel-Sektionen ---------- */
.jucf-split img {
  max-height: 520px;
  object-fit: cover;
}

.jucf-split h2 {
  margin-top: .3em;
}

/* ---------- Seiten-Header (Eventseiten) ---------- */
.jucf-page-header {
  min-height: 360px;
}

.jucf-page-header .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(17, 20, 23, .45) 0%, rgba(17, 20, 23, .72) 100%) !important;
  opacity: 1 !important;
}

.jucf-page-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--wp--preset--color--jucf-yellow) 30%, var(--wp--preset--color--jucf-yellow) 70%, transparent);
}

/* Fakten-Badges (im Cover hell, auf Seite dunkel) */
.jucf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  padding: 0;
  margin: 1.2rem 0 0;
  list-style: none;
}

.jucf-badges li {
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 999px;
  padding: .35em 1.1em;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  backdrop-filter: blur(2px);
}

.jucf-badges li strong {
  color: var(--wp--preset--color--jucf-yellow);
  font-weight: 700;
}

/* ---------- Benefits-Grid ---------- */
.jucf-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 781px) {
  .jucf-benefits { grid-template-columns: 1fr; }
}

.jucf-benefits li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--wp--preset--color--white);
  border: var(--jucf-border);
  border-radius: var(--jucf-radius);
  padding: 1rem 1.2rem;
  transition: box-shadow .2s ease, transform .2s ease;
}

.jucf-benefits li:hover {
  box-shadow: var(--jucf-shadow-soft);
  transform: translateY(-2px);
}

.jucf-benefits li::before {
  content: "";
  flex: 0 0 26px;
  height: 26px;
  margin-top: .1em;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23111417' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 60% no-repeat,
    var(--wp--preset--color--jucf-yellow);
}

/* ---------- Prezi (Click-to-Load) ---------- */
.jucf-prezi {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    url('assets/img/jucf-logo-800.png') no-repeat center 28% / min(220px, 40%),
    linear-gradient(160deg, var(--wp--preset--color--jucf-dark), var(--wp--preset--color--jucf-ink));
  border-radius: var(--jucf-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 1.5rem 0;
}

.jucf-prezi-inner {
  text-align: center;
  padding: 0 1.5rem 2rem;
}

.jucf-prezi-title {
  color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 .8rem;
}

.jucf-prezi-hint {
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  margin: .8rem auto 0;
  max-width: 46ch;
}

.jucf-prezi iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Hinweis-/Info-Box ---------- */
.jucf-note {
  background: var(--wp--preset--color--white);
  border: var(--jucf-border);
  border-left: 3px solid var(--wp--preset--color--jucf-yellow);
  border-radius: 0 var(--jucf-radius) var(--jucf-radius) 0;
  padding: 1.1rem 1.4rem;
}