/* ============================================================
   AQUARUBIN — main.css
   Design Tokens, Reset, Typografie, Layout-Basis
   DARK THEME — Deep Indigo (#191733) · Violet (#493A8F)
   #0080ff Blau | #ff00ff Pink | Font: Inter
   ============================================================ */

@layer base {

/* --- Design Tokens --- */
:root {
    /* Backgrounds — Deep Indigo Night (kühl, eine Hue-Familie) */
    --clr-bg:           #100e20;  /* Basis — Body / Grundfläche */
    --clr-bg-2:         #171531;  /* Alternative Sektionen */
    --clr-bg-3:         #191733;  /* Erhöhte / sekundäre Fläche */
    --clr-bg-card:      #1a1838;  /* Karten */
    --clr-bg-elevated:  #232048;  /* Hervorgehobene Flächen (violett getönt) */

    /* Brand — Magenta/Pink */
    --clr-ruby:         #ff00ff;
    --clr-ruby-dark:    #cc00cc;
    --clr-ruby-light:   #ff55ff;
    --clr-ruby-glow:    rgba(255, 0, 255, 0.20);
    --clr-ruby-glow-sm: rgba(255, 0, 255, 0.09);

    /* Brand — Electric Blue */
    --clr-blue:         #0080ff;
    --clr-blue-light:   #40aaff;
    --clr-blue-deep:    #001830;
    --clr-blue-glow:    rgba(0, 128, 255, 0.20);

    /* Brand — Violet (Brücke zwischen Blau & Pink) */
    --clr-violet:       #493A8F;
    --clr-violet-light: #8574d8;
    --clr-violet-dark:  #2e2559;
    --clr-violet-glow:  rgba(73, 58, 143, 0.35);

    /* Text — heller & besser lesbar (kühles Indigo-Grau) */
    --clr-text:         #eef1fb;
    --clr-text-muted:   #adb8d8;
    --clr-text-faint:   #808fb8;

    /* Borders */
    --clr-border:       rgba(255, 255, 255, 0.08);
    --clr-border-hover: rgba(255, 255, 255, 0.16);
    --clr-border-ruby:  rgba(255, 0, 255, 0.28);
    --clr-border-blue:  rgba(0, 128, 255, 0.28);
    --clr-border-violet: rgba(133, 116, 216, 0.32);

    /* Typography — Inter (Adobe Fonts, variabel 100–900) */
    --font-sans:   'inter-variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing scale */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Border radius */
    --radius-sm:   0.375rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-xl:   1.25rem;
    --radius-2xl:  1.75rem;
    --radius-pill: 9999px;

    /* Motion */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:     cubic-bezier(0.32, 0.72, 0, 1);

    /* Shadows — indigo-getönt (passend zum Hintergrund) */
    --shadow-sm:        0 1px 4px rgba(7,5,20,0.55), 0 1px 2px rgba(7,5,20,0.45);
    --shadow-card:      0 4px 24px rgba(7,5,20,0.58), 0 1px 4px rgba(7,5,20,0.45);
    --shadow-card-lg:   0 16px 48px rgba(7,5,20,0.66), 0 4px 12px rgba(7,5,20,0.5);
    --shadow-glow-ruby:   0 0 36px rgba(255, 0, 255, 0.26);
    --shadow-glow-blue:   0 0 40px rgba(0, 128, 255, 0.22);
    --shadow-glow-violet: 0 0 44px rgba(73, 58, 143, 0.42);
    /* Premium "lit top edge" — the frosted-glass highlight, without backdrop-filter cost */
    --edge-light:      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --edge-light-hover: inset 0 1px 0 rgba(255, 255, 255, 0.10);

    /* Containers */
    --container-max:    1400px;
    --container-narrow: 860px;
}

} /* end @layer base */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol { list-style: none; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* --- Typography Scale --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: 1.12;
    color: var(--clr-text);
    letter-spacing: -0.025em;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); }
h4 { font-size: 1.1rem; font-weight: 700; }

p { color: var(--clr-text-muted); line-height: 1.75; }

strong { color: var(--clr-text); font-weight: 700; }

/* --- Layout Utilities --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
}

.container--narrow {
    max-width: var(--container-narrow);
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.site-main {
    flex: 1;
}

/* --- Eyebrow Label --- */
.eyebrow {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--clr-ruby);
    background: var(--clr-ruby-glow-sm);
    border: 1px solid var(--clr-border-ruby);
    border-radius: var(--radius-pill);
    padding: 0.3em 1em;
    margin-bottom: var(--space-4);
}

/* --- Section Header --- */
.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-title {
    margin-bottom: var(--space-4);
}

.section-subtitle {
    max-width: 600px;
    margin-inline: auto;
    font-size: 1.05rem;
}

.section-cta {
    text-align: center;
    margin-top: var(--space-10);
}

/* --- Scroll Reveal Animations --- */
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.75s var(--ease-out-expo) var(--delay, 0s),
        transform 0.75s var(--ease-out-expo) var(--delay, 0s);
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fade {
    opacity: 0;
    transition: opacity 0.7s var(--ease-out-expo) var(--delay, 0s);
}
.reveal-fade.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Global safety net — neutralise ALL animation/transition site-wide
       (card lifts, spring hovers, spinners, banner scroll, kinetic reveals).
       Covers components.css / woocommerce.css / home.css which had no scoped
       reduced-motion rules of their own. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Posts Grid --- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.post-card {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring), border-color 0.3s;
}

.post-card:hover {
    transform: translateY(-4px);
    border-color: var(--clr-border-ruby);
    box-shadow: var(--shadow-card-lg);
}

.post-card__image { display: block; overflow: hidden; aspect-ratio: 16/9; }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-spring); }
.post-card:hover .post-card__image img { transform: scale(1.05); }

.post-card__body { padding: var(--space-6); }
.post-card__title { font-size: 1.1rem; margin-bottom: var(--space-3); color: var(--clr-text); }
.post-card__title a:hover { color: var(--clr-ruby); }
.post-card__excerpt { font-size: 0.9rem; }

/* --- Pagination --- */
.nav-links, .page-numbers {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-12);
    flex-wrap: wrap;
}

.page-numbers a,
.page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    transition: all 0.25s;
    box-shadow: var(--shadow-sm);
}

.page-numbers .current,
.page-numbers a:hover {
    background: var(--clr-ruby);
    border-color: var(--clr-ruby);
    color: #fff;
    box-shadow: 0 4px 12px var(--clr-ruby-glow);
}

/* --- Error / 404 --- */
.error-main { padding-block: var(--space-32); }
.error-404 { text-align: center; }
.error-404__code {
    display: block;
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--clr-ruby), var(--clr-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}
.error-404__title { margin-bottom: var(--space-4); }
.error-404__text  { margin-bottom: var(--space-8); }
.error-404__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* --- Page / Single --- */
.page-main, .single-main { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.page-header { margin-bottom: var(--space-8); }
.page-title { font-size: clamp(2rem, 4vw, 3rem); }
.entry-content { color: var(--clr-text-muted); line-height: 1.8; }
.entry-content h2, .entry-content h3 { color: var(--clr-text); margin-block: var(--space-6) var(--space-3); }
.entry-content p { margin-bottom: var(--space-5); }
.entry-content a { color: var(--clr-ruby); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.entry-content li { margin-bottom: var(--space-2); }

.single-header { margin-bottom: var(--space-8); }
.single-thumbnail { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-6); box-shadow: var(--shadow-card); }
.single-thumbnail img { width: 100%; object-fit: cover; }
.single-meta { display: flex; gap: var(--space-4); font-size: 0.8rem; color: var(--clr-text-faint); margin-bottom: var(--space-4); }
.single-title { margin-bottom: 0; }

/* --- No Results --- */
.no-results { text-align: center; padding-block: var(--space-20); }
.no-results__title { margin-bottom: var(--space-4); }
.no-results__text  { margin-bottom: var(--space-8); }

/* --- Archive Header --- */
.archive-main { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.archive-header { margin-bottom: var(--space-10); }
.archive-title { margin-bottom: var(--space-4); }
.archive-description { color: var(--clr-text-muted); }

/* --- Search --- */
.search-main { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.search-header { margin-bottom: var(--space-10); }
.search-title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: var(--space-3); }
.search-term { color: var(--clr-ruby); }
.search-count {
    font-size: 0.9rem;
    color: var(--clr-text-faint);
    margin-bottom: var(--space-6);
}
.search-header .aq-search-form { max-width: 560px; }

/* --- Screenreader --- */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* --- Skip link (WCAG 2.4.1 Bypass Blocks) --- */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -120px;
    z-index: 9999;
    padding: 0.7em 1.2em;
    background: var(--clr-blue);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: var(--space-4);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Global keyboard focus fallback (WCAG 2.4.7) ---
   Fills gaps: any focusable element without its own focus style still shows a
   visible ring on keyboard navigation. Elements with an explicit box-shadow/
   border focus (higher specificity) keep theirs — this never doubles up. */
:focus-visible {
    outline: 2px solid var(--clr-blue-light);
    outline-offset: 2px;
}

/* --- WordPress Alignments --- */
.alignleft  { float: left;  margin-right: var(--space-6); margin-bottom: var(--space-4); }
.alignright { float: right; margin-left: var(--space-6);  margin-bottom: var(--space-4); }
.aligncenter { margin-inline: auto; }
.alignfull  { width: 100vw; margin-inline: calc(-50vw + 50%); }
.alignwide  { max-width: var(--container-max); margin-inline: auto; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .container { padding-inline: var(--space-5); }
    .section-header { margin-bottom: var(--space-8); }
    .posts-grid { grid-template-columns: 1fr; }
}