/* APACK Brand Tokens — swap entire block for new-client-project */
:root {
  --color-primary-600: #0160A8;
  --color-primary-500: #0172c6;
  --color-primary-50:  #e8f2fb;
  --color-accent:      #2b1cc5;
  --color-secondary:   #566AB2;
  --color-neutral:     #f4f4f4;
  --color-text:        #444444;
  --color-dark:        #0a113a;
  --font-heading:      'Open Sans', Helvetica, Arial, sans-serif;
  --font-body:         'Open Sans', Helvetica, Arial, sans-serif;
  --radius-card:       0.75rem;
  --shadow-card:       0 1px 3px 0 rgba(0,0,0,0.07);
  --shadow-card-lg:    0 4px 12px 0 rgba(0,0,0,0.08);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--color-text); background-color: #f8fafc; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* Shared custom utilities (Tailwind has no no-scrollbar by default) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Light scrollbar to match template idiom */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-600); }

/* Block builder show/hide + fade (Direction A product page) */
.fade-transition { transition: opacity 0.3s ease, transform 0.3s ease; }
.block-hidden { opacity: 0; transform: scale(0.98); pointer-events: none; position: absolute; visibility: hidden; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden; }
.filter-btn { transition: all 0.2s ease; }
.filter-btn.active { background-color: var(--color-primary-600); color: white; border-color: var(--color-primary-600); }
.faq-tag { transition: all 0.2s ease; }
.faq-tag.active { background-color: #1e293b; color: white; border-color: #1e293b; }
.nav-link.active-scroll { color: var(--color-primary-600); border-bottom: 2px solid var(--color-primary-600); }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }