/* AI Sidebar: header (with the Features mega menu), footer and brand pieces.
   The original aitopia.ai pages render these from navbar.js / site-footer.js at runtime;
   here they are static HTML, styled with the same design tokens (shared.css + extension-landing.css). */

/* Header */
.nav-row-wrap { position: relative; }
.as-brand { display: inline-flex; align-items: center; gap: 10px; color: hsl(var(--foreground)); text-decoration: none; }
.as-brand-mark { width: 36px; height: 36px; flex-shrink: 0; }
.as-brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.as-nav-link { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); text-decoration: none; transition: color .2s, background .2s; }
.as-nav-link:hover, .as-nav-link.active { color: hsl(var(--foreground)); }
.as-nav-link:hover, .as-nav-link[aria-expanded="true"] { background: hsl(var(--secondary)); }
.as-chev { width: 14px; height: 14px; transition: transform .2s; }
.as-nav-link[aria-expanded="true"] .as-chev { transform: rotate(180deg); }
.as-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; border: 0; padding: 0; background: transparent; color: hsl(var(--foreground)); cursor: pointer; transition: background .15s; }
.as-icon-btn:hover { background: hsl(var(--secondary)); }
.as-icon-btn svg { width: 20px; height: 20px; }
.as-icon-sun { display: none; }
.dark .as-icon-sun { display: block; }
.dark .as-icon-moon { display: none; }
.as-nav-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 9999px; font-size: 14px; font-weight: 600; white-space: nowrap; color: hsl(var(--ext-on-ink)); text-decoration: none; background: linear-gradient(135deg, hsl(var(--ext-aurora-1)), hsl(var(--ext-aurora-3))); box-shadow: 0 0 0 1px hsl(var(--ext-on-ink) / .2) inset, 0 8px 24px -8px hsl(var(--ext-aurora-1) / .7); transition: transform .2s, box-shadow .2s; }
.as-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px hsl(var(--ext-on-ink) / .3) inset, 0 12px 32px -8px hsl(var(--ext-aurora-1) / .85); }
.as-nav-cta svg { width: 18px; height: 18px; }
.as-menu-btn { display: none; }
@media (max-width: 480px) {
  .as-brand-name { display: none; }
  .as-nav-cta { padding: 0 14px; }
}

/* Features mega menu: hover/click panel on desktop, the hamburger's menu below the lg breakpoint */
.as-mega { position: absolute; top: calc(100% + 4px); left: var(--hp-nav-gutter, 24px); z-index: 60; width: min(900px, calc(100vw - 2 * var(--hp-nav-gutter, 24px))); padding: 10px; border-radius: 22px; background: hsl(var(--card) / .96); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px hsl(var(--border)), 0 24px 60px -24px hsl(var(--ext-aurora-3) / .45), 0 12px 32px -16px rgb(0 0 0 / .25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.as-mega.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.as-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.as-mega-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; }
.as-mega-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.as-mega-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; color: hsl(var(--foreground)); text-decoration: none; transition: background .15s; }
.as-mega-item:hover { background: hsl(var(--secondary)); }
.as-mega-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
.as-mega-ic svg { width: 18px; height: 18px; }
.as-mega-item b { display: block; font-size: 14px; font-weight: 600; }
.as-mega-item small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: hsl(var(--muted-foreground)); }
.as-mega-side { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: hsl(var(--secondary) / .55); }
.as-mega-side .as-mega-item { padding: 10px; }
.as-mega-side .as-mega-item:hover { background: hsl(var(--card)); }
.as-mega-side .as-nav-cta { margin: auto 4px 4px; justify-content: center; }
@media (max-width: 1023.98px) {
  .as-menu-btn { display: inline-flex; }
  .as-mega { left: 12px; right: 12px; width: auto; max-height: calc(100vh - 90px); overflow: auto; }
  .as-mega-grid { grid-template-columns: 1fr; }
  .as-mega-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-mega-side .as-nav-cta { margin-top: 8px; }
}
@media (max-width: 560px) {
  .as-mega-feats { grid-template-columns: 1fr; gap: 0; }
  .as-mega-item { padding: 9px 10px; }
  .as-mega-feats .as-mega-item small { display: none; }
}

/* Pages without the feature tabs (e.g. /partners) do not need the right-hand rail space */
@media (min-width: 1101px) {
  .ext-page.as-no-rail #site-footer footer > div { padding-right: 4rem; }
}

/* Footer */
.as-footer-brand { display: inline-flex; align-items: center; gap: 10px; color: hsl(var(--foreground)); text-decoration: none; }
.as-footer-brand svg { width: 28px; height: 28px; }
.as-footer-brand span { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.as-footer-tagline { margin-top: 14px; max-width: 260px; font-size: 14px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.as-footer-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; height: 38px; padding: 0 16px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); text-decoration: none; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: box-shadow .2s, transform .2s; }
.as-footer-cta:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px hsl(var(--primary) / .5); }
.as-footer-cta svg { width: 16px; height: 16px; color: hsl(var(--primary)); }
.as-footer-bottom a { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 3px; }

/* Forced headline breaks that only apply where the line fits (phones wrap naturally) */
@media (max-width: 760px) { .as-br { display: none; } }

/* 404 */
.as-404 { padding: 120px 24px 140px; text-align: center; }
.as-404 .ext-title { font-size: clamp(64px, 12vw, 160px); }