/* ============================================================
   TechGadgets — component styles (works with Tailwind CDN)
   These complement the utility classes used across Blade views.
   ============================================================ */

:root { color-scheme: light; }
html.dark { color-scheme: dark; }

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }

body { font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; }
h1,h2,h3,h4,h5 { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; }

::selection { background: #4f46e5; color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; background-clip: content-box; }

/* Layout helper */
.container-x { margin-inline: auto; width: 100%; max-width: 80rem; padding-inline: 1rem; }
@media (min-width: 640px) { .container-x { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container-x { padding-inline: 2rem; } }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.875rem; padding:.625rem 1.25rem; font-size:.875rem; font-weight:600; transition:all .2s; cursor:pointer; border:0; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 2px #fff,0 0 0 4px #5b5bf5; }
html.dark .btn:focus-visible { box-shadow:0 0 0 2px #0b0d18,0 0 0 4px #5b5bf5; }
.btn-primary { background:#4f46e5; color:#fff; box-shadow:0 8px 24px -8px rgba(79,70,229,.5); }
.btn-primary:hover { background:#4338ca; transform:translateY(-1px); }
.btn-ghost { background:#fff; color:#0d0f1c; box-shadow:inset 0 0 0 1px #e2e8f0; }
.btn-ghost:hover { background:#f8fafc; box-shadow:inset 0 0 0 1px #cbd5e1; }
html.dark .btn-ghost { background:#181b30; color:#e2e8f0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
html.dark .btn-ghost:hover { background:rgba(255,255,255,.05); }
.btn-sm { padding:.5rem .875rem; font-size:.75rem; }

/* Cards */
.card { border-radius:1.25rem; background:#fff; box-shadow:0 1px 2px rgba(13,15,28,.04),0 8px 24px -8px rgba(13,15,28,.12); box-shadow:0 1px 2px rgba(13,15,28,.04),0 8px 24px -8px rgba(13,15,28,.10); outline:1px solid #f1f5f9; transition:all .3s; }
html.dark .card { background:#181b30; outline:1px solid rgba(255,255,255,.05); box-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5); }
.card-hover:hover { transform:translateY(-4px); box-shadow:0 2px 4px rgba(13,15,28,.06),0 20px 40px -12px rgba(79,70,229,.22); }

/* Chips */
.chip { display:inline-flex; align-items:center; gap:.375rem; border-radius:999px; padding:.25rem .75rem; font-size:.75rem; font-weight:600; }
.chip-accent { background:#eef2ff; color:#4338ca; } html.dark .chip-accent { background:rgba(91,91,245,.12); color:#a5b4fc; }
.chip-muted { background:#f1f5f9; color:#475569; } html.dark .chip-muted { background:rgba(255,255,255,.06); color:#cbd5e1; }
.chip-green { background:#ecfdf5; color:#047857; } html.dark .chip-green { background:rgba(16,185,129,.12); color:#6ee7b7; }
.chip-amber { background:#fffbeb; color:#b45309; } html.dark .chip-amber { background:rgba(245,158,11,.12); color:#fcd34d; }

/* Forms */
.form-input,.form-textarea,.form-select { width:100%; border-radius:.875rem; border:1px solid #e2e8f0; background:#fff; padding:.625rem .875rem; font-size:.875rem; color:#0d0f1c; transition:.2s; }
.form-input:focus,.form-textarea:focus,.form-select:focus { outline:none; border-color:#5b5bf5; box-shadow:0 0 0 3px rgba(91,91,245,.18); }
html.dark .form-input,html.dark .form-textarea,html.dark .form-select { background:#13162a; border-color:rgba(255,255,255,.1); color:#f1f5f9; }
.form-label { display:block; margin-bottom:.375rem; font-size:.875rem; font-weight:600; color:#334155; }
html.dark .form-label { color:#cbd5e1; }

/* Kicker */
.kicker { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:#4f46e5; }
html.dark .kicker { color:#818cf8; }

/* Backgrounds */
.grid-bg { background-image:linear-gradient(to right,rgba(13,15,28,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(13,15,28,.04) 1px,transparent 1px); background-size:56px 56px; }
html.dark .grid-bg { background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px); }
.glow-accent { background:radial-gradient(60% 60% at 50% 0%,rgba(91,91,245,.18),transparent 70%); }

/* Animations */
@keyframes fadeUp { 0%{opacity:0;transform:translateY(16px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }
.animate-fade-up { animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-in { animation:fadeIn .5s ease both; }

/* Prose tweaks for article body */
.prose-tech { line-height:1.75; color:#334155; }
html.dark .prose-tech { color:#cbd5e1; }
.prose-tech h2 { font-size:1.6rem; margin:2rem 0 .75rem; }
.prose-tech h3 { font-size:1.25rem; margin:1.5rem 0 .5rem; }
.prose-tech p { margin:0 0 1.1rem; }
.prose-tech a { color:#4f46e5; text-decoration:underline; text-underline-offset:3px; }
.prose-tech img { border-radius:1rem; margin:1.5rem 0; }
.prose-tech ul { list-style:disc; padding-left:1.4rem; margin:0 0 1.1rem; }
.prose-tech ol { list-style:decimal; padding-left:1.4rem; margin:0 0 1.1rem; }
.prose-tech blockquote { border-left:3px solid #4f46e5; padding-left:1rem; font-style:italic; color:#64748b; margin:1.25rem 0; }

/* Link underline animation */
.link-underline { position:relative; }
.link-underline::after { content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:currentColor; transition:width .25s; }
.link-underline:hover::after { width:100%; }

/* Star rating */
.stars { display:inline-flex; gap:1px; color:#f59e0b; }

/* Line clamp utility (fallback) */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Ad slot frame */
.ad-slot { display:flex; align-items:center; justify-content:center; min-height:40px; }