/* Loaded by every page, including the four that never linked monzo.css
   (index, browse, free-job-posting, and the two internal kits). The hero and
   the job-ad frames live on exactly those pages, so rules for them cannot sit
   in a stylesheet three of them do not load.
*/
/* ============================================================
   Wide monitors, and frames you can actually see.

   Two problems that compound, both reported from a 2560px screen.

   1. The page containers were a fixed 1080-1140px whatever the screen.
      On a 1440px monitor that fills 75% of the width and looks right.
      On 2560px it fills 42%, so the site becomes a narrow column
      marooned in ~1500px of empty white and everything reads as small
      and thin. Nothing changes colour; it just shrinks relative to the
      screen.

   2. The frame around a job ad was #ece6db on white: a contrast ratio
      of 1.24:1. That is a hint of a line on any display and vanishes on
      a large bright one.

   The border fix is deliberately NOT taken to 3:1. At that level a card
   frame reads as a wireframe. Around 1.75:1 plus a soft resting shadow
   gives a card an edge you can see without outlining everything, and
   the shadow does most of the work on a big screen.
   ============================================================ */

@media (min-width: 1600px) {
  .fmjhero-card, .fmjjobs, .sec-wide, .layout, .aw-inner, .nowwhat, .empx-wrap,
  [style*="max-width:1080px"], [style*="max-width: 1080px"],
  [style*="max-width:1100px"], [style*="max-width: 1100px"],
  [style*="max-width:1140px"], [style*="max-width: 1140px"] {
    max-width: 1320px !important;
  }
}
@media (min-width: 2000px) {
  .fmjhero-card, .fmjjobs, .sec-wide, .layout, .aw-inner, .nowwhat, .empx-wrap,
  [style*="max-width:1080px"], [style*="max-width: 1080px"],
  [style*="max-width:1100px"], [style*="max-width: 1100px"],
  [style*="max-width:1140px"], [style*="max-width: 1140px"] {
    max-width: 1440px !important;
  }
}

/* Frames. Raised from 1.24:1 to about 1.75:1, keeping each one's own hue
   so the warm cream side and the cool grey side still look like themselves. */
:root {
  --border-w: #d5c9b4;
  --border: #d2d9e4;
  --border2: #ddd2bd;
}

/* A resting shadow, not just one on hover. A card with a 1px line and no
   depth disappears into a big white page. */
.row, .jobcard, .post-card, .contact-card, .niche-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
}
.row:hover, .jobcard:hover, .post-card:hover, .niche-card:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 10px 28px rgba(15, 23, 42, .09);
}