/*
Theme Name: SZK – Skizunft Kornwestheim
Theme URI: https://sz-kornwestheim.de
Author: Skizunft Kornwestheim e.V.
Description: Maßgeschneidertes Block-Theme für die Skizunft Kornwestheim e.V. – Mehrspartenverein mit Abteilungen Ski, Triathlon, Basketball, BMX, Fußball sowie Referaten Ringen und Inlineskating. Blau/Gelb nach Vereinslogo, selbst gehostete Schriften (Barlow), mobil-optimiert, vollständig im Website-Editor bearbeitbar.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: szk
Tags: block-patterns, full-site-editing, custom-colors, custom-logo, editor-style, one-column, wide-blocks
*/

/* ------------------------------------------------------------------
   1. Grundlegendes
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { height: auto; max-width: 100%; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary-dark); }

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

/* ------------------------------------------------------------------
   2. Kopfbereich – klebt oben, dünne Linie darunter
   ------------------------------------------------------------------ */
.szk-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--wp--preset--color--primary-mid);
}
body.admin-bar .szk-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .szk-header { top: 46px; } }

.szk-brand { gap: 0.85rem; align-items: center; }
.szk-brand .wp-block-site-logo img { height: 56px; width: auto; display: block; }
.szk-brand .wp-block-site-tagline { margin-top: 0.1rem; }
@media (max-width: 600px) {
  .szk-brand .wp-block-site-logo img { height: 44px; }
  .szk-brand .wp-block-site-tagline { display: none; }
}

/* Navigation: aktiver Punkt bekommt die gelbe Kante aus dem Logo */
.wp-block-navigation .wp-block-navigation-item__content { padding: 0.35rem 0; }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent);
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
  box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary-mid);
}
.wp-block-navigation .wp-block-navigation__submenu-container {
  border: 1px solid var(--wp--preset--color--primary-mid);
  border-radius: 6px;
  padding: 0.35rem 0;
  min-width: 14rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.35rem; }

/* ------------------------------------------------------------------
   3. Das eine markante Element: die schrägen Logo-Bänder
   ------------------------------------------------------------------ */
.szk-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.szk-hero::before,
.szk-hero::after {
  content: "";
  position: absolute;
  left: -8%;
  width: 116%;
  z-index: -1;
  transform: rotate(-4deg);
  pointer-events: none;
}
.szk-hero::after  { bottom: -1.8rem; height: 3.4rem; background: var(--wp--preset--color--base); }
.szk-hero::before { bottom: 1.35rem; height: 0.75rem; background: var(--wp--preset--color--accent); }
.szk-hero .szk-hero__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.45; max-width: 36rem; }
.szk-hero .wp-block-heading { color: var(--wp--preset--color--base); }
.szk-hero.has-primary-background-color { background: var(--wp--preset--gradient--blue-depth) !important; }

/* ------------------------------------------------------------------
   4. Kacheln (Abteilungen) – die ganze Kachel ist der Link
   ------------------------------------------------------------------ */
.is-style-szk-tile {
  position: relative;
  border-radius: 6px;
  background: var(--wp--preset--color--primary-light);
  padding: 1.5rem 1.5rem 1.4rem;
  min-height: 9.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
  height: 100%;
}
.is-style-szk-tile .wp-block-heading { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--x-large); }
.is-style-szk-tile .wp-block-heading a { color: inherit; text-decoration: none; }
.is-style-szk-tile .wp-block-heading a::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.is-style-szk-tile p { margin: 0; color: var(--wp--preset--color--muted); }
.is-style-szk-tile::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  bottom: 1rem;
  width: 2.25rem;
  height: 3px;
  background: var(--wp--preset--color--accent);
  transition: width 0.15s ease;
}
.is-style-szk-tile:hover,
.is-style-szk-tile:focus-within { background: var(--wp--preset--color--primary); }
.is-style-szk-tile:hover .wp-block-heading,
.is-style-szk-tile:hover p,
.is-style-szk-tile:focus-within .wp-block-heading,
.is-style-szk-tile:focus-within p { color: var(--wp--preset--color--base); }
.is-style-szk-tile:hover::after,
.is-style-szk-tile:focus-within::after { width: 4rem; }
.is-style-szk-tile.is-external .wp-block-heading a::before { content: "↗ "; font-size: 0.75em; opacity: 0.7; }

/* Infobox (z. B. „Wichtige Info“, Hinweise) */
.is-style-szk-box {
  border-left: 4px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--primary-light);
  padding: 1.25rem 1.5rem;
  border-radius: 0 6px 6px 0;
}
.is-style-szk-box > :first-child { margin-top: 0; }
.is-style-szk-box > :last-child { margin-bottom: 0; }

/* Heller Rahmen-Button auf dunklem Grund */
.is-style-szk-ghost .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--base);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.is-style-szk-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }

/* ------------------------------------------------------------------
   5. Beiträge / Aktuelles
   ------------------------------------------------------------------ */
.szk-post-card { height: 100%; }
.szk-post-card .wp-block-post-featured-image { margin-bottom: 0.9rem; }
.szk-post-card .wp-block-post-featured-image img { border-radius: 4px; }
.szk-post-card .wp-block-post-date { margin-bottom: 0.25rem; }
.szk-post-card .wp-block-post-title { margin: 0 0 0.5rem; }
.szk-post-card .wp-block-post-excerpt__more-link { font-weight: 600; text-decoration: none; }
.szk-post-card .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }
.wp-block-post-terms a { text-decoration: none; font-weight: 600; }

/* Titelband auf Unterseiten */
.szk-title-band { border-bottom: 3px solid var(--wp--preset--color--accent); }
.szk-title-band .wp-block-post-title { margin: 0; }

/* Beitragsnavigation */
.szk-post-nav { border-top: 1px solid var(--wp--preset--color--primary-mid); padding-top: 1.5rem; }
.szk-post-nav a { text-decoration: none; }
.szk-post-nav .post-navigation-link__label { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* ------------------------------------------------------------------
   6. Unternavigation innerhalb einer Abteilung ([szk_subnav]) –
      Leiste mit Aufklappmenüs, gleiche Optik wie das Hauptmenü
   ------------------------------------------------------------------ */
.szk-subnav { margin: 0 0 var(--wp--preset--spacing--40); border-bottom: 2px solid var(--wp--preset--color--primary-mid); }
.szk-subnav ul { list-style: none; margin: 0; padding: 0; }
.szk-subnav__list { display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.szk-subnav__item { position: relative; display: flex; align-items: center; }
.szk-subnav__item > a {
  display: inline-block; padding: 0.7rem 0.85rem; text-decoration: none; font-weight: 600;
  color: var(--wp--preset--color--contrast); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.szk-subnav__item > a:hover { color: var(--wp--preset--color--primary); border-bottom-color: var(--wp--preset--color--primary-mid); }
.szk-subnav__item.is-current > a,
.szk-subnav__item.is-ancestor > a { color: var(--wp--preset--color--primary-dark); border-bottom-color: var(--wp--preset--color--accent); }
.szk-subnav__toggle {
  background: none; border: 0; padding: 0.5rem 0.45rem; cursor: pointer; color: inherit; display: inline-flex; align-items: center;
}
.szk-subnav__caret { width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; margin-top: -0.25rem; }
.szk-subnav__item.is-open > .szk-subnav__toggle .szk-subnav__caret { transform: rotate(225deg); margin-top: 0.15rem; }
.szk-subnav__sub {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 15rem;
  background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--primary-mid);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(30, 42, 74, 0.12); padding: 0.35rem 0;
}
.szk-subnav__item.is-open > .szk-subnav__sub { display: block; }
@media (hover: hover) { .szk-subnav__item:hover > .szk-subnav__sub { display: block; } }
.szk-subnav__sub .szk-subnav__item { display: block; }
.szk-subnav__sub .szk-subnav__item > a { display: block; padding: 0.5rem 1rem; border-bottom: 0; margin: 0; }
.szk-subnav__sub .szk-subnav__item > a:hover { background: var(--wp--preset--color--primary-light); }
.szk-subnav__sub .szk-subnav__item.is-current > a { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); }
@media (max-width: 782px) {
  .szk-subnav__list { flex-direction: column; gap: 0; }
  .szk-subnav__item { flex-wrap: wrap; border-top: 1px solid var(--wp--preset--color--primary-light); }
  .szk-subnav__item > a { flex: 1; padding: 0.6rem 0.25rem; border-bottom: 0; margin: 0; }
  .szk-subnav__sub { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--wp--preset--color--primary-mid); border-radius: 0; width: 100%; margin: 0 0 0.5rem 0.5rem; }
  .szk-subnav__item:hover > .szk-subnav__sub { display: none; }
  .szk-subnav__item.is-open > .szk-subnav__sub { display: block; }
}

/* ------------------------------------------------------------------
   7. Externe Inhalte erst nach Klick laden (DSGVO) – [szk_embed]
   ------------------------------------------------------------------ */
.szk-embed {
  border: 1px dashed var(--wp--preset--color--primary-mid);
  border-radius: 6px;
  padding: 1.5rem;
  background: var(--wp--preset--color--primary-light);
}
.szk-embed p { margin: 0 0 0.75rem; }
.szk-embed p:last-child { margin-bottom: 0; }
.szk-embed.is-loaded { padding: 0; border-style: solid; background: var(--wp--preset--color--base); overflow: hidden; }
.szk-embed iframe { display: block; width: 100%; border: 0; background: #fff; }
.szk-embed__btn { cursor: pointer; margin: 0.25rem 0 0.9rem; }

/* ------------------------------------------------------------------
   8. Tabellen, Listen, Kleinigkeiten
   ------------------------------------------------------------------ */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 100%; }
.wp-block-table td s { color: var(--wp--preset--color--muted); }
.szk-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.szk-placeholder {
  border: 2px dashed var(--wp--preset--color--primary-mid);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  color: var(--wp--preset--color--muted);
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(39, 58, 124, 0.04) 12px 24px);
}
.wp-block-columns.szk-contact-cols .wp-block-column { padding: 1.25rem 1.5rem; border-radius: 6px; background: var(--wp--preset--color--primary-light); }
.wp-block-columns.szk-contact-cols .wp-block-column > :first-child { margin-top: 0; }

/* Fußbereich */
.szk-footer { border-top: 4px solid var(--wp--preset--color--accent); }
.szk-footer a { color: var(--wp--preset--color--base); }
.szk-footer .wp-block-list { list-style: none; padding-left: 0; }
.szk-footer .wp-block-list li { margin: 0 0 0.35rem; }
.szk-footer .wp-block-list a { text-decoration: none; opacity: 0.9; }
.szk-footer .wp-block-list a:hover { text-decoration: underline; opacity: 1; }
.szk-footer .wp-block-site-logo img { height: 64px; width: auto; }
.szk-footer__meta { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1.25rem; font-size: var(--wp--preset--font-size--small); opacity: 0.85; }

/* Druck */
@media print {
  .szk-header, .szk-footer, .wp-block-navigation, .szk-embed__btn { display: none !important; }
}


/* ------------------------------------------------------------------
   9. Titelband mit Abteilungslogo (rechts) – auf jeder Unterseite
   ------------------------------------------------------------------ */
.szk-band__row { align-items: center; }
.szk-dept-logo { margin: 0; flex: 0 0 auto; }
.szk-dept-logo img {
  width: 96px; height: 96px; object-fit: contain;
  background: #fff; border: 2px solid var(--wp--preset--color--primary-mid);
  border-radius: 14px; padding: 6px; display: block;
}
.szk-hero .szk-dept-logo img { width: 128px; height: 128px; border-color: rgba(255,255,255,0.6); }
.szk-dept-logo.is-plain img { background: transparent; border: 0; padding: 0; border-radius: 0; }
@media (max-width: 600px) {
  .szk-dept-logo img { width: 64px; height: 64px; }
  .szk-hero .szk-dept-logo img { width: 88px; height: 88px; }
}

/* ------------------------------------------------------------------
   10. Klapp-Kacheln (Abteilungen): Vorderseite Logo + Name,
       beim Überfahren dreht sich die Kachel und zeigt ein Foto
   ------------------------------------------------------------------ */
.is-style-szk-flip {
  perspective: 1400px;
  background: transparent;
  padding: 0;
  min-height: 0;
  border-radius: 10px;
}
.is-style-szk-flip::after { display: none; }
.is-style-szk-flip .szk-flip__inner {
  position: relative;
  min-height: 17rem;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.is-style-szk-flip:hover .szk-flip__inner,
.is-style-szk-flip:focus-within .szk-flip__inner { transform: rotateY(180deg); }
.szk-flip__front, .szk-flip__back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
}
.szk-flip__front {
  background: var(--wp--preset--color--primary-light);
  border: 1px solid var(--wp--preset--color--primary-mid);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 1.25rem; text-align: center;
}
.szk-flip__front .wp-block-image { margin: 0; }
.szk-flip__front .wp-block-image img {
  width: 8.5rem; height: 8.5rem; object-fit: contain;
  background: #fff; border: 2px solid var(--wp--preset--color--primary);
  border-radius: 16px; padding: 0.5rem; display: block;
}
.szk-flip__front .wp-block-heading { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.szk-flip__front .wp-block-heading a,
.szk-flip__back .wp-block-heading a { color: inherit; text-decoration: none; }
.szk-flip__front .wp-block-heading a::after,
.szk-flip__back .wp-block-heading a::after { content: ""; position: absolute; inset: 0; }
.szk-flip__back { transform: rotateY(180deg); background: var(--wp--preset--color--primary); display: flex; flex-direction: column; justify-content: flex-end; }
.szk-flip__back .wp-block-image { margin: 0; position: absolute; inset: 0; z-index: 0; }
.szk-flip__back .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.szk-flip__back .wp-block-heading {
  position: static; margin: 0; z-index: 1;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(36, 76, 156, 0.92), rgba(36, 76, 156, 0));
  color: #fff; font-size: var(--wp--preset--font-size--x-large);
}
.is-style-szk-flip { cursor: pointer; }
.szk-flip__back .wp-block-heading a::after { z-index: 2; }
.is-style-szk-flip.is-external .szk-flip__front .wp-block-heading a::before { content: "↗ "; font-size: 0.7em; opacity: 0.6; }

/* Im Editor: keine Drehung, Vorder- und Rückseite untereinander sichtbar und bearbeitbar */
.block-editor-block-list__layout .is-style-szk-flip { perspective: none; }
.block-editor-block-list__layout .is-style-szk-flip .szk-flip__inner { transform: none !important; min-height: 0; }
.block-editor-block-list__layout .szk-flip__front,
.block-editor-block-list__layout .szk-flip__back { position: relative; inset: auto; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; min-height: 11rem; }
.block-editor-block-list__layout .szk-flip__back { margin-top: 0.5rem; }
.block-editor-block-list__layout .szk-flip__back { display: block; padding: 2rem 1rem 1rem; }
.block-editor-block-list__layout .szk-flip__back .wp-block-image { position: relative; inset: auto; margin: 0 0 0.5rem; }
.block-editor-block-list__layout .szk-flip__back .wp-block-image img { height: 10rem; width: 100%; object-fit: cover; border-radius: 6px; }
.block-editor-block-list__layout .szk-flip__back .wp-block-heading { position: static; padding: 0.5rem; background: none; }
.block-editor-block-list__layout .szk-flip__front { padding-top: 2rem; }
.block-editor-block-list__layout .szk-flip__front::before,
.block-editor-block-list__layout .szk-flip__back::before { content: "Vorderseite: Logo + Name"; position: absolute; top: 0.4rem; left: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--muted); z-index: 3; }
.block-editor-block-list__layout .szk-flip__back::before { content: "Rückseite: Foto (Bild anklicken → Ersetzen)"; color: #fff; }
.block-editor-block-list__layout .szk-flip__front .wp-block-heading a::after,
.block-editor-block-list__layout .szk-flip__back .wp-block-heading a::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .is-style-szk-flip .szk-flip__inner { transition: none; }
  .is-style-szk-flip:hover .szk-flip__inner { transform: none; }
  .is-style-szk-flip:hover .szk-flip__front { opacity: 0; }
  .is-style-szk-flip:hover .szk-flip__back { transform: none; }
}

/* ------------------------------------------------------------------
   11. Bilder-Slider / Karussell (Galerie-Block mit Stil „Slider / Karussell“)
       Ein Bild pro Ansicht, Beschriftung darunter, Pfeile + Zähler per Script.
   ------------------------------------------------------------------ */
.wp-block-gallery.is-style-szk-slider.has-nested-images {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1rem;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wp-block-gallery.is-style-szk-slider.has-nested-images::-webkit-scrollbar { display: none; }
.wp-block-gallery.is-style-szk-slider.has-nested-images figure.wp-block-image {
  flex: 0 0 100%; width: 100% !important; margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.wp-block-gallery.is-style-szk-slider.has-nested-images figure.wp-block-image img {
  width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 8px;
}
.wp-block-gallery.is-style-szk-slider.has-nested-images figure.wp-block-image figcaption {
  position: static; background: none; color: var(--wp--preset--color--contrast);
  padding: 0.6rem 0 0; margin: 0; text-align: center; font-size: var(--wp--preset--font-size--medium); text-shadow: none;
}
.szk-slider-wrap { position: relative; }
.szk-slider-btn {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0;
  background: var(--wp--preset--color--primary); color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.25); z-index: 3;
}
.szk-slider-btn:hover { background: var(--wp--preset--color--primary-dark); }
.szk-slider-btn--prev { left: 0.75rem; }
.szk-slider-btn--next { right: 0.75rem; }
.szk-slider-count { text-align: center; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-top: 0.25rem; }
/* Im Editor: Galerie normal als Raster zeigen, damit alle Bilder bearbeitbar sind */
.block-editor-block-list__layout .wp-block-gallery.is-style-szk-slider.has-nested-images { flex-wrap: wrap; overflow: visible; }
.block-editor-block-list__layout .wp-block-gallery.is-style-szk-slider.has-nested-images figure.wp-block-image { flex: 1 1 calc(33.33% - 1rem); width: auto !important; }

/* ------------------------------------------------------------------
   12. Soziale Medien im Fußbereich (Icons + Beschriftung)
   ------------------------------------------------------------------ */
.szk-footer .wp-block-social-links { gap: 0.5rem 1rem; }
.szk-footer .wp-block-social-links .wp-social-link a { padding: 0.15rem; line-height: 1.3; align-items: center; }
.szk-footer .wp-block-social-links .wp-block-social-link-label { font-size: var(--wp--preset--font-size--small); line-height: 1.3; white-space: normal; margin-left: 0.25rem; }

/* Aufklappbereich (Details-Block) */
.wp-block-details { border: 1px solid var(--wp--preset--color--primary-mid); border-radius: 8px; padding: 0.75rem 1.25rem; }
.wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--primary-dark); cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: 0.75rem; }

/* Titel-/Kopfzeile: Text links wächst, Logo rechts bleibt fix */
.szk-band__row > .wp-block-group { flex: 1 1 30rem; min-width: 0; }
.szk-band__row > .wp-block-heading { flex: 1 1 20rem; margin: 0; }