/* Marutaki Communications brand overrides for Moonshot CSS Framework.
   Only the 3 documented brand variables are overridden; everything else
   inherits Moonshot's monochrome base. Palette taken from the real logo
   (assets/img/logo.svg, assets/img/logo-mark.svg) — a green gradient mark. */
:root {
  --ms-brand-primary: #00af66; /* logo green - primary actions, links */
  --ms-brand-secondary: #5b8a72; /* muted sage - secondary accents */
  --ms-brand-accent: #006837; /* deep forest green - hover / active states */
}

:root[data-theme="dark"] {
  --ms-brand-primary: #22c98a;
  --ms-brand-secondary: #8fae9c;
  --ms-brand-accent: #3ba379;
}

/* Small utility additions — not part of the vendored Moonshot core,
   used across the site's page content. */
.ms-leading-relaxed {
  line-height: var(--ms-leading-relaxed);
}
.ms-list-disc {
  list-style-type: disc;
}
.ms-list-inside {
  list-style-position: inside;
}

/* --- Mobile refinements -------------------------------------------------
   Moonshot handles the navbar, footer grid, and .ms-grid-cols-N collapse
   on its own. These cover the site's own hand-written markup, which the
   framework can't reach. Breakpoints match Moonshot's: 768px for grid
   collapse, 767px for component-level mobile rules. */

/* Home hero button row. Moonshot stacks .ms-hero__actions full-width on
   mobile, but this hero is an .ms-image-link, so it needs its own rule.
   Left-aligned rather than centered, matching the hero's text. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-4);
  margin-top: var(--ms-space-6);
}
@media (max-width: 767px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .ms-btn {
    width: 100%;
  }
}

/* Panel titles are given a min-height so adjacent cards align on desktop.
   Once the grid collapses to one column that only adds dead space. */
.panel-title--2l {
  min-height: 2.6em;
}
.panel-title--3l {
  min-height: 3.9em;
}
@media (max-width: 768px) {
  .panel-title--2l,
  .panel-title--3l {
    min-height: 0;
  }
}

/* Company info table: label/value side by side is too narrow on a phone,
   so stack them into rows instead. */
@media (max-width: 767px) {
  .company-table th,
  .company-table td {
    display: block;
    width: auto !important;
    padding: 0 !important;
  }
  .company-table th {
    padding-top: var(--ms-space-4) !important;
    padding-bottom: var(--ms-space-1) !important;
  }
  .company-table td {
    padding-bottom: var(--ms-space-4) !important;
  }
}