/* == overrides.css ===================================================
   The ONLY file on this site permitted to make a visual decision.
   Everything else comes from USWDS 3.14.0 exactly as shipped.

   WHY THE SITE IS BUILT ON USWDS AT ALL
   Three builds of a hand-rolled stylesheet were rejected as AI slop,
   correctly. The failure was not taste, it was INVENTION: with nothing
   specific to copy, a generated design converges on the average of every
   marketing page ever written -- gradient hero, three icon cards, giant
   condensed caps, alternating colour bands.

   USWDS removes the invention surface. Every element here has a
   documented name you look up instead of inventing: usa-collection for
   news, usa-summary-box for standing notices, usa-process-list for
   ordered steps, usa-table for the sponsorship ladder. It is also the
   visual register of an American public institution -- flat, ruled,
   navy, serif-intro, no shadows, no gradients -- which is the correct
   register for a county law-enforcement union.

   Licence: USWDS is a work of the United States government, in the
   public domain, with copyright additionally waived worldwide under
   CC0 1.0. No attribution obligation and no federal-use restriction.

   WHAT THIS SITE MUST NOT DO WITH IT
   The Association is a labor organization. It is NOT the District
   Attorney's Office and not a government agency. So:
     - never use .usa-banner ("An official website of the United States
       government") -- USWDS guidance explicitly forbids it on non-
       government domains
     - never use .usa-identifier (federal parent-agency component)
     - no Great Seal, no .gov language
     - the footer carries an explicit disclaimer on every page
   A police union site that reads as a government agency is a liability,
   not a design win.

   RULES FOR EDITING THIS FILE
   No new components. No gradients, no shadows, no full-bleed colour
   bands, no icon-card rows. If something is needed, look for the USWDS
   component first. Four sections only.
   ================================================================== */

:root {
  --pba-blue: #1B2A6B;   /* royal blue of the badge's blackletter wordmark */
  --pba-blue-dk: #16235A;
  --pba-near: #11151F;   /* header rule, footer ground */
  --pba-gold: #8A6B1F;   /* dark enough for AA on white */
  --pba-gold-br: #C8A24A;/* on near-black */
  --pba-rule: #D8D4CA;
  --pba-panel: #F4F2ED;
}

/* -- 1. Responsive columns -------------------------------------------
   USWDS's precompiled dist ships only UNPREFIXED grid classes:
   .grid-col-8 is 66% at 320px as well as 1280px, and the
   `tablet:grid-col-8` variants exist only if you run a Sass build.
   These two classes are the replacement, and the only layout rules
   this site defines. ------------------------------------------------ */
.pba-main, .pba-side { width: 100%; }
@media (min-width: 40em) {           /* USWDS 'tablet' breakpoint */
  .pba-main { width: 65%; }
  .pba-side { width: 35%; }
}

/* -- 2. Palette -------------------------------------------------------
   USWDS compiles its tokens in Sass and ships no CSS custom properties,
   so recolouring is explicit. These are the only USWDS surfaces that
   carry brand colour on this site. ---------------------------------- */
.usa-button { background-color: var(--pba-blue); border-radius: 0; }
.usa-button:hover { background-color: var(--pba-blue-dk); }
.usa-button--outline { background-color: transparent; box-shadow: inset 0 0 0 2px var(--pba-blue); color: var(--pba-blue); }
.usa-menu-btn { background-color: var(--pba-blue); }
.usa-link, .usa-collection__heading a, .usa-prose a { color: var(--pba-blue); }
.usa-link:hover, .usa-prose a:hover { color: var(--pba-gold); }

.usa-header { border-bottom: 3px solid var(--pba-gold-br); background-color: var(--pba-near); }
.usa-logo__text a, .usa-logo__text { color: #fff; text-decoration: none; }
.usa-nav__primary a:not(.usa-button) { color: #D5DAE4; }
.usa-nav__primary a:not(.usa-button):hover { color: #fff; background-color: transparent; }
.usa-nav__primary .usa-current { color: #fff; }
.usa-nav__primary .usa-current::after { background-color: var(--pba-gold-br); }
@media (max-width: 63.99em) {
  /* The mobile drawer is white in USWDS; keep its links readable. */
  .usa-nav { background-color: #fff; }
  .usa-nav__primary a:not(.usa-button) { color: var(--pba-near); }
}

.usa-footer--slim .usa-footer__secondary-section { background-color: var(--pba-near); color: #C6CCD6; }
.usa-footer--slim .usa-footer__secondary-section a { color: #fff; }
.usa-footer__logo-heading { color: #fff; }

/* -- 3. Headings: serif, sentence case, never caps --------------------
   USWDS's default theme sets headings in Source Sans Pro. Merriweather
   ships in the same package and is the institutional/legal register --
   which is independently what the nearest real peer uses: Suffolk
   County Detective Investigator's PBA sets headings in Noto Serif,
   sentence case. Never uppercase: no site in this genre does it, and
   it was the single loudest thing wrong with the previous build. ---- */
h1, h2, h3, h4,
.usa-collection__heading, .usa-summary-box__heading,
.usa-footer__logo-heading, .usa-card__heading {
  font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", serif;
  text-transform: none;
  letter-spacing: -.005em;
}

/* -- 4. Two component corrections ------------------------------------
   The summary box ships as #e7f6f8 on #99deea -- a soft cyan panel that
   reads "web app" rather than "notice". Squared off and re-ruled to
   match the rest. The table gets the same treatment. ---------------- */
.usa-summary-box {
  background-color: var(--pba-panel);
  border: 1px solid var(--pba-rule);
  border-left: 4px solid var(--pba-gold);
  border-radius: 0;
}
.usa-table caption { font-family: inherit; font-weight: 400; color: #5A6070; }

/* Placeholder marker: content the Association still owes. Deliberately
   loud so it cannot reach production unnoticed. */
.todo {
  background: #FFF1C9; border: 1px dashed var(--pba-gold);
  color: #5A4400; padding: 0 5px; font-size: .92em;
}


/* -- 5. Board portraits ----------------------------------------------
   A fixed 3:4 frame so the row stays even whether a photograph has been
   supplied or not. White Plains PBA does the same thing: its one board
   member without a headshot gets a tile cropped to the identical
   407x495 so the grid does not break. ------------------------------- */
.pba-board {
  display: grid; gap: 1.5rem; list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pba-board > li { border: 1px solid var(--pba-rule); }
.pba-portrait {
  aspect-ratio: 3 / 4; width: 100%; display: block;
  object-fit: cover; object-position: center top;
  background: var(--pba-panel);
}
.pba-person { padding: 1rem; }
.pba-person h3 { margin: 0 0 .15rem; font-size: 1.13rem; }
.pba-person .office {
  font-size: .81rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--pba-gold); font-weight: 700; margin: 0 0 .6rem;
}
.pba-person p { margin: 0; font-size: .93rem; }


/* -- 6. Sticky footer -------------------------------------------------
   Short pages (News, Board, 404) left the footer floating in the middle
   of the viewport with white space beneath it. Push it to the bottom
   when the content does not fill the screen. ------------------------ */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > .usa-footer { flex-shrink: 0; margin-top: auto; }

/* The legal name is 85 characters and broke across two lines mid-phrase
   at font-serif-md. Smaller, and allowed to wrap where it reads. */
.usa-footer__logo-heading {
  font-size: 1rem; line-height: 1.35; text-wrap: balance; max-width: 46ch;
}