/* ============================================================
   BackupAssist 365 — product tokens and product-only rules
   Primary:  Ocean Green #005266  (365 product color, brand book §11)
   Accent:   Apricot Orange #f78f1e (blog counters, as on the Flare
             home page)
   Font:     Inter (chosen in the font trial, 2026-09-29)

   Every structural rule lives in the shared base
   (profiles/shared/ba-base.css, loaded before this file); this
   file supplies the Ocean Green role tokens and what is genuinely
   365's own — the two-column Top 10 blogs list from home.htm.
   ============================================================ */

/* ── Ocean Green scale (brand book §11) ────────────────────── */
:root {
  --ba-ocean:               #005266;
  --ba-ocean-900:           #1d292e;
  --ba-ocean-800:           #17343b;
  --ba-ocean-700:           #123e49;
  --ba-ocean-600:           #0d4956;
  --ba-ocean-400:           #387583;
  --ba-ocean-300:           #6998a2;
  --ba-ocean-200:           #9bbac1;
  --ba-ocean-100:           #cddde0;

  /* Role tokens consumed by ba-base.css */
  --ba-primary:             var(--ba-ocean);
  --ba-primary-light:       var(--ba-ocean-400);
  --ba-primary-dark:        var(--ba-ocean-800);
  --ba-header-shadow:       rgba(11, 26, 30, 0.35);
  --ba-tabs-bg:             var(--ba-ocean-600);
  --ba-link:                var(--ba-ocean);
  --ba-link-hover:          var(--ba-ocean-400);
  --ba-accent:              var(--ba-ocean-400);
  --ba-accent-tint:         rgba(56, 117, 131, 0.1);
  --ba-heading:             var(--ba-ocean);
  --ba-heading-sub:         var(--ba-ocean-600);
  --ba-tint:                var(--ba-ocean-100);
  --ba-header-tint:         var(--ba-ocean-100);
  --ba-line:                var(--ba-ocean-200);
  --ba-mark:                rgba(0, 82, 102, 0.2);
  --ba-hero-sub:            var(--ba-ocean-300);
  --ba-card-face:           #f2f6f7;
  --ba-card-shadow:         rgba(0, 82, 102, 0.15);
  --ba-card-hover-border:   var(--ba-ocean-300);
  --ba-product:             var(--ba-ocean);   /* the trial button */
}

/* ── Top 10 blogs: two columns, orange counters (365 only) ── */
.md-typeset .ba-landing > ol {
  columns: 2;
  column-gap: 3em;
  list-style: none;
  counter-reset: ba-blog;
  margin-left: 0;
  padding-left: 0;
}

.md-typeset .ba-landing > ol > li {
  counter-increment: ba-blog;
  break-inside: avoid;
  padding: 5px 0 5px 2em;
  position: relative;
  font-size: 0.8rem;
}

.md-typeset .ba-landing > ol > li::before {
  content: counter(ba-blog);
  color: var(--ba-orange);
  font-weight: 700;
  position: absolute;
  left: 0.4em;
}

.md-typeset .ba-landing > ol > li a {
  color: #3b3b3b;
}

.md-typeset .ba-landing > ol > li a:hover {
  color: var(--ba-ocean);
  text-decoration: underline;
}

@media screen and (max-width: 44em) {
  .md-typeset .ba-landing > ol {
    columns: 1;
  }
}