/*
Theme Name:   Sharks Gmunden
Theme URI:    https://traunsee-sharks.com
Description:  Child-Theme von Twenty Twenty-Five. Design-Tokens uebernommen aus dem Projekt Pondhockey Business Weisswurstcup (Anton / Oswald / Inter, Anthrazit-Rot-Eisblau). Alle Farben, Schriften, Abstaende liegen in theme.json und sind ueber "Design > Stile" im Backend aenderbar.
Author:       UEHV Traunsee-Sharks Gmunden
Version:      1.0.0
Template:     twentytwentyfive
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  sharks-gmunden
*/

/* ==========================================================================
   Diese Datei enthaelt AUSSCHLIESSLICH Dinge, die sich nicht in theme.json
   ausdruecken lassen. Alles andere gehoert nach theme.json.
   Wer hier etwas ergaenzt, hinterlaesst Wartungsschuld -- bitte sparsam.
   ========================================================================== */


/* --- 1. Dezentes Korn ueber der Seite -------------------------------------
   Ein einziges Regelwerk, kein JS, keine Bilddatei. Uebernommen 1:1.        */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --- 2. Eyebrow: rotes Kleinversalien-Label mit Balken --------------------
   Block-Stil fuer den Absatz-Block, registriert in functions.php.
   Textfarbe: red-text (#FF4D53), nicht red -- Kontrastgruende.             */
.is-style-sharks-eyebrow {
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--wp--preset--color--red-text);
  /* display:flex (block-level), NICHT inline-flex: auf Inline-Boxen
     wirken die auto-Margins des constrained Layouts nicht -- das Label
     wuerde aus der Inhaltsspalte an den linken Seitenrand fallen.     */
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: .4em;
}
.is-style-sharks-eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--wp--preset--color--red);
  display: inline-block;
  flex: 0 0 auto;
}
/* Auf hellen Sektionen das satte Rot -- dort reicht der Kontrast. */
.has-ice-background-color .is-style-sharks-eyebrow,
.has-white-background-color .is-style-sharks-eyebrow {
  color: var(--wp--preset--color--red);
}
/* Im Hero-Cover (immer dunkel, in beiden Stil-Varianten): helles Rot fix. */
.wp-block-cover .is-style-sharks-eyebrow {
  color: #FF4D53;
}
.wp-block-cover .is-style-sharks-eyebrow::before {
  background: #C0161C;
}


/* --- 3. Angeschraegter Button --------------------------------------------
   Der eine Zierschnitt, der die Marke traegt. Block-Stil "Sharks",
   damit der Standard-Button unangetastet bleibt.                            */
.wp-block-button.is-style-sharks-skew .wp-block-button__link {
  clip-path: polygon(0 0, 100% 0, 97% 100%, 0% 100%);
  transition: transform .15s, background .15s;
}
.wp-block-button.is-style-sharks-skew .wp-block-button__link:hover {
  transform: translateY(-2px);
}


/* --- 4. Fokus sichtbar ---------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--red-text);
  outline-offset: 3px;
}


/* --- 5. Helle Sektionen: Textfarben mitziehen -----------------------------
   Gruppe mit Hintergrund "ice" -> Text automatisch auf ink.
   Wichtig fuer die Tabellen-/Spielplan-Sektion (hockeydata-Widgets
   erwarten hellen Grund).                                                   */
.wp-block-group.has-ice-background-color,
.wp-block-group.has-ice-background-color :where(p, li, td, th, dd, dt) {
  color: var(--wp--preset--color--ink);
}
.wp-block-group.has-ice-background-color :where(h1, h2, h3, h4, h5, h6) {
  color: var(--wp--preset--color--ink);
}


/* --- 6. Lesetext: Waisenkinder und Umbrueche ------------------------------ */
:where(.entry-content) p {
  text-wrap: pretty;
}
:where(h1, h2, h3) {
  text-wrap: balance;
}


/* --- 6b. Diagonal angeschnittene Sektion -----------------------------------
   Block-Stil fuer Gruppen, registriert in functions.php. Traegt die
   Diagonale des Skew-Buttons als Leitmotiv in die Sektionsuebergaenge.
   Der Anschnitt frisst in das vorhandene Padding -- Sektionen mit
   diesem Stil brauchen oben/unten mindestens Abstand 50.               */
.is-style-sharks-cut {
  --sharks-cut: clamp(16px, 2.5vw, 34px);
  clip-path: polygon(0 var(--sharks-cut), 100% 0, 100% calc(100% - var(--sharks-cut)), 0 100%);
}


/* --- 6c. Kader-Karten mit Nummern-Overlay ----------------------------------
   Hockey-Card-Look: Rueckennummer gross in Anton ueber der Fotoecke,
   Positions-Badge im Skew-Stil. Markup kommt aus den Team-Seiten
   (Gruppe .sharks-playercard-media um das Spielerfoto).                */
.sharks-playercard-media {
  position: relative;
}
.sharks-playercard-media .wp-block-image {
  margin: 0;
}
.sharks-playercard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(23, 25, 29, 0.75) 0%, rgba(23, 25, 29, 0) 42%);
}
.sharks-playercard-media .sharks-playernumber {
  position: absolute;
  right: 14px;
  bottom: -14px;
  z-index: 2;
  margin: 0;
  font-family: var(--wp--preset--font-family--anton);
  font-size: clamp(56px, 6vw, 92px);
  line-height: 1;
  color: var(--wp--preset--color--white);
  opacity: .92;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.sharks-playercard-media .sharks-playerpos {
  position: absolute;
  left: 0;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  background: var(--wp--preset--color--red);
  color: #ffffff;
  font-family: var(--wp--preset--font-family--oswald);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 5px 12px;
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0% 100%);
}


/* --- 7. Navigation: Dropdowns buendig zum Elternpunkt ----------------------
   WordPress klappt Untermenues bei rechtsbuendiger Navigation nach links auf
   (Viewport-Schutz). Unsere Untermenues sind schmal genug -- linke Kante
   buendig zum Menuepunkt, aufklappen nach rechts. Gilt nur fuer die erste
   Ebene; tiefere Ebenen (falls je noetig) behalten das Core-Verhalten.      */
.wp-block-navigation .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation__submenu-container {
  /* 1em = horizontales Link-Padding im Untermenue (Core: .5em 1em).
     So ist der TEXT buendig mit dem Elternpunkt, nicht die Box.    */
  left: calc(-1em - 1px) !important;
  right: auto !important;
}


/* --- 8. Reduzierte Bewegung ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}