/* ============================================================================
   rtfreporter — pkgdown site customisations
   ============================================================================
   Loaded automatically by pkgdown from pkgdown/extra.css.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Home page hero: place pkgdown's auto-inserted `<img class="logo">`
   LEFT of the H1 (default behaviour floats it right).
   The .page-header container becomes a flex row, vertically centred,
   so logo and title align nicely on one line.
   ---------------------------------------------------------------------------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.page-header img.logo {
  float: none !important;       /* override Bootswatch's default */
  margin: 0 !important;
  max-height: 110px;             /* landscape SVG: ~220px wide @ 2:1  */
  width: auto;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(26, 58, 90, 0.18);
}
.page-header h1 {
  margin: 0 !important;
  line-height: 1.2;
}

/* ----------------------------------------------------------------------------
   README's inline `<img align="right">` (used by GitHub README rendering).
   On the pkgdown site we don't need a second copy of the logo inside the
   H1 — pkgdown already auto-inserts one above.  Hide the in-H1 image.
   ---------------------------------------------------------------------------- */
.page-header h1 img {
  display: none;
}

/* ----------------------------------------------------------------------------
   Sidebar dev-badges block (pkgdown lifts README's
   `<!-- badges: start --> ... <!-- badges: end -->` here when `dev` is
   in `home.sidebar.structure`).  Wrap nicely on narrow screens.
   ---------------------------------------------------------------------------- */
aside .dev img,
aside .dev a img {
  max-width: 100%;
  height: auto;
  margin: 0 4px 4px 0;
  vertical-align: middle;
}

/* ----------------------------------------------------------------------------
   Sidebar section titles: BOLD + slightly larger + small-caps tracking,
   with a thin accent rule below so the eye picks up each group quickly.
   The navy accent colour matches the bslib `primary` so the headings
   feel of-a-piece with the navbar.
   ---------------------------------------------------------------------------- */
aside h2,
aside .section h2 {
  font-size: 1.20rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: #1f4e79;                       /* matches navbar `primary` */
  margin-top: 1.75rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid #d8e2ec;
  line-height: 1.25;
}

/* First sidebar heading: no extra top margin (it's already at the top). */
aside > div:first-child h2 {
  margin-top: 0;
}

/* ----------------------------------------------------------------------------
   Home page sidebar: its first heading ("Links") started flush with the top
   of the column and looked cramped against the navbar; one line of air.
   ---------------------------------------------------------------------------- */
.template-home aside > div:first-child,
.template-home aside > .links:first-child {
  padding-top: 1.5rem;
}

/* ----------------------------------------------------------------------------
   Gallery: the code under each picture is folded in a <details>.
   ---------------------------------------------------------------------------- */
details {
  margin: 0.5rem 0 2rem;
}
details > summary {
  cursor: pointer;
  color: var(--bs-link-color);
  font-weight: 500;
}
details[open] > summary {
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------------------
   The flow from an ARD to an RTF file (README, Get started, Tables from an
   ARD): one table row of four steps, each cell a box -- its heading on a
   band, its code a line each.  Side by side with an arrow between them when
   the column is wide enough for four boxes (a container query, so the page's
   sidebar counts), one under another otherwise.  Without this sheet
   (GitHub, the CRAN vignette) it is a plain one-row table.
   ---------------------------------------------------------------------------- */
.rtf-flow {
  container-type: inline-size;
  margin: 1rem 0 1.5rem;
}
.rtf-flow table { display: block; border: 0; width: 100%; margin: 0; }
.rtf-flow tbody, .rtf-flow tr {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rtf-flow td {
  display: block;
  position: relative;
  border: 1px solid var(--bs-border-color, #c9d3dd);
  border-radius: 6px;
  padding: 0 0.75rem 0.5rem;
  line-height: 1.55;
}
.rtf-flow td strong {
  display: block;
  margin: 0 -0.75rem 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px 6px 0 0;
  background: #e8eef5;
  color: #1a3a5a;
}
.rtf-flow td strong + br { display: none; }   /* (the band is a block already) */
.rtf-flow td code {
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
  white-space: nowrap;
}
/* the arrow to the next step: down, under the box */
.rtf-flow td:not(:last-child)::after {
  content: "\25BC";
  position: absolute;
  left: 50%;
  bottom: -1.35rem;
  color: #1a3a5a;
  font-size: 0.85rem;
}
@container (min-width: 46rem) {
  .rtf-flow tr { flex-direction: row; gap: 1.6rem; }
  .rtf-flow td { flex: 1 1 0; min-width: 0; }
  /* the arrow: right, beside the heading */
  .rtf-flow td:not(:last-child)::after {
    content: "\25B6";
    left: auto;
    right: -1.3rem;
    bottom: auto;
    top: 0.45rem;
  }
}