/*
 * The Batch Billing theme.
 *
 * A copy of `marketing` carrying this product's own brand: the navy and green sampled from the
 * logo, and the lockup in the masthead. It is a SEPARATE theme rather than an edit to `marketing`
 * because that one also dresses computall.us and fueltaxassociates.com, and branding all three as
 * Batch Billing is not a thing anybody asked for. `PublicSite.ThemeKey` exists for exactly this.
 *
 * THE COST, SO IT IS A DECISION AND NOT A SURPRISE: layout.hbs, page.hbs, contact.hbs and
 * web.config.hbs started as copies, so a fix to `marketing` does not reach here. If the two drift
 * far enough to matter, the answer is per-site branding fields on `PublicSite` — which needs a
 * migration — rather than a third copy of the same four files.
 *
 * One stylesheet, no build step and no external request: the publisher copies this file verbatim
 * into the snapshot, and the snapshot is served by an IIS site with no application behind it. A
 * webfont or a CDN stylesheet would be a third-party request on every page load of a site whose
 * whole point is that it has no runtime dependencies.
 */

:root {
  --ink: #16181d;
  --ink-soft: #4b5058;
  --paper: #ffffff;
  --paper-soft: #f5f6f8;
  --line: #e2e5ea;

  /* Sampled from the logo: the navy of BATCH and the green of BILLING. */
  --brand: #0a3a66;
  --brand-deep: #002850;
  --brand-green: #4a9034;
  --accent: var(--brand);

  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaee;
    --ink-soft: #a3aab5;
    --paper: #101216;
    --paper-soft: #171a20;
    --line: #272b33;

    /* The brand navy is too dark to read as a link on a dark ground, so the accent lifts while the
       brand colours themselves stay put — they still have to match the logo sitting above them. */
    --accent: #6f9fd8;
    --brand-green: #6dbb52;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis-weight: none;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  /* Centred, not baseline: the wordmark is an image now and has no baseline to align the nav to. */
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

/*
 * The wordmark is the lockup image, so this is a link wrapping a picture rather than text.
 * `display: block` on both kills the descender gap an inline image leaves under itself, which
 * otherwise shows as a few stray pixels above the masthead rule.
 */
.wordmark {
  display: block;
  line-height: 0;
}

.wordmark img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

/*
 * ON DARK, THE LOGO KEEPS ITS OWN WHITE BACKGROUND. The artwork is flat navy and green on white
 * with antialiased edges; knocking the white out would leave a halo on every letter, and inverting
 * it would change brand colours that have to match the favicon in the tab beside them. A small
 * white card is the honest answer, and it is what most brands do with a light-only lockup.
 */
@media (prefers-color-scheme: dark) {
  .wordmark img {
    background: #ffffff;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--accent);
}

/* ── Content ──────────────────────────────────────────────────────────────── */

main {
  padding: 3rem 0 4rem;
}

.hero {
  padding: 2rem 0 3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}

.hero h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.lede {
  max-width: 48ch;
  margin: 1rem 0 0;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.prose {
  max-width: var(--measure);
}

.prose h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.125rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
}

.prose a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

.prose img,
.hero img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.hero-image {
  display: block;
  margin: 1.5rem 0 2rem;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}

.prose code {
  padding: 0.15em 0.35em;
  background: var(--paper-soft);
  border-radius: 4px;
  font-size: 0.9em;
}

/* Wide content scrolls inside itself rather than making the page scroll sideways. */
.prose pre,
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.prose pre {
  padding: 1rem;
  background: var(--paper-soft);
  border-radius: 8px;
}

.prose table {
  border-collapse: collapse;
  white-space: nowrap;
}

.prose th,
.prose td {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

footer a {
  color: inherit;
}

/* ── Enquiry form ─────────────────────────────────────────────────────────── */

/*
 * Rendered by contact.hbs, and only on a site that has a contact address. Single column at every
 * width: a two-column form saves a little space and costs a lot of tab-order confusion, and this
 * one is six fields long.
 */

.enquiry {
  max-width: var(--measure);
  margin: 2.5rem 0 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
}

.enquiry h2 {
  margin-top: 0;
}

.enquiry .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.enquiry label {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* The line under an input that says what shape the answer takes. Quieter than the label and tied
   to the field by aria-describedby, so a screen reader hears it as part of the field rather than
   as a stray paragraph. */
.enquiry .hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* The sizing questions: three short numbers that belong together and read as one question. A
   fieldset because that is what a group of fields with one heading IS — the legend is what a
   screen reader announces before each of the three labels. */
.enquiry .field-group {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.enquiry .field-group legend {
  padding: 0;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Wraps rather than scrolls on a narrow screen: three inputs at 6rem fit a phone in two rows, and
   a horizontal scrollbar inside a form is a way to lose a field somebody never saw. */
.enquiry .field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.enquiry .field-row .field {
  flex: 1 1 6rem;
  min-width: 6rem;
}

/* A field the form has just refused. Colour is not the only signal — the status line says what is
   wrong and focus moves to the input — but it is what points at WHICH field.

   The textarea is included because the server can name ANY field in a 400, not just the two the
   page checks itself; a flag the stylesheet does not cover would move focus to a box that looks
   untouched. */
.enquiry input[aria-invalid='true'],
.enquiry textarea[aria-invalid='true'] {
  border-color: var(--danger, #b3261e);
}

/* The address suggestions.

   Anchored to the field rather than floated over the page: this is one form in a normal document
   flow, and a fixed-position dropdown would need scroll handling for no gain. The field is
   position: relative so the list hangs off it. */
.enquiry .field {
  position: relative;
}

.enquiry .suggestions {
  position: absolute;
  z-index: 5;

  /* Under the input and the hint, whatever their heights come out as. */
  top: 100%;
  left: 0;
  right: 0;

  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;

  max-height: 15rem;
  overflow-y: auto;

  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.enquiry .suggestions li {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.92rem;
}

/* Hover and keyboard selection look the SAME. A list where arrowing down highlights differently from
   pointing at it is two controls wearing one coat. */
.enquiry .suggestions li:hover,
.enquiry .suggestions li.is-active {
  background: var(--paper-soft);
}

.enquiry input,
.enquiry textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);

  /* Inherited rather than assumed: the theme sets no webfont, so this follows whatever the body
     resolved to instead of dropping the inputs back to the browser default. */
  font: inherit;
}

/* Never removed, only replaced. Taking the outline away without putting something visible back is
   the single most common way a form becomes unusable by keyboard. */
.enquiry input:focus-visible,
.enquiry textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.enquiry textarea {
  resize: vertical;
}

.enquiry button {
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.enquiry button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Empty until something is said, so it takes no space and is not announced. */
.enquiry-status:empty {
  display: none;
}

.enquiry-status {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

/* The brand green is the check mark in the logo, so success is the one place it belongs. Paired
   with wording that stands on its own, because colour alone is not a message. */
.enquiry-status.is-ok {
  color: var(--brand-green);
  font-weight: 600;
}

.enquiry-status.is-error {
  /* Not colour alone — the wording carries the meaning, because roughly one man in twelve cannot
     rely on the red. */
  color: #b3261e;
}

@media (prefers-color-scheme: dark) {
  .enquiry-status.is-error {
    color: #f2b8b5;
  }
}