/*
Theme Name: Momentum – Onepage
Theme URI: https://example.com/momentum
Author: Für Georg Wendt & Wolfgang Wittenburg (Freelens e.V. Hamburg)
Description: Onepage-Variante des Momentum-Themes: die Ausstellung als eine durchscrollbare Seite. Jeder Beitrag erscheint als vollständiger Abschnitt (Bilder, Kurztext, Audio) direkt auf der Startseite – ohne Vorschaubilder oder Detailseiten. Pro Beitrag Bildgröße (groß/klein) und Anordnung (untereinander/nebeneinander) wählbar, dezente Trennlinie zwischen den Werken. Das ursprüngliche „Momentum"-Theme bleibt separat installiert.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.6
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: momentum-onepage
Tags: full-site-editing, block-patterns, photography, art, dark, portfolio, accessibility-ready, translation-ready
*/

/*
  Der Großteil des Stylings kommt aus theme.json (globale Farben/Schriften/Abstände)
  und wird im Site-Editor unter „Design → Stile" bearbeitet.
  Diese Datei enthält nur ergänzende Feinheiten, die theme.json (noch) nicht abbildet.
*/

/* Skip-Link für Barrierefreiheit */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--wp--preset--color--accent);color:#241d10;padding:.7em 1.2em;font-weight:600;}
.skip-link:focus{left:1rem;top:1rem;}

/* Sichtbarer Fokus-Rahmen (Tastaturbedienung) */
:where(a,button,input,textarea,summary,.wp-block-image a):focus-visible{
  outline:2px solid var(--wp--preset--color--accent);
  outline-offset:3px;
}

/* Bildtext-Feinschliff (Caption IMMER unter dem Bild) */
figure.wp-block-image{display:flex;flex-direction:column;}
figure.wp-block-image > img{order:1;}
figure.wp-block-image > figcaption{
  order:2;
  position:static !important;
  z-index:5;
  font-family:var(--wp--preset--font-family--cormorant);
  font-style:italic;
  font-size:var(--wp--preset--font-size--small);
  color:var(--wp--preset--color--muted);
  text-align:center;
  margin-top:.7em;
  letter-spacing:.01em;
}

/* Ruhige Bild-Erscheinung */
.wp-block-image img{display:block;}

/* Werke-Übersicht: Mauerwerk-Raster – natürliche Formate, kein Beschnitt */
.momentum-masonry,
.momentum-werke-query .wp-block-post-template{
  display:block !important;
  column-count:3 !important;
  column-gap:28px;
  grid-template-columns:none !important;
  margin:0;padding:0;list-style:none;
}
.momentum-masonry > li,
.momentum-werke-query .wp-block-post-template > li{
  display:block !important;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 34px !important;
  width:100%;
}
.momentum-masonry .wp-block-post-featured-image,
.momentum-werke-query .wp-block-post-featured-image{margin:0;}
.momentum-masonry .wp-block-post-featured-image img,
.momentum-werke-query .wp-block-post-featured-image img{width:100%;height:auto;display:block;}
@media (max-width:900px){ .momentum-masonry,.momentum-werke-query .wp-block-post-template{column-count:2 !important;} }
@media (max-width:560px){ .momentum-masonry,.momentum-werke-query .wp-block-post-template{column-count:1 !important;} }

/* Detailseite: Bilder in Originalproportion, Diptychon mittig ausgerichtet */
figure.momentum-figure img{width:100%;height:auto;display:block;}
.wp-block-columns:has(> .wp-block-column figure.momentum-figure){align-items:center;}
figure.momentum-figure.aligncenter img{width:auto;max-width:100%;max-height:82vh;margin-inline:auto;}

/* Diptychon: Anordnung per Auswahlmenü (Body-Klasse) gesteuert, gleicher Abstand */
.momentum-diptych{align-items:center;}
.momentum-diptych > figure{margin:0;}
.momentum-diptych > figure img{width:100%;height:auto;display:block;}

/* Nebeneinander */
.momentum-diptych-side .momentum-diptych{flex-direction:row !important;}
.momentum-diptych-side .momentum-diptych > figure{flex:1 1 0 !important;min-width:0;width:auto;}

/* Untereinander (Standard) */
.momentum-diptych-stacked .momentum-diptych{flex-direction:column !important;}
.momentum-diptych-stacked .momentum-diptych > figure{flex:0 0 auto !important;width:100%;}

/* Auf schmalen Bildschirmen immer untereinander */
@media (max-width:600px){
  .momentum-diptych{flex-direction:column !important;}
  .momentum-diptych > figure{flex:0 0 auto !important;width:100%;}
}

/* Übersicht: verlinkte Bilder klar als klickbar zeigen */
.wp-block-post-featured-image a{display:block;cursor:pointer;overflow:hidden;}
.wp-block-post-featured-image a img{transition:opacity .35s ease, transform .6s ease;}
.wp-block-post-featured-image a:hover img{opacity:.82;}
.wp-block-post-featured-image a:focus-visible{outline:2px solid var(--wp--preset--color--accent);outline-offset:3px;}

/* Kategorie-/Schlagwort-Namen grundsätzlich NICHT anzeigen (Beiträge, Seiten, Übersicht) */
.wp-block-post-terms{display:none !important;}

/* „Momentum" Wortmarke */
.momentum-mark{font-weight:600;letter-spacing:.46em;text-transform:uppercase;font-size:.8rem;}
.momentum-mark .dot{color:var(--wp--preset--color--accent);}

/* Kopfbereich: verlässlicher seitlicher Abstand (Titel links & Menü rechts kleben nicht am Rand) */
.momentum-header{
  padding-left:clamp(1.5rem, 5vw, 4.5rem) !important;
  padding-right:clamp(1.5rem, 5vw, 4.5rem) !important;
  box-sizing:border-box;
  position:relative;
}

/* Menüs (über „Design → Menüs" pflegbar) */
.momentum-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2.4rem;}
.momentum-menu li{margin:0;}
.momentum-menu a{
  font-family:var(--wp--preset--font-family--inter);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wp--preset--color--contrast-2);text-decoration:none;font-weight:400;
  transition:color .25s ease, opacity .25s ease;
}
.momentum-menu a:hover{color:var(--wp--preset--color--accent);}
.momentum-menu .current-menu-item > a{color:var(--wp--preset--color--accent);}
.momentum-header .wp-block-shortcode{display:flex;justify-content:flex-end;margin:0;flex:1;}
.momentum-menu--footer{justify-content:center;gap:2rem;}
.momentum-menu--footer a{font-size:.68rem;letter-spacing:.16em;color:var(--wp--preset--color--muted);}

/* Hauptmenü-Wrapper + mobiler Umschalter */
.momentum-nav{display:flex;justify-content:flex-end;align-items:center;flex:1;}
.momentum-nav-panel{display:flex;justify-content:flex-end;}
.momentum-nav-toggle{display:none;}

@media (max-width:768px){
  .momentum-nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;cursor:pointer;
    background:none;border:1px solid var(--wp--preset--color--line);border-radius:2px;
  }
  .momentum-nav-bars{position:relative;display:block;width:20px;height:1.5px;background:var(--wp--preset--color--contrast);transition:.25s ease;}
  .momentum-nav-bars::before,.momentum-nav-bars::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--wp--preset--color--contrast);transition:.25s ease;}
  .momentum-nav-bars::before{top:-6px;}
  .momentum-nav-bars::after{top:6px;}
  .momentum-nav.is-open .momentum-nav-bars{background:transparent;}
  .momentum-nav.is-open .momentum-nav-bars::before{top:0;transform:rotate(45deg);}
  .momentum-nav.is-open .momentum-nav-bars::after{top:0;transform:rotate(-45deg);}

  .momentum-nav-panel{
    position:absolute;left:0;right:0;top:100%;
    background:var(--wp--preset--color--base);
    border-bottom:1px solid var(--wp--preset--color--line);
    padding:1.5rem clamp(1.5rem,5vw,4.5rem);
    display:none;z-index:50;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  .momentum-nav.is-open .momentum-nav-panel{display:block;}
  .momentum-nav-panel .momentum-menu{flex-direction:column;align-items:flex-start;gap:1.25rem;}
  .momentum-nav-panel .momentum-menu a{font-size:.95rem;letter-spacing:.12em;}
}

/* Seitennummerierung der Werke-Übersicht */
.momentum-werke-query .wp-block-query-pagination{gap:1.5rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;}
.momentum-werke-query .wp-block-query-pagination a,
.momentum-werke-query .wp-block-query-pagination .wp-block-query-pagination-numbers{color:var(--wp--preset--color--muted);}
.momentum-werke-query .wp-block-query-pagination a:hover{color:var(--wp--preset--color--accent);}
.momentum-werke-query .wp-block-query-pagination .current{color:var(--wp--preset--color--accent);font-weight:600;}

/* „Zurück zu den Werken"-Link */
.momentum-back-link{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin:0;}
.momentum-back-link a{color:var(--wp--preset--color--muted);text-decoration:none;}
.momentum-back-link--accent a{color:var(--wp--preset--color--accent);}
.momentum-back-link a:hover{color:var(--wp--preset--color--accent);}

/* ---- Onepage: Werk-Strom ---- */
/* Bildgröße pro Beitrag */
.momentum-size-small .momentum-diptych{max-width:560px;margin-inline:auto;}
.momentum-size-large .momentum-diptych{max-width:none;}

/* Jeder Beitrag als klar abgegrenzter Abschnitt */
.momentum-work{scroll-margin-top:80px;}

/* Dezente Trennlinie zwischen den Werken */
.momentum-sep.wp-block-separator{
  border:0;height:1px;width:120px;max-width:60%;
  margin-inline:auto;
  background:var(--wp--preset--color--accent-dim) !important;
  opacity:.55;
}
/* nach dem letzten Werk keine Linie */
.momentum-stream > li:last-child .momentum-sep{display:none;}

/* Eigener Audio-Player (Momentum) */
.momentum-player{
  display:flex;align-items:center;gap:1.25rem;
  border:1px solid var(--wp--preset--color--line);
  background:var(--wp--preset--color--surface);
  padding:1rem 1.25rem;border-radius:2px;margin-top:1.25rem;
}
.momentum-player__toggle{
  flex:none;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--wp--preset--color--accent);background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.momentum-player__toggle:hover,.momentum-player__toggle:focus-visible{background:var(--wp--preset--color--accent);}
.mp-icon{display:block;}
.mp-play{width:0;height:0;margin-left:3px;
  border-left:12px solid var(--wp--preset--color--accent);
  border-top:8px solid transparent;border-bottom:8px solid transparent;}
.momentum-player__toggle:hover .mp-play,.momentum-player__toggle:focus-visible .mp-play{border-left-color:var(--wp--preset--color--base);}
.mp-pause{width:12px;height:14px;position:relative;}
.mp-pause::before,.mp-pause::after{content:"";position:absolute;top:0;width:3.5px;height:14px;background:var(--wp--preset--color--accent);}
.mp-pause::before{left:1px;} .mp-pause::after{right:1px;}
.momentum-player__toggle:hover .mp-pause::before,.momentum-player__toggle:hover .mp-pause::after{background:var(--wp--preset--color--base);}
.momentum-player__meta{flex:none;min-width:118px;display:flex;flex-direction:column;gap:4px;}
.mp-kicker{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp--preset--color--accent);}
.mp-label{font-family:var(--wp--preset--font-family--cormorant);font-style:italic;font-size:1rem;line-height:1.2;color:var(--wp--preset--color--muted);}
.momentum-player__wave{flex:1;display:flex;align-items:center;gap:3px;height:36px;cursor:pointer;min-width:90px;}
.momentum-player__wave span{flex:1;min-width:2px;max-width:5px;height:30%;border-radius:2px;background:var(--wp--preset--color--accent-dim);opacity:.5;transition:opacity .2s ease, background .2s ease;}
.momentum-player__wave span.on{background:var(--wp--preset--color--accent);opacity:1;}
.momentum-player__time{flex:none;font-size:.8rem;color:var(--wp--preset--color--faint);font-variant-numeric:tabular-nums;letter-spacing:.04em;}
@media (max-width:600px){
  .momentum-player{flex-wrap:wrap;gap:.85rem 1rem;}
  .momentum-player__meta{order:3;min-width:0;}
  .momentum-player__wave{order:2;min-width:140px;}
  .momentum-player__time{order:4;margin-left:auto;}
}

/* reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
