/**
 * Tycoon CMS – Custom Styles
 *
 * Ergänzende Styles zum Tailwind CSS Framework.
 * Hier werden projektspezifische Anpassungen und Animationen definiert.
 */

/* ============================================================
   Basis-Resets & Globals
   ============================================================ */

:root {
    --color-primary: #52525b;
    --color-primary-dark: #3f3f46;
    --transition-base: 200ms ease;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus-Styles für Barrierefreiheit (WCAG 2.4.7 / 1.4.11).
   Der Ring muss auf HELLEM und DUNKLEM Grund sichtbar sein – das Frontend hat beides
   (heller Body, dunkler Footer/Hero). Ein einzelner grauer Ring (die Marke ist Zinc)
   verschwindet auf dunklem Grund. Deshalb zwei Konturen: eine dunkle Outline für helle
   Flächen, ein heller box-shadow-Ring, der sie von dunklen Flächen abhebt. Diese
   Kombination steht auf jedem Hintergrund. */
:focus-visible {
    outline: 2px solid #18181b;
    /* dunkel – Kontrast auf hell */
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fafafa;
    /* hell – Kontrast auf dunkel */
    border-radius: 2px;
}

/* Auf dunklen Flächen dreht sich das Verhältnis um: helle Outline, dunkler Trennring. */
.bg-secondary-900 :focus-visible,
.bg-secondary-800 :focus-visible,
footer :focus-visible {
    outline-color: #fafafa;
    box-shadow: 0 0 0 4px #18181b;
}

/* Nicht-interaktive Landmarks (v.a. <main> als Skip-Link-Ziel) erhalten programmatisch
   den Fokus, sind aber kein Bedienelement. Der breite Ring wirkt dort nur störend (beim
   Refresh sichtbar) und hat keinen a11y-Nutzen – WCAG 2.4.7 gilt für UI-Komponenten, nicht
   für Landmark-Container. Deshalb hier gezielt neutralisiert; echte Controls behalten den Ring. */
main:focus,
main:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Reduzierte Bewegung respektieren (WCAG 2.3.3 / vestibuläre Beschwerden).
   Wer im Betriebssystem „Bewegung reduzieren“ aktiviert, bekommt keine Animationen und
   kein sanftes Scrollen. Deckt fadeIn/slideUp/pulse-soft, alle transition-*-Utilities und
   das scroll-smooth im <html> ab. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Skip-Link „Zum Inhalt springen“ (WCAG 2.4.1): erstes fokussierbares Element,
   normalerweise ausgeblendet, bei Tastatur-Fokus sichtbar oben links. Ohne ihn müsste
   ein Tastatur-/Screenreader-Nutzer auf JEDER Seite erst durch die komplette Navigation. */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: #18181b;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: top 150ms ease;
}

.skip-link:focus {
    top: 0;
}

/* ============================================================
   Content-Base-Typografie  (die „grobe Vorlage" wie Bootstrap-Reboot)
   ------------------------------------------------------------
   Tailwinds Preflight (in tailwind.css UND jeder theme.css) setzt Überschriften
   und Absätze bewusst auf Fließtext zurück – ideal für die utility-first-Shell,
   aber im redaktionellen Inhalt sollen KLASSENLOSE Elemente von sich aus lesbar
   sein. Dann kann ein Redakteur reines HTML schreiben, ohne jede Zeile zu beklassen;
   die KI setzt zusätzlich Utilities, wo sie feiner steuern will.

   Auf #content gescopt – dem Inhaltscontainer des Frontend-Layouts (<main
   id="content">, Ziel des Skip-Links). Zwei Gründe:
     1) Spezifität: #content :where(h1) ergibt (1,0,0) und schlägt Preflight h1
        (0,0,1) UNABHÄNGIG von der Ladereihenfolge (Preflight lädt später). Ein
        blankes h1 { } würde gegen Preflight VERLIEREN.
     2) Abgrenzung: die Theme-Shell (Header/Footer, utility-first) bleibt unberührt;
        das Cockpit nutzt <main class="p-6"> ohne #content und ist ebenfalls außen vor.

   :where() hält die Spezifität bei (1,0,0) – gerade so viel, dass Preflight verliert,
   aber jede Utility (#content .klasse = 1,1,0 aus dem content_css) und jede Theme-Regel
   mühelos gewinnt. Größen als Design-Tokens (var(--text-*)), damit die Basis zum
   Typenraster des aktiven Themes passt.
   ============================================================ */
/* In @layer base: Vorrang jetzt über die Cascade-Layer, nicht über „unlayered".
   Ungelayerte Regeln schlugen bisher JEDE gelayerte Utility – deshalb überstimmte diese
   Basis das theme.css (`@layer utilities`) und die Utility-Klassen des Inhalts
   (h-full/object-cover, text-6xl, no-underline …). Als base-Layer verliert sie sauber
   gegen utilities (Layer-Ordnung), schlägt aber weiter Preflight (ebenfalls @layer base)
   – dort gewinnt die höhere `#content`-Spezifität. content_css (inline/ungelayert) und
   damit der Editor bleiben ohnehin oben auf. Isolation via `#content` unverändert. */
@layer base {
    #content :where(h1, h2, h3, h4, h5, h6) {
        font-weight: 700;
        line-height: 1.2;
        text-wrap: balance;
    }

    #content :where(h1) {
        font-size: var(--text-4xl);
        line-height: 1.1;
        margin-block: 0 .5em;
    }

    #content :where(h2) {
        font-size: var(--text-3xl);
        margin-block: 1.4em .5em;
    }

    #content :where(h3) {
        font-size: var(--text-2xl);
        margin-block: 1.2em .4em;
    }

    #content :where(h4) {
        font-size: var(--text-xl);
        margin-block: 1em .35em;
    }

    #content :where(h5) {
        font-size: var(--text-lg);
        margin-block: 1em .35em;
    }

    #content :where(h6) {
        font-size: var(--text-base);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-block: 1em .35em;
    }

    #content :where(p) {
        margin-block: 0 1em;
        line-height: 1.7;
    }

    #content :where(ul, ol) {
        margin-block: 0 1em;
        padding-inline-start: 1.5em;
    }

    #content :where(ul) {
        list-style: disc;
    }

    #content :where(ol) {
        list-style: decimal;
    }

    #content :where(li) {
        margin-block: .25em 0;
    }

    #content :where(a) {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    #content :where(blockquote) {
        margin-block: 1em;
        padding-inline-start: 1em;
        border-inline-start: 3px solid currentColor;
    }

    #content :where(hr) {
        margin-block: 2em;
        border: 0;
        border-top: 1px solid currentColor;
        opacity: .15;
    }

    #content :where(img) {
        max-width: 100%;
        height: auto;
    }

    #content :where(table) {
        width: 100%;
        border-collapse: collapse;
        margin-block: 1em;
    }

    #content :where(th, td) {
        border: 1px solid currentColor;
        padding: .5em .75em;
        text-align: start;
    }

    #content :where(th) {
        font-weight: 600;
    }
}

/* ============================================================
   Animationen
   ============================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-soft {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease forwards;
}

/* ============================================================
   Komponenten
   ============================================================ */

/* Button-Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 10px 25px -5px rgba(82, 82, 91, 0.3);
}

/* Card */
.card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
    border-color: #d4d4d8;
}

/* Flash-Message Transitions */
.flash-message {
    animation: slideUp 0.3s ease forwards;
}