/*
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.1.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%);
}

/* Kaderkarten am Handy.
   Bei drei Spalten ist eine Karte nur rund 100px breit -- dort ueberdeckt der
   Positions-Badge die Rueckennummer (aus "30" wird "50", die "61" verschwindet
   fast). Deshalb auf schmalen Schirmen zwei Spalten, dazu Nummer und Badge
   etwas kleiner. Nebeneffekt: Die Portraets werden endlich gross genug, um
   Gesichter zu erkennen.

   Bewusst nur die Kaderraster: :has() greift nur, wenn im Raster auch
   Spielerkarten stecken -- die News-, Sponsoren- und Kontaktraster bleiben
   unveraendert. Browser ohne :has() zeigen weiterhin drei Spalten, das ist
   der bisherige Zustand und damit unkritisch. */
@media (max-width: 600px) {
  .wp-block-group.is-layout-grid:has(.sharks-playercard-media) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sharks-playercard-media .sharks-playernumber {
    font-size: 44px;
    right: 10px;
    bottom: -8px;
  }
  .sharks-playercard-media .sharks-playerpos {
    font-size: .6rem;
    letter-spacing: .08em;
    padding: 4px 9px;
    bottom: 12px;
  }
}


/* --- 6d. Fanshop-Produktkarten ---------------------------------------------
   Preis (Anton) darf nie umbrechen; lange Produktnamen wrappen stattdessen.
   Info-Zeile oben ausgerichtet: der Preis fluchtet mit der Namenszeile,
   auch wenn der Name eine Unterzeile hat (Sonnenbrille).                  */
.sharks-produktkarte > .wp-block-group {
  align-items: flex-start;
}
.sharks-produktkarte .has-anton-font-family {
  white-space: nowrap;
  line-height: 1.15;
}
.sharks-produktkarte h3 {
  min-width: 0;
  overflow-wrap: break-word;
}


/* --- 6e. WooCommerce-Blocks (Warenkorb/Kasse) im Sharks-Look -----------------
   Woo liefert weisse Eingabefelder, die schwebenden Labels erben aber die
   weisse Theme-Textfarbe -- unlesbar. Felder auf das Karten-Schema umgestellt
   (nutzt Palette-Variablen, funktioniert also auch in der Eis-Variante).    */
.wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__input,
.wc-block-components-select .wc-block-components-select__select {
  background-color: var(--wp--preset--color--char-2) !important;
  border: 1px solid var(--wp--preset--color--line) !important;
  color: var(--wp--preset--color--white) !important;
  border-radius: 0 !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label,
.wc-block-components-form .wc-block-components-checkbox__label {
  color: var(--wp--preset--color--steel) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox .components-combobox-control__input:focus,
.wc-block-components-select .wc-block-components-select__select:focus {
  outline: 2px solid var(--wp--preset--color--red-text) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}
/* Mengen-Badge am Produktbild in der Bestelluebersicht */
.wc-block-components-order-summary-item__quantity {
  background: var(--wp--preset--color--red) !important;
  color: #ffffff !important;
  border: 0 !important;
  opacity: 1 !important;
}
/* Klassische Woo-Produktseite: Varianten-Dropdown (Groesse) und Menge erben
   sonst die Browser-Systemfarben -- im Dunkel-Theme dunkle Schrift auf dunklem
   Grund. Gleiches Karten-Schema wie oben, inkl. der Optionsliste selbst.     */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .quantity .qty {
  background-color: var(--wp--preset--color--char-2);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--white);
  border-radius: 0;
  padding: 8px 10px;
}
.woocommerce div.product form.cart .variations select option {
  background-color: var(--wp--preset--color--char-2);
  color: var(--wp--preset--color--white);
}
.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.cart .quantity .qty:focus {
  outline: 2px solid var(--wp--preset--color--red-text);
  outline-offset: 1px;
}


/* --- 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;
}


/* --- 7b. Saison-Chronik (klappbare core/details) ------------------------- */
.wp-block-details {
  border: 1px solid var(--wp--preset--color--line);
  border-left: 3px solid var(--wp--preset--color--red);
  background: var(--wp--preset--color--char-2);
  padding: 0 1.1em;
  margin: 0 0 6px;
}
.wp-block-details > summary {
  font-family: var(--wp--preset--font-family--oswald, sans-serif);
  font-weight: 600;
  letter-spacing: .04em;
  padding: .7em 0;
  cursor: pointer;
  list-style-position: inside;
}
.wp-block-details > summary:hover { color: var(--wp--preset--color--red-text); }
.wp-block-details[open] {
  padding-bottom: .6em;
  border-left-color: var(--wp--preset--color--red-text);
}
.wp-block-details[open] > summary { border-bottom: 1px solid var(--wp--preset--color--line); margin-bottom: .6em; }
.wp-block-details p { margin: 0 0 .7em; }

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