/* MergerLog site styles. The base theme (colours, Arial 15px, logo, rows, detail block)
   lives in mergerlog-theme.css and is imported unchanged. Everything here follows its rules:
   one text size (the logo is the only exception), emphasis by weight, square corners, 1px lines. */
@import url("mergerlog-theme.css");

:root { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  padding: var(--ml-space-3) var(--ml-space-3) var(--ml-space-5);
  max-width: 46rem;
  margin-inline: auto;
}

header { padding: var(--ml-space-1) 0 var(--ml-space-3); display: flex; flex-direction: column; gap: var(--ml-space-1); }
.ml-tagline { margin: 0; }

/* Slightly smaller logo than the theme default: 24px mark, 18px wordmark */
.ml-logo { gap: var(--ml-space-1); }
.ml-logo-mark { width: 24px; height: 24px; }
.ml-logo-mark::before, .ml-logo-mark::after { width: 16px; height: 16px; }
.ml-logo-word { font-size: 18px; }

h1, h2, p, dl, blockquote { margin: 0; }
h1, h2 { font-size: inherit; font-weight: var(--ml-weight-bold); }

main { display: flex; flex-direction: column; gap: var(--ml-space-3); }
.ml-section { display: flex; flex-direction: column; gap: var(--ml-space-1); }

/* Step nav used as a breadcrumb: Firms / Lazard / Technology */
.ml-steps { flex-wrap: wrap; gap: var(--ml-space-3); }
.ml-step { white-space: nowrap; }

/* Rows that navigate (firm list, product list, industry list): label, count, chevron */
a.ml-row { text-decoration: none; }
a.ml-row:hover { text-decoration: none; }
.ml-row--nav { grid-template-columns: 1fr auto 1.25em; column-gap: var(--ml-space-2); }
.ml-row--nav::after { content: "\203A"; text-align: right; font-weight: var(--ml-weight-bold); }

/* Every row is a button: a thin ink outline and a small gap between rows make that obvious.
   (Overrides the theme's ruled-list look.) */
.ml-list { border-top: 0; gap: var(--ml-space-1); }
.ml-row, button.ml-row { border: 1px solid var(--ml-ink); }

/* Column headings above a deal list: no outline, not a button */
.ml-row--head { cursor: default; font-weight: var(--ml-weight-bold); border: 0; padding-bottom: 0; }
.ml-row--head:hover { background: transparent; }

/* Deal rows: name, value, side, then a plus that becomes a minus when the row is open.
   On narrow screens value and side sit under the name. */
.ml-row--deal { grid-template-columns: 1fr 110px 130px 1.25em; column-gap: var(--ml-space-2); }
.ml-row--deal::after { content: "+"; text-align: right; font-weight: var(--ml-weight-bold); }
.ml-row--deal[aria-expanded="true"]::after { content: "\2212"; }
.ml-row--head::after { content: ""; }
.ml-deal-name b { font-weight: var(--ml-weight-bold); }
.ml-deal-headline { display: block; }
@media (max-width: 600px) {
  .ml-row--deal { grid-template-columns: 1fr 1fr 1.25em; row-gap: 2px; }
  .ml-row--deal > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }   /* name spans the first two columns */
  .ml-row--deal > :nth-child(2) { grid-column: 1; grid-row: 2; }       /* value */
  .ml-row--deal > :nth-child(3) { grid-column: 2; grid-row: 2; }       /* side */
  .ml-row--deal::after { grid-column: 3; grid-row: 1 / 3; align-self: start; }
  .ml-row--head { display: none; }
}

/* Expanded deal detail sits under its row; closed by default */
.ml-deal-detail[hidden] { display: none; }
.ml-deal-detail {
  padding: var(--ml-space-2) var(--ml-space-2) var(--ml-space-3);
  margin-top: calc(-1 * var(--ml-space-1));      /* closes the gap so row and breakdown form one box */
  border: 1px solid var(--ml-ink);
  border-top: 0;
  display: flex; flex-direction: column; gap: var(--ml-space-2);
}
.ml-detail dt { font-weight: var(--ml-weight-bold); }
.ml-detail dd { margin: 0; }
@media (max-width: 600px) { .ml-detail { grid-template-columns: 1fr; row-gap: 2px; } .ml-detail dd { margin-bottom: var(--ml-space-1); } }

.ml-excerpt { border-left: 1px solid var(--ml-line); padding-left: var(--ml-space-2); display: flex; flex-direction: column; gap: var(--ml-space-1); }
.ml-links a { text-decoration: underline; margin-right: var(--ml-space-3); }

footer { margin-top: var(--ml-space-5); padding-top: var(--ml-space-3); border-top: 1px solid var(--ml-line); }

/* Footer disclaimer as a plain list */
.ml-disclaimer { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 2px; }