/*
 * Colour schemes based on the "ARrayVue Lite - Now Available!" band of the original site:
 * flat navy background, bright cyan label, large light-weight white heading,
 * white text, bold-label bullets and a rounded cyan button.
 *
 * The body gets "scheme-on scheme-a|b|c btn-snip|deep|navy" from color_scheme and
 * button_style in config.php (see design_prefs() in includes/bootstrap.php). Legal pages never get these classes, so they keep the base look.
 * Each section gets a tone class from section_class(): tone-dark, tone-mist or tone-white.
 *
 *   A  Alternating bands   navy bands alternate with white and mist bands
 *   B  All navy            every section navy, two shades, thin cyan line between sections
 *   C  Panels              rounded navy panels in two alternating shades, floating on a soft grey page
 */

.scheme-on {
  --mist: #eef3f8;
  --navy-alt: #131c29;     /* second, darker navy for alternating sections */
  --on-dark: #ffffff;
  --on-dark-soft: #d3dde8;
}

/* ---------- Type: the snip's lighter, larger headings ---------- */
.scheme-on h1, .scheme-on h2 { font-weight: 400; letter-spacing: -0.01em; }
.scheme-on h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); }
.scheme-on h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.scheme-on h2.h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: 0; }
.scheme-on .eyebrow {
  text-transform: none; letter-spacing: 0; font-size: 1.2rem; font-weight: 700;
  color: var(--blue-ink); margin-bottom: 0.5em;
}
.scheme-on .hero-tagline { font-weight: 600; }

/* ---------- Buttons: the snip's big rounded cyan button ---------- */
.scheme-on .button { padding: 15px 38px; font-size: 1.15rem; font-weight: 700; }
.scheme-on .button--large { padding: 17px 46px; font-size: 1.2rem; }
/* As in the snip: bright cyan, white text (low contrast, about 1.9:1) */
.btn-snip .button--primary { background: #00ccff; color: #ffffff; }
.btn-snip .button--primary:hover { background: #1fd5ff; color: #ffffff; }
/* Slightly deeper cyan so the white text is readable (3.2:1, meets the large-text standard) */
.btn-deep .button--primary { background: #009ccf; color: #ffffff; }
.btn-deep .button--primary:hover { background: #0087b4; color: #ffffff; }
/* Bright cyan kept, navy text instead of white (8:1) */
.btn-navy .button--primary { background: #00ccff; color: var(--navy-deep); }
.btn-navy .button--primary:hover { background: #33d6ff; color: var(--navy-deep); }

/* ---------- Section tones ---------- */
.scheme-on .tone-white { background: #ffffff; }
.scheme-on .tone-mist { background: var(--mist); }

.scheme-on .tone-dark { background: var(--navy); color: var(--on-dark); }
.scheme-on .tone-dark h1, .scheme-on .tone-dark h2, .scheme-on .tone-dark h3,
.scheme-on .tone-dark strong, .scheme-on .tone-dark dt { color: var(--on-dark); }
.scheme-on .tone-dark .eyebrow, .scheme-on .tone-dark .hero-tagline { color: var(--blue); }
.scheme-on .tone-dark .lead, .scheme-on .tone-dark .small, .scheme-on .tone-dark .form-note { color: var(--on-dark-soft); }
.scheme-on .tone-dark a:not(.button) { color: var(--blue); }
.scheme-on .tone-dark .button--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.scheme-on .tone-dark .button--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* Cards on a dark section become quiet translucent tiles */
.scheme-on .tone-dark .card,
.scheme-on .tone-dark .feature-card {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none; color: var(--on-dark-soft);
}
.scheme-on .tone-dark .feature-card::before { background-color: var(--blue); }

/* Bullets as in the snip: a plain dot, bold white label */
.scheme-on .tone-dark .check-list li { padding-left: 20px; }
.scheme-on .tone-dark .check-list li::before {
  content: "\2022"; background: none; width: auto; height: auto; top: 0;
  color: var(--on-dark); font-weight: 700; font-size: 1.1em; line-height: 1.5;
}

/* A form on a dark section sits on a white card with normal dark text */
.scheme-on .tone-dark .signup-form { color: var(--text); }
.scheme-on .tone-dark .signup-form a:not(.button) { color: var(--blue-ink); }
.scheme-on .tone-dark .form-note .req { color: #ff9e9e; }

/* ---------- A: alternating bands ---------- */
.scheme-a main > section.tone-dark + section.tone-dark { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------- B: all navy, two shades, cyan hairline between sections ---------- */
.scheme-b main > section:nth-of-type(even).tone-dark { background: var(--navy-alt); }
.scheme-b main > section + section { border-top: 1px solid rgba(0, 204, 255, 0.35); }
.scheme-b .hero-media img { background: #fff; border-radius: 24px; padding: 18px; }
.scheme-b .site-footer { border-top: 1px solid rgba(0, 204, 255, 0.35); }

/* ---------- C: floating panels on a soft grey page ---------- */
.scheme-c main { background: #e6ecf2; padding: 24px 0 8px; }
.scheme-c main > section {
  width: calc(100% - 48px); max-width: 1240px; margin: 0 auto 24px;
  border-radius: 28px; overflow: hidden;
}
.scheme-c main > section.tone-dark { box-shadow: 0 14px 36px rgba(23, 35, 52, 0.25); }
.scheme-c main > section:nth-of-type(even).tone-dark { background: var(--navy-alt); }
.scheme-c .hero-media img { background: #fff; border-radius: 24px; padding: 18px; }
.scheme-c .section { padding: 64px 0; }
@media (max-width: 760px) {
  .scheme-c main { padding-top: 12px; }
  .scheme-c main > section { width: calc(100% - 20px); margin-bottom: 12px; border-radius: 20px; }
  .scheme-c .section { padding: 44px 0; }
}