/*
Theme Name:   TOREX
Theme URI:    https://torex.team
Author:       TOREX — Tornado-Experten-Verbund Deutschland
Description:  Block-Theme für torex.team — das Presseportal des Tornado-Experten-Verbunds Deutschland. Dunkles, sachliches Design mit Radar-Signatur. Blog dient als News-Bereich, Kommentare deaktiviert.
Version:      1.0.3
Requires at least: 6.5
Tested up to: 6.8
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:  torex
*/

/* =============================================================
   TOREX Custom-CSS — ergänzt theme.json
   Farbwerte kommen aus theme.json (--wp--preset--color--*),
   hier stehen nur Dinge, die theme.json nicht kann:
   Signatur-Elemente, Chips, Animationen, Feinheiten.
   ============================================================= */

/* ---------- Radar-Signatur (Hero-Hintergrund) ----------
   Das eine Erinnerungs-Element der Seite: ein langsam
   rotierender Radarschirm, sehr zurückhaltend, hinter dem
   Hero-Inhalt. Als Klasse auf eine Gruppe legbar. */
.torex-radar-bg{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.torex-radar-bg::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%; right:-12rem;
  width: 56rem; height: 56rem;
  transform: translateY(-50%);
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0 4.4rem,
      rgba(64,191,168,.055) 4.4rem calc(4.4rem + 1px)),
    conic-gradient(from 0deg,
      rgba(64,191,168,.16) 0deg,
      rgba(64,191,168,.04) 55deg,
      transparent 110deg 360deg);
  animation: torex-sweep 24s linear infinite;
}
.torex-radar-bg::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%; right:-12rem;
  width:56rem; height:56rem;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(64,191,168,.14);
  background:
    linear-gradient(rgba(64,191,168,.10), rgba(64,191,168,.10)) 50% 50% / 100% 1px no-repeat,
    linear-gradient(rgba(64,191,168,.10), rgba(64,191,168,.10)) 50% 50% / 1px 100% no-repeat;
}
@keyframes torex-sweep{
  to{ transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .torex-radar-bg::before{ animation:none; }
}
@media (max-width: 781px){
  .torex-radar-bg::before,
  .torex-radar-bg::after{ right:-30rem; opacity:.7; }
}

/* ---------- Eyebrow / Kicker ---------- */
.torex-eyebrow{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--radar);
  display:flex; align-items:center; gap:.65rem;
}
.torex-eyebrow::before{
  content:""; width:1.4rem; height:2px;
  background: var(--wp--preset--color--radar);
  opacity:.85;
}

/* ---------- IF-Skala-Chips ----------
   Rating-Kennzeichnung nach Internationaler Fujita-Skala.
   Farben funktional (Intensität), bewusst greller als die
   Oberflächenwelt — wie eine echte Warnkennzeichnung. */
.torex-if{
  display:inline-flex; align-items:center;
  padding:.28rem .7rem;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--mono);
  font-size:.72rem; font-weight:700;
  letter-spacing:.06em;
  border:1px solid transparent;
}
.torex-if--0  { background:#24333C; color:#AFC5CF; border-color:rgba(255,255,255,.14); }
.torex-if--1  { background:#F7C948; color:#3A2E00; }
.torex-if--2  { background:#F09030; color:#2B1600; }
.torex-if--3  { background:#E4453A; color:#fff; }
.torex-if--4  { background:#C0269C; color:#fff; }
.torex-if--5  { background:#7B2FBE; color:#fff; }

/* ---------- Karten / Panels ---------- */
.torex-card{
  background: var(--wp--preset--color--abyss);
  border:1px solid var(--wp--preset--color--line);
  border-radius:14px;
}
.torex-card:where(:hover,:focus-within){
  border-color: rgba(64,191,168,.35);
}

/* Prozess-Schritte: Nummern in Mono, Radarteal */
.torex-step-no{
  font-family: var(--wp--preset--font-family--mono);
  font-size:.8rem;
  color: var(--wp--preset--color--radar);
  letter-spacing:.1em;
}

/* ---------- News-Meta ---------- */
.wp-block-post-date, .torex-meta{
  font-family: var(--wp--preset--font-family--mono);
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color: var(--wp--preset--color--text-mute);
}

/* ---------- Fokus sichtbar ---------- */
:where(a, button, input, [tabindex]):focus-visible{
  outline:2px solid var(--wp--preset--color--radar);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Header ----------
   WICHTIG: backdrop-filter darf NICHT auf .torex-header selbst liegen —
   es macht den Header zum Containing Block für position:fixed und sperrt
   das mobile Navigations-Overlay in die Header-Box ein. Deshalb liegt der
   Blur auf einem ::before ohne Nachfahren. */
.torex-header{
  border-bottom:1px solid var(--wp--preset--color--line);
  background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
  isolation: isolate;
}
.torex-header::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Pressekontakt als Button-Menüpunkt (Desktop-Leiste und Overlay) */
.torex-nav .torex-nav-cta a,
.torex-nav-cta .wp-block-navigation-item__content{
  background: var(--wp--preset--color--radar);
  color:#04211C !important;
  font-family: var(--wp--preset--font-family--display);
  font-weight:600;
  padding:.5rem 1.05rem;
  border-radius:10px;
}
.torex-nav .torex-nav-cta a:hover,
.torex-nav-cta .wp-block-navigation-item__content:hover{
  background:#5ED4BF;
}

/* ---------- Mobiles Overlay-Menü ---------- */
/* Burger-/Schließen-Icon in Textfarbe und gut antippbar */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  color: var(--wp--preset--color--text);
  padding:.4rem;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg{
  width:28px; height:28px;
}
/* Geöffnet: ganze Fläche, große Einträge, mittig */
.wp-block-navigation__responsive-container.is-menu-open{
  padding: 5.5rem clamp(1.5rem,8vw,3rem) 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
  align-items:flex-start;
  gap:0;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
  gap:1.4rem;
  align-items:flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
  font-family: var(--wp--preset--font-family--display);
  font-weight:600;
  font-size:1.5rem;
}
/* CTA im Overlay mit Abstand nach oben und voller Button-Optik */
.wp-block-navigation__responsive-container.is-menu-open .torex-nav-cta{
  margin-top:1.2rem;
}
.wp-block-navigation__responsive-container.is-menu-open
  .torex-nav-cta .wp-block-navigation-item__content{
  font-size:1.15rem;
  padding:.85rem 1.6rem;
}

/* Wortmarke: SVG-Logo als <img> (Dark-Variante, via Pattern eingebunden) */
.torex-wordmark{
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.8rem;
}
.torex-wordmark img,
.torex-wordmark svg{ height:4.7rem; width:auto; display:block; }
.torex-wordmark--footer img,
.torex-wordmark--footer svg{ height:2.6rem; }

/* ---------- Footer: Listen ohne Bullets, ruhige Links ---------- */
.torex-footer ul{
  list-style:none;
  margin:0;
  padding-left:0;
}
.torex-footer li{ margin-bottom:.45rem; }
.torex-footer a{ text-decoration:none; }
.torex-footer a:hover{ color: var(--wp--preset--color--radar); }

/* ---------- Fließtext-Links (Beiträge/Seiten): Unterstreichung bewusst AN ----------
   Global sind Links ohne Unterstreichung (theme.json). Im redaktionellen
   Inhalt bleibt sie aus Gründen der Erkennbarkeit erhalten. */
.entry-content a:not(.wp-block-button__link){
  text-decoration:underline;
  text-decoration-color: rgba(64,191,168,.5);
  text-underline-offset: 3px;
}
.entry-content a:not(.wp-block-button__link):hover{
  color: var(--wp--preset--color--radar);
}

/* Navigation, Paginierung, Beitragstitel: keine Unterstreichung */
.wp-block-navigation a,
.wp-block-query-pagination a,
.wp-block-post-title a,
.wp-block-read-more{
  text-decoration:none;
}
.torex-wordmark .claim{
  font-family: var(--wp--preset--font-family--mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--wp--preset--color--text-mute);
}
@media (max-width: 781px){ .torex-wordmark .claim{ display:none; } }

/* ---------- Footer-Credit (transparent, klein) ---------- */
.torex-credit{
  font-family: var(--wp--preset--font-family--mono);
  font-size:.7rem; letter-spacing:.05em;
  color: var(--wp--preset--color--text-mute);
}
.torex-credit a{ color: var(--wp--preset--color--text-soft); text-decoration:none; }
.torex-credit a:hover{ color: var(--wp--preset--color--radar); }