/* Motor Midway — overrides that belong to this property, not to the shared
   design. Loaded AFTER monogram.css by every public/midway/** page.
   monogram.css is shared with the live Motor Tides site and must not be edited
   for Midway's sake; this file is where "Midway needs this to differ" lives.

   Ten pages needed the identical override. Repeating six declarations ten times
   in ten inline <style> blocks is exactly the drift that keeps turning up in
   review, so it lives here once.

   ── The interaction-colour problem this file exists to fix ──────────────────

   monogram.css:868-869 force --accent onto every :hover and :focus-visible of
   .bline and .hd .cta:

       html .hd .cta:hover, html .bline:hover, html .close .bline:hover
         { color: var(--accent, #A4592F); text-decoration: underline; … }

   That rule is right for a text link on the cream ground and wrong everywhere
   the element sits on, or fills with, a dark colour — and the `html ` prefix
   means a plain `.bline:hover` in a page's own <style> cannot override it.

   Measured, Midway's --accent #9A5A2B:

     .bline:hover on .close (cream #F3F0E7)      4.76:1   fine
     .bline:hover on .pindex (deep #04343A)      2.49:1   FAILS
     .hd .cta:hover — fills --ink #074B4D        1.82:1   FAILS, badly
     .hd.inv .cta:hover — fills --bg cream       4.76:1   fine

   The header Apply button is the bad one: :hover fills it with --ink and then
   :868 paints the label burnt ochre on it. Nearly illegible, and it is the
   primary conversion control on every light page.

   MOTOR TIDES HAS THE SAME DEFECT with its own accent — 1.91:1 and 2.60:1. It
   is inherited, not introduced here, and it is NOT fixed by this file because
   monogram.css is live. Worth fixing there on its own merits.

   WCAG 1.4.3 wants 4.5:1 for this text. axe cannot catch any of it: its
   colour-contrast rules do not evaluate :hover or :focus-visible states.
   __tests__/a11y-contrast.test.mjs is where a guard for this belongs. */

/* 1. Dark sections: the accent is unreadable, the tint is the dark-ground
      counterpart of it. #E8C08F on #04343A measures 7.94:1. */
html .pindex .bline:hover,
html .pindex .bline:focus-visible,
html [data-dark] .bline:hover,
html [data-dark] .bline:focus-visible,
html .pindex summary:focus-visible,
html [data-dark] summary:focus-visible {
  color: var(--accent-tint);
  border-color: var(--accent-tint);
  outline-color: var(--accent-tint);
}

/* 2. The header CTA inverts on hover — it FILLS, so its label must contrast
      with the fill, not with the page. monogram.css:264-265 already said so;
      :868 then overrode the colour and not the background. Restore the pairing
      each fill implies: cream on ink, ink on cream. Both measure 11.2:1. */
html .hd .cta:hover,
html .hd .cta:focus-visible {
  color: var(--bg);
}
html .hd.inv .cta:hover,
html .hd.inv .cta:focus-visible {
  color: var(--ink);
}

/* 3. Keep the non-colour cue. :868 pairs the colour change with an underline so
      a hover never depends on hue alone; the fill is its own strong cue here,
      and an underline on a filled button reads as a mistake. */
html .hd .cta:hover,
html .hd.inv .cta:hover {
  text-decoration: none;
}

/* 4. .bline is a BORDERED BUTTON, and :868's underline was written for a text
      link on cream. Inside a box it reads as a mistake — the same defect rule 3
      removes from the header CTA, which .bline was never added to. Reported on
      three separate buttons before it was traced to one rule.

      Replace it with an AREA cue rather than nothing, so the hover is not
      carried by hue alone: the plate tints and the border warms. Deliberately
      NOT a cream fill — cream is .bfill's resting state, and .bline sits
      directly beside a .bfill in every .pactions row, so filling would make the
      secondary button impersonate the primary next to it.

      This also settles an inconsistency in the shared sheet. The wash at
      `.pactions button.bline:hover` matches only <button>, so an
      <a class="bline"> — which is what the home page ships — got the underline
      and no plate at all. One control, two hovers, decided by tag name. These
      selectors are element-agnostic. */
html .bline:hover,
html .bline:focus-visible,
html .close .bline:hover,
html .close .bline:focus-visible {
  text-decoration: none;
}

/* The plate is the DEFAULT for every .bline, with the dark grounds overriding
   it below. Enumerating the light sections instead — which this rule first did,
   listing only .close — left .bline in any other cream section (.tours on the
   floorplans page) with the underline removed and nothing put back, so its
   hover was carried by hue alone. A default plus an override cannot have that
   gap. Cream ground: --accent, which measures 4.76:1 there. */
html .bline:hover,
html .bline:focus-visible {
  background-color: rgba(154, 90, 43, 0.08);
}

/* Dark grounds: the ochre tint that rule 1 already proved legible at 7.94:1,
   at low alpha so it reads as a plate rather than a fill. */
html .pindex .bline:hover,
html .pindex .bline:focus-visible,
html [data-dark] .bline:hover,
html [data-dark] .bline:focus-visible {
  background-color: rgba(232, 192, 143, 0.12);
}

/* 5. Photo tiles are not text links.

      monogram.css:507-521 gives every `main a[href]` a 6px padding-bottom and an
      animated 1px underline, exempting only .tide-button, .bfill, .bline, .tcard
      and the map controls. The gallery's three tile components are not on that
      list, so all 58 of them take the treatment meant for prose:

        - a 6px band under every photograph, the tile's graphite ground showing
          through below the image (measured on the built page: tile 163.02px,
          image 157.02px);
        - the .gtile caption scrim, which is inset to the tile, ending 6px short
          of the image it is supposed to sit on;
        - .gindex a's authored `padding:20px 18px 22px` computing to
          `20px 18px 6px`, because the shared rule outranks it;
        - an ink underline sweeping the full width of a photograph on hover.

      Same shape as rule 4: a rule written for text links, applied to something
      that is not one. gallery.html is the only page in either property's tree
      with an image-wrapping <a> inside <main>, so nothing else is affected.

      !important rather than a specificity duel. The shared rule's :is() carries
      (0,3,2) — inherited from its `.ft nav:not([aria-label]) a[href]` branch —
      which no readable selector for a bare `.gtile` can beat. This file exists
      to override a stylesheet it may not edit; that is what !important is for. */
html .gtile,
html .homestrip a,
html .gindex a {
  padding-bottom: 0 !important;
  background-image: none !important;
}
html .gindex a {
  padding-bottom: 22px !important;
}

/* 6. The narrow-viewport header rescue.

      MOTOR MIDWAY is a glyph longer than MOTOR TIDES, so the header lockup runs
      out of room sooner and needs tightening below 400px that Tides never did.

      It must sit AFTER monogram.css, which restates .hd .cta and .brand b at
      equal specificity inside its own media queries — so an identical rule in a
      page's FIRST <style> block, ahead of the <link>, does nothing at all. That
      is precisely what shipped on contact, privacy and accessibility, whose
      copies sit before the link and have therefore never once applied, leaving
      those three pages with an untightened lockup at 320px.

      The other seven each carried their own post-monogram copy of the same four
      declarations — the drift this file was created to stop. One copy here
      covers all ten, because every Midway page loads midway.css after
      monogram.css. */
@media (max-width:400px) {
  html .hd .brand { flex-shrink: 0 }
  html .hd .brand b { letter-spacing: .05em }
  html .hd .cta { font-size: .6rem; letter-spacing: .05em; padding: 9px 9px }
  html .hd .mbtn { margin-left: 6px }
}

/* Floor-plan drawings — tighten the whitespace (ZenTao #568).
   The shared .plan-drawing (monogram.css:268-269) frames each plan in a white
   box with a fixed 24px inset plus object-fit:contain, which on Midway's plans
   left a wide white margin around the drawing. Cut the inset so the plans read
   larger in the card. Midway-only: Motor Tides does not load midway.css. */
.plan-drawing img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px) }