/*
Theme Name: greys.cc
Theme URI: https://greys.cc
Author: greys.cc Redaktion
Description: Offizielles WordPress-Theme für greys.cc — Magazin für Technologie & Zukunft. Umsetzung des Frontpage-Designs (Hero, Neu erschienen, Themen, Im Fokus, Meistgelesen, Newsletter) inkl. Artikel- und Archivvorlagen.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: greyscc
*/

/* ============================================================
   Alle Layout-Regeln werden über Tailwind (siehe functions.php)
   ausgeliefert, exakt wie im Design-Dummy. Diese Datei enthält
   nur die globalen, nicht-Tailwind Ergänzungen aus dem Original.
   ============================================================ */

body { font-family:'Figtree',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.display { font-family:'Schibsted Grotesk','Figtree',sans-serif; letter-spacing:-0.02em; }
h1,h2,h3,h4 { text-wrap:balance; } p { text-wrap:pretty; }
html { scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} }

.ph { background:linear-gradient(135deg,#eef0ff 0%,#e3e5fb 100%); color:#8b8bf7; display:flex; align-items:center; justify-content:center; font-size:.8rem; }

.glow { background:
  radial-gradient(60rem 40rem at 82% -10%, rgba(107,107,242,.14), transparent 60%),
  radial-gradient(50rem 36rem at 0% 8%, rgba(139,139,247,.10), transparent 55%); }

.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1!important;transform:none!important;transition:none} }

.imgzoom { overflow:hidden; }
.imgzoom img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.group:hover .imgzoom img { transform: scale(1.05); }
@media (prefers-reduced-motion:reduce){ .imgzoom img{transition:none} }

.ulink { background-image: linear-gradient(currentColor,currentColor); background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s cubic-bezier(.22,.61,.36,1); }
.ulink:hover { background-size:100% 1.5px; }

::selection { background:#cdd0ff; color:#10121c; }

/* Artikel-Fließtext (single.php) */
.article-body { font-size:1.0625rem; line-height:1.75; color:#3a3f55; }
.article-body > p { margin-top:1.4rem; } .article-body > p:first-child { margin-top:0; }
.article-body .lead { font-size:1.28rem; line-height:1.6; color:#171a2b; }
.article-body h2 { font-family:'Schibsted Grotesk',sans-serif; letter-spacing:-0.02em; font-weight:700; font-size:1.7rem; line-height:1.18; color:#10121c; margin-top:3rem; scroll-margin-top:6rem; }
.article-body h3 { font-family:'Schibsted Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:#10121c; margin-top:2rem; }
.article-body ul { margin-top:1.1rem; padding-left:0; list-style:none; }
.article-body ul li { position:relative; padding-left:1.6rem; margin-top:.6rem; }
.article-body ul li::before { content:''; position:absolute; left:.15rem; top:.62rem; width:7px; height:7px; border-radius:9999px; background:#5b5bf0; }
.article-body strong { color:#171a2b; font-weight:600; }
.article-body a:not(.no-prose):not(.heading-anchor) { color:#4a45d6; text-decoration:underline; text-underline-offset:2px; }
.article-body img { border-radius:1.5rem; }

.table-wrap { overflow-x:auto; margin:2rem 0; }
.article-body table { width:100%; border-collapse:collapse; font-size:.95rem; }
.article-body th,.article-body td { text-align:left; padding:.75rem 1rem; border-bottom:1px solid #e3e5fb; }
.article-body thead th { background:#f0f1ff; color:#10121c; font-weight:600; white-space:nowrap; border-bottom:2px solid #5b5bf0; }
.article-body tbody tr:nth-child(even) { background:#f6f7ff; }
.article-body caption { caption-side:bottom; margin-top:.7rem; font-size:.75rem; color:#5f6579; text-align:left; }

.faq { margin-top:1.4rem; }
.faq details { border-bottom:1px solid #e3e5fb; }
.faq details:first-child { border-top:1px solid #e3e5fb; }
.faq summary { cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative; font-weight:600; color:#10121c; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:.2rem; top:.8rem; font-size:1.5rem; color:#5b5bf0; line-height:1; }
.faq details[open] summary::after { content:'–'; }
.faq details .faq-a { margin:0 0 1.1rem; color:#3a3f55; line-height:1.7; }

.sources { counter-reset:src; list-style:none; padding:0; margin-top:1.2rem; font-size:.9rem; }
.sources li { counter-increment:src; position:relative; padding-left:2.4rem; margin-top:.8rem; color:#4c5268; line-height:1.6; }
.sources li::before { content:counter(src); position:absolute; left:0; top:.05rem; width:1.6rem; height:1.6rem; background:#eef0ff; color:#4a45d6; border-radius:9999px; font-size:.74rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

.heading-anchor { opacity:0; margin-left:.45rem; color:#b9bdea; text-decoration:none!important; font-weight:400; transition:opacity .15s,color .15s; }
.article-body h2:hover .heading-anchor,.heading-anchor:focus { opacity:1; }
.heading-anchor:hover { color:#5b5bf0; }
.toc-link { border-left:2px solid transparent; }
.toc-link.active { border-left-color:#5b5bf0; color:#10121c; font-weight:600; }
#toTop { opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; transform:translateY(6px); }
#toTop.show { opacity:1; pointer-events:auto; transform:none; }

/* WP core alignment helpers used inside post content */
.alignleft{float:left;margin:0 1.5rem 1rem 0;} .alignright{float:right;margin:0 0 1rem 1.5rem;} .aligncenter{display:block;margin:1rem auto;}
.wp-caption{max-width:100%;} .wp-caption-text{font-size:.8rem;color:#5f6579;margin-top:.4rem;}

/* ============================================================
   Beitrags-Navigation (the_posts_pagination) — WordPress gibt hier
   eigene Klassen aus (.page-numbers, .current, …), die Tailwind
   nicht kennt. Hier im Design-Stil (Pillen, Akzentfarbe) gestylt.
   ============================================================ */
.pagination { margin-top: 3rem; }
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .9rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 600;
  color: #3a3f55;
  background: #fff;
  border: 1px solid #d3d6f2;
  text-decoration: none;
  transition: all .2s cubic-bezier(.22,.61,.36,1);
}
.pagination a.page-numbers:hover {
  color: #171a2b;
  border-color: #8b8bf7;
  transform: translateY(-1px);
}
.pagination .page-numbers.current {
  background: #5b5bf0;
  border-color: #5b5bf0;
  color: #fff;
  box-shadow: 0 8px 30px -12px rgba(75,66,214,.22);
}
.pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  color: #b9bdea;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  font-weight: 700;
  padding: 0 1.1rem;
}
.pagination .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }