/*
 * Styles for page documents (smbs_pages v2). Everything reads theme tokens as
 * CSS variables, so a site's theme (generated by the host) restyles every
 * section and widget by setting the --db-* variables on :root.
 */
:root {
  --db-primary: var(--bs-primary, #2b59c3);
  --db-secondary: var(--bs-secondary, #6c757d);
  --db-accent: #f2a541;
  --db-surface: #f6f7f9;
  --db-muted: #e9ecef;
  --db-text: var(--bs-body-color, #212529);
  --db-light: #ffffff;
  --db-dark: #14161a;
  --db-radius: .5rem;
  --db-heading-font: inherit;
  --db-body-font: inherit;
}

.db-page, .db-chrome-header, .db-chrome-footer { font-family: var(--db-body-font); }
.db-page :is(h1, h2, h3, h4), .db-chrome-header :is(h1, h2, h3, h4) { font-family: var(--db-heading-font); }

/* Sections */
.db-section { position: relative; background-size: cover; background-position: center; }
.db-section > .container, .db-section > .container-fluid { position: relative; z-index: 1; }
.db-pad-none { padding-block: 0; }
.db-pad-sm { padding-block: 1.5rem; }
.db-pad-md { padding-block: 3rem; }
.db-pad-lg { padding-block: 5rem; }
.db-pad-xl { padding-block: 7.5rem; }
.db-narrow { max-width: 760px; }

.db-bg-primary { background-color: var(--db-primary); }
.db-bg-secondary { background-color: var(--db-secondary); }
.db-bg-accent { background-color: var(--db-accent); }
.db-bg-surface { background-color: var(--db-surface); }
.db-bg-muted { background-color: var(--db-muted); }
.db-bg-light { background-color: var(--db-light); }
.db-bg-dark { background-color: var(--db-dark); }
.db-bg-text { background-color: var(--db-text); }

.db-theme-light { color: var(--db-text); }
.db-theme-dark { color: #fff; }
.db-theme-dark a:not(.btn) { color: inherit; }
.db-has-bg-image::before {
  content: ""; position: absolute; inset: 0;
  background: #000; opacity: var(--db-overlay, 0);
}

/* Widgets */
.db-mb-none { margin-bottom: 0; }
.db-mb-sm { margin-bottom: .75rem; }
.db-mb-md { margin-bottom: 1.5rem; }
.db-mb-lg { margin-bottom: 3rem; }
.db-column > .db-widget:last-child { margin-bottom: 0; }
.db-widget img { max-width: 100%; height: auto; }
.db-rounded { border-radius: var(--db-radius); }
.db-card { background: var(--db-light); color: var(--db-text); border-radius: var(--db-radius);
           box-shadow: 0 1px 3px rgba(0, 0, 0, .08); padding: 1.5rem; height: 100%; }
.db-theme-dark .db-card { color: var(--db-text); }
.db-icon { font-size: 1.75rem; color: var(--db-primary); line-height: 1; }
.db-theme-dark .db-icon { color: var(--db-accent); }
.db-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; opacity: .75; }
.db-lead { font-size: 1.2rem; opacity: .9; }

.btn-db-primary { background: var(--db-primary); border-color: var(--db-primary); color: #fff; }
.btn-db-primary:hover { filter: brightness(1.08); color: #fff; }
.btn-db-secondary { background: transparent; border: 2px solid currentColor; color: inherit; }
.btn-db-secondary:hover { background: rgba(127, 127, 127, .12); color: inherit; }
.btn-db-accent { background: var(--db-accent); border-color: var(--db-accent); color: var(--db-dark); }
.btn-db-link { background: none; border: 0; color: var(--db-primary); text-decoration: underline; padding-inline: 0; }

/* Editor-only */
.db-widget-error { padding: 1rem; border: 1px dashed #c33; color: #c33; font-size: .9rem; }

/* Widget library */
.db-placeholder { background: repeating-linear-gradient(45deg, var(--db-muted), var(--db-muted) 10px, var(--db-surface) 10px, var(--db-surface) 20px); }
.db-spacer-sm { height: 1rem; } .db-spacer-md { height: 2.5rem; } .db-spacer-lg { height: 4rem; } .db-spacer-xl { height: 6rem; }
.db-divider { opacity: .2; margin: 0; }
.db-divider-short { width: 4rem; border-top-width: 3px; opacity: 1; color: var(--db-primary); }
.db-divider-dotted { border-top-style: dotted; border-top-width: 2px; }
.db-icon-sm { color: var(--db-primary); line-height: 1.5; }
.db-theme-dark .db-icon-sm { color: var(--db-accent); }

.db-hero-inner { max-width: 760px; }
.db-hero-background_image { position: relative; padding: 6rem 1.5rem; border-radius: var(--db-radius);
  background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.db-hero-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.db-hero-overlay > * { position: relative; }
.db-hero-background_image .db-attribution { position: absolute; right: 1rem; bottom: .5rem; }
.db-hero-background_image .db-attribution a { color: #fff; }

.db-cta { max-width: 720px; }
.db-stat-value { color: var(--db-primary); }
.db-theme-dark .db-stat-value { color: var(--db-accent); }
.db-step-number { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; background: var(--db-primary); color: #fff; }

.db-faq .accordion-button:not(.collapsed) { color: var(--db-primary); background: var(--db-surface); }
.db-card-highlight { outline: 2px solid var(--db-primary); }
.db-badge { background: var(--db-primary); color: #fff; }
.db-badge-sample { background: var(--db-accent); color: var(--db-dark); font-weight: 600; }

.db-avatar { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center; font-size: 3rem; }
.db-avatar-sm { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.db-testimonial-wide { max-width: 720px; padding: 1rem 3rem; }
.db-testimonials blockquote p { font-size: 1.05rem; }

.db-masonry { column-gap: 1rem; }
.db-masonry-2 { columns: 2; } .db-masonry-3 { columns: 2; } .db-masonry-4 { columns: 2; }
@media (min-width: 768px) { .db-masonry-3 { columns: 3; } .db-masonry-4 { columns: 4; } }
.db-masonry figure { break-inside: avoid; margin-bottom: 1rem; }

.db-logo { max-height: 3rem; max-width: 9rem; width: auto; }
div.db-logo { width: 8rem; height: 3rem; }
.db-logos-grayscale .db-logo { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.db-logos-grayscale a:hover .db-logo { filter: none; opacity: 1; }