/*
Theme Name: CMS Phinit
Description: IT-Profi Theme inspiriert von phinit.de – Deep Navy, Gold-Akzente, professionelles Editorial-Layout für technische Blogs & Wissensseiten.
Version: 1.5.0
Author: PHINIT.DE / Andreas Hepp
Author URI: https://phinit.de
Tags: it, tech, editorial, blog, dark-mode, responsive, professional
*/

/* ═══════════════════════════════════════════════════════════════════════════
   1. CUSTOM PROPERTIES & DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* — Brand Colors — */
    --primary-color:     #1e3a5f;
    --primary-dark:      #0f2240;
    --primary-light:     #2d547a;
    --accent-color:      #e8a838;
    --accent-hover:      #d4922a;
    --accent-teal:       #0d9488;
    --accent-teal-light: #14b8a6;

    /* — Semantic — */
    --bg-primary:     #ffffff;
    --bg-secondary:   #f1f5f9;
    --bg-tertiary:    #e8eef5;
    --bg-dark:        #0a0f1a;
    --bg-dark-2:      #111827;
    --bg-dark-3:      #162030;

    --text-primary:   #1e293b;
    --text-secondary: #334155;
    --text-muted:     #64748b;
    --text-light:     #94a3b8;
    --text-white:     #f8fafc;

    --border-color:   #e2e8f0;
    --border-dark:    #1e2d3d;

    /* — Fluid Typography — */
    --fs-h1: clamp(1.75rem, 4vw, 2.75rem);
    --fs-h2: clamp(1.4rem,  3vw, 2rem);
    --fs-h3: clamp(1.15rem, 2.5vw, 1.5rem);
    --fs-h4: 1.15rem;
    --fs-body: 1rem;
    --fs-sm:  0.875rem;
    --fs-xs:  0.78rem;

    /* — Layout — */
    --container-max:  1200px;
    --sidebar-width:  300px;
    --header-h:       56px;
    --quicklinks-h:   38px;
    --spacing-header-content: 25px;
    --spacing-content-footer: 25px;
    --spacing-sections: 40px;
    --content-gap:    28px;

    /* — UI — */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
    --shadow:     0 4px 14px rgba(0,0,0,.09);
    --shadow-lg:  0 8px 28px rgba(0,0,0,.14);
    --transition: all 0.25s cubic-bezier(.4,0,.2,1);
    --transition-fast: all 0.15s ease;

    /* — Z-Index Scale — */
    --z-header:  1000;
    --z-mobile:  1100;
    --z-overlay: 1200;
    --z-tooltip: 1300;
}

/* — Dark Mode — */
body.dark-mode,
html.dark-mode body {
    --bg-primary:    #1a2332;
    --bg-secondary:  #111827;
    --bg-tertiary:   #1e2d3d;
    --text-primary:  #f1f5f9;
    --text-secondary:#e2e8f0;
    --text-muted:    #cbd5e1;
    --text-light:    #94a3b8;
    --text-nav:      rgba(241,245,249,.94);
    --text-nav-member: rgba(226,232,240,.9);
    --text-nav-quicklinks: #dbe5f1;
    --border-color:  #2a3a4d;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.mobile-menu-open { overflow: hidden; }

/* Dark side margins – Vignette-Effekt links/rechts */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: var(--page-edge-overlay-opacity, .12);
    background: linear-gradient(
        90deg,
        var(--page-edge-overlay-color, #0f172a) 0%,
        transparent 8%,
        transparent 92%,
        var(--page-edge-overlay-color, #0f172a) 100%
    );
}
.page-wrap, .site-header, .site-footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-teal); }
img { max-width: 100%; display: block; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT HELPERS
═══════════════════════════════════════════════════════════════════════════ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

.page-wrap {
    padding-top: calc(var(--header-h) + var(--quicklinks-h) + var(--member-bar-h, 0px) + var(--spacing-header-content));
    padding-bottom: var(--spacing-content-footer);
    min-height: calc(100vh - 280px);
}

body.home .page-wrap {
    padding-top: calc(var(--header-h) + var(--quicklinks-h) + var(--member-bar-h, 0px) + var(--home-spacing-header-content, var(--spacing-header-content)));
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. READING PROGRESS BAR
═══════════════════════════════════════════════════════════════════════════ */
/* Lesefortschrittsbalken wurde in `assets/css/ui-chrome.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════════
   5. STICKY HEADER (2 Ebenen)
═══════════════════════════════════════════════════════════════════════════ */
/* Header-, Navigation-, Dropdown- und Mobile-Menu-Styles wurden in
   `assets/css/header-navigation.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════════
   6. BUTTONS
═══════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    border: 2px solid transparent; transition: var(--transition-fast);
    white-space: nowrap; text-decoration: none; line-height: 1.4;
}
.btn-primary   { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-accent    { background: var(--accent-color); color: #1a1a1a; border-color: var(--accent-color); }
.btn-accent:hover  { background: var(--accent-hover); border-color: var(--accent-hover); color: #1a1a1a; }
.btn-outline   { background: transparent; color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline:hover { background: var(--primary-color); color: #fff; }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: var(--border-color); }
.btn-ghost:hover   { border-color: var(--accent-teal); color: var(--accent-teal); }
.btn-sm { padding: 5px 12px; font-size: var(--fs-xs); }
.btn-lg { padding: 12px 28px; font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. BADGES
═══════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; line-height: 1.7;
}
.badge-primary { background: var(--primary-color); color: #fff; }
.badge-accent  { background: var(--accent-color);  color: #1a1a1a; }
.badge-teal    { background: var(--accent-teal);   color: #fff; }
.badge-success { background: #16a34a; color: #fff; }
.badge-danger  { background: #dc2626; color: #fff; }
.badge-neutral { background: #e2e8f0; color: #475569; }
.badge-dark    { background: #1e293b; color: #94a3b8; }
.badge--align-start { align-self: flex-start; }

/* Search-/Error-/Empty-State-Styles wurden in `assets/css/page-extras.css` ausgelagert. */
/* Repo-Card-, Artikel-Listen-, Info-Grid- und Feed-Homepage-Komponenten wurden in
   `assets/css/homepage-blog.css` ausgelagert. */

/* Section-Header-, Post-Card-, Grid- und Blog-Empty-State-Basics wurden in
   `assets/css/content-cards.css` ausgelagert. */

/* Content-Section-Abstände sowie generische Blog-/Home-Pagination wurden in
    `assets/css/content-cards.css` ausgelagert. */

/* Blog-Archiv-Leiste (Backlink + Suche) wurde in
   `assets/css/homepage-blog.css` ausgelagert. */

/* Post-Sidebar-, Sticky-Layout- und TOC-Styles wurden in
   `assets/css/post-sidebar.css` ausgelagert. */

/* Social-Icon-Listen wurden in `assets/css/ui-chrome.css` ausgelagert. */

/* Single-Post-, Share-, Navigation- und Kommentar-Styles wurden in
   `assets/css/post-detail.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════════
   20. FOOTER
═══════════════════════════════════════════════════════════════════════════ */

/* Footer-/Consent-Styles wurden in `assets/css/footer-consent.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════════
   21. CONSENT BANNER
═══════════════════════════════════════════════════════════════════════════ */

/* Consent-Banner- und Back-to-top-Styles wurden in `assets/css/footer-consent.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════════
   22. CSS ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */
@keyframes anim-fade-up  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes anim-fade-in  { from { opacity: 0; } to { opacity: 1; } }

[data-anim] { opacity: 0; transform: translateY(22px); transition: opacity 0.55s cubic-bezier(.4,0,.2,1), transform 0.55s cubic-bezier(.4,0,.2,1); }
[data-anim].is-visible   { opacity: 1; transform: none; }
[data-anim][data-anim-delay="1"] { transition-delay: .1s; }
[data-anim][data-anim-delay="2"] { transition-delay: .2s; }
[data-anim][data-anim-delay="3"] { transition-delay: .3s; }
[data-anim][data-anim-delay="4"] { transition-delay: .4s; }

/* ═══════════════════════════════════════════════════════════════════════════
   23. PAGE CONTENT
═══════════════════════════════════════════════════════════════════════════ */
/* Page-Detail-, TOC-, Seiten-Header- und Seiteninhalt-Styles wurden in
   `assets/css/page-detail.css` ausgelagert. */

/* Hub-Site-Styles wurden in `assets/css/hub-sites.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════════
   24. UTILITY
═══════════════════════════════════════════════════════════════════════════ */
.text-muted  { color: var(--text-muted) !important; }
.text-teal   { color: var(--accent-teal) !important; }
.text-accent { color: var(--accent-color) !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; top: -60px; left: 0; background: var(--primary-color); color: #fff; padding: 8px 16px; border-radius: 0 0 var(--radius) 0; z-index: 9999; transition: top 0.2s; }
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   25. RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    :root { --sidebar-width: 260px; }
}

@media (max-width: 768px) {
    :root { --header-h: 52px; --quicklinks-h: 0px; }
    .page-wrap { padding-top: var(--header-h); }
    body.home .page-wrap { padding-top: calc(var(--header-h) + var(--home-spacing-header-content, var(--spacing-header-content, 15px))); }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }
}

/* Template-spezifische Styles wurden in `assets/css/templates.css` ausgelagert.
   Enthalten sind aktuell: post-wide, post-tech, page-wide und page-landing. */

/* ══════════════════════════════════════════════════════════════════
   STARTSEITE: HOMEPAGE-KOMPONENTEN
══════════════════════════════════════════════════════════════════ */

/* Homepage- und Blog-Styles wurden in `assets/css/homepage-blog.css` ausgelagert. */

/* Auth-/Member-Styles wurden in `assets/css/member-auth.css` ausgelagert. */

/* ══════════════════════════════════════════════════════════════════
   Blog Listing  (blog.php)
   ══════════════════════════════════════════════════════════════════ */

/* Blog-Listing-Styles wurden in `assets/css/homepage-blog.css` ausgelagert. */

/* ══════════════════════════════════════════════════════════════════
   2026 BEST PRACTICES
   ══════════════════════════════════════════════════════════════════ */

/* — Reduced Motion: Respect user accessibility preference — */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .post-hero-img { animation: none !important; }
    [data-anim] { opacity: 1 !important; transform: none !important; }
    #scroll-progress { display: none !important; }
    .back-to-top { transition: none !important; }
}

/* — Prefers Color Scheme (auto dark mode fallback) — */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) {
        --bg-primary:    #1a2332;
        --bg-secondary:  #111827;
        --bg-tertiary:   #1e2d3d;
        --text-primary:  #f1f5f9;
        --text-secondary:#e2e8f0;
        --text-muted:    #cbd5e1;
        --text-light:    #94a3b8;
        --text-nav:      rgba(241,245,249,.94);
        --text-nav-member: rgba(226,232,240,.9);
        --text-nav-quicklinks: #dbe5f1;
        --border-color:  #334155;
    }
}

/* — Focus-Visible: Modern keyboard focus indicators — */
:focus-visible {
    outline: 2px solid var(--accent-color, #e8a838);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-color, #e8a838);
    outline-offset: 2px;
}

/* — High Contrast: Better readability for forced-colors mode — */
@media (forced-colors: active) {
    .btn, .badge, .status-badge, .share-btn {
        border: 1px solid ButtonText;
    }
    .post-hero-img { border: 1px solid CanvasText; }
}

/* — Smooth Scroll (only when no motion preference) — */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* — Container Query readiness — */
.content-layout { container-type: inline-size; }

/* — Modern selection styling — */
::selection {
    background: var(--accent-color, #e8a838);
    color: var(--bg-dark, #0a0f1a);
}

/* — Print styles — */
@media print {
    .site-header, .site-footer, .sidebar, #scroll-progress,
    .back-to-top, .post-share, .post-nav, .comments-section,
    .consent-banner, .cookie-banner { display: none !important; }
    .page-wrap { padding: 0 !important; margin: 0 !important; }
    .content-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* Kleine Cross-Route-UI-Komponenten wurden in `assets/css/ui-chrome.css` ausgelagert. */

/* ═══════════════════════════════════════════════════════════════════════
   Editor.js / Rich-Content Fallbacks
   Seiten und Beiträge bleiben lesbar, auch ohne mitgelieferte Editor-Styles.
═══════════════════════════════════════════════════════════════════════ */

/* Rich-Content-Fallbacks wurden in `assets/css/rich-content.css` ausgelagert. */

/* ── og_default_image Customizer-Feld (Hinweis für theme.json) ─── */