/* ==========================================================================
   Clean theme - ASP Uploader. Same reference system as ajaxuploader.com's
   Content/clean-theme.css (modelled on gethostlogic.com): one type stack,
   one brand blue, flat white surfaces with hairline borders, no drop
   shadows, no gradients, plain-text menu. Loaded LAST, after
   site-refresh.css, on every page.
   ========================================================================== */

:root {
  --hl-font: "Google Sans", "Google Sans Text", Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --hl-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --hl-bg: #f8fafd;
  --hl-surface: #ffffff;
  --hl-tint: #f0f4f9;
  --hl-soft: #d3e3fd;
  --hl-border: #c4c7c5;
  --hl-line: #e1e3e1;
  --hl-ink: #1f1f1f;
  --hl-copy: #444746;
  --hl-muted: #5f6368;
  --hl-brand: #0b57d0;
  --hl-brand-hover: #0842a0;
  --hl-on-brand: #ffffff;
  --hl-radius: 8px;
  --hl-radius-card: 12px;

  /* site-refresh.css tokens -> reference */
  --asp-blue: var(--hl-brand);
  --asp-navy: var(--hl-ink);
  --asp-muted: var(--hl-muted);
  --asp-line: var(--hl-line);
  /* Front (Bootstrap) theme tokens */
  --bs-primary: #0b57d0;
  --bs-primary-rgb: 11, 87, 208;
  --bs-body-font-family: var(--hl-font);
  --bs-body-color: var(--hl-copy);
  --bs-body-bg: var(--hl-bg);
  --bs-border-color: var(--hl-line);
  --bs-link-color: var(--hl-brand);
}

/* ---------- base ---------------------------------------------------------- */
html, body, .asp-site { background: var(--hl-bg) !important; }
body, .asp-site {
  font-family: var(--hl-font) !important;
  font-size: 16px;
  line-height: 1.7;
  color: var(--hl-copy) !important;
  -webkit-font-smoothing: antialiased;
}
/* every element takes the stack (the template set Inter on many of them) - except code and icons */
body *:not(code):not(pre):not(kbd):not(samp):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(i):not(.syntaxhighlighter *) {
  font-family: var(--hl-font) !important;
}
code, kbd, pre, samp { font-family: var(--hl-mono) !important; }
:not(pre) > code { overflow-wrap: anywhere; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4,
.asp-site h1, .asp-site h2, .asp-site h3, .asp-site h4 {
  color: var(--hl-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}
h1, .h1, .asp-site h1, .asp-home-copy h1 {
  font-size: clamp(2.125rem, 1.4rem + 2.4vw, 2.88rem) !important;
  line-height: 1.12 !important;
}
.asp-site h2, .asp-section-heading h2, .asp-bottom-band h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.92rem) !important;
  line-height: 1.2 !important;
}
.asp-card h3, .asp-step h3, .asp-site .card h3, .asp-site h3 { letter-spacing: -0.025em !important; }
.asp-preview-inner h2 { font-size: 1.0625rem !important; letter-spacing: -0.02em !important; }
.asp-site p, .asp-home-copy > p, .asp-site main > .bg-img-start h1 + p, .asp-section-heading p,
.asp-site .article-body, .asp-card p, .asp-step p, .asp-next p { color: var(--hl-copy) !important; }
.asp-home-copy > p, .asp-site main > .bg-img-start h1 + p { font-size: 1.0625rem !important; line-height: 1.8 !important; }
.asp-home-copy h1 em { color: var(--hl-brand) !important; font-style: normal; }
.asp-site a, .asp-site .text-primary, a.asp-card strong { color: var(--hl-brand) !important; }

/* eyebrows */
.asp-eyebrow, .asp-step > span {
  color: var(--hl-brand) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

/* ---------- no grey drop shadows, no gradients ---------------------------- */
.shadow, .shadow-sm, .shadow-lg, .shadow-xl, .shadow-soft,
.asp-site .card, .asp-site main .demo-stage, .asp-preview, .asp-nav, .asp-menu,
.asp-site .btn, .asp-site .transition-3d-hover:hover {
  box-shadow: none !important;
}
.asp-site .transition-3d-hover:hover { transform: none !important; }
.bg-img-start, .bg-img-end, .bg-img-center, .gradient-x-overlay-sm-primary, [class*="gradient"] {
  background-image: none !important;
}
.asp-site .bg-light, .bg-light, .bg-soft-primary, .bg-soft-light { background-color: var(--hl-bg) !important; }

/* ---------- header + menu --------------------------------------------------- */
.asp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(248, 250, 253, 0.94) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hl-border) !important;
}
.asp-brand, .asp-brand:hover, .asp-brand strong { color: var(--hl-ink) !important; }
.asp-brand small { color: var(--hl-muted) !important; }
.asp-brand-icon { background: var(--hl-brand) !important; color: #fff !important; border-radius: 10px !important; }
.asp-nav > a {
  color: var(--hl-copy) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: var(--hl-radius) !important;
  background: transparent !important;
}
.asp-nav > a:hover { color: var(--hl-ink) !important; background: var(--hl-tint) !important; }
.asp-nav > a[aria-current=page] { color: var(--hl-ink) !important; background: transparent !important; }
.asp-nav > a.asp-nav-download, .asp-nav > a.asp-nav-download:hover {
  background: var(--hl-brand) !important;
  color: var(--hl-on-brand) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  padding: 8px 17px !important;
}
.asp-nav > a.asp-nav-download:hover { background: var(--hl-brand-hover) !important; }
.asp-menu { border-color: var(--hl-border) !important; color: var(--hl-ink) !important; border-radius: var(--hl-radius) !important; }
/* mobile drop-down menu: flat surface */
.asp-nav { border-color: var(--hl-border) !important; }
@media (min-width: 992px) { .asp-nav { background: transparent !important; border: 0 !important; } }

/* ---------- buttons -------------------------------------------------------- */
.asp-site .btn, .btn {
  font-weight: 700 !important;
  border-radius: var(--hl-radius) !important;
  background-image: none !important;
  letter-spacing: normal;
}
.btn-pill { border-radius: var(--hl-radius) !important; }
.asp-site .btn-primary, .btn-primary, .asp-preview-drop a {
  background: var(--hl-brand) !important;
  border-color: var(--hl-brand) !important;
  color: var(--hl-on-brand) !important;
}
.asp-site .btn-primary:hover, .btn-primary:hover, .asp-preview-drop a:hover {
  background: var(--hl-brand-hover) !important;
  border-color: var(--hl-brand-hover) !important;
}
.asp-site .btn-outline-primary, .asp-site .btn-light, .btn-outline-primary, .btn-white, .btn-ghost-primary,
.btn-soft-primary, .asp-demo-toggle {
  background: var(--hl-surface) !important;
  border: 1px solid var(--hl-border) !important;
  color: var(--hl-ink) !important;
}
.asp-site .btn-outline-primary:hover, .asp-site .btn-light:hover, .btn-outline-primary:hover,
.btn-white:hover, .btn-ghost-primary:hover, .btn-soft-primary:hover { background: var(--hl-tint) !important; color: var(--hl-ink) !important; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--hl-brand) !important; outline-offset: 2px; }

/* ---------- surfaces ------------------------------------------------------- */
.asp-site .card, .asp-card, .asp-site main .demo-stage, .asp-site .asp-next {
  background: var(--hl-surface) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-card) !important;
}
a.asp-card:hover { border-color: var(--hl-brand) !important; background: var(--hl-surface) !important; }
.asp-card-icon, .asp-preview-drop > span { color: var(--hl-brand) !important; }
.asp-section { border-bottom-color: var(--hl-line) !important; }
.asp-section-muted, .asp-logo-band { background: var(--hl-bg) !important; }
.asp-logo-band { border-bottom-color: var(--hl-line) !important; }
.asp-logo-band p, .asp-demo-number, .asp-results { color: var(--hl-muted) !important; }
.asp-step { border-top: 1px solid var(--hl-border) !important; }
.asp-site .demo-chip { background: var(--hl-surface) !important; color: var(--hl-copy) !important; border-color: var(--hl-line) !important; }

/* ---------- home hero + product preview ------------------------------------ */
.asp-home-hero {
  background: var(--hl-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hl-line) !important;
}
.asp-home-checks { border-top-color: var(--hl-line) !important; color: var(--hl-copy) !important; }
.asp-home-checks li::before { color: var(--hl-brand) !important; }
.asp-preview {
  background: var(--hl-surface) !important;
  border: 1px solid var(--hl-border) !important;
  border-radius: var(--hl-radius-card) !important;
}
.asp-preview-top, .asp-preview-foot { color: var(--hl-copy) !important; }
.asp-preview-top small { border-color: var(--hl-border) !important; background: var(--hl-tint); color: var(--hl-copy) !important; }
.asp-preview-inner { background: var(--hl-surface) !important; border: 1px solid var(--hl-line); border-radius: var(--hl-radius) !important; }
.asp-preview-inner > p, .asp-preview-drop p, .asp-preview-file small { color: var(--hl-muted) !important; }
.asp-preview-drop { background: var(--hl-bg) !important; border: 1.5px dashed var(--hl-border) !important; }
.asp-preview-drop strong, .asp-preview-file strong { color: var(--hl-ink) !important; }
.asp-preview-file { border-bottom-color: var(--hl-line) !important; }
.asp-preview-file > span:first-child { background: var(--hl-tint) !important; color: var(--hl-brand) !important; }
.asp-file-state { color: var(--hl-brand) !important; }
.asp-preview-progress { background: var(--hl-tint) !important; }
.asp-preview-progress i { background: var(--hl-brand) !important; }

/* closing band: light and bordered, like the reference - not navy */
.asp-bottom-band {
  background: var(--hl-surface) !important;
  color: var(--hl-copy) !important;
  border-top: 1px solid var(--hl-line);
  border-bottom: 1px solid var(--hl-line);
}
.asp-bottom-band h2 { color: var(--hl-ink) !important; }
.asp-bottom-band p { color: var(--hl-copy) !important; }

/* ---------- inner pages: Front template ------------------------------------ */
.asp-site .bg-img-start { background: var(--hl-bg) !important; border-bottom: 1px solid var(--hl-line) !important; }
/* side menu: quiet list, current page in brand blue on a soft tint - no solid blue block */
.list-group { border: 0 !important; }
.list-group-item, .asp-site a.list-group-item {
  border: 0 !important;
  border-radius: var(--hl-radius) !important;
  background: transparent !important;
  color: var(--hl-copy) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 8px 12px !important;
}
.list-group-item-action:hover, .asp-site a.list-group-item-action:hover { background: var(--hl-tint) !important; color: var(--hl-ink) !important; }
.list-group-item.active, .list-group-item.active:hover, .asp-site a.list-group-item.active {
  background: var(--hl-soft) !important;
  color: var(--hl-brand) !important;
  border: 0 !important;
}
.asp-site .article-body h2 { border-top-color: var(--hl-line) !important; }
.asp-site .article-body pre { background: #1f1f1f !important; color: #e3e3e3 !important; border-radius: var(--hl-radius-card) !important; }
.asp-site table th { background: var(--hl-tint) !important; color: var(--hl-copy) !important; }
.asp-site .breadcrumb, .asp-site .breadcrumb a { color: var(--hl-muted) !important; }
.border-top, .border-bottom, .border { border-color: var(--hl-line) !important; }

/* demo library filters + empty states */
.asp-filter { background: var(--hl-surface) !important; border-color: var(--hl-border) !important; border-radius: var(--hl-radius-card) !important; }
.asp-filter label { color: var(--hl-muted) !important; }
.asp-filter input, .asp-filter select { border-color: var(--hl-border) !important; color: var(--hl-ink) !important; border-radius: var(--hl-radius) !important; }
.asp-filter button { color: var(--hl-brand) !important; }
.asp-demo-category > h3 { border-bottom-color: var(--hl-line) !important; }
.asp-empty { background: var(--hl-bg) !important; border-color: var(--hl-border) !important; }

/* ---------- footer ---------------------------------------------------------- */
.asp-footer { background: var(--hl-bg) !important; border-top: 1px solid var(--hl-border) !important; color: var(--hl-copy) !important; }
.asp-footer h2 { color: var(--hl-ink) !important; font-size: 0.875rem !important; letter-spacing: 0 !important; }
.asp-footer a { color: var(--hl-copy) !important; }
.asp-footer a:hover { color: var(--hl-brand) !important; }
.asp-footer-base { border-top-color: var(--hl-line) !important; }