/* Project-level overrides.
 *
 * This file is NOT part of the design system: `make design-import` replaces
 * everything under apps/cmscore/scss and apps/cmscore/static/cmscore, but never
 * touches this file. Put anything that must survive a fresh design export here.
 *
 * What is below are the three layout helpers the CMS templates need. The static
 * design achieved these with per-element inline styles (style="max-width:640px")
 * which an editor cannot reproduce from a StreamField, so they are named classes
 * here instead. Values are taken from the design's own inline styles, and use
 * the design's custom properties where it exposes them.
 */

/* Intro group at the top of a content band. The design used 640–720px inline
   depending on the page. Scaled with the wider container and larger type
   (see the note at the head of _tokens.scss) so the measure still reads at
   roughly the same number of characters per line. */
.dm-band-head {
  max-width: 720px;
}

/* The numbered-steps column on the fees page. Tracks $container-narrow. */
.dm-steps-wrap {
  max-width: 760px;
}

/* The fee cards overlap the band above them in the design (inline
   transform: translateY(-32px)). Only lift them when the band actually sits
   under a hero, so the block is reusable elsewhere without a floating gap. */
.dm-fee-cards {
  transform: translateY(-32px);
}
@media (max-width: 991.98px) {
  .dm-fee-cards {
    transform: none;
  }
}

/* Honeypot. Kept out of the layout and out of the accessibility tree, but not
   display:none — some bots skip fields that are display:none, which is exactly
   the ones we want to catch. Never given a visible label or a tab stop. */
.dm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Portrait frames the design sizes with inline max-width. */
.dm-frame--portrait {
  max-width: 400px;
}

/* ── Mobile menu button ───────────────────────────────────────────────────
 *
 * The design's header is .dm-header, not Bootstrap's .navbar. Bootstrap 5.3
 * defines --bs-navbar-toggler-icon-bg and --bs-navbar-toggler-border-color on
 * .navbar, so outside one the hamburger resolves to background-image: none and
 * border: 0 — an invisible 26x26 box. The button is still there and still
 * works, but nothing on screen says so, which leaves the site with no usable
 * navigation on a phone.
 *
 * This restores both, in the design's own ink and hairline colours. It lives
 * here rather than in the design SCSS so it survives `make design-import`;
 * remove it if the design template ever fixes this upstream.
 */
.dm-header .navbar-toggler {
  border: 1px solid #B9C4CB;
}
.dm-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234E565A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Fee rate rows ────────────────────────────────────────────────────────
 *
 * A fee card holding more than one rate lists them as label/price rows, so
 * the prices align and scan down the card. The design has no component for
 * this — its cards assumed one price each — so it lives in the project layer
 * and uses the design's own tokens.
 */
.dm-fee-lines {
  margin: 20px 0 0;
  padding: 0;
}
.dm-fee-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #D8DFE3;
}
.dm-fee-line:first-child {
  border-top: 0;
  padding-top: 0;
}
.dm-fee-line__label {
  font-weight: 700;
  margin: 0;
}
.dm-fee-line__detail {
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: #66707A;
  margin-top: 2px;
}
.dm-fee-line__price {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}

/* The row hairline follows the card it sits on. The default cool grey reads
   as a stray colour against the warm sage, and disappears entirely on dark. */
.dm-card--sage .dm-fee-line {
  border-top-color: #CBD8C6;
}
.dm-card--dark .dm-fee-line {
  border-top-color: rgba(255, 255, 255, 0.22);
}
.dm-card--dark .dm-fee-line__detail {
  color: #B9C4CB;
}