/* ── DARE Website — Custom CSS ─────────────────────────────────────── */

/* Base */
body {
    background-color: #030303;
    color: #f2f2f2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #030303; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ── Language Toggle Logic ─────────────────────────────────────────── */
[data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="nl"] { display: none !important; }
html[lang="en"] [data-lang="en"] { display: block !important; }
html[lang="en"] span[data-lang="en"],
html[lang="en"] a[data-lang="en"],
html[lang="en"] li[data-lang="en"],
html[lang="en"] button[data-lang="en"] { display: inline !important; }
span[data-lang="en"],
a[data-lang="en"],
li[data-lang="en"],
button[data-lang="en"] { display: none !important; }

/* ── Gradient Text ─────────────────────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, #5CE1E6 0%, #4A90D9 50%, #E91E8C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Card Hover Glow ───────────────────────────────────────────────── */
.card-glow::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(92,225,230,0.3), rgba(74,144,217,0.3), rgba(233,30,140,0.3));
    opacity: 0;
    transition: opacity 0.5s ease;
}
.card-glow:hover::before { opacity: 1; }

/* ── Glass Panel ───────────────────────────────────────────────────── */
.glass-panel {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Noise Texture ─────────────────────────────────────────────────── */
.bg-noise {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ── Scroll Reveal ─────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.5, 0, 0, 1), transform 0.7s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* ── Blob Animation ────────────────────────────────────────────────── */
@keyframes blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }

/* ── Nav Active State ──────────────────────────────────────────────── */
.nav-link[aria-current="page"] {
    color: white;
}
.nav-link[aria-current="page"]::after {
    width: 100% !important;
}

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ── Terminal Window ───────────────────────────────────────────────── */
.terminal-window {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    backdrop-filter: blur(20px);
}
.terminal-window::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(92,225,230,0.2), rgba(74,144,217,0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.terminal-window:hover::before { opacity: 1; }
.terminal-window ::-webkit-scrollbar { width: 10px; }
.terminal-window ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 10px; margin: 4px; }
.terminal-window ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.terminal-window ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); background-clip: padding-box; }

/* ── AI History Items ──────────────────────────────────────────────── */
#ai-history-items > div { animation: fadeInUp 0.4s ease-out; }
#ai-history-items h2 { font-size: 1.125rem; font-weight: 600; color: #5CE1E6; margin-top: 1rem; margin-bottom: 0.75rem; }
#ai-history-items h2:first-child { margin-top: 0; }
#ai-history-items p { margin-bottom: 0.75rem; line-height: 1.6; }
#ai-history-items ul, #ai-history-items ol { margin-left: 1.5rem; margin-bottom: 0.75rem; }
#ai-history-items li { margin-bottom: 0.5rem; line-height: 1.5; }
#ai-history-items strong, #ai-history-items b { color: #ffffff; font-weight: 600; }
#ai-history-items code { background: rgba(92,225,230,0.1); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; color: #5CE1E6; }

/* ── AI Response Content ───────────────────────────────────────────── */
#ai-response-content { font-family: 'Monaco', 'Menlo', 'Courier New', monospace; font-size: 1.125rem; line-height: 1.7; color: #e5e5e5; }
#ai-response-content p { color: #e5e5e5; margin-bottom: 1rem; }
#ai-response-content .italic { color: rgba(255,255,255,0.6); font-style: italic; font-size: 1rem; }
.typing-cursor { display: inline-block; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── CTA Pulse ─────────────────────────────────────────────────────── */
@keyframes ctaPulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(92, 225, 230, 0); }
    50%  { transform: scale(1.02); box-shadow: 0 0 20px 5px rgba(92, 225, 230, 0.3); }
    100% { transform: scale(1); box-shadow: 0 0 15px 2px rgba(92, 225, 230, 0.2); }
}

/* ── FAQ Accordion ─────────────────────────────────────────────────── */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.5, 0, 0, 1); }
.faq-content.open { max-height: 300px; }

/* ── Theme Toggle Icon Visibility ──────────────────────────────────── */
/* Dark mode (default): show sun, hide moon */
[data-theme-icon="light"] { display: none; }
/* Light mode: hide sun, show moon */
html[data-theme="light"] [data-theme-icon="dark"] { display: none; }
html[data-theme="light"] [data-theme-icon="light"] { display: block; }

/* ── Smooth Theme Transitions ──────────────────────────────────────── */
body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* ── Light Theme Overrides ─────────────────────────────────────────── */
html[data-theme="light"] {
    color-scheme: light;
}

/* Base */
html[data-theme="light"] body {
    background-color: #f7f7f5;
    color: #0d0d0d;
}

/* Tailwind custom tokens */
html[data-theme="light"] .bg-dark-bg { background-color: #f7f7f5 !important; }
html[data-theme="light"] .bg-dark-surface { background-color: #ffffff !important; }
html[data-theme="light"] .text-dark-muted { color: #6b6b6b !important; }
html[data-theme="light"] .text-dark-border { color: rgba(0,0,0,0.3) !important; }
html[data-theme="light"] .border-dark-border { border-color: rgba(0,0,0,0.1) !important; }

/* text-white and opacity variants */
html[data-theme="light"] .text-white { color: #0d0d0d !important; }
html[data-theme="light"] .text-white\/40 { color: rgba(13,13,13,0.4) !important; }
html[data-theme="light"] .text-white\/50 { color: rgba(13,13,13,0.5) !important; }
html[data-theme="light"] .text-white\/60 { color: rgba(13,13,13,0.6) !important; }
html[data-theme="light"] .text-white\/70 { color: rgba(13,13,13,0.7) !important; }
html[data-theme="light"] .text-white\/80 { color: rgba(13,13,13,0.8) !important; }

/* hover:text-white */
html[data-theme="light"] .hover\:text-white:hover { color: #0d0d0d !important; }

/* Borders */
html[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .border-white\/20 { border-color: rgba(0,0,0,0.16) !important; }
html[data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(0,0,0,0.20) !important; }

/* Background overlays */
html[data-theme="light"] .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .bg-white\/20 { background-color: rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.05) !important; }

/* Header background */
html[data-theme="light"] .bg-dark-bg\/80 { background-color: rgba(247,247,245,0.85) !important; }
html[data-theme="light"] .bg-dark-bg\/95 { background-color: rgba(247,247,245,0.97) !important; }

/* Glass panel */
html[data-theme="light"] .glass-panel {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* CTA Contact button in header (bg-white text-dark-bg → inverted) */
html[data-theme="light"] a.bg-white.text-dark-bg,
html[data-theme="light"] .nav-link.bg-white.text-dark-bg {
    background-color: #0d0d0d !important;
    color: #f7f7f5 !important;
}
html[data-theme="light"] a.bg-white.text-dark-bg:hover,
html[data-theme="light"] .nav-link.bg-white.text-dark-bg:hover {
    background-color: #0cbac0 !important;
    color: #0d0d0d !important;
}

/* Brand colors on text — darker variants for light bg */
html[data-theme="light"] .text-brand-cyan { color: #0cbac0 !important; }
html[data-theme="light"] .text-brand-blue { color: #2272c3 !important; }
html[data-theme="light"] .text-brand-magenta { color: #c4106f !important; }

/* Nav active state */
html[data-theme="light"] .nav-link[aria-current="page"] {
    color: #0d0d0d !important;
}

/* Logo: white logo → black in light mode */
html[data-theme="light"] img[src*="dare_logo_white"] {
    filter: brightness(0);
}
/* Footer logo (brightness-0 invert → brightness-0 only) */
html[data-theme="light"] .brightness-0.invert {
    filter: brightness(0) !important;
}

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f7f7f5; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #bbb; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #999; }

/* Selection */
html[data-theme="light"] ::selection {
    background-color: #5CE1E6;
    color: #0d0d0d;
}

/* Contact form inputs */
html[data-theme="light"] input.border-b,
html[data-theme="light"] textarea.border-b {
    color: #0d0d0d !important;
    border-color: rgba(0,0,0,0.15) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: rgba(13,13,13,0.3) !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus {
    border-color: #0cbac0 !important;
}

/* bg-dark-surface and bg-dark-bg opacity variants */
html[data-theme="light"] .bg-dark-surface\/50 { background-color: rgba(255,255,255,0.92) !important; }
html[data-theme="light"] .bg-dark-surface\/80 { background-color: rgba(255,255,255,0.90) !important; }
html[data-theme="light"] .bg-dark-bg\/50 { background-color: rgba(247,247,245,0.80) !important; }

/* More aggressive bg-dark-surface override (belt + suspenders) */
html[data-theme="light"] body .bg-dark-surface {
    background-color: #ffffff !important;
}

/* Portfolio project cards: text-white/60 tags */
html[data-theme="light"] li.text-white\/60 { color: rgba(13,13,13,0.55) !important; }

/* Section backgrounds that use bg-gradient overlays */
html[data-theme="light"] .bg-gradient-to-r.from-dark-surface\/80 { background: none !important; }

/* Gradient endpoint fix: to-dark-surface ends at near-black in dark mode,
   override to light bg so gradient cards render correctly in light mode */
html[data-theme="light"] .to-dark-surface {
    --tw-gradient-to: #f7f7f5 !important;
}

/* ── Tech Badges: cycling brand border colors ─────────────────────── */
.tech-badges span:nth-child(3n+1) { border-color: rgba(92,225,230,0.35); }
.tech-badges span:nth-child(3n+2) { border-color: rgba(74,144,217,0.35); }
.tech-badges span:nth-child(3n)   { border-color: rgba(233,30,140,0.25); }