/* =================================================================
   SetupFlow — Custom styles
   Tailwind handles layout & utility styling; this file adds:
     1. Fluid typography (clamp-based)
     2. Layered dark surfaces + smooth theme transition
     3. Glassmorphism (light + dark variants)
     4. Animated theme switch (pill with sliding knob)
     5. Hamburger -> X transform
     6. Mobile drawer slide animation
     7. Search input shell
     8. Helper link row (under search)
     9. Animations (gradient blobs)
    10. Focus-visible ring
    11. Reduced-motion + mobile animation throttling
   ================================================================= */


/* ---------- Brand palette variables ----------
   These are the fallback (blue) defaults. The active palette is injected at
   runtime by config/palette.php via <style id="brand-vars"> in each page's
   <head>, which overrides the values below. To switch colors, edit
   config/palette.php — NOT this block. */
:root {
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-900: #312e81;
    --brand-rgb: 99 102 241;   /* shade 500 as RGB channels, for rgb(var(--brand-rgb) / alpha) */
}


/* ---------- 0. Base ---------- */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Offset anchor jumps so section tops clear the fixed navbar
   (h-16 = 4rem on mobile, h-20 = 5rem on sm+). Works with the
   `scroll-smooth` class on <html>. */
html {
    scroll-padding-top: 4rem;
}
@media (min-width: 640px) {
    html { scroll-padding-top: 5rem; }
}

/*
   Theme transition — applied via the `theme-transition` utility on <body>.
   We deliberately do NOT use a global `* { transition: ... }` rule because
   that creates a noticeable flash on every interaction. Instead, transitions
   are scoped to the props that actually swap between themes.
*/
.theme-transition,
.theme-transition * {
    transition:
        background-color 350ms ease,
        border-color     350ms ease,
        color            200ms ease,
        fill             200ms ease,
        stroke           200ms ease;
}

/* But: don't transition transforms/opacity — they should stay snappy */
.theme-transition *:where(.animate-blob, .burger, .burger *,
                          .theme-switch, .theme-switch-knob, .btn-spinner) {
    transition: none;
}


/* ---------- 1. Fluid typography ---------- */
.fluid-h1   { font-size: clamp(2rem,   5vw + 1rem,  4rem);    line-height: 1.05; }
.fluid-h2   { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem); line-height: 1.15; }
.fluid-lead { font-size: clamp(1rem,   0.5vw + 0.9rem, 1.125rem); }


/* ---------- 2. Navbar shell + scroll state ---------- */
.nav-shell {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
.dark .nav-shell {
    background: rgba(17, 24, 39, 0.55);
}
#navbar.scrolled .nav-shell {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.08);
}
.dark #navbar.scrolled .nav-shell {
    background: rgba(17, 24, 39, 0.85);
    border-bottom-color: rgba(148, 163, 184, 0.1);
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4);
}

/* Desktop nav link */
.nav-link {
    position: relative;
    color: inherit;
    padding: 0.25rem 0;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-500), #14b8a6);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms ease;
}
.nav-link:hover {
    color: var(--brand-600);
}
.dark .nav-link:hover {
    color: var(--brand-200);
}
.nav-link:hover::after { transform: scaleX(1); }


/* ---------- 3. Hamburger -> X ---------- */
.burger {
    position: relative;
    width: 20px;
    height: 14px;
    display: inline-block;
}
.burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 250ms ease, top 250ms ease, opacity 200ms ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }

/* Open state — toggled by JS on #menuToggle */
#menuToggle[aria-expanded="true"] .burger span:nth-child(1) {
    top: 6px; transform: rotate(45deg);
}
#menuToggle[aria-expanded="true"] .burger span:nth-child(2) {
    opacity: 0;
}
#menuToggle[aria-expanded="true"] .burger span:nth-child(3) {
    top: 6px; transform: rotate(-45deg);
}


/* ---------- 4. Mobile drawer ---------- */
.mobile-drawer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    transition:
        max-height 350ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity    250ms ease,
        transform  300ms ease;
}
.dark .mobile-drawer {
    background: rgba(17, 24, 39, 0.96);
    border-bottom-color: rgba(148, 163, 184, 0.1);
}
.mobile-drawer.open {
    max-height: 28rem;
    opacity: 1;
    transform: translateY(0);
}

.mobile-link {
    display: block;
    padding: 0.85rem 0.5rem;
    border-radius: 0.75rem;
    color: inherit;
    transition: background-color 150ms ease, color 150ms ease;
}
.mobile-link:hover,
.mobile-link:focus-visible {
    background: rgb(var(--brand-rgb) / 0.08);
    color: var(--brand-600);
}
.dark .mobile-link:hover,
.dark .mobile-link:focus-visible {
    background: rgb(var(--brand-rgb) / 0.15);
    color: var(--brand-200);
}


/* ---------- 5. Animated theme switch ---------- */
.theme-switch {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    border: 1px solid rgba(15, 23, 42, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 300ms ease;
}
.dark .theme-switch {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-color: rgba(148, 163, 184, 0.2);
}

.theme-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease;
}
.dark .theme-switch-knob {
    transform: translateX(24px);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}

.theme-icon-sun,
.theme-icon-moon {
    width: 14px;
    height: 14px;
    position: absolute;
    transition: opacity 250ms ease, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-icon-sun  { color: #f59e0b; opacity: 1; transform: rotate(0deg) scale(1); }
.theme-icon-moon { color: #fff;     opacity: 0; transform: rotate(-90deg) scale(0.5); }

.dark .theme-icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
.dark .theme-icon-moon { opacity: 1; transform: rotate(0deg)  scale(1); }


/* ---------- 6. Glassmorphism cards ---------- */
.glass-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 8px 32px -8px rgba(31, 38, 135, 0.12),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
.dark .glass-card {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow:
        0 8px 32px -8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}


/* ---------- 7. Search input shell ---------- */
.search-shell {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgb(226, 232, 240);
    box-shadow: 0 10px 40px -10px rgb(var(--brand-rgb) / 0.35);
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dark .search-shell {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 10px 40px -10px rgb(var(--brand-rgb) / 0.55);
}
.search-shell:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.18);
}


/* ---------- 8. Helper link row (under search) ---------- */
.helper-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 150ms ease;
    border-radius: 4px;
}
.helper-link:hover { color: var(--brand-600); }
.dark .helper-link:hover { color: var(--brand-200); }


/* ---------- 9. Animations ---------- */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -50px) scale(1.1); }
    66%      { transform: translate(-30px, 30px) scale(0.95); }
}
.animate-blob { animation: blob 14s ease-in-out infinite; }

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Hero printer illustration — subtle infinite float (size handled by utilities) */
.hero-illustration {
    animation: heroFloat 4s ease-in-out infinite;
    will-change: transform;
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}


/* ---------- 11. Focus-visible ring (a11y) ---------- */
.focus-ring {
    outline: none;
}
.focus-ring:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 3px;
    border-radius: inherit;
}


/* ---------- 12. Mobile + reduced-motion: dial down animations ---------- */
@media (max-width: 640px) {
    /* Soften (don't fully disable) the heavy decorative animations on phones */
    .animate-blob { animation-duration: 22s; opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .animate-blob,
    .animate-pulse,
    .hero-illustration {
        animation: none !important;
    }
    .theme-transition,
    .theme-transition * {
        transition-duration: 0ms !important;
    }
}


/* ---------- 13. Misc safety ---------- */
img, svg { max-width: 100%; height: auto; }

/* Prevent iOS auto-zoom on focused inputs (<16px font triggers it) */
@media (max-width: 640px) {
    input, textarea, select { font-size: 16px; }
}

/* Slate-500 default text gets crushed on dark surfaces — bump muted color */
.dark .text-slate-500 { color: rgb(148 163 184); }
