/* css/site.css — Akadata public site. Tokens mirror the live Node site exactly.
   Light is default; .dark overrides. A small inline script (no cookies) flips
   the class and remembers the choice in localStorage. */

:root {
  --background: 0 0% 100%;
  --foreground: 215 25% 15%;
  --card: 0 0% 100%;
  --card-foreground: 215 25% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 15%;
  --primary: 217 91% 39%;
  --primary-foreground: 0 0% 100%;
  --secondary: 276 28% 36%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 172 100% 32%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 217 91% 39%;
  --radius: .75rem;
  --gradient-hero: linear-gradient(135deg, hsl(217 91% 39%), hsl(276 28% 36%));
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 20% 98%));
  --shadow-card: 0 4px 24px -2px hsl(217 91% 39% / .08);
  --shadow-hover: 0 8px 32px -4px hsl(217 91% 39% / .15);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
}

.dark {
  --background: 217 32% 8%;
  --foreground: 210 40% 98%;
  --card: 217 32% 10%;
  --card-foreground: 210 40% 98%;
  --popover: 217 32% 10%;
  --popover-foreground: 210 40% 98%;
  --primary: 217 91% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 276 28% 45%;
  --secondary-foreground: 0 0% 100%;
  --muted: 217 32% 18%;
  --muted-foreground: 215 20% 65%;
  --accent: 172 100% 38%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 32% 18%;
  --input: 217 32% 18%;
  --ring: 217 91% 55%;
  --gradient-hero: linear-gradient(135deg, hsl(217 91% 25%), hsl(276 28% 20%));
  --gradient-card: linear-gradient(180deg, hsl(217 32% 10%), hsl(217 32% 12%));
  --shadow-card: 0 4px 24px -2px hsl(0 0% 0% / .3);
  --shadow-hover: 0 8px 32px -4px hsl(0 0% 0% / .4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: .5rem 1rem; z-index: 100; border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* Header — matches live Node site: sticky top bar, dropdowns, mobile menu */
.site-header {
  position: sticky; top: 0; z-index: 50;
  width: 100%;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.header-search-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: max(1rem, calc((100vw - 1280px) / 2));
  z-index: 60;
  width: min(24rem, calc(100vw - 2rem));
  padding: .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  background: hsl(var(--popover));
  box-shadow: 0 10px 30px rgb(0 0 0 / .14);
}
.header-search-panel form { display: flex; gap: .5rem; }
.header-search-panel input { min-width: 0; flex: 1; height: 2.5rem; padding: 0 .75rem; border: 1px solid hsl(var(--input)); border-radius: .375rem; background: hsl(var(--background)); color: hsl(var(--foreground)); }
.header-search-panel button { height: 2.5rem; padding: 0 1rem; border-radius: .375rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .875rem; font-weight: 500; }
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  height: 4rem; /* h-16 */
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem; /* gap-2 */
  font-size: 1.5rem; line-height: 2rem; font-weight: 700; /* text-2xl font-bold */
  color: hsl(var(--primary)); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__name { font-size: 1.5rem; line-height: 2rem; color: hsl(var(--primary)); font-weight: 700; }
.brand__sub { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Primary nav */
.primary-nav { display: none; align-items: center; gap: 1.25rem; padding-left: 1.5rem; } /* gap-5 pl-6 */
.nav-link {
  display: inline-flex; align-items: center; gap: .25rem; /* gap-1 */
  font-size: .875rem; font-weight: 500; color: hsl(var(--foreground));
  background: none; border: 0; cursor: pointer; padding: 0;
  font-family: inherit; transition: color .15s ease;
}
.nav-link:hover, .nav-link:focus-visible { color: hsl(var(--primary)); text-decoration: none; }
.nav-link__icon { width: 1rem; height: 1rem; }
.nav-dropdown { position: relative; }
.nav-dropdown__trigger .lucide-chevron-down { transition: transform .2s ease; }
.nav-dropdown__trigger[aria-expanded="true"] .lucide-chevron-down { transform: rotate(180deg); }
.nav-dropdown__menu {
  position: absolute; top: calc(100% + .25rem); left: 0;
  width: 14rem; list-style: none; margin: 0; padding: .25rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); box-shadow: 0 10px 30px -10px hsl(217 91% 39% / .25);
  display: none; z-index: 60;
}
.nav-dropdown__menu[data-open="true"] { display: block; }
#nav-about-menu { width: 12rem; }
.nav-dropdown__menu li a {
  display: flex; align-items: center; gap: .5rem;
  min-height: 2rem; padding: .375rem .5rem; border-radius: calc(var(--radius) - 4px);
  color: hsl(var(--foreground)); font-size: .875rem; font-weight: 400; line-height: 1.25rem;
}
.nav-dropdown__menu .lucide { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.nav-dropdown__menu li a:hover, .nav-dropdown__menu li a:focus-visible {
  background: hsl(var(--primary) / .08); color: hsl(var(--primary)); text-decoration: none;
}

/* Header actions */
.header-spacer { flex: 1 1 auto; } /* flex-1 */
.header-actions-1, .header-actions-2, .header-actions-m {
  display: flex; align-items: center; gap: .5rem;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem; border-radius: .375rem; /* h-9 rounded-md */
  border: 1px solid hsl(var(--input)); background: hsl(var(--background));
  color: hsl(var(--foreground)); cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover, .icon-btn:focus-visible {
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--accent)); text-decoration: none;
}
.header-search { /* reuses .icon-btn */ }

/* Get in Touch — matches live: bg-primary text-primary-foreground h-9 rounded-md px-3 */
.header-cta {
  display: inline-flex; align-items: center; gap: .25rem;
  height: 2.25rem; padding: 0 .75rem; /* h-9 px-3 */
  border-radius: .375rem; font-size: .875rem; font-weight: 500;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.header-cta:hover, .header-cta:focus-visible {
  background: hsl(var(--primary) / .9); color: hsl(var(--primary-foreground)); text-decoration: none;
}
.header-cta .lucide { width: 1rem; height: 1rem; }

/* Mobile menu */
.menu-toggle { display: inline-flex; }
.mobile-menu {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: 0;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav {
  display: flex; flex-direction: column; gap: 1rem;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 1rem 1.25rem;
}
.mobile-menu a {
  display: flex; align-items: center; gap: .5rem; padding: 0;
  color: hsl(var(--foreground)); font-size: .875rem; line-height: 1.25rem; font-weight: 500;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible { background: hsl(var(--muted) / .6); text-decoration: none; }
.mobile-menu a .lucide { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.mobile-menu__note { margin: 0; color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.25rem; }

/* Show desktop nav and action groups at md+, hide mobile group; reverse on small */
.header-actions-1, .header-actions-2 { display: none; }
.header-actions-m { display: flex; margin-left: auto; }
.play-control { display: none; }
body.speech-on .play-control { display: inline-flex; }
.speech-section-host { position: relative; }
.speech-section-anchor {
  position: absolute; top: 1rem; right: 1rem; z-index: 10; pointer-events: none;
}
.speech-section-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 9999px;
  border: 1px solid hsl(var(--primary)); background: hsl(var(--background) / .9);
  color: hsl(var(--primary)); box-shadow: 0 2px 8px hsl(var(--foreground) / .12);
  cursor: pointer; pointer-events: auto; transition: background-color .15s ease, color .15s ease;
}
.speech-section-button:hover, .speech-section-button:focus-visible {
  color: white; background: rgb(16 185 129); outline: 2px solid hsl(var(--primary)); outline-offset: 2px;
}
.speech-section-button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.project-card { box-shadow: var(--shadow-card); }
.project-card:hover { box-shadow: var(--shadow-hover); }
.project-status {
  position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .75rem; border-radius: 9999px; font-size: .75rem; line-height: 1rem; font-weight: 600;
}
.project-status--live { background: rgb(16 185 129 / .1); color: rgb(4 120 87); }
.project-status--creation { background: rgb(245 158 11 / .1); color: rgb(180 83 9); }
.project-status--hold { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.dark .project-status--live { color: rgb(110 231 183); }
.dark .project-status--creation { color: rgb(252 211 77); }
.speech-toast {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100;
  display: flex; align-items: center; gap: .75rem; max-width: min(24rem, calc(100vw - 2rem));
  padding: .875rem 1rem; border: 1px solid hsl(var(--border)); border-radius: .625rem;
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  box-shadow: 0 10px 30px hsl(var(--foreground) / .18);
  font-size: .875rem; line-height: 1.35;
  animation: speech-toast-in .18s ease-out;
}
.speech-toast[hidden] { display: none; }
.speech-toast__spinner {
  width: 1rem; height: 1rem; flex: 0 0 1rem; border-radius: 9999px;
  border: 2px solid hsl(var(--primary) / .25); border-top-color: hsl(var(--primary));
  animation: speech-toast-spin .8s linear infinite;
}
@keyframes speech-toast-in {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes speech-toast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .speech-toast, .speech-toast__spinner { animation: none; }
}
@media (min-width: 768px) {
  .primary-nav { display: flex; }
  .header-actions-1, .header-actions-2 { display: flex; }
  .header-actions-m { display: none; }
}

/* Buttons — match live: base + primary (blue) / secondary (pale-green hover) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  white-space: nowrap; font-size: .875rem; font-weight: 500; line-height: 1;
  border-radius: .375rem; padding: 0 2rem; height: 2.75rem; /* h-11 rounded-md px-8 */
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn .lucide { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
.btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn--primary:hover, .btn--primary:focus-visible { background: hsl(var(--primary) / .9); }
.btn--secondary {
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border-color: hsl(var(--input));
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--accent));
}
.btn--ghost {
  background: transparent; color: hsl(var(--primary));
  border-color: hsl(var(--border)); padding: 0 1rem; height: 2.25rem; font-size: .85rem;
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--accent));
}
.button-group { display: flex; gap: .75rem; margin-top: 1.6rem; flex-wrap: wrap; align-items: center; }

/* Hero */
.hero { padding: 3.5rem 0 2.5rem; }
.hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--primary)); font-size: .8rem; font-weight: 700; margin: 0 0 .6rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; margin: 0 0 1.1rem; letter-spacing: -.02em; }
.lede { color: hsl(var(--muted-foreground)); font-size: 1.12rem; }
.cta-row { display: flex; gap: .75rem; margin-top: 1.6rem; flex-wrap: wrap; }

/* Sections */
section { padding: 2.75rem 0; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0; }
h3 { font-size: 1.15rem; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow-card);
  transition: var(--transition, transform .25s ease, box-shadow .25s ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card img { border-radius: 10px; margin-bottom: .8rem; aspect-ratio: 16/10; object-fit: cover; }
.card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.card h3 a { color: hsl(var(--foreground)); }
.card p { color: hsl(var(--muted-foreground)); margin: 0; font-size: .95rem; }

/* Values / feature lists */
.value-list, .feature-list { display: grid; gap: .9rem; padding-left: 1.2rem; }
.feature-list li { margin-bottom: .4rem; }

/* Service index */
.service-index { display: grid; gap: .55rem; padding-left: 1.2rem; }
.service-index a { font-weight: 600; }

/* Pages */
.page { padding: 3rem 0; }
.page h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; }
.service-detail__art { border-radius: var(--radius); margin-bottom: 1.5rem; box-shadow: var(--shadow-card); }

/* Grid two-col content */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* Forms */
.contact-form, .search-form { display: grid; gap: .6rem; max-width: 540px; margin-top: 1rem; }
.contact-form label { font-weight: 600; }
.contact-form input, .contact-form textarea, .search-form input {
  padding: .65rem .85rem; border-radius: 10px; border: 1px solid hsl(var(--input));
  background: hsl(var(--card)); color: hsl(var(--foreground)); font: inherit;
}
.note { color: hsl(var(--muted-foreground)); font-size: .9rem; }

/* Footer */
.site-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .3); padding: 3rem 0 2rem; margin-top: 2rem; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.site-footer__brand .text-2xl { font-size: 1.5rem; line-height: 1; }
.site-footer__brand .text-primary { color: hsl(var(--primary)); }
.site-footer__brand .text-muted-foreground { color: hsl(var(--muted-foreground)); }
.social-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; background: hsl(var(--primary) / .1);
  display: inline-flex; align-items: center; justify-content: center;
  color: hsl(var(--primary)); transition: background .15s ease, color .15s ease;
}
.social-btn:hover, .social-btn:focus-visible { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); text-decoration: none; }
.site-footer h3 { font-size: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__bottom {
  border-top: 1px solid hsl(var(--border)); margin-top: 2rem; padding-top: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem; align-items: center; color: hsl(var(--muted-foreground));
}
.site-footer__bottom a { color: hsl(var(--muted-foreground)); }
.site-footer__bottom a:hover, .site-footer__bottom a:focus-visible { color: hsl(var(--primary)); text-decoration: none; }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* header spacer pushes action buttons to the right (live uses flex-1 spacer) */
.header-spacer { flex: 1 1 auto; }

/* dropdown trigger icon sizing */
.nav-dropdown__trigger .lucide { width: 1rem; height: 1rem; }
.nav-dropdown__trigger .lucide-chevron-down { margin-left: .15rem; }

/* Speak button */
.speak-btn {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  border-radius: 999px; border: 1px solid hsl(var(--border));
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: .6rem 1rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-card);
}
.speak-btn:hover { opacity: .92; }

/* 404 */
.page-404 img { margin: 1rem 0; border-radius: var(--radius); }

/* Template pre */
.template { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 1rem; overflow: auto; }

@media (max-width: 760px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
}