/* Theme overrides for HG theme */
:root {
  --brand-primary: #0ea5e9;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --accent-from: #f97316; /* orange-500 */
  --accent-to: #0891b2;   /* cyan-600 */
}

a { color: var(--brand-primary); }

.button, .hs-button {
  background: var(--brand-primary);
  color: white;
}

/* Liquid glass utility used across sections */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.dark .glass {
  border-color: rgba(255,255,255,0.12);
}

/* Gradient button variant to echo HubSpot’s vivid CTAs */
.btn-gradient {
  background-image: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  color: #fff;
  border: 0;
}

/* Soft card shadow + rounded feel */
.card-soft {
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
}

/* Header baseline clean look */
.site-header {
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.dark .site-header { border-bottom-color: rgba(255,255,255,0.08); }
/* Increase opacity + add gentle shadow when scrolled */
.site-header.scrolled { box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06); }
.dark .site-header.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

.site-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.dark .site-footer { border-top-color: rgba(255,255,255,0.08); }

/* Simple menu modernization */
.hs-menu-wrapper ul { display: flex; gap: 1rem; align-items: center; }
.hs-menu-wrapper a { color: inherit; text-decoration: none; position: relative; padding: .25rem .125rem; }
.hs-menu-wrapper a:hover::after, .hs-menu-wrapper a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: linear-gradient(90deg, var(--accent-from), var(--accent-to)); border-radius: 2px; }

/* Focus ring for better a11y */
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid color-mix(in oklab, var(--accent-from) 60%, var(--accent-to)); outline-offset: 2px; }

/* Skip link */
.skip-link { position:absolute; left:-999px; top:0; padding:.5rem .75rem; background:#111; color:#fff; border-radius:.375rem; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; }

/* HubSpot form theming */
.hs-form .hs-form-field label { color: hsl(var(--foreground)); font-weight: 600; font-size: 0.9rem; }
.hs-form .hs-input, .hs-form textarea, .hs-form select {
  width: 100%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  color: hsl(var(--foreground));
}
.hs-form .hs-input:focus, .hs-form textarea:focus, .hs-form select:focus {
  outline: none;
  border-color: var(--accent-to);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-to) 20%, transparent);
}
.hs-form .hs-error-msgs label { color: #ef4444; }
.hs-form .hs-submit .hs-button, .hs-button.primary {
  background-image: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  border: 0; color: #fff; border-radius: calc(var(--radius) - 2px); padding: 0.75rem 1rem; font-weight: 600;
}
.hs-form .hs-submit .hs-button:hover { filter: brightness(0.95); }

/* Utility containers to keep embeds/forms constrained */
.hg-container { max-width: 70rem; margin-inline: auto; padding-inline: 1rem; }
.hg-section { padding: 4rem 0; }
