/* Small brand tweaks on top of the Material theme. */
:root {
  /* Header and drawer chrome */
  --md-primary-fg-color:        #151452;
  --md-primary-fg-color--light: #2a2878;
  --md-primary-fg-color--dark:  #0e0d38;
  --md-accent-fg-color:         #1b5faa;
  /* Material defaults body links to the primary colour. Pinned to the brand
     blue so the navy chrome doesn't darken every link in the page text. */
  --md-typeset-a-color:         #1b5faa;
}

/* Links need to lift off a dark page background */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-typeset-a-color: #7ab3e8;
  }
}

[data-theme="dark"] {
  --md-typeset-a-color: #7ab3e8;
}

/* A compact release feed gives recent changes a clear home on the support
   landing page without competing with the guides below it. */
.release-updates {
  margin: 1.25rem 0 2rem;
  max-height: 24rem;
  border: 1px solid #a9cceb;
  border-left: .35rem solid #1b5faa;
  border-radius: 4px;
  overflow: auto;
  background: #f4f9fd;
  box-shadow: 0 .2rem .65rem rgba(21, 20, 82, .1);
}

.release-updates .md-typeset__table {
  display: block;
  margin: 0;
}

.release-updates table:not([class]) {
  display: table;
  min-width: 38rem;
  margin: 0;
  border: 0;
}

.release-updates table:not([class]) th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .8rem 1rem;
  border: 0;
  background: #151452;
  color: #fff;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.release-updates table:not([class]) td {
  padding: 1rem;
  border: 0;
  border-top: 1px solid #d5e4f1;
  vertical-align: top;
}

.release-updates table:not([class]) th:first-child,
.release-updates table:not([class]) td:first-child {
  width: 27%;
}

.release-updates table:not([class]) th:last-child,
.release-updates table:not([class]) td:last-child {
  width: 9rem;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .release-updates {
    border-color: #2d5d88;
    border-left-color: #7ab3e8;
    background: #162536;
    box-shadow: none;
  }

  .release-updates table:not([class]) th {
    background: #10103f;
  }

  .release-updates table:not([class]) td {
    border-top-color: #2d5d88;
  }
}

/* Screenshots read better with a light frame, matching the old Duda articles. */
.md-typeset figure img,
.md-typeset p > img {
  border: 1px solid #dfe5ec;
  border-radius: 4px;
}

.md-typeset figcaption {
  font-size: .85em;
  opacity: .75;
}

/* ── Sidebar hierarchy ──────────────────────────────────────────────────────
   Out of the box the top-level nav sections ("Getting Started", "myShop") look
   almost identical to the page links beneath them, so it isn't obvious they're
   headings rather than destinations. These rules give them weight, a rule
   underneath, and breathing room, and indent their contents.

   Scoped to the breakpoint where the sidebar exists — below it the same markup
   is the slide-in drawer, which Material lays out differently. */
@media screen and (min-width: 76.25em) {

  /* Section headings: "Getting Started", "myShop", "For Parents and Students" */
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--md-default-fg-color);
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--md-default-fg-color--lighter);
  }

  .md-nav--primary > .md-nav__list > .md-nav__item--section {
    margin-top: 1.4rem;
  }

  /* Indent a section's contents so membership is visible at a glance.
     Material wraps each nested list in its own <nav>, so the list is a
     grandchild of the section <li>, not a child. */
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav > .md-nav__list {
    padding-left: .5rem;
    margin-top: .3rem;
  }

  /* Groups within a section ("Setup", "Selling", "Payments", "Reporting") —
     heavier than a page link, lighter than a section heading */
  .md-nav--primary .md-nav__item--section .md-nav__item--nested > .md-nav__link {
    font-weight: 600;
    color: var(--md-default-fg-color--light);
  }
}

/* ── Header ─────────────────────────────────────────────────────────────────
   The header title reads as: [myblueboard wordmark] Support.

   Material renders two header topics — the site name, and the current page
   title that fades in on scroll. Only the first is restyled; the second is
   left alone so scrolling still shows where you are.

   site_name stays "myblueboard Support" so the browser tab and search results
   keep the full name, and so the logo link's alt text is still meaningful.
   The visible text is swapped for the wordmark image plus the word Support. */
.md-header__button.md-logo img {
  height: 1.4rem;
  width: auto;
}

.md-header__topic:first-child .md-ellipsis {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* hides the site_name text without removing it from the accessibility tree */
  font-size: 0;
}

.md-header__topic:first-child .md-ellipsis::before {
  content: "";
  display: block;
  width: 5.2rem;
  height: 1.3rem;
  background: url("https://myblueboard-public.s3.us-east-2.amazonaws.com/public/mybb_logo_200_x_50px/2.png")
    left center / contain no-repeat;
  flex: none;
}

.md-header__topic:first-child .md-ellipsis::after {
  content: "Support";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* The drawer on small screens keeps its own title bar, where the square mark
   sits on the primary colour without the header's spacing around it. */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title .md-nav__button.md-logo img {
    height: 1.6rem;
    width: auto;
  }
}

/* ── Phone screenshots ──────────────────────────────────────────────────────
   iOS captures are tall portrait images (roughly 1:2.2). At the full content
   width each one runs well over a screen tall, which buries the text between
   them. Cap them near life size and let them sit inline with the prose.
   Applied with `{ .phone }` on the image in Markdown. */
.md-typeset p > img.phone {
  display: block;
  width: 100%;
  max-width: 300px;
}